@axiom-lattice/react-sdk 1.0.11 → 1.0.13

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,12 +18,31 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
   AxiomLatticeProvider: () => AxiomLatticeProvider,
+  Chating: () => Chating,
+  MDMermaid: () => MDMermaid,
+  MDResponse: () => MDResponse,
+  MDViewFormItem: () => MDViewFormItem,
+  SideAppViewBrowser: () => SideAppViewBrowser,
+  ThinkingChain: () => ThinkingChain,
+  ThinkingChainGroup: () => ThinkingChainGroup,
+  chatContext: () => chatContext,
+  elements: () => elements,
+  getElement: () => getElement,
+  regsiterElement: () => regsiterElement,
   useAgentGraph: () => useAgentGraph,
   useAgentState: () => useAgentState,
   useAxiomLattice: () => useAxiomLattice,
@@ -74,10 +95,28 @@ function useChat(threadId, options = {}) {
     messages: options.initialMessages || [],
     isLoading: false,
     error: null,
-    streamingMessage: null
+    streamingMessage: null,
+    ...options.enableReturnStateWhenStreamCompleted ? { agentState: null } : {}
   });
   const stopStreamingRef = (0, import_react2.useRef)(null);
   const chunkMessageMerger = (0, import_react2.useRef)((0, import_client_sdk2.createSimpleMessageMerger)());
