diff --git a/examples/chat-ui/src/components/ChatApp.tsx b/examples/chat-ui/src/components/ChatApp.tsx
index 835ec6c..d5a9c2c 100644
--- a/examples/chat-ui/src/components/ChatApp.tsx
+++ b/examples/chat-ui/src/components/ChatApp.tsx
@@ -1,6 +1,4 @@
 import React, { useState, useEffect } from "react";
-import ChatSidebar from "./ChatSidebar.tsx";
-import ChatNavbar from "./ChatNavbar.tsx";
 import ConversationThread from "./ConversationThread.tsx";
 import { storeName } from "../consts.ts";
 import { type Conversation } from "../types";
@@ -18,7 +16,7 @@ const ChatApp: React.FC<ChatAppProps> = () => {
   const [conversationId, setConversationId] = useState<number | undefined>(
     undefined
   );
-  const [sidebarVisible, setSidebarVisible] = useState<boolean>(true);
+
   const [selectedModel, setSelectedModel] = useState<Model>(getSelectedModel());
   const [apiKeyUpdateTrigger, setApiKeyUpdateTrigger] = useState<number>(0);
   const [mcpTools, setMcpTools] = useState<Tool[]>([]);
@@ -43,8 +41,8 @@ const ChatApp: React.FC<ChatAppProps> = () => {
 
   // Initialize sidebar visibility based on screen size
   useEffect(() => {
-    const isMobile = window.matchMedia("(max-width: 768px)").matches;
-    setSidebarVisible(!isMobile);
+    // const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    // setSidebarVisible(!isMobile);
   }, []);
 
   const getConversations = async () => {
@@ -72,21 +70,21 @@ const ChatApp: React.FC<ChatAppProps> = () => {
     }
   };
 
-  const editConversationTitle = async (id: number, newTitle: string) => {
-    const conversation = (await db!.get(storeName, id)) as Conversation;
-    conversation.title = newTitle;
-    await db!.put(storeName, conversation);
-    setConversations((prev) =>
-      prev.map((conv) => (conv.id === id ? { ...conv, title: newTitle } : conv))
-    );
-  };
+  // const editConversationTitle = async (id: number, newTitle: string) => {
+  //   const conversation = (await db!.get(storeName, id)) as Conversation;
+  //   conversation.title = newTitle;
+  //   await db!.put(storeName, conversation);
+  //   setConversations((prev) =>
+  //     prev.map((conv) => (conv.id === id ? { ...conv, title: newTitle } : conv))
+  //   );
+  // };
 
   const startNewConversation = async () => {
     //create unique id for new conversation
     setConversationId(Date.now() + Math.floor(Math.random() * 1000));
-    if (window.matchMedia("(max-width: 768px)").matches) {
-      setSidebarVisible(false);
-    }
+    // if (window.matchMedia("(max-width: 768px)").matches) {
+    //   setSidebarVisible(false);
+    // }
   };
 
   // delete conversations with no messages
@@ -109,28 +107,28 @@ const ChatApp: React.FC<ChatAppProps> = () => {
     >
       <div className="flex flex-row flex-grow flex-1 min-h-screen relative">
         {/* Sidebar and Navbar components hidden but kept in codebase */}
-        {false && (
-          <>
-            <ChatSidebar
-              sidebarVisible={sidebarVisible}
-              setSidebarVisible={setSidebarVisible}
-              conversations={conversations}
-              conversationId={conversationId}
-              setConversationId={setConversationId}
-              deleteConversation={deleteConversation}
-              editConversationTitle={editConversationTitle}
-              startNewConversation={startNewConversation}
-              selectedModel={selectedModel}
-              onModelChange={handleModelChange}
-              apiKeyUpdateTrigger={apiKeyUpdateTrigger}
-              onMcpToolsUpdate={setMcpTools}
-            />
-            <ChatNavbar
-              sidebarVisible={sidebarVisible}
-              setSidebarVisible={setSidebarVisible}
-            />
-          </>
-        )}
+        {/*{false && (*/}
+        {/*  <>*/}
+        {/*    <ChatSidebar*/}
+        {/*      sidebarVisible={sidebarVisible}*/}
+        {/*      setSidebarVisible={setSidebarVisible}*/}
+        {/*      conversations={conversations}*/}
+        {/*      conversationId={conversationId}*/}
+        {/*      setConversationId={setConversationId}*/}
+        {/*      deleteConversation={deleteConversation}*/}
+        {/*      editConversationTitle={editConversationTitle}*/}
+        {/*      startNewConversation={startNewConversation}*/}
+        {/*      selectedModel={selectedModel}*/}
+        {/*      onModelChange={handleModelChange}*/}
+        {/*      apiKeyUpdateTrigger={apiKeyUpdateTrigger}*/}
+        {/*      onMcpToolsUpdate={setMcpTools}*/}
+        {/*    />*/}
+        {/*    <ChatNavbar*/}
+        {/*      sidebarVisible={sidebarVisible}*/}
+        {/*      setSidebarVisible={setSidebarVisible}*/}
+        {/*    />*/}
+        {/*  </>*/}
+        {/*)}*/}
         <div className="flex flex-col flex-grow h-full w-full">
           <ConversationThread
             conversations={conversations}
diff --git a/examples/chat-ui/src/components/ReasoningBlock.tsx b/examples/chat-ui/src/components/ReasoningBlock.tsx
index 1e0701d..2b20ea8 100644
--- a/examples/chat-ui/src/components/ReasoningBlock.tsx
+++ b/examples/chat-ui/src/components/ReasoningBlock.tsx
@@ -25,7 +25,7 @@ const ReasoningBlock: React.FC<ReasoningBlockProps> = ({ reasoning }) => {
     return (
         <div className="mb-3">
             <div
-                className={`text-sm text-zinc-600 border border-zinc-200 rounded-lg p-3 bg-zinc-50 cursor-pointer hover:bg-zinc-100 transition-colors ${shouldTruncate && !isExpanded ? "line-clamp-1" : ""
+                className={`text-xs text-zinc-600 border border-zinc-200 rounded-lg p-3 *bg-zinc-50 cursor-pointer hover:bg-zinc-50 transition-colors ${shouldTruncate && !isExpanded ? "line-clamp-1" : ""
                     }`}
                 onClick={toggleExpanded}
             >
@@ -34,17 +34,17 @@ const ReasoningBlock: React.FC<ReasoningBlockProps> = ({ reasoning }) => {
                     <div className={`${shouldTruncate && !isExpanded ? "truncate" : "whitespace-pre-wrap"}`}>
                         {displayText}
                     </div>
-                    {shouldTruncate && (
-                        <button
-                            className="text-zinc-400 hover:text-zinc-600 text-xs ml-auto flex-shrink-0"
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                toggleExpanded();
-                            }}
-                        >
-                            {isExpanded ? "↑" : "↓"}
-                        </button>
-                    )}
+                    {/*{shouldTruncate && (*/}
+                    {/*    <button*/}
+                    {/*        className="text-zinc-400 hover:text-zinc-600 text-xs ml-auto flex-shrink-0"*/}
+                    {/*        onClick={(e) => {*/}
+                    {/*            e.stopPropagation();*/}
+                    {/*            toggleExpanded();*/}
+                    {/*        }}*/}
+                    {/*    >*/}
+                    {/*        {isExpanded ? "↑" : "↓"}*/}
+                    {/*    </button>*/}
+                    {/*)}*/}
                 </div>
             </div>
         </div>
diff --git a/examples/chat-ui/src/hooks/useStreamResponse.ts b/examples/chat-ui/src/hooks/useStreamResponse.ts
index cea27d5..7632f7e 100644
--- a/examples/chat-ui/src/hooks/useStreamResponse.ts
+++ b/examples/chat-ui/src/hooks/useStreamResponse.ts
@@ -312,19 +312,31 @@ export const useStreamResponse = ({
             }
 
             debugLog(`[useStreamResponse] Finished processing full stream. Final response length: ${aiResponse.length}`)
+            debugLog(`[useStreamResponse] Final aiResponse content:`, JSON.stringify(aiResponse))
             
             // Extract reasoning from the result after streaming completes
             const finalReasoning = await result.reasoning
-            if (finalReasoning && assistantMessageCreated) {
-                debugLog(`[useStreamResponse] Extracted reasoning:`, finalReasoning)
+            const finalText = await result.text
+            debugLog(`[useStreamResponse] Final result.text:`, JSON.stringify(finalText))
+            
+            if (assistantMessageCreated) {
                 setConversations((prev) => {
                     const updated = [...prev]
                     const conv = updated.find((c) => c.id === conversationId)
                     if (conv && assistantMessageIndex >= 0) {
                         const assistantMessage = conv.messages[assistantMessageIndex]
                         if (assistantMessage && hasContent(assistantMessage) && assistantMessage.role === 'assistant') {
-                            assistantMessage.reasoning = finalReasoning
-                            debugLog(`[useStreamResponse] Added reasoning to assistant message at index ${assistantMessageIndex}`)
+                            // Use the final cleaned text from the result instead of our tracked aiResponse
+                            if (finalText && supportsReasoning(selectedModel)) {
+                                assistantMessage.content = finalText
+                                debugLog(`[useStreamResponse] Updated content with cleaned result.text`)
+                            }
+                            
+                            if (finalReasoning) {
+                                assistantMessage.reasoning = finalReasoning
+                                debugLog(`[useStreamResponse] Added reasoning to assistant message at index ${assistantMessageIndex}`)
+                            }
+                            debugLog(`[useStreamResponse] Final message content:`, JSON.stringify(assistantMessage.content))
                         }
                     }
                     return updated