@axiom-lattice/react-sdk 1.0.11 → 1.0.13

package/dist/index.mjs

@@ -42,10 +42,28 @@ function useChat(threadId, options = {}) {
     messages: options.initialMessages || [],
     isLoading: false,
     error: null,
-    streamingMessage: null
+    streamingMessage: null,
+    ...options.enableReturnStateWhenStreamCompleted ? { agentState: null } : {}
   });
   const stopStreamingRef = useRef(null);
   const chunkMessageMerger = useRef(createSimpleMessageMerger());
+  const fetchAndUpdateAgentState = 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]
+  );
   useEffect(() => {
     if (options.initialMessages && options.initialMessages.length > 0) {
       chunkMessageMerger.current.initialMessages(options.initialMessages);
@@ -57,7 +75,7 @@ function useChat(threadId, options = {}) {
     setState((prev) => ({
       ...prev,
       messages: updatedMessages,
-      isLoading: false,
+      isLoading: true,
       streamingMessage: null
     }));
   }, []);
@@ -71,7 +89,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,
@@ -80,7 +98,7 @@ function useChat(threadId, options = {}) {
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message || command?.resume?.message || "",
+        content: message2 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -100,11 +118,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) => {
@@ -121,24 +147,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
           }));
         }
@@ -150,7 +166,14 @@ function useChat(threadId, options = {}) {
         }));
       }
     },
