@deep-eye/core 0.9.0 → 0.9.1

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 此文件记录 `@deep-eye/core` 的用户可见变更。新版本采用语义化版本，并按 `Added`、`Changed`、`Fixed`、`Removed` 分类记录。
 
+## [0.9.1] - 2026-07-28
+
+### Added
+
+- `ChatBot` 默认工件侧边栏新增 Preview/Code、复制、下载、展开/收起和关闭操作栏。
+
+### Changed
+
+- 工件侧边栏在桌面端与移动端使用更稳定的响应式布局，自定义 `sidebar` 插槽仍可完整替换默认预览。
+
+### Fixed
+
+- 工件预览关闭操作恢复为明确的关闭图标与“关闭侧边栏”可访问语义。
+
 ## [0.7.0] - 2026-07-23
 
 ### Added

package/README.md

@@ -8,18 +8,78 @@
 pnpm add @deep-eye/core
 ```
 
+引入样式：
+
+```ts
+import '@deep-eye/core/style.css'
+```
+
+## 快速开始
+
+`ChatBot` 提供开箱即用的聊天界面，包含消息列表、输入框和可选侧边栏：
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ChatBot } from '@deep-eye/core'
+import type { ConversationMessage } from '@deep-eye/core'
+import '@deep-eye/core/style.css'
+
+const messages = ref<ConversationMessage[]>([
+  { id: '1', role: 'assistant', content: '你好！有什么可以帮助你的吗？' },
+])
+
+function handleSend(content: string, files?: File[]) {
+  messages.value.push({
+    id: Date.now().toString(),
+    role: 'user',
+    content,
+  })
+  // 调用 API 获取回复...
+}
+</script>
+
+<template>
+  <ChatBot :messages="messages" @send="handleSend" />
+</template>
+```
+
 ## 组件
 
+### ChatBot
+
+完整的聊天机器人界面，采用类似 Claude 的布局，内置 `AiConversation` 与 `ChatSender`，支持工件预览侧边栏。
+
+```vue
+<script setup lang="ts">
+import { ChatBot } from '@deep-eye/core'
+import type { ConversationUiAction } from '@deep-eye/core'
+
+function handleAction(action: ConversationUiAction) {
+  if (action.type === 'open-artifact') {
+    // 点击工件卡片时自动打开侧边栏预览
+    console.log('打开工件:', action.title)
+  }
+}
+</script>
+
+<template>
+  <ChatBot :messages="messages" :show-sidebar="true" @send="handleSend" @action="handleAction" />
+</template>
+```
+
+支持 `#sidebar`、`#empty`、`#sender-prepend`、`#assistant-actionbar` 等插槽，以及 `senderConfig`、`conversationConfig` 透传子组件配置。
+
 ### AI Conversation
 
-完整的 AI 会话渲染方案，支持流式输出、多模态内容、用户交互表单等。
+完整的 AI 会话渲染方案，支持流式输出、Markdown / 公式 / 多媒体、用户交互表单等。
 
 #### AiConversation
 
 渲染完整的会话列表，内置自动滚动、流式动画和操作栏。
 
 ```vue
-<script setup lang=”ts”>
+<script setup lang="ts">
 import { ref } from 'vue'
 import {
   AiConversation,
@@ -43,9 +103,9 @@ function onCopy(payload: ChatActionbarCopyPayload): void {
 </script>
 
 <template>
-  <AiConversation :messages=”messages” auto-scroll=”smart” @copy=”onCopy”>
-    <template #assistant-actionbar=”{ message }”>
-      <button type=”button” @click=”saveReply(message)”>保存</button>
+  <AiConversation :messages="messages" auto-scroll="smart" @copy="onCopy">
+    <template #assistant-actionbar="{ message }">
+      <button type="button" @click="saveReply(message)">保存</button>
     </template>
   </AiConversation>
 </template>
@@ -57,16 +117,29 @@ function onCopy(payload: ChatActionbarCopyPayload): void {
 
 将后端的 OpenAI 兼容 `chat.completion.chunk` SSE 响应交给 `useConversationStream().consume(response)`，即可得到可传入 `AiConversation` 的消息列表。渲染会隐藏 `LLM Running`、`🛠️` 和 `<summary>` 运行标记，但不改写原始消息。
 
-**用户交互表单**
+```vue
+<script setup lang="ts">
+import { AiConversation, useConversationStream } from '@deep-eye/core'
+
+const { messages, status, consume } = useConversationStream()
+
+async function fetchReply() {
+  const response = await fetch('/api/chat', { method: 'POST' })
+  await consume(response)
+}
+</script>
 
