@axiom-lattice/react-sdk 2.1.4 → 2.1.6

package/dist/index.mjs

@@ -266,11 +266,14 @@ function useChat(threadId, options = {}) {
               pollInterval: options.resumeStreamPollInterval || 100
             },
             handleStreamEvent,
-            () => {
+            async () => {
               setState((prev) => ({
                 ...prev,
                 isLoading: false
               }));
+              if (options.enableReturnStateWhenStreamCompleted) {
+                await fetchAndUpdateAgentState(threadId);
+              }
               stopStreamingRef.current = null;
             },
             (error) => {
@@ -582,25 +585,14 @@ import { Prism } from "react-syntax-highlighter";
 import { dark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import remarkGfm from "remark-gfm";
 import { useMemo as useMemo3, useRef as useRef5, useState as useState11 } from "react";
-import { createStyles as createStyles6 } from "antd-style";
+import { createStyles as createStyles5 } from "antd-style";
 import rehypeRaw from "rehype-raw";
 
 // src/components/GenUI/elements/confirm_feedback.tsx
-import { Button, Card, Space, Tag, Typography } from "antd";
+import { Button, Space, 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,
@@ -608,23 +600,7 @@ var ConfirmFeedback = ({
 }) => {
   const { message: message3, 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"
-      }
-    ),
+  return /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [
     /* @__PURE__ */ jsx2(MDResponse, { content: message3 }),
     options ? /* @__PURE__ */ jsx2(Space, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ jsx2(
       Button,
@@ -691,11 +667,11 @@ var ConfirmFeedback = ({
         }
       )
     ] })
-  ] }) });
+  ] });
 };
 
 // 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 { Table, 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";
