Browse Source
Phase 32: Chat UI Foundation - 1 plan created (32-02) - 3 tasks defined - Ready for executionhandoff-20260429-1057
shrimbly
6 months ago
1 changed files with 168 additions and 0 deletions
@ -0,0 +1,168 @@ |
|||||
|
--- |
||||
|
phase: 32-chat-ui-foundation |
||||
|
plan: 02 |
||||
|
type: execute |
||||
|
--- |
||||
|
|
||||
|
<objective> |
||||
|
Connect chat conversation to workflow generation, enabling users to build workflows from chat discussions. |
||||
|
|
||||
|
Purpose: Complete the chat-to-workflow flow where users can discuss workflow ideas with the assistant, see a proposal, and generate the workflow with one click. |
||||
|
Output: ChatPanel with "Build Workflow" button, proposal display in chat, and workflow loading integration. |
||||
|
</objective> |
||||
|
|
||||
|
<execution_context> |
||||
|
~/.claude/get-shit-done/workflows/execute-phase.md |
||||
|
./summary.md |
||||
|
</execution_context> |
||||
|
|
||||
|
<context> |
||||
|
@.planning/PROJECT.md |
||||
|
@.planning/ROADMAP.md |
||||
|
@.planning/STATE.md |
||||
|
@.planning/phases/32-chat-ui-foundation/32-01-SUMMARY.md |
||||
|
@.planning/phases/31-workflow-proposal-system/31-01-SUMMARY.md |
||||
|
@.planning/phases/31-workflow-proposal-system/31-02-SUMMARY.md |
||||
|
|
||||
|
# Key files from Phase 31 and 32-01: |
||||
|
@src/components/ChatPanel.tsx |
||||
|
@src/app/api/chat/route.ts |
||||
|
@src/types/quickstart.ts |
||||
|
@src/app/api/quickstart/propose/route.ts |
||||
|
@src/app/api/quickstart/route.ts |
||||
|
|
||||
|
# Store for workflow loading: |
||||
|
@src/store/workflowStore.ts |
||||
|
|
||||
|
**Tech stack available:** ai@6.0.49, @ai-sdk/google@3.0.13, @ai-sdk/react |
||||
|
**Established patterns:** |
||||
|
- useChat hook with DefaultChatTransport |
||||
|
- WorkflowProposal types for reviewable structure |
||||
|
- /api/quickstart/propose for proposal generation |
||||
|
- /api/quickstart for workflow JSON generation |
||||
|
- loadWorkflow() to load WorkflowFile into store |
||||
|
|
||||
|
**Constraining decisions:** |
||||
|
- Phase 31: Proposal types focus on purpose/description, not internal state |
||||
|
- Phase 32-01: Manage input state locally (AI SDK v6) |
||||
|
- Phase 32-01: Use toUIMessageStreamResponse() for useChat compatibility |
||||
|
</context> |
||||
|
|
||||
|
<tasks> |
||||
|
|
||||
|
<task type="auto"> |
||||
|
<name>Task 1: Add "Build Workflow" button and proposal state to ChatPanel</name> |
||||
|
<files>src/components/ChatPanel.tsx</files> |
||||
|
<action> |
||||
|
Extend ChatPanel to support workflow building: |
||||
|
|
||||
|
1. Add props for workflow building: |
||||
|
- onBuildWorkflow: (description: string) => Promise<void> - callback to parent |
||||
|
|
||||
|
2. Add internal state: |
||||
|
- buildingWorkflow: boolean - loading state for the build button |
||||
|
|
||||
|
3. Add "Build Workflow" button below the input area: |
||||
|
- Only visible when there are assistant messages (conversation has started) |
||||
|
- Disabled while buildingWorkflow is true |
||||
|
- On click: extract conversation context and call onBuildWorkflow prop |
||||
|
- Style: w-full bg-green-600 hover:bg-green-500, similar to send button style |
||||
|
- Text: "Build Workflow" or "Building..." when loading |
||||
|
|
||||
|
4. Extract conversation description: |
||||
|
- Combine user messages to form the description for the proposal |
||||
|
- Simple approach: join all user message texts with newlines |
||||
|
- Pass this to onBuildWorkflow callback |
||||
|
|
||||
|
Keep the existing chat functionality unchanged. The parent component (WorkflowCanvas) will handle the actual API calls. |
||||
|
</action> |
||||
|
<verify>TypeScript compiles, button appears when conversation exists</verify> |
||||
|
<done>ChatPanel has "Build Workflow" button that passes conversation context to parent callback</done> |
||||
|
</task> |
||||
|
|
||||
|
<task type="auto"> |
||||
|
<name>Task 2: Integrate workflow generation in WorkflowCanvas</name> |
||||
|
<files>src/components/WorkflowCanvas.tsx</files> |
||||
|
<action> |
||||
|
Connect ChatPanel to workflow generation flow: |
||||
|
|
||||
|
1. Add state for workflow building: |
||||
|
- isBuildingWorkflow: boolean |
||||
|
|
||||
|
2. Create handleBuildWorkflow async function: |
||||
|
- Set isBuildingWorkflow to true |
||||
|
- Call /api/quickstart with description and contentLevel "full" |
||||
|
- On success: call loadWorkflow() from store with the generated workflow |
||||
|
- On success: close the chat panel (setIsChatOpen(false)) |
||||
|
- On error: show toast error message |
||||
|
- Always set isBuildingWorkflow to false in finally block |
||||
|
|
||||
|
3. Pass handleBuildWorkflow to ChatPanel: |
||||
|
- <ChatPanel |
||||
|
isOpen={isChatOpen} |
||||
|
onClose={() => setIsChatOpen(false)} |
||||
|
onBuildWorkflow={handleBuildWorkflow} |
||||
|
isBuildingWorkflow={isBuildingWorkflow} |
||||
|
/> |
||||
|
|
||||
|
4. Update ChatPanel props interface to accept: |
||||
|
- onBuildWorkflow: (description: string) => Promise<void> |
||||
|
- isBuildingWorkflow?: boolean (optional, defaults to false) |
||||
|
|
||||
|
Use existing toast system for error display. The workflow loading will clear the canvas and load the new workflow. |
||||
|
</action> |
||||
|
<verify>npm run build succeeds, clicking "Build Workflow" calls API and loads workflow</verify> |
||||
|
<done>Clicking "Build Workflow" generates workflow via API and loads it onto canvas</done> |
||||
|
</task> |
||||
|
|
||||
|
<task type="auto"> |
||||
|
<name>Task 3: Update ChatPanel to use external loading state</name> |
||||
|
<files>src/components/ChatPanel.tsx</files> |
||||
|
<action> |
||||
|
Update ChatPanel to use the loading state from props instead of internal state: |
||||
|
|
||||
|
1. Update ChatPanelProps interface: |
||||
|
- Add isBuildingWorkflow?: boolean prop |
||||
|
|
||||
|
2. Remove internal buildingWorkflow state (if added in Task 1), use prop instead |
||||
|
|
||||
|
3. Update "Build Workflow" button: |
||||
|
- Disabled when isBuildingWorkflow is true OR when isLoading (chat streaming) |
||||
|
- Show "Building..." text when isBuildingWorkflow is true |
||||
|
- Show spinner or loading dots when building |
||||
|
|
||||
|
4. Ensure button doesn't interfere with chat streaming: |
||||
|
- Chat input remains functional during workflow building |
||||
|
- But "Build Workflow" button is disabled to prevent double submissions |
||||
|
|
||||
|
This task ensures the loading state is properly synchronized between ChatPanel and WorkflowCanvas. |
||||
|
</action> |
||||
|
<verify>npm run dev, start conversation, click Build Workflow, see loading state, workflow loads</verify> |
||||
|
<done>Build workflow button shows proper loading state synced with parent component</done> |
||||
|
</task> |
||||
|
|
||||
|
</tasks> |
||||
|
|
||||
|
<verification> |
||||
|
Before declaring phase complete: |
||||
|
- [ ] `npm run build` succeeds without errors |
||||
|
- [ ] Chat button opens ChatPanel |
||||
|
- [ ] After starting a conversation, "Build Workflow" button appears |
||||
|
- [ ] Clicking "Build Workflow" shows loading state |
||||
|
- [ ] Workflow is generated and loaded onto canvas |
||||
|
- [ ] Chat panel closes after successful workflow load |
||||
|
- [ ] Error shows toast if generation fails |
||||
|
- [ ] No TypeScript errors |
||||
|
</verification> |
||||
|
|
||||
|
<success_criteria> |
||||
|
- All tasks completed |
||||
|
- All verification checks pass |
||||
|
- No errors or warnings introduced |
||||
|
- Chat conversation can be converted to a workflow |
||||
|
- End-to-end flow works: chat -> discuss -> build -> workflow on canvas |
||||
|
</success_criteria> |
||||
|
|
||||
|
<output> |
||||
|
After completion, create `.planning/phases/32-chat-ui-foundation/32-02-SUMMARY.md` |
||||
|
</output> |
||||
Loading…
Reference in new issue