@linker-design-plus/chat-next 1.0.1 → 1.0.3

package/README.md

@@ -0,0 +1,237 @@
+# ChatNext 组件库
+
+提供了一套用于构建聊天界面的 Vue 3 组件集合。
+
+## 组件列表
+
+- [ChatSender 发送框](#chatsender-发送框)
+- [ChatAttachments 附件列表](#chatattachments-附件列表)
+- [ChatActionbar 消息操作栏](#chatactionbar-消息操作栏)
+- [ChatThinking 思考过程](#chatthinking-思考过程)
+- [ChatLoading 加载状态](#chatloading-加载状态)
+- [ChatItem 聊天消息项](#chatitem-聊天消息项)
+- [ChatMarkdown Markdown 渲染](#chatmarkdown-markdown渲染)
+
+---
+
+## ChatSender 发送框
+
+用于输入和发送聊天消息的组件。支持普通文本输入和富文本模板输入。
+
+### 属性 (Props)
+
+| 属性名              | 类型                                | 默认值                           | 说明                                                    |
+| ------------------- | ----------------------------------- | -------------------------------- | ------------------------------------------------------- |
+| `value` / `v-model` | `string`                            | `-`                              | 输入框的值。支持语法糖 `v-model` 或 `v-model:value`     |
+| `defaultValue`      | `string`                            | `''`                             | 输入框的值。非受控属性                                  |
+| `loading`           | `boolean`                           | `true`                           | 发送按钮是否处于加载状态。为 `false` 时显示停止分析按钮 |
+| `allowEmpty`        | `boolean`                           | `false`                          | 是否允许发送空内容                                      |
+| `textareaProps`     | `TextareaProps`                     | `{ placeholder: '输入消息...' }` | 输入框的属性，如 `placeholder`                          |
+| `templates`         | `ITemplateNode[]`                   | `[]`                             | 模板节点列表，提供后将开启富文本模板模式                |
+| `validate`          | `() => boolean \| Promise<boolean>` | `-`                              | 发送前的校验函数                                        |
+
+### 事件 (Emits)
+
+| 事件名              | 参数             | 说明                         |
+| ------------------- | ---------------- | ---------------------------- |
+| `send`              | `(text: string)` | 发送消息时触发               |
+| `stop`              | `-`              | 点击停止按钮时触发           |
+| `update:value`      | `(val: string)`  | 输入内容变化时触发           |
+| `update:modelValue` | `(val: string)`  | 输入内容变化时触发 (v-model) |
+
+### 插槽 (Slots)
+
+| 插槽名          | 说明                 |
+| --------------- | -------------------- |
+| `header`        | 输入框外标题区域扩展 |
+| `inner-header`  | 输入框内标题区域扩展 |
+| `input-prefix`  | 输入框前方区域       |
+| `footer-prefix` | 输入框左下角区域扩展 |
+| `footer-suffix` | 输入框右下角区域扩展 |
+
+### 接口类型
+
+```typescript
+export type TextareaProps = {
+  placeholder?: string;
+};
+
+export interface ITemplateNode {
+  type: 'text' | 'select' | 'input';
+  id: string; // unique id for template nodes
+  content?: string; // only for text
+  options?: { label: string; value: string }[] | string[]; // only for select
+  multiple?: boolean; // only for select
+  value?: string | string[]; // for select and input (string[] for multiple select)
+  placeholder?: string; // for input and select
+}
+```
+
+---
+
+## ChatAttachments 附件列表
+
+用于展示上传的附件或文件列表。
+
+### 属性 (Props)
+
+| 属性名       | 类型                               | 默认值   | 说明                                                                                                    |
+| ------------ | ---------------------------------- | -------- | ------------------------------------------------------------------------------------------------------- |
+| `items`      | `IChatAttachment[]`                | `[]`     | 附件列表数据                                                                                            |
+| `overflow`   | `'wrap' \| 'scrollX' \| 'scrollY'` | `'wrap'` | 文件列表超出时样式                                                                                      |
+| `removable`  | `boolean`                          | `true`   | 是否显示删除按钮                                                                                        |
+| `fieldNames` | `object`                           | `-`      | 自定义数据字段映射，包含 `name`, `suffix`, `size`, `status`, `statusText`, `icon`, `url`, `type`, `uid` |
+
+### 事件 (Emits)
+
+| 事件名   | 参数                                     | 说明               |
+| -------- | ---------------------------------------- | ------------------ |
+| `remove` | `(item: IChatAttachment, index: number)` | 点击删除按钮时触发 |
+
+### 接口类型
+
+```typescript
+export interface IChatAttachment {
+  uid?: string | number;
+  icon?: string;
+  suffix?: string;
+  name: string;
+  url?: string;
+  type?: string;
+  size?: number;
+  status?: 'success' | 'error' | 'pending';
+  statusText?: string;
+  [key: string]: any;
+}
+```
+
+---
+
+## ChatActionbar 消息操作栏
+
+展示在聊天消息底部的操作按钮列表（如复制、重试、点赞、点踩）。
+
+### 属性 (Props)
+
+| 属性名    | 类型             | 默认值                              | 说明                   |
+| --------- | ---------------- | ----------------------------------- | ---------------------- |
+| `actions` | `IChatActions[]` | `['copy', 'replay', 'good', 'bad']` | 需要显示的操作项列表   |
+| `content` | `string`         | `''`                                | 用于复制操作的文本内容 |
+
+> `good`和`bad`点赞点踩暂未实现
+
+### 事件 (Emits)
+
+| 事件名   | 参数                     | 说明               |
+| -------- | ------------------------ | ------------------ |
+| `action` | `(action: IChatActions)` | 点击操作按钮时触发 |
+
+### 接口类型
+
+```typescript
+export type IChatActions = 'copy' | 'replay' | 'good' | 'bad';
+```
+
+---
+
+## ChatThinking 思考过程
+
+展示 AI 思考过程的组件，支持展开/收起和不同的动画状态。
+
+### 属性 (Props)
+
+| 属性名      | 类型                                           | 默认值                            | 说明                               |
+| ----------- | ---------------------------------------------- | --------------------------------- | ---------------------------------- |
+| `content`   | `IChatThinkingContent`                         | `{ text: '', title: '思考过程' }` | 思考内容及标题                     |
+| `layout`    | `'block' \| 'border'`                          | `'block'`                         | 布局方式，块级或带虚线边框         |
+| `status`    | `'pending' \| 'complete' \| 'stop' \| 'error'` | `'pending'`                       | 思考状态                           |
+| `maxHeight` | `number`                                       | `-`                               | 展开内容的最大高度                 |
+| `animation` | `'circle' \| 'moving' \| 'gradient'`           | `'circle'`                        | 思考中的动画类型                   |
+| `collapsed` | `boolean`                                      | `false`                           | 是否折叠（支持 v-model:collapsed） |
+
+### 事件 (Emits)
+
+| 事件名             | 参数             | 说明               |
+| ------------------ | ---------------- | ------------------ |
+| `update:collapsed` | `(val: boolean)` | 折叠状态变化时触发 |
+
+### 接口类型
+
+```typescript
+export interface IChatThinkingContent {
+  title?: string;
+  text?: string;
+}
+export type IChatThinkingLayout = 'block' | 'border';
+export type IChatThinkingStatus = 'pending' | 'complete' | 'stop' | 'error';
+export type IChatThinkingAnimation = 'circle' | 'moving' | 'gradient';
+```
+
+---
+
+## ChatLoading 加载状态
+
+消息加载中的动画组件。
+
+### 属性 (Props)
+
+| 属性名      | 类型              | 默认值  | 说明                                 |
+| ----------- | ----------------- | ------- | ------------------------------------ |
+| `animation` | `'spin' \| 'dot'` | `'dot'` | 加载动画类型，支持旋转圆环或跳动小点 |
+
+### 接口类型
+
+```typescript
+export type IChatLoadingAnimation = 'spin' | 'dot';
+```
+
+---
+
+## ChatItem 聊天消息项
+
+完整的单条聊天消息组件，整合了头像、内容、加载状态、操作栏等。
+
+### 属性 (Props)
+
+| 属性名     | 类型        | 默认值  | 说明         |
+| ---------- | ----------- | ------- | ------------ |
+| `chatItem` | `IChatItem` | `-`     | 消息项数据   |
+| `avatar`   | `boolean`   | `false` | 是否显示头像 |
+
+### 插槽 (Slots)
+
+| 插槽名       | 说明                                     |
+| ------------ | ---------------------------------------- |
+| `user-files` | 用户角色时的文件展示区域                 |
+| `loading`    | AI 角色 `status='pending'` 时的加载区域  |
+| `thinking`   | AI 角色 `status='thinking'` 时的思考区域 |
+| `actions`    | AI 角色时的操作栏区域                    |
+| `suggest`    | AI 角色时的建议区域                      |
+| `user-extra` | 用户角色底部的扩展区域                   |
+
+### 接口类型
+
+```typescript
+export interface IChatItem {
+  id: string | number;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  avatar?: string;
+  status?: 'pending' | 'thinking' | 'success' | 'error';
+  [key: string]: any;
+}
+```
+
+---
+
+## ChatMarkdown Markdown 渲染
+
+用于安全地渲染包含代码块和高亮的 Markdown 文本。
+
+### 属性 (Props)
+
+| 属性名    | 类型     | 默认值 | 说明                     |
+| --------- | -------- | ------ | ------------------------ |
+| `content` | `string` | `''`   | 要渲染的 Markdown 字符串 |
+
+_注意：此组件内置了 Highlight.js 语法高亮和 GitHub Markdown CSS 样式，并自带代码块一键复制功能。_

package/dist/eventSource.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@microsoft/fetch-event-source"),u=require("vue"),o=r=>{try{const t=JSON.parse(r);return typeof t=="object"&&t!==null&&(Array.isArray(t)||t.constructor===Object)}catch{return!1}},v=()=>{const r=u.ref(null),t=u.ref(!1);return{startEventSource:async e=>{t.value=!0,r.value=new AbortController;try{await s.fetchEventSource(e.url,{method:e.method||"POST",headers:{"Content-Type":"application/json",accept:"*/*",...e.headers},body:e.body?JSON.stringify(e.body):void 0,openWhenHidden:!0,signal:r.value.signal,async onmessage(a){var c;try{if(!o(a.data))return;const l=JSON.parse(a.data);(c=e.onMessage)==null||c.call(e,{event:a.event,data:l})}catch(n){console.error("解析消息失败:",n)}},onclose(){var a;(a=e.onClose)==null||a.call(e)},onerror(a){var c,n;throw(c=e.onError)==null||c.call(e,a),(n=r.value)==null||n.abort(),a}})}finally{t.value=!1}},stopEventSource:()=>{r.value&&(r.value.abort(),r.value=null)},isConnecting:t,controller:r}};exports.useEventSource=v;

package/dist/eventSource.mjs

@@ -0,0 +1,65 @@
+import { fetchEventSource as o } from "@microsoft/fetch-event-source";
+import { ref as l } from "vue";
+const s = (r) => {
+  try {
+    const a = JSON.parse(r);
+    return typeof a == "object" && a !== null && (Array.isArray(a) || a.constructor === Object);
+  } catch {
+    return !1;
+  }
+}, S = () => {
+  const r = l(null), a = l(!1);
+  return {
+    startEventSource: async (e) => {
+      a.value = !0, r.value = new AbortController();
+      try {
+        await o(e.url, {
+          method: e.method || "POST",
+          headers: {
+            "Content-Type": "application/json",
+            // 'Accept-Language': localStorage.getItem('language') === 'en' ? 'en' : 'zh-CN',
+            // token: JSON.parse(localStorage.getItem('loginState') || '{}')?.token || '',
+            // tenant: localStorage.getItem('currentTanantID') || '',
+            accept: "*/*",
+            ...e.headers
+          },
+          body: e.body ? JSON.stringify(e.body) : void 0,
+          openWhenHidden: !0,
+          signal: r.value.signal,
+          async onmessage(t) {
+            var n;
+            try {
+              if (!s(t.data))
+                return;
+              const u = JSON.parse(t.data);
+              (n = e.onMessage) == null || n.call(e, {
+                event: t.event,
+                data: u
+              });
+            } catch (c) {
+              console.error("解析消息失败:", c);
+            }
+          },
+          onclose() {
+            var t;
+            (t = e.onClose) == null || t.call(e);
+          },
+          onerror(t) {
+            var n, c;
+            throw (n = e.onError) == null || n.call(e, t), (c = r.value) == null || c.abort(), t;
+          }
+        });
+      } finally {
+        a.value = !1;
+      }
+    },
+    stopEventSource: () => {
+      r.value && (r.value.abort(), r.value = null);
+    },
+    isConnecting: a,
+    controller: r
+  };
+};
+export {
+  S as useEventSource
+};

package/dist/index.d.ts

@@ -1,2 +1,8 @@
-export { default as HChatItem } from './src/component/chat-item.vue';
-export { default as HChatSender } from './src/component/chat-sender.vue';
+export { default as HChatItem } from './src/component/ChatItem/chat-item.vue';
+export { default as HChatSender } from './src/component/ChatSender/chat-sender.vue';
+export { default as HChatMarkdown } from './src/component/ChatMarkdown/chat-markdown.vue';
+export { default as HChatActionbar } from './src/component/ChatActionbar/chat-actionbar.vue';
+export { default as HChatLoading } from './src/component/ChatLoading/chat-loading.vue';
+export { default as HChatThinking } from './src/component/ChatThinking/chat-thinking.vue';
+export { default as HChatAttachments } from './src/component/ChatAttachments/chat-attachments.vue';
+export { default as HChatSenderSelect } from './src/component/ChatSender/chat-sender-select.vue';