@fv-ui/ai-chat 0.4.0 → 0.7.0

package/es/index.mjs

@@ -5,7 +5,7 @@ import DOMPurify from 'dompurify';
 import Prism$1 from 'prismjs';
 import { ElAvatar, ElButton, ElIcon, ElPopover, ElMessage, ElDialog, ElDropdown, ElDropdownMenu, ElDropdownItem, ElMessageBox, ElTooltip, ElSelect, ElOption } from 'element-plus';
 import * as ElementPlusIconsVue from '@element-plus/icons-vue';
-import { ArrowDown, Close, Check, Delete, Microphone, Promotion, VideoPause, Loading, SuccessFilled, CircleCloseFilled, ChatDotRound, Cpu, Cellphone, Link, Folder, Headset, Film, Monitor, DataAnalysis, Document, Notebook, Picture, Paperclip, RefreshRight, MoreFilled, User, DocumentCopy, ArrowUp, CopyDocument, Download, FullScreen } from '@element-plus/icons-vue';
+import { ArrowDown, Close, Check, Delete, Microphone, Promotion, VideoPause, Loading, SuccessFilled, CircleCloseFilled, ChatDotRound, Cpu, Cellphone, Link, Folder, Headset, Film, Monitor, DataAnalysis, Document, Notebook, Picture, Paperclip, RefreshRight, MoreFilled, User, DocumentCopy, ArrowUp, Bottom, CopyDocument, Download, FullScreen } from '@element-plus/icons-vue';
 
 function unwrapPlugin(plugin) {
   const candidate = plugin && typeof plugin === "object" && "default" in plugin ? plugin.default : plugin;
@@ -3343,7 +3343,7 @@ const _hoisted_16$1 = {
   key: 1,
   class: "fv-editor-footer"
 };
-const _hoisted_17 = { class: "fv-editor-select-dialog" };
+const _hoisted_17$1 = { class: "fv-editor-select-dialog" };
 const _hoisted_18 = { class: "fv-editor-select-title" };
 const _hoisted_19 = { class: "fv-editor-select-grid" };
 const _hoisted_20 = ["onClick"];
@@ -4306,7 +4306,7 @@ var _sfc_main$b = /* @__PURE__ */ defineComponent({
             onClose: closeSelectDialog
           }, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_17, [
+              createElementVNode("div", _hoisted_17$1, [
                 (openBlock(true), createElementBlock(
                   Fragment,
                   null,
@@ -5615,6 +5615,7 @@ function createMessageTree(initial) {
       role: node.role,
       content: node.content,
       reasoning: node.reasoning,
+      toolSteps: node.toolSteps ? node.toolSteps.map((s) => ({ ...s })) : void 0,
       files: node.files ? [...node.files] : void 0,
       modelIdx: node.modelIdx,
       model: node.model,
@@ -5895,6 +5896,17 @@ ${fileParts.join("\n")}` });
         msgs.edit(assistantId, { backendId: id });
       },
       onTool: (ev) => {
+        const steps = [...msgs.messages.value[assistantId]?.toolSteps ?? []];
+        if (ev.status === "start") {
+          steps.push({
+            key: `${ev.toolName}-${steps.length}`,
+            title: options.toolStepLabel ? options.toolStepLabel(ev.toolName) : ev.toolName,
+            status: "loading"
+          });
+        } else if (steps.length) {
+          steps[steps.length - 1] = { ...steps[steps.length - 1], status: "success" };
+        }
+        msgs.edit(assistantId, { toolSteps: steps });
         options.onToolEvent?.(ev);
       },
       onDone: () => {
@@ -6008,50 +6020,51 @@ const _hoisted_2$3 = {
   key: 0,
   class: "fv-msg-avatar"
 };
-const _hoisted_3$3 = { class: "fv-msg-main" };
-const _hoisted_4$2 = {
+const _hoisted_3$3 = ["src"];
+const _hoisted_4$2 = ["src"];
+const _hoisted_5 = { class: "fv-msg-main" };
+const _hoisted_6 = {
   key: 0,
   class: "fv-msg-header"
 };
-const _hoisted_5 = { class: "fv-msg-role" };
-const _hoisted_6 = {
-  key: 0,
+const _hoisted_7 = {
+  key: 2,
   class: "fv-msg-model"
 };
-const _hoisted_7 = {
+const _hoisted_8 = {
   key: 1,
   class: "fv-msg-files"
 };
-const _hoisted_8 = ["src", "alt"];
-const _hoisted_9 = {
+const _hoisted_9 = ["src", "alt"];
+const _hoisted_10 = {
   key: 1,
   class: "fv-msg-file-name"
 };
-const _hoisted_10 = {
-  key: 3,
+const _hoisted_11 = {
+  key: 4,
   class: "fv-msg-content"
 };
-const _hoisted_11 = {
+const _hoisted_12 = {
   key: 0,
   class: "fv-msg-error"
 };
-const _hoisted_12 = {
+const _hoisted_13 = {
   key: 2,
   class: "fv-msg-pending"
 };
-const _hoisted_13 = {
-  key: 4,
-  class: "fv-msg-content fv-msg-content-user"
-};
 const _hoisted_14 = {
   key: 5,
-  class: "fv-msg-actions"
+  class: "fv-msg-content fv-msg-content-user"
 };
 const _hoisted_15 = {
+  key: 6,
+  class: "fv-msg-actions"
+};
+const _hoisted_16 = {
   key: 0,
   class: "fv-msg-branch"
 };
-const _hoisted_16 = { class: "fv-msg-branch-label" };
+const _hoisted_17 = { class: "fv-msg-branch-label" };
 var _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...{ name: "FvAiMessage" },
   __name: "index",
@@ -6062,6 +6075,12 @@ var _sfc_main$3 = /* @__PURE__ */ defineComponent({
     showBranchSwitch: { type: Boolean, required: false, default: true },
     showUserAvatar: { type: Boolean, required: false, default: true },
     showUserName: { type: Boolean, required: false, default: true },
+    showAssistantAvatar: { type: Boolean, required: false, default: true },
+    showAssistantName: { type: Boolean, required: false, default: true },
+    userAvatar: { type: String, required: false, default: "" },
+    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 }
   },
   emits: ["copy", "regenerate", "branch-change"],
@@ -6076,6 +6095,19 @@ var _sfc_main$3 = /* @__PURE__ */ defineComponent({
       return "end";
     });
     const hasReasoning = computed(() => !!props.message.reasoning);
+    const hasToolSteps = computed(() => (props.message.toolSteps?.length ?? 0) > 0);
+    const toolChainItems = computed(() => {
+      const steps = props.message.toolSteps ?? [];
+      const running = props.message.status === "pending" || props.message.status === "streaming";
+      return steps.map((s) => {
+        const loading = running && s.status !== "error" && s.status !== "success";
+        return {
+          ...s,
+          status: loading ? "loading" : s.status ?? "success",
+          title: `${loading ? "\u6B63\u5728\u67E5\u8BE2" : "\u5DF2\u67E5\u8BE2"}${s.title ?? ""}`
+        };
+      });
+    });
     const modelLabel = computed(() => props.message.model ?? "");
     function onCopy() {
       emit("copy", props.message);
@@ -6092,50 +6124,70 @@ var _sfc_main$3 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["fv-msg", [`is-${__props.message.role}`, { "is-error": __props.message.status === "error", "is-user": isUser.value }]]),
         "data-message-id": __props.message.id
       }, [
-        createCommentVNode(" \u5934\u50CF:user \u53F3\u4FA7(\u81EA\u8EAB),assistant \u5DE6\u4FA7;showUserAvatar=false \u65F6\u7528\u6237\u6D88\u606F\u4E0D\u6E32\u67D3 "),
-        !isUser.value || __props.showUserAvatar ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
+        createCommentVNode(" \u5934\u50CF:user \u53F3\u4FA7(\u81EA\u8EAB),assistant \u5DE6\u4FA7;\u663E\u9690\u5F00\u5173\u5173\u95ED\u65F6\u4E0D\u6E32\u67D3;\r\n         \u4F18\u5148\u7EA7:message-avatar \u6574\u4F53\u63D2\u69FD > user-avatar/assistant-avatar \u7EC6\u5206\u63D2\u69FD > props \u56FE\u7247 > \u5185\u7F6E\u56FE\u6807 "),
+        (isUser.value ? __props.showUserAvatar : __props.showAssistantAvatar) ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
           renderSlot(_ctx.$slots, "message-avatar", { message: __props.message }, () => [
-            isUser.value ? (openBlock(), createBlock(unref(ElIcon), {
-              key: 0,
-              class: "fv-msg-avatar-user"
-            }, {
-              default: withCtx(() => [
-                createVNode(unref(User))
-              ]),
-              _: 1
-              /* STABLE */
-            })) : (openBlock(), createBlock(unref(ElIcon), {
-              key: 1,
-              class: "fv-msg-avatar-bot"
-            }, {
-              default: withCtx(() => [
-                createVNode(unref(ChatDotRound))
-              ]),
-              _: 1
-              /* STABLE */
-            }))
+            isUser.value ? renderSlot(_ctx.$slots, "user-avatar", {}, () => [
+              __props.userAvatar ? (openBlock(), createElementBlock("img", {
+                key: 0,
+                class: "fv-msg-avatar-img",
+                src: __props.userAvatar,
+                alt: ""
+              }, null, 8, _hoisted_3$3)) : (openBlock(), createBlock(unref(ElIcon), {
+                key: 1,
+                class: "fv-msg-avatar-user"
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(User))
+                ]),
+                _: 1
+                /* STABLE */
+              }))
+            ], void 0, 0) : renderSlot(_ctx.$slots, "assistant-avatar", {}, () => [
+              __props.assistantAvatar ? (openBlock(), createElementBlock("img", {
+                key: 0,
+                class: "fv-msg-avatar-img",
+                src: __props.assistantAvatar,
+                alt: ""
+              }, null, 8, _hoisted_4$2)) : (openBlock(), createBlock(unref(ElIcon), {
+                key: 1,
+                class: "fv-msg-avatar-bot"
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(ChatDotRound))
+                ]),
+                _: 1
+                /* STABLE */
+              }))
+            ], void 0, 1)
           ])
         ])) : createCommentVNode("v-if", true),
-        createElementVNode("div", _hoisted_3$3, [
-          createCommentVNode(" \u5934\u90E8:\u89D2\u8272\u540D + \u6A21\u578B\u6807\u8BB0;showUserName=false \u65F6\u7528\u6237\u6D88\u606F\u4E0D\u6E32\u67D3 "),
-          !isUser.value || __props.showUserName ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
-            createElementVNode(
-              "span",
-              _hoisted_5,
-              toDisplayString(isUser.value ? "\u4F60" : "\u52A9\u624B"),
-              1
-              /* TEXT */
-            ),
+        createElementVNode("div", _hoisted_5, [
+          createCommentVNode(" \u5934\u90E8:\u89D2\u8272\u540D + \u6A21\u578B\u6807\u8BB0;\u663E\u9690\u5F00\u5173\u5173\u95ED\u65F6\u4E0D\u6E32\u67D3;\u7EC6\u5206\u63D2\u69FD > props > \u9ED8\u8BA4\u6587\u6848 "),
+          (isUser.value ? __props.showUserName : __props.showAssistantName) ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            isUser.value ? renderSlot(_ctx.$slots, "user-name", { message: __props.message }, () => [
+              createTextVNode(
+                toDisplayString(__props.userName || "\u4F60"),
+                1
+                /* TEXT */
+              )
+            ], void 0, 0) : renderSlot(_ctx.$slots, "assistant-name", { message: __props.message }, () => [
+              createTextVNode(
+                toDisplayString(__props.assistantName || "\u52A9\u624B"),
+                1
+                /* TEXT */
+              )
+            ], void 0, 1),
             !isUser.value && modelLabel.value ? (openBlock(), createElementBlock(
               "span",
-              _hoisted_6,
+              _hoisted_7,
               toDisplayString(modelLabel.value),
               1
               /* TEXT */
             )) : createCommentVNode("v-if", true)
           ])) : createCommentVNode("v-if", true),
           createCommentVNode(" \u9644\u4EF6:user \u6D88\u606F files \u4EE5 FilesCard \u5E73\u94FA "),
-          __props.message.files?.length ? (openBlock(), createElementBlock("div", _hoisted_7, [
+          __props.message.files?.length ? (openBlock(), createElementBlock("div", _hoisted_8, [
             renderSlot(_ctx.$slots, "message-files", {
               message: __props.message,
               files: __props.message.files
@@ -6156,9 +6208,9 @@ var _sfc_main$3 = /* @__PURE__ */ defineComponent({
                         class: "fv-msg-file-img",
                         src: f.url,
                         alt: f.name
-                      }, null, 8, _hoisted_8)) : (openBlock(), createElementBlock(
+                      }, null, 8, _hoisted_9)) : (openBlock(), createElementBlock(
                         "span",
-                        _hoisted_9,
+                        _hoisted_10,
                         toDisplayString(f.name),
                         1
                         /* TEXT */
@@ -6173,9 +6225,15 @@ var _sfc_main$3 = /* @__PURE__ */ defineComponent({
               ))
             ])
           ])) : createCommentVNode("v-if", true),
+          createCommentVNode(" \u5DE5\u5177\u8C03\u7528\u8F68\u8FF9(assistant \u542B toolSteps \u65F6):\u7EB5\u5411\u6B65\u9AA4\u94FE,Thinking \u4E4B\u4E0B\u6B63\u6587\u4E4B\u4E0A "),
+          !isUser.value && hasToolSteps.value ? (openBlock(), createBlock(_sfc_main$9, {
+            key: 2,
+            class: "fv-msg-tools",
+            items: toolChainItems.value
+          }, null, 8, ["items"])) : createCommentVNode("v-if", true),
           createCommentVNode(" \u601D\u8003\u94FE\u6298\u53E0(assistant \u542B reasoning \u65F6) "),
           !isUser.value && hasReasoning.value ? (openBlock(), createBlock(_sfc_main$a, {
-            key: 2,
+            key: 3,
             content: __props.message.reasoning,
             status: thinkingStatus.value,
             "auto-collapse": __props.autoCollapse
@@ -6189,17 +6247,17 @@ var _sfc_main$3 = /* @__PURE__ */ defineComponent({
             /* STABLE */
           }, 8, ["content", "status", "auto-collapse"])) : createCommentVNode("v-if", true),
           createCommentVNode(" \u6B63\u6587:user \u7EAF\u6587\u672C\u6C14\u6CE1;assistant Markdown;pending \u7A7A\u5185\u5BB9\u7ED9\u52A0\u8F7D\u5360\u4F4D "),
-          !isUser.value ? (openBlock(), createElementBlock("div", _hoisted_10, [
+          !isUser.value ? (openBlock(), createElementBlock("div", _hoisted_11, [
             __props.message.status === "error" ? (openBlock(), createElementBlock(
               "span",
-              _hoisted_11,
+              _hoisted_12,
               toDisplayString(__props.message.error || "\u751F\u6210\u5931\u8D25"),
               1
               /* TEXT */
             )) : __props.message.content ? (openBlock(), createBlock(_sfc_main$i, {
               key: 1,
               content: __props.message.content
-            }, null, 8, ["content"])) : __props.message.status === "pending" || __props.message.status === "streaming" ? (openBlock(), createElementBlock("span", _hoisted_12, [
+            }, null, 8, ["content"])) : __props.message.status === "pending" || __props.message.status === "streaming" ? (openBlock(), createElementBlock("span", _hoisted_13, [
               (openBlock(), createElementBlock(
                 Fragment,
                 null,
@@ -6222,13 +6280,13 @@ var _sfc_main$3 = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("v-if", true)
           ])) : (openBlock(), createElementBlock(
             "div",
-            _hoisted_13,
+            _hoisted_14,
             toDisplayString(__props.message.content),
             1
             /* TEXT */
           )),
           createCommentVNode(" \u64CD\u4F5C\u533A:assistant \u590D\u5236/\u91CD\u751F\u6210 + \u5206\u652F\u5207\u6362;user \u4EC5\u590D\u5236(hover \u6D88\u606F\u65F6\u6D6E\u73B0,\u89C1 scss) "),
-          __props.showActions || __props.showBranchSwitch && __props.branch && __props.branch.count > 1 ? (openBlock(), createElementBlock("div", _hoisted_14, [
+          __props.showActions || __props.showBranchSwitch && __props.branch && __props.branch.count > 1 ? (openBlock(), createElementBlock("div", _hoisted_15, [
             renderSlot(_ctx.$slots, "message-actions", { message: __props.message }, () => [
               __props.showActions && isUser.value ? (openBlock(), createBlock(unref(ElTooltip), {
                 key: 0,
@@ -6319,7 +6377,7 @@ var _sfc_main$3 = /* @__PURE__ */ defineComponent({
               })) : createCommentVNode("v-if", true)
             ]),
             createCommentVNode(" \u5206\u652F\u5207\u6362:\u5144\u5F1F\u5206\u652F > 1 \u65F6 "),
-            __props.showBranchSwitch && __props.branch && __props.branch.count > 1 ? (openBlock(), createElementBlock("span", _hoisted_15, [
+            __props.showBranchSwitch && __props.branch && __props.branch.count > 1 ? (openBlock(), createElementBlock("span", _hoisted_16, [
               createVNode(unref(ElButton), {
                 text: "",
                 size: "small",
@@ -6342,7 +6400,7 @@ var _sfc_main$3 = /* @__PURE__ */ defineComponent({
               }, 8, ["disabled"]),
               createElementVNode(
                 "span",
-                _hoisted_16,
+                _hoisted_17,
                 toDisplayString(__props.branch.index) + " / " + toDisplayString(__props.branch.count),
                 1
                 /* TEXT */
@@ -6393,10 +6451,18 @@ var _sfc_main$2 = /* @__PURE__ */ defineComponent({
     suggestions: { type: Array, required: false, default: () => [] },
     suggestionsTitle: { type: String, required: false, default: "" },
     scrollThreshold: { type: Number, required: false, default: 40 },
+    showScrollButton: { type: Boolean, required: false, default: true },
+    scrollButtonThreshold: { type: Number, required: false, default: 100 },
     showActions: { type: Boolean, required: false, default: true },
     showBranchSwitch: { type: Boolean, required: false, default: true },
     showUserAvatar: { type: Boolean, required: false, default: true },
-    showUserName: { type: Boolean, required: false, default: true }
+    showUserName: { type: Boolean, required: false, default: true },
+    showAssistantAvatar: { type: Boolean, required: false, default: true },
+    showAssistantName: { type: Boolean, required: false, default: true },
+    userAvatar: { type: String, required: false, default: "" },
+    assistantAvatar: { type: String, required: false, default: "" },
+    userName: { type: String, required: false, default: "" },
+    assistantName: { type: String, required: false, default: "" }
   },
   emits: ["select", "copy", "regenerate", "branch-change"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -6421,8 +6487,14 @@ var _sfc_main$2 = /* @__PURE__ */ defineComponent({
     function scrollToBottomIfNear() {
       if (distanceFromBottom() <= props.scrollThreshold) nextTick(() => scrollToBottom());
     }
+    const isAwayFromBottom = ref(false);
+    function onScroll() {
+      isAwayFromBottom.value = distanceFromBottom() > props.scrollButtonThreshold;
+    }
+    watch(() => props.scrollButtonThreshold, onScroll);
     onMounted(() => {
       if (!isEmpty.value) nextTick(() => scrollToBottom(false));
+      onScroll();
     });
     watch(() => props.messages.length, (nv, ov) => {
       if (nv > (ov ?? 0)) scrollToBottomIfNear();
@@ -6499,7 +6571,8 @@ var _sfc_main$2 = /* @__PURE__ */ defineComponent({
               {
                 ref_key: "scrollRef",
                 ref: scrollRef,
-                class: "fv-messages-scroll"
+                class: "fv-messages-scroll",
+                onScrollPassive: onScroll
               },
               [
                 createElementVNode("div", _hoisted_3$2, [
@@ -6515,6 +6588,12 @@ var _sfc_main$2 = /* @__PURE__ */ defineComponent({
                         "show-branch-switch": __props.showBranchSwitch,
                         "show-user-avatar": __props.showUserAvatar,
                         "show-user-name": __props.showUserName,
+                        "show-assistant-avatar": __props.showAssistantAvatar,
+                        "show-assistant-name": __props.showAssistantName,
+                        "user-avatar": __props.userAvatar,
+                        "assistant-avatar": __props.assistantAvatar,
+                        "user-name": __props.userName,
+                        "assistant-name": __props.assistantName,
                         onCopy,
                         onRegenerate,
                         onBranchChange: onBranch
@@ -6535,16 +6614,77 @@ var _sfc_main$2 = /* @__PURE__ */ defineComponent({
                             renderSlot(_ctx.$slots, "message-actions", mergeProps({ ref_for: true }, scope))
                           ]),
                           key: "1"
+                        } : void 0,
+                        _ctx.$slots["user-avatar"] ? {
+                          name: "user-avatar",
+                          fn: withCtx(() => [
+                            renderSlot(_ctx.$slots, "user-avatar")
+                          ]),
+                          key: "2"
+                        } : void 0,
+                        _ctx.$slots["assistant-avatar"] ? {
+                          name: "assistant-avatar",
+                          fn: withCtx(() => [
+                            renderSlot(_ctx.$slots, "assistant-avatar")
+                          ]),
+                          key: "3"
+                        } : void 0,
+                        _ctx.$slots["user-name"] ? {
+                          name: "user-name",
+                          fn: withCtx((scope) => [
+                            renderSlot(_ctx.$slots, "user-name", mergeProps({ ref_for: true }, scope))
+                          ]),
+                          key: "4"
+                        } : void 0,
+                        _ctx.$slots["assistant-name"] ? {
+                          name: "assistant-name",
+                          fn: withCtx((scope) => [
+                            renderSlot(_ctx.$slots, "assistant-name", mergeProps({ ref_for: true }, scope))
+                          ]),
+                          key: "5"
                         } : void 0
-                      ]), 1032, ["message", "branch", "show-actions", "show-branch-switch", "show-user-avatar", "show-user-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"]);
                     }),
                     128
                     /* KEYED_FRAGMENT */
-                  ))
+                  )),
+                  createCommentVNode(" \u6EDA\u5230\u5E95\u90E8\u60AC\u6D6E\u6309\u94AE:\u5728 fv-messages-inner \u5185,\u968F\u5185\u5BB9\u5BBD\u5EA6\u7EA6\u675F\u5C42\u5B9A\u4F4D(\u5BBD\u5C4F\u65F6\u4E0D\u8D34\u89C6\u53E3\u53F3\u7F18);\r\n             \u8DDD\u5E95\u8D85\u8FC7 scrollButtonThreshold \u663E\u793A(\u7A7A\u6001\u4E0D\u6E32\u67D3);\r\n             scroll-button \u63D2\u69FD\u6574\u4F53\u8986\u76D6\u6309\u94AE,scroll-button-icon \u63D2\u69FD\u4EC5\u8986\u76D6\u56FE\u6807\u5185\u5BB9 "),
+                  createVNode(Transition, { name: "fv-messages-back-fade" }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "scroll-button", {
+                        scrollToBottom,
+                        awayFromBottom: isAwayFromBottom.value
+                      }, () => [
+                        __props.showScrollButton && !isEmpty.value && isAwayFromBottom.value ? (openBlock(), createBlock(unref(ElButton), {
+                          key: 0,
+                          class: "fv-messages-back",
+                          circle: "",
+                          "aria-label": "\u6EDA\u52A8\u5230\u5E95\u90E8",
+                          onClick: _cache[0] || (_cache[0] = ($event) => scrollToBottom())
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(unref(ElIcon), { class: "fv-messages-back-icon" }, {
+                              default: withCtx(() => [
+                                renderSlot(_ctx.$slots, "scroll-button-icon", {}, () => [
+                                  createVNode(unref(Bottom))
+                                ])
+                              ]),
+                              _: 3
+                              /* FORWARDED */
+                            })
+                          ]),
+                          _: 3
+                          /* FORWARDED */
+                        })) : createCommentVNode("v-if", true)
+                      ])
+                    ]),
+                    _: 3
+                    /* FORWARDED */
+                  })
                 ])
               ],
-              512
-              /* NEED_PATCH */
+              544
+              /* NEED_HYDRATION, NEED_PATCH */
             )
           ],
           2112
@@ -6829,9 +6969,18 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     title: { type: String, required: false, default: "" },
     showHeader: { type: Boolean, required: false, default: false },
     centerWelcome: { type: Boolean, required: false, default: true },
+    showScrollButton: { type: Boolean, required: false, default: true },
+    scrollButtonThreshold: { type: Number, required: false, default: 100 },
     showUserAvatar: { type: Boolean, required: false, default: true },
     showUserName: { type: Boolean, required: false, default: true },
+    showAssistantAvatar: { type: Boolean, required: false, default: true },
+    showAssistantName: { type: Boolean, required: false, default: true },
+    userAvatar: { type: String, required: false, default: "" },
+    assistantAvatar: { type: String, required: false, default: "" },
+    userName: { type: String, required: false, default: "" },
+    assistantName: { type: String, required: false, default: "" },
     placeholder: { type: String, required: false, default: "" },
+    toolStepLabel: { type: Function, required: false, default: void 0 },
     senderShadow: { type: Boolean, required: false, default: true },
     suggestions: { type: Array, required: false, default: () => [] },
     features: { type: Object, required: false, default: () => ({}) },
@@ -6875,6 +7024,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       adapter: resolveAdapter,
       models: () => isMultiple.value && selectedModels.value.length ? selectedModels.value : [""],
       initial: { messages: initialTable, currentId: initialId },
+      toolStepLabel: props.toolStepLabel,
       onToolEvent: (ev) => emit("tool-event", ev)
     });
     const { send, stop: stopChat, regenerate: regenerateChat, msgs, isLoading } = chat;
@@ -7094,8 +7244,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               nodes: unref(nodeTable),
               name: __props.title,
               suggestions: __props.suggestions,
+              "show-scroll-button": __props.showScrollButton,
+              "scroll-button-threshold": __props.scrollButtonThreshold,
               "show-user-avatar": __props.showUserAvatar,
               "show-user-name": __props.showUserName,
+              "show-assistant-avatar": __props.showAssistantAvatar,
+              "show-assistant-name": __props.showAssistantName,
+              "user-avatar": __props.userAvatar,
+              "assistant-avatar": __props.assistantAvatar,
+              "user-name": __props.userName,
+              "assistant-name": __props.assistantName,
               onSelect: onSelectSuggestion,
               onCopy,
               onRegenerate,
@@ -7118,14 +7276,56 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "1"
               } : void 0,
+              _ctx.$slots["user-avatar"] ? {
+                name: "user-avatar",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "user-avatar")
+                ]),
+                key: "2"
+              } : void 0,
+              _ctx.$slots["assistant-avatar"] ? {
+                name: "assistant-avatar",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "assistant-avatar")
+                ]),
+                key: "3"
+              } : void 0,
+              _ctx.$slots["user-name"] ? {
+                name: "user-name",
+                fn: withCtx((scope) => [
+                  renderSlot(_ctx.$slots, "user-name", normalizeProps(guardReactiveProps(scope)))
+                ]),
+                key: "4"
+              } : void 0,
+              _ctx.$slots["assistant-name"] ? {
+                name: "assistant-name",
+                fn: withCtx((scope) => [
+                  renderSlot(_ctx.$slots, "assistant-name", normalizeProps(guardReactiveProps(scope)))
+                ]),
+                key: "5"
+              } : void 0,
               _ctx.$slots.empty ? {
                 name: "empty",
                 fn: withCtx(() => [
                   renderSlot(_ctx.$slots, "empty")
                 ]),
-                key: "2"
+                key: "6"
+              } : void 0,
+              _ctx.$slots["scroll-button"] ? {
+                name: "scroll-button",
+                fn: withCtx((scope) => [
+                  renderSlot(_ctx.$slots, "scroll-button", normalizeProps(guardReactiveProps(scope)))
+                ]),
+                key: "7"
+              } : void 0,
+              _ctx.$slots["scroll-button-icon"] ? {
+                name: "scroll-button-icon",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "scroll-button-icon")
+                ]),
+                key: "8"
               } : void 0
-            ]), 1032, ["messages", "nodes", "name", "suggestions", "show-user-avatar", "show-user-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"]),
             __props.features?.artifacts && artifacts.value.length ? (openBlock(), createBlock(_sfc_main$1, {
               key: 0,
               artifacts: artifacts.value,