@meetsmore-oss/use-ai-client 1.10.0 → 1.12.0

package/dist/index.js

@@ -1,8 +1,8 @@
 // src/useAI.ts
-import { useState as useState14, useEffect as useEffect12, useLayoutEffect, useRef as useRef14, useCallback as useCallback13, useMemo as useMemo6 } from "react";
+import { useState as useState15, useEffect as useEffect12, useLayoutEffect, useRef as useRef14, useCallback as useCallback14, useMemo as useMemo6 } from "react";
 
 // src/providers/useAIProvider.tsx
-import { createContext as createContext4, useContext as useContext4, useState as useState13, useEffect as useEffect11, useCallback as useCallback12, useRef as useRef12 } from "react";
+import { createContext as createContext4, useContext as useContext4, useState as useState14, useEffect as useEffect11, useCallback as useCallback13, useRef as useRef12 } from "react";
 
 // src/theme/strings.ts
 import { createContext, useContext } from "react";
@@ -97,6 +97,13 @@ var defaultStrings = {
     /** Error for unknown/unexpected errors */
     UNKNOWN_ERROR: "An unexpected error occurred. Please try again."
   },
+  // Thinking/reasoning display
+  thinking: {
+    /** Label shown while thinking is in progress */
+    inProgress: "Thinking...",
+    /** Label shown when thinking is complete */
+    complete: "Thinking complete"
+  },
   // Tool execution status
   toolExecution: {
     /** Fallback messages when no tool title is provided (one randomly selected) */
@@ -266,7 +273,7 @@ function UseAIFloatingButton({
 }
 
 // src/components/UseAIChatPanel.tsx
-import { useState as useState5, useRef as useRef4, useEffect as useEffect4 } from "react";
+import { useState as useState6, useRef as useRef4, useEffect as useEffect4 } from "react";
 
 // src/utils/messageContent.ts
 function getTextFromContent(content) {
@@ -281,6 +288,7 @@ function mergeAssistantMessagesForDisplay(messages) {
   const result = [];
   let pendingTexts = [];
   let pendingIds = [];
+  let pendingReasoningParts = [];
   for (const msg of messages) {
     if (msg.role === "tool") {
       continue;
@@ -292,33 +300,45 @@ function mergeAssistantMessagesForDisplay(messages) {
         if (text) {
           pendingTexts.push(text);
         }
+        if (msg.reasoningParts && msg.reasoningParts.length > 0) {
+          pendingReasoningParts.push(...msg.reasoningParts);
+        }
       } else {
         const allTexts = text ? [...pendingTexts, text] : pendingTexts;
         const combined = allTexts.join("\n\n");
-        result.push({ ...msg, content: combined || "" });
+        const allReasoningParts = msg.reasoningParts ? [...pendingReasoningParts, ...msg.reasoningParts] : pendingReasoningParts.length > 0 ? pendingReasoningParts : void 0;
+        result.push({
+          ...msg,
+          content: combined || "",
+          ...allReasoningParts && allReasoningParts.length > 0 ? { reasoningParts: allReasoningParts } : {}
+        });
         pendingTexts = [];
         pendingIds = [];
+        pendingReasoningParts = [];
       }
     } else {
-      if (pendingTexts.length > 0) {
+      if (pendingTexts.length > 0 || pendingReasoningParts.length > 0) {
         result.push({
           id: `merged-${pendingIds.join("-")}`,
           role: "assistant",
           content: pendingTexts.join("\n\n"),
-          createdAt: /* @__PURE__ */ new Date()
+          createdAt: /* @__PURE__ */ new Date(),
+          ...pendingReasoningParts.length > 0 ? { reasoningParts: pendingReasoningParts } : {}
         });
         pendingTexts = [];
         pendingIds = [];
+        pendingReasoningParts = [];
       }
       result.push(msg);
     }
   }
-  if (pendingTexts.length > 0) {
+  if (pendingTexts.length > 0 || pendingReasoningParts.length > 0) {
     result.push({
       id: `merged-${pendingIds.join("-")}`,
       role: "assistant",
       content: pendingTexts.join("\n\n"),
-      createdAt: /* @__PURE__ */ new Date()
+      createdAt: /* @__PURE__ */ new Date(),
+      ...pendingReasoningParts.length > 0 ? { reasoningParts: pendingReasoningParts } : {}
     });
   }
   return result;
@@ -1894,8 +1914,160 @@ function ToolApprovalDialog({
   );
 }
 
+// src/components/Reasoning.tsx
+import { useState as useState5, useCallback as useCallback4 } from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function BrainIcon({ color, size = 16 }) {
+  return /* @__PURE__ */ jsxs8(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: { flexShrink: 0 },
+      children: [
+        /* @__PURE__ */ jsx11("path", { d: "M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" }),
+        /* @__PURE__ */ jsx11("path", { d: "M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" }),
+        /* @__PURE__ */ jsx11("path", { d: "M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" }),
+        /* @__PURE__ */ jsx11("path", { d: "M17.599 6.5a3 3 0 0 0 .399-1.375" }),
+        /* @__PURE__ */ jsx11("path", { d: "M6.003 5.125A3 3 0 0 0 6.401 6.5" }),
+        /* @__PURE__ */ jsx11("path", { d: "M3.477 10.896a4 4 0 0 1 .585-.396" }),
+        /* @__PURE__ */ jsx11("path", { d: "M19.938 10.5a4 4 0 0 1 .585.396" }),
+        /* @__PURE__ */ jsx11("path", { d: "M6 18a4 4 0 0 1-1.967-.516" }),
+        /* @__PURE__ */ jsx11("path", { d: "M19.967 17.484A4 4 0 0 1 18 18" })
+      ]
+    }
+  );
+}
+function ChevronIcon({ color, size = 16, rotated }) {
+  return /* @__PURE__ */ jsx11(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: {
+        flexShrink: 0,
+        transition: "transform 200ms ease",
+        transform: rotated ? "rotate(180deg)" : "rotate(0deg)"
+      },
+      children: /* @__PURE__ */ jsx11("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function Reasoning({
+  reasoningParts,
+  isStreaming = false,
+  streamingText,
+  theme,
+  strings
+}) {
+  const [isOpen, setIsOpen] = useState5(false);
+  const toggle = useCallback4(() => setIsOpen((prev) => !prev), []);
+  const allText = [
+    ...reasoningParts.map((p) => p.text),
+    ...isStreaming && streamingText ? [streamingText] : []
+  ].join("\n\n");
+  const headerContent = isStreaming ? /* @__PURE__ */ jsx11(ShimmerText, { text: strings.thinking.inProgress, theme }) : /* @__PURE__ */ jsx11("span", { children: strings.thinking.complete });
+  return /* @__PURE__ */ jsxs8("div", { "data-testid": "thinking-timeline", style: { marginBottom: "8px" }, children: [
+    /* @__PURE__ */ jsx11("style", { children: `
+        @keyframes use-ai-shimmer {
+          from { background-position: 100% center; }
+          to { background-position: 0% center; }
+        }
+        @keyframes use-ai-reasoning-open {
+          from { opacity: 0; max-height: 0; }
+          to { opacity: 1; max-height: 2000px; }
+        }
+      ` }),
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        "data-testid": "thinking-toggle",
+        onClick: toggle,
+        style: {
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          padding: "4px 0",
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          color: theme.secondaryTextColor,
+          fontSize: "14px",
+          fontFamily: "inherit",
+          lineHeight: "1.5"
+        },
+        children: [
+          /* @__PURE__ */ jsx11(BrainIcon, { color: theme.secondaryTextColor, size: 16 }),
+          headerContent,
+          /* @__PURE__ */ jsx11(ChevronIcon, { color: theme.secondaryTextColor, size: 16, rotated: isOpen })
+        ]
+      }
+    ),
+    isOpen && allText && /* @__PURE__ */ jsx11(
+      "div",
+      {
+        "data-testid": "thinking-content",
+        style: {
+          animation: "use-ai-reasoning-open 200ms ease-out forwards",
+          overflow: "hidden",
+          marginTop: "4px",
+          paddingLeft: "4px"
+        },
+        children: /* @__PURE__ */ jsx11(
+          "div",
+          {
+            style: {
+              padding: "8px 12px",
+              background: "transparent",
+              borderLeft: `2px solid ${theme.borderColor}`,
+              fontSize: "14px",
+              lineHeight: "1.6",
+              color: theme.secondaryTextColor,
+              whiteSpace: "pre-wrap",
+              wordWrap: "break-word"
+            },
+            children: allText
+          }
+        )
+      }
+    )
+  ] });
+}
+function ShimmerText({ text, theme }) {
+  const spread = text.length * 2;
+  return /* @__PURE__ */ jsx11(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        backgroundSize: "250% 100%",
+        backgroundRepeat: "no-repeat, padding-box",
+        backgroundClip: "text",
+        WebkitBackgroundClip: "text",
+        color: "transparent",
+        backgroundImage: `linear-gradient(90deg, transparent calc(50% - ${spread}px), ${theme.backgroundColor}, transparent calc(50% + ${spread}px)), linear-gradient(${theme.secondaryTextColor}, ${theme.secondaryTextColor})`,
+        animation: "use-ai-shimmer 2s linear infinite"
+      },
+      children: text
+    }
+  );
+}
+Reasoning.displayName = "Reasoning";
+
 // src/components/UseAIChatPanel.tsx
-import { Fragment, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function FeedbackButton({ type, isSelected, onClick, selectedColor, unselectedColor }) {
   const buttonRef = useRef4(null);
   const handleClick = () => {
@@ -1911,7 +2083,7 @@ function FeedbackButton({ type, isSelected, onClick, selectedColor, unselectedCo
   };
   const thumbsUpPath = "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3";
   const thumbsDownPath = "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17";
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "button",
     {
       ref: buttonRef,
@@ -1944,7 +2116,7 @@ function FeedbackButton({ type, isSelected, onClick, selectedColor, unselectedCo
           e.currentTarget.style.color = unselectedColor;
         }
       },
-      children: /* @__PURE__ */ jsx11(
+      children: /* @__PURE__ */ jsx12(
         "svg",
         {
           width: "14",
@@ -1955,7 +2127,7 @@ function FeedbackButton({ type, isSelected, onClick, selectedColor, unselectedCo
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          children: /* @__PURE__ */ jsx11("path", { d: type === "upvote" ? thumbsUpPath : thumbsDownPath })
+          children: /* @__PURE__ */ jsx12("path", { d: type === "upvote" ? thumbsUpPath : thumbsDownPath })
         }
       )
     }
@@ -1970,6 +2142,7 @@ function UseAIChatPanel({
   loading,
   connected,
   streamingText = "",
+  streamingReasoning = "",
   currentChatId,
   onNewChat,
   onLoadChat,
@@ -1998,14 +2171,14 @@ function UseAIChatPanel({
   const strings = useStrings();
   const theme = useTheme();
   const displayMessages = mergeAssistantMessagesForDisplay(messages);
-  const [input, setInput] = useState5("");
+  const [input, setInput] = useState6("");
   const chatHistoryDropdown = useDropdownState();
   const agentDropdown = useDropdownState();
-  const [chatHistory, setChatHistory] = useState5([]);
+  const [chatHistory, setChatHistory] = useState6([]);
   const messagesEndRef = useRef4(null);
-  const [displayedSuggestions, setDisplayedSuggestions] = useState5([]);
+  const [displayedSuggestions, setDisplayedSuggestions] = useState6([]);
   const textareaRef = useRef4(null);
-  const [hoveredMessageId, setHoveredMessageId] = useState5(null);
+  const [hoveredMessageId, setHoveredMessageId] = useState6(null);
   const {
     attachments,
     fileError,
@@ -2092,7 +2265,7 @@ function UseAIChatPanel({
       chatHistoryDropdown.close();
     }
   };
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       onClick: () => {
@@ -2110,7 +2283,7 @@ function UseAIChatPanel({
       },
       children: [
         DropZoneOverlay,
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs9(
           "div",
           {
             style: {
@@ -2123,7 +2296,7 @@ function UseAIChatPanel({
               gap: "12px"
             },
             children: [
-              /* @__PURE__ */ jsx11("div", { style: { flex: 1, minWidth: 0, position: "relative" }, children: onListChats ? /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsx12("div", { style: { flex: 1, minWidth: 0, position: "relative" }, children: onListChats ? /* @__PURE__ */ jsxs9(
                 "button",
                 {
                   "data-testid": "chat-history-dropdown-button",
@@ -2156,7 +2329,7 @@ function UseAIChatPanel({
                     e.currentTarget.style.background = "transparent";
                   },
                   children: [
-                    /* @__PURE__ */ jsx11("span", { style: {
+                    /* @__PURE__ */ jsx12("span", { style: {
                       overflow: "hidden",
                       textOverflow: "ellipsis",
                       whiteSpace: "nowrap",
@@ -2173,13 +2346,13 @@ function UseAIChatPanel({
                       }
                       return strings.header.newChat;
                     })() }),
-                    /* @__PURE__ */ jsx11("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx11("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                    /* @__PURE__ */ jsx12("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx12("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
                   ]
                 }
-              ) : /* @__PURE__ */ jsx11("div", { style: { fontSize: "14px", fontWeight: "600", color: theme.textColor, padding: "6px 8px" }, children: strings.header.aiAssistant }) }),
-              /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-                availableAgents && availableAgents.length > 1 && onAgentChange && /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
-                  /* @__PURE__ */ jsxs8(
+              ) : /* @__PURE__ */ jsx12("div", { style: { fontSize: "14px", fontWeight: "600", color: theme.textColor, padding: "6px 8px" }, children: strings.header.aiAssistant }) }),
+              /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                availableAgents && availableAgents.length > 1 && onAgentChange && /* @__PURE__ */ jsxs9("div", { style: { position: "relative" }, children: [
+                  /* @__PURE__ */ jsxs9(
                     "button",
                     {
                       "data-testid": "agent-selector",
@@ -2208,7 +2381,7 @@ function UseAIChatPanel({
                       },
                       title: "Select AI model",
                       children: [
-                        /* @__PURE__ */ jsx11("span", { style: {
+                        /* @__PURE__ */ jsx12("span", { style: {
                           overflow: "hidden",
                           textOverflow: "ellipsis",
                           whiteSpace: "nowrap",
@@ -2217,11 +2390,11 @@ function UseAIChatPanel({
                           const agent = availableAgents.find((a) => a.id === (selectedAgent ?? defaultAgent));
                           return agent?.name || "AI";
                         })() }),
-                        /* @__PURE__ */ jsx11("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx11("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                        /* @__PURE__ */ jsx12("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx12("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
                       ]
                     }
                   ),
-                  agentDropdown.isOpen && /* @__PURE__ */ jsx11(
+                  agentDropdown.isOpen && /* @__PURE__ */ jsx12(
                     "div",
                     {
                       style: {
@@ -2241,7 +2414,7 @@ function UseAIChatPanel({
                       },
                       children: availableAgents.map((agent) => {
                         const isSelected = agent.id === (selectedAgent ?? defaultAgent);
-                        return /* @__PURE__ */ jsxs8(
+                        return /* @__PURE__ */ jsxs9(
                           "div",
                           {
                             "data-testid": "agent-option",
@@ -2271,13 +2444,13 @@ function UseAIChatPanel({
                               }
                             },
                             children: [
-                              /* @__PURE__ */ jsxs8("div", { style: { flex: 1, minWidth: 0 }, children: [
-                                /* @__PURE__ */ jsx11("div", { style: {
+                              /* @__PURE__ */ jsxs9("div", { style: { flex: 1, minWidth: 0 }, children: [
+                                /* @__PURE__ */ jsx12("div", { style: {
                                   fontSize: "13px",
                                   fontWeight: isSelected ? "600" : "500",
                                   color: isSelected ? theme.primaryColor : theme.textColor
                                 }, children: agent.name }),
-                                agent.annotation && /* @__PURE__ */ jsx11("div", { style: {
+                                agent.annotation && /* @__PURE__ */ jsx12("div", { style: {
                                   fontSize: "11px",
                                   color: theme.secondaryTextColor,
                                   marginTop: "2px",
@@ -2286,7 +2459,7 @@ function UseAIChatPanel({
                                   whiteSpace: "nowrap"
                                 }, children: agent.annotation })
                               ] }),
-                              isSelected && /* @__PURE__ */ jsx11("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx11("path", { d: "M2 7L5.5 10.5L12 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                              isSelected && /* @__PURE__ */ jsx12("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx12("path", { d: "M2 7L5.5 10.5L12 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
                             ]
                           },
                           agent.id
@@ -2295,7 +2468,7 @@ function UseAIChatPanel({
                     }
                   )
                 ] }),
-                onNewChat && /* @__PURE__ */ jsx11(
+                onNewChat && /* @__PURE__ */ jsx12(
                   "button",
                   {
                     "data-testid": "new-chat-button",
@@ -2322,10 +2495,10 @@ function UseAIChatPanel({
                       e.currentTarget.style.color = theme.secondaryTextColor;
                     },
                     title: strings.header.newChat,
-                    children: /* @__PURE__ */ jsx11("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx11("path", { d: "M8 3.5V12.5M3.5 8H12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                    children: /* @__PURE__ */ jsx12("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx12("path", { d: "M8 3.5V12.5M3.5 8H12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
                   }
                 ),
-                onDeleteChat && displayMessages.length > 0 && /* @__PURE__ */ jsx11(
+                onDeleteChat && displayMessages.length > 0 && /* @__PURE__ */ jsx12(
                   "button",
                   {
                     "data-testid": "delete-chat-button",
@@ -2349,7 +2522,7 @@ function UseAIChatPanel({
                       e.currentTarget.style.color = theme.secondaryTextColor;
                     },
                     title: strings.header.deleteChat,
-                    children: /* @__PURE__ */ jsx11("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx11("path", { d: "M2 4H14M6.5 7V11M9.5 7V11M3 4L4 13C4 13.5304 4.21071 14.0391 4.58579 14.4142C4.96086 14.7893 5.46957 15 6 15H10C10.5304 15 11.0391 14.7893 11.4142 14.4142C11.7893 14.0391 12 13.5304 12 13L13 4M5.5 4V2.5C5.5 2.23478 5.60536 1.98043 5.79289 1.79289C5.98043 1.60536 6.23478 1.5 6.5 1.5H9.5C9.76522 1.5 10.0196 1.60536 10.2071 1.79289C10.3946 1.98043 10.5 2.23478 10.5 2.5V4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                    children: /* @__PURE__ */ jsx12("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx12("path", { d: "M2 4H14M6.5 7V11M9.5 7V11M3 4L4 13C4 13.5304 4.21071 14.0391 4.58579 14.4142C4.96086 14.7893 5.46957 15 6 15H10C10.5304 15 11.0391 14.7893 11.4142 14.4142C11.7893 14.0391 12 13.5304 12 13L13 4M5.5 4V2.5C5.5 2.23478 5.60536 1.98043 5.79289 1.79289C5.98043 1.60536 6.23478 1.5 6.5 1.5H9.5C9.76522 1.5 10.0196 1.60536 10.2071 1.79289C10.3946 1.98043 10.5 2.23478 10.5 2.5V4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
                   }
                 ),
                 closeButton
@@ -2357,7 +2530,7 @@ function UseAIChatPanel({
             ]
           }
         ),
-        chatHistoryDropdown.isOpen && onListChats && /* @__PURE__ */ jsx11(
+        chatHistoryDropdown.isOpen && onListChats && /* @__PURE__ */ jsx12(
           "div",
           {
             style: {
@@ -2374,7 +2547,7 @@ function UseAIChatPanel({
               flexDirection: "column",
               overflow: "hidden"
             },
-            children: /* @__PURE__ */ jsx11(
+            children: /* @__PURE__ */ jsx12(
               "div",
               {
                 style: {
@@ -2382,7 +2555,7 @@ function UseAIChatPanel({
                   overflowY: "auto",
                   padding: "8px"
                 },
-                children: chatHistory.length === 0 ? /* @__PURE__ */ jsx11(
+                children: chatHistory.length === 0 ? /* @__PURE__ */ jsx12(
                   "div",
                   {
                     style: {
@@ -2391,9 +2564,9 @@ function UseAIChatPanel({
                       padding: "32px 16px",
                       fontSize: "13px"
                     },
-                    children: /* @__PURE__ */ jsx11("p", { style: { margin: 0 }, children: strings.chatHistory.noChatHistory })
+                    children: /* @__PURE__ */ jsx12("p", { style: { margin: 0 }, children: strings.chatHistory.noChatHistory })
                   }
-                ) : chatHistory.map((chat) => /* @__PURE__ */ jsxs8(
+                ) : chatHistory.map((chat) => /* @__PURE__ */ jsxs9(
                   "div",
                   {
                     "data-testid": "chat-history-item",
@@ -2417,10 +2590,10 @@ function UseAIChatPanel({
                       }
                     },
                     children: [
-                      /* @__PURE__ */ jsx11("div", { style: { fontSize: "13px", fontWeight: "500", color: theme.textColor, marginBottom: "4px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: chat.title || strings.header.newChat }),
-                      /* @__PURE__ */ jsxs8("div", { style: { fontSize: "11px", color: theme.secondaryTextColor }, children: [
+                      /* @__PURE__ */ jsx12("div", { style: { fontSize: "13px", fontWeight: "500", color: theme.textColor, marginBottom: "4px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: chat.title || strings.header.newChat }),
+                      /* @__PURE__ */ jsxs9("div", { style: { fontSize: "11px", color: theme.secondaryTextColor }, children: [
                         new Date(chat.updatedAt).toLocaleDateString([], { month: "short", day: "numeric" }),
-                        currentChatId === chat.id && /* @__PURE__ */ jsxs8("span", { style: {
+                        currentChatId === chat.id && /* @__PURE__ */ jsxs9("span", { style: {
                           marginLeft: "8px",
                           color: theme.primaryColor,
                           fontWeight: "600"
@@ -2439,7 +2612,7 @@ function UseAIChatPanel({
         ),
         chatHistoryDropdown.Backdrop,
         agentDropdown.Backdrop,
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs9(
           "div",
           {
             style: {
@@ -2451,7 +2624,7 @@ function UseAIChatPanel({
               gap: "12px"
             },
             children: [
-              displayMessages.length === 0 && /* @__PURE__ */ jsxs8(
+              displayMessages.length === 0 && /* @__PURE__ */ jsxs9(
                 "div",
                 {
                   style: {
@@ -2462,12 +2635,12 @@ function UseAIChatPanel({
                     gap: "20px"
                   },
                   children: [
-                    /* @__PURE__ */ jsxs8("div", { style: { textAlign: "center", color: theme.secondaryTextColor, fontSize: "14px" }, children: [
-                      /* @__PURE__ */ jsx11("p", { style: { margin: 0, fontSize: "32px", marginBottom: "12px" }, children: "\u{1F4AC}" }),
-                      /* @__PURE__ */ jsx11("p", { style: { margin: 0 }, children: strings.emptyChat.startConversation }),
-                      /* @__PURE__ */ jsx11("p", { style: { margin: "8px 0 0", fontSize: "12px" }, children: strings.emptyChat.askMeToHelp })
+                    /* @__PURE__ */ jsxs9("div", { style: { textAlign: "center", color: theme.secondaryTextColor, fontSize: "14px" }, children: [
+                      /* @__PURE__ */ jsx12("p", { style: { margin: 0, fontSize: "32px", marginBottom: "12px" }, children: "\u{1F4AC}" }),
+                      /* @__PURE__ */ jsx12("p", { style: { margin: 0 }, children: strings.emptyChat.startConversation }),
+                      /* @__PURE__ */ jsx12("p", { style: { margin: "8px 0 0", fontSize: "12px" }, children: strings.emptyChat.askMeToHelp })
                     ] }),
-                    displayedSuggestions.length > 0 && /* @__PURE__ */ jsx11(
+                    displayedSuggestions.length > 0 && /* @__PURE__ */ jsx12(
                       "div",
                       {
                         style: {
@@ -2477,7 +2650,7 @@ function UseAIChatPanel({
                           width: "100%",
                           maxWidth: "320px"
                         },
-                        children: displayedSuggestions.map((suggestion, index) => /* @__PURE__ */ jsx11(
+                        children: displayedSuggestions.map((suggestion, index) => /* @__PURE__ */ jsx12(
                           "button",
                           {
                             "data-testid": "chat-suggestion-button",
@@ -2521,7 +2694,7 @@ function UseAIChatPanel({
                   ]
                 }
               ),
-              displayMessages.map((message) => /* @__PURE__ */ jsxs8(
+              displayMessages.map((message) => /* @__PURE__ */ jsxs9(
                 "div",
                 {
                   "data-testid": `chat-message-${message.role}`,
@@ -2534,7 +2707,7 @@ function UseAIChatPanel({
                   onMouseEnter: () => message.role === "user" && setHoveredMessageId(message.id),
                   onMouseLeave: () => setHoveredMessageId(null),
                   children: [
-                    /* @__PURE__ */ jsxs8(
+                    /* @__PURE__ */ jsxs9(
                       "div",
                       {
                         style: {
@@ -2542,7 +2715,7 @@ function UseAIChatPanel({
                           maxWidth: "80%"
                         },
                         children: [
-                          message.role === "user" && hoveredMessageId === message.id && onSaveCommand && !slashCommands.isSavingCommand(message.id) && /* @__PURE__ */ jsx11(
+                          message.role === "user" && hoveredMessageId === message.id && onSaveCommand && !slashCommands.isSavingCommand(message.id) && /* @__PURE__ */ jsx12(
                             "button",
                             {
                               "data-testid": "save-command-button",
@@ -2578,14 +2751,14 @@ function UseAIChatPanel({
                                 e.currentTarget.style.transform = "scale(1)";
                                 e.currentTarget.style.boxShadow = "0 2px 6px rgba(0, 0, 0, 0.15)";
                               },
-                              children: /* @__PURE__ */ jsxs8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                                /* @__PURE__ */ jsx11("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
-                                /* @__PURE__ */ jsx11("polyline", { points: "17 21 17 13 7 13 7 21" }),
-                                /* @__PURE__ */ jsx11("polyline", { points: "7 3 7 8 15 8" })
+                              children: /* @__PURE__ */ jsxs9("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                                /* @__PURE__ */ jsx12("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
+                                /* @__PURE__ */ jsx12("polyline", { points: "17 21 17 13 7 13 7 21" }),
+                                /* @__PURE__ */ jsx12("polyline", { points: "7 3 7 8 15 8" })
                               ] })
                             }
                           ),
-                          /* @__PURE__ */ jsxs8(
+                          /* @__PURE__ */ jsxs9(
                             "div",
                             {
                               "data-testid": "chat-message-content",
@@ -2600,7 +2773,7 @@ function UseAIChatPanel({
                                 wordWrap: "break-word"
                               },
                               children: [
-                                message.role === "user" && hasFileContent(message.content) && /* @__PURE__ */ jsx11("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px", marginBottom: "8px" }, children: message.content.filter((part) => part.type === "file").map((part, idx) => /* @__PURE__ */ jsx11(
+                                message.role === "user" && hasFileContent(message.content) && /* @__PURE__ */ jsx12("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px", marginBottom: "8px" }, children: message.content.filter((part) => part.type === "file").map((part, idx) => /* @__PURE__ */ jsx12(
                                   FilePlaceholder,
                                   {
                                     name: part.file.name,
@@ -2608,7 +2781,17 @@ function UseAIChatPanel({
                                   },
                                   idx
                                 )) }),
-                                message.role === "assistant" ? /* @__PURE__ */ jsx11(MarkdownContent, { content: getTextFromContent(message.content) }) : getTextFromContent(message.content)
+                                message.role === "assistant" ? /* @__PURE__ */ jsxs9(Fragment, { children: [
+                                  message.reasoningParts && message.reasoningParts.length > 0 && /* @__PURE__ */ jsx12(
+                                    Reasoning,
+                                    {
+                                      reasoningParts: message.reasoningParts,
+                                      theme,
+                                      strings
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx12(MarkdownContent, { content: getTextFromContent(message.content) })
+                                ] }) : getTextFromContent(message.content)
                               ]
                             }
                           ),
@@ -2619,7 +2802,7 @@ function UseAIChatPanel({
                         ]
                       }
                     ),
-                    message.role === "assistant" && message.traceId && feedbackEnabled && onFeedback && /* @__PURE__ */ jsxs8(
+                    message.role === "assistant" && message.traceId && feedbackEnabled && onFeedback && /* @__PURE__ */ jsxs9(
                       "div",
                       {
                         "data-testid": "feedback-buttons",
@@ -2630,7 +2813,7 @@ function UseAIChatPanel({
                           padding: "0 4px"
                         },
                         children: [
-                          /* @__PURE__ */ jsx11(
+                          /* @__PURE__ */ jsx12(
                             FeedbackButton,
                             {
                               type: "upvote",
@@ -2643,7 +2826,7 @@ function UseAIChatPanel({
                               unselectedColor: theme.secondaryTextColor
                             }
                           ),
-                          /* @__PURE__ */ jsx11(
+                          /* @__PURE__ */ jsx12(
                             FeedbackButton,
                             {
                               type: "downvote",
@@ -2659,7 +2842,7 @@ function UseAIChatPanel({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx11(
+                    /* @__PURE__ */ jsx12(
                       "div",
                       {
                         style: {
@@ -2678,14 +2861,14 @@ function UseAIChatPanel({
                 },
                 message.id
               )),
-              loading && /* @__PURE__ */ jsx11(
+              loading && /* @__PURE__ */ jsx12(
                 "div",
                 {
                   style: {
                     display: "flex",
                     alignItems: "flex-start"
                   },
-                  children: /* @__PURE__ */ jsx11(
+                  children: /* @__PURE__ */ jsx12(
                     "div",
                     {
                       className: "markdown-content",
@@ -2698,20 +2881,33 @@ function UseAIChatPanel({
                         color: theme.textColor,
                         maxWidth: "80%"
                       },
-                      children: streamingText ? /* @__PURE__ */ jsx11(MarkdownContent, { content: streamingText }) : fileProcessing && fileProcessing.status === "processing" ? /* @__PURE__ */ jsxs8("div", { children: [
-                        /* @__PURE__ */ jsx11("span", { style: { opacity: 0.6 }, children: strings.input.processingFile }),
-                        fileProcessing.progress != null && /* @__PURE__ */ jsxs8(Fragment, { children: [
-                          /* @__PURE__ */ jsxs8("span", { style: { opacity: 0.6, marginLeft: "4px" }, children: [
+                      children: streamingText || streamingReasoning ? /* @__PURE__ */ jsxs9(Fragment, { children: [
+                        streamingReasoning && /* @__PURE__ */ jsx12(
+                          Reasoning,
+                          {
+                            reasoningParts: [],
+                            isStreaming: true,
+                            streamingText: streamingReasoning,
+                            theme,
+                            strings
+                          }
+                        ),
+                        streamingText && /* @__PURE__ */ jsx12(MarkdownContent, { content: streamingText }),
+                        !streamingText && /* @__PURE__ */ jsx12("span", { className: "dots", style: { opacity: 0.6 }, children: "..." })
+                      ] }) : fileProcessing && fileProcessing.status === "processing" ? /* @__PURE__ */ jsxs9("div", { children: [
+                        /* @__PURE__ */ jsx12("span", { style: { opacity: 0.6 }, children: strings.input.processingFile }),
+                        fileProcessing.progress != null && /* @__PURE__ */ jsxs9(Fragment, { children: [
+                          /* @__PURE__ */ jsxs9("span", { style: { opacity: 0.6, marginLeft: "4px" }, children: [
                             Math.round(fileProcessing.progress),
                             "%"
                           ] }),
-                          /* @__PURE__ */ jsx11("div", { style: {
+                          /* @__PURE__ */ jsx12("div", { style: {
                             marginTop: "6px",
                             height: "4px",
                             borderRadius: "2px",
                             background: theme.borderColor,
                             overflow: "hidden"
-                          }, children: /* @__PURE__ */ jsx11("div", { style: {
+                          }, children: /* @__PURE__ */ jsx12("div", { style: {
                             height: "100%",
                             width: `${fileProcessing.progress}%`,
                             borderRadius: "2px",
@@ -2719,17 +2915,17 @@ function UseAIChatPanel({
                             transition: "width 0.3s ease"
                           } }) })
                         ] }),
-                        fileProcessing.progress == null && /* @__PURE__ */ jsx11("span", { className: "dots", style: { marginLeft: "4px" }, children: "..." })
-                      ] }) : /* @__PURE__ */ jsx11("span", { className: "dots", style: { opacity: 0.6 }, children: "..." })
+                        fileProcessing.progress == null && /* @__PURE__ */ jsx12("span", { className: "dots", style: { marginLeft: "4px" }, children: "..." })
+                      ] }) : /* @__PURE__ */ jsx12("span", { className: "dots", style: { opacity: 0.6 }, children: "..." })
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ jsx11("div", { ref: messagesEndRef })
+              /* @__PURE__ */ jsx12("div", { ref: messagesEndRef })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs9(
           "div",
           {
             style: {
@@ -2737,7 +2933,7 @@ function UseAIChatPanel({
               borderTop: `1px solid ${theme.borderColor}`
             },
             children: [
-              fileError && /* @__PURE__ */ jsx11(
+              fileError && /* @__PURE__ */ jsx12(
                 "div",
                 {
                   "data-testid": "file-error",
@@ -2752,7 +2948,7 @@ function UseAIChatPanel({
                   children: fileError
                 }
               ),
-              attachments.length > 0 && /* @__PURE__ */ jsx11(
+              attachments.length > 0 && /* @__PURE__ */ jsx12(
                 "div",
                 {
                   "data-testid": "file-attachments",
@@ -2762,7 +2958,7 @@ function UseAIChatPanel({
                     gap: "8px",
                     marginBottom: "8px"
                   },
-                  children: attachments.map((attachment) => /* @__PURE__ */ jsx11(
+                  children: attachments.map((attachment) => /* @__PURE__ */ jsx12(
                     FileChip,
                     {
                       attachment,
@@ -2774,7 +2970,7 @@ function UseAIChatPanel({
                   ))
                 }
               ),
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx12(
                 "input",
                 {
                   ref: fileInputRef,
@@ -2786,7 +2982,7 @@ function UseAIChatPanel({
                   accept: acceptedTypes?.join(",")
                 }
               ),
-              pendingApprovals.length > 0 && onApproveToolCall && onRejectToolCall ? /* @__PURE__ */ jsx11(
+              pendingApprovals.length > 0 && onApproveToolCall && onRejectToolCall ? /* @__PURE__ */ jsx12(
                 ToolApprovalDialog,
                 {
                   toolCallName: pendingApprovals[0].toolCallName,
@@ -2801,7 +2997,7 @@ function UseAIChatPanel({
                 }
               ) : (
                 /* Input container - single border around everything */
-                /* @__PURE__ */ jsxs8(
+                /* @__PURE__ */ jsxs9(
                   "div",
                   {
                     style: {
@@ -2813,7 +3009,7 @@ function UseAIChatPanel({
                     },
                     children: [
                       slashCommands.AutocompleteComponent,
-                      /* @__PURE__ */ jsx11(
+                      /* @__PURE__ */ jsx12(
                         "textarea",
                         {
                           ref: textareaRef,
@@ -2841,7 +3037,7 @@ function UseAIChatPanel({
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsxs8(
+                      /* @__PURE__ */ jsxs9(
                         "div",
                         {
                           style: {
@@ -2851,7 +3047,7 @@ function UseAIChatPanel({
                             padding: "4px 8px"
                           },
                           children: [
-                            /* @__PURE__ */ jsx11("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: fileUploadEnabled && /* @__PURE__ */ jsx11(
+                            /* @__PURE__ */ jsx12("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: fileUploadEnabled && /* @__PURE__ */ jsx12(
                               "button",
                               {
                                 "data-testid": "file-picker-button",
@@ -2883,13 +3079,13 @@ function UseAIChatPanel({
                                   e.currentTarget.style.borderColor = theme.borderColor;
                                 },
                                 title: strings.fileUpload.attachFiles,
-                                children: /* @__PURE__ */ jsxs8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                                  /* @__PURE__ */ jsx11("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-                                  /* @__PURE__ */ jsx11("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+                                children: /* @__PURE__ */ jsxs9("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                                  /* @__PURE__ */ jsx12("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+                                  /* @__PURE__ */ jsx12("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
                                 ] })
                               }
                             ) }),
-                            /* @__PURE__ */ jsx11(
+                            /* @__PURE__ */ jsx12(
                               "button",
                               {
                                 "data-testid": "chat-send-button",
@@ -2910,9 +3106,9 @@ function UseAIChatPanel({
                                   height: "32px",
                                   transition: "all 0.2s"
                                 },
-                                children: /* @__PURE__ */ jsxs8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                                  /* @__PURE__ */ jsx11("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
-                                  /* @__PURE__ */ jsx11("polyline", { points: "5 12 12 5 19 12" })
+                                children: /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                                  /* @__PURE__ */ jsx12("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
+                                  /* @__PURE__ */ jsx12("polyline", { points: "5 12 12 5 19 12" })
                                 ] })
                               }
                             )
@@ -2926,7 +3122,7 @@ function UseAIChatPanel({
             ]
           }
         ),
-        /* @__PURE__ */ jsx11("style", { children: `
+        /* @__PURE__ */ jsx12("style", { children: `
         /* Markdown content styles */
         .markdown-content > :first-child {
           margin-top: 0 !important;
@@ -2951,7 +3147,7 @@ function UseAIChatPanel({
 }
 
 // src/components/UseAIFloatingChatWrapper.tsx
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function UseAIFloatingChatWrapper({
   isOpen,
   onClose,
@@ -2959,8 +3155,8 @@ function UseAIFloatingChatWrapper({
 }) {
   const theme = useTheme();
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
+    /* @__PURE__ */ jsx13(
       "div",
       {
         style: {
@@ -2976,7 +3172,7 @@ function UseAIFloatingChatWrapper({
         onClick: onClose
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       "div",
       {
         style: {
@@ -2995,7 +3191,7 @@ function UseAIFloatingChatWrapper({
         children
       }
     ),
-    /* @__PURE__ */ jsx12("style", { children: `
+    /* @__PURE__ */ jsx13("style", { children: `
         @keyframes fadeIn {
           from { opacity: 0; }
           to { opacity: 1; }
@@ -3015,7 +3211,7 @@ function UseAIFloatingChatWrapper({
 }
 function CloseButton({ onClick }) {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "button",
     {
       "data-testid": "chat-close-button",
@@ -3050,7 +3246,7 @@ function CloseButton({ onClick }) {
 
 // src/components/UseAIChat.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var __UseAIChatContext = createContext3(null);
 function useChatUIContext() {
   const context = useContext3(__UseAIChatContext);
@@ -3069,6 +3265,7 @@ function UseAIChat({ floating = false }) {
     loading: ctx.loading,
     connected: ctx.connected,
     streamingText: ctx.streamingText,
+    streamingReasoning: ctx.streamingReasoning,
     currentChatId: ctx.history.currentId,
     onNewChat: ctx.history.create,
     onLoadChat: ctx.history.load,
@@ -3094,22 +3291,22 @@ function UseAIChat({ floating = false }) {
     onRejectToolCall: ctx.tools.pending.tools.length > 0 ? ctx.tools.pending.rejectAll : void 0
   };
   if (floating) {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       UseAIFloatingChatWrapper,
       {
         isOpen: ctx.ui.isOpen,
         onClose: () => ctx.ui.setOpen(false),
-        children: /* @__PURE__ */ jsx13(
+        children: /* @__PURE__ */ jsx14(
           UseAIChatPanel,
           {
             ...chatPanelProps,
-            closeButton: /* @__PURE__ */ jsx13(CloseButton, { onClick: () => ctx.ui.setOpen(false) })
+            closeButton: /* @__PURE__ */ jsx14(CloseButton, { onClick: () => ctx.ui.setOpen(false) })
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ jsx13(UseAIChatPanel, { ...chatPanelProps });
+  return /* @__PURE__ */ jsx14(UseAIChatPanel, { ...chatPanelProps });
 }
 
 // src/client.ts
@@ -3152,6 +3349,9 @@ var UseAIClient = class {
   _pendingToolResults = [];
   // Tool call assembly
   currentToolCalls = /* @__PURE__ */ new Map();
+  // Reasoning/thinking assembly
+  _currentReasoningBlocks = [];
+  _currentReasoningBlockText = "";
   // Feedback tracking
   _langfuseEnabled = false;
   langfuseConfigHandlers = /* @__PURE__ */ new Set();
@@ -3219,6 +3419,8 @@ var UseAIClient = class {
       };
       this._currentAssistantToolCalls = [];
       this._pendingToolResults = [];
+      this._currentReasoningBlocks = [];
+      this._currentReasoningBlockText = "";
     }
     if (event.type === EventType.TEXT_MESSAGE_START) {
       const e = event;
@@ -3257,6 +3459,27 @@ var UseAIClient = class {
           }
         });
       }
+    } else if (event.type === EventType.REASONING_MESSAGE_START) {
+      this._currentReasoningBlockText = "";
+    } else if (event.type === EventType.REASONING_MESSAGE_CONTENT) {
+      const e = event;
+      this._currentReasoningBlockText += e.delta;
+    } else if (event.type === EventType.REASONING_MESSAGE_END) {
+      this._currentReasoningBlocks.push({
+        text: this._currentReasoningBlockText
+      });
+      this._currentReasoningBlockText = "";
+    } else if (event.type === EventType.REASONING_ENCRYPTED_VALUE) {
+      const e = event;
+      if (e.subtype === "message" && this._currentReasoningBlocks.length > 0) {
+        const lastBlock = this._currentReasoningBlocks[this._currentReasoningBlocks.length - 1];
+        lastBlock.encryptedValue = e.encryptedValue;
+      } else if (e.subtype === "tool-call" && e.entityId) {
+        const tc = this._currentAssistantToolCalls.find((tc2) => tc2.id === e.entityId);
+        if (tc) {
+          tc.encryptedValue = e.encryptedValue;
+        }
+      }
     } else if (event.type === EventType.TOOL_CALL_RESULT) {
       const e = event;
       const alreadyTracked = this._pendingToolResults.some(
@@ -3272,26 +3495,31 @@ var UseAIClient = class {
       }
     } else if (event.type === EventType.STEP_FINISHED) {
       if (this._currentAssistantToolCalls.length > 0 && this._currentAssistantMessage) {
+        const reasoningParts = this._currentReasoningBlocks.length > 0 ? [...this._currentReasoningBlocks] : void 0;
         const assistantMsg = {
           id: this._currentAssistantMessage.id || uuidv42(),
           role: "assistant",
           content: this._currentAssistantMessage.content || "",
-          toolCalls: [...this._currentAssistantToolCalls]
+          toolCalls: [...this._currentAssistantToolCalls],
+          ...reasoningParts ? { reasoningParts } : {}
         };
         this._messages.push(assistantMsg);
         this._messages.push(...this._pendingToolResults);
         this._currentAssistantMessage = { id: uuidv42(), role: "assistant", content: "" };
         this._currentAssistantToolCalls = [];
         this._pendingToolResults = [];
+        this._currentReasoningBlocks = [];
       }
     } else if (event.type === EventType.RUN_FINISHED) {
       if (this._currentAssistantMessage) {
+        const reasoningParts = this._currentReasoningBlocks.length > 0 ? [...this._currentReasoningBlocks] : void 0;
         if (this._currentAssistantToolCalls.length > 0) {
           const toolCallMessage = {
             id: uuidv42(),
             role: "assistant",
             content: "",
-            toolCalls: this._currentAssistantToolCalls
+            toolCalls: this._currentAssistantToolCalls,
+            ...reasoningParts ? { reasoningParts } : {}
           };
           this._messages.push(toolCallMessage);
           this._messages.push(...this._pendingToolResults);
@@ -3305,7 +3533,8 @@ var UseAIClient = class {
           const assistantMessage = {
             id: this._currentAssistantMessage.id,
             role: "assistant",
-            content: this._currentAssistantMessage.content || ""
+            content: this._currentAssistantMessage.content || "",
+            ...reasoningParts ? { reasoningParts } : {}
           };
           this._messages.push(assistantMessage);
         }
@@ -3528,6 +3757,12 @@ var UseAIClient = class {
   get currentMessageContent() {
     return this._currentMessageContent;
   }
+  /**
+   * Gets the current reasoning blocks collected during the current run.
+   */
+  get currentReasoningBlocks() {
+    return this._currentReasoningBlocks;
+  }
   /**
    * Gets the current thread ID for this session.
    * Generates a new one if not set.
@@ -3942,7 +4177,7 @@ var LocalStorageChatRepository = class {
 };
 
 // src/hooks/useChatManagement.ts
-import { useState as useState6, useCallback as useCallback4, useRef as useRef5, useEffect as useEffect5 } from "react";
+import { useState as useState7, useCallback as useCallback5, useRef as useRef5, useEffect as useEffect5 } from "react";
 
 // src/utils/messageConversion.ts
 function transformMessagesToClientFormat(persistedMessages) {
@@ -3961,7 +4196,8 @@ function transformMessagesToClientFormat(persistedMessages) {
           id: msg.id,
           role: "assistant",
           content: textContent,
-          ...msg.toolCalls && msg.toolCalls.length > 0 ? { toolCalls: msg.toolCalls } : {}
+          ...msg.toolCalls && msg.toolCalls.length > 0 ? { toolCalls: msg.toolCalls } : {},
+          ...msg.reasoningParts && msg.reasoningParts.length > 0 ? { reasoningParts: msg.reasoningParts } : {}
         };
       case "user":
         return {
@@ -3977,12 +4213,14 @@ function extractTurnMessages(messages, startIndex) {
   const result = [];
   for (const msg of turnSlice) {
     if (msg.role === "assistant" && "toolCalls" in msg && msg.toolCalls) {
+      const reasoningParts = "reasoningParts" in msg && msg.reasoningParts ? msg.reasoningParts : void 0;
       result.push({
         id: msg.id,
         role: "assistant",
         content: typeof msg.content === "string" ? msg.content : "",
         createdAt: /* @__PURE__ */ new Date(),
-        toolCalls: msg.toolCalls
+        toolCalls: msg.toolCalls,
+        ...reasoningParts ? { reasoningParts } : {}
       });
     } else if (msg.role === "tool") {
       result.push({
@@ -4012,8 +4250,8 @@ function useChatManagement({
   setMessages,
   connected
 }) {
-  const [currentChatId, setCurrentChatId] = useState6(null);
-  const [pendingChatId, setPendingChatId] = useState6(null);
+  const [currentChatId, setCurrentChatId] = useState7(null);
+  const [pendingChatId, setPendingChatId] = useState7(null);
   const currentChatIdSnapshot = useRef5(null);
   const pendingChatIdSnapshot = useRef5(null);
   useEffect5(() => {
@@ -4022,7 +4260,7 @@ function useChatManagement({
   useEffect5(() => {
     pendingChatIdSnapshot.current = pendingChatId;
   }, [pendingChatId]);
-  const loadChatMessages = useCallback4(async (chatId) => {
+  const loadChatMessages = useCallback5(async (chatId) => {
     try {
       const chat = await repository.loadChat(chatId);
       if (chat) {
@@ -4037,11 +4275,11 @@ function useChatManagement({
       return [];
     }
   }, [repository]);
-  const reloadMessages = useCallback4(async (chatId) => {
+  const reloadMessages = useCallback5(async (chatId) => {
     const loadedMessages = await loadChatMessages(chatId);
     setMessages(loadedMessages);
   }, [loadChatMessages, setMessages]);
-  const createNewChat = useCallback4(async (options) => {
+  const createNewChat = useCallback5(async (options) => {
     console.log("[ChatManagement] createNewChat called - currentChatId:", currentChatId, "pendingChatId:", pendingChatId, "messages.length:", messages.length);
     if (pendingChatId && messages.length === 0) {
       const existingChat = await repository.loadChat(pendingChatId);
@@ -4062,7 +4300,7 @@ function useChatManagement({
     console.log("[ChatManagement] Created pending chat:", chatId, "(will activate on first message)");
     return chatId;
   }, [currentChatId, pendingChatId, messages, repository, clientRef, setMessages]);
-  const loadChat = useCallback4(async (chatId) => {
+  const loadChat = useCallback5(async (chatId) => {
     setPendingChatId(chatId);
     await reloadMessages(chatId);
     if (clientRef.current) {
@@ -4071,7 +4309,7 @@ function useChatManagement({
     }
     console.log("[ChatManagement] Loaded pending chat:", chatId, "(will activate on first message)");
   }, [reloadMessages, clientRef]);
-  const deleteChat = useCallback4(async (chatId) => {
+  const deleteChat = useCallback5(async (chatId) => {
     await repository.deleteChat(chatId);
     if (currentChatId === chatId) {
       setCurrentChatId(null);
@@ -4083,10 +4321,10 @@ function useChatManagement({
     }
     console.log("[ChatManagement] Deleted chat:", chatId);
   }, [currentChatId, pendingChatId, repository, setMessages]);
-  const listChats = useCallback4(async () => {
+  const listChats = useCallback5(async () => {
     return await repository.listChats();
   }, [repository]);
-  const clearCurrentChat = useCallback4(async () => {
+  const clearCurrentChat = useCallback5(async () => {
     setMessages([]);
     if (currentChatId) {
       const chat = await repository.loadChat(currentChatId);
@@ -4097,7 +4335,7 @@ function useChatManagement({
       }
     }
   }, [currentChatId, repository, setMessages]);
-  const getCurrentChat = useCallback4(async () => {
+  const getCurrentChat = useCallback5(async () => {
     const chatId = pendingChatId || currentChatId;
     if (!chatId) return null;
     const chat = await repository.loadChat(chatId);
@@ -4106,14 +4344,14 @@ function useChatManagement({
     }
     return chat;
   }, [pendingChatId, currentChatId, repository]);
-  const updateMetadata = useCallback4(async (metadata, overwrite = false) => {
+  const updateMetadata = useCallback5(async (metadata, overwrite = false) => {
     const chatId = pendingChatId || currentChatId;
     if (!chatId) {
       throw new Error("No active chat");
     }
     await repository.updateMetadata(chatId, metadata, overwrite);
   }, [pendingChatId, currentChatId, repository]);
-  const activatePendingChat = useCallback4(() => {
+  const activatePendingChat = useCallback5(() => {
     if (!pendingChatId) return null;
     console.log("[ChatManagement] Activating pending chat:", pendingChatId);
     if (clientRef.current && messages.length > 0) {
@@ -4124,7 +4362,7 @@ function useChatManagement({
     setPendingChatId(null);
     return pendingChatId;
   }, [pendingChatId, clientRef, messages]);
-  const saveUserMessage = useCallback4(async (chatId, content) => {
+  const saveUserMessage = useCallback5(async (chatId, content) => {
     try {
       const chat = await repository.loadChat(chatId);
       if (!chat) {
@@ -4153,7 +4391,7 @@ function useChatManagement({
       return false;
     }
   }, [repository, setMessages]);
-  const saveAIResponse = useCallback4(async (content, displayMode, traceId, turnMessages) => {
+  const saveAIResponse = useCallback5(async (content, displayMode, traceId, turnMessages, reasoningParts) => {
     const currentChatIdValue = currentChatIdSnapshot.current;
     const pendingChatIdValue = pendingChatIdSnapshot.current;
     const displayedChatId2 = pendingChatIdValue || currentChatIdValue;
@@ -4176,7 +4414,8 @@ function useChatManagement({
         content,
         createdAt: /* @__PURE__ */ new Date(),
         displayMode,
-        traceId
+        traceId,
+        ...reasoningParts && reasoningParts.length > 0 ? { reasoningParts } : {}
       };
       chat.messages.push(finalMessage);
       if (!chat.title) {
@@ -4273,7 +4512,7 @@ function useChatManagement({
 }
 
 // src/hooks/useAgentSelection.ts
-import { useState as useState7, useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo3 } from "react";
+import { useState as useState8, useCallback as useCallback6, useEffect as useEffect6, useMemo as useMemo3 } from "react";
 function filterAgents(serverAgents, defaultAgentId, visibleAgentIds) {
   const getDefaultAgentFallback = () => {
     const defaultAgentInfo = serverAgents.find((a) => a.id === defaultAgentId);
@@ -4299,14 +4538,14 @@ function useAgentSelection({
   connected,
   visibleAgentIds
 }) {
-  const [serverAgents, setServerAgents] = useState7([]);
-  const [defaultAgent, setDefaultAgent] = useState7(null);
-  const [selectedAgent, setSelectedAgent] = useState7(null);
+  const [serverAgents, setServerAgents] = useState8([]);
+  const [defaultAgent, setDefaultAgent] = useState8(null);
+  const [selectedAgent, setSelectedAgent] = useState8(null);
   const availableAgents = useMemo3(
     () => filterAgents(serverAgents, defaultAgent, visibleAgentIds),
     [serverAgents, defaultAgent, visibleAgentIds]
   );
-  const setAgent = useCallback5((agentId) => {
+  const setAgent = useCallback6((agentId) => {
     setSelectedAgent(agentId);
     if (clientRef.current) {
       clientRef.current.setAgent(agentId);
@@ -4338,7 +4577,7 @@ function useAgentSelection({
 }
 
 // src/hooks/useCommandManagement.ts
-import { useState as useState8, useCallback as useCallback6, useRef as useRef6, useEffect as useEffect7 } from "react";
+import { useState as useState9, useCallback as useCallback7, useRef as useRef6, useEffect as useEffect7 } from "react";
 
 // src/commands/LocalStorageCommandRepository.ts
 var STORAGE_KEY_PREFIX2 = "use-ai:command:";
@@ -4471,8 +4710,8 @@ function useCommandManagement({
   const repositoryRef = useRef6(
     repository || new LocalStorageCommandRepository()
   );
-  const [commands, setCommands] = useState8([]);
-  const refreshCommands = useCallback6(async () => {
+  const [commands, setCommands] = useState9([]);
+  const refreshCommands = useCallback7(async () => {
     try {
       const cmdList = await repositoryRef.current.listCommands();
       setCommands(cmdList);
@@ -4481,13 +4720,13 @@ function useCommandManagement({
       console.error("[CommandManagement] Failed to load commands:", err);
     }
   }, []);
-  const saveCommand = useCallback6(async (name, text) => {
+  const saveCommand = useCallback7(async (name, text) => {
     const id = await repositoryRef.current.createCommand({ name, text });
     await refreshCommands();
     console.log("[CommandManagement] Saved command:", name);
     return id;
   }, [refreshCommands]);
-  const renameCommand = useCallback6(async (id, newName) => {
+  const renameCommand = useCallback7(async (id, newName) => {
     const command = await repositoryRef.current.loadCommand(id);
     if (!command) throw new Error(`Command ${id} not found`);
     command.name = newName.trim();
@@ -4495,7 +4734,7 @@ function useCommandManagement({
     await refreshCommands();
     console.log("[CommandManagement] Renamed command:", id, "to", newName);
   }, [refreshCommands]);
-  const deleteCommand = useCallback6(async (id) => {
+  const deleteCommand = useCallback7(async (id) => {
     await repositoryRef.current.deleteCommand(id);
     await refreshCommands();
     console.log("[CommandManagement] Deleted command:", id);
@@ -4513,22 +4752,22 @@ function useCommandManagement({
 }
 
 // src/hooks/useToolSystem.ts
-import { useState as useState9, useCallback as useCallback7, useRef as useRef7, useMemo as useMemo4 } from "react";
+import { useState as useState10, useCallback as useCallback8, useRef as useRef7, useMemo as useMemo4 } from "react";
 function useToolSystem({
   clientRef,
   buildState
 }) {
   const toolRegistryRef = useRef7(/* @__PURE__ */ new Map());
-  const [toolRegistryVersion, setToolRegistryVersion] = useState9(0);
+  const [toolRegistryVersion, setToolRegistryVersion] = useState10(0);
   const toolOwnershipRef = useRef7(/* @__PURE__ */ new Map());
   const invisibleRef = useRef7(/* @__PURE__ */ new Set());
   const readyStateRef = useRef7(/* @__PURE__ */ new Map());
   const readyListenersRef = useRef7(/* @__PURE__ */ new Set());
   const waitersRef = useRef7(/* @__PURE__ */ new Map());
-  const [pendingApprovals, setPendingApprovals] = useState9([]);
+  const [pendingApprovals, setPendingApprovals] = useState10([]);
   const pendingApprovalToolCallsRef = useRef7(/* @__PURE__ */ new Map());
   const runtimeApprovalResolversRef = useRef7(/* @__PURE__ */ new Map());
-  const registerTools = useCallback7((id, tools, options) => {
+  const registerTools = useCallback8((id, tools, options) => {
     const existingTools = toolRegistryRef.current.get(id);
     toolRegistryRef.current.set(id, tools);
     readyStateRef.current.set(id, false);
@@ -4550,14 +4789,14 @@ function useToolSystem({
       invisibleRef.current.delete(id);
     }
   }, []);
-  const signalReady = useCallback7((id) => {
+  const signalReady = useCallback8((id) => {
     if (!toolRegistryRef.current.has(id)) {
       return;
     }
     readyStateRef.current.set(id, true);
     readyListenersRef.current.forEach((listener) => listener());
   }, []);
-  const unregisterTools = useCallback7((id) => {
+  const unregisterTools = useCallback8((id) => {
     const tools = toolRegistryRef.current.get(id);
     if (tools) {
       Object.keys(tools).forEach((toolName) => {
@@ -4570,7 +4809,7 @@ function useToolSystem({
     invisibleRef.current.delete(id);
     readyListenersRef.current.forEach((listener) => listener());
   }, []);
-  const isInvisible = useCallback7((id) => {
+  const isInvisible = useCallback8((id) => {
     return invisibleRef.current.has(id);
   }, []);
   const aggregatedTools = useMemo4(() => {
@@ -4583,7 +4822,7 @@ function useToolSystem({
   const hasTools = toolRegistryRef.current.size > 0;
   const aggregatedToolsRef = useRef7(aggregatedTools);
   aggregatedToolsRef.current = aggregatedTools;
-  const waitForToolsToStabilize = useCallback7(async () => {
+  const waitForToolsToStabilize = useCallback8(async () => {
     const maxWaitMs = 500;
     const checkAllReady = () => {
       if (readyStateRef.current.size === 0) return true;
@@ -4620,16 +4859,16 @@ function useToolSystem({
       onReadyChange();
     });
   }, []);
-  const registerWaiter = useCallback7((id, waiter) => {
+  const registerWaiter = useCallback8((id, waiter) => {
     waitersRef.current.set(id, waiter);
   }, []);
-  const unregisterWaiter = useCallback7((id) => {
+  const unregisterWaiter = useCallback8((id) => {
     waitersRef.current.delete(id);
   }, []);
-  const getWaiter = useCallback7((id) => {
+  const getWaiter = useCallback8((id) => {
     return waitersRef.current.get(id);
   }, []);
-  const handleApprovalRequest = useCallback7((event) => {
+  const handleApprovalRequest = useCallback8((event) => {
     console.log("[useToolSystem] Tool approval requested:", event.toolCallName, event.toolCallId);
     setPendingApprovals((prev) => [
       ...prev,
@@ -4643,7 +4882,7 @@ function useToolSystem({
       }
     ]);
   }, []);
-  const executeToolCall = useCallback7(async (toolCallId, name, input) => {
+  const executeToolCall = useCallback8(async (toolCallId, name, input) => {
     const client = clientRef.current;
     if (!client) {
       console.error("[useToolSystem] No client available for tool execution");
@@ -4699,11 +4938,11 @@ function useToolSystem({
       });
     }
   }, [clientRef, isInvisible, getWaiter, waitForToolsToStabilize, buildState]);
-  const storePendingToolCall = useCallback7((toolCallId, name, input, toolCallData) => {
+  const storePendingToolCall = useCallback8((toolCallId, name, input, toolCallData) => {
     console.log(`[useToolSystem] Storing pending tool call "${name}" for approval`);
     pendingApprovalToolCallsRef.current.set(toolCallId, { name, input, toolCallData });
   }, []);
-  const executePendingToolAfterApproval = useCallback7(async (toolCallId) => {
+  const executePendingToolAfterApproval = useCallback8(async (toolCallId) => {
     const pendingTool = pendingApprovalToolCallsRef.current.get(toolCallId);
     if (!pendingTool) {
       console.warn(`[useToolSystem] No pending tool found for ${toolCallId}`);
@@ -4712,7 +4951,7 @@ function useToolSystem({
     pendingApprovalToolCallsRef.current.delete(toolCallId);
     await executeToolCall(toolCallId, pendingTool.name, pendingTool.input);
   }, [executeToolCall]);
-  const approveAll = useCallback7(async () => {
+  const approveAll = useCallback8(async () => {
     if (!clientRef.current) return;
     console.log("[useToolSystem] Approving all tool calls:", pendingApprovals.length);
     const pendingTools = [...pendingApprovals];
@@ -4728,7 +4967,7 @@ function useToolSystem({
       }
     }
   }, [clientRef, pendingApprovals, executePendingToolAfterApproval]);
-  const rejectAll = useCallback7((reason) => {
+  const rejectAll = useCallback8((reason) => {
     if (!clientRef.current) return;
     console.log("[useToolSystem] Rejecting all tool calls:", pendingApprovals.length, reason);
     const pendingTools = [...pendingApprovals];
@@ -4768,7 +5007,7 @@ function useToolSystem({
 }
 
 // src/hooks/usePromptState.ts
-import { useState as useState10, useCallback as useCallback8, useRef as useRef8, useMemo as useMemo5, useEffect as useEffect8 } from "react";
+import { useState as useState11, useCallback as useCallback9, useRef as useRef8, useMemo as useMemo5, useEffect as useEffect8 } from "react";
 function usePromptState({
   systemPrompt,
   clientRef,
@@ -4776,8 +5015,8 @@ function usePromptState({
 }) {
   const promptsRef = useRef8(/* @__PURE__ */ new Map());
   const suggestionsRef = useRef8(/* @__PURE__ */ new Map());
-  const [suggestionsVersion, setSuggestionsVersion] = useState10(0);
-  const buildStateFromPrompts = useCallback8(() => {
+  const [suggestionsVersion, setSuggestionsVersion] = useState11(0);
+  const buildStateFromPrompts = useCallback9(() => {
     const promptParts = [];
     if (systemPrompt) {
       promptParts.push(systemPrompt);
@@ -4794,7 +5033,7 @@ function usePromptState({
       clientRef.current.updateState(buildStateFromPrompts());
     }
   }, [connected, clientRef, systemPrompt, buildStateFromPrompts]);
-  const updatePrompt = useCallback8((id, prompt, suggestions) => {
+  const updatePrompt = useCallback9((id, prompt, suggestions) => {
     if (prompt) {
       promptsRef.current.set(id, prompt);
     } else {
@@ -4827,14 +5066,14 @@ function usePromptState({
 }
 
 // src/hooks/useFeedback.ts
-import { useState as useState11, useEffect as useEffect9, useRef as useRef9, useCallback as useCallback9 } from "react";
+import { useState as useState12, useEffect as useEffect9, useRef as useRef9, useCallback as useCallback10 } from "react";
 function useFeedback({
   clientRef,
   repository,
   getDisplayedChatId,
   setMessages
 }) {
-  const [enabled, setEnabled] = useState11(false);
+  const [enabled, setEnabled] = useState12(false);
   const enabledRef = useRef9(false);
   useEffect9(() => {
     enabledRef.current = enabled;
@@ -4847,7 +5086,7 @@ function useFeedback({
     });
     return unsubscribe;
   }, [clientRef.current]);
-  const updateFeedbackInStorage = useCallback9(async (messageId, feedback) => {
+  const updateFeedbackInStorage = useCallback10(async (messageId, feedback) => {
     const displayedChatId = getDisplayedChatId();
     if (!displayedChatId) {
       console.warn("[useFeedback] No chat ID, cannot update feedback");
@@ -4875,7 +5114,7 @@ function useFeedback({
       console.error("[useFeedback] Failed to update feedback:", error);
     }
   }, [repository, getDisplayedChatId, setMessages]);
-  const submitFeedback = useCallback9((messageId, traceId, feedback) => {
+  const submitFeedback = useCallback10((messageId, traceId, feedback) => {
     updateFeedbackInStorage(messageId, feedback);
     const client = clientRef.current;
     if (client && enabledRef.current) {
@@ -4889,7 +5128,7 @@ function useFeedback({
 }
 
 // src/hooks/useServerEvents.ts
-import { useState as useState12, useCallback as useCallback10, useRef as useRef10 } from "react";
+import { useState as useState13, useCallback as useCallback11, useRef as useRef10 } from "react";
 
 // src/types.ts
 import { EventType as EventType2, ErrorCode, TOOL_APPROVAL_REQUEST } from "@meetsmore-oss/use-ai-core";
@@ -4900,14 +5139,15 @@ function useServerEvents({
   saveAIResponse,
   strings
 }) {
-  const [loading, setLoading] = useState12(false);
-  const [streamingText, setStreamingText] = useState12("");
+  const [loading, setLoading] = useState13(false);
+  const [streamingText, setStreamingText] = useState13("");
+  const [streamingReasoning, setStreamingReasoning] = useState13("");
   const streamingChatIdRef = useRef10(null);
   const messageCountAtRunStartRef = useRef10(0);
   const hasTextFromPriorStepRef = useRef10(false);
-  const [executingToolRaw, setExecutingTool] = useState12(null);
+  const [executingToolRaw, setExecutingTool] = useState13(null);
   const executingToolFallbackRef = useRef10(null);
-  const clearStreamingText = useCallback10(() => {
+  const clearStreamingText = useCallback11(() => {
     setStreamingText("");
   }, []);
   const toolSystemRef = useRef10(toolSystem);
@@ -4916,12 +5156,18 @@ function useServerEvents({
   saveAIResponseRef.current = saveAIResponse;
   const stringsRef = useRef10(strings);
   stringsRef.current = strings;
-  const handleServerEvent = useCallback10(async (client, event) => {
+  const handleServerEvent = useCallback11(async (client, event) => {
     const ts = toolSystemRef.current;
     const strs = stringsRef.current;
     if (event.type === EventType2.RUN_STARTED) {
       messageCountAtRunStartRef.current = client.messages.length;
       hasTextFromPriorStepRef.current = false;
+      setStreamingReasoning("");
+    } else if (event.type === EventType2.REASONING_MESSAGE_START) {
+      setStreamingReasoning((prev) => prev ? prev + "\n\n" : prev);
+    } else if (event.type === EventType2.REASONING_MESSAGE_CONTENT) {
+      const reasoningEvent = event;
+      setStreamingReasoning((prev) => prev + reasoningEvent.delta);
     } else if (event.type === EventType2.TEXT_MESSAGE_START) {
       if (hasTextFromPriorStepRef.current) {
         setStreamingText((prev) => prev + "\n\n");
@@ -4971,9 +5217,11 @@ function useServerEvents({
         const finishedEvent = event;
         const traceId = finishedEvent.runId;
         const turnMessages = extractTurnMessages(client.messages, messageCountAtRunStartRef.current);
-        saveAIResponseRef.current(content, void 0, traceId, turnMessages);
+        const reasoningParts = client.currentReasoningBlocks.length > 0 ? [...client.currentReasoningBlocks] : void 0;
+        saveAIResponseRef.current(content, void 0, traceId, turnMessages, reasoningParts);
       }
       setStreamingText("");
+      setStreamingReasoning("");
       streamingChatIdRef.current = null;
       setExecutingTool(null);
       setLoading(false);
@@ -4984,6 +5232,7 @@ function useServerEvents({
       const userMessage = strs.errors[errorCode] || errorEvent.message || strs.errors[ErrorCode.UNKNOWN_ERROR];
       saveAIResponseRef.current(userMessage, "error");
       setStreamingText("");
+      setStreamingReasoning("");
       streamingChatIdRef.current = null;
       setExecutingTool(null);
       setLoading(false);
@@ -4999,12 +5248,13 @@ function useServerEvents({
     clearStreamingText,
     executingTool,
     streamingChatIdRef,
+    streamingReasoning,
     handleServerEvent
   };
 }
 
 // src/hooks/useMessageQueue.ts
-import { useCallback as useCallback11, useRef as useRef11, useEffect as useEffect10 } from "react";
+import { useCallback as useCallback12, useRef as useRef11, useEffect as useEffect10 } from "react";
 function useMessageQueue({
   sendFn,
   createNewChat,
@@ -5029,7 +5279,7 @@ function useMessageQueue({
   useEffect10(() => {
     hasPendingApprovalRef.current = hasPendingApproval;
   }, [hasPendingApproval]);
-  const processMessageQueue = useCallback11(async () => {
+  const processMessageQueue = useCallback12(async () => {
     if (isProcessingQueueRef.current || pendingMessagesRef.current.length === 0) {
       return;
     }
@@ -5077,7 +5327,7 @@ function useMessageQueue({
     }
     isProcessingQueueRef.current = false;
   }, []);
-  const sendMessage = useCallback11(async (message, options) => {
+  const sendMessage = useCallback12(async (message, options) => {
     if (!connected) {
       throw new Error("Not connected to UseAI server");
     }
@@ -5088,7 +5338,7 @@ function useMessageQueue({
 }
 
 // src/providers/useAIProvider.tsx
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var __UseAIContext = createContext4(null);
 var hasWarnedAboutMissingProvider = false;
 var noOpContextValue = {
@@ -5170,11 +5420,11 @@ function UseAIProvider({
   const fileUploadConfig = fileUploadConfigProp === false ? void 0 : fileUploadConfigProp ?? DEFAULT_FILE_UPLOAD_CONFIG;
   const theme = { ...defaultTheme, ...customTheme };
   const strings = { ...defaultStrings, ...customStrings };
-  const [connected, setConnected] = useState13(false);
-  const [isChatOpen, setIsChatOpen] = useState13(false);
-  const [messages, setMessages] = useState13([]);
-  const [fileProcessingState, setFileProcessingState] = useState13(null);
-  const handleSetChatOpen = useCallback12((open) => {
+  const [connected, setConnected] = useState14(false);
+  const [isChatOpen, setIsChatOpen] = useState14(false);
+  const [messages, setMessages] = useState14([]);
+  const [fileProcessingState, setFileProcessingState] = useState14(null);
+  const handleSetChatOpen = useCallback13((open) => {
     setIsChatOpen(open);
     onOpenChange?.(open);
   }, [onOpenChange]);
@@ -5270,7 +5520,7 @@ function UseAIProvider({
       console.error("Failed to register tools:", err);
     }
   }, [toolSystem.hasTools, toolSystem.aggregatedTools, connected]);
-  const handleSendMessage = useCallback12(async (message, attachments, messageForwardedProps) => {
+  const handleSendMessage = useCallback13(async (message, attachments, messageForwardedProps) => {
     if (!clientRef.current) return;
     serverEvents.clearStreamingText();
     const activatedChatId = chatManagement.activatePendingChat();
@@ -5384,12 +5634,14 @@ function UseAIProvider({
     }
   };
   const effectiveStreamingText = serverEvents.streamingChatIdRef.current === chatManagement.displayedChatId ? serverEvents.streamingText : "";
+  const effectiveStreamingReasoning = serverEvents.streamingChatIdRef.current === chatManagement.displayedChatId ? serverEvents.streamingReasoning : "";
   const chatUIContextValue = {
     connected,
     loading: serverEvents.loading,
     sendMessage: handleSendMessage,
     messages,
     streamingText: effectiveStreamingText,
+    streamingReasoning: effectiveStreamingReasoning,
     suggestions: promptState.aggregatedSuggestions,
     fileUploadConfig,
     fileProcessing: fileProcessingState,
@@ -5439,6 +5691,7 @@ function UseAIProvider({
     loading: serverEvents.loading,
     connected,
     streamingText: effectiveStreamingText,
+    streamingReasoning: effectiveStreamingReasoning,
     currentChatId: chatManagement.displayedChatId,
     onNewChat: chatManagement.createNewChat,
     onLoadChat: chatManagement.loadChat,
@@ -5464,17 +5717,17 @@ function UseAIProvider({
   };
   const renderDefaultChat = () => {
     if (isUIDisabled) return null;
-    return /* @__PURE__ */ jsx14(UseAIFloatingChatWrapper, { isOpen: isChatOpen, onClose: () => handleSetChatOpen(false), children: /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(UseAIFloatingChatWrapper, { isOpen: isChatOpen, onClose: () => handleSetChatOpen(false), children: /* @__PURE__ */ jsx15(
       UseAIChatPanel,
       {
         ...chatPanelProps,
-        closeButton: /* @__PURE__ */ jsx14(CloseButton, { onClick: () => handleSetChatOpen(false) })
+        closeButton: /* @__PURE__ */ jsx15(CloseButton, { onClick: () => handleSetChatOpen(false) })
       }
     ) });
   };
   const renderCustomChat = () => {
     if (!CustomChat) return null;
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       CustomChat,
       {
         isOpen: isChatOpen,
@@ -5483,6 +5736,8 @@ function UseAIProvider({
         messages,
         loading: serverEvents.loading,
         connected,
+        streamingText: effectiveStreamingText,
+        streamingReasoning: effectiveStreamingReasoning,
         suggestions: promptState.aggregatedSuggestions,
         availableAgents,
         defaultAgent,
@@ -5493,8 +5748,8 @@ function UseAIProvider({
   };
   const renderBuiltInChat = () => {
     if (!renderChat) return null;
-    return /* @__PURE__ */ jsxs10(Fragment3, { children: [
-      ButtonComponent && /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+      ButtonComponent && /* @__PURE__ */ jsx15(
         ButtonComponent,
         {
           onClick: () => handleSetChatOpen(true),
@@ -5504,7 +5759,7 @@ function UseAIProvider({
       hasCustomChat ? renderCustomChat() : renderDefaultChat()
     ] });
   };
-  return /* @__PURE__ */ jsx14(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx14(StringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx14(__UseAIContext.Provider, { value, children: /* @__PURE__ */ jsxs10(__UseAIChatContext.Provider, { value: chatUIContextValue, children: [
+  return /* @__PURE__ */ jsx15(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx15(StringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx15(__UseAIContext.Provider, { value, children: /* @__PURE__ */ jsxs11(__UseAIChatContext.Provider, { value: chatUIContextValue, children: [
     children,
     renderBuiltInChat()
   ] }) }) }) });
@@ -5598,9 +5853,9 @@ function useAI(options = {}) {
   const { connected, tools, client, prompts } = useAIContext();
   const { register: registerTools, unregister: unregisterTools, signalReady, registerWaiter, unregisterWaiter } = tools;
   const { update: updatePrompt } = prompts;
-  const [response, setResponse] = useState14(null);
-  const [loading, setLoading] = useState14(false);
-  const [error, setError] = useState14(null);
+  const [response, setResponse] = useState15(null);
+  const [loading, setLoading] = useState15(false);
+  const [error, setError] = useState15(null);
   const hookId = useRef14(`useAI-${Math.random().toString(36).substr(2, 9)}`);
   const toolsRef = useRef14({});
   const componentRef = useRef14(null);
@@ -5616,7 +5871,7 @@ function useAI(options = {}) {
       componentRef.current.setAttribute("data-useai-context", "true");
     }
   }, []);
-  const waitForPromptChange = useCallback13(() => {
+  const waitForPromptChange = useCallback14(() => {
     return new Promise((resolve) => {
       const timeoutMs = 100;
       const timeoutId = setTimeout(() => {
@@ -5680,7 +5935,7 @@ function useAI(options = {}) {
       unsubscribe();
     };
   }, [enabled, client]);
-  const handleAGUIEvent = useCallback13(async (event) => {
+  const handleAGUIEvent = useCallback14(async (event) => {
     switch (event.type) {
       case EventType2.TEXT_MESSAGE_END: {
         const content = client?.currentMessageContent;
@@ -5700,7 +5955,7 @@ function useAI(options = {}) {
       }
     }
   }, [client, options.onError]);
-  const generate = useCallback13(async (prompt) => {
+  const generate = useCallback14(async (prompt) => {
     if (!enabled) {
       const error2 = new Error("AI features are disabled");
       setError(error2);
@@ -5736,17 +5991,17 @@ function useAI(options = {}) {
 }
 
 // src/useAIWorkflow.ts
-import { useState as useState15, useCallback as useCallback14, useRef as useRef15, useEffect as useEffect13 } from "react";
+import { useState as useState16, useCallback as useCallback15, useRef as useRef15, useEffect as useEffect13 } from "react";
 import { EventType as EventType3 } from "@meetsmore-oss/use-ai-core";
 import { v4 as uuidv43 } from "uuid";
 function useAIWorkflow(runner, workflowId) {
   const { connected, client } = useAIContext();
-  const [status, setStatus] = useState15("idle");
-  const [text, setText] = useState15(null);
-  const [error, setError] = useState15(null);
+  const [status, setStatus] = useState16("idle");
+  const [text, setText] = useState16(null);
+  const [error, setError] = useState16(null);
   const currentWorkflowRef = useRef15(null);
   const eventListenerIdRef = useRef15(`useAIWorkflow-${Math.random().toString(36).substr(2, 9)}`);
-  const handleWorkflowEvent = useCallback14(async (event) => {
+  const handleWorkflowEvent = useCallback15(async (event) => {
     const currentWorkflow = currentWorkflowRef.current;
     if (!currentWorkflow) return;
     if (event.type === EventType3.RUN_STARTED) {
@@ -5841,7 +6096,7 @@ function useAIWorkflow(runner, workflowId) {
       unsubscribe();
     };
   }, [client, handleWorkflowEvent]);
-  const trigger = useCallback14(async (options) => {
+  const trigger = useCallback15(async (options) => {
     if (!client?.isConnected()) {
       const err = new Error("Not connected to server");
       setError(err);