@usecrow/ui 0.1.31 → 0.1.33

package/dist/index.cjs

@@ -1277,6 +1277,9 @@ function useCopilotStyles({
   const [welcomeMessage, setWelcomeMessage] = React3.useState(
     styleCache.get(key)?.welcomeMessage ?? void 0
   );
+  const [selectedModel, setSelectedModel] = React3.useState(
+    styleCache.get(key)?.model ?? void 0
+  );
   const hasFetchedRef = React3.useRef(false);
   const fetchStyles = async () => {
     if (skip) return;
@@ -1289,6 +1292,7 @@ function useCopilotStyles({
       setAgentName(config.agentName || "Assistant");
       setPersistAnonymousConversations(config.persistAnonymousConversations ?? true);
       setWelcomeMessage(config.welcomeMessage ?? void 0);
+      setSelectedModel(config.model ?? void 0);
     } catch (err) {
       console.error("[CrowCopilot] Failed to fetch styles:", err);
       setError(err instanceof Error ? err : new Error(String(err)));
@@ -1304,6 +1308,7 @@ function useCopilotStyles({
       setAgentName(cached.agentName || "Assistant");
       setPersistAnonymousConversations(cached.persistAnonymousConversations ?? true);
       setWelcomeMessage(cached.welcomeMessage ?? void 0);
+      setSelectedModel(cached.model ?? void 0);
       setIsLoading(false);
       return;
     }
@@ -1318,6 +1323,7 @@ function useCopilotStyles({
     agentName,
     persistAnonymousConversations,
     welcomeMessage,
+    selectedModel,
     refetch: fetchStyles
   };
 }
@@ -1632,16 +1638,27 @@ function StreamingText({
           ol: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "crow-list-decimal crow-pl-5 crow-my-1.5", children }),
           li: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "crow-mb-0.5 last:crow-mb-0", children }),
           p: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "crow-mb-1.5 last:crow-mb-0", children }),
-          a: ({ href, children }) => /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
-            {
-              href,
-              className: "crow-underline hover:crow-text-blue-300",
-              target: "_blank",
-              rel: "noopener noreferrer",
-              children
-            }
-          ),
+          a: ({ href, children }) => {
+            const isInternal = href?.startsWith("/");
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href,
+                className: "crow-underline hover:crow-text-blue-300",
+                ...!isInternal && { target: "_blank", rel: "noopener noreferrer" },
+                onClick: isInternal ? (e) => {
+                  e.preventDefault();
+                  const a = document.createElement("a");
+                  a.href = href;
+                  a.style.display = "none";
+                  document.body.appendChild(a);
+                  a.click();
+                  document.body.removeChild(a);
+                } : void 0,
+                children
+              }
+            );
+          },
           code: ({ className, children, ...props }) => {
             const isInline = !className;
             return isInline ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1969,16 +1986,27 @@ function MessageBubble({
                   ol: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "crow-list-decimal crow-pl-5 crow-my-1.5", children }),
                   li: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "crow-mb-0.5 last:crow-mb-0", children }),
                   p: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "crow-mb-1.5 last:crow-mb-0", children }),
-                  a: ({ href, children }) => /* @__PURE__ */ jsxRuntime.jsx(
-                    "a",
-                    {
-                      href,
-                      className: "crow-underline hover:crow-text-blue-300",
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      children
-                    }
-                  )
+                  a: ({ href, children }) => {
+                    const isInternal = href?.startsWith("/");
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      "a",
+                      {
+                        href,
+                        className: "crow-underline hover:crow-text-blue-300",
+                        ...!isInternal && { target: "_blank", rel: "noopener noreferrer" },
+                        onClick: isInternal ? (e) => {
+                          e.preventDefault();
+                          const a = document.createElement("a");
+                          a.href = href;
+                          a.style.display = "none";
+                          document.body.appendChild(a);
+                          a.click();
+                          document.body.removeChild(a);
+                        } : void 0,
+                        children
+                      }
+                    );
+                  }
                 },
                 children: message.content
               }
