@deep-eye/core 0.5.1 → 0.7.0

package/CHANGELOG.md

@@ -0,0 +1,49 @@
+# Changelog
+
+此文件记录 `@deep-eye/core` 的用户可见变更。新版本采用语义化版本，并按 `Added`、`Changed`、`Fixed`、`Removed` 分类记录。
+
+## [0.7.0] - 2026-07-23
+
+### Added
+
+- `ChatSender` 组件新增文件附件功能，支持多文件上传和预览。
+- 图片文件以 120x120 缩略图卡片显示，非图片文件显示文件名、类型标签和大小信息。
+- 文件卡片支持悬浮显示删除按钮，支持累加上传多个文件。
+- 新增截图功能，使用浏览器原生 `getDisplayMedia` API 支持屏幕、窗口或标签页截图，截图后自动添加到附件列表。
+- `ChatSender` 导出 `AttachmentMenuItem` 类型，支持自定义附件菜单项。
+
+### Changed
+
+- 附件菜单从直接触发文件选择改为弹出菜单模式，与主流 AI 产品交互一致。
+- 文件预览采用卡片化设计，统一尺寸和样式，提升视觉一致性。
+
+## [0.6.0] - 2026-07-22
+
+### Added
+
+- 公开导出 `ChatMessage` 与 `ChatActionbar`，并提供 `ChatMessageProps`、`ChatActionbarCopyPayload` 类型。
+- 已完成的助手消息默认显示复制操作。`AiConversation` 的 `#assistant-actionbar`、`ChatMessage` 的 `#actionbar` 和 `ChatActionbar` 默认插槽均可追加自定义操作。
+- AI Conversation 文档新增基于标准 SSE 的可交互渲染预览，覆盖 Markdown、公式、图片组、视频、音频和 AskUserForm。
+
+### Changed
+
+- 图片组改为可展开的图片堆叠，并支持查看原图。
+- “返回最新消息”操作调整至会话右下角。
+- 助手默认使用内置标识，并将标识尺寸调整为 26px。
+
+### Fixed
+
+- 流式回复在首个可见内容到达前显示加载状态；尾行扫光在高频 chunk 下保持可见。
+- 混合流中的 `LLM Running`、`🛠️` 和 `<summary>` 运行标记不再进入正文或默认复制内容。
+- 会话列表不再渲染结构化工具调用和工具结果。
+
+## [0.2.0]
+
+### Minor Changes
+
+- Initial release of deepeye-core with D3MindMap component
+  - Add D3MindMap visualization component with theme support
+  - Add composables for layout and theme management
+  - Support for multiple themes (default, dark, colorful, minimal)
+  - Interactive features: zoom, pan, node collapse/expand
+  - Export functionality (PNG, SVG, JSON)

package/README.md

@@ -1,6 +1,6 @@
 # @deep-eye/core
 
-Vue 3 组件库，提供思维导图和 AI 会话组件。
+深瞳前端团队企业级 Vue 3 组件库，提供 AI 会话、思维导图等可视化组件。
 
 ## 安装
 
@@ -8,37 +8,142 @@ Vue 3 组件库，提供思维导图和 AI 会话组件。
 pnpm add @deep-eye/core
 ```
 
-## 使用
+## 组件
 
-### AiConversation
+### AI Conversation
 
-```ts
+完整的 AI 会话渲染方案，支持流式输出、多模态内容、用户交互表单等。
+
+#### AiConversation
+
+渲染完整的会话列表，内置自动滚动、流式动画和操作栏。
+
+```vue
+<script setup lang=”ts”>
 import { ref } from 'vue'
-import { AiConversation, type ConversationMessage } from '@deep-eye/core'
+import {
+  AiConversation,
+  type ChatActionbarCopyPayload,
+  type ConversationMessage,
+} from '@deep-eye/core'
 import '@deep-eye/core/style.css'
 
 const messages = ref<ConversationMessage[]>([
   { id: 'user-1', role: 'user', content: '你好' },
   { id: 'assistant-1', role: 'assistant', content: '你好，有什么可以帮你？' },
 ])
+
+function saveReply(message: ConversationMessage): void {
+  console.log('保存消息', message)
+}
+
+function onCopy(payload: ChatActionbarCopyPayload): void {
+  console.log('复制内容', payload.text)
+}
+</script>
+
+<template>
+  <AiConversation :messages=”messages” auto-scroll=”smart” @copy=”onCopy”>
+    <template #assistant-actionbar=”{ message }”>
+      <button type=”button” @click=”saveReply(message)”>保存</button>
+    </template>
+  </AiConversation>
+</template>
 ```
 
