@allbluecn/web-app 0.17.2 → 0.18.0

package/src/components/design/editor/collaboration/design-agent-panel.tsx

@@ -0,0 +1,759 @@
+import { m } from '@/paraglide/messages.js'
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useState, useRef, useEffect, useCallback, useMemo } from "react"
+import { Bot, Loader2, User, Plus, Trash2, ChevronDown, MessageSquare, Sparkles } from "lucide-react"
+import { fetchServerSentEvents } from "@tanstack/ai-react"
+import { cn } from "@/lib/utils"
+import { toast } from '@allbluecn/ui/toast'
+import { generatePrototypeFn, type PrototypeScene } from "@/server/serverFns/design/ai/generate-prototype"
+import { listEnabledModelsFn } from "@/server/serverFns/design/ai/providers"
+import {
+  listAgentConversationsFn,
+  createAgentConversationFn,
+  deleteAgentConversationFn,
+  clearAgentConversationsFn,
+  getAgentMessagesFn,
+  saveAgentMessageFn,
+} from "@/server/serverFns/design/ai/agent-conversations"
+import {
+  BOARD_NODE_ID,
+  type SceneDocument,
+  type SceneNode,
+} from "@/components/design/canvas/document/types"
+import type { LeaferEngine } from "@/design-engine/engine/app"
+import {
+  useCanvasEngineOptional,
+  useSceneDoc,
+  useSelection,
+} from "@/components/design/canvas/react/hooks"
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "@allbluecn/ui/dropdown-menu"
+import { AgentInput, type ModelOption } from "./agent-input"
+
+// ===== FS-8.3 流式生成（SSE /api/design/prototype）=====
+// 路由侧无上游超时（批 Q 遗留），面板侧自我兜底：首事件 30s、事件间空闲 60s，
+// 超时与「停止」按钮走同一 AbortController 路径；中断/异常均不回滚已 append
+// 内容（每批 canvas/frame、canvas/nodes 已是独立 history 快照），仅清生成态。
+const STREAM_URL = "/api/design/prototype"
+const FIRST_EVENT_TIMEOUT_MS = 30_000
+const IDLE_TIMEOUT_MS = 60_000
+
+type AbortReason = "user" | "timeout"
+
+/** 增量批次 id 去冲突器：服务端 `n_ai_<stamp>_<seq>` 不感知画布既有 id，撞 id 时
+ *  本地重生成（同 mergeAiScene 规则）；跨批维护 idMap 供 canvas/nodes 的
+ *  parentId 重映射到 frame 的本地 id */
+function createBatchMapper(usedIds: Set<string>): (nodes: SceneNode[]) => SceneNode[] {
+  const idMap = new Map<string, string>()
+  const stamp = Date.now().toString(36)
+  let seq = 0
+  const freshId = () => {
+    let id = ""
+    do {
+      seq += 1
+      id = `n_ai_${stamp}_${seq}`
+    } while (usedIds.has(id))
+    usedIds.add(id)
+    return id
+  }
+  return (nodes: SceneNode[]): SceneNode[] =>
+    nodes
+      .filter((node) => node.id !== BOARD_NODE_ID)
+      .map((node) => {
+        const source = node.id
+        const id = source && !usedIds.has(source) ? source : freshId()
+        usedIds.add(id)
+        if (source) idMap.set(source, id)
+        return {
+          ...node,
+          id,
+          parentId: node.parentId
+            ? idMap.get(node.parentId) ?? node.parentId
+            : BOARD_NODE_ID,
+        }
+      })
+}
+
+interface ChatMessage {
+  id: string
+  role: "user" | "assistant"
+  content: string
+  isError?: boolean
+}
+
+// ===== FS-8.4 组件级重生成：选中子树提取 =====
+
+/** 选中子树上送给模型的压缩字段白名单（与流式协议 aiNodeSchema 对齐：
+ *  几何 + 外观 + 业务 props；parentId/zIndex/constraints 等对重生成无收益，剥离） */
+const SELECTION_NODE_FIELDS = [
+  "id",
+  "kind",
+  "type",
+  "name",
+  "x",
+  "y",
+  "width",
+  "height",
+  "rotation",
+  "visible",
+  "locked",
+  "fills",
+  "strokes",
+  "props",
+  "style",
+] as const
+
+function compactSelectionNode(node: SceneNode): Record<string, unknown> {
+  const out: Record<string, unknown> = {}
+  for (const field of SELECTION_NODE_FIELDS) {
+    const value = node[field]
+    if (value !== undefined) out[field] = value
+  }
+  return out
+}
+
+/** 选中子树提取：getDoc 扁平节点数组按 parentId 收敛出每个选中节点的完整
+ *  子树（保持文档顺序，先根后后代），压缩到协议必要字段 */
+function extractSelectionSubtree(
+  doc: SceneDocument,
+  rootIds: readonly string[],
+): Array<Record<string, unknown>> {
+  const childrenByParent = new Map<string, SceneNode[]>()
+  for (const node of doc.nodes) {
+    if (node.id === BOARD_NODE_ID) continue
+    const key = node.parentId ?? BOARD_NODE_ID
+    const bucket = childrenByParent.get(key)
+    if (bucket) bucket.push(node)
+    else childrenByParent.set(key, [node])
+  }
+  const out: Array<Record<string, unknown>> = []
+  const collectChildren = (parentId: string): void => {
+    for (const child of childrenByParent.get(parentId) ?? []) {
+      out.push(compactSelectionNode(child))
+      collectChildren(child.id)
+    }
+  }
+  for (const rootId of rootIds) {
+    const root = doc.nodes.find((node) => node.id === rootId)
+    if (!root) continue
+    out.push(compactSelectionNode(root))
+    collectChildren(root.id)
+  }
+  return out
+}
+
+/** 选中节点的父画板 id：沿 parentId 上溯到最近的 frame（选中画板自身时取其父） */
+function findAncestorFrameId(doc: SceneDocument, nodeId: string): string | undefined {
+  const byId = new Map(doc.nodes.map((node) => [node.id, node]))
+  let cursor = byId.get(nodeId)?.parentId ?? null
+  const seen = new Set<string>()
+  while (cursor && !seen.has(cursor)) {
+    seen.add(cursor)
+    const node = byId.get(cursor)
+    if (!node) return undefined
+    if (node.type === "frame") return node.id
+    cursor = node.parentId
+  }
+  return undefined
+}
+
+interface ConversationItem {
+  id: string
+  title: string
+  createdAt: string | Date
+  updatedAt: string | Date
+}
+
+interface DesignAgentPanelProps {
+  designId: string
+  onSceneGenerated?: (scene: PrototypeScene) => void
+  selectedModel: string
+  onModelChange: (model: string) => void
+}
+
+/** 将会话按 updatedAt 分组（今天/昨天/本周/更早） */
+function groupConversations(conversations: ConversationItem[]): Array<{ label: string; items: ConversationItem[] }> {
+  const now = new Date()
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+  const yesterday = new Date(today.getTime() - 86400000)
+  const weekAgo = new Date(today.getTime() - 7 * 86400000)
+
+  const groupKeys = ["today", "yesterday", "thisWeek", "earlier"]
+  const groups: Record<string, ConversationItem[]> = {
+    [groupKeys[0]]: [],
+    [groupKeys[1]]: [],
+    [groupKeys[2]]: [],
+    [groupKeys[3]]: [],
+  }
+  for (const conv of conversations) {
+    const d = new Date(conv.updatedAt)
+    if (d >= today) groups[groupKeys[0]].push(conv)
+    else if (d >= yesterday) groups[groupKeys[1]].push(conv)
+    else if (d >= weekAgo) groups[groupKeys[2]].push(conv)
+    else groups[groupKeys[3]].push(conv)
+  }
+  const LABELS: Record<string, () => string> = {
+    today: m.chat_groups_today,
+    yesterday: m.chat_groups_yesterday,
+    thisWeek: m.chat_groups_thisWeek,
+    earlier: m.chat_groups_earlier,
+  }
+  return groupKeys.map((key) => ({ label: LABELS[key]?.() ?? key, items: groups[key] }))
+}
+
+export function DesignAgentPanel({ designId, onSceneGenerated, selectedModel, onModelChange }: DesignAgentPanelProps) {
+  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [input, setInput] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [streaming, setStreaming] = useState(false)
+  const [models, setModels] = useState<ModelOption[]>([])
+  const [conversations, setConversations] = useState<ConversationItem[]>([])
+  const [conversationId, setConversationId] = useState<string | null>(null)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  // 流式会话 abort：停止按钮 / 超时 / 卸载 / 切换会话共用同一路径
+  const abortRef = useRef<AbortController | null>(null)
+  const abortReasonRef = useRef<AbortReason>("user")
+  // FS-8.3 流式消费需要画布引擎（逐批落画布）与当前选中（目标画板）
+  const canvasEngine = useCanvasEngineOptional()
+  const selection = useSelection()
+  const doc = useSceneDoc()
+  // FS-8.4 可重生成选中：排除 board 与画板（画板选中 = FS-8.1「在其内生成」
+  // 目标语义，不进入 regenerate）。React 层只持 id，节点类型从 doc 快照派生
+  const regenSelection = useMemo(() => {
+    if (selection.length === 0) return []
+    const typeById = new Map(doc.nodes.map((node) => [node.id, node.type]))
+    return selection.filter(
+      (id) => id !== BOARD_NODE_ID && typeById.get(id) !== "frame",
+    )
+  }, [selection, doc])
+
+  const refreshConversations = useCallback(async () => {
+    try {
+      const list = await listAgentConversationsFn({ data: { designId } })
+      setConversations(list as ConversationItem[])
+    } catch {}
+  }, [designId])
+
+  // 首次加载会话列表
+  useEffect(() => {
+    refreshConversations()
+  }, [refreshConversations])
+
+  // 会话列表变化时，默认选中最新（第一个）会话；无会话则 conversationId=null（空状态）
+  useEffect(() => {
+    if (conversations.length > 0 && !conversationId) {
+      setConversationId(conversations[0].id)
+    }
+    if (conversations.length === 0 && conversationId) {
+      setConversationId(null)
+      setMessages([])
+    }
+  }, [conversations])
+
+  // 切换会话时加载消息；流式进行中切换走同一 abort 路径（保留已生成内容）
+  useEffect(() => {
+    abortReasonRef.current = "user"
+    abortRef.current?.abort()
+    if (!conversationId) {
+      setMessages([])
+      return
+    }
+    getAgentMessagesFn({ data: { conversationId } })
+      .then((msgs: unknown[]) => {
+        setMessages(
+          (msgs as Array<{ id: string; role: string; content: string; isError: boolean }>).map((m) => ({
+            id: m.id,
+            role: m.role as "user" | "assistant",
+            content: m.content,
+            isError: m.isError,
+          })),
+        )
+      })
+      .catch(() => setMessages([]))
+  }, [conversationId])
+
+  // 卸载中断流式会话（保留已生成内容，与停止按钮同一路径）
+  useEffect(() => {
+    return () => {
+      abortReasonRef.current = "user"
+      abortRef.current?.abort()
+    }
+  }, [])
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [messages])
+
+  useEffect(() => {
+    listEnabledModelsFn()
+      .then((data: ModelOption[]) => {
+        const typed = data as ModelOption[]
+        setModels(typed)
+        if (typed.length > 0 && !selectedModel) onModelChange(typed[0].model)
+      })
+      .catch(() => {})
+  }, [])
+
+  const handleStop = useCallback(() => {
+    abortReasonRef.current = "user"
+    abortRef.current?.abort()
+  }, [])
+
+  // ===== FS-8.3/8.4 流式消费：SSE AG-UI CUSTOM → 引擎逐批落画布 =====
+  const runPrototypeStream = async (engine: LeaferEngine, prompt: string, convId: string) => {
+    const controller = new AbortController()
+    abortRef.current = controller
+    abortReasonRef.current = "user"
+    const generatingFrameIds = new Set<string>()
+    const accumulated: SceneNode[] = []
+    let replacedCount = 0
+    const mapBatch = createBatchMapper(new Set(engine.getDoc().nodes.map((node) => node.id)))
+
+    const doc = engine.getDoc()
+    // FS-8.4 regenerate：选中元素 → 选中子树 + 父画板上下文；
+    // FS-8.1 generate：单选 frame → 在其内生成（不新建 frame）
+    const regenerate = regenSelection.length > 0
+    const selectedFrameId = regenerate
+      ? findAncestorFrameId(doc, regenSelection[0])
+      : selection.length === 1
+        ? doc.nodes.find((node) => node.id === selection[0] && node.type === "frame")?.id
+        : undefined
+
+    let firstEventTimer: ReturnType<typeof setTimeout> | null = null
+    let idleTimer: ReturnType<typeof setTimeout> | null = null
+    const abortForTimeout = () => {
+      abortReasonRef.current = "timeout"
+      controller.abort()
+    }
+    const armIdleTimer = () => {
+      if (idleTimer) clearTimeout(idleTimer)
+      idleTimer = setTimeout(abortForTimeout, IDLE_TIMEOUT_MS)
+    }
+    const clearTimers = () => {
+      if (firstEventTimer) {
+        clearTimeout(firstEventTimer)
+        firstEventTimer = null
+      }
+      if (idleTimer) {
+        clearTimeout(idleTimer)
+        idleTimer = null
+      }
+    }
+    firstEventTimer = setTimeout(abortForTimeout, FIRST_EVENT_TIMEOUT_MS)
+
+    let doneMessage: string | null = null
+    let sawDone = false
+    let streamError: unknown = null
+
+    try {
+      const connection = fetchServerSentEvents(STREAM_URL)
+      const stream = connection.connect(
+        [] as never[],
+        {
+          prompt,
+          mode: regenerate ? "regenerate" : "generate",
+          ...(selectedModel ? { model: selectedModel } : {}),
+          ...(selectedFrameId ? { selectedFrameId } : {}),
+          ...(regenerate
+            ? { selection: extractSelectionSubtree(doc, regenSelection) }
+            : {}),
+        },
+        controller.signal,
+      )
+      for await (const chunk of stream) {
+        // 首事件已到解除首事件超时；每个事件重挂空闲超时——空闲窗口自最近
+        // 事件起算，健康长流（持续出事件）不会被 60s 硬上限误杀
+        if (firstEventTimer) {
+          clearTimeout(firstEventTimer)
+          firstEventTimer = null
+        }
+        armIdleTimer()
+        if (chunk.type !== "CUSTOM") continue
+        const value = chunk.value as
+          | {
+              frame?: SceneNode
+              nodes?: SceneNode[]
+              removeIds?: unknown
+              message?: unknown
+            }
+          | undefined
+        switch (chunk.name) {
+          case "canvas/frame": {
+            const frame = value?.frame
+            if (!frame || typeof frame.id !== "string") continue
+            // 「生成中」标记：画板标签插件据此渲染脉冲虚线边框（done/中断清除）
+            const marked: SceneNode = {
+              ...frame,
+              props: { ...(frame.props ?? {}), _generating: true },
+            }
+            const [appended] = mapBatch([marked])
+            if (!appended) continue
+            engine.applyNodesAppend([appended])
+            accumulated.push(appended)
+            generatingFrameIds.add(appended.id)
+            engine.zoomToFrame(appended.id)
+            break
+          }
+          case "canvas/nodes": {
+            const batch = mapBatch(value?.nodes ?? [])
+            if (!batch.length) continue
+            engine.applyNodesAppend(batch)
+            accumulated.push(...batch)
+            break
+          }
+          case "canvas/replace": {
+            // FS-8.4：删旧 + 加新（engine 单条 history 快照，一次 undo 整体
+            // 恢复），新节点由引擎继承锚点 parentId/x/y 并自动选中。
+            // removeIds 兜底校验：非字符串 id 丢弃，空集合交由引擎 no-op 前置拦截
+            const removeIds = Array.isArray(value?.removeIds)
+              ? value.removeIds.filter((id): id is string => typeof id === "string")
+              : []
+            const batch = mapBatch(value?.nodes ?? [])
+            if (!removeIds.length || !batch.length) break
+            engine.replaceNodes(removeIds, batch)
+            accumulated.push(...batch)
+            replacedCount += batch.length
+            break
+          }
+          case "canvas/done": {
+            sawDone = true
+            doneMessage =
+              typeof value?.message === "string" && value.message ? value.message : null
+            break
+          }
+          default:
+            break
+        }
+        if (sawDone) break
+      }
+    } catch (err) {
+      streamError = err
+    } finally {
+      clearTimers()
+    }
+
+    // 中断保留（FS-8.3）：不回滚已 append 内容，仅清「生成中」标记
+    // （updateNodeGeometry 不入 history，避免污染撤销栈）。卸载中断时引擎
+    // 可能已 dispose（assertUsable 抛错）——逐个兜住，保证收尾段（abortRef
+    // 置空 / setStreaming / 会话消息落库 / toast）必达
+    for (const id of generatingFrameIds) {
+      try {
+        engine.updateNodeGeometry(id, { props: { _generating: undefined } })
+      } catch {
+        // 引擎已销毁：标记随画布销毁消失，无需处理
+      }
+    }
+
+    abortRef.current = null
+    setStreaming(false)
+
+    const finishWith = async (content: string, isError?: boolean) => {
+      setMessages((prev) => [
+        ...prev,
+        { id: `a_${Date.now()}`, role: "assistant", content, isError },
+      ])
+      await saveAgentMessageFn({
+        data: {
+          conversationId: convId,
+          role: "assistant",
+          content,
+          isError,
+          ...(isError ? {} : { components: { nodes: accumulated } }),
+        },
+      }).catch(() => {})
+    }
+
+    // abortReasonRef 由 abortForTimeout 闭包写入，经函数间接读以绕开 TS 对
+    // ref 属性的控制流收窄（closure 写入不可见导致恒判 "user"）
+    const readAbortReason = (): AbortReason => abortReasonRef.current
+    if (controller.signal.aborted) {
+      if (readAbortReason() === "timeout") {
+        toast.warning(m.canvas_ai_timeout())
+        await finishWith(m.canvas_ai_timeout())
+      } else {
+        toast.info(m.canvas_ai_stopped())
+        await finishWith(m.canvas_ai_stopped())
+      }
+      return
+    }
+    if (streamError || !sawDone) {
+      const description = streamError
+        ? streamError instanceof Error
+          ? streamError.message
+          : String(streamError)
+        : m.canvas_ai_streamFailed()
+      toast.error(m.canvas_ai_streamFailed(), { description })
+      await finishWith(`${m.canvas_ai_streamFailed()}：${description}`, true)
+      return
+    }
+    // FS-8.4：发生过替换展示「已替换 N 个元素」，否则沿用新增口径
+    const content = `${doneMessage ?? m.canvas_ai_doneFallback()}${
+      replacedCount > 0
+        ? m.canvas_ai_regenDone({ count: replacedCount })
+        : m.agent_addedToCanvas({ count: accumulated.length })
+    }`
+    await finishWith(content)
+  }
+
+  const handleSend = async () => {
+    const trimmed = input.trim()
+    if (!trimmed || loading || streaming) return
+
+    // 确保 conversationId 存在
+    let convId = conversationId
+    if (!convId) {
+      try {
+        const conv = await createAgentConversationFn({
+          data: { designId, title: trimmed.slice(0, 20) },
+        })
+        convId = (conv as { id: string }).id
+        setConversationId(convId)
+        refreshConversations()
+      } catch (err) {
+        const errMsg = err instanceof Error ? err.message : m.agent_createFailed()
+        toast.error(m.agent_createFailed(), { description: errMsg })
+        return
+      }
+    }
+
+    const userMsg: ChatMessage = {
+      id: `u_${Date.now()}`,
+      role: "user",
+      content: trimmed,
+    }
+    setMessages((prev) => [...prev, userMsg])
+    setInput("")
+
+    // 流式主路径（FS-8.3）：引擎挂载时逐批落画布；无引擎（极端降级）走旧非流式入口
+    if (canvasEngine) {
+      setStreaming(true)
+      await saveAgentMessageFn({
+        data: { conversationId: convId, role: "user", content: trimmed },
+      }).catch(() => {})
+      await runPrototypeStream(canvasEngine, trimmed, convId)
+      refreshConversations()
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      await saveAgentMessageFn({
+        data: { conversationId: convId, role: "user", content: trimmed },
+      })
+
+      const result = await generatePrototypeFn({
+        data: { prompt: trimmed, model: selectedModel || undefined },
+      })
+
+      const count = result.scene.nodes.length
+      onSceneGenerated?.(result.scene)
+
+      const assistantContent = `${result.message}${m.agent_addedToCanvas({ count })}`
+      const assistantMsg: ChatMessage = {
+        id: `a_${Date.now()}`,
+        role: "assistant",
+        content: assistantContent,
+      }
+      setMessages((prev) => [...prev, assistantMsg])
+
+      await saveAgentMessageFn({
+        data: {
+          conversationId: convId,
+          role: "assistant",
+          content: assistantContent,
+          components: result.scene,
+        },
+      })
+      refreshConversations()
+    } catch (err) {
+      const errMsg = err instanceof Error ? err.message : m.agent_generateFailed()
+      const errorContent = `${m.agent_generateFailed()}：${errMsg}`
+      const errorMsg: ChatMessage = {
+        id: `e_${Date.now()}`,
+        role: "assistant",
+        content: errorContent,
+        isError: true,
+      }
+      setMessages((prev) => [...prev, errorMsg])
+      await saveAgentMessageFn({
+        data: { conversationId: convId, role: "assistant", content: errorContent, isError: true },
+      }).catch(() => {})
+      toast.error(m.agent_prototypeFailed(), { description: errMsg })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* 会话选择器 */}
+      <div className="shrink-0 flex items-center gap-1 px-2 py-1.5 border-b">
+        <DropdownMenu>
+          <DropdownMenuTrigger render={<button className="flex flex-1 items-center gap-1 rounded-md px-1.5 py-1 text-xs text-muted-foreground hover:bg-muted min-w-0" />}>
+              <MessageSquare className="size-3 shrink-0" />
+              <span className="truncate">
+                {conversationId
+                  ? conversations.find((c) => c.id === conversationId)?.title ?? m.agent_unknownConv()
+                  : m.agent_newConv()}
+              </span>
+              <ChevronDown className="size-3 shrink-0" />
+            </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="min-w-56 max-h-80 overflow-y-auto rounded-lg p-1">
+            {groupConversations(conversations).map(({ label, items }) => (
+              items.length > 0 && (
+                <DropdownMenuGroup key={label}>
+                  <DropdownMenuLabel className="text-[10px] text-muted-foreground/60">{label}</DropdownMenuLabel>
+                  {items.map((conv) => (
+                    <DropdownMenuItem
+                      key={conv.id}
+                      className="group/item flex items-center justify-between rounded text-xs"
+                      onClick={() => setConversationId(conv.id)}
+                    >
+                      <span className="truncate">{conv.title}</span>
+                      <button
+                        type="button"
+                        className="ml-1 shrink-0 rounded p-0.5 opacity-0 group-hover/item:opacity-100 hover:bg-destructive/10 hover:text-destructive"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          deleteAgentConversationFn({ data: { id: conv.id } }).then(() => {
+                            if (conversationId === conv.id) setConversationId(null)
+                            refreshConversations()
+                          })
+                        }}
+                      >
+                        <Trash2 className="size-3" />
+                      </button>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuGroup>
+              )
+            ))}
+            {conversations.length === 0 && (
+              <div className="px-2 py-3 text-center text-xs text-muted-foreground">{m.agent_noConversations()}</div>
+            )}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              className="rounded text-xs text-muted-foreground"
+              onClick={() => {
+                setConversationId(null)
+                setMessages([])
+              }}
+            >
+              <Plus className="size-3" /> {m.agent_newConversation()}
+            </DropdownMenuItem>
+            {conversations.length > 0 && (
+              <DropdownMenuItem
+                className="rounded text-xs text-destructive"
+                onClick={() => {
+                  clearAgentConversationsFn({ data: { designId } }).then(() => {
+                    setConversationId(null)
+                    setMessages([])
+                    refreshConversations()
+                  })
+                }}
+              >
+                <Trash2 className="size-3" /> {m.agent_clearAll()}
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div ref={scrollRef} className="flex-1 overflow-y-auto p-2 space-y-2">
+        {messages.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-center gap-2 text-muted-foreground">
+            <Bot className="size-8 opacity-40" />
+            <p className="text-xs">{m.agent_emptyHint()}</p>
+            <p className="text-[10px] opacity-60">{m.agent_emptyExample()}</p>
+          </div>
+        ) : (
+          messages.map((msg) => (
+            <div
+              key={msg.id}
+              className={cn(
+                "flex gap-1.5",
+                msg.role === "user" ? "justify-end" : "justify-start",
+              )}
+            >
+              {msg.role === "assistant" && (
+                <Bot className="size-4 shrink-0 mt-0.5 text-muted-foreground" />
+              )}
+              <div
+                className={cn(
+                  "max-w-[80%] rounded-md px-2 py-1.5 text-xs",
+                  msg.role === "user"
+                    ? "bg-primary text-primary-foreground"
+                    : msg.isError
+                      ? "bg-destructive/10 text-destructive"
+                      : "bg-muted",
+                )}
+              >
+                {msg.content}
+              </div>
+              {msg.role === "user" && (
+                <User className="size-4 shrink-0 mt-0.5 text-muted-foreground" />
+              )}
+            </div>
+          ))
+        )}
+        {(loading || streaming) && (
+          <div className="flex gap-1.5 justify-start">
+            <Bot className="size-4 shrink-0 mt-0.5 text-muted-foreground" />
+            <div className="bg-muted rounded-md px-2 py-1.5">
+              <Loader2 className="size-3 animate-spin text-muted-foreground" />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* FS-8.4 上下文芯片：选中元素时提示「重新生成选中」模式 */}
+      {regenSelection.length > 0 && (
+        <div className="shrink-0 px-2 pt-1">
+          <span className="inline-flex max-w-full items-center gap-1 rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-xs text-primary">
+            <Sparkles className="size-3 shrink-0" />
+            <span className="truncate">
+              {m.canvas_ai_regenChip({ count: regenSelection.length })}
+            </span>
+          </span>
+        </div>
+      )}
+
+      <AgentInput
+        value={input}
+        onChange={setInput}
+        onSubmit={handleSend}
+        loading={loading || streaming}
+        onStop={streaming ? handleStop : undefined}
+        models={models}
+        selectedModel={selectedModel}
+        onModelChange={onModelChange}
+      />
+    </div>
+  )
+}