llmasaservice-ui 0.12.2 → 0.12.3

package/dist/index.css

@@ -395,6 +395,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-top: 4px;
   font-size: 10px;
   color: #666;
   opacity: 0.7;
@@ -720,3 +721,60 @@
 .dark-theme .tool-status {
   color: #999;
 }
+.reasoning-section,
+.searching-section {
+  margin: 1rem 0;
+  padding: 0.75rem;
+  border-radius: var(--border-radius);
+  border-left: 4px solid;
+  background-color: var(--reasoning-background-color, #f8f9fa);
+}
+.reasoning-section {
+  border-left-color: var(--reasoning-border-color, #007bff);
+  background-color: var(--reasoning-background-color, #f0f8ff);
+}
+.searching-section {
+  border-left-color: var(--searching-border-color, #28a745);
+  background-color: var(--searching-background-color, #f0fff0);
+}
+.reasoning-header,
+.searching-header {
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+  color: var(--prompt-text-color);
+  opacity: 0.8;
+}
+.reasoning-content,
+.searching-content {
+  font-size: 0.85rem;
+  line-height: 1.4;
+  color: var(--prompt-text-color);
+  opacity: 0.9;
+  font-style: italic;
+}
+.dark-theme .reasoning-section {
+  background-color: var(--reasoning-background-color-dark, #1a1a2e);
+  border-left-color: var(--reasoning-border-color-dark, #4a9eff);
+}
+.dark-theme .searching-section {
+  background-color: var(--searching-background-color-dark, #1a2e1a);
+  border-left-color: var(--searching-border-color-dark, #4ade80);
+}
+.dark-theme .reasoning-header,
+.dark-theme .searching-header,
+.dark-theme .reasoning-content,
+.dark-theme .searching-content {
+  color: var(--response-text-color);
+}
+.streaming-response {
+  animation: fadeIn 0.3s ease-in-out;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/index.js

@@ -272,30 +272,35 @@ var ChatPanel = ({
   const [iframeUrl, setIframeUrl] = (0, import_react3.useState)(null);
   const responseAreaRef = (0, import_react3.useRef)(null);
   const extractLastThinkingTag = (text) => {
-    var _a2, _b;
+    var _a2, _b, _c, _d;
+    console.log("extractLastThinkingTag called with:", (text == null ? void 0 : text.length) ? `${text.substring(0, 100)}...` : "empty");
     if (!text) return "Thinking";
-    const reasoningRegex = /<reasoning>(.*?)<\/reasoning>/gi;
-    const searchingRegex = /<searching>(.*?)<\/searching>/gi;
+    const reasoningRegex = /<reasoning>([\s\S]*?)<\/reasoning>/gi;
+    const searchingRegex = /<searching>([\s\S]*?)<\/searching>/gi;
     const allMatches = [];
     let reasoningMatch;
     while ((reasoningMatch = reasoningRegex.exec(text)) !== null) {
+      console.log("Found reasoning match:", ((_a2 = reasoningMatch[1]) == null ? void 0 : _a2.substring(0, 50)) + "...");
       allMatches.push({
-        content: ((_a2 = reasoningMatch[1]) == null ? void 0 : _a2.trim()) || "",
+        content: ((_b = reasoningMatch[1]) == null ? void 0 : _b.trim()) || "",
         index: reasoningMatch.index,
         type: "reasoning"
       });
     }
     let searchingMatch;
     while ((searchingMatch = searchingRegex.exec(text)) !== null) {
+      console.log("Found searching match:", ((_c = searchingMatch[1]) == null ? void 0 : _c.substring(0, 50)) + "...");
       allMatches.push({
-        content: ((_b = searchingMatch[1]) == null ? void 0 : _b.trim()) || "",
+        content: ((_d = searchingMatch[1]) == null ? void 0 : _d.trim()) || "",
         index: searchingMatch.index,
         type: "searching"
       });
     }
+    console.log("Total matches found:", allMatches.length);
     if (allMatches.length > 0) {
       const lastMatch = allMatches.sort((a, b) => b.index - a.index)[0];
       let content = (lastMatch == null ? void 0 : lastMatch.content) || "Thinking";
+      console.log("Last match content:", content == null ? void 0 : content.substring(0, 100));
       content = content.replace(/\*\*(.*?)\*\*/g, "$1");
       content = content.replace(/\*(.*?)\*/g, "$1");
       content = content.replace(/\n+/g, " ");
@@ -304,16 +309,46 @@ var ChatPanel = ({
       if (content.length > 80) {
         content = content.substring(0, 77) + "...";
       }
+      console.log("Final extracted content:", content);
       return content || "Thinking";
     }
+    console.log("No matches found, returning 'Thinking'");
     return "Thinking";
   };
-  const cleanResponseContent = (text) => {
+  const processResponseContent = (text, isStreaming = false) => {
     if (!text) return "";
-    let cleanText = text.replace(/<reasoning>[\s\S]*?<\/reasoning>/gi, "");
-    cleanText = cleanText.replace(/<searching>[\s\S]*?<\/searching>/gi, "");
-    cleanText = cleanText.replace(/\n\s*\n/g, "\n").trim();
-    return cleanText;
+    let processedText = text;
+    processedText = processedText.replace(
+      /<reasoning>([\s\S]*?)<\/reasoning>/gi,
+      (match, content) => {
+        const trimmedContent = content.trim();
+        if (!trimmedContent) return "";
+        return `
+
+<div class="reasoning-section">
+<div class="reasoning-header">\u{1F914} Reasoning</div>
+<div class="reasoning-content">${trimmedContent}</div>
+</div>
+
+`;
+      }
+    );
+    processedText = processedText.replace(
+      /<searching>([\s\S]*?)<\/searching>/gi,
+      (match, content) => {
+        const trimmedContent = content.trim();
+        if (!trimmedContent) return "";
+        return `
+
+<div class="searching-section">
+<div class="searching-header">\u{1F50D} Searching</div>
+<div class="searching-content">${trimmedContent}</div>
+</div>
+
+`;
+      }
+    );
+    return processedText;
   };
   const getBrowserInfo = () => {
     try {
@@ -465,6 +500,16 @@ var ChatPanel = ({
       };
     })
   });
+  (0, import_react3.useEffect)(() => {
+    console.log("Streaming state changed:", {
+      isLoading,
+      idle,
+      responseLength: (response == null ? void 0 : response.length) || 0,
+      lastCallId,
+      hasResponse: !!response,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+  }, [isLoading, idle, response, lastCallId]);
   (0, import_react3.useEffect)(() => {
     setShowEmailPanel(customerEmailCaptureMode !== "HIDE");
     if (customerEmailCaptureMode === "REQUIRED") {
@@ -887,6 +932,14 @@ var ChatPanel = ({
   });
   (0, import_react3.useEffect)(() => {
     if (response && response.length > 0) {
+      console.log("Response updated:", {
+        length: response.length,
+        isLoading,
+        idle,
+        hasReasoningTags: response.includes("<reasoning>"),
+        hasSearchingTags: response.includes("<searching>"),
+        preview: response.substring(0, 200) + "..."
+      });
       setIsLoading(false);
       let newResponse = response;
       const toolRequests = [];
@@ -958,6 +1011,13 @@ var ChatPanel = ({
       } else {
         setPendingToolRequests([]);
       }
+      const cleanedContent = processResponseContent(newResponse);
+      console.log("Processed content:", {
+        originalLength: newResponse.length,
+        processedLength: cleanedContent.length,
+        wasContentRemoved: newResponse.length !== cleanedContent.length,
+        processedPreview: cleanedContent.substring(0, 200) + "..."
+      });
       setHistory((prevHistory) => {
         const existingEntry = prevHistory[lastKey != null ? lastKey : ""] || {
           content: "",
@@ -966,7 +1026,7 @@ var ChatPanel = ({
         return __spreadProps(__spreadValues({}, prevHistory), {
           [lastKey != null ? lastKey : ""]: __spreadProps(__spreadValues({}, existingEntry), {
             // This preserves toolCalls and toolResponses
-            content: cleanResponseContent(newResponse),
+            content: cleanedContent,
             callId: lastCallId
           })
         });
@@ -1184,7 +1244,7 @@ var ChatPanel = ({
         setHistory((prevHistory) => {
           return __spreadProps(__spreadValues({}, prevHistory), {
             [lastKey != null ? lastKey : ""]: {
-              content: cleanResponseContent(response) + "\n\n(response cancelled)",
+              content: processResponseContent(response) + "\n\n(response cancelled)",
               callId: lastCallId
             }
           });
@@ -1212,7 +1272,7 @@ var ChatPanel = ({
           messagesAndHistory.push({ role: "user", content: promptToSend });
           messagesAndHistory.push({
             role: "assistant",
-            content: cleanResponseContent(response2.content)
+            content: processResponseContent(response2.content)
           });
         });
         let nextPromptToSend = suggestion != null ? suggestion : nextPrompt;
@@ -1579,7 +1639,19 @@ var ChatPanel = ({
       var _a2, _b;
       const isLastEntry = index === Object.keys(history).length - 1;
       const hasToolData = !!((((_a2 = historyEntry == null ? void 0 : historyEntry.toolCalls) == null ? void 0 : _a2.length) || 0) > 0 || (((_b = historyEntry == null ? void 0 : historyEntry.toolResponses) == null ? void 0 : _b.length) || 0) > 0);
-      return /* @__PURE__ */ import_react3.default.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ import_react3.default.createElement("div", { className: "prompt" }, formatPromptForDisplay(prompt)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "response" }, index === Object.keys(history).length - 1 && isLoading && (!response || response.length < 50) ? /* @__PURE__ */ import_react3.default.createElement("div", { className: "loading-text" }, extractLastThinkingTag(response || ""), "\xA0", /* @__PURE__ */ import_react3.default.createElement("div", { className: "dot" }), /* @__PURE__ */ import_react3.default.createElement("div", { className: "dot" }), /* @__PURE__ */ import_react3.default.createElement("div", { className: "dot" })) : null, /* @__PURE__ */ import_react3.default.createElement(
+      return /* @__PURE__ */ import_react3.default.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ import_react3.default.createElement("div", { className: "prompt" }, formatPromptForDisplay(prompt)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "response" }, index === Object.keys(history).length - 1 && isLoading ? /* @__PURE__ */ import_react3.default.createElement("div", { className: "streaming-response" }, response && response.length > 0 ? /* @__PURE__ */ import_react3.default.createElement(
+        import_react_markdown.default,
+        {
+          className: markdownClass,
+          remarkPlugins: [import_remark_gfm.default],
+          rehypePlugins: [import_rehype_raw.default],
+          components: {
+            /*a: CustomLink,*/
+            code: CodeBlock
+          }
+        },
+        processResponseContent(response, true)
+      ) : /* @__PURE__ */ import_react3.default.createElement("div", { className: "loading-text" }, extractLastThinkingTag(response || ""), "\xA0", /* @__PURE__ */ import_react3.default.createElement("div", { className: "dot" }), /* @__PURE__ */ import_react3.default.createElement("div", { className: "dot" }), /* @__PURE__ */ import_react3.default.createElement("div", { className: "dot" }))) : /* @__PURE__ */ import_react3.default.createElement(
         import_react_markdown.default,
         {
           className: markdownClass,

package/dist/index.mjs

@@ -244,30 +244,35 @@ var ChatPanel = ({
   const [iframeUrl, setIframeUrl] = useState2(null);
   const responseAreaRef = useRef(null);
   const extractLastThinkingTag = (text) => {
-    var _a2, _b;
+    var _a2, _b, _c, _d;
+    console.log("extractLastThinkingTag called with:", (text == null ? void 0 : text.length) ? `${text.substring(0, 100)}...` : "empty");
     if (!text) return "Thinking";
-    const reasoningRegex = /<reasoning>(.*?)<\/reasoning>/gi;
-    const searchingRegex = /<searching>(.*?)<\/searching>/gi;
+    const reasoningRegex = /<reasoning>([\s\S]*?)<\/reasoning>/gi;
+    const searchingRegex = /<searching>([\s\S]*?)<\/searching>/gi;
     const allMatches = [];
     let reasoningMatch;
     while ((reasoningMatch = reasoningRegex.exec(text)) !== null) {
+      console.log("Found reasoning match:", ((_a2 = reasoningMatch[1]) == null ? void 0 : _a2.substring(0, 50)) + "...");
       allMatches.push({
-        content: ((_a2 = reasoningMatch[1]) == null ? void 0 : _a2.trim()) || "",
+        content: ((_b = reasoningMatch[1]) == null ? void 0 : _b.trim()) || "",
         index: reasoningMatch.index,
         type: "reasoning"
       });
     }
     let searchingMatch;
     while ((searchingMatch = searchingRegex.exec(text)) !== null) {
+      console.log("Found searching match:", ((_c = searchingMatch[1]) == null ? void 0 : _c.substring(0, 50)) + "...");
       allMatches.push({
-        content: ((_b = searchingMatch[1]) == null ? void 0 : _b.trim()) || "",
+        content: ((_d = searchingMatch[1]) == null ? void 0 : _d.trim()) || "",
         index: searchingMatch.index,
         type: "searching"
       });
     }
+    console.log("Total matches found:", allMatches.length);
     if (allMatches.length > 0) {
       const lastMatch = allMatches.sort((a, b) => b.index - a.index)[0];
       let content = (lastMatch == null ? void 0 : lastMatch.content) || "Thinking";
+      console.log("Last match content:", content == null ? void 0 : content.substring(0, 100));
       content = content.replace(/\*\*(.*?)\*\*/g, "$1");
       content = content.replace(/\*(.*?)\*/g, "$1");
       content = content.replace(/\n+/g, " ");
@@ -276,16 +281,46 @@ var ChatPanel = ({
       if (content.length > 80) {
         content = content.substring(0, 77) + "...";
       }
+      console.log("Final extracted content:", content);
       return content || "Thinking";
     }
+    console.log("No matches found, returning 'Thinking'");
     return "Thinking";
   };
-  const cleanResponseContent = (text) => {
+  const processResponseContent = (text, isStreaming = false) => {
     if (!text) return "";
-    let cleanText = text.replace(/<reasoning>[\s\S]*?<\/reasoning>/gi, "");
-    cleanText = cleanText.replace(/<searching>[\s\S]*?<\/searching>/gi, "");
-    cleanText = cleanText.replace(/\n\s*\n/g, "\n").trim();
-    return cleanText;
+    let processedText = text;
+    processedText = processedText.replace(
+      /<reasoning>([\s\S]*?)<\/reasoning>/gi,
+      (match, content) => {
+        const trimmedContent = content.trim();
+        if (!trimmedContent) return "";
+        return `
+
+<div class="reasoning-section">
+<div class="reasoning-header">\u{1F914} Reasoning</div>
+<div class="reasoning-content">${trimmedContent}</div>
+</div>
+
+`;
+      }
+    );
+    processedText = processedText.replace(
+      /<searching>([\s\S]*?)<\/searching>/gi,
+      (match, content) => {
+        const trimmedContent = content.trim();
+        if (!trimmedContent) return "";
+        return `
+
+<div class="searching-section">
+<div class="searching-header">\u{1F50D} Searching</div>
+<div class="searching-content">${trimmedContent}</div>
+</div>
+
+`;
+      }
+    );
+    return processedText;
   };
   const getBrowserInfo = () => {
     try {
@@ -437,6 +472,16 @@ var ChatPanel = ({
       };
     })
   });
+  useEffect2(() => {
+    console.log("Streaming state changed:", {
+      isLoading,
+      idle,
+      responseLength: (response == null ? void 0 : response.length) || 0,
+      lastCallId,
+      hasResponse: !!response,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+  }, [isLoading, idle, response, lastCallId]);
   useEffect2(() => {
     setShowEmailPanel(customerEmailCaptureMode !== "HIDE");
     if (customerEmailCaptureMode === "REQUIRED") {
@@ -859,6 +904,14 @@ var ChatPanel = ({
   });
   useEffect2(() => {
     if (response && response.length > 0) {
+      console.log("Response updated:", {
+        length: response.length,
+        isLoading,
+        idle,
+        hasReasoningTags: response.includes("<reasoning>"),
+        hasSearchingTags: response.includes("<searching>"),
+        preview: response.substring(0, 200) + "..."
+      });
       setIsLoading(false);
       let newResponse = response;
       const toolRequests = [];
@@ -930,6 +983,13 @@ var ChatPanel = ({
       } else {
         setPendingToolRequests([]);
       }
+      const cleanedContent = processResponseContent(newResponse);
+      console.log("Processed content:", {
+        originalLength: newResponse.length,
+        processedLength: cleanedContent.length,
+        wasContentRemoved: newResponse.length !== cleanedContent.length,
+        processedPreview: cleanedContent.substring(0, 200) + "..."
+      });
       setHistory((prevHistory) => {
         const existingEntry = prevHistory[lastKey != null ? lastKey : ""] || {
           content: "",
@@ -938,7 +998,7 @@ var ChatPanel = ({
         return __spreadProps(__spreadValues({}, prevHistory), {
           [lastKey != null ? lastKey : ""]: __spreadProps(__spreadValues({}, existingEntry), {
             // This preserves toolCalls and toolResponses
-            content: cleanResponseContent(newResponse),
+            content: cleanedContent,
             callId: lastCallId
           })
         });
@@ -1156,7 +1216,7 @@ var ChatPanel = ({
         setHistory((prevHistory) => {
           return __spreadProps(__spreadValues({}, prevHistory), {
             [lastKey != null ? lastKey : ""]: {
-              content: cleanResponseContent(response) + "\n\n(response cancelled)",
+              content: processResponseContent(response) + "\n\n(response cancelled)",
               callId: lastCallId
             }
           });
@@ -1184,7 +1244,7 @@ var ChatPanel = ({
           messagesAndHistory.push({ role: "user", content: promptToSend });
           messagesAndHistory.push({
             role: "assistant",
-            content: cleanResponseContent(response2.content)
+            content: processResponseContent(response2.content)
           });
         });
         let nextPromptToSend = suggestion != null ? suggestion : nextPrompt;
@@ -1551,7 +1611,19 @@ var ChatPanel = ({
       var _a2, _b;
       const isLastEntry = index === Object.keys(history).length - 1;
       const hasToolData = !!((((_a2 = historyEntry == null ? void 0 : historyEntry.toolCalls) == null ? void 0 : _a2.length) || 0) > 0 || (((_b = historyEntry == null ? void 0 : historyEntry.toolResponses) == null ? void 0 : _b.length) || 0) > 0);
-      return /* @__PURE__ */ React3.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ React3.createElement("div", { className: "prompt" }, formatPromptForDisplay(prompt)), /* @__PURE__ */ React3.createElement("div", { className: "response" }, index === Object.keys(history).length - 1 && isLoading && (!response || response.length < 50) ? /* @__PURE__ */ React3.createElement("div", { className: "loading-text" }, extractLastThinkingTag(response || ""), "\xA0", /* @__PURE__ */ React3.createElement("div", { className: "dot" }), /* @__PURE__ */ React3.createElement("div", { className: "dot" }), /* @__PURE__ */ React3.createElement("div", { className: "dot" })) : null, /* @__PURE__ */ React3.createElement(
+      return /* @__PURE__ */ React3.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ React3.createElement("div", { className: "prompt" }, formatPromptForDisplay(prompt)), /* @__PURE__ */ React3.createElement("div", { className: "response" }, index === Object.keys(history).length - 1 && isLoading ? /* @__PURE__ */ React3.createElement("div", { className: "streaming-response" }, response && response.length > 0 ? /* @__PURE__ */ React3.createElement(
+        ReactMarkdown,
+        {
+          className: markdownClass,
+          remarkPlugins: [remarkGfm],
+          rehypePlugins: [rehypeRaw],
+          components: {
+            /*a: CustomLink,*/
+            code: CodeBlock
+          }
+        },
+        processResponseContent(response, true)
+      ) : /* @__PURE__ */ React3.createElement("div", { className: "loading-text" }, extractLastThinkingTag(response || ""), "\xA0", /* @__PURE__ */ React3.createElement("div", { className: "dot" }), /* @__PURE__ */ React3.createElement("div", { className: "dot" }), /* @__PURE__ */ React3.createElement("div", { className: "dot" }))) : /* @__PURE__ */ React3.createElement(
         ReactMarkdown,
         {
           className: markdownClass,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "llmasaservice-ui",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/ChatPanel.css

@@ -490,6 +490,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-top: 4px;
   font-size: 10px;
   color: #666;
   opacity: 0.7;
@@ -885,4 +886,72 @@
 /* Dark theme support */
 .dark-theme .tool-status {
   color: #999;
+}
+
+/* Reasoning and Searching Sections */
+.reasoning-section, .searching-section {
+  margin: 1rem 0;
+  padding: 0.75rem;
+  border-radius: var(--border-radius);
+  border-left: 4px solid;
+  background-color: var(--reasoning-background-color, #f8f9fa);
+}
+
+.reasoning-section {
+  border-left-color: var(--reasoning-border-color, #007bff);
+  background-color: var(--reasoning-background-color, #f0f8ff);
+}
+
+.searching-section {
+  border-left-color: var(--searching-border-color, #28a745);
+  background-color: var(--searching-background-color, #f0fff0);
+}
+
+.reasoning-header, .searching-header {
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+  color: var(--prompt-text-color);
+  opacity: 0.8;
+}
+
+.reasoning-content, .searching-content {
+  font-size: 0.85rem;
+  line-height: 1.4;
+  color: var(--prompt-text-color);
+  opacity: 0.9;
+  font-style: italic;
+}
+
+/* Dark theme support for reasoning/searching */
+.dark-theme .reasoning-section {
+  background-color: var(--reasoning-background-color-dark, #1a1a2e);
+  border-left-color: var(--reasoning-border-color-dark, #4a9eff);
+}
+
+.dark-theme .searching-section {
+  background-color: var(--searching-background-color-dark, #1a2e1a);
+  border-left-color: var(--searching-border-color-dark, #4ade80);
+}
+
+.dark-theme .reasoning-header,
+.dark-theme .searching-header,
+.dark-theme .reasoning-content,
+.dark-theme .searching-content {
+  color: var(--response-text-color);
+}
+
+/* Streaming response styling */
+.streaming-response {
+  /* Add a subtle animation to indicate streaming */
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }

package/src/ChatPanel.tsx

@@ -232,17 +232,20 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   const responseAreaRef = useRef(null);
   // Extract the last reasoning or searching tag from the response
   const extractLastThinkingTag = (text: string): string => {
+    console.log("extractLastThinkingTag called with:", text?.length ? `${text.substring(0, 100)}...` : "empty");
+    
     if (!text) return "Thinking";
     
-    // Find all reasoning and searching tags using exec method
-    const reasoningRegex = /<reasoning>(.*?)<\/reasoning>/gi;
-    const searchingRegex = /<searching>(.*?)<\/searching>/gi;
+    // Find all reasoning and searching tags using exec method (with global and multiline flags)
+    const reasoningRegex = /<reasoning>([\s\S]*?)<\/reasoning>/gi;
+    const searchingRegex = /<searching>([\s\S]*?)<\/searching>/gi;
     
     const allMatches: Array<{ content: string; index: number; type: string }> = [];
     
     // Find all reasoning matches
     let reasoningMatch;
     while ((reasoningMatch = reasoningRegex.exec(text)) !== null) {
+      console.log("Found reasoning match:", reasoningMatch[1]?.substring(0, 50) + "...");
       allMatches.push({
         content: reasoningMatch[1]?.trim() || "",
         index: reasoningMatch.index,
@@ -253,6 +256,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     // Find all searching matches  
     let searchingMatch;
     while ((searchingMatch = searchingRegex.exec(text)) !== null) {
+      console.log("Found searching match:", searchingMatch[1]?.substring(0, 50) + "...");
       allMatches.push({
         content: searchingMatch[1]?.trim() || "",
         index: searchingMatch.index,
@@ -260,11 +264,15 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
       });
     }
     
+    console.log("Total matches found:", allMatches.length);
+    
     // Sort by position and get the last one
     if (allMatches.length > 0) {
       const lastMatch = allMatches.sort((a, b) => b.index - a.index)[0];
       let content = lastMatch?.content || "Thinking";
       
+      console.log("Last match content:", content?.substring(0, 100));
+      
       // Clean up the content - remove markdown formatting and limit length
       content = content.replace(/\*\*(.*?)\*\*/g, '$1'); // Remove bold
       content = content.replace(/\*(.*?)\*/g, '$1'); // Remove italics
@@ -277,26 +285,49 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
         content = content.substring(0, 77) + '...';
       }
       
+      console.log("Final extracted content:", content);
       return content || "Thinking";
     }
     
+    console.log("No matches found, returning 'Thinking'");
     return "Thinking";
   };
 
-  // Remove reasoning and searching tags from the response content
-  const cleanResponseContent = (text: string): string => {
+  // Process response content to show reasoning/searching in a styled format
+  const processResponseContent = (text: string, isStreaming: boolean = false): string => {
     if (!text) return "";
     
-    // Remove reasoning tags and their content (with multiline support)
-    let cleanText = text.replace(/<reasoning>[\s\S]*?<\/reasoning>/gi, '');
+    let processedText = text;
     
-    // Remove searching tags and their content (with multiline support)
-    cleanText = cleanText.replace(/<searching>[\s\S]*?<\/searching>/gi, '');
+    // Replace reasoning tags with styled content
+    processedText = processedText.replace(
+      /<reasoning>([\s\S]*?)<\/reasoning>/gi,
+      (match, content) => {
+        const trimmedContent = content.trim();
+        if (!trimmedContent) return '';
+        
+        return `\n\n<div class="reasoning-section">
+<div class="reasoning-header">🤔 Reasoning</div>
+<div class="reasoning-content">${trimmedContent}</div>
+</div>\n\n`;
+      }
+    );
     
-    // Clean up any extra whitespace that might be left
-    cleanText = cleanText.replace(/\n\s*\n/g, '\n').trim();
+    // Replace searching tags with styled content
+    processedText = processedText.replace(
+      /<searching>([\s\S]*?)<\/searching>/gi,
+      (match, content) => {
+        const trimmedContent = content.trim();
+        if (!trimmedContent) return '';
+        
+        return `\n\n<div class="searching-section">
+<div class="searching-header">🔍 Searching</div>
+<div class="searching-content">${trimmedContent}</div>
+</div>\n\n`;
+      }
+    );
     
-    return cleanText;
+    return processedText;
   };
 
   const getBrowserInfo = () => {
@@ -477,6 +508,18 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     }) as [],
   });
 
+  // Add logging for streaming states
+  useEffect(() => {
+    console.log("Streaming state changed:", {
+      isLoading,
+      idle,
+      responseLength: response?.length || 0,
+      lastCallId,
+      hasResponse: !!response,
+      timestamp: new Date().toISOString()
+    });
+  }, [isLoading, idle, response, lastCallId]);
+
   useEffect(() => {
     setShowEmailPanel(customerEmailCaptureMode !== "HIDE");
 
@@ -998,6 +1041,15 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
 
   useEffect(() => {
     if (response && response.length > 0) {
+      console.log("Response updated:", {
+        length: response.length,
+        isLoading,
+        idle,
+        hasReasoningTags: response.includes('<reasoning>'),
+        hasSearchingTags: response.includes('<searching>'),
+        preview: response.substring(0, 200) + "..."
+      });
+      
       setIsLoading(false);
 
       let newResponse = response;
@@ -1088,6 +1140,14 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
         setPendingToolRequests([]);
       }
 
+      const cleanedContent = processResponseContent(newResponse);
+      console.log("Processed content:", {
+        originalLength: newResponse.length,
+        processedLength: cleanedContent.length,
+        wasContentRemoved: newResponse.length !== cleanedContent.length,
+        processedPreview: cleanedContent.substring(0, 200) + "..."
+      });
+
       setHistory((prevHistory) => {
         // Get any existing tool data from the previous state
         const existingEntry = prevHistory[lastKey ?? ""] || {
@@ -1099,7 +1159,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
           ...prevHistory,
           [lastKey ?? ""]: {
             ...existingEntry, // This preserves toolCalls and toolResponses
-            content: cleanResponseContent(newResponse),
+            content: cleanedContent,
             callId: lastCallId,
           },
         };
@@ -1374,7 +1434,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
           return {
             ...prevHistory,
             [lastKey ?? ""]: {
-              content: cleanResponseContent(response) + "\n\n(response cancelled)",
+              content: processResponseContent(response) + "\n\n(response cancelled)",
               callId: lastCallId,
             },
           };
@@ -1410,7 +1470,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
           messagesAndHistory.push({ role: "user", content: promptToSend });
           messagesAndHistory.push({
             role: "assistant",
-            content: cleanResponseContent(response.content),
+            content: processResponseContent(response.content),
           });
         });
 
@@ -1885,22 +1945,37 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
                 )}
 
                 <div className="response">
-                  {index === Object.keys(history).length - 1 && isLoading && (!response || response.length < 50) ? (
-                    <div className="loading-text">
-                      {extractLastThinkingTag(response || "")}&nbsp;
-                      <div className="dot"></div>
-                      <div className="dot"></div>
-                      <div className="dot"></div>
+                  {/* Show streaming response with reasoning/searching tags */}
+                  {index === Object.keys(history).length - 1 && isLoading ? (
+                    <div className="streaming-response">
+                      {response && response.length > 0 ? (
+                        <ReactMarkdown
+                          className={markdownClass}
+                          remarkPlugins={[remarkGfm]}
+                          rehypePlugins={[rehypeRaw]}
+                          components={{ /*a: CustomLink,*/ code: CodeBlock }}
+                        >
+                          {processResponseContent(response, true)}
+                        </ReactMarkdown>
+                      ) : (
+                        <div className="loading-text">
+                          {extractLastThinkingTag(response || "")}&nbsp;
+                          <div className="dot"></div>
+                          <div className="dot"></div>
+                          <div className="dot"></div>
+                        </div>
+                      )}
                     </div>
-                  ) : null}
-                  <ReactMarkdown
-                    className={markdownClass}
-                    remarkPlugins={[remarkGfm]}
-                    rehypePlugins={[rehypeRaw]}
-                    components={{ /*a: CustomLink,*/ code: CodeBlock }}
-                  >
-                    {historyEntry.content}
-                  </ReactMarkdown>
+                  ) : (
+                    <ReactMarkdown
+                      className={markdownClass}
+                      remarkPlugins={[remarkGfm]}
+                      rehypePlugins={[rehypeRaw]}
+                      components={{ /*a: CustomLink,*/ code: CodeBlock }}
+                    >
+                      {historyEntry.content}
+                    </ReactMarkdown>
+                  )}
 
                   {isLastEntry && pendingToolRequests.length > 0 && (
                     <div className="approve-tools-panel">

package/test_tag_extraction.js

@@ -0,0 +1,125 @@
+// Test file to verify tag extraction functions
+const fs = require('fs');
+const path = require('path');
+
+// Mock test data
+const testTexts = [
+  "This is a simple response without any tags.",
+  "<reasoning>I need to think about this problem step by step.</reasoning>Here's my answer.",
+  "Some text <searching>Looking for information about cats</searching> more text",
+  "<reasoning>First, I'll analyze the problem.</reasoning>Then I'll search. <searching>Finding relevant data</searching>Final answer here.",
+  "Multiple <reasoning>First reasoning</reasoning> and <reasoning>Second reasoning</reasoning> tags.",
+  "Incomplete <reasoning>Missing closing tag...",
+  "<reasoning>\nMultiline reasoning\nwith several lines\nof content\n</reasoning>Response text here.",
+  "Mixed <reasoning>Some thinking</reasoning> and <searching>Some searching</searching> with final answer."
+];
+
+// Copy the extraction function from the React component
+function extractLastThinkingTag(text) {
+  console.log("extractLastThinkingTag called with:", text?.length ? `${text.substring(0, 100)}...` : "empty");
+  
+  if (!text) return "Thinking";
+  
+  // Find all reasoning and searching tags using exec method (with global and multiline flags)
+  const reasoningRegex = /<reasoning>([\s\S]*?)<\/reasoning>/gi;
+  const searchingRegex = /<searching>([\s\S]*?)<\/searching>/gi;
+  
+  const allMatches = [];
+  
+  // Find all reasoning matches
+  let reasoningMatch;
+  while ((reasoningMatch = reasoningRegex.exec(text)) !== null) {
+    console.log("Found reasoning match:", reasoningMatch[1]?.substring(0, 50) + "...");
+    allMatches.push({
+      content: reasoningMatch[1]?.trim() || "",
+      index: reasoningMatch.index,
+      type: 'reasoning'
+    });
+  }
+  
+  // Find all searching matches  
+  let searchingMatch;
+  while ((searchingMatch = searchingRegex.exec(text)) !== null) {
+    console.log("Found searching match:", searchingMatch[1]?.substring(0, 50) + "...");
+    allMatches.push({
+      content: searchingMatch[1]?.trim() || "",
+      index: searchingMatch.index,
+      type: 'searching'
+    });
+  }
+  
+  console.log("Total matches found:", allMatches.length);
+  
+  // Sort by position and get the last one
+  if (allMatches.length > 0) {
+    const lastMatch = allMatches.sort((a, b) => b.index - a.index)[0];
+    let content = lastMatch?.content || "Thinking";
+    
+    console.log("Last match content:", content?.substring(0, 100));
+    
+    // Clean up the content - remove markdown formatting and limit length
+    content = content.replace(/\*\*(.*?)\*\*/g, '$1'); // Remove bold
+    content = content.replace(/\*(.*?)\*/g, '$1'); // Remove italics
+    content = content.replace(/\n+/g, ' '); // Replace newlines with spaces
+    content = content.replace(/\s+/g, ' '); // Normalize whitespace
+    content = content.trim();
+    
+    // Limit length to keep UI clean
+    if (content.length > 80) {
+      content = content.substring(0, 77) + '...';
+    }
+    
+    console.log("Final extracted content:", content);
+    return content || "Thinking";
+  }
+  
+  console.log("No matches found, returning 'Thinking'");
+  return "Thinking";
+}
+
+// Copy the processing function from the React component
+function processResponseContent(text, isStreaming = false) {
+  if (!text) return "";
+  
+  let processedText = text;
+  
+  // Replace reasoning tags with styled content
+  processedText = processedText.replace(
+    /<reasoning>([\s\S]*?)<\/reasoning>/gi,
+    (match, content) => {
+      const trimmedContent = content.trim();
+      if (!trimmedContent) return '';
+      
+      return `\n\n<div class="reasoning-section">
+<div class="reasoning-header">🤔 Reasoning</div>
+<div class="reasoning-content">${trimmedContent}</div>
+</div>\n\n`;
+    }
+  );
+  
+  // Replace searching tags with styled content
+  processedText = processedText.replace(
+    /<searching>([\s\S]*?)<\/searching>/gi,
+    (match, content) => {
+      const trimmedContent = content.trim();
+      if (!trimmedContent) return '';
+      
+      return `\n\n<div class="searching-section">
+<div class="searching-header">🔍 Searching</div>
+<div class="searching-content">${trimmedContent}</div>
+</div>\n\n`;
+    }
+  );
+  
+  return processedText;
+}
+
+console.log("Testing tag extraction and processing functions...\n");
+
+testTexts.forEach((text, index) => {
+  console.log(`\n=== Test ${index + 1} ===`);
+  console.log("Input:", text);
+  console.log("Extracted tag:", extractLastThinkingTag(text));
+  console.log("Processed content:", processResponseContent(text));
+  console.log("---");
+});