@axiom-lattice/react-sdk 2.0.2 → 2.0.4

package/dist/index.js

@@ -33,6 +33,7 @@ var index_exports = {};
 __export(index_exports, {
   AxiomLatticeProvider: () => AxiomLatticeProvider,
   Chating: () => Chating,
+  FileExplorer: () => FileExplorer,
   MDMermaid: () => MDMermaid,
   MDResponse: () => MDResponse,
   MDViewFormItem: () => MDViewFormItem,
@@ -124,9 +125,22 @@ function useChat(threadId, options = {}) {
   }, [options.initialMessages]);
   const handleStreamEvent = (0, import_react2.useCallback)((chunk) => {
     chunkMessageMerger.current.push(chunk);
+    let todos;
+    if (chunk.type === "tool" && chunk.data && typeof chunk.data.content === "string" && chunk.data.content.startsWith("```todo_list")) {
+      try {
+        const content = chunk.data.content;
+        const match = content.match(/```todo_list\s*([\s\S]*?)\s*```/);
+        if (match && match[1]) {
+          todos = JSON.parse(match[1]);
+        }
+      } catch (e) {
+        console.error("Failed to parse todo list from chunk", e);
+      }
+    }
     const updatedMessages = chunkMessageMerger.current.getMessages();
     setState((prev) => ({
       ...prev,
+      todos: todos || prev.todos,
       messages: updatedMessages,
       isLoading: true,
       streamingMessage: null
@@ -257,14 +271,14 @@ function useChat(threadId, options = {}) {
       }
       setState((prev) => ({ ...prev, isLoading: true, error: null }));
       try {
-        const fetchedMessages = await client.getMessages({
-          threadId,
-          limit
-        });
+        const agentState = await client.getAgentState(threadId);
+        const fetchedMessages = await client.getMessages({ threadId });
         chunkMessageMerger.current.reset();
         chunkMessageMerger.current.initialMessages(fetchedMessages);
         setState((prev) => ({
           ...prev,
+          agentState,
+          todos: agentState?.values?.todos,
           messages: chunkMessageMerger.current.getMessages(),
           isLoading: false
         }));
@@ -321,6 +335,12 @@ function useChat(threadId, options = {}) {
       streamingMessage: null
     }));
   }, []);
+  const clearError = (0, import_react2.useCallback)(() => {
+    setState((prev) => ({
+      ...prev,
+      error: null
+    }));
+  }, []);
   (0, import_react2.useEffect)(() => {
     if (threadId) {
       loadMessages();
@@ -339,7 +359,8 @@ function useChat(threadId, options = {}) {
     sendMessage,
     stopStreaming,
     loadMessages,
-    clearMessages
+    clearMessages,
+    clearError
   };
 }
 
@@ -1563,22 +1584,204 @@ var IFrameCard = ({ src }) => {
 };
 
 // src/components/Chat/Chating.tsx
-var import_icons5 = require("@ant-design/icons");
+var import_icons6 = require("@ant-design/icons");
 var import_x = require("@ant-design/x");
-var import_antd6 = require("antd");
+var import_antd7 = require("antd");
 var import_ErrorBoundary = __toESM(require("antd/es/alert/ErrorBoundary"));
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_react_i18next = require("react-i18next");
+
+// src/components/FileExplorer.tsx
+var import_react10 = require("react");
+var import_antd6 = require("antd");
+var import_icons5 = require("@ant-design/icons");
+var import_antd_style5 = require("antd-style");
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var useStyles2 = (0, import_antd_style5.createStyles)(({ token, css }) => ({
+  container: css`
+    height: 100%;
+    background: ${token.colorBgContainer};
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadiusLG}px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  `,
+  tabs: css`
+    height: 100%;
+
+    .ant-tabs-nav {
+      margin-bottom: 0 !important;
+      padding: 0 16px;
+      border-bottom: 1px solid ${token.colorBorderSecondary};
+    }
+
+    .ant-tabs-content-holder {
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .ant-tabs-content {
+      height: 100%;
+    }
+
+    .ant-tabs-tabpane {
+      height: 100%;
+      outline: none;
+    }
+  `,
+  contentBody: css`
+    padding: 24px;
+    height: 100%;
+    overflow-y: auto;
+
+    pre {
+      margin: 0 !important;
+      border-radius: ${token.borderRadius}px !important;
+    }
+  `,
+  emptyState: css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: ${token.colorTextQuaternary};
+  `
+}));
+var getFileIcon = (filename) => {
+  const ext = filename.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "ts":
+    case "tsx":
+    case "js":
+    case "jsx":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons5.CodeOutlined, {});
+    case "html":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons5.Html5Outlined, {});
+    case "css":
+    case "less":
+    case "scss":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons5.FileUnknownOutlined, {});
+    // Or a style icon if available
+    case "md":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons5.FileMarkdownOutlined, {});
+    case "json":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons5.FileTextOutlined, {});
+    case "png":
+    case "jpg":
+    case "jpeg":
+    case "gif":
+    case "svg":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons5.FileImageOutlined, {});
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons5.FileOutlined, {});
+  }
+};
+function getLanguageFromFileName(filename) {
+  const ext = filename.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "ts":
+    case "tsx":
+      return "typescript";
+    case "js":
+    case "jsx":
+      return "javascript";
+    case "py":
+      return "python";
+    case "md":
+      return "markdown";
+    case "json":
+      return "json";
+    case "html":
+      return "html";
+    case "css":
+      return "css";
+    case "java":
+      return "java";
+    case "go":
+      return "go";
+    case "rs":
+      return "rust";
+    case "c":
+      return "c";
+    case "cpp":
+      return "cpp";
+    case "yaml":
+    case "yml":
+      return "yaml";
+    case "sql":
+      return "sql";
+    case "sh":
+    case "bash":
+      return "bash";
+    default:
+      return "text";
+  }
+}
+var FileExplorer = ({
+  files = [],
+  className,
+  style,
+  title = "EXPLORER"
+}) => {
+  const { styles, cx } = useStyles2();
+  const [fileList, setFileList] = (0, import_react10.useState)([]);
+  (0, import_react10.useEffect)(() => {
+    if (Array.isArray(files)) {
+      setFileList(files);
+    } else {
+      const list = Object.keys(files).map((key) => ({
+        name: key,
+        content: files[key]
+      }));
+      setFileList(list);
+    }
+  }, [files]);
+  const items = (0, import_react10.useMemo)(() => {
+    return fileList.map((file) => {
+      const language = file.language || getLanguageFromFileName(file.name);
+      const content = `\`\`\`${language}
+${file.content}
+\`\`\``;
+      return {
+        key: file.name,
+        label: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          getFileIcon(file.name),
+          file.name
+        ] }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.contentBody, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MDResponse, { content }) })
+      };
+    });
+  }, [fileList, styles]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cx(styles.container, className), style, children: fileList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_antd6.Tabs,
+    {
+      defaultActiveKey: fileList[0]?.name,
+      items,
+      className: styles.tabs,
+      tabBarStyle: { margin: 0 }
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.emptyState, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_antd6.Empty,
+    {
+      description: "No file selected",
+      image: import_antd6.Empty.PRESENTED_IMAGE_SIMPLE
+    }
+  ) }) });
+};
+
+// src/components/Chat/Chating.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var LazyBubble = ({
   message: message2,
   renderContent,
   autoLoadRightPanel
 }) => {
-  const ref = (0, import_react10.useRef)(null);
-  const [isVisible, setIsVisible] = (0, import_react10.useState)(false);
-  const [wasEverVisible, setWasEverVisible] = (0, import_react10.useState)(false);
-  (0, import_react10.useEffect)(() => {
+  const ref = (0, import_react11.useRef)(null);
+  const [isVisible, setIsVisible] = (0, import_react11.useState)(false);
+  const [wasEverVisible, setWasEverVisible] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         const visible = entry.isIntersecting;
@@ -1598,21 +1801,21 @@ var LazyBubble = ({
       }
     };
   }, [wasEverVisible]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     autoLoadRightPanel?.();
   }, []);
   const getPlaceholder = () => {
     const estimatedHeight = message2.content ? Math.min(100, message2.content.length / 5) : 100;
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_ErrorBoundary.default, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message2) : getPlaceholder() }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ErrorBoundary.default, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message2) : getPlaceholder() }) });
 };
