140 lines
5.7 KiB
Markdown
140 lines
5.7 KiB
Markdown
# Iframe Chat Page Implementation Plan
|
|
|
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
|
|
|
**Goal:** Add a standalone `/page/workspace/chats_iframe/*` chat page that reuses the existing thread system and history, while showing only `你好` and no input box before the first user message.
|
|
|
|
**Architecture:** Keep the existing workspace shell and chat runtime intact, then add a new route pair and a copied page component dedicated to the iframe path. The new page keeps the original chat behavior once a thread already has messages, but it owns its empty-state rendering and URL transition to `/page/workspace/chats_iframe/:thread_id`.
|
|
|
|
**Tech Stack:** React, TypeScript, React Router, Next navigation shim, existing LangGraph thread hooks
|
|
|
|
---
|
|
|
|
### Task 1: Add the iframe chat routes
|
|
|
|
**Files:**
|
|
- Modify: `frontend-web/src/pages/WorkspaceRoutes.tsx`
|
|
|
|
- [ ] **Step 1: Add `chats_iframe/new` and `chats_iframe/:thread_id` routes that render the new page inside the existing workspace layout and chat runtime**
|
|
|
|
```tsx
|
|
<Route
|
|
path="chats_iframe/new"
|
|
element={
|
|
<WorkspaceLayout {...layoutProps}>
|
|
<ChatRuntime>
|
|
<IframeChatPage />
|
|
</ChatRuntime>
|
|
</WorkspaceLayout>
|
|
}
|
|
/>
|
|
<Route
|
|
path="chats_iframe/:thread_id"
|
|
element={
|
|
<WorkspaceLayout {...layoutProps}>
|
|
<ChatRuntime>
|
|
<IframeChatPage />
|
|
</ChatRuntime>
|
|
</WorkspaceLayout>
|
|
}
|
|
/>
|
|
```
|
|
|
|
- [ ] **Step 2: Ensure the new route imports compile cleanly**
|
|
|
|
Run: `rg -n "IframeChatPage|chats_iframe" frontend-web/src/pages/WorkspaceRoutes.tsx`
|
|
Expected: `WorkspaceRoutes.tsx` contains one import for `IframeChatPage` and both `chats_iframe` route entries.
|
|
|
|
### Task 2: Add a standalone iframe chat page
|
|
|
|
**Files:**
|
|
- Create: `frontend-web/src/pages/IframeChatPage.tsx`
|
|
- Reference: `frontend-web/src/pages/ChatPage.tsx`
|
|
|
|
- [ ] **Step 1: Copy the current `ChatPage` implementation into `IframeChatPage` and preserve the existing chat runtime integration**
|
|
|
|
```tsx
|
|
export default function IframeChatPage() {
|
|
const routeBase = useRouteBase();
|
|
const router = useRouter();
|
|
const [showFollowups, setShowFollowups] = useState(false);
|
|
const [hasStartedConversation, setHasStartedConversation] = useState(false);
|
|
const { threadId, setThreadId, isNewThread, setIsNewThread, isMock } =
|
|
useThreadChat();
|
|
// keep the rest of the existing chat hooks and handlers aligned with ChatPage
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 2: Change the thread creation URL replacement to stay on the iframe route family**
|
|
|
|
```tsx
|
|
onStart: (createdThreadId) => {
|
|
setThreadId(createdThreadId);
|
|
setIsNewThread(false);
|
|
history.replaceState(
|
|
null,
|
|
"",
|
|
`${window.location.pathname}${window.location.search}#${routeBase}/chats_iframe/${createdThreadId}`,
|
|
);
|
|
},
|
|
```
|
|
|
|
- [ ] **Step 3: Replace the default landing state with a simple `你好` view and do not render the input box while the iframe page is still a brand-new untouched chat**
|
|
|
|
```tsx
|
|
{isLandingState && mounted ? (
|
|
<div className="flex min-h-[240px] items-center justify-center">
|
|
<div className="text-2xl font-medium">你好</div>
|
|
</div>
|
|
) : null}
|
|
{!isLandingState &&
|
|
(mounted ? (
|
|
<div className="w-full -translate-y-4">
|
|
<InputBox
|
|
className="w-full"
|
|
isNewThread={false}
|
|
threadId={threadId}
|
|
autoFocus={false}
|
|
status={thread.error ? "error" : thread.isLoading ? "streaming" : "ready"}
|
|
context={settings.context}
|
|
disabled={env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" || isUploading}
|
|
onContextChange={(context) => setSettings("context", context)}
|
|
promptPrefix={promptPrefixProp}
|
|
onFollowupsVisibilityChange={setShowFollowups}
|
|
onSubmit={handleSubmit}
|
|
onStop={handleStop}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div aria-hidden="true" className="bg-background/5 h-32 w-full -translate-y-4 rounded-3xl border" />
|
|
))}
|
|
```
|
|
|
|
- [ ] **Step 4: Keep message rendering, thread title, export, token usage, todos, artifact triggers, and all post-first-message behavior identical to the original page**
|
|
|
|
Run: `rg -n "MessageList|ThreadTitle|ArtifactTrigger|TokenUsageIndicator|TodoList" frontend-web/src/pages/IframeChatPage.tsx`
|
|
Expected: The new page still renders the same core chat primitives used by `ChatPage`.
|
|
|
|
### Task 3: Verify the new page compiles
|
|
|
|
**Files:**
|
|
- Test: `frontend-web/src/pages/IframeChatPage.tsx`
|
|
- Test: `frontend-web/src/pages/WorkspaceRoutes.tsx`
|
|
|
|
- [ ] **Step 1: Run the frontend build**
|
|
|
|
Run: `cmd /c npm run build`
|
|
Expected: Build succeeds without TypeScript or bundling errors related to `IframeChatPage` or `chats_iframe`.
|
|
|
|
- [ ] **Step 2: Spot-check the changed routes in the built source**
|
|
|
|
Run: `rg -n "chats_iframe" frontend-web/src/pages`
|
|
Expected: Matches appear in `WorkspaceRoutes.tsx` and `IframeChatPage.tsx`.
|
|
|
|
- [ ] **Step 3: Commit after verification**
|
|
|
|
```bash
|
|
git add docs/superpowers/plans/2026-06-01-iframe-chat-page.md frontend-web/src/pages/WorkspaceRoutes.tsx frontend-web/src/pages/IframeChatPage.tsx
|
|
git commit -m "feat: add iframe chat page routes"
|
|
```
|