@usecrow/ui 0.1.75 → 0.1.77

package/dist/index.js

@@ -48,6 +48,8 @@ function useChat({
   subdomain,
   toolConsentSettings,
   language,
+  agentMode,
+  onOnboardingComplete,
   onVerificationStatus,
   onConversationId,
   onWorkflowEvent,
@@ -140,7 +142,8 @@ function useChat({
             user_local_time: (/* @__PURE__ */ new Date()).toLocaleString("en-US", { year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "numeric", hour12: true }),
             page_path: typeof window !== "undefined" ? window.location.pathname : void 0,
             context: typeof window !== "undefined" ? window.__crow_page_context : void 0,
-            ...language && language !== "en" ? { language } : {}
+            ...language && language !== "en" ? { language } : {},
+            ...agentMode ? { agent_mode: agentMode } : {}
           }),
           signal: abortControllerRef.current.signal
         });
@@ -468,6 +471,9 @@ function useChat({
                         setSuggestedActions(parsed.actions);
                       }
                       break;
+                    case "onboarding_complete":
+                      onOnboardingComplete?.(parsed.summary || "");
+                      break;
                   }
                 } catch (e) {
                   console.error("[Crow] Parse error:", e);
@@ -500,7 +506,7 @@ function useChat({
         abortControllerRef.current = null;
       }
     },
-    [apiUrl, productId, conversationId, selectedModel, subdomain, persistAnonymousConversations, onVerificationStatus, onConversationId, onWorkflowEvent, onToolCall, onToolResult]
+    [apiUrl, productId, conversationId, selectedModel, subdomain, persistAnonymousConversations, agentMode, onOnboardingComplete, onVerificationStatus, onConversationId, onWorkflowEvent, onToolCall, onToolResult]
   );
   const sendMessage = useCallback(
     (content) => {
@@ -1670,6 +1676,18 @@ function useWidgetStyles({
   const [availableModels, setAvailableModels] = useState(
     styleCache.get(key)?.availableModels || []
   );
+  const [onboardingEnabled, setOnboardingEnabled] = useState(
+    styleCache.get(key)?.onboardingEnabled || false
+  );
+  const [onboardingAgentName, setOnboardingAgentName] = useState(
+    styleCache.get(key)?.onboardingAgentName ?? void 0
+  );
+  const [onboardingWelcomeMessage, setOnboardingWelcomeMessage] = useState(
+    styleCache.get(key)?.onboardingWelcomeMessage ?? void 0
+  );
+  const [onboardingIntroSequence, setOnboardingIntroSequence] = useState(
+    styleCache.get(key)?.onboardingIntroSequence ?? void 0
+  );
   const hasFetchedRef = useRef(false);
   const fetchStyles = async () => {
     if (skip) return;
@@ -1691,6 +1709,10 @@ function useWidgetStyles({
       setToolConsentSettings(config.toolConsentSettings || {});
       setModelSelectionEnabled(config.modelSelectionEnabled || false);
       setAvailableModels(config.availableModels || []);
+      setOnboardingEnabled(config.onboardingEnabled || false);
+      setOnboardingAgentName(config.onboardingAgentName ?? void 0);
+      setOnboardingWelcomeMessage(config.onboardingWelcomeMessage ?? void 0);
+      setOnboardingIntroSequence(config.onboardingIntroSequence ?? void 0);
     } catch (err) {
       console.error("[CrowWidget] Failed to fetch styles:", err);
       setError(err instanceof Error ? err : new Error(String(err)));
@@ -1734,6 +1756,10 @@ function useWidgetStyles({
     toolConsentSettings,
     modelSelectionEnabled,
     availableModels,
+    onboardingEnabled,
+    onboardingAgentName,
+    onboardingWelcomeMessage,
+    onboardingIntroSequence,
     refetch: fetchStyles
   };
 }
@@ -1782,6 +1808,18 @@ function useCopilotStyles({
   const [initialSuggestions, setInitialSuggestions] = useState(
     styleCache.get(key)?.initialSuggestions || []
   );
+  const [onboardingEnabled, setOnboardingEnabled] = useState(
+    styleCache.get(key)?.onboardingEnabled || false
+  );
+  const [onboardingAgentName, setOnboardingAgentName] = useState(
+    styleCache.get(key)?.onboardingAgentName ?? void 0
+  );
+  const [onboardingWelcomeMessage, setOnboardingWelcomeMessage] = useState(
+    styleCache.get(key)?.onboardingWelcomeMessage ?? void 0
+  );
+  const [onboardingIntroSequence, setOnboardingIntroSequence] = useState(
+    styleCache.get(key)?.onboardingIntroSequence ?? void 0
+  );
   const hasFetchedRef = useRef(false);
   const fetchStyles = async () => {
     if (skip) return;
@@ -1802,6 +1840,10 @@ function useCopilotStyles({
       setModelSelectionEnabled(config.modelSelectionEnabled || false);
       setAvailableModels(config.availableModels || []);
       setInitialSuggestions(config.initialSuggestions || []);
+      setOnboardingEnabled(config.onboardingEnabled || false);
+      setOnboardingAgentName(config.onboardingAgentName ?? void 0);
+      setOnboardingWelcomeMessage(config.onboardingWelcomeMessage ?? void 0);
+      setOnboardingIntroSequence(config.onboardingIntroSequence ?? void 0);
     } catch (err) {
       console.error("[CrowCopilot] Failed to fetch styles:", err);
       setError(err instanceof Error ? err : new Error(String(err)));
@@ -1824,6 +1866,10 @@ function useCopilotStyles({
       setModelSelectionEnabled(cached.modelSelectionEnabled || false);
       setAvailableModels(cached.availableModels || []);
       setInitialSuggestions(cached.initialSuggestions || []);
+      setOnboardingEnabled(cached.onboardingEnabled || false);
+      setOnboardingAgentName(cached.onboardingAgentName ?? void 0);
+      setOnboardingWelcomeMessage(cached.onboardingWelcomeMessage ?? void 0);
+      setOnboardingIntroSequence(cached.onboardingIntroSequence ?? void 0);
       setIsLoading(false);
       return;
     }
@@ -1846,6 +1892,10 @@ function useCopilotStyles({
     modelSelectionEnabled,
     availableModels,
     initialSuggestions,
+    onboardingEnabled,
+    onboardingAgentName,
+    onboardingWelcomeMessage,
+    onboardingIntroSequence,
     refetch: fetchStyles
   };
 }
@@ -4504,6 +4554,84 @@ function injectStyles(target = document) {
     target.prepend(style);
   }
 }
+function OnboardingIntroInline({
+  lines,
+  primaryColor,
+  onComplete
+}) {
+  const [lineIndex, setLineIndex] = useState(0);
+  const [charIndex, setCharIndex] = useState(0);
+  const [done, setDone] = useState(false);
+  useEffect(() => {
+    if (lineIndex >= lines.length) {
+      setDone(true);
+      return;
+    }
+    const currentLine = lines[lineIndex];
+    if (charIndex < currentLine.length) {
+      const t = setTimeout(() => setCharIndex((c) => c + 1), 35);
+      return () => clearTimeout(t);
+    } else {
+      const t = setTimeout(() => {
+        setLineIndex((l) => l + 1);
+        setCharIndex(0);
+      }, 500);
+      return () => clearTimeout(t);
+    }
+  }, [lineIndex, charIndex, lines]);
+  const displayedLines = lines.slice(0, lineIndex + 1).map(
+    (line, i) => i < lineIndex ? line : line.slice(0, charIndex)
+  );
+  return /* @__PURE__ */ jsxs("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    padding: "24px 16px",
+    textAlign: "center"
+  }, children: [
+    /* @__PURE__ */ jsx("div", { style: { minHeight: "4rem", marginBottom: "1.5rem" }, children: displayedLines.map((text, i) => /* @__PURE__ */ jsxs("p", { style: {
+      fontSize: i === 0 ? 18 : 14,
+      fontWeight: i === 0 ? 600 : 400,
+      color: i === 0 ? "var(--crow-text, #111827)" : "var(--crow-text-secondary, #6b7280)",
+      lineHeight: 1.4,
+      margin: "0 0 6px 0"
+    }, children: [
+      text,
+      i === lineIndex && !done && /* @__PURE__ */ jsx("span", { style: {
+        display: "inline-block",
+        width: 2,
+        height: i === 0 ? 18 : 14,
+        backgroundColor: "var(--crow-text, #111827)",
+        marginLeft: 2,
+        verticalAlign: "middle",
+        animation: "crow-blink 1s step-end infinite"
+      } })
+    ] }, i)) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onComplete,
+        style: {
+          padding: "8px 24px",
+          borderRadius: 8,
+          backgroundColor: primaryColor,
+          color: "#fff",
+          fontSize: 13,
+          fontWeight: 500,
+          border: "none",
+          cursor: "pointer",
+          opacity: done ? 1 : 0,
+          pointerEvents: done ? "auto" : "none",
+          transition: "opacity 0.5s ease"
+        },
+        children: "Get Started \u2192"
+      }
+    ),
+    /* @__PURE__ */ jsx("style", { children: `@keyframes crow-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }` })
+  ] });
+}
 function CrowWidget({
   productId,
   apiUrl = "",
@@ -4524,7 +4652,9 @@ function CrowWidget({
   toolRenderers,
   language,
   customCss,
-  contextLabel: contextLabelProp
+  contextLabel: contextLabelProp,
+  forceOnboarding = false,
+  fullscreenTopOffset: _fullscreenTopOffset = 0
 }) {
   const effectiveGetIdentityToken = getIdentityToken || window.__crow_identity_token_fetcher;
   const effectiveOnToolResult = onToolResult || window.__crow_on_tool_result;
@@ -4543,7 +4673,11 @@ function CrowWidget({
     initialSuggestions,
     toolConsentSettings,
     modelSelectionEnabled,
-    availableModels: availableModelsFromAPI
+    availableModels: availableModelsFromAPI,
+    onboardingEnabled,
+    onboardingAgentName,
+    onboardingWelcomeMessage,
+    onboardingIntroSequence
   } = useWidgetStyles({
     productId,
     apiUrl,
@@ -4580,6 +4714,25 @@ function CrowWidget({
   const welcomeMessage = greetingOverride ?? welcomeMessageProp ?? welcomeMessageFromAPI;
   const selectedModel = selectedModelFromAPI;
   const showThinking = showThinkingProp ?? showThinkingFromAPI;
+  const [isOnboarding, setIsOnboarding] = useState(false);
+  const [onboardingChecked, setOnboardingChecked] = useState(false);
+  const [onboardingPhase, setOnboardingPhase] = useState("intro");
+  useEffect(() => {
+    if (!isLoadingStyles && !onboardingChecked && (forceOnboarding || onboardingEnabled)) {
+      setIsOnboarding(true);
+      setOnboardingChecked(true);
+    }
+  }, [forceOnboarding, isLoadingStyles, onboardingEnabled, onboardingChecked]);
+  useEffect(() => {
+    if (isOnboarding) {
+      setIsCollapsed(false);
+    }
+  }, [isOnboarding]);
+  useEffect(() => {
+    if (isOnboarding && !isLoadingStyles && onboardingIntroSequence !== void 0 && onboardingIntroSequence.length === 0) {
+      setOnboardingPhase("chat");
+    }
+  }, [isOnboarding, isLoadingStyles, onboardingIntroSequence]);
   const [autoTools, setAutoTools] = useState({});
   const cssVars = stylesToCssVars(styles);
   const transform = useWidgetTransform({
@@ -4629,11 +4782,17 @@ function CrowWidget({
   const conversations = useConversations({ productId, apiUrl });
   const [shouldRestoreHistory, setShouldRestoreHistory] = useState(false);
   const hasRestoredHistoryRef = useRef(false);
+  const effectiveWelcomeMessage = isOnboarding ? onboardingWelcomeMessage || `Hi! I'm ${onboardingAgentName || agentName}. Let me help you get started.` : welcomeMessage;
   const chat = useChat({
     productId,
     apiUrl,
     persistAnonymousConversations,
-    welcomeMessage,
+    welcomeMessage: effectiveWelcomeMessage,
+    agentMode: isOnboarding ? "onboarding" : void 0,
+    onOnboardingComplete: (summary) => {
+      console.log("[Crow] Onboarding complete:", summary);
+      setIsOnboarding(false);
+    },
     selectedModel,
     subdomain,
     toolConsentSettings,
@@ -4721,10 +4880,10 @@ function CrowWidget({
     wasLoadingRef.current = chat.isLoading;
   }, [chat.isLoading, chat.messages]);
   useEffect(() => {
-    if (initialSuggestions.length > 0 && chat.suggestedActions.length === 0) {
+    if (!isOnboarding && initialSuggestions.length > 0 && chat.suggestedActions.length === 0) {
       chat.setSuggestedActions(initialSuggestions);
     }
-  }, [initialSuggestions]);
+  }, [initialSuggestions, isOnboarding]);
   useEffect(() => {
     if (shouldRestoreHistory && chat.conversationId && !hasRestoredHistoryRef.current) {
       hasRestoredHistoryRef.current = true;
@@ -4759,6 +4918,33 @@ function CrowWidget({
   const { executeClientTool } = useCrowAPI({
     onIdentified: async () => {
       setIsVerifiedUser(true);
+      if (forceOnboarding) {
+        setIsOnboarding(true);
+        setOnboardingChecked(true);
+      } else if (onboardingEnabled && !onboardingChecked) {
+        try {
+          const identityToken = window.__crow_identity_token;
+          if (identityToken) {
+            const res = await fetch(`${apiUrl}/api/chat/resolve-agent`, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                product_id: productId,
+                identity_token: identityToken
+              })
+            });
+            if (res.ok) {
+              const data = await res.json();
+              if (data.agent === "onboarding") {
+                setIsOnboarding(true);
+              }
+            }
+          }
+        } catch (e) {
+          console.error("[Crow] resolve-agent failed:", e);
+        }
+        setOnboardingChecked(true);
+      }
       const convs = await conversations.loadConversations();
       if (convs.length > 0) {
         const mostRecent = convs[0];
@@ -4776,6 +4962,17 @@ function CrowWidget({
   });
   executeClientToolRef.current = executeClientTool;
   submitToolResultRef.current = chat.submitToolResult;
+  const prevOnboardingRef = useRef(isOnboarding);
+  useEffect(() => {
+    if (isOnboarding && !prevOnboardingRef.current) {
+      chat.setSuggestedActions([]);
+    }
+    if (prevOnboardingRef.current && !isOnboarding) {
+      chat.resetMessages();
+      endWorkflow(0);
+    }
+    prevOnboardingRef.current = isOnboarding;
+  }, [isOnboarding]);
   useEffect(() => {
     if (!isLoadingStyles) {
       onReady?.();
@@ -5060,7 +5257,59 @@ function CrowWidget({
     setIsCollapsed(!isCollapsed);
   };
   const renderWidgetContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    isOnboarding ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "10px 16px",
+          borderBottom: "1px solid var(--crow-border, #e5e7eb)",
+          flexShrink: 0,
+          cursor: variant === "floating" ? "grab" : void 0
+        },
+        onPointerDown: variant === "floating" ? transform.onDragPointerDown : void 0,
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--crow-text, #111827)" }, children: onboardingAgentName || agentName }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => {
+                  setIsOnboarding(false);
+                  chat.resetMessages();
+                },
+                style: {
+                  fontSize: 12,
+                  color: "#9ca3af",
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                  padding: "4px 8px"
+                },
+                children: "Skip"
+              }
+            ),
+            variant === "floating" && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setIsCollapsed(true),
+                style: {
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                  padding: "4px",
+                  color: "#9ca3af",
+                  display: "flex"
+                },
+                children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ jsx(
       WidgetHeader,
       {
         isVerifiedUser,
@@ -5076,82 +5325,92 @@ function CrowWidget({
         contextLabel
       }
     ),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: showConversationList && isVerifiedUser && /* @__PURE__ */ jsx(
-      ConversationList,
-      {
-        conversations: conversations.conversations,
-        currentConversationId: chat.conversationId,
-        onSelect: handleSelectConversation,
-        onClose: handleCloseConversationList
-      }
-    ) }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: activeWorkflow && /* @__PURE__ */ jsx(
-      WorkflowPanel,
+    isOnboarding && onboardingPhase === "intro" && /* @__PURE__ */ jsx(
+      OnboardingIntroInline,
       {
-        workflow: activeWorkflow,
-        onExit: handleExitWorkflow
+        lines: onboardingIntroSequence || [],
+        primaryColor: styles.colors.primary,
+        onComplete: () => setOnboardingPhase("chat")
       }
-    ) }),
-    /* @__PURE__ */ jsx(AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory || pendingConfirmation) && /* @__PURE__ */ jsxs(MessagesContainer, { ref: messagesContainerRef, children: [
-      /* @__PURE__ */ jsx(
-        MessageList,
+    ),
+    !(isOnboarding && onboardingPhase === "intro") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(AnimatePresence, { children: showConversationList && isVerifiedUser && /* @__PURE__ */ jsx(
+        ConversationList,
         {
-          messages: chat.messages,
-          activeToolCalls: chat.activeToolCalls,
-          isLoadingHistory: conversations.isLoadingHistory,
-          isGenerating: chat.isLoading,
-          toolRenderers: effectiveToolRenderers,
-          onToolConsent: handleToolConsent
+          conversations: conversations.conversations,
+          currentConversationId: chat.conversationId,
+          onSelect: handleSelectConversation,
+          onClose: handleCloseConversationList
         }
-      ),
-      pendingConfirmation && /* @__PURE__ */ jsx("div", { className: "crow-px-4 crow-py-2", children: /* @__PURE__ */ jsx(
-        BrowserUseConfirmation,
+      ) }),
+      /* @__PURE__ */ jsx(AnimatePresence, { children: activeWorkflow && !isOnboarding && /* @__PURE__ */ jsx(
+        WorkflowPanel,
         {
-          instruction: pendingConfirmation.instruction,
-          onAllow: () => {
-            setIsBrowserUseActive(true);
-            pendingConfirmation.resolve(true);
-            setPendingConfirmation(null);
-          },
-          onDeny: () => {
-            pendingConfirmation.resolve(false);
-            setPendingConfirmation(null);
-          }
+          workflow: activeWorkflow,
+          onExit: handleExitWorkflow
         }
-      ) })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "crow-mt-auto crow-w-full", children: [
-      toolStatus && /* @__PURE__ */ jsxs("div", { className: "crow-mx-3 crow-mb-1 crow-flex crow-items-center crow-gap-2 crow-rounded-lg crow-border crow-border-[var(--crow-border,#e5e7eb)] crow-bg-[var(--crow-bg-secondary,#f3f4f6)] crow-px-3 crow-py-2 crow-text-sm", children: [
-        /* @__PURE__ */ jsxs("svg", { className: "crow-animate-spin crow-h-4 crow-w-4 crow-shrink-0 crow-text-[var(--crow-primary,#7c3aed)]", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-          /* @__PURE__ */ jsx("circle", { className: "crow-opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-          /* @__PURE__ */ jsx("path", { className: "crow-opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+      ) }),
+      /* @__PURE__ */ jsx(AnimatePresence, { children: (chat.messages.length > 0 || conversations.isLoadingHistory || pendingConfirmation) && /* @__PURE__ */ jsxs(MessagesContainer, { ref: messagesContainerRef, children: [
+        /* @__PURE__ */ jsx(
+          MessageList,
+          {
+            messages: chat.messages,
+            activeToolCalls: chat.activeToolCalls,
+            isLoadingHistory: conversations.isLoadingHistory,
+            isGenerating: chat.isLoading,
+            toolRenderers: effectiveToolRenderers,
+            onToolConsent: handleToolConsent
+          }
+        ),
+        pendingConfirmation && /* @__PURE__ */ jsx("div", { className: "crow-px-4 crow-py-2", children: /* @__PURE__ */ jsx(
+          BrowserUseConfirmation,
+          {
+            instruction: pendingConfirmation.instruction,
+            onAllow: () => {
+              setIsBrowserUseActive(true);
+              pendingConfirmation.resolve(true);
+              setPendingConfirmation(null);
+            },
+            onDeny: () => {
+              pendingConfirmation.resolve(false);
+              setPendingConfirmation(null);
+            }
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "crow-mt-auto crow-w-full", children: [
+        toolStatus && /* @__PURE__ */ jsxs("div", { className: "crow-mx-3 crow-mb-1 crow-flex crow-items-center crow-gap-2 crow-rounded-lg crow-border crow-border-[var(--crow-border,#e5e7eb)] crow-bg-[var(--crow-bg-secondary,#f3f4f6)] crow-px-3 crow-py-2 crow-text-sm", children: [
+          /* @__PURE__ */ jsxs("svg", { className: "crow-animate-spin crow-h-4 crow-w-4 crow-shrink-0 crow-text-[var(--crow-primary,#7c3aed)]", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ jsx("circle", { className: "crow-opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+            /* @__PURE__ */ jsx("path", { className: "crow-opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "crow-font-medium crow-text-[var(--crow-text,#111827)]", children: toolStatus })
         ] }),
-        /* @__PURE__ */ jsx("span", { className: "crow-font-medium crow-text-[var(--crow-text,#111827)]", children: toolStatus })
-      ] }),
-      (chat.suggestedActions.length > 0 || !chat.isLoading && defaultSuggestedActionsRef.current.length > 0) && /* @__PURE__ */ jsx(
-        SuggestedActions,
-        {
-          actions: chat.suggestedActions.length > 0 ? chat.suggestedActions : defaultSuggestedActionsRef.current,
-          onActionClick: (action) => handleSend(action.message)
-        }
-      ),
-      /* @__PURE__ */ jsx(PoweredByBadge, { apiUrl }),
-      /* @__PURE__ */ jsx(
-        PromptInputBox,
-        {
-          onSend: handleSend,
-          onStop: handleStop,
-          placeholder: "Type your message...",
-          isLoading: chat.isLoading,
-          showStopButton: isBrowserUseActive || !!askUserResolver || !!pendingConfirmation,
-          highlighted: !!askUserResolver,
-          className: "crow-backdrop-blur-md",
-          backendUrl: apiUrl,
-          selectedModel: chat.selectedModel || selectedModelFromAPI,
-          onModelChange: chat.setSelectedModel,
-          availableModels: modelSelectionEnabled ? availableModelsFromAPI : []
-        }
-      )
+        (chat.suggestedActions.length > 0 || !isOnboarding && !chat.isLoading && defaultSuggestedActionsRef.current.length > 0) && /* @__PURE__ */ jsx(
+          SuggestedActions,
+          {
+            actions: chat.suggestedActions.length > 0 ? chat.suggestedActions : defaultSuggestedActionsRef.current,
+            onActionClick: (action) => handleSend(action.message)
+          }
+        ),
+        /* @__PURE__ */ jsx(PoweredByBadge, { apiUrl }),
+        /* @__PURE__ */ jsx(
+          PromptInputBox,
+          {
+            onSend: handleSend,
+            onStop: handleStop,
+            placeholder: "Type your message...",
+            isLoading: chat.isLoading,
+            showStopButton: isBrowserUseActive || !!askUserResolver || !!pendingConfirmation,
+            highlighted: !!askUserResolver,
+            className: "crow-backdrop-blur-md",
+            backendUrl: apiUrl,
+            selectedModel: chat.selectedModel || selectedModelFromAPI,
+            onModelChange: chat.setSelectedModel,
+            availableModels: modelSelectionEnabled ? availableModelsFromAPI : []
+          }
+        )
+      ] })
     ] })
   ] });
   const combinedStyles = useMemo(
@@ -5165,7 +5424,7 @@ ${customCss}` : WIDGET_CSS,
     WidgetStyleProvider,
     {
       styles,
-      agentName,
+      agentName: isOnboarding ? onboardingAgentName || agentName : agentName,
       isLoading: isLoadingStyles,
       variant,
       showThinking,
@@ -5462,6 +5721,78 @@ function CopilotContainer({
     )
   ] });
 }
+function OnboardingIntroInline2({
+  lines,
+  primaryColor,
+  textColor,
+  textMutedColor,
+  onComplete
+}) {
+  const [lineIndex, setLineIndex] = useState(0);
+  const [charIndex, setCharIndex] = useState(0);
+  const [done, setDone] = useState(false);
+  useEffect(() => {
+    if (lineIndex >= lines.length) {
+      setDone(true);
+      return;
+    }
+    const currentLine = lines[lineIndex];
+    if (charIndex < currentLine.length) {
+      const t = setTimeout(() => setCharIndex((c) => c + 1), 35);
+      return () => clearTimeout(t);
+    } else {
+      const t = setTimeout(() => {
+        setLineIndex((l) => l + 1);
+        setCharIndex(0);
+      }, 500);
+      return () => clearTimeout(t);
+    }
+  }, [lineIndex, charIndex, lines]);
+  const displayedLines = lines.slice(0, lineIndex + 1).map(
+    (line, i) => i < lineIndex ? line : line.slice(0, charIndex)
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { style: { minHeight: "4rem", marginBottom: "1.5rem" }, children: displayedLines.map((text, i) => /* @__PURE__ */ jsxs("p", { style: {
+      fontSize: i === 0 ? 18 : 14,
+      fontWeight: i === 0 ? 600 : 400,
+      color: i === 0 ? textColor : textMutedColor,
+      lineHeight: 1.4,
+      margin: "0 0 6px 0"
+    }, children: [
+      text,
+      i === lineIndex && !done && /* @__PURE__ */ jsx("span", { style: {
+        display: "inline-block",
+        width: 2,
+        height: i === 0 ? 18 : 14,
+        backgroundColor: textColor,
+        marginLeft: 2,
+        verticalAlign: "middle",
+        animation: "crow-blink 1s step-end infinite"
+      } })
+    ] }, i)) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onComplete,
+        style: {
+          padding: "8px 24px",
+          borderRadius: 8,
+          backgroundColor: primaryColor,
+          color: "#fff",
+          fontSize: 13,
+          fontWeight: 500,
+          border: "none",
+          cursor: "pointer",
+          opacity: done ? 1 : 0,
+          pointerEvents: done ? "auto" : "none",
+          transition: "opacity 0.5s ease"
+        },
+        children: "Get Started \u2192"
+      }
+    ),
+    /* @__PURE__ */ jsx("style", { children: `@keyframes crow-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }` })
+  ] });
+}
 function CrowCopilot({
   productId,
   apiUrl = "",
@@ -5485,7 +5816,10 @@ function CrowCopilot({
   getIdentityToken,
   context,
   language,
-  contextLabel: contextLabelProp
+  contextLabel: contextLabelProp,
+  forceOnboarding = false,
+  fullscreenTopOffset: _fullscreenTopOffset = 0,
+  mode: _mode
 }) {
   const effectiveGetIdentityToken = getIdentityToken || window.__crow_identity_token_fetcher;
   const effectiveOnToolResult = onToolResult || window.__crow_on_tool_result;
@@ -5503,7 +5837,11 @@ function CrowCopilot({
     toolConsentSettings,
     modelSelectionEnabled,
     availableModels: availableModelsFromAPI,
-    initialSuggestions
+    initialSuggestions,
+    onboardingEnabled,
+    onboardingAgentName,
+    onboardingWelcomeMessage,
+    onboardingIntroSequence
   } = useCopilotStyles({
     productId,
     apiUrl,
@@ -5512,6 +5850,20 @@ function CrowCopilot({
     language
   });
   const agentName = agentNameProp ?? agentNameFromAPI ?? title;
+  const [isOnboarding, setIsOnboarding] = useState(false);
+  const [onboardingChecked, setOnboardingChecked] = useState(false);
+  const [onboardingPhase, setOnboardingPhase] = useState("intro");
+  useEffect(() => {
+    if (!isLoadingStyles && !onboardingChecked && (forceOnboarding || onboardingEnabled)) {
+      setIsOnboarding(true);
+      setOnboardingChecked(true);
+    }
+  }, [forceOnboarding, isLoadingStyles, onboardingEnabled, onboardingChecked]);
+  useEffect(() => {
+    if (isOnboarding && !isLoadingStyles && onboardingIntroSequence !== void 0 && onboardingIntroSequence.length === 0) {
+      setOnboardingPhase("chat");
+    }
+  }, [isOnboarding, isLoadingStyles, onboardingIntroSequence]);
   const [toolStatus, setToolStatus] = useState(
     () => window.__crow_tool_status ?? ""
   );
@@ -5692,10 +6044,10 @@ function CrowCopilot({
     };
   }, []);
   useEffect(() => {
-    if (initialSuggestions.length > 0 && chat.suggestedActions.length === 0) {
+    if (!isOnboarding && initialSuggestions.length > 0 && chat.suggestedActions.length === 0) {
       chat.setSuggestedActions(initialSuggestions);
     }
-  }, [initialSuggestions]);
+  }, [initialSuggestions, isOnboarding]);
   const messagesContainerRef = useRef(null);
   const tabsScrollRef = useRef(null);
   const executeClientToolRef = useRef(null);
@@ -5725,11 +6077,17 @@ function CrowCopilot({
       pendingRestoreConvId.current = "";
     }
   }
+  const effectiveWelcomeMessage = isOnboarding ? onboardingWelcomeMessage || `Hi! I'm ${onboardingAgentName || agentName}. Let me help you get started.` : welcomeMessage;
   const chat = useChat({
     productId,
     apiUrl,
     persistAnonymousConversations,
-    welcomeMessage,
+    welcomeMessage: effectiveWelcomeMessage,
+    agentMode: isOnboarding ? "onboarding" : void 0,
+    onOnboardingComplete: (summary) => {
+      console.log("[Crow] Onboarding complete:", summary);
+      setIsOnboarding(false);
+    },
     selectedModel,
     subdomain,
     toolConsentSettings,
@@ -5873,6 +6231,33 @@ function CrowCopilot({
   const { executeClientTool } = useCrowAPI({
     onIdentified: async () => {
       setIsVerifiedUser(true);
+      if (forceOnboarding) {
+        setIsOnboarding(true);
+        setOnboardingChecked(true);
+      } else if (onboardingEnabled && !onboardingChecked) {
+        try {
+          const identityToken = window.__crow_identity_token;
+          if (identityToken) {
+            const res = await fetch(`${apiUrl}/api/chat/resolve-agent`, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                product_id: productId,
+                identity_token: identityToken
+              })
+            });
+            if (res.ok) {
+              const data = await res.json();
+              if (data.agent === "onboarding") {
+                setIsOnboarding(true);
+              }
+            }
+          }
+        } catch (e) {
+          console.error("[Crow] resolve-agent failed:", e);
+        }
+        setOnboardingChecked(true);
+      }
       await conversations.loadConversations();
       const savedId = pendingRestoreConvId.current;
       if (savedId && !hasRestoredActiveConvRef.current) {
@@ -5895,6 +6280,17 @@ function CrowCopilot({
   });
   executeClientToolRef.current = executeClientTool;
   submitToolResultRef.current = chat.submitToolResult;
+  const prevOnboardingRef = useRef(isOnboarding);
+  useEffect(() => {
+    if (isOnboarding && !prevOnboardingRef.current) {
+      chat.setSuggestedActions([]);
+    }
+    if (prevOnboardingRef.current && !isOnboarding) {
+      chat.resetMessages();
+      endWorkflow(0);
+    }
+    prevOnboardingRef.current = isOnboarding;
+  }, [isOnboarding]);
   const handleBrowserConfirmation = useCallback(
     (instruction) => {
       return new Promise((resolve) => {
@@ -6235,312 +6631,347 @@ function CrowCopilot({
             "--crow-bg-active": styles.colors.text + "18"
           },
           children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "crow-flex crow-items-stretch crow-border-b crow-min-h-[40px]",
-                style: { borderColor: styles.colors.border },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      ref: tabsScrollRef,
-                      className: "crow-flex crow-items-stretch crow-flex-1 crow-min-w-0 crow-overflow-x-auto",
-                      style: {
-                        scrollbarWidth: "none",
-                        msOverflowStyle: "none"
-                      },
-                      onScroll: handleTabsScroll,
-                      children: tabs.map((tab, idx) => {
-                        const isActive = activeTabId === tab.id;
-                        const isHovered = hoveredTabId === tab.id;
-                        const isCloseable = tab.type !== "new" && (tab.type !== "local" || localTabs.length > 1);
-                        return /* @__PURE__ */ jsxs(
-                          "div",
-                          {
-                            className: "crow-relative crow-flex-shrink-0 crow-flex crow-items-center crow-text-[13px] crow-leading-tight crow-py-2.5 crow-transition-colors crow-select-none crow-cursor-pointer",
-                            style: {
-                              color: isActive ? styles.colors.text : styles.colors.text + "80",
-                              fontWeight: isActive ? 500 : void 0,
-                              maxWidth: "180px",
-                              borderRight: idx < tabs.length - 1 ? `1px solid ${styles.colors.border}` : "none",
-                              paddingLeft: "16px",
-                              paddingRight: isCloseable ? "8px" : "16px"
-                            },
-                            title: tab.name,
-                            onMouseEnter: () => setHoveredTabId(tab.id),
-                            onMouseLeave: () => setHoveredTabId(null),
-                            onClick: () => {
-                              if (tab.type === "new") {
-                                handleNewChat();
-                                return;
-                              }
-                              if (tab.type === "server") {
-                                handleSelectConversation(tab.id);
-                                return;
-                              }
-                              handleSelectLocalTab(tab.id);
-                            },
-                            children: [
-                              /* @__PURE__ */ jsx(
-                                "span",
-                                {
-                                  className: "crow-block crow-truncate",
-                                  style: { maxWidth: isCloseable ? "112px" : "128px" },
-                                  children: tab.name
-                                }
-                              ),
-                              isCloseable && /* @__PURE__ */ jsx(
-                                "span",
-                                {
-                                  className: "crow-rounded crow-p-0.5 crow-flex-shrink-0 crow-inline-flex crow-items-center crow-justify-center crow-transition-opacity",
-                                  style: {
-                                    marginLeft: "6px",
-                                    opacity: isHovered ? 1 : 0,
-                                    pointerEvents: isHovered ? "auto" : "none"
-                                  },
-                                  onClick: (e) => {
-                                    e.stopPropagation();
-                                    handleCloseTab(tab.id, tab.type);
-                                  },
-                                  role: "button",
-                                  "aria-label": `Close ${tab.name}`,
-                                  children: /* @__PURE__ */ jsx(TabCloseIcon, { className: "crow-w-3 crow-h-3", style: { color: styles.colors.text + "80" } })
-                                }
-                              ),
-                              isActive && /* @__PURE__ */ jsx(
-                                "span",
-                                {
-                                  className: "crow-absolute crow-bottom-0 crow-left-0 crow-right-0",
-                                  style: {
-                                    height: "2px",
-                                    background: styles.colors.primary || "#2563eb"
-                                  }
-                                }
-                              )
-                            ]
-                          },
-                          `${tab.id}-${idx}`
-                        );
-                      })
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: "crow-flex crow-items-center crow-flex-shrink-0 crow-border-l",
-                      style: { borderColor: styles.colors.border },
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            onClick: handleNewChat,
-                            className: "crow-p-2 crow-transition-colors crow-rounded",
-                            style: { color: styles.colors.text + "80" },
-                            onMouseEnter: (e) => {
-                              e.currentTarget.style.background = styles.colors.text + "10";
-                            },
-                            onMouseLeave: (e) => {
-                              e.currentTarget.style.background = "transparent";
-                            },
-                            "aria-label": "New Chat",
-                            title: "New Chat",
-                            children: /* @__PURE__ */ jsx(PlusIcon, { className: "crow-w-4 crow-h-4" })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            onClick: handleToggleHistory,
-                            disabled: !isVerifiedUser,
-                            "aria-disabled": !isVerifiedUser,
-                            className: `crow-p-2 crow-transition-colors crow-rounded ${!isVerifiedUser ? "crow-opacity-40 crow-cursor-not-allowed" : ""}`,
-                            style: {
-                              color: styles.colors.text + "80",
-                              background: showConversationList ? styles.colors.text + "10" : "transparent"
-                            },
-                            onMouseEnter: (e) => {
-                              if (isVerifiedUser) e.currentTarget.style.background = styles.colors.text + "10";
-                            },
-                            onMouseLeave: (e) => {
-                              if (!showConversationList) e.currentTarget.style.background = "transparent";
-                            },
-                            "aria-label": "Conversation History",
-                            title: isVerifiedUser ? "Conversation History" : "Sign in to view history",
-                            children: /* @__PURE__ */ jsx(HistoryIcon, { className: "crow-w-4 crow-h-4" })
-                          }
-                        ),
-                        canScrollRight && /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            onClick: handleScrollRight,
-                            className: "crow-p-2 crow-transition-colors crow-rounded",
-                            style: { color: styles.colors.text + "80" },
-                            onMouseEnter: (e) => {
-                              e.currentTarget.style.background = styles.colors.text + "10";
-                            },
-                            onMouseLeave: (e) => {
-                              e.currentTarget.style.background = "transparent";
-                            },
-                            "aria-label": "Scroll tabs",
-                            title: "Scroll tabs",
-                            children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "crow-w-4 crow-h-4" })
-                          }
-                        ),
-                        (forceShowClose ?? showClose) && (overrideOnClose ?? onClose) && /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            onClick: overrideOnClose ?? onClose,
-                            className: "crow-p-2 crow-transition-colors crow-rounded",
-                            style: { color: styles.colors.text + "80" },
-                            onMouseEnter: (e) => {
-                              e.currentTarget.style.background = styles.colors.text + "10";
-                            },
-                            onMouseLeave: (e) => {
-                              e.currentTarget.style.background = "transparent";
-                            },
-                            "aria-label": "Close",
-                            children: /* @__PURE__ */ jsx(CloseIcon, { className: "crow-w-4 crow-h-4" })
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ]
-              }
-            ),
-            contextLabel && /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "crow-flex crow-items-center crow-gap-1.5 crow-px-3 crow-py-1.5 crow-border-b crow-text-xs",
-                style: {
-                  color: styles.colors.text + "80",
-                  borderColor: styles.colors.border
-                },
-                children: [
-                  /* @__PURE__ */ jsxs(
-                    "svg",
-                    {
-                      xmlns: "http://www.w3.org/2000/svg",
-                      width: "12",
-                      height: "12",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      className: "crow-shrink-0",
-                      children: [
-                        /* @__PURE__ */ jsx("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }),
-                        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "3" })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { className: "crow-truncate", children: contextLabel })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-              showConversationList && isVerifiedUser && /* @__PURE__ */ jsx(
-                ConversationList,
+            isOnboarding && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  conversations: conversations.conversations,
-                  currentConversationId: chat.conversationId,
-                  onSelect: handleSelectConversation,
-                  onClose: handleCloseConversationList
+                  className: "crow-flex crow-items-center crow-justify-between crow-border-b crow-px-4 crow-py-2.5",
+                  style: { borderColor: styles.colors.border },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "crow-text-[13px] crow-font-semibold", style: { color: styles.colors.text }, children: onboardingAgentName || agentName }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: () => {
+                          setIsOnboarding(false);
+                        },
+                        className: "crow-text-xs crow-border-none crow-bg-transparent crow-cursor-pointer crow-px-2 crow-py-1",
+                        style: { color: styles.colors.text + "60" },
+                        children: "Skip"
+                      }
+                    )
+                  ]
                 }
               ),
-              showConversationList && !isVerifiedUser && /* @__PURE__ */ jsx(
-                "div",
+              onboardingPhase === "intro" && /* @__PURE__ */ jsx("div", { className: "crow-flex crow-flex-col crow-items-center crow-justify-center crow-flex-1 crow-px-4 crow-py-6 crow-text-center", children: /* @__PURE__ */ jsx(
+                OnboardingIntroInline2,
                 {
-                  className: "crow-mb-3 crow-rounded-xl crow-border crow-p-4",
-                  style: { background: styles.colors.text + "08", borderColor: styles.colors.border },
-                  children: /* @__PURE__ */ jsx("div", { className: "crow-text-sm", style: { color: styles.colors.text + "99" }, children: "Sign in to view conversation history." })
+                  lines: onboardingIntroSequence || [],
+                  primaryColor: styles.colors.primary,
+                  textColor: styles.colors.text,
+                  textMutedColor: styles.colors.text + "80",
+                  onComplete: () => setOnboardingPhase("chat")
                 }
-              )
+              ) })
             ] }),
-            /* @__PURE__ */ jsx(AnimatePresence, { children: activeWorkflow && /* @__PURE__ */ jsx(
-              WorkflowPanel,
-              {
-                workflow: activeWorkflow,
-                onExit: handleExitWorkflow
-              }
-            ) }),
-            /* @__PURE__ */ jsxs(MessagesContainer, { ref: messagesContainerRef, children: [
-              /* @__PURE__ */ jsx(
-                MessageList,
+            !(isOnboarding && onboardingPhase === "intro") && /* @__PURE__ */ jsxs(Fragment, { children: [
+              !isOnboarding && /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  messages: chat.messages,
-                  activeToolCalls: chat.activeToolCalls,
-                  isLoadingHistory: conversations.isLoadingHistory,
-                  isGenerating: chat.isLoading,
-                  toolRenderers: effectiveToolRenderers,
-                  onToolConsent: handleToolConsent
+                  className: "crow-flex crow-items-stretch crow-border-b crow-min-h-[40px]",
+                  style: { borderColor: styles.colors.border },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ref: tabsScrollRef,
+                        className: "crow-flex crow-items-stretch crow-flex-1 crow-min-w-0 crow-overflow-x-auto",
+                        style: {
+                          scrollbarWidth: "none",
+                          msOverflowStyle: "none"
+                        },
+                        onScroll: handleTabsScroll,
+                        children: tabs.map((tab, idx) => {
+                          const isActive = activeTabId === tab.id;
+                          const isHovered = hoveredTabId === tab.id;
+                          const isCloseable = tab.type !== "new" && (tab.type !== "local" || localTabs.length > 1);
+                          return /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: "crow-relative crow-flex-shrink-0 crow-flex crow-items-center crow-text-[13px] crow-leading-tight crow-py-2.5 crow-transition-colors crow-select-none crow-cursor-pointer",
+                              style: {
+                                color: isActive ? styles.colors.text : styles.colors.text + "80",
+                                fontWeight: isActive ? 500 : void 0,
+                                maxWidth: "180px",
+                                borderRight: idx < tabs.length - 1 ? `1px solid ${styles.colors.border}` : "none",
+                                paddingLeft: "16px",
+                                paddingRight: isCloseable ? "8px" : "16px"
+                              },
+                              title: tab.name,
+                              onMouseEnter: () => setHoveredTabId(tab.id),
+                              onMouseLeave: () => setHoveredTabId(null),
+                              onClick: () => {
+                                if (tab.type === "new") {
+                                  handleNewChat();
+                                  return;
+                                }
+                                if (tab.type === "server") {
+                                  handleSelectConversation(tab.id);
+                                  return;
+                                }
+                                handleSelectLocalTab(tab.id);
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    className: "crow-block crow-truncate",
+                                    style: { maxWidth: isCloseable ? "112px" : "128px" },
+                                    children: tab.name
+                                  }
+                                ),
+                                isCloseable && /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    className: "crow-rounded crow-p-0.5 crow-flex-shrink-0 crow-inline-flex crow-items-center crow-justify-center crow-transition-opacity",
+                                    style: {
+                                      marginLeft: "6px",
+                                      opacity: isHovered ? 1 : 0,
+                                      pointerEvents: isHovered ? "auto" : "none"
+                                    },
+                                    onClick: (e) => {
+                                      e.stopPropagation();
+                                      handleCloseTab(tab.id, tab.type);
+                                    },
+                                    role: "button",
+                                    "aria-label": `Close ${tab.name}`,
+                                    children: /* @__PURE__ */ jsx(TabCloseIcon, { className: "crow-w-3 crow-h-3", style: { color: styles.colors.text + "80" } })
+                                  }
+                                ),
+                                isActive && /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    className: "crow-absolute crow-bottom-0 crow-left-0 crow-right-0",
+                                    style: {
+                                      height: "2px",
+                                      background: styles.colors.primary || "#2563eb"
+                                    }
+                                  }
+                                )
+                              ]
+                            },
+                            `${tab.id}-${idx}`
+                          );
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: "crow-flex crow-items-center crow-flex-shrink-0 crow-border-l",
+                        style: { borderColor: styles.colors.border },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              onClick: handleNewChat,
+                              className: "crow-p-2 crow-transition-colors crow-rounded",
+                              style: { color: styles.colors.text + "80" },
+                              onMouseEnter: (e) => {
+                                e.currentTarget.style.background = styles.colors.text + "10";
+                              },
+                              onMouseLeave: (e) => {
+                                e.currentTarget.style.background = "transparent";
+                              },
+                              "aria-label": "New Chat",
+                              title: "New Chat",
+                              children: /* @__PURE__ */ jsx(PlusIcon, { className: "crow-w-4 crow-h-4" })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              onClick: handleToggleHistory,
+                              disabled: !isVerifiedUser,
+                              "aria-disabled": !isVerifiedUser,
+                              className: `crow-p-2 crow-transition-colors crow-rounded ${!isVerifiedUser ? "crow-opacity-40 crow-cursor-not-allowed" : ""}`,
+                              style: {
+                                color: styles.colors.text + "80",
+                                background: showConversationList ? styles.colors.text + "10" : "transparent"
+                              },
+                              onMouseEnter: (e) => {
+                                if (isVerifiedUser) e.currentTarget.style.background = styles.colors.text + "10";
+                              },
+                              onMouseLeave: (e) => {
+                                if (!showConversationList) e.currentTarget.style.background = "transparent";
+                              },
+                              "aria-label": "Conversation History",
+                              title: isVerifiedUser ? "Conversation History" : "Sign in to view history",
+                              children: /* @__PURE__ */ jsx(HistoryIcon, { className: "crow-w-4 crow-h-4" })
+                            }
+                          ),
+                          canScrollRight && /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              onClick: handleScrollRight,
+                              className: "crow-p-2 crow-transition-colors crow-rounded",
+                              style: { color: styles.colors.text + "80" },
+                              onMouseEnter: (e) => {
+                                e.currentTarget.style.background = styles.colors.text + "10";
+                              },
+                              onMouseLeave: (e) => {
+                                e.currentTarget.style.background = "transparent";
+                              },
+                              "aria-label": "Scroll tabs",
+                              title: "Scroll tabs",
+                              children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "crow-w-4 crow-h-4" })
+                            }
+                          ),
+                          (forceShowClose ?? showClose) && (overrideOnClose ?? onClose) && /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              onClick: overrideOnClose ?? onClose,
+                              className: "crow-p-2 crow-transition-colors crow-rounded",
+                              style: { color: styles.colors.text + "80" },
+                              onMouseEnter: (e) => {
+                                e.currentTarget.style.background = styles.colors.text + "10";
+                              },
+                              onMouseLeave: (e) => {
+                                e.currentTarget.style.background = "transparent";
+                              },
+                              "aria-label": "Close",
+                              children: /* @__PURE__ */ jsx(CloseIcon, { className: "crow-w-4 crow-h-4" })
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
                 }
               ),
-              pendingConfirmation && /* @__PURE__ */ jsx("div", { className: "crow-px-4 crow-py-2", children: /* @__PURE__ */ jsx(
-                BrowserUseConfirmation,
+              contextLabel && /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  instruction: pendingConfirmation.instruction,
-                  onAllow: () => {
-                    pendingConfirmation.resolve(true);
-                    setPendingConfirmation(null);
+                  className: "crow-flex crow-items-center crow-gap-1.5 crow-px-3 crow-py-1.5 crow-border-b crow-text-xs",
+                  style: {
+                    color: styles.colors.text + "80",
+                    borderColor: styles.colors.border
                   },
-                  onDeny: () => {
-                    pendingConfirmation.resolve(false);
-                    setPendingConfirmation(null);
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "12",
+                        height: "12",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        className: "crow-shrink-0",
+                        children: [
+                          /* @__PURE__ */ jsx("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }),
+                          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "3" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "crow-truncate", children: contextLabel })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+                showConversationList && isVerifiedUser && /* @__PURE__ */ jsx(
+                  ConversationList,
+                  {
+                    conversations: conversations.conversations,
+                    currentConversationId: chat.conversationId,
+                    onSelect: handleSelectConversation,
+                    onClose: handleCloseConversationList
                   }
+                ),
+                showConversationList && !isVerifiedUser && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "crow-mb-3 crow-rounded-xl crow-border crow-p-4",
+                    style: { background: styles.colors.text + "08", borderColor: styles.colors.border },
+                    children: /* @__PURE__ */ jsx("div", { className: "crow-text-sm", style: { color: styles.colors.text + "99" }, children: "Sign in to view conversation history." })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(AnimatePresence, { children: activeWorkflow && !isOnboarding && /* @__PURE__ */ jsx(
+                WorkflowPanel,
+                {
+                  workflow: activeWorkflow,
+                  onExit: handleExitWorkflow
                 }
               ) }),
-              askUserResolver && browserQuestion && /* @__PURE__ */ jsx("div", { className: "crow-px-4 crow-py-2", children: /* @__PURE__ */ jsx(
-                BrowserUseQuestion,
-                {
-                  question: browserQuestion,
-                  onSubmit: (answer) => {
-                    askUserResolver.resolve(answer);
-                    setAskUserResolver(null);
-                    setBrowserQuestion(null);
+              /* @__PURE__ */ jsxs(MessagesContainer, { ref: messagesContainerRef, children: [
+                /* @__PURE__ */ jsx(
+                  MessageList,
+                  {
+                    messages: chat.messages,
+                    activeToolCalls: chat.activeToolCalls,
+                    isLoadingHistory: conversations.isLoadingHistory,
+                    isGenerating: chat.isLoading,
+                    toolRenderers: effectiveToolRenderers,
+                    onToolConsent: handleToolConsent
                   }
-                }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "crow-p-3 crow-border-t",
-                style: { borderColor: styles.colors.border },
-                children: [
-                  toolStatus && /* @__PURE__ */ jsxs("div", { className: "crow-mb-1 crow-flex crow-items-center crow-gap-2 crow-rounded-lg crow-border crow-px-3 crow-py-2 crow-text-sm", style: { borderColor: styles.colors.border, background: styles.colors.border + "30" }, children: [
-                    /* @__PURE__ */ jsxs("svg", { className: "crow-animate-spin crow-h-4 crow-w-4 crow-shrink-0 crow-text-[var(--crow-primary,#7c3aed)]", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-                      /* @__PURE__ */ jsx("circle", { className: "crow-opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-                      /* @__PURE__ */ jsx("path", { className: "crow-opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
-                    ] }),
-                    /* @__PURE__ */ jsx("span", { className: "crow-font-medium crow-text-[var(--crow-text,#111827)]", children: toolStatus })
-                  ] }),
-                  (chat.suggestedActions.length > 0 || !chat.isLoading && defaultSuggestedActionsRef.current.length > 0) && /* @__PURE__ */ jsx(
-                    SuggestedActions,
-                    {
-                      actions: chat.suggestedActions.length > 0 ? chat.suggestedActions : defaultSuggestedActionsRef.current,
-                      onActionClick: (action) => handleSend(action.message)
+                ),
+                pendingConfirmation && /* @__PURE__ */ jsx("div", { className: "crow-px-4 crow-py-2", children: /* @__PURE__ */ jsx(
+                  BrowserUseConfirmation,
+                  {
+                    instruction: pendingConfirmation.instruction,
+                    onAllow: () => {
+                      pendingConfirmation.resolve(true);
+                      setPendingConfirmation(null);
+                    },
+                    onDeny: () => {
+                      pendingConfirmation.resolve(false);
+                      setPendingConfirmation(null);
                     }
-                  ),
-                  styles.branding.showPoweredBy && /* @__PURE__ */ jsx(PoweredByBadge, { apiUrl }),
-                  /* @__PURE__ */ jsx(
-                    PromptInputBox,
-                    {
-                      onSend: handleSend,
-                      onStop: handleStop,
-                      placeholder: "Ask anything...",
-                      isLoading: chat.isLoading,
-                      selectedModel: chat.selectedModel || selectedModel,
-                      onModelChange: chat.setSelectedModel,
-                      availableModels: modelSelectionEnabled ? availableModelsFromAPI : []
+                  }
+                ) }),
+                askUserResolver && browserQuestion && /* @__PURE__ */ jsx("div", { className: "crow-px-4 crow-py-2", children: /* @__PURE__ */ jsx(
+                  BrowserUseQuestion,
+                  {
+                    question: browserQuestion,
+                    onSubmit: (answer) => {
+                      askUserResolver.resolve(answer);
+                      setAskUserResolver(null);
+                      setBrowserQuestion(null);
                     }
-                  )
-                ]
-              }
-            )
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "crow-p-3 crow-border-t",
+                  style: { borderColor: styles.colors.border },
+                  children: [
+                    toolStatus && /* @__PURE__ */ jsxs("div", { className: "crow-mb-1 crow-flex crow-items-center crow-gap-2 crow-rounded-lg crow-border crow-px-3 crow-py-2 crow-text-sm", style: { borderColor: styles.colors.border, background: styles.colors.border + "30" }, children: [
+                      /* @__PURE__ */ jsxs("svg", { className: "crow-animate-spin crow-h-4 crow-w-4 crow-shrink-0 crow-text-[var(--crow-primary,#7c3aed)]", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+                        /* @__PURE__ */ jsx("circle", { className: "crow-opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                        /* @__PURE__ */ jsx("path", { className: "crow-opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { className: "crow-font-medium crow-text-[var(--crow-text,#111827)]", children: toolStatus })
+                    ] }),
+                    (chat.suggestedActions.length > 0 || !isOnboarding && !chat.isLoading && defaultSuggestedActionsRef.current.length > 0) && /* @__PURE__ */ jsx(
+                      SuggestedActions,
+                      {
+                        actions: chat.suggestedActions.length > 0 ? chat.suggestedActions : defaultSuggestedActionsRef.current,
+                        onActionClick: (action) => handleSend(action.message)
+                      }
+                    ),
+                    styles.branding.showPoweredBy && /* @__PURE__ */ jsx(PoweredByBadge, { apiUrl }),
+                    /* @__PURE__ */ jsx(
+                      PromptInputBox,
+                      {
+                        onSend: handleSend,
+                        onStop: handleStop,
+                        placeholder: "Ask anything...",
+                        isLoading: chat.isLoading,
+                        selectedModel: chat.selectedModel || selectedModel,
+                        onModelChange: chat.setSelectedModel,
+                        availableModels: modelSelectionEnabled ? availableModelsFromAPI : []
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
           ]
         }
       )
@@ -6562,7 +6993,7 @@ function CrowCopilot({
   const edgeSide = isRight ? "left" : "right";
   const toggleIconColor = styles.colors.text + "80";
   const toggleIcon = isCollapsed ? /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: toggleIconColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }) }) : /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: toggleIconColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: isRight ? /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) : /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) });
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", flexShrink: 0, height: "100%" }, children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", flexShrink: 0, height: "100%" }, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -6606,7 +7037,7 @@ function CrowCopilot({
         children: /* @__PURE__ */ jsx(ShadowContainer, { styles: WIDGET_CSS, children: renderCopilotContent(void 0, false, "100%") })
       }
     )
-  ] });
+  ] }) });
 }
 function PlusIcon({ className }) {
   return /* @__PURE__ */ jsxs(
@@ -6712,6 +7143,320 @@ function CloseIcon({ className }) {
     }
   );
 }
+function IntroSequence({ lines, onComplete, onSkip, primaryColor }) {
+  const [lineIndex, setLineIndex] = useState(0);
+  const [charIndex, setCharIndex] = useState(0);
+  const [done, setDone] = useState(false);
+  useEffect(() => {
+    if (lineIndex >= lines.length) {
+      setDone(true);
+      return;
+    }
+    const currentLine = lines[lineIndex];
+    if (charIndex < currentLine.length) {
+      const t = setTimeout(() => setCharIndex((c) => c + 1), 35);
+      return () => clearTimeout(t);
+    } else {
+      const t = setTimeout(() => {
+        setLineIndex((l) => l + 1);
+        setCharIndex(0);
+      }, 500);
+      return () => clearTimeout(t);
+    }
+  }, [lineIndex, charIndex, lines]);
+  const displayedLines = lines.slice(0, lineIndex + 1).map((line, i) => {
+    if (i < lineIndex) return line;
+    return line.slice(0, charIndex);
+  });
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", padding: "2rem" }, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onSkip,
+        style: {
+          position: "absolute",
+          top: 20,
+          right: 24,
+          fontSize: 14,
+          color: "#9ca3af",
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          padding: "4px 8px"
+        },
+        children: "Skip"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: { textAlign: "center", minHeight: "5rem", marginBottom: "2.5rem" }, children: displayedLines.map((text, i) => /* @__PURE__ */ jsxs(
+      "p",
+      {
+        style: {
+          fontSize: i === 0 ? 30 : 18,
+          fontWeight: i === 0 ? 600 : 400,
+          color: i === 0 ? "#111827" : "#6b7280",
+          lineHeight: 1.4,
+          margin: "0 0 8px 0"
+        },
+        children: [
+          text,
+          i === lineIndex && !done && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                display: "inline-block",
+                width: 2,
+                height: i === 0 ? 28 : 18,
+                backgroundColor: "#111827",
+                marginLeft: 2,
+                verticalAlign: "middle",
+                animation: "crow-blink 1s step-end infinite"
+              }
+            }
+          )
+        ]
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onComplete,
+        style: {
+          padding: "10px 32px",
+          borderRadius: 12,
+          backgroundColor: primaryColor,
+          color: "#fff",
+          fontSize: 15,
+          fontWeight: 500,
+          border: "none",
+          cursor: "pointer",
+          opacity: done ? 1 : 0,
+          pointerEvents: done ? "auto" : "none",
+          transition: "opacity 0.5s ease"
+        },
+        children: "Get Started \u2192"
+      }
+    ),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes crow-blink {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0; }
+        }
+      ` })
+  ] });
+}
+function CrowOnboarding({
+  productId,
+  apiUrl,
+  subdomain,
+  agentName,
+  welcomeMessage,
+  introSequence,
+  topOffset = 0,
+  onComplete,
+  language,
+  styles: preResolvedStyles,
+  getIdentityToken
+}) {
+  const [phase, setPhase] = useState(
+    introSequence && introSequence.length > 0 ? "intro" : "chat"
+  );
+  const [isDismissing, setIsDismissing] = useState(false);
+  const bottomRef = useRef(null);
+  const styles = useMemo(
+    () => preResolvedStyles || mergeWidgetStyles(void 0, void 0),
+    [preResolvedStyles]
+  );
+  const cssVars = useMemo(
+    () => stylesToCssVars(styles),
+    [styles]
+  );
+  const dismiss = useCallback(() => {
+    setIsDismissing(true);
+    setTimeout(() => onComplete(), 400);
+  }, [onComplete]);
+  const handleOnboardingComplete = useCallback(
+    (summary) => {
+      console.log("[Crow] Onboarding complete:", summary);
+      dismiss();
+    },
+    [dismiss]
+  );
+  const chat = useChat({
+    productId,
+    apiUrl,
+    subdomain,
+    welcomeMessage: welcomeMessage || `Hi! I'm ${agentName}. Let me help you get started.`,
+    agentMode: "onboarding",
+    onOnboardingComplete: handleOnboardingComplete,
+    language
+  });
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [chat.messages, chat.isLoading]);
+  const handleSend = useCallback(
+    (content) => {
+      chat.sendMessage(content);
+    },
+    [chat]
+  );
+  const handleStop = useCallback(() => {
+    chat.stopGeneration();
+  }, [chat]);
+  const handleSuggestedActionClick = useCallback(
+    (action) => {
+      chat.sendMessage(action.message);
+    },
+    [chat]
+  );
+  useEffect(() => {
+    const effectiveGetIdentityToken = getIdentityToken || window.__crow_identity_token_fetcher;
+    if (!effectiveGetIdentityToken) return;
+    let cancelled = false;
+    const identify = async () => {
+      try {
+        const token = await effectiveGetIdentityToken();
+        if (!cancelled && token) {
+          window.__crow_identity_token = token;
+        }
+      } catch (e) {
+        console.error("[Crow] Onboarding getIdentityToken failed:", e);
+      }
+    };
+    identify();
+    return () => {
+      cancelled = true;
+    };
+  }, [getIdentityToken]);
+  const renderChat = () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", background: "#ffffff" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "12px 24px",
+      borderBottom: "1px solid #f3f4f6",
+      flexShrink: 0
+    }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+        /* @__PURE__ */ jsx("div", { style: {
+          width: 28,
+          height: 28,
+          borderRadius: "50%",
+          backgroundColor: styles.colors.primary,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#fff",
+          fontSize: 13,
+          fontWeight: 600,
+          flexShrink: 0
+        }, children: agentName.charAt(0).toUpperCase() }),
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 14, fontWeight: 600, color: "#111827" }, children: agentName })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: dismiss,
+          style: {
+            fontSize: 13,
+            color: "#9ca3af",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: "4px 8px"
+          },
+          children: "Skip"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: /* @__PURE__ */ jsxs("div", { className: "crow-widget-root", style: { ...cssVars, maxWidth: 560, margin: "0 auto", padding: "24px 16px" }, children: [
+      /* @__PURE__ */ jsx(
+        WidgetStyleProvider,
+        {
+          styles,
+          agentName,
+          isLoading: false,
+          variant: "embedded",
+          children: /* @__PURE__ */ jsx(
+            MessageList,
+            {
+              messages: chat.messages,
+              activeToolCalls: chat.activeToolCalls,
+              isLoadingHistory: false,
+              isGenerating: chat.isLoading
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { ref: bottomRef })
+    ] }) }),
+    chat.suggestedActions.length > 0 && !chat.isLoading && /* @__PURE__ */ jsx("div", { className: "crow-widget-root", style: { ...cssVars, maxWidth: 560, margin: "0 auto", width: "100%", padding: "0 16px 8px" }, children: /* @__PURE__ */ jsx(
+      WidgetStyleProvider,
+      {
+        styles,
+        agentName,
+        isLoading: false,
+        variant: "embedded",
+        children: /* @__PURE__ */ jsx(
+          SuggestedActions,
+          {
+            actions: chat.suggestedActions,
+            onActionClick: handleSuggestedActionClick
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid #f3f4f6", flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsx("div", { className: "crow-widget-root", style: { ...cssVars, maxWidth: 560, margin: "0 auto", padding: "12px 16px" }, children: /* @__PURE__ */ jsx(
+        WidgetStyleProvider,
+        {
+          styles,
+          agentName,
+          isLoading: false,
+          variant: "embedded",
+          children: /* @__PURE__ */ jsx(
+            PromptInputBox,
+            {
+              onSend: handleSend,
+              onStop: handleStop,
+              placeholder: "Type your message...",
+              isLoading: chat.isLoading
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "0 0 10px" }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "#d1d5db" }, children: "Powered by Crow" }) })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(ShadowContainer, { styles: WIDGET_CSS, hostId: "crow-onboarding-host", children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      style: {
+        position: "fixed",
+        top: topOffset,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 999999,
+        background: "#ffffff",
+        fontFamily: styles.typography.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        fontSize: 14
+      },
+      initial: { opacity: 0 },
+      animate: { opacity: isDismissing ? 0 : 1 },
+      transition: { duration: 0.35 },
+      children: phase === "intro" ? /* @__PURE__ */ jsx(
+        IntroSequence,
+        {
+          lines: introSequence || [],
+          onComplete: () => setPhase("chat"),
+          onSkip: dismiss,
+          primaryColor: styles.colors.primary
+        }
+      ) : renderChat()
+    }
+  ) });
+}
 var CrowContext = createContext(null);
 function CrowProvider({
   children,
@@ -6734,6 +7479,6 @@ function CrowProvider({
   return /* @__PURE__ */ jsx(CrowContext.Provider, { value, children });
 }
 
-export { AVAILABLE_MODELS, CSS_VAR_NAMES, ChatBubble, ConversationList, CopilotContainer, CopilotStyleProvider, CopilotToggleButton, CrowCopilot, CrowProvider, CrowWidget, DEFAULT_COPILOT_STYLES, DEFAULT_MODEL, DEFAULT_WELCOME_MESSAGE, DEFAULT_WIDGET_STYLES, LoadingHistory, MESSAGES_CONTAINER_ID, MessageBubble, MessageList, MessagesContainer, ModelSelector, PoweredByBadge, PromptInputBox, ReasoningTrace, ShadowContainer, StreamingText, ThinkingIndicator, WIDGET_CSS, WidgetHeader, WidgetShell, WidgetStyleProvider, WorkflowPanel, clearStyleCache, getCssVar, injectStyles, mergeCopilotStyles, mergeWidgetStyles, stylesToCSSVariables, stylesToCssVars, useChat, useConversations, useCopilotStyleContext, useCopilotStyles, useCopilotStyles2 as useCopilotStylesContext, useCrowAPI, usePreviewCopilotStyles, usePreviewWidgetStyles, useVoiceInput, useWidgetStyleContext, useWidgetStyles, useWidgetStyles2 as useWidgetStylesContext, useWorkflow };
+export { AVAILABLE_MODELS, CSS_VAR_NAMES, ChatBubble, ConversationList, CopilotContainer, CopilotStyleProvider, CopilotToggleButton, CrowCopilot, CrowOnboarding, CrowProvider, CrowWidget, DEFAULT_COPILOT_STYLES, DEFAULT_MODEL, DEFAULT_WELCOME_MESSAGE, DEFAULT_WIDGET_STYLES, LoadingHistory, MESSAGES_CONTAINER_ID, MessageBubble, MessageList, MessagesContainer, ModelSelector, PoweredByBadge, PromptInputBox, ReasoningTrace, ShadowContainer, StreamingText, ThinkingIndicator, WIDGET_CSS, WidgetHeader, WidgetShell, WidgetStyleProvider, WorkflowPanel, clearStyleCache, getCssVar, injectStyles, mergeCopilotStyles, mergeWidgetStyles, stylesToCSSVariables, stylesToCssVars, useChat, useConversations, useCopilotStyleContext, useCopilotStyles, useCopilotStyles2 as useCopilotStylesContext, useCrowAPI, usePreviewCopilotStyles, usePreviewWidgetStyles, useVoiceInput, useWidgetStyleContext, useWidgetStyles, useWidgetStyles2 as useWidgetStylesContext, useWorkflow };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map