@axiom-lattice/react-sdk 2.1.0 → 2.1.2

package/dist/index.mjs

@@ -43,6 +43,7 @@ function useChat(threadId, options = {}) {
     isLoading: false,
     error: null,
     streamingMessage: null,
+    interrupts: void 0,
     ...options.enableReturnStateWhenStreamCompleted ? { agentState: null } : {}
   });
   const stopStreamingRef = useRef(null);
@@ -55,7 +56,15 @@ function useChat(threadId, options = {}) {
         setState(
           (prev) => ({
             ...prev,
-            agentState
+            agentState,
+            interrupts: agentState?.tasks?.flatMap((task) => {
+              return task.interrupts.map((interrupt) => {
+                return {
+                  id: interrupt.id,
+                  value: interrupt.value
+                };
+              });
+            })
           })
         );
       } catch (error) {
@@ -69,29 +78,38 @@ function useChat(threadId, options = {}) {
       chunkMessageMerger.current.initialMessages(options.initialMessages);
     }
   }, [options.initialMessages]);
-  const handleStreamEvent = useCallback((chunk) => {
-    chunkMessageMerger.current.push(chunk);
-    let todos;
-    if (chunk.type === "tool" && chunk.data && typeof chunk.data.content === "string" && chunk.data.content.startsWith("```todo_list")) {
-      try {
-        const content = chunk.data.content;
-        const match = content.match(/```todo_list\s*([\s\S]*?)\s*```/);
-        if (match && match[1]) {
-          todos = JSON.parse(match[1]);
+  const handleStreamEvent = useCallback(
+    (chunk) => {
+      let interrupt;
+      if (chunk.type === "interrupt") {
+        interrupt = chunk;
+      } else {
+        chunkMessageMerger.current.push(chunk);
+      }
+      let todos;
+      if (chunk.type === "tool" && chunk.data && typeof chunk.data.content === "string" && chunk.data.content.startsWith("```todo_list")) {
+        try {
+          const content = chunk.data.content;
+          const match = content.match(/```todo_list\s*([\s\S]*?)\s*```/);
+          if (match && match[1]) {
+            todos = JSON.parse(match[1]);
+          }
+        } catch (e) {
+          console.error("Failed to parse todo list from chunk", e);
         }
-      } catch (e) {
-        console.error("Failed to parse todo list from chunk", e);
       }
-    }
-    const updatedMessages = chunkMessageMerger.current.getMessages();
-    setState((prev) => ({
-      ...prev,
-      todos: todos || prev.todos,
-      messages: updatedMessages,
-      isLoading: true,
-      streamingMessage: null
-    }));
-  }, []);
+      const updatedMessages = chunkMessageMerger.current.getMessages();
+      setState((prev) => ({
+        ...prev,
+        interrupts: interrupt ? [interrupt] : void 0,
+        todos: todos || prev.todos,
+        messages: updatedMessages,
+        isLoading: true,
+        streamingMessage: null
+      }));
+    },
+    []
+  );
   const sendMessage = useCallback(
     async (data) => {
       if (!threadId) {
@@ -218,12 +236,21 @@ function useChat(threadId, options = {}) {
       setState((prev) => ({ ...prev, isLoading: true, error: null }));
       try {
         const agentState = await client.getAgentState(threadId);
+        const interrupts = agentState?.tasks?.flatMap((task) => {
+          return task.interrupts.map((interrupt) => {
+            return {
+              id: interrupt.id,
+              value: interrupt.value
+            };
+          });
+        });
         const fetchedMessages = await client.getMessages({ threadId });
         chunkMessageMerger.current.reset();
         chunkMessageMerger.current.initialMessages(fetchedMessages);
         setState((prev) => ({
           ...prev,
           agentState,
+          interrupts,
           todos: agentState?.values?.todos,
           messages: chunkMessageMerger.current.getMessages(),
           isLoading: false
@@ -278,6 +305,7 @@ function useChat(threadId, options = {}) {
     setState((prev) => ({
       ...prev,
       messages: [],
+      interrupts: void 0,
       streamingMessage: null
     }));
   }, []);
@@ -1113,9 +1141,9 @@ var ToolCall = ({ data, eventHandler }) => {
 import { Card as Card4, List, Typography as Typography5, Space as Space5 } from "antd";
 import { createStyles as createStyles3 } from "antd-style";
 import {
+  ArrowRightOutlined,
   CheckCircleOutlined as CheckCircleOutlined2,
-  ClockCircleOutlined,
-  LoadingOutlined as LoadingOutlined2
+  ClockCircleOutlined
 } from "@ant-design/icons";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var { Text: Text4 } = Typography5;
@@ -1157,7 +1185,7 @@ var Todo = ({
       case "completed":
         return /* @__PURE__ */ jsx7(CheckCircleOutlined2, { style: { color: "#52c41a" } });
       case "in_progress":
-        return /* @__PURE__ */ jsx7(LoadingOutlined2, { style: { color: "#1890ff" } });
+        return /* @__PURE__ */ jsx7(ArrowRightOutlined, { style: { fontWeight: "500" } });
       case "pending":
         return /* @__PURE__ */ jsx7(ClockCircleOutlined, { style: { color: "gray" } });
       default:
@@ -1282,7 +1310,7 @@ var WriteTodos = ({
     {
       size: "small",
       bordered: false,
-      defaultActiveKey: [],
+      defaultActiveKey: [toolCallData.id],
       expandIcon,
       children: /* @__PURE__ */ jsx8(
         CollapsePanel2,
@@ -2685,6 +2713,7 @@ MemoizedBubbleList.displayName = "MemoizedBubbleList";
 var Chating = ({
   avatar,
   name,
+  interrupts,
   description,
   default_submit_message,
   tenant_id,
@@ -3096,9 +3125,18 @@ ${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,
+      {
+        content: interrupt.value,
+        eventHandler: handleMDResponseEvent
+      },
+      interrupt.id
+    )) }),
     /* @__PURE__ */ jsx19(
       Sender,
       {
+        disabled: interrupts && interrupts.length > 0,
         allowSpeech: true,
         ref: senderRef,
         value: content,
@@ -3135,7 +3173,7 @@ ${JSON.stringify(tool_call)}
 import {
   CheckCircleOutlined as CheckCircleOutlined3,
   InfoCircleOutlined as InfoCircleOutlined2,
-  LoadingOutlined as LoadingOutlined4
+  LoadingOutlined as LoadingOutlined3
 } from "@ant-design/icons";
 import {
   ThoughtChain
@@ -3148,7 +3186,7 @@ function getStatusIcon2(status) {
     case "error":
       return /* @__PURE__ */ jsx20(InfoCircleOutlined2, {});
     case "pending":
-      return /* @__PURE__ */ jsx20(LoadingOutlined4, {});
+      return /* @__PURE__ */ jsx20(LoadingOutlined3, {});
     default:
       return /* @__PURE__ */ jsx20(CheckCircleOutlined3, {});
   }