@@ -3366,7 +3394,8 @@ function CrowCopilot({
     isLoading: isLoadingStyles,
     agentName: agentNameFromAPI,
     persistAnonymousConversations,
-    welcomeMessage: welcomeMessageFromAPI
+    welcomeMessage: welcomeMessageFromAPI,
+    selectedModel
   } = useCopilotStyles({
     productId,
     apiUrl,
@@ -3378,6 +3407,7 @@ function CrowCopilot({
   const messagesContainerRef = React3.useRef(null);
   const tabsScrollRef = React3.useRef(null);
   const executeClientToolRef = React3.useRef(null);
+  const submitToolResultRef = React3.useRef(null);
   const [showConversationList, setShowConversationList] = React3.useState(false);
   const [isVerifiedUser, setIsVerifiedUser] = React3.useState(false);
   const [localTabs, setLocalTabs] = React3.useState([
@@ -3396,24 +3426,71 @@ function CrowCopilot({
     apiUrl,
     persistAnonymousConversations,
     welcomeMessage,
+    selectedModel,
     onVerificationStatus: (isVerified) => {
       setIsVerifiedUser(isVerified);
     },
     onConversationId: () => {
     },
+    onWorkflowEvent: (event) => {
+      switch (event.type) {
+        case "started":
+          if (event.name && event.todos) {
+            startWorkflow(event.name, event.todos);
+          }
+          break;
+        case "todo_updated":
+          if (event.todoId && event.todoStatus) {
+            updateTodo(event.todoId, event.todoStatus);
+          }
+          break;
+        case "ended":
+          endWorkflow(2e3);
+          break;
+        case "complete_prompt":
+          markComplete();
+          break;
+      }
+    },
     onToolResult,
-    onToolCall: (event) => {
-      if (event.type === "client_call" && event.toolName) {
-        console.log(
-          "[Crow Copilot] Executing client tool:",
-          event.toolName,
-          event.arguments
-        );
-        const result = executeClientToolRef.current?.(
-          event.toolName,
-          event.arguments || {}
-        );
-        result?.then((r) => console.log("[Crow Copilot] Tool result:", r)).catch((e) => console.error("[Crow Copilot] Tool error:", e));
+    onToolCall: async (event) => {
+      if (event.type === "client_call" && event.toolName && event.toolCallId) {
+        try {
+          const result = await executeClientToolRef.current?.(
+            event.toolName,
+            event.arguments || {}
+          );
+          const resultObj = result;
+          const dataObj = resultObj?.data;
+          const wasUserCancelled = dataObj?.declined === true || typeof resultObj?.error === "string" && resultObj.error.includes("cancelled by user") || typeof resultObj?.error === "string" && resultObj.error.includes("declined");
+          if (wasUserCancelled) {
+            console.log("[Crow Copilot] Tool was cancelled by user");
+            if (submitToolResultRef.current) {
+              await submitToolResultRef.current(
+                event.toolCallId,
+                event.toolName,
+                { success: false, cancelled: true, error: "Action was cancelled by the user." }
+              );
+            }
+            return;
+          }
+          if (result && submitToolResultRef.current) {
+            await submitToolResultRef.current(
+              event.toolCallId,
+              event.toolName,
+              result
+            );
+          }
+        } catch (e) {
+          console.error("[Crow Copilot] Tool error:", e);
+          if (submitToolResultRef.current) {
+            await submitToolResultRef.current(
+              event.toolCallId,
+              event.toolName,
+              { success: false, error: String(e) }
+            );
+          }
+        }
       }
     },
     onRestoredConversation: () => {
@@ -3435,6 +3512,30 @@ function CrowCopilot({
       injectCopilotBodyStyles();
     }
   }, [variant]);
+  const {
+    activeWorkflow,
+    startWorkflow,
+    updateTodo,
+    markComplete,
+    endWorkflow,
+    exitWorkflow
+  } = useWorkflow({
+    productId,
+    apiUrl,
+    conversationId: chat.conversationId,
+    selectedModel: chat.selectedModel,
+    onMessage: (content) => {
+      chat.loadMessages([
+        ...chat.messages,
+        {
+          id: `bot-${Date.now()}`,
+          content,
+          isBot: true,
+          timestamp: /* @__PURE__ */ new Date()
+        }
+      ]);
+    }
+  });
   const { executeClientTool } = useCrowAPI({
     onIdentified: async () => {
       setIsVerifiedUser(true);
@@ -3446,6 +3547,7 @@ function CrowCopilot({
     }
   });
   executeClientToolRef.current = executeClientTool;
+  submitToolResultRef.current = chat.submitToolResult;
   const handleBrowserConfirmation = React3.useCallback(
     (instruction) => {
       return new Promise((resolve) => {
@@ -3462,6 +3564,9 @@ function CrowCopilot({
     },
     []
   );
+  const handleExitWorkflow = async () => {
+    await exitWorkflow();
+  };
   React3.useEffect(() => {
     window.__crow_browser_callbacks = {
       onConfirmation: handleBrowserConfirmation,
@@ -3787,6 +3892,13 @@ function CrowCopilot({
               ),
               showConversationList && !isVerifiedUser && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-mb-3 crow-rounded-xl crow-bg-gray-50 crow-border crow-border-gray-200 crow-p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "crow-text-sm crow-text-gray-600", children: "Sign in to view conversation history." }) })
             ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: activeWorkflow && /* @__PURE__ */ jsxRuntime.jsx(
+              WorkflowPanel,
+              {
+                workflow: activeWorkflow,
+                onExit: handleExitWorkflow
+              }
+            ) }),
             /* @__PURE__ */ jsxRuntime.jsxs(MessagesContainer, { ref: messagesContainerRef, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 MessageList,