+已完成的助手回复会显示默认复制操作。`#assistant-actionbar`、`ChatMessage` 的 `#actionbar` 与 `ChatActionbar` 默认插槽均为追加插槽，不会替换复制操作；流式输出期间不显示操作栏。
+
+**流式渲染**
+
+将后端的 OpenAI 兼容 `chat.completion.chunk` SSE 响应交给 `useConversationStream().consume(response)`，即可得到可传入 `AiConversation` 的消息列表。渲染会隐藏 `LLM Running`、`🛠️` 和 `<summary>` 运行标记，但不改写原始消息。
+
+**用户交互表单**
+
+AskUserForm 使用 `ASK_USER_FORM_SYSTEM_PROMPT`；单选自动提交，多选点击”确认”，`required=false` 可跳过。
+
+#### ChatSender
+
+支持文本输入、文件上传、语音录音和截图的聊天输入框。
+
 ```vue
-<AiConversation :messages="messages" auto-scroll="smart" />
+<script setup lang=”ts”>
+import { ref } from 'vue'
+import { ChatSender } from '@deep-eye/core'
+
+const message = ref('')
+
+function handleSend(content: string, files?: File[]) {
+  console.log('发送消息', content, files)
+  message.value = ''
+}
+</script>
+
+<template>
+  <ChatSender
+    v-model=”message”
+    :show-screenshot=”true”
+    placeholder=”输入消息...”
+    @send=”handleSend”
+  />
+</template>
 ```
 
-业务侧调接口后，把结果转换成 `ConversationMessage[]` 即可。原始 runKeep SSE 可选用 `useConversationStream().consume(response)` 自动转换。
+**文件附件功能**
+
+- 支持多文件上传，文件累加而不是替换
+- 图片文件显示为 120x120 缩略图卡片
+- 非图片文件显示文件名、扩展名标签和大小
+- 鼠标悬浮显示删除按钮
+
+**截图功能**
+
+设置 `show-screenshot` 启用截图选项。使用浏览器原生 `getDisplayMedia` API，支持截取屏幕、窗口或标签页，截图后自动添加到附件列表。
+
+**语音录音**
+
+内置语音录音功能，支持点击录音和长按录音两种模式，使用 Web Speech API 自动转换为文本。
 
-AskUserForm 使用 `ASK_USER_FORM_SYSTEM_PROMPT`；单选自动提交，多选点击“确认”，`required=false` 可跳过，结果见 `answers`。
+#### 组件导出
+
+| 组件             | 用途                                                      |
+| ---------------- | --------------------------------------------------------- |
+| `AiConversation` | 会话列表、自动滚动、AskUserForm 与 `#assistant-actionbar` |
+| `ChatMessage`    | 单条 `ConversationMessage`，支持 `#actionbar` 与 `@copy`  |
+| `ChatActionbar`  | 默认复制操作，支持默认插槽追加操作与 `@copy`              |
+| `ChatSender`     | 聊天输入框，支持文本、文件、语音和截图                    |
 
 ### 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' },
+  ],
+}
 </script>
 
-<D3MindMap :data="data" height="600px" show-toolbar />
+<template>
+  <D3MindMap :data=”data” height=”600px” show-toolbar />
+</template>
 ```
 
-Node ≥ 22 · Vue ≥ 3.5 · MIT
+## Changelog
+
+每个功能版本的用户可见变化记录在 [CHANGELOG.md](./CHANGELOG.md)。发布前在文件顶部新增版本，并使用 `Added`、`Changed`、`Fixed` 或 `Removed` 分类。
+
+## 技术要求
+
+- Node >= 22
+- Vue >= 3.5
+
+## License
+
+MIT