+  const fetchAndUpdateAgentState = (0, import_react2.useCallback)(
+    async (threadId2) => {
+      if (!options.enableReturnStateWhenStreamCompleted) return;
+      try {
+        const agentState = await client.getAgentState(threadId2);
+        setState(
+          (prev) => ({
+            ...prev,
+            agentState
+          })
+        );
+      } catch (error) {
+        console.warn("Failed to fetch agent state:", error);
+      }
+    },
+    [client, options.enableReturnStateWhenStreamCompleted]
+  );
   (0, import_react2.useEffect)(() => {
     if (options.initialMessages && options.initialMessages.length > 0) {
       chunkMessageMerger.current.initialMessages(options.initialMessages);
@@ -89,7 +128,7 @@ function useChat(threadId, options = {}) {
     setState((prev) => ({
       ...prev,
       messages: updatedMessages,
-      isLoading: false,
+      isLoading: true,
       streamingMessage: null
     }));
   }, []);
@@ -103,7 +142,7 @@ function useChat(threadId, options = {}) {
         stopStreamingRef.current = null;
       }
       const { input, command, streaming = true } = data;
-      const { message, files } = input || {};
+      const { message: message2, files, ...rest } = input || {};
       setState((prev) => ({
         ...prev,
         isLoading: true,
@@ -112,7 +151,7 @@ function useChat(threadId, options = {}) {
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message || command?.resume?.message || "",
+        content: message2 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -132,11 +171,19 @@ function useChat(threadId, options = {}) {
           const stopStreaming2 = client.chat.stream(
             {
               threadId,
-              messages: [userMessage]
-              // Cast to any to avoid type conflicts
+              messages: [userMessage],
+              command,
+              ...rest
             },
             (chunk) => handleStreamEvent(chunk),
-            () => {
+            async () => {
+              setState((prev) => ({
+                ...prev,
+                isLoading: false
+              }));
+              if (options.enableReturnStateWhenStreamCompleted) {
+                await fetchAndUpdateAgentState(threadId);
+              }
               stopStreamingRef.current = null;
             },
             (error) => {
@@ -153,24 +200,14 @@ function useChat(threadId, options = {}) {
         } else {
           const response = await client.chat.send({
             threadId,
-            messages: [userMessage]
-            // Cast to any to avoid type conflicts
-          });
-          chunkMessageMerger.current.push({
-            type: "ai",
-            data: {
-              id: response.message.id || `assistant-${Date.now()}`,
-              content: response.message.content || ""
-            }
+            messages: [userMessage],
+            command,
+            ...rest
           });
+          chunkMessageMerger.current.initialMessages(response.messages);
           setState((prev) => ({
             ...prev,
-            messages: chunkMessageMerger.current.getMessages().map((msg) => ({
-              id: msg.id,
-              role: msg.role === "ai" ? "assistant" : msg.role === "human" ? "user" : msg.role === "system" ? "system" : "tool",
-              content: typeof msg.content === "string" ? msg.content : JSON.stringify(msg.content || ""),
-              createdAt: (/* @__PURE__ */ new Date()).toISOString()
-            })),
+            messages: chunkMessageMerger.current.getMessages(),
             isLoading: false
           }));
         }
@@ -182,7 +219,14 @@ function useChat(threadId, options = {}) {
         }));
       }
     },
-    [client, threadId, options.streaming, handleStreamEvent]
+    [
+      client,
+      threadId,
+      options.streaming,
+      options.enableReturnStateWhenStreamCompleted,
+      handleStreamEvent,
+      fetchAndUpdateAgentState
+    ]
   );
   const stopStreaming = (0, import_react2.useCallback)(() => {
     if (stopStreamingRef.current) {
@@ -207,6 +251,10 @@ function useChat(threadId, options = {}) {
       if (!threadId) {
         return;
       }
+      if (stopStreamingRef.current) {
+        stopStreamingRef.current();
+        stopStreamingRef.current = null;
+      }
       setState((prev) => ({ ...prev, isLoading: true, error: null }));
       try {
         const fetchedMessages = await client.getMessages({
@@ -220,6 +268,35 @@ function useChat(threadId, options = {}) {
           messages: chunkMessageMerger.current.getMessages(),
           isLoading: false
         }));
+        if (options.enableResumeStream && fetchedMessages.length > 0) {
+          const lastMessage = fetchedMessages[fetchedMessages.length - 1];
+          const lastContent = typeof lastMessage.content === "string" ? lastMessage.content : JSON.stringify(lastMessage.content || "");
+          const stopResumeStream = client.resumeStream(
+            {
+              threadId,
+              messageId: lastMessage.id,
+              knownContent: lastContent,
+              pollInterval: options.resumeStreamPollInterval || 100
+            },
+            handleStreamEvent,
+            () => {
+              setState((prev) => ({
+                ...prev,
+                isLoading: false
+              }));
+              stopStreamingRef.current = null;
+            },
+            (error) => {
+              console.error("Resume stream error:", error);
+              setState((prev) => ({
+                ...prev,
+                error
+              }));
+              stopStreamingRef.current = null;
+            }
+          );
+          stopStreamingRef.current = stopResumeStream;
+        }
       } catch (error) {
         setState((prev) => ({
           ...prev,
@@ -228,7 +305,13 @@ function useChat(threadId, options = {}) {
         }));
       }
     },
-    [client, threadId]
+    [
+      client,
+      threadId,
+      options.enableResumeStream,
+      options.resumeStreamPollInterval,
+      handleStreamEvent
+    ]
   );
   const clearMessages = (0, import_react2.useCallback)(() => {
     chunkMessageMerger.current.reset();
@@ -497,9 +580,1658 @@ function useAgentGraph() {
 
 // src/index.ts
 __reExport(index_exports, require("@axiom-lattice/protocols"), module.exports);
+
+// src/components/GenUI/MDResponse.tsx
+var import_react_markdown = __toESM(require("react-markdown"));
+var import_react_syntax_highlighter = require("react-syntax-highlighter");
+var import_prism = require("react-syntax-highlighter/dist/cjs/styles/prism");
+var import_remark_gfm = __toESM(require("remark-gfm"));
+var import_react9 = require("react");
+var import_antd_style4 = require("antd-style");
+var import_rehype_raw = __toESM(require("rehype-raw"));
+
+// src/components/GenUI/elements/confirm_feedback.tsx
+var import_antd = require("antd");
+var import_react6 = require("react");
+var import_antd_style = require("antd-style");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var { Text } = import_antd.Typography;
+var useStyle = (0, import_antd_style.createStyles)(({ token, css }) => ({
+  card: css`
+    max-width: 1200px;
+    background: linear-gradient(
+      919deg,
+      rgb(232 67 157 / 8%),
+      rgb(250 235 206 / 28%) 43%
+    );
+  `
+}));
+var ConfirmFeedback = ({
+  data,
+  eventHandler,
+  interactive = true
+}) => {
+  const { message: message2, type, config, feedback, options } = data ?? {};
+  const [clicked, setClicked] = (0, import_react6.useState)(false);
+  const { styles } = useStyle();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd.Card, { size: "small", className: `shadow-sm ${styles.card}`, bordered: false, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_antd.Space, { direction: "vertical", style: { width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_antd.Tag,
+      {
+        bordered: false,
+        color: "orange",
+        style: {
+          fontSize: 14,
+          fontWeight: "bold",
+          background: "#ffffff8f",
+          padding: 4,
+          borderRadius: 8
+        },
+        children: "\u8BF7\u6C42\u786E\u8BA4"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MDResponse, { content: message2 }),
+    options ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd.Space, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_antd.Button,
+      {
+        title: option.description,
+        disabled: !interactive || clicked || feedback,
+        style: {
+          border: feedback?.data?.action === option.value ? "2px dashed rgb(74 73 77)" : "none"
+        },
+        onClick: () => {
+          setClicked(true);
+          eventHandler(
+            "confirm_feedback",
+            { action: option.value, config },
+            option.label
+          );
+        },
+        children: option.label
+      },
+      option.value
+    )) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_antd.Space, { style: { justifyContent: "flex-end", width: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_antd.Button,
+        {
+          disabled: !interactive || clicked || feedback,
+          style: {
+            border: feedback?.data?.action === "yes" ? "2px dashed rgb(74 73 77)" : "none"
+          },
+          type: "primary",
+          onClick: () => {
+            setClicked(true);
+            eventHandler(
+              "confirm_feedback",
+              {
+                action: "yes",
+                config
+              },
+              "\u786E\u8BA4"
+            );
+          },
+          children: "\u786E\u8BA4"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_antd.Button,
+        {
+          disabled: !interactive || clicked || feedback,
+          type: "default",
+          style: {
+            border: feedback?.data?.action === "no" ? "2px dashed rgb(74 73 77)" : "none"
+          },
+          onClick: () => {
+            setClicked(true);
+            eventHandler(
+              "confirm_feedback",
+              {
+                action: "no",
+                config
+              },
+              "\u62D2\u7EDD"
+            );
+          },
+          children: "\u62D2\u7EDD"
+        }
+      )
+    ] })
+  ] }) });
+};
+
+// src/components/GenUI/elements/generic_data_table.tsx
+var import_antd2 = require("antd");
+var import_react7 = require("react");
+var import_icons = require("@ant-design/icons");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var { Text: Text2 } = import_antd2.Typography;
+var GenericDataTable = ({
+  data,
+  eventHandler,
+  interactive = true,
+  default_open_in_side_app = true
+}) => {
+  const { dataSource, message: message2 } = data ?? {};
+  const [expandedRowKeys, setExpandedRowKeys] = (0, import_react7.useState)([]);
+  const processedData = dataSource?.map((item, index) => ({
+    ...item,
+    key: `${index}_${JSON.stringify(item).slice(0, 20)}`
+  })) || [];
+  const generateColumns = (dataItem) => {
+    if (!dataItem || typeof dataItem !== "object") {
+      return [];
+    }
+    return Object.keys(dataItem).filter((key) => key !== "key" && key !== "expandItem").map((key) => ({
+      title: formatColumnTitle(key),
+      dataIndex: key,
+      key,
+      width: 150,
+      sorter: (a, b) => {
+        const aVal = a[key];
+        const bVal = b[key];
+        if (aVal === null || aVal === void 0) return 1;
+        if (bVal === null || bVal === void 0) return -1;
+        if (typeof aVal === "number" && typeof bVal === "number") {
+          return aVal - bVal;
+        }
+        const aDate = new Date(aVal);
+        const bDate = new Date(bVal);
+        if (!isNaN(aDate.getTime()) && !isNaN(bDate.getTime())) {
+          return aDate.getTime() - bDate.getTime();
+        }
+        return String(aVal).localeCompare(String(bVal), "zh-CN");
+      },
+      render: (value) => {
+        if (value === null || value === void 0) {
+          return "-";
+        }
+        if (typeof value === "object") {
+          return JSON.stringify(value);
+        }
+        return String(value);
+      }
+    }));
+  };
+  const formatColumnTitle = (key) => {
+    return key.replace(/([A-Z])/g, " $1").replace(/_/g, " ").replace(/^./, (str) => str.toUpperCase()).trim();
+  };
+  const columns = processedData.length > 0 ? generateColumns(processedData[0]) : [];
+  const expandedRowRender = (record) => {
+    const expandItem = record.expandItem;
+    if (!expandItem) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { padding: "16px" }, children: [
+      expandItem.content && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "16px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text2, { strong: true, style: { display: "block", marginBottom: "8px" }, children: "\u8BE6\u7EC6\u4FE1\u606F:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MDResponse, { content: expandItem.content })
+      ] }),
+      expandItem.dataSource && expandItem.dataSource.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text2, { strong: true, style: { display: "block", marginBottom: "8px" }, children: "\u5B50\u8868\u6570\u636E:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          GenericDataTable,
+          {
+            component_key: `nested_${record.key}`,
+            data: {
+              dataSource: expandItem.dataSource,
+              message: void 0
+            },
+            eventHandler,
+            interactive
+          }
+        )
+      ] })
+    ] });
+  };
+  const exportToExcel = () => {
+    if (!processedData || processedData.length === 0) return;
+    console.warn("Export to Excel not implemented in SDK yet (requires xlsx dependency)");
+  };
+  const hasExpandableRows = processedData.some((item) => item.expandItem);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_antd2.Table,
+    {
+      size: "small",
+      title: () => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_antd2.Flex, { justify: "space-between", align: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd2.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text2, { strong: true, style: { fontSize: 16 }, children: message2 || "" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_antd2.Space, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_antd2.Button,
+            {
+              type: "text",
+              size: "small",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.DownloadOutlined, {}),
+              onClick: exportToExcel,
+              disabled: !processedData || processedData.length === 0,
+              children: "\u5BFC\u51FAExcel"
+            }
+          ),
+          eventHandler && default_open_in_side_app && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            import_antd2.Button,
+            {
+              type: "link",
+              size: "small",
+              onClick: () => {
+                eventHandler(
+                  "__open_side_app",
+                  {
+                    component_key: "generic_data_table",
+                    message: message2 || "",
+                    data: { dataSource, message: message2 },
+                    size: "large"
+                  },
+                  ""
+                );
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.ExpandAltOutlined, {}),
+                "\u5C55\u5F00"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      dataSource: processedData,
+      columns,
+      pagination: {
+        pageSize: 10,
+        showSizeChanger: true,
+        showQuickJumper: true,
+        showTotal: (total, range) => `\u7B2C ${range[0]}-${range[1]} \u6761/\u5171 ${total} \u6761`
+      },
+      scroll: { x: "max-content" },
+      expandable: hasExpandableRows ? {
+        expandedRowRender,
+        expandedRowKeys,
+        onExpandedRowsChange: (keys) => setExpandedRowKeys(keys),
+        rowExpandable: (record) => !!record.expandItem
+      } : void 0,
+      rowKey: "key",
+      bordered: true
+    }
+  );
+};
+
+// src/components/GenUI/elements/generic_data_table_side_app.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var GenericDataTableSideApp = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GenericDataTable, { ...props, default_open_in_side_app: false });
+};
+
+// src/components/GenUI/elements/ToolCall.tsx
+var import_antd4 = require("antd");
+var import_CollapsePanel = __toESM(require("antd/es/collapse/CollapsePanel"));
+var import_icons3 = require("@ant-design/icons");
+
+// src/components/GenUI/elements/ToolCard.tsx
+var import_antd3 = require("antd");
+var import_antd_style2 = require("antd-style");
+var import_icons2 = require("@ant-design/icons");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var { Text: Text3, Title } = import_antd3.Typography;
+var useStyle2 = (0, import_antd_style2.createStyles)(({ token, css }) => ({
+  card: css`
+    max-width: 500px;
+    background: linear-gradient(
+      135deg,
+      rgba(24, 144, 255, 0.05) 0%,
+      rgba(135, 208, 104, 0.05) 100%
+    );
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    &:hover {
+      border-color: ${token.colorPrimary};
+      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
+      transform: translateY(-2px);
+    }
+  `,
+  header: css`
+    border-bottom: 1px solid ${token.colorBorderSecondary};
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+  `,
+  toolName: css`
+    color: ${token.colorPrimary};
+    font-weight: 600;
+    font-size: 16px;
+  `,
+  parameterGrid: css`
+    display: grid;
+    gap: 8px;
+    margin-top: 8px;
+  `,
+  parameterItem: css`
+    background: ${token.colorBgContainer};
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: 6px;
+    padding: 8px 12px;
+    transition: background-color 0.2s ease;
+    &:hover {
+      background: ${token.colorBgTextHover};
+    }
+  `,
+  parameterName: css`
+    color: ${token.colorTextSecondary};
+    font-size: 12px;
+    font-weight: 500;
+    margin-bottom: 4px;
+  `,
+  parameterValue: css`
+    color: ${token.colorText};
+    font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;
+    font-size: 13px;
+    word-break: break-all;
+    line-height: 1.4;
+  `,
+  typeTag: css`
+    font-size: 10px;
+    border-radius: 4px;
+    margin-left: 8px;
+  `
+}));
+var ToolCard = ({
+  data,
+  component_key,
+  eventHandler,
+  interactive = true
+}) => {
+  const { styles } = useStyle2();
+  if (!data || !data.name) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_antd3.Card, { size: "small", className: styles.card, bordered: false, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text3, { type: "secondary", children: "Invalid tool data" }) });
+  }
+  const formatToolName = (name) => {
+    return name.replace(/([a-z])([A-Z])/g, "$1 $2").split(/[_-]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+  };
+  const formatParameterValue = (value) => {
+    if (value === null || value === void 0) {
+      return "null";
+    }
+    if (typeof value === "object") {
+      try {
+        const jsonStr = JSON.stringify(value, null, 2);
+        return jsonStr.length > 100 ? JSON.stringify(value) : jsonStr;
+      } catch {
+        return String(value);
+      }
+    }
+    if (typeof value === "string" && value.length > 150) {
+      return value.substring(0, 150) + "...";
+    }
+    return String(value);
+  };
+  const getTypeColor = (value) => {
+    const type = typeof value;
+    switch (type) {
+      case "string":
+        return "blue";
+      case "number":
+        return "green";
+      case "boolean":
+        return "orange";
+      case "object":
+        return value === null ? "default" : "purple";
+      default:
+        return "default";
+    }
+  };
+  const getTypeLabel = (value) => {
+    if (value === null) return "null";
+    if (Array.isArray(value)) return "array";
+    return typeof value;
+  };
+  const hasParameters = data.parameters && Object.keys(data.parameters).length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_antd3.Card,
+    {
+      size: "small",
+      className: styles.card,
+      bordered: false,
+      bodyStyle: { padding: "16px" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles.header, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_antd3.Space, { align: "center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons2.ToolOutlined, { style: { color: "#1890ff", fontSize: "18px" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Title, { level: 5, className: styles.toolName, style: { margin: 0 }, children: formatToolName(data.name) }),
+            data.type && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_antd3.Tag, { color: "blue", className: styles.typeTag, children: data.type })
+          ] }),
+          data.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Text3,
+            {
+              type: "secondary",
+              style: { fontSize: "13px", marginTop: "4px", display: "block" },
+              children: data.description
+            }
+          )
+        ] }),
+        hasParameters ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_antd3.Space, { align: "center", style: { marginBottom: "12px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons2.CodeOutlined, { style: { color: "#52c41a", fontSize: "14px" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Text3, { strong: true, style: { fontSize: "14px" }, children: [
+              "Parameters (",
+              Object.keys(data.parameters).length,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: styles.parameterGrid, children: Object.entries(data.parameters).map(([key, value], index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles.parameterItem, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: styles.parameterName, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_antd3.Space, { align: "center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: key }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_antd3.Tag,
+                {
+                  color: getTypeColor(value),
+                  style: { fontSize: "10px", marginLeft: "auto" },
+                  children: getTypeLabel(value)
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: styles.parameterValue, children: formatParameterValue(value) })
+          ] }, index)) })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_antd3.Space, { align: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons2.CodeOutlined, { style: { color: "#d9d9d9", fontSize: "14px" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text3, { type: "secondary", style: { fontSize: "13px" }, children: "No parameters" })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/GenUI/elements/ToolCall.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function getStatusIcon(status) {
+  switch (status) {
+    case "success":
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons3.CheckCircleOutlined, { style: { color: "#52c41a" } });
+    case "error":
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons3.InfoCircleOutlined, { style: { color: "#ff4d4f" } });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons3.LoadingOutlined, { style: { color: "#1890ff" } });
+  }
+}
+var ToolCall = ({ data }) => {
+  const toolCallData = data;
+  const formatToolName = (name) => {
+    return name.replace(/([a-z])([A-Z])/g, "$1 $2").split(/[_-]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+  };
+  const formatArgsPreview = (args) => {
+    try {
+      const argsStr = Object.values(args).map((value) => {
+        const valueStr = typeof value === "object" ? JSON.stringify(value).substring(0, 50) + (JSON.stringify(value).length > 50 ? "..." : "") : String(value).substring(0, 50) + (String(value).length > 50 ? "..." : "");
+        return valueStr;
+      }).join(" ");
+      const result = argsStr.length > 100 ? argsStr.substring(0, 100) + "..." : argsStr;
+      return result.replaceAll("\n", " ");
+    } catch (e) {
+      return "Error parsing args";
+    }
+  };
+  const header = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_antd4.Flex, { align: "center", wrap: "wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_antd4.Typography.Text, { strong: true, children: formatToolName(toolCallData.name) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_antd4.Typography.Text,
+      {
+        type: "secondary",
+        style: { fontSize: "12px", marginLeft: "8px" },
+        children: formatArgsPreview(toolCallData.args)
+      }
+    )
+  ] });
+  const toolCardData = {
+    name: toolCallData.name,
+    parameters: toolCallData.args,
+    type: "tool_call"
+  };
+  const content = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { marginTop: "8px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ToolCard,
+      {
+        data: toolCardData,
+        component_key: `${toolCallData.id}-params`,
+        eventHandler: () => {
+        },
+        interactive: false
+      }
+    ),
+    toolCallData.response && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { marginTop: "12px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_antd4.Typography.Text,
+        {
+          strong: true,
+          style: { fontSize: "12px", marginBottom: "8px", display: "block" },
+          children: "Response:"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MDResponse, { content: toolCallData.response })
+    ] })
+  ] });
+  const expandIcon = ({ isActive }) => {
+    return getStatusIcon(toolCallData.status);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_antd4.Collapse,
+    {
+      size: "small",
+      bordered: false,
+      defaultActiveKey: [],
+      expandIcon,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_CollapsePanel.default,
+        {
+          header,
+          style: { minWidth: 400 },
+          children: content
+        },
+        toolCallData.id
+      )
+    }
+  );
+};
+
+// src/components/GenUI/elements/Todo.tsx
+var import_antd5 = require("antd");
+var import_antd_style3 = require("antd-style");
+var import_icons4 = require("@ant-design/icons");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var { Text: Text4 } = import_antd5.Typography;
+var useStyle3 = (0, import_antd_style3.createStyles)(({ token, css }) => ({
+  card: css`
+    max-width: 1200px;
+    background: linear-gradient(
+      919deg,
+      rgb(67 232 157 / 8%),
+      rgb(206 250 235 / 28%) 43%
+    );
+  `,
+  todoItem: css`
+    padding: 8px 0;
+    border-bottom: 1px solid ${token.colorBorderSecondary};
+    &:last-child {
+      border-bottom: none;
+    }
+  `,
+  completed: css`
+    opacity: 0.7;
+  `,
+  inProgress: css`
+    font-weight: 500;
+  `,
+  pending: css`
+    opacity: 0.8;
+  `
+}));
+var Todo = ({
+  data,
+  component_key,
+  eventHandler,
+  interactive = true
+}) => {
+  const { styles } = useStyle3();
+  const getStatusIcon3 = (status) => {
+    switch (status) {
+      case "completed":
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons4.CheckCircleOutlined, { style: { color: "#52c41a" } });
+      case "in_progress":
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons4.LoadingOutlined, { style: { color: "#1890ff" } });
+      case "pending":
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons4.ClockCircleOutlined, { style: { color: "gray" } });
+      default:
+        return null;
+    }
+  };
+  const getStatusColor = (status) => {
+    switch (status) {
+      case "completed":
+        return "success";
+      case "in_progress":
+        return "processing";
+      case "pending":
+        return "warning";
+      default:
+        return "default";
+    }
+  };
+  const getStatusText = (status) => {
+    switch (status) {
+      case "completed":
+        return "Completed";
+      case "in_progress":
+        return "In Progress";
+      case "pending":
+        return "Pending";
+      default:
+        return status;
+    }
+  };
+  const getItemClassName = (status) => {
+    switch (status) {
+      case "completed":
+        return styles.completed;
+      case "in_progress":
+        return styles.inProgress;
+      case "pending":
+        return styles.pending;
+      default:
+        return "";
+    }
+  };
+  if (!data || !Array.isArray(data)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_antd5.Card,
+      {
+        size: "small",
+        className: `shadow-sm ${styles.card}`,
+        bordered: false,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text4, { type: "secondary", children: "No todo items available" })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_antd5.Card, { size: "small", className: `shadow-sm ${styles.card}`, bordered: false, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_antd5.Space, { direction: "vertical", style: { width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_antd5.List,
+      {
+        size: "small",
+        dataSource: data,
+        renderItem: (item, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_antd5.List.Item,
+          {
+            className: `${styles.todoItem} ${getItemClassName(item.status)}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_antd5.Space, { align: "center", style: { width: "100%" }, children: [
+              getStatusIcon3(item.status),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text4, { style: { flex: 1 }, children: item.content })
+            ] })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text4, { type: "secondary", style: { fontSize: 12 }, children: [
+      "Total items: ",
+      data.length,
+      " | Completed:",
+      " ",
+      data.filter((item) => item.status === "completed").length,
+      " | In Progress:",
+      " ",
+      data.filter((item) => item.status === "in_progress").length,
+      " | Pending: ",
+      data.filter((item) => item.status === "pending").length
+    ] })
+  ] }) });
+};
+
+// src/components/GenUI/elements/index.tsx
+var elements = {
+  action_show_attachments_uploader: {
+    card_view: () => null,
+    action: (data) => {
+      console.log(data);
+    }
+  },
+  generic_data_table: {
+    card_view: GenericDataTable,
+    side_app_view: GenericDataTableSideApp
+  },
+  confirm: {
+    card_view: ConfirmFeedback
+  },
+  tool_call: {
+    card_view: ToolCall
+  },
+  tool_card: {
+    card_view: ToolCard
+  },
+  todo_list: {
+    card_view: Todo
+  }
+};
+var getElement = (language) => {
+  if (language && elements[language]) {
+    return elements[language];
+  }
+  return null;
+};
+var regsiterElement = (language, ElementMeta) => {
+  console.log("regsiterElement", language, ElementMeta);
+  elements[language] = ElementMeta;
+  return ElementMeta;
+};
+
+// src/components/GenUI/MDMermaid.tsx
+var import_mermaid = __toESM(require("mermaid"));
+var import_react8 = require("react");
+var import_uuid = require("uuid");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var MDMermaid = ({ children = [] }) => {
+  const domId = (0, import_react8.useRef)(`dom${(0, import_uuid.v4)()}`);
+  const code = String(children);
+  const target = (0, import_react8.useRef)(null);
+  const targetInternal = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    if (target.current && code) {
+      import_mermaid.default.initialize({
+        startOnLoad: true,
+        theme: "default",
+        securityLevel: "loose",
+        themeCSS: `
+          g.classGroup rect {
+            fill: #282a36;
+            stroke: #6272a4;
+          } 
+          g.classGroup text {
+            fill: #f8f8f2;
+          }
+          g.classGroup line {
+            stroke: #f8f8f2;
+            stroke-width: 0.5;
+          }
+          .classLabel .box {
+            stroke: #21222c;
+            stroke-width: 3;
+            fill: #21222c;
+            opacity: 1;
+          }
+          .classLabel .label {
+            fill: #f1fa8c;
+          }
+          .relation {
+            stroke: #ff79c6;
+            stroke-width: 1;
+          }
+          #compositionStart, #compositionEnd {
+            fill: #bd93f9;
+            stroke: #bd93f9;
+            stroke-width: 1;
+          }
+          #aggregationEnd, #aggregationStart {
+            fill: #21222c;
+            stroke: #50fa7b;
+            stroke-width: 1;
+          }
+          #dependencyStart, #dependencyEnd {
+            fill: #00bcd4;
+            stroke: #00bcd4;
+            stroke-width: 1;
+          } 
+          #extensionStart, #extensionEnd {
+            fill: #f8f8f2;
+            stroke: #f8f8f2;
+            stroke-width: 1;
+          }
+          `,
+        fontFamily: "Fira Code",
+        sequence: { showSequenceNumbers: true }
+      });
+      import_mermaid.default.render(domId.current, code, target.current).then((result) => {
+        target.current.innerHTML = result.svg;
+      }).catch((error) => {
+        console.log(error);
+      });
+    }
+  }, [code]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { minWidth: 750 }, ref: target, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { id: domId.current, style: { display: "none" } }) });
+};
+
+// src/components/GenUI/MDResponse.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SyntaxHighlighter = import_react_syntax_highlighter.Prism;
+var useStyles = (0, import_antd_style4.createStyles)(({ token, css }) => ({
+  markdownTableContainer: css`
+    overflow-x: auto;
+    width: 100%;
+  `,
+  markdownTable: css`
+    width: 100%;
+    border-collapse: collapse;
+    margin: 16px 0;
+    border-radius: ${token.borderRadius}px;
+    overflow: hidden;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    white-space: nowrap;
+  `,
+  markdownTh: css`
+    background: ${token.colorFillAlter};
+    padding: 12px 16px;
+    text-align: left;
+    font-weight: 600;
+    border-bottom: 1px solid ${token.colorBorder};
+    color: ${token.colorTextHeading};
+    font-size: ${token.fontSize}px;
+  `,
+  markdownTd: css`
+    padding: 12px 16px;
+    border-bottom: 1px solid ${token.colorBorder};
+    color: ${token.colorText};
+    font-size: ${token.fontSize}px;
+
+    &:last-child {
+      border-right: none;
+    }
+  `,
+  markdownTr: css`
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+
+    &:last-child td {
+      border-bottom: none;
+    }
+  `,
+  markdownContainer: css`
+    white-space: normal;
+
+    /* 为整个markdown内容添加基础样式 */
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: ${token.colorTextHeading};
+      margin-top: 24px;
+      margin-bottom: 16px;
+    }
+
+    p {
+      color: ${token.colorText};
+      line-height: 1.6;
+      margin-bottom: 16px;
+    }
+
+    blockquote {
+      border-left: 4px solid ${token.colorPrimary};
+      background: ${token.colorFillAlter};
+      padding: 16px;
+      margin: 16px 0;
+      border-radius: 0 ${token.borderRadius}px ${token.borderRadius}px 0;
+    }
+
+    code:not(pre code) {
+      background: ${token.colorFillAlter};
+      padding: 2px 6px;
+      border-radius: ${token.borderRadius}px;
+      font-family: ${token.fontFamilyCode};
+      color: ${token.colorError};
+    }
+  `
+}));
+var MDResponse = ({
+  content = "",
+  context,
+  embeddedLink,
+  interactive,
+  userData,
+  noGenUI,
+  eventHandler
+}) => {
+  const { styles } = useStyles();
+  const config = (0, import_react9.useMemo)(
+    () => ({
+      components: {
+        a({ node, ...props }) {
+          if (embeddedLink) {
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IFrameCard, { src: props.href });
+          } else return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { ...props });
+        },
+        table({ node, ...props }) {
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: styles.markdownTableContainer, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("table", { className: styles.markdownTable, ...props }) });
+        },
+        th({ node, ...props }) {
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("th", { className: styles.markdownTh, ...props });
+        },
+        td({ node, ...props }) {
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: styles.markdownTd, ...props });
+        },
+        tr({ node, ...props }) {
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tr", { className: styles.markdownTr, ...props });
+        },
+        code({ children, className, node, ...rest }) {
+          const match = /language-(\w+)/.exec(className || "");
+          const language = match?.[1];
+          if (language) {
+            const Element = getElement(language)?.card_view;
+            if (Element) {
+              let childrenData;
+              try {
+                childrenData = JSON.parse(children);
+              } catch (error) {
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                Element,
+                {
+                  interactive,
+                  component_key: language,
+                  data: childrenData,
+                  eventHandler: (e, data, message2, agent) => {
+                    eventHandler?.(e, data, message2, agent);
+                  }
+                }
+              );
+            }
+            switch (language) {
+              case "mermaid":
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MDMermaid, { children });
+              default:
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  SyntaxHighlighter,
+                  {
+                    ...rest,
+                    PreTag: "div",
+                    language,
+                    style: import_prism.dark,
+                    children: String(children).replace(/\n$/, "")
+                  }
+                );
+            }
+          } else {
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { ...rest, className, children });
+          }
+        }
+      },
+      remarkPlugins: [import_remark_gfm.default],
+      rehypePlugins: [import_rehype_raw.default]
+    }),
+    [userData, interactive, embeddedLink, styles]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: styles.markdownContainer, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_markdown.default, { ...config, children: content }) });
+};
+var MDViewFormItem = ({ value }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MDResponse, { content: value || "" });
+};
+var IFrameCard = ({ src }) => {
+  const containerRef = (0, import_react9.useRef)(null);
+  const [width, setWidth] = (0, import_react9.useState)("640px");
+  const [height, setHeight] = (0, import_react9.useState)("320px");
+  const valid_images = [
+    "jpg",
+    "jpeg",
+    "png",
+    "gif",
+    "bmp",
+    "svg",
+    "tif",
+    "tiff",
+    "webp"
+  ];
+  if (!src) {
+    return null;
+  }
+  const spitedSrc = src.split(".");
+  if (valid_images.includes(spitedSrc[spitedSrc.length - 1].toLowerCase())) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src, style: { width: "100%" } }) });
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { href: src, target: "_black", children: src }) });
+  }
+};
+
+// src/components/Chat/Chating.tsx
+var import_icons5 = require("@ant-design/icons");
+var import_x = require("@ant-design/x");
+var import_antd6 = require("antd");
+var import_ErrorBoundary = __toESM(require("antd/es/alert/ErrorBoundary"));
+var import_react10 = __toESM(require("react"));
+var import_react_i18next = require("react-i18next");
+var import_jsx_runtime10 = 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 observer = new IntersectionObserver(
+      ([entry]) => {
+        const visible = entry.isIntersecting;
+        setIsVisible(visible);
+        if (visible && !wasEverVisible) {
+          setWasEverVisible(true);
+        }
+      },
+      { threshold: 0.1 }
+    );
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [wasEverVisible]);
+  (0, import_react10.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_runtime10.jsx)(import_ErrorBoundary.default, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message2) : getPlaceholder() }) });
+};
+var MemoizedBubbleList = (0, import_react10.memo)(
+  ({
+    items,
+    roles,
+    className
+  }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_x.Bubble.List,
+    {
+      autoScroll: true,
+      items,
+      roles,
+      className
+    },
+    "messages"
+  )
+);
+MemoizedBubbleList.displayName = "MemoizedBubbleList";
+var Chating = ({
+  avatar,
+  name,
+  description,
+  default_submit_message,
+  tenant_id,
+  messages,
+  isLoading,
+  sendMessage,
+  stopStreaming,
+  onOpenSidePanel,
+  onReminderClick,
+  styles,
+  reminderCount,
+  handleMDResponseEvent,
+  senderPromptsItems,
+  extra,
+  attachment_placeholder,
+  extraMeta = []
+}) => {
+  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)(() => {
+    regsiterElement("action_show_attachments_uploader", {
+      card_view: () => null,
+      action: (data) => {
+        console.log(data);
+        setHeaderOpen(true);
+      }
+    });
+  }, []);
+  const messageLengthRef = (0, import_react10.useRef)(messages?.length ?? 0);
+  (0, import_react10.useEffect)(() => {
+    if (messages?.length) {
+      messageLengthRef.current = messages?.length;
+    }
+  }, [messages?.length]);
+  const renderContent = (0, import_react10.useCallback)(
+    (message2) => {
+      const { content: content2, files, id } = message2;
+      try {
+        const json = JSON.parse(content2);
+        if (json.action && json.message) {
+          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            MDResponse,
+            {
+              content: json.message,
+              eventHandler: handleMDResponseEvent
+            }
+          );
+        }
+      } catch (error) {
+      }
+      const tool_calls_md = message2.tool_calls?.map((tool_call) => {
+        return `\`\`\`tool_call
+${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)(
+        MDResponse,
+        {
+          content: content_md,
+          eventHandler: handleMDResponseEvent
+        }
+      ) });
+    },
+    [handleMDResponseEvent]
+  );
+  const items = (0, import_react10.useMemo)(
+    () => messages.map((message2, index) => ({
+      key: message2.id,
+      role: message2.role,
+      typing: false,
+      content: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        LazyBubble,
+        {
+          message: message2,
+          renderContent,
+          autoLoadRightPanel: () => {
+            const { content: content2, role } = message2;
+            const isNewAddedMessage = messageLengthRef.current > 1 && messageLengthRef.current + 1 === messages.length;
+            if (index === messages.length - 1 && isNewAddedMessage && role === "ai") {
+              try {
+                const match = content2?.match(
+                  /```([\w_]*)\n({.*?}|[^`]*)\n```/m
+                );
+                const type = match?.[1];
+                const data = match?.[2];
+                const jsonData = data ? JSON.parse(data) : {};
+                if (type) {
+                  const element = getElement(type);
+                  if (element?.side_app_view) {
+                    onOpenSidePanel({
+                      component_key: type,
+                      data: jsonData
+                    });
+                  } else if (element?.action) {
+                    element.action(jsonData);
+                  }
+                }
+              } catch (error) {
+                console.error(error);
+              }
+            }
+          }
+        }
+      )
+    })),
+    [messages, renderContent, onOpenSidePanel]
+  );
+  const isArchiveFile = (file) => {
+    const zipMimeTypes = ["application/zip"];
+    const rarMimeTypes = [
+      "application/vnd.rar",
+      "application/x-rar-compressed",
+      "application/rar"
+    ];
+    const archiveMimeTypes = [...zipMimeTypes, ...rarMimeTypes];
+    return archiveMimeTypes.includes(file.type) || file.name.toLowerCase().endsWith(".zip") || file.name.toLowerCase().endsWith(".rar");
+  };
+  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...");
+      return;
+    }
+    if (!nextContent && attachedFiles.length > 0) {
+      nextContent = default_submit_message || "\u8BB0\u8D26";
+    }
+    const files = attachedFiles.map(
+      (file) => isArchiveFile(file) ? {
+        name: file.response.zipFileName || file.response.rarFileName,
+        id: file.response.zipFileId || file.response.rarFileId,
+        totalFiles: file.response.totalFiles,
+        processedFiles: file.response.processedFiles,
+        skippedFiles: file.response.skippedFiles,
+        type: file.name.toLowerCase().endsWith(".rar") ? "application/rar" : "application/zip",
+        files: file.response?.results?.map((r) => ({
+          name: r.fileName,
+          path: r.filePath,
+          id: r.fileId
+        }))
+      } : {
+        name: file.name,
+        id: file.response.id
+      }
+    );
+    const files_md = files.length > 0 ? [
+      "",
+      "\u6211\u5DF2\u7ECF\u63D0\u4EA4\u4E86\u4EE5\u4E0B\u6587\u4EF6\uFF1A",
+      "```attachments",
+      JSON.stringify(files),
+      "```"
+    ].join("\n") : "";
+    sendMessage({ input: { message: nextContent + files_md, files } });
+    setContent("");
+    setAttachedFiles([]);
+    setHeaderOpen(false);
+  };
+  const onPromptsItemClick = (info) => {
+    onSubmit(info.data.description);
+  };
+  const onChange = (info) => {
+    if (!headerOpen) {
+      setHeaderOpen(true);
+    }
+    if (info.file?.response?.error || info.file.status === "error") {
+      import_antd6.message.error(
+        `${info.file.name} file upload failed.${info.file?.response?.message}`
+      );
+    }
+    setAttachedFiles(info.fileList);
+    if (info.file.status === "done") {
+      console.log(`${info.file.name} file uploaded successfully`);
+    }
+  };
+  const beforeUpload = (file) => {
+    const isLessThan20MB = file.size / 1024 / 1024 < 20;
+    if (!isLessThan20MB) {
+      import_antd6.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,
+    {
+      type: "text",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons5.PaperClipOutlined, {}),
+      onClick: () => setHeaderOpen(!headerOpen)
+    }
+  ) });
+  const senderHeader = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_x.Sender.Header,
+    {
+      title: "Attachments",
+      open: headerOpen,
+      onOpenChange: setHeaderOpen,
+      styles: {
+        content: {
+          padding: 0
+        }
+      },
+      forceRender: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_x.Attachments,
+        {
+          ref: attachmentsRef,
+          items: attachedFiles,
+          action: `/api/file_storage/upload?path=temp`,
+          headers: {
+            "x-tenant-id": tenant_id
+          },
+          getDropContainer: () => {
+            const dropContainer = document.querySelector(".fina_chat");
+            return dropContainer;
+          },
+          onDrop: (e) => {
+            console.log(e);
+          },
+          onChange,
+          beforeUpload,
+          showUploadList: true,
+          multiple: true,
+          maxCount: 10,
+          placeholder: (type) => ({
+            icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons5.CloudUploadOutlined, {}),
+            title: "\u4E0A\u4F20\u6587\u4EF6",
+            description: attachment_placeholder
+          })
+        }
+      )
+    }
+  );
+  const roles = {
+    ai: {
+      placement: "start",
+      typing: false,
+      variant: "filled",
+      styles: {
+        content: {
+          background: "transparent",
+          padding: 0
+          //  "linear-gradient(149deg, rgb(160 17 2170 / 18%), rgb(226 176 176 / 18%) 43%)",
+        }
+      }
+    },
+    human: {
+      placement: "end",
+      variant: "filled",
+      styles: {
+        content: {
+          maxWidth: "70%",
+          background: "linear-gradient(1777deg, rgba(153, 164, 255, 0.38), rgb(231 243 248 / 38%) 27%)"
+        }
+      }
+    }
+  };
+  const extraMetaComponents = (0, import_react10.useMemo)(() => {
+    if (extraMeta?.length > 0) {
+      return extraMeta.map((meta) => {
+        const Element = getElement(meta.id)?.card_view;
+        if (Element) {
+          let childrenData;
+          try {
+          } catch (error) {
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            Element,
+            {
+              component_key: meta.id,
+              data: childrenData,
+              eventHandler: (e, data, message2, agent) => {
+                handleMDResponseEvent?.(e, data, message2, agent);
+              }
+            },
+            meta.id
+          );
+        }
+      });
+    }
+    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)(
+        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 }),
+          title: name || "Fina",
+          extra: extra || extraMetaComponents && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd6.Space, { align: "center", style: { marginRight: 16 }, children: extraMetaComponents })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "div",
+        {
+          style: {
+            background: "linear-gradient(rgba(41, 42, 45, .8) 0%, rgba(41, 42, 45, 0) 100%)"
+          }
+        }
+      )
+    ] }),
+    items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.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)(
+      import_x.Sender,
+      {
+        allowSpeech: true,
+        ref: senderRef,
+        value: content,
+        header: senderHeader,
+        onSubmit,
+        onCancel: stopStreaming,
+        onChange: setContent,
+        prefix: attachmentsNode,
+        loading: isLoading,
+        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)(
+            SendButton,
+            {
+              type: "primary",
+              disabled: !content && attachedFiles.length === 0,
+              onClick: () => onSubmit(content)
+            }
+          ) });
+        },
+        onPasteFile: (_, files) => {
+          Array.from(files).forEach((file) => {
+            attachmentsRef.current?.upload(file);
+          });
+          setHeaderOpen(true);
+        }
+      }
+    )
+  ] });
+};
+
+// src/components/Chat/ThinkingChain.tsx
+var import_icons6 = require("@ant-design/icons");
+var import_x2 = require("@ant-design/x");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function getStatusIcon2(status) {
+  switch (status) {
+    case "success":
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.CheckCircleOutlined, {});
+    case "error":
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.InfoCircleOutlined, {});
+    case "pending":
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.LoadingOutlined, {});
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.CheckCircleOutlined, {});
+  }
+}
+var ThinkingChain = ({ message: message2 }) => {
+  const title = message2.name || message2.content.split("\n")[0];
+  const items = [
+    {
+      key: message2.id,
+      title,
+      content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MDResponse, { content: message2.content }),
+      status: message2.status,
+      icon: getStatusIcon2(message2.status)
+    }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_x2.ThoughtChain,
+    {
+      items,
+      collapsible: message2.status === "success" ? true : false,
+      size: "small"
+    }
+  );
+};
+var ThinkingChainGroup = ({ message: message2 }) => {
+  const title = "\u601D\u8003\u8FC7\u7A0B";
+  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 }),
+    status: item.status,
+    icon: getStatusIcon2(item.status)
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime11.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 }) => {
+  return {
+    tabContainer: css`
+      .ant-tabs-content-holder {
+        overflow: hidden;
+        height: 100%;
+      }
+      .ant-tabs-content {
+        overflow: hidden;
+        height: 100%;
+      }
+      .ant-tabs-content > div {
+        overflow: auto;
+        height: 100%;
+      }
+    `
+  };
+});
+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) })
+  ] });
+};
+var SideAppViewBrowser = ({
+  open_uri,
+  eventHandler,
+  onClose,
+  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 add = (key, label, children) => {
+    const newActiveKey = key;
+    const newPanes = [...items];
+    newPanes.push({ label, children, key: newActiveKey });
+    setItems(newPanes);
+    setActiveKey(newActiveKey);
+  };
+  const remove = (targetKey) => {
+    let newActiveKey = activeKey;
+    let lastIndex = -1;
+    items.forEach((item, i) => {
+      if (item.key === targetKey) {
+        lastIndex = i - 1;
+      }
+    });
+    const newPanes = items.filter((item) => item.key !== targetKey);
+    if (newPanes.length && newActiveKey === targetKey) {
+      if (lastIndex >= 0) {
+        newActiveKey = newPanes[lastIndex].key;
+      } else {
+        newActiveKey = newPanes[0].key;
+      }
+    }
+    if (newPanes.length === 0) {
+      onClose();
+      return;
+    }
+    setItems(newPanes);
+    setActiveKey(newActiveKey);
+  };
+  const onEdit = (targetKey, action) => {
+    if (action === "remove") {
+      remove(targetKey);
+    }
+  };
+  (0, import_react11.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)) {
+      setActiveKey(key);
+      return;
+    }
+    add(
+      key,
+      open_uri.message || open_uri.data.message || "\u672A\u547D\u540D",
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        SideAppView,
+        {
+          component_key: open_uri.component_key,
+          data: open_uri.data,
+          eventHandler
+        }
+      )
+    );
+  }, [open_uri]);
+  (0, import_react11.useEffect)(() => {
+    if (open_uri.size && open_uri.size !== currentSize) {
+      setCurrentSize(open_uri.size);
+    }
+  }, [open_uri.size]);
+  const onChange = (newActiveKey) => {
+    setActiveKey(newActiveKey);
+  };
+  const handleSizeChange = () => {
+    const sizeOrder = [
+      // 先不支持小屏和中间屏
+      // "small",
+      // "middle",
+      "large",
+      "full"
+    ];
+    const currentIndex = sizeOrder.indexOf(currentSize);
+    const nextSize = sizeOrder[(currentIndex + 1) % sizeOrder.length];
+    setCurrentSize(nextSize);
+    onChangeSize(nextSize);
+  };
+  const getSizeLabel = (size) => {
+    switch (size) {
+      case "small":
+        return "\u5C0F";
+      case "middle":
+        return "\u4E2D";
+      case "large":
+        return "\u5927";
+      case "full":
+        return "\u5168\u5C4F";
+      default:
+        return "\u4E2D";
+    }
+  };
+  const getSizeIcon = (size) => {
+    switch (size) {
+      case "middle":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.CompressOutlined, {});
+      case "large":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.ExpandOutlined, {});
+      case "full":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.FullscreenOutlined, {});
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.ExpandOutlined, {});
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_antd7.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,
+            {
+              style: { margin: "8px 0" },
+              size: "large",
+              type: "text",
+              icon: getSizeIcon(currentSize),
+              onClick: handleSizeChange,
+              title: `\u5F53\u524D\u5C3A\u5BF8: ${getSizeLabel(currentSize)}, \u70B9\u51FB\u5207\u6362`
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_antd7.Button,
+            {
+              style: { margin: "8px 0" },
+              size: "large",
+              type: "text",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.CloseOutlined, {}),
+              onClick: () => {
+                onClose();
+              }
+            }
+          )
+        ] })
+      },
+      onChange,
+      activeKey,
+      onEdit,
+      items
+    }
+  );
+};
+
+// src/components/Chat/context.tsx
+var import_react12 = require("react");
+var chatContext = (0, import_react12.createContext)({
+  eventHandler: (component_key, data, message2) => {
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AxiomLatticeProvider,
+  Chating,
+  MDMermaid,
+  MDResponse,
+  MDViewFormItem,
+  SideAppViewBrowser,
+  ThinkingChain,
+  ThinkingChainGroup,
+  chatContext,
+  elements,
+  getElement,
+  regsiterElement,
   useAgentGraph,
   useAgentState,
   useAxiomLattice,