@touchvue/chat 1.0.0-beta.4 → 1.0.0-beta.40

package/es/packages/components/touchchat/src/AiChat/TouchHistory.vue2.mjs

@@ -1,7 +1,8 @@
-import { defineComponent, reactive, ref, inject, computed, watch, onMounted, openBlock, createElementBlock, unref, createElementVNode, withModifiers, createCommentVNode, createBlock, withCtx, renderSlot, withDirectives, createVNode, vShow } from 'vue';
-import _sfc_main$2 from './TouchChat.vue2.mjs';
-import _sfc_main$1 from './HistorySidebar.vue2.mjs';
-import _sfc_main$3 from './SiderBarView.vue2.mjs';
+import { defineComponent, reactive, ref, inject, watch, provide, computed, onMounted, openBlock, createElementBlock, createElementVNode, withModifiers, createCommentVNode, createBlock, withCtx, renderSlot, Fragment, withDirectives, createVNode, vShow } from 'vue';
+import TouchChat from './TouchChat.vue.mjs';
+import TouchAgent from './TouchAgent.vue.mjs';
+import HistorySidebar from './HistorySidebar.vue.mjs';
+import SiderBarView from './SiderBarView.vue.mjs';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "TouchHistory",
@@ -12,66 +13,150 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       isSidebarCollapsed: false,
       actionMenuVisible: {},
       mockMessages: [],
-      toggleSidebarFlag: false
+      toggleSidebarFlag: false,
+      agentsType: "",
+      clickCreateNum: 0
     });
-    const historyContainer = ref(null);
+    const watchHistoryData = ref([]);
+    const watchHistoryDetail = ref([]);
     const chatComponent = ref();
-    const isNotHeader = inject("isNotHeader", false);
-    const isDeepSeek = inject("isDeepSeek", true);
+    const layout = inject("layout", "side, think, upload, chain");
+    const isNotHeader = !layout.includes("side");
     const scripts = inject("scripts", []);
