@fv-ui/ai-chat 0.8.1 → 0.9.1

package/dist/index.d.ts

@@ -34,6 +34,8 @@ type __VLS_Props$g = {
         bgColor?: string;
         width?: string;
     };
+    /** typing 对象形态的 interval 语义:自适应模式下的"基础节拍"(每拍最小步进 1 字的期望速率),
+     *  实际步进随积压放大(见 startTyping 内注释) */
     typing?: boolean | {
         step?: number;
         interval?: number;
@@ -1510,6 +1512,11 @@ type __VLS_Props$3 = {
     userName?: string;
     /** 助手名称(透传 AiMessage) */
     assistantName?: string;
+    /** 打字机(透传 AiMessage;仅 assistant 流式期间生效,落定/历史消息整段渲染) */
+    typing?: boolean | {
+        step?: number;
+        interval?: number;
+    };
 };
 declare function scrollToBottom(smooth?: boolean): void;
 /** 回到顶部:与 scrollToBottom 同款 try/catch 回落(happy-dom 旧版 scrollTo(options) 可能缺实现) */
@@ -1568,6 +1575,10 @@ declare const __VLS_base$2: vue.DefineComponent<__VLS_Props$3, {
     "onBranch-change"?: ((dir: BranchDirection, message: MessageNode) => any) | undefined;
 }>, {
     name: string;
+    typing: boolean | {
+        step?: number;
+        interval?: number;
+    };
     icon: string | Component;
     nodes: Record<string, MessageNode>;
     description: string;
@@ -1650,6 +1661,12 @@ type __VLS_Props$2 = {
     placeholder?: string;
     /** 工具名 → 步骤展示名(透传 useChat toolStepLabel,流式工具轨迹步骤的 title) */
     toolStepLabel?: (toolName: string) => string;
+    /** 打字机(透传 AiMessages;仅 assistant 流式期间逐字平滑打出,
+     *  落定/历史消息整段渲染;true 用默认节奏,对象形态自定义 step/interval) */
+    typing?: boolean | {
+        step?: number;
+        interval?: number;
+    };
     /** 输入区阴影效果(透传 Sender;关闭传 false) */
     senderShadow?: boolean;
     /** 空态建议列表 */
@@ -1752,6 +1769,10 @@ declare const __VLS_base$1: vue.DefineComponent<__VLS_Props$2, {
     }) => any) | undefined;
 }>, {
     title: string;
+    typing: boolean | {
+        step?: number;
+        interval?: number;
+    };
     placeholder: string;
     accept: string;
     baseURL: string;
@@ -1823,6 +1844,11 @@ type __VLS_Props$1 = {
     assistantName?: string;
     /** Thinking autoCollapse 透传 */
     autoCollapse?: boolean;
+    /** 打字机(透传 Typewriter;仅 assistant 流式期间生效,落定/历史消息整段渲染) */
+    typing?: boolean | {
+        step?: number;
+        interval?: number;
+    };
 };
 declare var __VLS_1: {
     message: MessageNode;
@@ -1839,7 +1865,7 @@ declare var __VLS_33: {
     message: MessageNode;
     files: ChatFile[];
 };
-declare var __VLS_57: {
+declare var __VLS_67: {
     message: MessageNode;
 };
 type __VLS_Slots = {} & {
@@ -1855,7 +1881,7 @@ type __VLS_Slots = {} & {
 } & {
     'message-files'?: (props: typeof __VLS_33) => any;
 } & {
-    'message-actions'?: (props: typeof __VLS_57) => any;
+    'message-actions'?: (props: typeof __VLS_67) => any;
 };
 declare const __VLS_base: vue.DefineComponent<__VLS_Props$1, {
     message: vue.ComputedRef<MessageNode>;
@@ -1868,6 +1894,10 @@ declare const __VLS_base: vue.DefineComponent<__VLS_Props$1, {
     onRegenerate?: ((message: MessageNode) => any) | undefined;
     "onBranch-change"?: ((dir: BranchDirection, message: MessageNode) => any) | undefined;
 }>, {
+    typing: boolean | {
+        step?: number;
+        interval?: number;
+    };
     autoCollapse: boolean;
     branch: AiMessageBranchInfo;
     showActions: boolean;

package/es/index.mjs

@@ -1595,7 +1595,9 @@ var _sfc_main$h = /* @__PURE__ */ defineComponent({
       const step = (typeof props.typing === "object" ? props.typing.step : void 0) ?? 2;
       const interval = (typeof props.typing === "object" ? props.typing.interval : void 0) ?? 50;
       timer = setInterval(() => {
-        cursor = Math.min(props.content.length, cursor + step);
+        const backlog = props.content.length - cursor;
+        const speed = Math.min(step * 6, Math.max(1, Math.round(step * (1 + backlog / 8))));
+        cursor = Math.min(props.content.length, cursor + speed);
         renderedContent.value = props.content.slice(0, cursor);
         progress.value = props.content.length ? cursor / props.content.length : 1;
         emit("writing");
@@ -6049,7 +6051,7 @@ const _hoisted_12 = {
   class: "fv-msg-error"
 };
 const _hoisted_13 = {
-  key: 2,
+  key: 3,
   class: "fv-msg-pending"
 };
 const _hoisted_14 = {
@@ -6081,7 +6083,8 @@ var _sfc_main$3 = /* @__PURE__ */ defineComponent({
     assistantAvatar: { type: String, required: false, default: "" },
     userName: { type: String, required: false, default: "" },
     assistantName: { type: String, required: false, default: "" },
-    autoCollapse: { type: Boolean, required: false, default: true }
+    autoCollapse: { type: Boolean, required: false, default: true },
+    typing: { type: [Boolean, Object], required: false, default: false }
   },
   emits: ["copy", "regenerate", "branch-change"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -6096,6 +6099,15 @@ var _sfc_main$3 = /* @__PURE__ */ defineComponent({
     });
     const hasReasoning = computed(() => !!props.message.reasoning);
     const hasToolSteps = computed(() => (props.message.toolSteps?.length ?? 0) > 0);
+    const wasStreaming = ref(false);
+    watch(
+      () => props.message.status,
+      (s) => {
+        if (s === "pending" || s === "streaming") wasStreaming.value = true;
+      },
+      { immediate: true }
+    );
+    const useTypewriter = computed(() => !isUser.value && !!props.typing && wasStreaming.value);
     const toolChainItems = computed(() => {
       const steps = props.message.toolSteps ?? [];
       const running = props.message.status === "pending" || props.message.status === "streaming";
@@ -6231,7 +6243,7 @@ var _sfc_main$3 = /* @__PURE__ */ defineComponent({
             class: "fv-msg-tools",
             items: toolChainItems.value
           }, null, 8, ["items"])) : createCommentVNode("v-if", true),
-          createCommentVNode(" \u601D\u8003\u94FE\u6298\u53E0(assistant \u542B reasoning \u65F6) "),
+          createCommentVNode(" \u601D\u8003\u94FE\u6298\u53E0(assistant \u542B reasoning \u65F6);\u6D41\u5F0F\u671F\u95F4\u7ECF\u6253\u5B57\u673A\u5E73\u6ED1\u6253\u51FA "),
           !isUser.value && hasReasoning.value ? (openBlock(), createBlock(_sfc_main$a, {
             key: 3,
             content: __props.message.reasoning,
@@ -6239,9 +6251,15 @@ var _sfc_main$3 = /* @__PURE__ */ defineComponent({
             "auto-collapse": __props.autoCollapse
           }, {
             content: withCtx(() => [
-              createVNode(_sfc_main$i, {
+              useTypewriter.value ? (openBlock(), createBlock(_sfc_main$h, {
+                key: 0,
+                content: __props.message.reasoning ?? "",
+                "is-markdown": "",
+                typing: __props.typing
+              }, null, 8, ["content", "typing"])) : (openBlock(), createBlock(_sfc_main$i, {
+                key: 1,
                 content: __props.message.reasoning ?? ""
-              }, null, 8, ["content"])
+              }, null, 8, ["content"]))
             ]),
             _: 1
             /* STABLE */
@@ -6254,8 +6272,13 @@ var _sfc_main$3 = /* @__PURE__ */ defineComponent({
               toDisplayString(__props.message.error || "\u751F\u6210\u5931\u8D25"),
               1
               /* TEXT */
-            )) : __props.message.content ? (openBlock(), createBlock(_sfc_main$i, {
+            )) : useTypewriter.value && __props.message.content ? (openBlock(), createBlock(_sfc_main$h, {
               key: 1,
+              content: __props.message.content,
+              "is-markdown": "",
+              typing: __props.typing
+            }, null, 8, ["content", "typing"])) : __props.message.content ? (openBlock(), createBlock(_sfc_main$i, {
+              key: 2,
               content: __props.message.content
             }, null, 8, ["content"])) : __props.message.status === "pending" || __props.message.status === "streaming" ? (openBlock(), createElementBlock("span", _hoisted_13, [
               (openBlock(), createElementBlock(
@@ -6462,7 +6485,8 @@ var _sfc_main$2 = /* @__PURE__ */ defineComponent({
     userAvatar: { type: String, required: false, default: "" },
     assistantAvatar: { type: String, required: false, default: "" },
     userName: { type: String, required: false, default: "" },
-    assistantName: { type: String, required: false, default: "" }
+    assistantName: { type: String, required: false, default: "" },
+    typing: { type: [Boolean, Object], required: false, default: false }
   },
   emits: ["select", "copy", "regenerate", "branch-change"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -6615,6 +6639,7 @@ var _sfc_main$2 = /* @__PURE__ */ defineComponent({
                         "assistant-avatar": __props.assistantAvatar,
                         "user-name": __props.userName,
                         "assistant-name": __props.assistantName,
+                        typing: __props.typing,
                         onCopy,
                         onRegenerate,
                         onBranchChange: onBranch
@@ -6664,7 +6689,7 @@ var _sfc_main$2 = /* @__PURE__ */ defineComponent({
                           ]),
                           key: "5"
                         } : void 0
-                      ]), 1032, ["message", "branch", "show-actions", "show-branch-switch", "show-user-avatar", "show-user-name", "show-assistant-avatar", "show-assistant-name", "user-avatar", "assistant-avatar", "user-name", "assistant-name"]);
+                      ]), 1032, ["message", "branch", "show-actions", "show-branch-switch", "show-user-avatar", "show-user-name", "show-assistant-avatar", "show-assistant-name", "user-avatar", "assistant-avatar", "user-name", "assistant-name", "typing"]);
                     }),
                     128
                     /* KEYED_FRAGMENT */
@@ -7002,6 +7027,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     assistantName: { type: String, required: false, default: "" },
     placeholder: { type: String, required: false, default: "" },
     toolStepLabel: { type: Function, required: false, default: void 0 },
+    typing: { type: [Boolean, Object], required: false, default: false },
     senderShadow: { type: Boolean, required: false, default: true },
     suggestions: { type: Array, required: false, default: () => [] },
     features: { type: Object, required: false, default: () => ({}) },
@@ -7275,6 +7301,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               "assistant-avatar": __props.assistantAvatar,
               "user-name": __props.userName,
               "assistant-name": __props.assistantName,
+              typing: __props.typing,
               onSelect: onSelectSuggestion,
               onCopy,
               onRegenerate,
@@ -7346,7 +7373,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "8"
               } : void 0
-            ]), 1032, ["messages", "nodes", "name", "suggestions", "show-scroll-button", "scroll-button-threshold", "show-user-avatar", "show-user-name", "show-assistant-avatar", "show-assistant-name", "user-avatar", "assistant-avatar", "user-name", "assistant-name"]),
+            ]), 1032, ["messages", "nodes", "name", "suggestions", "show-scroll-button", "scroll-button-threshold", "show-user-avatar", "show-user-name", "show-assistant-avatar", "show-assistant-name", "user-avatar", "assistant-avatar", "user-name", "assistant-name", "typing"]),
             __props.features?.artifacts && artifacts.value.length ? (openBlock(), createBlock(_sfc_main$1, {
               key: 0,
               artifacts: artifacts.value,

package/lib/index.js

@@ -1611,7 +1611,9 @@
         const step = (typeof props.typing === "object" ? props.typing.step : void 0) ?? 2;
         const interval = (typeof props.typing === "object" ? props.typing.interval : void 0) ?? 50;
         timer = setInterval(() => {
-          cursor = Math.min(props.content.length, cursor + step);
+          const backlog = props.content.length - cursor;
+          const speed = Math.min(step * 6, Math.max(1, Math.round(step * (1 + backlog / 8))));
+          cursor = Math.min(props.content.length, cursor + speed);
           renderedContent.value = props.content.slice(0, cursor);
           progress.value = props.content.length ? cursor / props.content.length : 1;
           emit("writing");
@@ -6065,7 +6067,7 @@ ${fileParts.join("\n")}` });
     class: "fv-msg-error"
   };
   const _hoisted_13 = {
-    key: 2,
+    key: 3,
     class: "fv-msg-pending"
   };
   const _hoisted_14 = {
@@ -6097,7 +6099,8 @@ ${fileParts.join("\n")}` });
       assistantAvatar: { type: String, required: false, default: "" },
       userName: { type: String, required: false, default: "" },
       assistantName: { type: String, required: false, default: "" },
-      autoCollapse: { type: Boolean, required: false, default: true }
+      autoCollapse: { type: Boolean, required: false, default: true },
+      typing: { type: [Boolean, Object], required: false, default: false }
     },
     emits: ["copy", "regenerate", "branch-change"],
     setup(__props, { expose: __expose, emit: __emit }) {
@@ -6112,6 +6115,15 @@ ${fileParts.join("\n")}` });
       });
       const hasReasoning = vue.computed(() => !!props.message.reasoning);
       const hasToolSteps = vue.computed(() => (props.message.toolSteps?.length ?? 0) > 0);
+      const wasStreaming = vue.ref(false);
+      vue.watch(
+        () => props.message.status,
+        (s) => {
+          if (s === "pending" || s === "streaming") wasStreaming.value = true;
+        },
+        { immediate: true }
+      );
+      const useTypewriter = vue.computed(() => !isUser.value && !!props.typing && wasStreaming.value);
       const toolChainItems = vue.computed(() => {
         const steps = props.message.toolSteps ?? [];
         const running = props.message.status === "pending" || props.message.status === "streaming";
@@ -6247,7 +6259,7 @@ ${fileParts.join("\n")}` });
               class: "fv-msg-tools",
               items: toolChainItems.value
             }, null, 8, ["items"])) : vue.createCommentVNode("v-if", true),
-            vue.createCommentVNode(" \u601D\u8003\u94FE\u6298\u53E0(assistant \u542B reasoning \u65F6) "),
+            vue.createCommentVNode(" \u601D\u8003\u94FE\u6298\u53E0(assistant \u542B reasoning \u65F6);\u6D41\u5F0F\u671F\u95F4\u7ECF\u6253\u5B57\u673A\u5E73\u6ED1\u6253\u51FA "),
             !isUser.value && hasReasoning.value ? (vue.openBlock(), vue.createBlock(_sfc_main$a, {
               key: 3,
               content: __props.message.reasoning,
@@ -6255,9 +6267,15 @@ ${fileParts.join("\n")}` });
               "auto-collapse": __props.autoCollapse
             }, {
               content: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$i, {
+                useTypewriter.value ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
+                  key: 0,
+                  content: __props.message.reasoning ?? "",
+                  "is-markdown": "",
+                  typing: __props.typing
+                }, null, 8, ["content", "typing"])) : (vue.openBlock(), vue.createBlock(_sfc_main$i, {
+                  key: 1,
                   content: __props.message.reasoning ?? ""
-                }, null, 8, ["content"])
+                }, null, 8, ["content"]))
               ]),
               _: 1
               /* STABLE */
@@ -6270,8 +6288,13 @@ ${fileParts.join("\n")}` });
                 vue.toDisplayString(__props.message.error || "\u751F\u6210\u5931\u8D25"),
                 1
                 /* TEXT */
-              )) : __props.message.content ? (vue.openBlock(), vue.createBlock(_sfc_main$i, {
+              )) : useTypewriter.value && __props.message.content ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
                 key: 1,
+                content: __props.message.content,
+                "is-markdown": "",
+                typing: __props.typing
+              }, null, 8, ["content", "typing"])) : __props.message.content ? (vue.openBlock(), vue.createBlock(_sfc_main$i, {
+                key: 2,
                 content: __props.message.content
               }, null, 8, ["content"])) : __props.message.status === "pending" || __props.message.status === "streaming" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_13, [
                 (vue.openBlock(), vue.createElementBlock(
@@ -6478,7 +6501,8 @@ ${fileParts.join("\n")}` });
       userAvatar: { type: String, required: false, default: "" },
       assistantAvatar: { type: String, required: false, default: "" },
       userName: { type: String, required: false, default: "" },
-      assistantName: { type: String, required: false, default: "" }
+      assistantName: { type: String, required: false, default: "" },
+      typing: { type: [Boolean, Object], required: false, default: false }
     },
     emits: ["select", "copy", "regenerate", "branch-change"],
     setup(__props, { expose: __expose, emit: __emit }) {
@@ -6631,6 +6655,7 @@ ${fileParts.join("\n")}` });
                           "assistant-avatar": __props.assistantAvatar,
                           "user-name": __props.userName,
                           "assistant-name": __props.assistantName,
+                          typing: __props.typing,
                           onCopy,
                           onRegenerate,
                           onBranchChange: onBranch
@@ -6680,7 +6705,7 @@ ${fileParts.join("\n")}` });
                             ]),
                             key: "5"
                           } : void 0
-                        ]), 1032, ["message", "branch", "show-actions", "show-branch-switch", "show-user-avatar", "show-user-name", "show-assistant-avatar", "show-assistant-name", "user-avatar", "assistant-avatar", "user-name", "assistant-name"]);
+                        ]), 1032, ["message", "branch", "show-actions", "show-branch-switch", "show-user-avatar", "show-user-name", "show-assistant-avatar", "show-assistant-name", "user-avatar", "assistant-avatar", "user-name", "assistant-name", "typing"]);
                       }),
                       128
                       /* KEYED_FRAGMENT */
@@ -7018,6 +7043,7 @@ ${fileParts.join("\n")}` });
       assistantName: { type: String, required: false, default: "" },
       placeholder: { type: String, required: false, default: "" },
       toolStepLabel: { type: Function, required: false, default: void 0 },
+      typing: { type: [Boolean, Object], required: false, default: false },
       senderShadow: { type: Boolean, required: false, default: true },
       suggestions: { type: Array, required: false, default: () => [] },
       features: { type: Object, required: false, default: () => ({}) },
@@ -7291,6 +7317,7 @@ ${fileParts.join("\n")}` });
                 "assistant-avatar": __props.assistantAvatar,
                 "user-name": __props.userName,
                 "assistant-name": __props.assistantName,
+                typing: __props.typing,
                 onSelect: onSelectSuggestion,
                 onCopy,
                 onRegenerate,
@@ -7362,7 +7389,7 @@ ${fileParts.join("\n")}` });
                   ]),
                   key: "8"
                 } : void 0
-              ]), 1032, ["messages", "nodes", "name", "suggestions", "show-scroll-button", "scroll-button-threshold", "show-user-avatar", "show-user-name", "show-assistant-avatar", "show-assistant-name", "user-avatar", "assistant-avatar", "user-name", "assistant-name"]),
+              ]), 1032, ["messages", "nodes", "name", "suggestions", "show-scroll-button", "scroll-button-threshold", "show-user-avatar", "show-user-name", "show-assistant-avatar", "show-assistant-name", "user-avatar", "assistant-avatar", "user-name", "assistant-name", "typing"]),
               __props.features?.artifacts && artifacts.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$1, {
                 key: 0,
                 artifacts: artifacts.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fv-ui/ai-chat",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "description": "基于 Vue3 + Element Plus 的 AI 对话组件库",
   "type": "module",
   "main": "lib/index.js",