-var MemoizedBubbleList = (0, import_react10.memo)(
+var MemoizedBubbleList = (0, import_react11.memo)(
   ({
     items,
     roles,
     className
-  }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_x.Bubble.List,
     {
       autoScroll: true,
@@ -1632,10 +1835,12 @@ var Chating = ({
   tenant_id,
   messages,
   isLoading,
+  error,
   sendMessage,
   stopStreaming,
   onOpenSidePanel,
   onReminderClick,
+  onClearError,
   styles,
   reminderCount,
   handleMDResponseEvent,
@@ -1643,15 +1848,18 @@ var Chating = ({
   extra,
   attachment_placeholder,
   extraMeta = [],
-  uploadAction = "/api/file_storage/upload?path=temp"
+  uploadAction = "/api/file_storage/upload?path=temp",
+  files,
+  todos
 }) => {
   const { t } = (0, import_react_i18next.useTranslation)();
-  const [content, setContent] = (0, import_react10.useState)("");
-  const [attachedFiles, setAttachedFiles] = (0, import_react10.useState)([]);
-  const [headerOpen, setHeaderOpen] = (0, import_react10.useState)(false);
-  const attachmentsRef = (0, import_react10.useRef)(null);
-  const senderRef = import_react10.default.useRef(null);
-  (0, import_react10.useEffect)(() => {
+  const [content, setContent] = (0, import_react11.useState)("");
+  const [attachedFiles, setAttachedFiles] = (0, import_react11.useState)([]);
+  const [headerOpen, setHeaderOpen] = (0, import_react11.useState)(false);
+  const [fileExplorerVisible, setFileExplorerVisible] = (0, import_react11.useState)(false);
+  const attachmentsRef = (0, import_react11.useRef)(null);
+  const senderRef = import_react11.default.useRef(null);
+  (0, import_react11.useEffect)(() => {
     regsiterElement("action_show_attachments_uploader", {
       card_view: () => null,
       action: (data) => {
@@ -1660,19 +1868,19 @@ var Chating = ({
       }
     });
   }, []);
-  const messageLengthRef = (0, import_react10.useRef)(messages?.length ?? 0);
-  (0, import_react10.useEffect)(() => {
+  const messageLengthRef = (0, import_react11.useRef)(messages?.length ?? 0);
+  (0, import_react11.useEffect)(() => {
     if (messages?.length) {
       messageLengthRef.current = messages?.length;
     }
   }, [messages?.length]);
-  const renderContent = (0, import_react10.useCallback)(
+  const renderContent = (0, import_react11.useCallback)(
     (message2) => {
-      const { content: content2, files, id } = message2;
+      const { content: content2, files: files2, id } = message2;
       try {
         const json = JSON.parse(content2);
         if (json.action && json.message) {
-          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             MDResponse,
             {
               content: json.message,
@@ -1680,7 +1888,7 @@ var Chating = ({
             }
           );
         }
-      } catch (error) {
+      } catch (error2) {
       }
       const tool_calls_md = message2.tool_calls?.map((tool_call) => {
         return `\`\`\`tool_call
@@ -1688,7 +1896,7 @@ ${JSON.stringify(tool_call)}
 \`\`\``;
       }) || [];
       const content_md = [content2, ...tool_calls_md].join("\n");
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd6.Space, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd7.Space, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         MDResponse,
         {
           content: content_md,
@@ -1698,12 +1906,12 @@ ${JSON.stringify(tool_call)}
     },
     [handleMDResponseEvent]
   );
-  const items = (0, import_react10.useMemo)(
+  const items = (0, import_react11.useMemo)(
     () => messages.map((message2, index) => ({
       key: message2.id,
       role: message2.role,
       typing: false,
-      content: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         LazyBubble,
         {
           message: message2,
@@ -1730,8 +1938,8 @@ ${JSON.stringify(tool_call)}
                     element.action(jsonData);
                   }
                 }
-              } catch (error) {
-                console.error(error);
+              } catch (error2) {
+                console.error(error2);
               }
             }
           }
@@ -1753,13 +1961,13 @@ ${JSON.stringify(tool_call)}
   const onSubmit = (nextContent) => {
     if (!nextContent && attachedFiles.length === 0) return;
     if (attachedFiles.filter((f) => f.status !== "done").length > 0) {
-      import_antd6.message.warning("\u6587\u4EF6\u8FD8\u5728\u4E0A\u4F20\u4E2D...");
+      import_antd7.message.warning("\u6587\u4EF6\u8FD8\u5728\u4E0A\u4F20\u4E2D...");
       return;
     }
     if (!nextContent && attachedFiles.length > 0) {
       nextContent = default_submit_message || "\u8BB0\u8D26";
     }
-    const files = attachedFiles.map(
+    const files2 = attachedFiles.map(
       (file) => isArchiveFile(file) ? {
         name: file.response.zipFileName || file.response.rarFileName,
         id: file.response.zipFileId || file.response.rarFileId,
@@ -1777,14 +1985,14 @@ ${JSON.stringify(tool_call)}
         id: file.response.id
       }
     );
-    const files_md = files.length > 0 ? [
+    const files_md = files2.length > 0 ? [
       "",
       "\u6211\u5DF2\u7ECF\u63D0\u4EA4\u4E86\u4EE5\u4E0B\u6587\u4EF6\uFF1A",
       "```attachments",
-      JSON.stringify(files),
+      JSON.stringify(files2),
       "```"
     ].join("\n") : "";
-    sendMessage({ input: { message: nextContent + files_md, files } });
+    sendMessage({ input: { message: nextContent + files_md, files: files2 } });
     setContent("");
     setAttachedFiles([]);
     setHeaderOpen(false);
@@ -1797,7 +2005,7 @@ ${JSON.stringify(tool_call)}
       setHeaderOpen(true);
     }
     if (info.file?.response?.error || info.file.status === "error") {
-      import_antd6.message.error(
+      import_antd7.message.error(
         `${info.file.name} file upload failed.${info.file?.response?.message}`
       );
     }
@@ -1809,22 +2017,22 @@ ${JSON.stringify(tool_call)}
   const beforeUpload = (file) => {
     const isLessThan20MB = file.size / 1024 / 1024 < 20;
     if (!isLessThan20MB) {
-      import_antd6.message.error(
+      import_antd7.message.error(
         `File must be smaller than 20MB! ${file.name} is too large.`
       );
       return false;
     }
     return true;
   };
-  const attachmentsNode = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd6.Badge, { dot: attachedFiles.length > 0 && !headerOpen, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_antd6.Button,
+  const attachmentsNode = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd7.Badge, { dot: attachedFiles.length > 0 && !headerOpen, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_antd7.Button,
     {
       type: "text",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons5.PaperClipOutlined, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.PaperClipOutlined, {}),
       onClick: () => setHeaderOpen(!headerOpen)
     }
   ) });
-  const senderHeader = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const senderHeader = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_x.Sender.Header,
     {
       title: "Attachments",
@@ -1836,7 +2044,7 @@ ${JSON.stringify(tool_call)}
         }
       },
       forceRender: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         import_x.Attachments,
         {
           ref: attachmentsRef,
@@ -1858,7 +2066,7 @@ ${JSON.stringify(tool_call)}
           multiple: true,
           maxCount: 10,
           placeholder: (type) => ({
-            icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons5.CloudUploadOutlined, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.CloudUploadOutlined, {}),
             title: "\u4E0A\u4F20\u6587\u4EF6",
             description: attachment_placeholder
           })
@@ -1890,16 +2098,16 @@ ${JSON.stringify(tool_call)}
       }
     }
   };
-  const extraMetaComponents = (0, import_react10.useMemo)(() => {
+  const extraMetaComponents = (0, import_react11.useMemo)(() => {
     if (extraMeta?.length > 0) {
       return extraMeta.map((meta) => {
         const Element = getElement(meta.id)?.card_view;
         if (Element) {
           let childrenData;
           try {
-          } catch (error) {
+          } catch (error2) {
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             Element,
             {
               component_key: meta.id,
@@ -1915,20 +2123,63 @@ ${JSON.stringify(tool_call)}
     }
     return void 0;
   }, [extraMeta]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         import_x.Welcome,
         {
           style: { padding: 8 },
           variant: "borderless",
           description,
-          icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd6.Avatar, { src: avatar || "/images/avatar.jpeg", size: 48 }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd7.Avatar, { src: avatar || "/images/avatar.jpeg", size: 48 }),
           title: name || "Fina",
-          extra: extra || extraMetaComponents && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd6.Space, { align: "center", style: { marginRight: 16 }, children: extraMetaComponents })
+          extra: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_antd7.Space, { children: [
+            extra,
+            todos && todos.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_antd7.Popover,
+              {
+                content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { width: 400 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  Todo,
+                  {
+                    data: todos,
+                    component_key: "header_todos",
+                    eventHandler: handleMDResponseEvent
+                  }
+                ) }),
+                title: "Todos",
+                trigger: "click",
+                placement: "bottomRight",
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd7.Tooltip, { title: "Todos", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_antd7.Badge,
+                  {
+                    count: todos.filter((item) => item.status !== "completed").length,
+                    size: "small",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd7.Button, { icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.CheckSquareOutlined, {}), type: "text" })
+                  }
+                ) })
+              }
+            ),
+            files && Object.keys(files).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd7.Tooltip, { title: "File Explorer", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_antd7.Badge,
+              {
+                count: Object.keys(files).length,
+                size: "small",
+                color: "blue",
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_antd7.Button,
+                  {
+                    type: "text",
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.FileTextOutlined, {}),
+                    onClick: () => setFileExplorerVisible(true)
+                  }
+                )
+              }
+            ) }),
+            extraMetaComponents && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd7.Space, { align: "center", style: { marginRight: 16 }, children: extraMetaComponents })
+          ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "div",
         {
           style: {
@@ -1937,16 +2188,45 @@ ${JSON.stringify(tool_call)}
         }
       )
     ] }),
-    items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_antd7.Modal,
+      {
+        title: "File Explorer",
+        open: fileExplorerVisible,
+        onCancel: () => setFileExplorerVisible(false),
+        footer: null,
+        width: 1e3,
+        destroyOnClose: true,
+        styles: { body: { height: "70vh", padding: 0 } },
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          FileExplorer,
+          {
+            files,
+            style: { height: "100%", border: "none" }
+          }
+        )
+      }
+    ),
+    items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       MemoizedBubbleList,
       {
         items,
         roles,
         className: styles.messages
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { flex: 1 } }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_x.Bubble, { loading: isLoading, variant: "borderless" }) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_x.Prompts, { items: senderPromptsItems, onItemClick: onPromptsItemClick }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { flex: 1 } }),
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_x.Bubble, { loading: isLoading, variant: "borderless" }) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_x.Prompts, { items: senderPromptsItems, onItemClick: onPromptsItemClick }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { padding: "0 16px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_antd7.Alert,
+      {
+        type: "error",
+        banner: true,
+        closable: true,
+        onClose: () => onClearError?.(),
+        message: `${error.message}`
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_x.Sender,
       {
         allowSpeech: true,
@@ -1961,7 +2241,7 @@ ${JSON.stringify(tool_call)}
         className: styles.sender,
         actions: (ori, { components }) => {
           const { SendButton, LoadingButton } = components;
-          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd6.Flex, { justify: "space-between", align: "center", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoadingButton, { type: "default" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd7.Flex, { justify: "space-between", align: "center", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LoadingButton, { type: "default" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             SendButton,
             {
               type: "primary",
@@ -1970,8 +2250,8 @@ ${JSON.stringify(tool_call)}
             }
           ) });
         },
-        onPasteFile: (_, files) => {
-          Array.from(files).forEach((file) => {
+        onPasteFile: (_, files2) => {
+          Array.from(files2).forEach((file) => {
             attachmentsRef.current?.upload(file);
           });
           setHeaderOpen(true);
@@ -1982,19 +2262,19 @@ ${JSON.stringify(tool_call)}
 };
 
 // src/components/Chat/ThinkingChain.tsx
-var import_icons6 = require("@ant-design/icons");
+var import_icons7 = require("@ant-design/icons");
 var import_x2 = require("@ant-design/x");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function getStatusIcon2(status) {
   switch (status) {
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.CheckCircleOutlined, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.CheckCircleOutlined, {});
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.InfoCircleOutlined, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.InfoCircleOutlined, {});
     case "pending":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.LoadingOutlined, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.LoadingOutlined, {});
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.CheckCircleOutlined, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.CheckCircleOutlined, {});
   }
 }
 var ThinkingChain = ({ message: message2 }) => {
@@ -2003,12 +2283,12 @@ var ThinkingChain = ({ message: message2 }) => {
     {
       key: message2.id,
       title,
-      content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MDResponse, { content: message2.content }),
+      content: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MDResponse, { content: message2.content }),
       status: message2.status,
       icon: getStatusIcon2(message2.status)
     }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_x2.ThoughtChain,
     {
       items,
@@ -2022,20 +2302,20 @@ var ThinkingChainGroup = ({ message: message2 }) => {
   const children = message2.items?.map((item) => ({
     key: item.id,
     title: item.name || item.content.split("\n")[0],
-    content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MDResponse, { content: item.content }),
+    content: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MDResponse, { content: item.content }),
     status: item.status,
     icon: getStatusIcon2(item.status)
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_x2.ThoughtChain, { items: children, collapsible: true, size: "small" });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_x2.ThoughtChain, { items: children, collapsible: true, size: "small" });
 };
 
 // src/components/Chat/SideAppViewBrowser.tsx
-var import_icons7 = require("@ant-design/icons");
-var import_antd7 = require("antd");
-var import_antd_style5 = require("antd-style");
-var import_react11 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var useStyle4 = (0, import_antd_style5.createStyles)(({ token, css }) => {
+var import_icons8 = require("@ant-design/icons");
+var import_antd8 = require("antd");
+var import_antd_style6 = require("antd-style");
+var import_react12 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var useStyle4 = (0, import_antd_style6.createStyles)(({ token, css }) => {
   return {
     tabContainer: css`
       .ant-tabs-content-holder {
@@ -2054,9 +2334,9 @@ var useStyle4 = (0, import_antd_style5.createStyles)(({ token, css }) => {
   };
 });
 var EmptySideAppView = ({ component_key, data }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
   ] });
 };
 var SideAppViewBrowser = ({
@@ -2066,9 +2346,9 @@ var SideAppViewBrowser = ({
   onChangeSize
 }) => {
   const { styles } = useStyle4();
-  const [activeKey, setActiveKey] = (0, import_react11.useState)(JSON.stringify(open_uri));
-  const [currentSize, setCurrentSize] = (0, import_react11.useState)(open_uri.size || "large");
-  const [items, setItems] = (0, import_react11.useState)([]);
+  const [activeKey, setActiveKey] = (0, import_react12.useState)(JSON.stringify(open_uri));
+  const [currentSize, setCurrentSize] = (0, import_react12.useState)(open_uri.size || "large");
+  const [items, setItems] = (0, import_react12.useState)([]);
   const add = (key, label, children) => {
     const newActiveKey = key;
     const newPanes = [...items];
@@ -2104,7 +2384,7 @@ var SideAppViewBrowser = ({
       remove(targetKey);
     }
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const SideAppView = getElement(open_uri.component_key).side_app_view || EmptySideAppView;
     const key = JSON.stringify(open_uri);
     if (items.find((item) => item.key === key)) {
@@ -2114,7 +2394,7 @@ var SideAppViewBrowser = ({
     add(
       key,
       open_uri.message || open_uri.data.message || "\u672A\u547D\u540D",
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         SideAppView,
         {
           component_key: open_uri.component_key,
@@ -2124,7 +2404,7 @@ var SideAppViewBrowser = ({
       )
     );
   }, [open_uri]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (open_uri.size && open_uri.size !== currentSize) {
       setCurrentSize(open_uri.size);
     }
@@ -2162,26 +2442,26 @@ var SideAppViewBrowser = ({
   const getSizeIcon = (size) => {
     switch (size) {
       case "middle":
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.CompressOutlined, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons8.CompressOutlined, {});
       case "large":
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.ExpandOutlined, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons8.ExpandOutlined, {});
       case "full":
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.FullscreenOutlined, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons8.FullscreenOutlined, {});
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.ExpandOutlined, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons8.ExpandOutlined, {});
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_antd7.Tabs,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_antd8.Tabs,
     {
       className: styles.tabContainer,
       type: "editable-card",
       style: { height: "100%" },
       hideAdd: true,
       tabBarExtraContent: {
-        right: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", gap: "4px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            import_antd7.Button,
+        right: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", gap: "4px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_antd8.Button,
             {
               style: { margin: "8px 0" },
               size: "large",
@@ -2191,13 +2471,13 @@ var SideAppViewBrowser = ({
               title: `\u5F53\u524D\u5C3A\u5BF8: ${getSizeLabel(currentSize)}, \u70B9\u51FB\u5207\u6362`
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            import_antd7.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_antd8.Button,
             {
               style: { margin: "8px 0" },
               size: "large",
               type: "text",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.CloseOutlined, {}),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons8.CloseOutlined, {}),
               onClick: () => {
                 onClose();
               }
@@ -2214,8 +2494,8 @@ var SideAppViewBrowser = ({
 };
 
 // src/components/Chat/context.tsx
-var import_react12 = require("react");
-var chatContext = (0, import_react12.createContext)({
+var import_react13 = require("react");
+var chatContext = (0, import_react13.createContext)({
   eventHandler: (component_key, data, message2) => {
   }
 });
@@ -2223,6 +2503,7 @@ var chatContext = (0, import_react12.createContext)({
 0 && (module.exports = {
   AxiomLatticeProvider,
   Chating,
+  FileExplorer,
   MDMermaid,
   MDResponse,
   MDViewFormItem,