-    [client, threadId, options.streaming, handleStreamEvent]
+    [
+      client,
+      threadId,
+      options.streaming,
+      options.enableReturnStateWhenStreamCompleted,
+      handleStreamEvent,
+      fetchAndUpdateAgentState
+    ]
   );
   const stopStreaming = useCallback(() => {
     if (stopStreamingRef.current) {
@@ -175,6 +198,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({
@@ -188,6 +215,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,
@@ -196,7 +252,13 @@ function useChat(threadId, options = {}) {
         }));
       }
     },
-    [client, threadId]
+    [
+      client,
+      threadId,
+      options.enableResumeStream,
+      options.resumeStreamPollInterval,
+      handleStreamEvent
+    ]
   );
   const clearMessages = useCallback(() => {
     chunkMessageMerger.current.reset();
@@ -465,8 +527,1699 @@ function useAgentGraph() {
 
 // src/index.ts
 export * from "@axiom-lattice/protocols";
+
+// src/components/GenUI/MDResponse.tsx
+import ReactMarkdown from "react-markdown";
+import { Prism } from "react-syntax-highlighter";
+import { dark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import remarkGfm from "remark-gfm";
+import { useMemo as useMemo2, useRef as useRef4, useState as useState7 } from "react";
+import { createStyles as createStyles4 } from "antd-style";
+import rehypeRaw from "rehype-raw";
+
+// src/components/GenUI/elements/confirm_feedback.tsx
+import { Button, Card, Space, Tag, Typography } from "antd";
+import { useState as useState5 } from "react";
+import { createStyles } from "antd-style";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var { Text } = Typography;
+var useStyle = 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] = useState5(false);
+  const { styles } = useStyle();
+  return /* @__PURE__ */ jsx2(Card, { size: "small", className: `shadow-sm ${styles.card}`, bordered: false, children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx2(
+      Tag,
+      {
+        bordered: false,
+        color: "orange",
+        style: {
+          fontSize: 14,
+          fontWeight: "bold",
+          background: "#ffffff8f",
+          padding: 4,
+          borderRadius: 8
+        },
+        children: "\u8BF7\u6C42\u786E\u8BA4"
+      }
+    ),
+    /* @__PURE__ */ jsx2(MDResponse, { content: message2 }),
+    options ? /* @__PURE__ */ jsx2(Space, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ jsx2(
+      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__ */ jsxs(Space, { style: { justifyContent: "flex-end", width: "100%" }, children: [
+      /* @__PURE__ */ jsx2(
+        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__ */ jsx2(
+        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
+import { Table as Table2, Typography as Typography2, Button as Button2, Flex, Space as Space2 } from "antd";
+import { useState as useState6 } from "react";
+import { DownloadOutlined, ExpandAltOutlined } from "@ant-design/icons";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var { Text: Text2 } = Typography2;
+var GenericDataTable = ({
+  data,
+  eventHandler,
+  interactive = true,
+  default_open_in_side_app = true
+}) => {
+  const { dataSource, message: message2 } = data ?? {};
+  const [expandedRowKeys, setExpandedRowKeys] = useState6([]);
+  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__ */ jsxs2("div", { style: { padding: "16px" }, children: [
+      expandItem.content && /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "16px" }, children: [
+        /* @__PURE__ */ jsx3(Text2, { strong: true, style: { display: "block", marginBottom: "8px" }, children: "\u8BE6\u7EC6\u4FE1\u606F:" }),
+        /* @__PURE__ */ jsx3(MDResponse, { content: expandItem.content })
+      ] }),
+      expandItem.dataSource && expandItem.dataSource.length > 0 && /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx3(Text2, { strong: true, style: { display: "block", marginBottom: "8px" }, children: "\u5B50\u8868\u6570\u636E:" }),
+        /* @__PURE__ */ jsx3(
+          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__ */ jsx3(
+    Table2,
+    {
+      size: "small",
+      title: () => /* @__PURE__ */ jsxs2(Flex, { justify: "space-between", align: "center", children: [
+        /* @__PURE__ */ jsx3(Space2, { children: /* @__PURE__ */ jsx3(Text2, { strong: true, style: { fontSize: 16 }, children: message2 || "" }) }),
+        /* @__PURE__ */ jsxs2(Space2, { children: [
+          /* @__PURE__ */ jsx3(
+            Button2,
+            {
+              type: "text",
+              size: "small",
+              icon: /* @__PURE__ */ jsx3(DownloadOutlined, {}),
+              onClick: exportToExcel,
+              disabled: !processedData || processedData.length === 0,
+              children: "\u5BFC\u51FAExcel"
+            }
+          ),
+          eventHandler && default_open_in_side_app && /* @__PURE__ */ jsxs2(
+            Button2,
+            {
+              type: "link",
+              size: "small",
+              onClick: () => {
+                eventHandler(
+                  "__open_side_app",
+                  {
+                    component_key: "generic_data_table",
+                    message: message2 || "",
+                    data: { dataSource, message: message2 },
+                    size: "large"
+                  },
+                  ""
+                );
+              },
+              children: [
+                /* @__PURE__ */ jsx3(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
+import { jsx as jsx4 } from "react/jsx-runtime";
+var GenericDataTableSideApp = (props) => {
+  return /* @__PURE__ */ jsx4(GenericDataTable, { ...props, default_open_in_side_app: false });
+};
+
+// src/components/GenUI/elements/ToolCall.tsx
+import { Collapse, Typography as Typography4, Flex as Flex2 } from "antd";
+import CollapsePanel from "antd/es/collapse/CollapsePanel";
+import {
+  CheckCircleOutlined,
+  LoadingOutlined,
+  InfoCircleOutlined
+} from "@ant-design/icons";
+
+// src/components/GenUI/elements/ToolCard.tsx
+import { Card as Card3, Typography as Typography3, Space as Space3, Tag as Tag2 } from "antd";
+import { createStyles as createStyles2 } from "antd-style";
+import { ToolOutlined, CodeOutlined } from "@ant-design/icons";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var { Text: Text3, Title } = Typography3;
+var useStyle2 = createStyles2(({ 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__ */ jsx5(Card3, { size: "small", className: styles.card, bordered: false, children: /* @__PURE__ */ jsx5(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__ */ jsxs3(
+    Card3,
+    {
+      size: "small",
+      className: styles.card,
+      bordered: false,
+      bodyStyle: { padding: "16px" },
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: styles.header, children: [
+          /* @__PURE__ */ jsxs3(Space3, { align: "center", children: [
+            /* @__PURE__ */ jsx5(ToolOutlined, { style: { color: "#1890ff", fontSize: "18px" } }),
+            /* @__PURE__ */ jsx5(Title, { level: 5, className: styles.toolName, style: { margin: 0 }, children: formatToolName(data.name) }),
+            data.type && /* @__PURE__ */ jsx5(Tag2, { color: "blue", className: styles.typeTag, children: data.type })
+          ] }),
+          data.description && /* @__PURE__ */ jsx5(
+            Text3,
+            {
+              type: "secondary",
+              style: { fontSize: "13px", marginTop: "4px", display: "block" },
+              children: data.description
+            }
+          )
+        ] }),
+        hasParameters ? /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsxs3(Space3, { align: "center", style: { marginBottom: "12px" }, children: [
+            /* @__PURE__ */ jsx5(CodeOutlined, { style: { color: "#52c41a", fontSize: "14px" } }),
+            /* @__PURE__ */ jsxs3(Text3, { strong: true, style: { fontSize: "14px" }, children: [
+              "Parameters (",
+              Object.keys(data.parameters).length,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx5("div", { className: styles.parameterGrid, children: Object.entries(data.parameters).map(([key, value], index) => /* @__PURE__ */ jsxs3("div", { className: styles.parameterItem, children: [
+            /* @__PURE__ */ jsx5("div", { className: styles.parameterName, children: /* @__PURE__ */ jsxs3(Space3, { align: "center", children: [
+              /* @__PURE__ */ jsx5("span", { children: key }),
+              /* @__PURE__ */ jsx5(
+                Tag2,
+                {
+                  color: getTypeColor(value),
+                  style: { fontSize: "10px", marginLeft: "auto" },
+                  children: getTypeLabel(value)
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx5("div", { className: styles.parameterValue, children: formatParameterValue(value) })
+          ] }, index)) })
+        ] }) : /* @__PURE__ */ jsxs3(Space3, { align: "center", children: [
+          /* @__PURE__ */ jsx5(CodeOutlined, { style: { color: "#d9d9d9", fontSize: "14px" } }),
+          /* @__PURE__ */ jsx5(Text3, { type: "secondary", style: { fontSize: "13px" }, children: "No parameters" })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/GenUI/elements/ToolCall.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function getStatusIcon(status) {
+  switch (status) {
+    case "success":
+      return /* @__PURE__ */ jsx6(CheckCircleOutlined, { style: { color: "#52c41a" } });
+    case "error":
+      return /* @__PURE__ */ jsx6(InfoCircleOutlined, { style: { color: "#ff4d4f" } });
+    default:
+      return /* @__PURE__ */ jsx6(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__ */ jsxs4(Flex2, { align: "center", wrap: "wrap", children: [
+    /* @__PURE__ */ jsx6(Typography4.Text, { strong: true, children: formatToolName(toolCallData.name) }),
+    /* @__PURE__ */ jsx6(
+      Typography4.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__ */ jsxs4("div", { style: { marginTop: "8px" }, children: [
+    /* @__PURE__ */ jsx6(
+      ToolCard,
+      {
+        data: toolCardData,
+        component_key: `${toolCallData.id}-params`,
+        eventHandler: () => {
+        },
+        interactive: false
+      }
+    ),
+    toolCallData.response && /* @__PURE__ */ jsxs4("div", { style: { marginTop: "12px" }, children: [
+      /* @__PURE__ */ jsx6(
+        Typography4.Text,
+        {
+          strong: true,
+          style: { fontSize: "12px", marginBottom: "8px", display: "block" },
+          children: "Response:"
+        }
+      ),
+      /* @__PURE__ */ jsx6(MDResponse, { content: toolCallData.response })
+    ] })
+  ] });
+  const expandIcon = ({ isActive }) => {
+    return getStatusIcon(toolCallData.status);
+  };
+  return /* @__PURE__ */ jsx6(
+    Collapse,
+    {
+      size: "small",
+      bordered: false,
+      defaultActiveKey: [],
+      expandIcon,
+      children: /* @__PURE__ */ jsx6(
+        CollapsePanel,
+        {
+          header,
+          style: { minWidth: 400 },
+          children: content
+        },
+        toolCallData.id
+      )
+    }
+  );
+};
+
+// src/components/GenUI/elements/Todo.tsx
+import { Card as Card4, List, Typography as Typography5, Space as Space5 } from "antd";
+import { createStyles as createStyles3 } from "antd-style";
+import {
+  CheckCircleOutlined as CheckCircleOutlined2,
+  ClockCircleOutlined,
+  LoadingOutlined as LoadingOutlined2
+} from "@ant-design/icons";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var { Text: Text4 } = Typography5;
+var useStyle3 = createStyles3(({ 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__ */ jsx7(CheckCircleOutlined2, { style: { color: "#52c41a" } });
+      case "in_progress":
+        return /* @__PURE__ */ jsx7(LoadingOutlined2, { style: { color: "#1890ff" } });
+      case "pending":
+        return /* @__PURE__ */ jsx7(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__ */ jsx7(
+      Card4,
+      {
+        size: "small",
+        className: `shadow-sm ${styles.card}`,
+        bordered: false,
+        children: /* @__PURE__ */ jsx7(Text4, { type: "secondary", children: "No todo items available" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx7(Card4, { size: "small", className: `shadow-sm ${styles.card}`, bordered: false, children: /* @__PURE__ */ jsxs5(Space5, { direction: "vertical", style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx7(
+      List,
+      {
+        size: "small",
+        dataSource: data,
+        renderItem: (item, index) => /* @__PURE__ */ jsx7(
+          List.Item,
+          {
+            className: `${styles.todoItem} ${getItemClassName(item.status)}`,
+            children: /* @__PURE__ */ jsxs5(Space5, { align: "center", style: { width: "100%" }, children: [
+              getStatusIcon3(item.status),
+              /* @__PURE__ */ jsx7(Text4, { style: { flex: 1 }, children: item.content })
+            ] })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs5(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
+import mermaid from "mermaid";
+import { useEffect as useEffect4, useRef as useRef3 } from "react";
+import { v4 } from "uuid";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var MDMermaid = ({ children = [] }) => {
+  const domId = useRef3(`dom${v4()}`);
+  const code = String(children);
+  const target = useRef3(null);
+  const targetInternal = useRef3(null);
+  useEffect4(() => {
+    if (target.current && code) {
+      mermaid.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 }
+      });
+      mermaid.render(domId.current, code, target.current).then((result) => {
+        target.current.innerHTML = result.svg;
+      }).catch((error) => {
+        console.log(error);
+      });
+    }
+  }, [code]);
+  return /* @__PURE__ */ jsx8("div", { style: { minWidth: 750 }, ref: target, children: /* @__PURE__ */ jsx8("code", { id: domId.current, style: { display: "none" } }) });
+};
+
+// src/components/GenUI/MDResponse.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var SyntaxHighlighter = Prism;
+var useStyles = createStyles4(({ 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 = useMemo2(
+    () => ({
+      components: {
+        a({ node, ...props }) {
+          if (embeddedLink) {
+            return /* @__PURE__ */ jsx9(IFrameCard, { src: props.href });
+          } else return /* @__PURE__ */ jsx9("a", { ...props });
+        },
+        table({ node, ...props }) {
+          return /* @__PURE__ */ jsx9("div", { className: styles.markdownTableContainer, children: /* @__PURE__ */ jsx9("table", { className: styles.markdownTable, ...props }) });
+        },
+        th({ node, ...props }) {
+          return /* @__PURE__ */ jsx9("th", { className: styles.markdownTh, ...props });
+        },
+        td({ node, ...props }) {
+          return /* @__PURE__ */ jsx9("td", { className: styles.markdownTd, ...props });
+        },
+        tr({ node, ...props }) {
+          return /* @__PURE__ */ jsx9("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__ */ jsx9(
+                Element,
+                {
+                  interactive,
+                  component_key: language,
+                  data: childrenData,
+                  eventHandler: (e, data, message2, agent) => {
+                    eventHandler?.(e, data, message2, agent);
+                  }
+                }
+              );
+            }
+            switch (language) {
+              case "mermaid":
+                return /* @__PURE__ */ jsx9(MDMermaid, { children });
+              default:
+                return /* @__PURE__ */ jsx9(
+                  SyntaxHighlighter,
+                  {
+                    ...rest,
+                    PreTag: "div",
+                    language,
+                    style: dark,
+                    children: String(children).replace(/\n$/, "")
+                  }
+                );
+            }
+          } else {
+            return /* @__PURE__ */ jsx9("code", { ...rest, className, children });
+          }
+        }
+      },
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: [rehypeRaw]
+    }),
+    [userData, interactive, embeddedLink, styles]
+  );
+  return /* @__PURE__ */ jsx9("div", { className: styles.markdownContainer, children: /* @__PURE__ */ jsx9(ReactMarkdown, { ...config, children: content }) });
+};
+var MDViewFormItem = ({ value }) => {
+  return /* @__PURE__ */ jsx9(MDResponse, { content: value || "" });
+};
+var IFrameCard = ({ src }) => {
+  const containerRef = useRef4(null);
+  const [width, setWidth] = useState7("640px");
+  const [height, setHeight] = useState7("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__ */ jsx9("div", { children: /* @__PURE__ */ jsx9("img", { src, style: { width: "100%" } }) });
+  } else {
+    return /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9("a", { href: src, target: "_black", children: src }) });
+  }
+};
+
+// src/components/Chat/Chating.tsx
+import {
+  CloudUploadOutlined,
+  PaperClipOutlined
+} from "@ant-design/icons";
+import {
+  Attachments,
+  Bubble,
+  Prompts,
+  Sender,
+  Welcome
+} from "@ant-design/x";
+import {
+  Avatar,
+  Badge,
+  Button as Button3,
+  Flex as Flex3,
+  Space as Space6,
+  message
+} from "antd";
+import ErrorBoundary from "antd/es/alert/ErrorBoundary";
+import React2, {
+  memo,
+  useCallback as useCallback5,
+  useEffect as useEffect5,
+  useMemo as useMemo3,
+  useRef as useRef5,
+  useState as useState8
+} from "react";
+import { useTranslation } from "react-i18next";
+import { Fragment, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var LazyBubble = ({
+  message: message2,
+  renderContent,
+  autoLoadRightPanel
+}) => {
+  const ref = useRef5(null);
+  const [isVisible, setIsVisible] = useState8(false);
+  const [wasEverVisible, setWasEverVisible] = useState8(false);
+  useEffect5(() => {
+    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]);
+  useEffect5(() => {
+    autoLoadRightPanel?.();
+  }, []);
+  const getPlaceholder = () => {
+    const estimatedHeight = message2.content ? Math.min(100, message2.content.length / 5) : 100;
+    return /* @__PURE__ */ jsx10("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
+  };
+  return /* @__PURE__ */ jsx10(ErrorBoundary, { children: /* @__PURE__ */ jsx10("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message2) : getPlaceholder() }) });
+};
+var MemoizedBubbleList = memo(
+  ({
+    items,
+    roles,
+    className
+  }) => /* @__PURE__ */ jsx10(
+    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 } = useTranslation();
+  const [content, setContent] = useState8("");
+  const [attachedFiles, setAttachedFiles] = useState8([]);
+  const [headerOpen, setHeaderOpen] = useState8(false);
+  const attachmentsRef = useRef5(null);
+  const senderRef = React2.useRef(null);
+  useEffect5(() => {
+    regsiterElement("action_show_attachments_uploader", {
+      card_view: () => null,
+      action: (data) => {
+        console.log(data);
+        setHeaderOpen(true);
+      }
+    });
+  }, []);
+  const messageLengthRef = useRef5(messages?.length ?? 0);
+  useEffect5(() => {
+    if (messages?.length) {
+      messageLengthRef.current = messages?.length;
+    }
+  }, [messages?.length]);
+  const renderContent = useCallback5(
+    (message2) => {
+      const { content: content2, files, id } = message2;
+      try {
+        const json = JSON.parse(content2);
+        if (json.action && json.message) {
+          return /* @__PURE__ */ jsx10(
+            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__ */ jsx10(Space6, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ jsx10(
+        MDResponse,
+        {
+          content: content_md,
+          eventHandler: handleMDResponseEvent
+        }
+      ) });
+    },
+    [handleMDResponseEvent]
+  );
+  const items = useMemo3(
+    () => messages.map((message2, index) => ({
+      key: message2.id,
+      role: message2.role,
+      typing: false,
+      content: /* @__PURE__ */ jsx10(
+        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) {
+      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") {
+      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) {
+      message.error(
+        `File must be smaller than 20MB! ${file.name} is too large.`
+      );
+      return false;
+    }
+    return true;
+  };
+  const attachmentsNode = /* @__PURE__ */ jsx10(Badge, { dot: attachedFiles.length > 0 && !headerOpen, children: /* @__PURE__ */ jsx10(
+    Button3,
+    {
+      type: "text",
+      icon: /* @__PURE__ */ jsx10(PaperClipOutlined, {}),
+      onClick: () => setHeaderOpen(!headerOpen)
+    }
+  ) });
+  const senderHeader = /* @__PURE__ */ jsx10(
+    Sender.Header,
+    {
+      title: "Attachments",
+      open: headerOpen,
+      onOpenChange: setHeaderOpen,
+      styles: {
+        content: {
+          padding: 0
+        }
+      },
+      forceRender: true,
+      children: /* @__PURE__ */ jsx10(
+        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__ */ jsx10(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 = useMemo3(() => {
+    if (extraMeta?.length > 0) {
+      return extraMeta.map((meta) => {
+        const Element = getElement(meta.id)?.card_view;
+        if (Element) {
+          let childrenData;
+          try {
+          } catch (error) {
+          }
+          return /* @__PURE__ */ jsx10(
+            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__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsxs6("div", { children: [
+      /* @__PURE__ */ jsx10(
+        Welcome,
+        {
+          style: { padding: 8 },
+          variant: "borderless",
+          description,
+          icon: /* @__PURE__ */ jsx10(Avatar, { src: avatar || "/images/avatar.jpeg", size: 48 }),
+          title: name || "Fina",
+          extra: extra || extraMetaComponents && /* @__PURE__ */ jsx10(Space6, { align: "center", style: { marginRight: 16 }, children: extraMetaComponents })
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        "div",
+        {
+          style: {
+            background: "linear-gradient(rgba(41, 42, 45, .8) 0%, rgba(41, 42, 45, 0) 100%)"
+          }
+        }
+      )
+    ] }),
+    items.length > 0 ? /* @__PURE__ */ jsx10(
+      MemoizedBubbleList,
+      {
+        items,
+        roles,
+        className: styles.messages
+      }
+    ) : /* @__PURE__ */ jsx10("div", { style: { flex: 1 } }),
+    isLoading ? /* @__PURE__ */ jsx10("div", { children: /* @__PURE__ */ jsx10(Bubble, { loading: isLoading, variant: "borderless" }) }) : /* @__PURE__ */ jsx10(Prompts, { items: senderPromptsItems, onItemClick: onPromptsItemClick }),
+    /* @__PURE__ */ jsx10(
+      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__ */ jsx10(Flex3, { justify: "space-between", align: "center", children: isLoading ? /* @__PURE__ */ jsx10(LoadingButton, { type: "default" }) : /* @__PURE__ */ jsx10(
+            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
+import {
+  CheckCircleOutlined as CheckCircleOutlined3,
+  InfoCircleOutlined as InfoCircleOutlined2,
+  LoadingOutlined as LoadingOutlined3
+} from "@ant-design/icons";
+import {
+  ThoughtChain
+} from "@ant-design/x";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function getStatusIcon2(status) {
+  switch (status) {
+    case "success":
+      return /* @__PURE__ */ jsx11(CheckCircleOutlined3, {});
+    case "error":
+      return /* @__PURE__ */ jsx11(InfoCircleOutlined2, {});
+    case "pending":
+      return /* @__PURE__ */ jsx11(LoadingOutlined3, {});
+    default:
+      return /* @__PURE__ */ jsx11(CheckCircleOutlined3, {});
+  }
+}
+var ThinkingChain = ({ message: message2 }) => {
+  const title = message2.name || message2.content.split("\n")[0];
+  const items = [
+    {
+      key: message2.id,
+      title,
+      content: /* @__PURE__ */ jsx11(MDResponse, { content: message2.content }),
+      status: message2.status,
+      icon: getStatusIcon2(message2.status)
+    }
+  ];
+  return /* @__PURE__ */ jsx11(
+    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__ */ jsx11(MDResponse, { content: item.content }),
+    status: item.status,
+    icon: getStatusIcon2(item.status)
+  }));
+  return /* @__PURE__ */ jsx11(ThoughtChain, { items: children, collapsible: true, size: "small" });
+};
+
+// src/components/Chat/SideAppViewBrowser.tsx
+import {
+  CloseOutlined,
+  CompressOutlined,
+  ExpandOutlined,
+  FullscreenOutlined
+} from "@ant-design/icons";
+import { Button as Button4, Tabs } from "antd";
+import { createStyles as createStyles5 } from "antd-style";
+import { useEffect as useEffect6, useState as useState9 } from "react";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var useStyle4 = createStyles5(({ 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__ */ jsxs7("div", { children: [
+    /* @__PURE__ */ jsx12("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
+    /* @__PURE__ */ jsx12("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
+  ] });
+};
+var SideAppViewBrowser = ({
+  open_uri,
+  eventHandler,
+  onClose,
+  onChangeSize
+}) => {
+  const { styles } = useStyle4();
+  const [activeKey, setActiveKey] = useState9(JSON.stringify(open_uri));
+  const [currentSize, setCurrentSize] = useState9(open_uri.size || "large");
+  const [items, setItems] = useState9([]);
+  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);
+    }
+  };
+  useEffect6(() => {
+    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__ */ jsx12(
+        SideAppView,
+        {
+          component_key: open_uri.component_key,
+          data: open_uri.data,
+          eventHandler
+        }
+      )
+    );
+  }, [open_uri]);
+  useEffect6(() => {
+    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__ */ jsx12(CompressOutlined, {});
+      case "large":
+        return /* @__PURE__ */ jsx12(ExpandOutlined, {});
+      case "full":
+        return /* @__PURE__ */ jsx12(FullscreenOutlined, {});
+      default:
+        return /* @__PURE__ */ jsx12(ExpandOutlined, {});
+    }
+  };
+  return /* @__PURE__ */ jsx12(
+    Tabs,
+    {
+      className: styles.tabContainer,
+      type: "editable-card",
+      style: { height: "100%" },
+      hideAdd: true,
+      tabBarExtraContent: {
+        right: /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "4px" }, children: [
+          /* @__PURE__ */ jsx12(
+            Button4,
+            {
+              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__ */ jsx12(
+            Button4,
+            {
+              style: { margin: "8px 0" },
+              size: "large",
+              type: "text",
+              icon: /* @__PURE__ */ jsx12(CloseOutlined, {}),
+              onClick: () => {
+                onClose();
+              }
+            }
+          )
+        ] })
+      },
+      onChange,
+      activeKey,
+      onEdit,
+      items
+    }
+  );
+};
+
+// src/components/Chat/context.tsx
+import { createContext as createContext2 } from "react";
+var chatContext = createContext2({
+  eventHandler: (component_key, data, message2) => {
+  }
+});
 export {
   AxiomLatticeProvider,
+  Chating,
+  MDMermaid,
+  MDResponse,
+  MDViewFormItem,
+  SideAppViewBrowser,
+  ThinkingChain,
+  ThinkingChainGroup,
+  chatContext,
+  elements,
+  getElement,
+  regsiterElement,
   useAgentGraph,
   useAgentState,
   useAxiomLattice,