@@ -784,7 +760,7 @@ var GenericDataTable = ({
   };
   const hasExpandableRows = processedData.some((item) => item.expandItem);
   return /* @__PURE__ */ jsx3(
-    Table2,
+    Table,
     {
       size: "small",
       title: () => /* @__PURE__ */ jsxs2(Flex, { justify: "space-between", align: "center", children: [
@@ -863,12 +839,12 @@ import {
 } 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 { Card as Card2, Typography as Typography3, Space as Space3, Tag } from "antd";
+import { createStyles } 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 }) => ({
+var useStyle = createStyles(({ token, css }) => ({
   card: css`
     max-width: 500px;
     background: linear-gradient(
@@ -935,9 +911,9 @@ var ToolCard = ({
   eventHandler,
   interactive = true
 }) => {
-  const { styles } = useStyle2();
+  const { styles } = useStyle();
   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" }) });
+    return /* @__PURE__ */ jsx5(Card2, { 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(" ");
@@ -981,7 +957,7 @@ var ToolCard = ({
   };
   const hasParameters = data.parameters && Object.keys(data.parameters).length > 0;
   return /* @__PURE__ */ jsxs3(
-    Card3,
+    Card2,
     {
       size: "small",
       className: styles.card,
@@ -992,7 +968,7 @@ var ToolCard = ({
           /* @__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.type && /* @__PURE__ */ jsx5(Tag, { color: "blue", className: styles.typeTag, children: data.type })
           ] }),
           data.description && /* @__PURE__ */ jsx5(
             Text3,
@@ -1016,7 +992,7 @@ var ToolCard = ({
             /* @__PURE__ */ jsx5("div", { className: styles.parameterName, children: /* @__PURE__ */ jsxs3(Space3, { align: "center", children: [
               /* @__PURE__ */ jsx5("span", { children: key }),
               /* @__PURE__ */ jsx5(
-                Tag2,
+                Tag,
                 {
                   color: getTypeColor(value),
                   style: { fontSize: "10px", marginLeft: "auto" },
@@ -1138,8 +1114,8 @@ var ToolCall = ({ data, eventHandler }) => {
 };
 
 // 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 { Card as Card3, List, Typography as Typography5, Space as Space5 } from "antd";
+import { createStyles as createStyles2 } from "antd-style";
 import {
   ArrowRightOutlined,
   CheckCircleOutlined as CheckCircleOutlined2,
@@ -1147,7 +1123,7 @@ import {
 } from "@ant-design/icons";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var { Text: Text4 } = Typography5;
-var useStyle3 = createStyles3(({ token, css }) => ({
+var useStyle2 = createStyles2(({ token, css }) => ({
   card: css`
     max-width: 1200px;
     background: linear-gradient(
@@ -1179,7 +1155,7 @@ var Todo = ({
   eventHandler,
   interactive = true
 }) => {
-  const { styles } = useStyle3();
+  const { styles } = useStyle2();
   const getStatusIcon3 = (status) => {
     switch (status) {
       case "completed":
@@ -1230,7 +1206,7 @@ var Todo = ({
   };
   if (!data || !Array.isArray(data)) {
     return /* @__PURE__ */ jsx7(
-      Card4,
+      Card3,
       {
         size: "small",
         className: `shadow-sm ${styles.card}`,
@@ -1239,7 +1215,7 @@ var Todo = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx7(Card4, { size: "small", className: `shadow-sm ${styles.card}`, bordered: false, children: /* @__PURE__ */ jsxs5(Space5, { direction: "vertical", style: { width: "100%" }, children: [
+  return /* @__PURE__ */ jsx7(Card3, { size: "small", className: `shadow-sm ${styles.card}`, bordered: false, children: /* @__PURE__ */ jsxs5(Space5, { direction: "vertical", style: { width: "100%" }, children: [
     /* @__PURE__ */ jsx7(
       List,
       {
@@ -1343,7 +1319,7 @@ import {
   DownloadOutlined as DownloadOutlined2,
   CheckOutlined
 } from "@ant-design/icons";
-import { createStyles as createStyles4 } from "antd-style";
+import { createStyles as createStyles3 } from "antd-style";
 
 // src/components/GenUI/elements/getFileIcon.tsx
 import {
@@ -1389,7 +1365,7 @@ var getFileIcon = (filename) => {
 
 // src/components/GenUI/FileExplorer.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
-var useStyles = createStyles4(({ token, css }) => ({
+var useStyles = createStyles3(({ token, css }) => ({
   container: css`
     height: 100%;
     background: ${token.colorBgContainer};
@@ -1740,7 +1716,7 @@ var FileExplorer = ({
 // src/components/GenUI/elements/attachments_card.tsx
 import { Attachments } from "@ant-design/x";
 import {
-  Card as Card5,
+  Card as Card4,
   Flex as Flex3,
   Space as Space7,
   Typography as Typography7,
@@ -1759,7 +1735,7 @@ var AttachmentsCard = ({
   columns = 1,
   showDownloadButton = false
 }) => {
-  const { Text: Text8 } = Typography7;
+  const { Text: Text9 } = Typography7;
   const [showAll, setShowAll] = useState8(false);
   const getStyles = () => {
     switch (size) {
@@ -1836,7 +1812,7 @@ var AttachmentsCard = ({
     );
   };
   const renderFileDescription = (item) => /* @__PURE__ */ jsx11(Space7, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ jsx11(Space7, { children: /* @__PURE__ */ jsx11(
-    Text8,
+    Text9,
     {
       type: "secondary",
       style: {
@@ -1857,7 +1833,7 @@ var AttachmentsCard = ({
             evt.stopPropagation();
             handleItemClick(item);
           },
-          children: /* @__PURE__ */ jsxs8(Card5, { size: styles.cardSize, style: getCardStyle(item), children: [
+          children: /* @__PURE__ */ jsxs8(Card4, { size: styles.cardSize, style: getCardStyle(item), children: [
             /* @__PURE__ */ jsx11(DownloadButton, { item }),
             /* @__PURE__ */ jsx11(
               Attachments.FileCard,
@@ -1900,7 +1876,7 @@ var AttachmentsCard = ({
   const shouldShowViewMore = displayData.length > 4;
   const visibleData = showAll ? displayData : displayData.slice(0, 4);
   return /* @__PURE__ */ jsxs8(Flex3, { vertical: true, gap: size === "small" ? "small" : "middle", children: [
-    visibleData.map((item) => /* @__PURE__ */ jsx11("div", { onClick: () => handleItemClick(item), children: /* @__PURE__ */ jsxs8(Card5, { size: styles.cardSize, style: getCardStyle(item), children: [
+    visibleData.map((item) => /* @__PURE__ */ jsx11("div", { onClick: () => handleItemClick(item), children: /* @__PURE__ */ jsxs8(Card4, { size: styles.cardSize, style: getCardStyle(item), children: [
       /* @__PURE__ */ jsx11(DownloadButton, { item }),
       /* @__PURE__ */ jsx11(
         Attachments.FileCard,
@@ -1915,7 +1891,7 @@ var AttachmentsCard = ({
         }
       ),
       item.files && /* @__PURE__ */ jsxs8("div", { style: { paddingLeft: "12px" }, children: [
-        /* @__PURE__ */ jsxs8(Text8, { type: "secondary", style: { fontSize: "12px" }, children: [
+        /* @__PURE__ */ jsxs8(Text9, { type: "secondary", style: { fontSize: "12px" }, children: [
           "\u5305\u542B\u6587\u4EF6(",
           item.files.length,
           ")"
@@ -2024,13 +2000,13 @@ import { Button as Button6, Space as Space8, Typography as Typography8 } from "a
 // src/components/GenUI/elements/ContentPreviewCollapse.tsx
 import { useRef as useRef3, useState as useState10, useEffect as useEffect6, useCallback as useCallback5 } from "react";
 import { Collapse as Collapse4 } from "antd";
-import { createStyles as createStyles5 } from "antd-style";
+import { createStyles as createStyles4 } from "antd-style";
 import { DownOutlined as DownOutlined2, UpOutlined } from "@ant-design/icons";
 import CollapsePanel3 from "antd/es/collapse/CollapsePanel";
 import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var DEFAULT_COLLAPSED_MAX_HEIGHT = 180;
 var DEFAULT_EXPANDED_MAX_HEIGHT = 500;
-var useStyle4 = createStyles5(
+var useStyle3 = createStyles4(
   ({ css }, { showShadow }) => ({
     collapse: css`
       .ant-collapse-header {
@@ -2096,7 +2072,7 @@ var ContentPreviewCollapse = ({
   const [isOverflowing, setIsOverflowing] = useState10(false);
   const contentRef = useRef3(null);
   const showShadow = isOverflowing && !showFullContent;
-  const { styles, cx } = useStyle4({ showShadow });
+  const { styles, cx } = useStyle3({ showShadow });
   const checkOverflow = useCallback5(() => {
     if (contentRef.current) {
       const scrollHeight = contentRef.current.scrollHeight;
@@ -2431,7 +2407,7 @@ var MDMermaid = ({ children = [] }) => {
 // src/components/GenUI/MDResponse.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
 var SyntaxHighlighter = Prism;
-var useStyles2 = createStyles6(({ token, css }) => ({
+var useStyles2 = createStyles5(({ token, css }) => ({
   markdownTableContainer: css`
     overflow-x: auto;
     width: 100%;
@@ -2637,9 +2613,9 @@ import {
   Alert as Alert2,
   Avatar,
   Badge,
-  Button as Button8,
+  Button as Button9,
   Flex as Flex5,
-  Space as Space10,
+  Space as Space11,
   message as message2,
   Tooltip as Tooltip2,
   Popover,
@@ -2655,7 +2631,57 @@ import React4, {
   useState as useState12
 } from "react";
 import { useTranslation } from "react-i18next";
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+
+// src/components/GenUI/HITLContainer.tsx
+import { Card as Card5, Space as Space10, Tag as Tag3, Typography as Typography10 } from "antd";
+import { createStyles as createStyles6 } from "antd-style";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var { Text: Text8 } = Typography10;
+var useStyle4 = createStyles6(({ token, css }) => ({
+  card: css`
+    max-width: 1200px;
+    margin: 8px 20px;
+    background: linear-gradient(
+      919deg,
+      rgb(232 67 157 / 8%),
+      rgb(250 235 206 / 28%) 43%
+    );
+  `
+}));
+var HITLContainer = ({
+  interrupts,
+  eventHandler
+}) => {
+  const { styles } = useStyle4();
+  return interrupts && interrupts.length > 0 ? /* @__PURE__ */ jsx19(Card5, { size: "small", className: `shadow-sm ${styles.card}`, bordered: false, children: /* @__PURE__ */ jsxs13(Space10, { direction: "vertical", style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx19(
+      Tag3,
+      {
+        bordered: false,
+        color: "orange",
+        style: {
+          fontSize: 14,
+          fontWeight: "bold",
+          background: "#ffffff8f",
+          padding: 4,
+          borderRadius: 8
+        },
+        children: "\u7B49\u5F85\u53CD\u9988"
+      }
+    ),
+    interrupts.map((interrupt) => /* @__PURE__ */ jsx19(
+      MDResponse,
+      {
+        content: interrupt.value,
+        eventHandler
+      },
+      interrupt.id
+    ))
+  ] }) }) : null;
+};
+
+// src/components/Chat/Chating.tsx
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var LazyBubble = ({
   message: message3,
   renderContent,
@@ -2689,16 +2715,16 @@ var LazyBubble = ({
   }, []);
   const getPlaceholder = () => {
     const estimatedHeight = message3.content ? Math.min(100, message3.content.length / 5) : 100;
-    return /* @__PURE__ */ jsx19("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
+    return /* @__PURE__ */ jsx20("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
   };
-  return /* @__PURE__ */ jsx19(ErrorBoundary, { children: /* @__PURE__ */ jsx19("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message3) : getPlaceholder() }) });
+  return /* @__PURE__ */ jsx20(ErrorBoundary, { children: /* @__PURE__ */ jsx20("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message3) : getPlaceholder() }) });
 };
 var MemoizedBubbleList = memo(
   ({
     items,
     roles,
     className
-  }) => /* @__PURE__ */ jsx19(
+  }) => /* @__PURE__ */ jsx20(
     Bubble.List,
     {
       autoScroll: true,
@@ -2763,7 +2789,7 @@ var Chating = ({
       try {
         const json = JSON.parse(content2);
         if (json.action && json.message) {
-          return /* @__PURE__ */ jsx19(
+          return /* @__PURE__ */ jsx20(
             MDResponse,
             {
               content: json.message,
@@ -2779,7 +2805,7 @@ ${JSON.stringify(tool_call)}
 \`\`\``;
       }) || [];
       const content_md = [content2, ...tool_calls_md].join("\n");
-      return /* @__PURE__ */ jsx19(Space10, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ jsx19(
+      return /* @__PURE__ */ jsx20(Space11, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ jsx20(
         MDResponse,
         {
           content: content_md,
@@ -2794,7 +2820,7 @@ ${JSON.stringify(tool_call)}
       key: message3.id,
       role: message3.role,
       typing: false,
-      content: /* @__PURE__ */ jsx19(
+      content: /* @__PURE__ */ jsx20(
         LazyBubble,
         {
           message: message3,
@@ -2907,15 +2933,15 @@ ${JSON.stringify(tool_call)}
     }
     return true;
   };
-  const attachmentsNode = /* @__PURE__ */ jsx19(Badge, { dot: attachedFiles.length > 0 && !headerOpen, children: /* @__PURE__ */ jsx19(
-    Button8,
+  const attachmentsNode = /* @__PURE__ */ jsx20(Badge, { dot: attachedFiles.length > 0 && !headerOpen, children: /* @__PURE__ */ jsx20(
+    Button9,
     {
       type: "text",
-      icon: /* @__PURE__ */ jsx19(PaperClipOutlined, {}),
+      icon: /* @__PURE__ */ jsx20(PaperClipOutlined, {}),
       onClick: () => setHeaderOpen(!headerOpen)
     }
   ) });
-  const senderHeader = /* @__PURE__ */ jsx19(
+  const senderHeader = /* @__PURE__ */ jsx20(
     Sender.Header,
     {
       title: "Attachments",
@@ -2927,7 +2953,7 @@ ${JSON.stringify(tool_call)}
         }
       },
       forceRender: true,
-      children: /* @__PURE__ */ jsx19(
+      children: /* @__PURE__ */ jsx20(
         Attachments2,
         {
           ref: attachmentsRef,
@@ -2949,7 +2975,7 @@ ${JSON.stringify(tool_call)}
           multiple: true,
           maxCount: 10,
           placeholder: (type) => ({
-            icon: /* @__PURE__ */ jsx19(CloudUploadOutlined, {}),
+            icon: /* @__PURE__ */ jsx20(CloudUploadOutlined, {}),
             title: "\u4E0A\u4F20\u6587\u4EF6",
             description: attachment_placeholder
           })
@@ -2990,7 +3016,7 @@ ${JSON.stringify(tool_call)}
           try {
           } catch (error2) {
           }
-          return /* @__PURE__ */ jsx19(
+          return /* @__PURE__ */ jsx20(
             Element,
             {
               component_key: meta.id,
@@ -3006,22 +3032,22 @@ ${JSON.stringify(tool_call)}
     }
     return void 0;
   }, [extraMeta]);
-  return /* @__PURE__ */ jsxs13(Fragment3, { children: [
-    /* @__PURE__ */ jsxs13("div", { children: [
-      /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    /* @__PURE__ */ jsxs14("div", { children: [
+      /* @__PURE__ */ jsx20(
         Welcome,
         {
           style: { padding: 8 },
           variant: "borderless",
           description,
-          icon: /* @__PURE__ */ jsx19(Avatar, { src: avatar || "/images/avatar.jpeg", size: 48 }),
+          icon: /* @__PURE__ */ jsx20(Avatar, { src: avatar || "/images/avatar.jpeg", size: 48 }),
           title: name || "Fina",
-          extra: /* @__PURE__ */ jsxs13(Space10, { children: [
+          extra: /* @__PURE__ */ jsxs14(Space11, { children: [
             extra,
-            todos && todos.length > 0 && /* @__PURE__ */ jsx19(
+            todos && todos.length > 0 && /* @__PURE__ */ jsx20(
               Popover,
               {
-                content: /* @__PURE__ */ jsx19("div", { style: { width: 400 }, children: /* @__PURE__ */ jsx19(
+                content: /* @__PURE__ */ jsx20("div", { style: { width: 400 }, children: /* @__PURE__ */ jsx20(
                   Todo,
                   {
                     data: todos,
@@ -3032,11 +3058,11 @@ ${JSON.stringify(tool_call)}
                 title: "Todos",
                 trigger: "click",
                 placement: "bottomRight",
-                children: /* @__PURE__ */ jsx19(
+                children: /* @__PURE__ */ jsx20(
                   Tooltip2,
                   {
                     title: `${todos.filter((item) => item.status === "completed").length} / ${todos.length} tasks completed`,
-                    children: /* @__PURE__ */ jsx19("div", { style: { cursor: "pointer", display: "inline-flex" }, children: /* @__PURE__ */ jsx19(
+                    children: /* @__PURE__ */ jsx20("div", { style: { cursor: "pointer", display: "inline-flex" }, children: /* @__PURE__ */ jsx20(
                       Progress,
                       {
                         type: "circle",
@@ -3049,7 +3075,7 @@ ${JSON.stringify(tool_call)}
                         ),
                         status: todos.some((item) => item.status === "in_progress") ? "active" : "normal",
                         width: 30,
-                        format: () => /* @__PURE__ */ jsx19(
+                        format: () => /* @__PURE__ */ jsx20(
                           "div",
                           {
                             style: {
@@ -3058,7 +3084,7 @@ ${JSON.stringify(tool_call)}
                               alignItems: "center",
                               lineHeight: 1
                             },
-                            children: /* @__PURE__ */ jsxs13("span", { style: { fontSize: 8 }, children: [
+                            children: /* @__PURE__ */ jsxs14("span", { style: { fontSize: 8 }, children: [
                               todos.filter(
                                 (item) => item.status === "completed"
                               ).length,
@@ -3073,17 +3099,17 @@ ${JSON.stringify(tool_call)}
                 )
               }
             ),
-            files && Object.keys(files).length > 0 && /* @__PURE__ */ jsx19(Tooltip2, { title: "File Explorer", children: /* @__PURE__ */ jsx19(
+            files && Object.keys(files).length > 0 && /* @__PURE__ */ jsx20(Tooltip2, { title: "File Explorer", children: /* @__PURE__ */ jsx20(
               Badge,
               {
                 count: Object.keys(files).length,
                 size: "small",
                 color: "blue",
-                children: /* @__PURE__ */ jsx19(
-                  Button8,
+                children: /* @__PURE__ */ jsx20(
+                  Button9,
                   {
                     type: "text",
-                    icon: /* @__PURE__ */ jsx19(FileTextOutlined3, {}),
+                    icon: /* @__PURE__ */ jsx20(FileTextOutlined3, {}),
                     onClick: () => onOpenSidePanel({
                       component_key: "file_explorer",
                       message: "File Explorer",
@@ -3093,11 +3119,11 @@ ${JSON.stringify(tool_call)}
                 )
               }
             ) }),
-            extraMetaComponents && /* @__PURE__ */ jsx19(Space10, { align: "center", style: { marginRight: 16 }, children: extraMetaComponents })
+            extraMetaComponents && /* @__PURE__ */ jsx20(Space11, { align: "center", style: { marginRight: 16 }, children: extraMetaComponents })
           ] })
         }
       ),
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20(
         "div",
         {
           style: {
@@ -3106,16 +3132,16 @@ ${JSON.stringify(tool_call)}
         }
       )
     ] }),
-    items.length > 0 ? /* @__PURE__ */ jsx19(
+    items.length > 0 ? /* @__PURE__ */ jsx20(
       MemoizedBubbleList,
       {
         items,
         roles,
         className: styles.messages
       }
-    ) : /* @__PURE__ */ jsx19("div", { style: { flex: 1 } }),
-    isLoading ? /* @__PURE__ */ jsx19("div", { children: /* @__PURE__ */ jsx19(Bubble, { loading: isLoading, variant: "borderless" }) }) : /* @__PURE__ */ jsx19(Prompts, { items: senderPromptsItems, onItemClick: onPromptsItemClick }),
-    error && /* @__PURE__ */ jsx19("div", { style: { padding: "0 16px 8px" }, children: /* @__PURE__ */ jsx19(
+    ) : /* @__PURE__ */ jsx20("div", { style: { flex: 1 } }),
+    isLoading ? /* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsx20(Bubble, { loading: isLoading, variant: "borderless" }) }) : /* @__PURE__ */ jsx20(Prompts, { items: senderPromptsItems, onItemClick: onPromptsItemClick }),
+    error && /* @__PURE__ */ jsx20("div", { style: { padding: "0 16px 8px" }, children: /* @__PURE__ */ jsx20(
       Alert2,
       {
         type: "error",
@@ -3125,15 +3151,14 @@ ${JSON.stringify(tool_call)}
         message: `${error.message}`
       }
     ) }),
-    interrupts && interrupts.length > 0 && /* @__PURE__ */ jsx19(Space10, { direction: "vertical", style: { width: "100%" }, children: interrupts.map((interrupt) => /* @__PURE__ */ jsx19(
-      MDResponse,
+    /* @__PURE__ */ jsx20(
+      HITLContainer,
       {
-        content: interrupt.value,
+        interrupts,
         eventHandler: handleMDResponseEvent
-      },
-      interrupt.id
-    )) }),
-    /* @__PURE__ */ jsx19(
+      }
+    ),
+    /* @__PURE__ */ jsx20(
       Sender,
       {
         disabled: interrupts && interrupts.length > 0,
@@ -3149,7 +3174,7 @@ ${JSON.stringify(tool_call)}
         className: styles.sender,
         actions: (ori, { components }) => {
           const { SendButton, LoadingButton } = components;
-          return /* @__PURE__ */ jsx19(Flex5, { justify: "space-between", align: "center", children: isLoading ? /* @__PURE__ */ jsx19(LoadingButton, { type: "default" }) : /* @__PURE__ */ jsx19(
+          return /* @__PURE__ */ jsx20(Flex5, { justify: "space-between", align: "center", children: isLoading ? /* @__PURE__ */ jsx20(LoadingButton, { type: "default" }) : /* @__PURE__ */ jsx20(
             SendButton,
             {
               type: "primary",
@@ -3178,17 +3203,17 @@ import {
 import {
   ThoughtChain
 } from "@ant-design/x";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function getStatusIcon2(status) {
   switch (status) {
     case "success":
-      return /* @__PURE__ */ jsx20(CheckCircleOutlined3, {});
+      return /* @__PURE__ */ jsx21(CheckCircleOutlined3, {});
     case "error":
-      return /* @__PURE__ */ jsx20(InfoCircleOutlined2, {});
+      return /* @__PURE__ */ jsx21(InfoCircleOutlined2, {});
     case "pending":
-      return /* @__PURE__ */ jsx20(LoadingOutlined3, {});
+      return /* @__PURE__ */ jsx21(LoadingOutlined3, {});
     default:
-      return /* @__PURE__ */ jsx20(CheckCircleOutlined3, {});
+      return /* @__PURE__ */ jsx21(CheckCircleOutlined3, {});
   }
 }
 var ThinkingChain = ({ message: message3 }) => {
@@ -3197,12 +3222,12 @@ var ThinkingChain = ({ message: message3 }) => {
     {
       key: message3.id,
       title,
-      content: /* @__PURE__ */ jsx20(MDResponse, { content: message3.content }),
+      content: /* @__PURE__ */ jsx21(MDResponse, { content: message3.content }),
       status: message3.status,
       icon: getStatusIcon2(message3.status)
     }
   ];
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     ThoughtChain,
     {
       items,
@@ -3216,11 +3241,11 @@ var ThinkingChainGroup = ({ message: message3 }) => {
   const children = message3.items?.map((item) => ({
     key: item.id,
     title: item.name || item.content.split("\n")[0],
-    content: /* @__PURE__ */ jsx20(MDResponse, { content: item.content }),
+    content: /* @__PURE__ */ jsx21(MDResponse, { content: item.content }),
     status: item.status,
     icon: getStatusIcon2(item.status)
   }));
-  return /* @__PURE__ */ jsx20(ThoughtChain, { items: children, collapsible: true, size: "small" });
+  return /* @__PURE__ */ jsx21(ThoughtChain, { items: children, collapsible: true, size: "small" });
 };
 
 // src/components/Chat/SideAppViewBrowser.tsx
@@ -3230,10 +3255,10 @@ import {
   ExpandOutlined,
   FullscreenOutlined
 } from "@ant-design/icons";
-import { Button as Button9, Tabs } from "antd";
+import { Button as Button10, Tabs } from "antd";
 import { createStyles as createStyles7 } from "antd-style";
 import { useEffect as useEffect9, useState as useState13 } from "react";
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var useStyle5 = createStyles7(({ token, css }) => {
   return {
     tabContainer: css`
@@ -3253,9 +3278,9 @@ var useStyle5 = createStyles7(({ token, css }) => {
   };
 });
 var EmptySideAppView = ({ component_key, data }) => {
-  return /* @__PURE__ */ jsxs14("div", { children: [
-    /* @__PURE__ */ jsx21("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
-    /* @__PURE__ */ jsx21("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
+  return /* @__PURE__ */ jsxs15("div", { children: [
+    /* @__PURE__ */ jsx22("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
+    /* @__PURE__ */ jsx22("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
   ] });
 };
 var SideAppViewBrowser = ({
@@ -3313,7 +3338,7 @@ var SideAppViewBrowser = ({
     add(
       key,
       open_uri.message || open_uri.data.message || "\u672A\u547D\u540D",
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         SideAppView,
         {
           component_key: open_uri.component_key,
@@ -3361,16 +3386,16 @@ var SideAppViewBrowser = ({
   const getSizeIcon = (size) => {
     switch (size) {
       case "middle":
-        return /* @__PURE__ */ jsx21(CompressOutlined, {});
+        return /* @__PURE__ */ jsx22(CompressOutlined, {});
       case "large":
-        return /* @__PURE__ */ jsx21(ExpandOutlined, {});
+        return /* @__PURE__ */ jsx22(ExpandOutlined, {});
       case "full":
-        return /* @__PURE__ */ jsx21(FullscreenOutlined, {});
+        return /* @__PURE__ */ jsx22(FullscreenOutlined, {});
       default:
-        return /* @__PURE__ */ jsx21(ExpandOutlined, {});
+        return /* @__PURE__ */ jsx22(ExpandOutlined, {});
     }
   };
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     Tabs,
     {
       className: styles.tabContainer,
@@ -3378,9 +3403,9 @@ var SideAppViewBrowser = ({
       style: { height: "100%" },
       hideAdd: true,
       tabBarExtraContent: {
-        right: /* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "4px" }, children: [
-          /* @__PURE__ */ jsx21(
-            Button9,
+        right: /* @__PURE__ */ jsxs15("div", { style: { display: "flex", gap: "4px" }, children: [
+          /* @__PURE__ */ jsx22(
+            Button10,
             {
               style: { margin: "8px 0" },
               size: "large",
@@ -3390,13 +3415,13 @@ var SideAppViewBrowser = ({
               title: `\u5F53\u524D\u5C3A\u5BF8: ${getSizeLabel(currentSize)}, \u70B9\u51FB\u5207\u6362`
             }
           ),
-          /* @__PURE__ */ jsx21(
-            Button9,
+          /* @__PURE__ */ jsx22(
+            Button10,
             {
               style: { margin: "8px 0" },
               size: "large",
               type: "text",
-              icon: /* @__PURE__ */ jsx21(CloseOutlined, {}),
+              icon: /* @__PURE__ */ jsx22(CloseOutlined, {}),
               onClick: () => {
                 onClose();
               }