Studio：实现可折叠的右侧 AI Chat 浮动面板（VS Code 风格）

[xuyushun441-sys]

目标

在 Studio 前端实现一个固定在右侧、全局可见、可收缩/展开的 AI Chat 面板（参考 VS Code Copilot Chat），支持流式对话体验。

功能需求

• 右侧全局浮动 chat 面板，收起时贴边 48px 展开按钮，展开宽度约 380px
• 支持快捷键 Ctrl+Shift+I / Cmd+Shift+I 展开/收起 panel
• 支持 stream 输出，对接 /api/v1/ai/chat（Vercel Data Stream Protocol）
• 消息历史持久化到 localStorage（会话内容仅前端留存）
• UI合并��� <SidebarProvider> 下，与左侧 sidebar 并列
• Chat 直接采用 @ai-sdk/react/useChat，无需自定义后端协议，需在 package.json 增加依赖（ai、@ai-sdk/react）
• 仅实现基础文本 chat（不含Agent，不含NLQ、元数据等），后续支持独立 issue 跟踪

实施建议与架构

• 主要新增 components/AiChatPanel.tsx，负责面板 UI 与状态
• hooks/use-ai-chat-panel.ts 用于存储面板显示/隐藏、快捷键和消息持久化逻辑
• 需适配项目 tailwind 变量（右侧阴影、暗色/亮色切换、动画）
• Chat 列表和输入框 UX 参照 VS Code Copilot Chat
• 需完善基础单测

参考

• VS Code Copilot Chat Panel
• Notion AI/FlowUs 右侧悬浮对话框
• ObjectStack PR Upgrade server AI Chat API protocol for Vercel compatibility #1034（AI Chat Protocol升级）

受影响范围

• apps/studio/src/App.tsx （入口挂载 ChatPanel）
• apps/studio/src/components/（新增 AiChatPanel 组件）
• apps/studio/package.json（新增依赖）