-AskUserForm 使用 `ASK_USER_FORM_SYSTEM_PROMPT`；单选自动提交，多选点击”确认”，`required=false` 可跳过。
+<template>
+  <AiConversation :messages="messages" />
+</template>
+```
 
 #### ChatSender
 
 支持文本输入、文件上传、语音录音和截图的聊天输入框。
 
 ```vue
-<script setup lang=”ts”>
+<script setup lang="ts">
 import { ref } from 'vue'
 import { ChatSender } from '@deep-eye/core'
 
@@ -80,10 +153,10 @@ function handleSend(content: string, files?: File[]) {
 
 <template>
   <ChatSender
-    v-model=”message”
-    :show-screenshot=”true”
-    placeholder=”输入消息...”
-    @send=”handleSend”
+    v-model="message"
+    :show-screenshot="true"
+    placeholder="输入消息..."
+    @send="handleSend"
   />
 </template>
 ```
@@ -107,34 +180,76 @@ function handleSend(content: string, files?: File[]) {
 
 | 组件             | 用途                                                      |
 | ---------------- | --------------------------------------------------------- |
+| `ChatBot`        | 完整聊天界面，含消息区、输入框、工件侧边栏                |
 | `AiConversation` | 会话列表、自动滚动、AskUserForm 与 `#assistant-actionbar` |
 | `ChatMessage`    | 单条 `ConversationMessage`，支持 `#actionbar` 与 `@copy`  |
 | `ChatActionbar`  | 默认复制操作，支持默认插槽追加操作与 `@copy`              |
 | `ChatSender`     | 聊天输入框，支持文本、文件、语音和截图                    |
 
+### 交互组件
+
+消息内容支持 mdoc 标签语法，用于在对话中嵌入工件卡片和动态表单。
+
+**工件卡片（Artifact）**
+
+助手回复中使用 `{% artifact %}` 标签生成可预览、可下载的卡片。点击卡片可在 `ChatBot` 侧边栏中预览。
+
+```markdown
+{% artifact id="demo" title="示例页面" type="html" %}
+
+<!DOCTYPE html>
+<html><body><h1>Hello World</h1></body></html>
+{% /artifact %}
+```
+
+支持的文本类型：`html`、`code`、`markdown`、`text`、`svg`、`mermaid`、`react`、`vue`。文件引用类型：`pdf`、`word`、`excel`、`ppt`、`zip`、`file`（需 `src` 属性）。
+
+将 `ARTIFACT_BLOCK_SYSTEM_PROMPT` 拼入 LLM system prompt，引导模型正确输出工件语法。
+
+**动态表单（AskUserForm）**
+
+使用 `{% ask-form %}` 收集用户选择。单选自动提交，多选点击「确认」，`required=false` 可跳过。
+
+将 `ASK_USER_FORM_SYSTEM_PROMPT` 拼入 LLM system prompt。`ChatBot` 会在底部 dock 区域展示表单；`AiConversation` 内联渲染。
+
+### Composables
+
+| Composable              | 用途                                             |
+| ----------------------- | ------------------------------------------------ |
+| `useConversation`       | 管理消息列表，追加 OpenAI chunk 或自定义 delta   |
+| `useConversationStream` | 消费 SSE / ReadableStream，内置流式状态与 resume |
+
+`useConversation` 仅负责渲染层状态，不包含网络请求、重试或持久化逻辑，可与任意后端 API 组合。
+
 ### D3MindMap
 
 基于 D3.js 的思维导图可视化组件。
 
 ```vue
-<script setup lang=”ts”>
+<script setup lang="ts">
 import { D3MindMap } from '@deep-eye/core'
-import type { MindMapNode } from '@deep-eye/core'
-
-const data: MindMapNode = {
-  name: '根节点',
-  children: [
-    { name: '子节点 1' },
-    { name: '子节点 2' },
-  ],
+import type { MindMapData } from '@deep-eye/core'
+
+const data: MindMapData = {
+  nodeData: {
+    id: 'root',
+    topic: '根节点',
+    root: true,
+    children: [
+      { id: '1', topic: '子节点 1' },
+      { id: '2', topic: '子节点 2' },
+    ],
+  },
 }
 </script>
 
 <template>
-  <D3MindMap :data=”data” height=”600px” show-toolbar />
+  <D3MindMap :data="data" height="600px" show-toolbar />
 </template>
 ```
 
+支持多主题、缩放平移、节点折叠展开，以及 PNG / SVG / JSON 导出。
+
 ## Changelog
 
 每个功能版本的用户可见变化记录在 [CHANGELOG.md](./CHANGELOG.md)。发布前在文件顶部新增版本，并使用 `Added`、`Changed`、`Fixed` 或 `Removed` 分类。

package/dist/components/chat/ChatBot.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatBot.vue.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatBot.vue"],"names":[],"mappings":"AAwZA,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAI9B,UAAU,KAAK;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,GAAG,GAAG,CAAC,SAAS,mBAAmB,EAAE,CAAC,CAAA;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CAClD;AAUD,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,oBAAoB,GAAG,IAAI,CAAA;KAAE,KAAK,OAAO,CAAA;IACvE,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAA;IAChC,eAAe,CAAC,EAAE,MAAM,OAAO,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAA;IAC7B,kBAAkB,CAAC,EAAE,MAAM,OAAO,CAAA;IAClC,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAA;CAClF,CAAC;AA8TF,QAAA,MAAM,UAAU;;;;;;;;;;;iBApVA,OAAO;kBACN,MAAM,GAAG,MAAM;kBACf,OAAO,CAAC,eAAe,CAAC;wBAClB,OAAO,CAAC,mBAAmB,CAAC;6EAqVjD,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ChatBot.vue.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatBot.vue"],"names":[],"mappings":"AA2UA,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAI9B,UAAU,KAAK;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,GAAG,GAAG,CAAC,SAAS,mBAAmB,EAAE,CAAC,CAAA;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CAClD;AAUD,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,oBAAoB,GAAG,IAAI,CAAA;KAAE,KAAK,OAAO,CAAA;IACvE,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAA;IAChC,eAAe,CAAC,EAAE,MAAM,OAAO,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAA;IAC7B,kBAAkB,CAAC,EAAE,MAAM,OAAO,CAAA;IAClC,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAA;CAClF,CAAC;AAwSF,QAAA,MAAM,UAAU;;;;;;;;;;;iBA9TA,OAAO;kBACN,MAAM,GAAG,MAAM;kBACf,OAAO,CAAC,eAAe,CAAC;wBAClB,OAAO,CAAC,mBAAmB,CAAC;6EA+TjD,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/chat/components/ArtifactPreview.vue.d.ts

@@ -0,0 +1,15 @@
+import type { ConversationUiAction } from '../types';
+type __VLS_Props = {
+    artifact: ConversationUiAction;
+    expanded?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "toggle-expanded": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onToggle-expanded"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=ArtifactPreview.vue.d.ts.map

package/dist/components/chat/components/ArtifactPreview.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArtifactPreview.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/chat/components/ArtifactPreview.vue"],"names":[],"mappings":"AA4TA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAKpD,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,oBAAoB,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AA+hBF,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}