-    const getIsDeepSeekValue = () => {
-      return typeof isDeepSeek === "boolean" ? isDeepSeek : isDeepSeek.value;
+    const agents = inject("agents", []);
+    const agentsInfo = ref();
+    const isAgentRef = inject("agentConfigList", ref([]));
+    const iIsAgent = ref(false);
+    watch(
+      isAgentRef,
+      (newVal) => {
+        iIsAgent.value = newVal.length > 0;
+      },
+      { immediate: true }
+    );
+    const updateSharedData = (item) => {
+      var _a, _b;
+      agentsInfo.value = item;
+      if (chatComponent.value) {
+        (_b = (_a = chatComponent.value) == null ? void 0 : _a.handleAgentSelect) == null ? void 0 : _b.call(_a, item);
+      }
+    };
+    provide("updateSharedData", updateSharedData);
+    const STORAGE_KEYS = {
+      CHAT_HISTORY: scripts.length === 0 ? "chatHistory" : "robotHistory",
+      SIDEBAR_STATE: "sidebarCollapsed"
+    };
+    const saveToLocalStorage = () => {
+      localStorage.setItem(STORAGE_KEYS.CHAT_HISTORY, JSON.stringify(state.chatHistory));
+      localStorage.setItem(STORAGE_KEYS.SIDEBAR_STATE, JSON.stringify(state.isSidebarCollapsed));
+    };
+    const createNewChat = (title = "\u65B0\u5BF9\u8BDD", messageList = [], type) => {
+      var _a;
+      let agentsId = "";
+      if (agents.length > 0) {
+        agentsId = ((_a = agents.find((item) => item.name === title)) == null ? void 0 : _a.id) || "";
+      }
+      const newChat = {
+        // id: Date.now().toString(),
+        id: agentsId ? agentsId : (Math.floor(Math.random() * 89999999) + 1e7).toString(),
+        title,
+        time: /* @__PURE__ */ new Date(),
+        messages: messageList,
+        type: type ? type : ""
+      };
+      state.chatHistory.unshift(newChat);
+      saveToLocalStorage();
+      return newChat;
     };
     const loadFromLocalStorage = () => {
       const savedCollapseState = localStorage.getItem(STORAGE_KEYS.SIDEBAR_STATE);
       if (savedCollapseState) {
         state.isSidebarCollapsed = JSON.parse(savedCollapseState);
       }
+      if (scripts.length > 0) {
+        localStorage.setItem(STORAGE_KEYS.CHAT_HISTORY, "[]");
+        localStorage.setItem("activeAgentsName", "");
+      }
       const savedHistory = localStorage.getItem(STORAGE_KEYS.CHAT_HISTORY);
-      if (!getIsDeepSeekValue()) {
-        state.chatHistory = setHistoryData.value;
-        if (state.chatHistory.length > 0) {
-          state.activeChat = state.chatHistory[0].id;
-        }
-      } else if (savedHistory && getIsDeepSeekValue()) {
-        state.chatHistory = JSON.parse(savedHistory);
-        if (state.chatHistory.length > 0) {
-          state.activeChat = state.chatHistory[0].id;
-        }
-      } else {
-        createNewChat("AI\u57FA\u7840\u95EE\u7B54");
+      const historyData = JSON.parse(savedHistory || "[]");
+      if (agents.length > 0 && !historyData.length) {
+        agents.forEach((item) => {
+          const agentsList = [
+            {
+              chatId: item.id,
+              user: "ai",
+              type: "text",
+              isShowLike: true,
+              content: (item == null ? void 0 : item.intro) || "\u6211\u662FAI\u52A9\u624B\uFF0C\u6211\u53EF\u4EE5\u56DE\u7B54\u4F60\u7684\u95EE\u9898\uFF0C\u4F60\u53EF\u4EE5\u548C\u6211\u804A\u5929\uFF0C\u4E5F\u53EF\u4EE5\u95EE\u6211\u95EE\u9898\u3002"
+            }
+          ];
+          createNewChat(item.name, agentsList, item.name);
+        });
+      }
+      if (watchHistoryData.value.length > 0) {
+        state.chatHistory = watchHistoryData.value;
+      } else if (historyData.length > 0) {
+        state.chatHistory = historyData;
       }
     };
-    const currentChatMessages = computed(() => {
-      if (!getIsDeepSeekValue() && scripts.length === 0) {
+    const historyList = inject("historyList", []);
+    const setHistoryData = ref(Array.isArray(historyList) ? historyList : typeof historyList === "object" && historyList ? historyList : []);
+    const computedHistoryData = computed(() => {
+      if (setHistoryData.value.length) {
+        return setHistoryData.value;
+      }
+      return [];
+    });
+    watch(
+      computedHistoryData,
+      (newVal) => {
+        watchHistoryData.value = newVal;
+        state.chatHistory = newVal;
+        loadFromLocalStorage();
+      },
+      { immediate: true }
+    );
+    const historyDetail = inject("historyDetail", []);
+    const setMessageDetail = ref(Array.isArray(historyDetail) ? historyDetail : typeof historyDetail === "object" && historyDetail ? historyDetail : []);
+    const computedHistoryDetail = computed(() => {
+      if (setMessageDetail.value.length) {
         return setMessageDetail.value;
       }
-      if (!state.activeChat && getIsDeepSeekValue())
+      return [];
+    });
+    watch(
+      computedHistoryDetail,
+      (newVal) => {
+        watchHistoryDetail.value = newVal;
+      },
+      { immediate: true }
+    );
+    const messageItem = ref({ user: "", type: "", content: "" });
+    const messageIndex = ref(0);
+    const currentChatMessages = computed(() => {
+      if (watchHistoryDetail.value.length) {
+        return watchHistoryDetail.value;
+      }
+      if (!state.activeChat)
         return [];
-      if (!setMessageDetail.value.length && !setHistoryData.value.length && getIsDeepSeekValue() || scripts.length > 0 && !getIsDeepSeekValue()) {
+      if (!watchHistoryDetail.value.length && !watchHistoryData.value.length || watchHistoryData.value.length) {
         const currentChat = state.chatHistory.find((item) => item.id === state.activeChat);
         return (currentChat == null ? void 0 : currentChat.messages) || [];
       } else {
-        return setMessageDetail.value;
+        return watchHistoryDetail.value;
       }
     });
-    const historyData = inject("historyData", []);
-    const setHistoryData = ref(Array.isArray(historyData) ? historyData : typeof historyData === "object" && (historyData == null ? void 0 : historyData.value) ? historyData.value : []);
-    const messageDetail = inject("messageDetail", []);
-    const setMessageDetail = ref(Array.isArray(messageDetail) ? messageDetail : typeof messageDetail === "object" && (messageDetail == null ? void 0 : messageDetail.value) ? messageDetail.value : []);
-    const messageItem = ref({ user: "", type: "", content: "" });
-    const messageIndex = ref(0);
     watch(
       () => {
-        if (typeof historyData === "object" && (historyData == null ? void 0 : historyData.value) !== void 0) {
-          return historyData.value;
+        if (typeof historyList === "object" && historyList !== void 0) {
+          return historyList;
         }
-        return historyData;
+        return historyList;
       },
       (newVal) => {
-        if (newVal && Array.isArray(newVal)) {
-          setHistoryData.value = newVal;
-          if (!isDeepSeek && scripts.length === 0) {
+        if (newVal && Array.isArray(newVal) && newVal.length) {
+          watchHistoryData.value = newVal;
+          if (!scripts.length) {
             state.chatHistory = newVal;
             if (state.chatHistory.length > 0 && !state.activeChat) {
               state.activeChat = state.chatHistory[0].id;
@@ -83,14 +168,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     );
     watch(
       () => {
-        if (typeof messageDetail === "object" && (messageDetail == null ? void 0 : messageDetail.value) !== void 0) {
-          return messageDetail.value;
+        if (typeof historyDetail === "object" && historyDetail !== void 0) {
+          return historyDetail;
         }
-        return messageDetail;
+        return historyDetail;
       },
       (newVal) => {
         if (newVal && Array.isArray(newVal)) {
-          setMessageDetail.value = JSON.parse(JSON.stringify(newVal));
+          watchHistoryDetail.value = JSON.parse(JSON.stringify(newVal));
           if (chatComponent.value) {
             setTimeout(() => {
               var _a, _b;
@@ -100,30 +185,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         }
       },
       { deep: true, immediate: true }
-      // 添加immediate: true，确保在watch创建时立即执行一次
     );
     onMounted(() => {
       loadFromLocalStorage();
-      initEventListeners();
     });
-    const STORAGE_KEYS = {
-      CHAT_HISTORY: scripts.length === 0 ? "chatHistory" : "historyData",
-      SIDEBAR_STATE: "sidebarCollapsed"
-    };
-    function saveToLocalStorage() {
-      console.log("saveToLocalStorage", state.chatHistory);
-      localStorage.setItem(STORAGE_KEYS.CHAT_HISTORY, JSON.stringify(state.chatHistory));
-      localStorage.setItem(STORAGE_KEYS.SIDEBAR_STATE, JSON.stringify(state.isSidebarCollapsed));
-    }
-    function initEventListeners() {
-      document.addEventListener("click", () => {
-        Object.keys(state.actionMenuVisible).forEach((key) => {
-          state.actionMenuVisible[key] = false;
-        });
-      });
-    }
     const toggleSidebarOut = (item, index) => {
-      console.log("toggleSidebarOut", item, index);
       messageItem.value = item;
       messageIndex.value = index;
       if (state.toggleSidebarFlag) {
@@ -133,44 +199,71 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       state.isSidebarCollapsed = false;
       toggleSidebar();
     };
-    function toggleSidebar() {
+    const toggleSidebar = () => {
       state.isSidebarCollapsed = !state.isSidebarCollapsed;
       saveToLocalStorage();
-    }
-    function createNewChat(title = "\u65B0\u5BF9\u8BDD", messageList = []) {
-      const newChat = {
-        id: Date.now().toString(),
-        title,
-        time: /* @__PURE__ */ new Date(),
-        messages: messageList
-      };
-      state.chatHistory.unshift(newChat);
-      state.activeChat = newChat.id;
-      saveToLocalStorage();
-      return newChat;
-    }
-    function startNewChat() {
-      var _a, _b, _c;
+    };
+    const startNewChat = () => {
+      var _a, _b, _c, _d, _e, _f, _g;
+      localStorage.setItem("activeAgentsName", "");
+      const robotHistory = localStorage.getItem(STORAGE_KEYS.CHAT_HISTORY) || "[]";
+      const robotHistoryData = JSON.parse(robotHistory);
+      let messageList = [];
+      let messageItem2 = {};
+      let firstMessageList = [];
+      if (robotHistoryData.length) {
+        messageItem2 = robotHistoryData.find((item) => item.id === state.activeChat) || {};
+        messageList = (messageItem2 == null ? void 0 : messageItem2.messages) || [];
+        firstMessageList = ((_a = robotHistoryData == null ? void 0 : robotHistoryData[0]) == null ? void 0 : _a.messages) || [];
+      }
       state.toggleSidebarFlag = false;
+      if (watchHistoryData.value.length > 0 && firstMessageList.length > 0 && (watchHistoryDetail.value.length > 0 || currentChatMessages.value.length > 0 || messageList.length > 0) || !(messageItem2 == null ? void 0 : messageItem2.messages) && firstMessageList.length > 0 || !state.clickCreateNum) {
+        const newChat2 = createNewChat("\u65B0\u5BF9\u8BDD" + (state.chatHistory.length + 1));
+        state.activeChat = newChat2.id;
+        change("");
+        state.clickCreateNum++;
+        return;
+      }
+      if (state.chatHistory.length > 0 && !((_d = (_c = (_b = state.chatHistory) == null ? void 0 : _b[0]) == null ? void 0 : _c.messages) == null ? void 0 : _d.length)) {
+        state.activeChat = state.chatHistory[0].id;
+        change("");
+        return;
+      }
       if (!currentChatMessages.value.length && state.chatHistory.length > 0) {
-        state.activeChat = (_c = (_b = (_a = state.chatHistory) == null ? void 0 : _a[0]) == null ? void 0 : _b.id) != null ? _c : "";
+        state.activeChat = (_g = (_f = (_e = state.chatHistory) == null ? void 0 : _e[0]) == null ? void 0 : _f.id) != null ? _g : "";
+        change("");
         return;
       }
-      createNewChat("\u65B0\u5BF9\u8BDD" + (state.chatHistory.length + 1));
-    }
-    const handleActiveChat = inject("handleActiveChat", () => {
-      console.warn("\u672A\u63D0\u4F9BhandleActiveChat\u51FD\u6570");
+      const newChat = createNewChat("\u65B0\u5BF9\u8BDD" + (state.chatHistory.length + 1));
+      state.activeChat = newChat.id;
+      change("");
+    };
+    const change = inject("change", () => {
+      console.warn("\u672A\u63D0\u4F9Bchange\u51FD\u6570");
     });
-    function selectChat(id) {
-      state.toggleSidebarFlag = false;
+    const changeChatHistory = (index) => {
+      state.activeChat = state.chatHistory[index].id;
+      change(state.chatHistory[index].id);
+    };
+    const clearChatHistory = () => {
+      state.chatHistory = [];
+      state.activeChat = "";
+      localStorage.setItem(STORAGE_KEYS.CHAT_HISTORY, JSON.stringify([]));
+    };
+    const selectChat = (id, type) => {
       state.activeChat = id;
-      handleActiveChat(id);
+      state.toggleSidebarFlag = false;
+      state.agentsType = type;
+      if (!type) {
+        localStorage.setItem("activeAgentsName", "");
+      }
+      change(id);
       resetAllMenus();
-    }
-    const handleDeleteChat = inject("handleDeleteChat", () => {
-      console.warn("\u672A\u63D0\u4F9BhandleDeleteChat\u51FD\u6570");
+    };
+    const historyRemove = inject("historyRemove", () => {
+      console.warn("\u672A\u63D0\u4F9Bremove\u51FD\u6570");
     });
-    function deleteChat(id) {
+    const deleteChat = (id) => {
       const index = state.chatHistory.findIndex((item) => item.id === id);
       if (index === -1)
         return;
@@ -181,34 +274,35 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         state.activeChat = "";
         state.mockMessages = [];
       }
-      handleDeleteChat(id);
+      historyRemove(id);
       saveToLocalStorage();
-    }
+    };
     const beforeSendMessage = () => {
       state.toggleSidebarFlag = false;
     };
-    function sendMessage(messageList) {
-      console.log("sendMessage", messageList);
+    const sendMessage = (messageList, type) => {
       state.mockMessages = messageList;
+      if (type) {
+        return;
+      }
       if (!state.activeChat) {
-        console.log("!state.activeChat");
         const newChat = createNewChat("AI\u57FA\u7840\u95EE\u7B54", messageList);
         newChat.messages = messageList;
+        state.activeChat = newChat.id;
       } else {
         const currentChat = state.chatHistory.find((item) => item.id === state.activeChat);
-        console.log("!state.activeChat === 309", state.chatHistory, currentChat, state.activeChat);
         if (currentChat) {
           currentChat.messages = messageList;
           currentChat.time = /* @__PURE__ */ new Date();
         }
         saveToLocalStorage();
       }
-    }
-    function resetAllMenus() {
+    };
+    const resetAllMenus = () => {
       Object.keys(state.actionMenuVisible).forEach((key) => {
         state.actionMenuVisible[key] = false;
       });
-    }
+    };
     const handleRenameChat = (id, newTitle) => {
       const item = state.chatHistory.find((item2) => item2.id === id);
       if (item) {
@@ -225,21 +319,36 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       { deep: true }
     );
     __expose({
-      handleSend: (value) => {
+      send: (value, fileList, auto, type) => {
         var _a;
-        (_a = chatComponent.value) == null ? void 0 : _a.handleSendOut(value);
+        (_a = chatComponent.value) == null ? void 0 : _a.send(value, fileList, auto, type);
       },
-      handleSiderBarClose: () => {
+      closeExtend: () => {
         state.toggleSidebarFlag = false;
+      },
+      create: () => {
+        const newChat = createNewChat("\u65B0\u5BF9\u8BDD" + (state.chatHistory.length + 1));
+        state.activeChat = newChat.id;
+        change("");
+      },
+      retry: (index) => {
+        var _a;
+        (_a = chatComponent.value) == null ? void 0 : _a.retry(index);
+      },
+      update: (index, message) => {
+        var _a;
+        (_a = chatComponent.value) == null ? void 0 : _a.update(index, message);
+      },
+      changeChat: (index) => {
+        changeChatHistory(index);
+      },
+      clearChat: () => {
+        clearChatHistory();
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "historyContainer",
-        ref: historyContainer,
-        class: "touchchat"
-      }, [
-        state.isSidebarCollapsed && !unref(isNotHeader) ? (openBlock(), createElementBlock("div", {
+      return openBlock(), createElementBlock("div", { class: "touchchat" }, [
+        state.isSidebarCollapsed && !isNotHeader ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "touchchat-header"
         }, [
@@ -253,11 +362,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             class: "touchchat-add-lite",
             onClick: withModifiers(startNewChat, ["stop"])
           }, [
-            createElementVNode("div", { class: "touchchat-add-lite-icon" })
+            createElementVNode("div", { class: "touchchat-add-lite-icon" }),
+            createElementVNode("span", null, "\u65B0\u5BF9\u8BDD")
           ])
-        ])) : createCommentVNode("", true),
+        ])) : createCommentVNode("v-if", true),
         createElementVNode("div", { class: "touchchat-content" }, [
-          !unref(isNotHeader) && !state.isSidebarCollapsed ? (openBlock(), createBlock(_sfc_main$1, {
+          !isNotHeader && !state.isSidebarCollapsed ? (openBlock(), createBlock(HistorySidebar, {
             key: 0,
             "is-sidebar-collapsed": state.isSidebarCollapsed,
             "active-chat": state.activeChat,
@@ -267,18 +377,24 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             onSelectChat: selectChat,
             onRenameChat: handleRenameChat,
             onDeleteChat: deleteChat
-          }, null, 8, ["is-sidebar-collapsed", "active-chat", "chat-history"])) : createCommentVNode("", true),
-          (openBlock(), createBlock(_sfc_main$2, {
+          }, null, 8, ["is-sidebar-collapsed", "active-chat", "chat-history"])) : createCommentVNode("v-if", true),
+          !iIsAgent.value ? (openBlock(), createBlock(TouchChat, {
             ref_key: "chatComponent",
             ref: chatComponent,
-            key: state.activeChat,
+            key: state.activeChat + "-chat",
             value: currentChatMessages.value,
             onSendMessage: sendMessage,
             onToggleSidebar: toggleSidebarOut,
             onBeforeSendMessage: beforeSendMessage
           }, {
-            aiMessageContent: withCtx(({ item, index }) => [
-              renderSlot(_ctx.$slots, "aiMessageContent", {
+            aimsg: withCtx(({ item, index }) => [
+              renderSlot(_ctx.$slots, "aimsg", {
+                item,
+                index
+              })
+            ]),
+            msg: withCtx(({ item, index }) => [
+              renderSlot(_ctx.$slots, "msg", {
                 item,
                 index
               })
@@ -292,28 +408,116 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             welcome: withCtx(() => [
               renderSlot(_ctx.$slots, "welcome")
             ]),
-            input: withCtx(({ disabled }) => [
-              renderSlot(_ctx.$slots, "input", { disabled })
+            edit: withCtx(() => [
+              renderSlot(_ctx.$slots, "edit")
+            ]),
+            shortcut: withCtx(() => [
+              renderSlot(_ctx.$slots, "shortcut")
+            ]),
+            top: withCtx(() => [
+              renderSlot(_ctx.$slots, "top")
+            ]),
+            fn: withCtx(({ item, index }) => [
+              renderSlot(_ctx.$slots, "fn", {
+                item,
+                index
+              })
+            ]),
+            extendsFn: withCtx(({ item, index }) => [
+              renderSlot(_ctx.$slots, "extendsFn", {
+                item,
+                index
+              })
+            ]),
+            editTop: withCtx(() => [
+              renderSlot(_ctx.$slots, "editTop")
+            ]),
+            editFn: withCtx(() => [
+              renderSlot(_ctx.$slots, "editFn")
             ]),
             _: 3
-          }, 8, ["value"])),
-          withDirectives(createVNode(_sfc_main$3, {
+            /* FORWARDED */
+          }, 8, ["value"])) : (openBlock(), createElementBlock(
+            Fragment,
+            { key: 2 },
+            [
+              createCommentVNode(' :key="state.activeChat"  '),
+              (openBlock(), createBlock(TouchAgent, {
+                ref_key: "chatComponent",
+                ref: chatComponent,
+                key: state.activeChat + "-agent",
+                value: currentChatMessages.value,
+                onSendMessage: sendMessage,
+                onToggleSidebar: toggleSidebarOut,
+                onBeforeSendMessage: beforeSendMessage
+              }, {
+                aimsg: withCtx(({ item, index }) => [
+                  renderSlot(_ctx.$slots, "aimsg", {
+                    item,
+                    index
+                  })
+                ]),
+                msg: withCtx(({ item, index }) => [
+                  renderSlot(_ctx.$slots, "msg", {
+                    item,
+                    index
+                  })
+                ]),
+                aiAvatar: withCtx(() => [
+                  renderSlot(_ctx.$slots, "aiAvatar")
+                ]),
+                userAvatar: withCtx(() => [
+                  renderSlot(_ctx.$slots, "userAvatar")
+                ]),
+                welcome: withCtx(() => [
+                  renderSlot(_ctx.$slots, "welcome")
+                ]),
+                edit: withCtx(() => [
+                  renderSlot(_ctx.$slots, "edit")
+                ]),
+                shortcut: withCtx(() => [
+                  renderSlot(_ctx.$slots, "shortcut")
+                ]),
+                top: withCtx(() => [
+                  renderSlot(_ctx.$slots, "top")
+                ]),
+                fn: withCtx(({ item, index }) => [
+                  renderSlot(_ctx.$slots, "fn", {
+                    item,
+                    index
+                  })
+                ]),
+                extendsFn: withCtx(({ item, index }) => [
+                  renderSlot(_ctx.$slots, "extendsFn", {
+                    item,
+                    index
+                  })
+                ]),
+                _: 3
+                /* FORWARDED */
+              }, 8, ["value"]))
+            ],
+            2112
+            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+          )),
+          withDirectives(createVNode(SiderBarView, {
             flag: state.isSidebarCollapsed,
             item: messageItem.value,
             index: messageIndex.value
           }, {
-            siderBarView: withCtx(({ item: slotMessageItem, index: slotMessageIndex }) => [
-              renderSlot(_ctx.$slots, "siderBarView", {
+            extend: withCtx(({ item: slotMessageItem, index: slotMessageIndex }) => [
+              renderSlot(_ctx.$slots, "extend", {
                 item: slotMessageItem,
                 index: slotMessageIndex
               })
             ]),
             _: 3
+            /* FORWARDED */
           }, 8, ["flag", "item", "index"]), [
             [vShow, state.toggleSidebarFlag]
           ])
         ])
-      ], 512);
+      ]);
     };
   }
 });