From fa691dfad0d0441ee65be10589449cabf3a7cad2 Mon Sep 17 00:00:00 2001
From: Mufeed VH <mufeedvh@gmail.com>
Date: Wed, 25 Jun 2025 05:10:44 +0530
Subject: [PATCH] refactor(ui): clean up components and improve thinking widget
 design

- Remove debug console.log from StreamMessage component
- Simplify ThinkingWidget by removing unused signature parameter
- Update ThinkingWidget color scheme from purple to gray for subtlety
- Add italic styling to thinking content for better visual distinction
- Trim whitespace from thinking content display
- Streamline ThinkingWidget layout by removing unnecessary prose wrapper
---
 src/components/StreamMessage.tsx |  8 --------
 src/components/ToolWidgets.tsx   | 33 ++++++++++++++------------------
 2 files changed, 14 insertions(+), 27 deletions(-)

diff --git a/src/components/StreamMessage.tsx b/src/components/StreamMessage.tsx
index 9289ebf..28f1118 100644
--- a/src/components/StreamMessage.tsx
+++ b/src/components/StreamMessage.tsx
@@ -75,14 +75,6 @@ const StreamMessageComponent: React.FC<StreamMessageProps> = ({ message, classNa
     return toolResults.get(toolId) || null;
   };
   
-  // Debug logging to understand message structure
-  console.log('[StreamMessage] Rendering message:', {
-    type: message.type,
-    hasMessage: !!message.message,
-    messageStructure: message.message ? Object.keys(message.message) : 'no message field',
-    fullMessage: message
-  });
-  
   try {
     // Skip rendering for meta messages that don't have meaningful content
     if (message.isMeta && !message.leafUuid && !message.summary) {
diff --git a/src/components/ToolWidgets.tsx b/src/components/ToolWidgets.tsx
index de9c814..d8a2dc1 100644
--- a/src/components/ToolWidgets.tsx
+++ b/src/components/ToolWidgets.tsx
@@ -1877,43 +1877,38 @@ export const TaskWidget: React.FC<{
 export const ThinkingWidget: React.FC<{ 
   thinking: string;
   signature?: string;
-}> = ({ thinking, signature }) => {
+}> = ({ thinking }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   
+  // Strip whitespace from thinking content
+  const trimmedThinking = thinking.trim();
+  
   return (
-    <div className="rounded-lg border border-purple-500/20 bg-gradient-to-br from-purple-500/5 to-violet-500/5 overflow-hidden">
+    <div className="rounded-lg border border-gray-500/20 bg-gray-500/5 overflow-hidden">
       <button
         onClick={() => setIsExpanded(!isExpanded)}
-        className="w-full px-4 py-3 flex items-center justify-between hover:bg-purple-500/10 transition-colors"
+        className="w-full px-4 py-3 flex items-center justify-between hover:bg-gray-500/10 transition-colors"
       >
         <div className="flex items-center gap-2">
           <div className="relative">
-            <Bot className="h-4 w-4 text-purple-500" />
-            <Sparkles className="h-2.5 w-2.5 text-purple-400 absolute -top-1 -right-1 animate-pulse" />
+            <Bot className="h-4 w-4 text-gray-500" />
+            <Sparkles className="h-2.5 w-2.5 text-gray-400 absolute -top-1 -right-1 animate-pulse" />
           </div>
-          <span className="text-sm font-medium text-purple-600 dark:text-purple-400">
+          <span className="text-sm font-medium text-gray-600 dark:text-gray-400 italic">
             Thinking...
           </span>
         </div>
         <ChevronRight className={cn(
-          "h-4 w-4 text-purple-500 transition-transform",
+          "h-4 w-4 text-gray-500 transition-transform",
           isExpanded && "rotate-90"
         )} />
       </button>
       
       {isExpanded && (
-        <div className="px-4 pb-4 pt-2 space-y-3 border-t border-purple-500/20">
-          <div className="prose prose-sm dark:prose-invert max-w-none">
-            <pre className="text-xs font-mono text-purple-700 dark:text-purple-300 whitespace-pre-wrap bg-purple-500/5 p-3 rounded-lg">
-              {thinking}
-            </pre>
-          </div>
-          
-          {signature && (
-            <div className="text-xs text-purple-600/60 dark:text-purple-400/60 font-mono truncate">
-              Signature: {signature.slice(0, 16)}...
-            </div>
-          )}
+        <div className="px-4 pb-4 pt-2 border-t border-gray-500/20">
+          <pre className="text-xs font-mono text-gray-600 dark:text-gray-400 whitespace-pre-wrap bg-gray-500/5 p-3 rounded-lg italic">
+            {trimmedThinking}
+          </pre>
         </div>
       )}
     </div>