@deep-eye/core 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 此文件记录 `@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
@@ -14,6 +29,13 @@
 
 - 图片组改为可展开的图片堆叠，并支持查看原图。
 - “返回最新消息”操作调整至会话右下角。
+- 助手默认使用内置标识，并将标识尺寸调整为 26px。
+
+### Fixed
+
+- 流式回复在首个可见内容到达前显示加载状态；尾行扫光在高频 chunk 下保持可见。
+- 混合流中的 `LLM Running`、`🛠️` 和 `<summary>` 运行标记不再进入正文或默认复制内容。
+- 会话列表不再渲染结构化工具调用和工具结果。
 
 ## [0.2.0]
 

package/README.md

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