feat: enhance ToolCallMessage component with dynamic status colors (#110)

Added a new utility function to determine color classes based on the
status and error state of tool calls. This improves the visual feedback
in the ToolCallMessage component by using color-coded indicators for
different states (error, completed, loading).

This change enhances user experience by providing clearer status
information at a glance.


![CleanShot 2025-07-07 at 16 15
25](https://github.com/user-attachments/assets/9bbd8f67-ef45-4f01-b355-83c906ddffd0)

![CleanShot 2025-07-07 at 16 14
09@2x](https://github.com/user-attachments/assets/6ba87eba-f5ae-48f5-8011-b67bf90d2792)

Closes #111

Author: nickytonline

src/components/ToolCallMessage.tsx

@@ -38,6 +38,32 @@ const getStatusText = (status?: string, error?: string) => {
   return 'Tool call'
 }
 
+const getColorClasses = (status?: string, error?: string) => {
+  // Red for failed/error states
+  if (error || status?.includes('failed')) {
+    return {
+      icon: 'bg-red-100 text-red-600 dark:bg-red-900 dark:text-red-300',
+      content: 'bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-100',
+    }
+  }
+
+  // Green for completed/done states
+  if (status?.includes('completed') || status?.includes('done')) {
+    return {
+      icon: 'bg-green-100 text-green-600 dark:bg-green-900 dark:text-green-300',
+      content:
+        'bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-100',
+    }
+  }
+
+  // Yellow for loading/working states (in progress, preparing, etc.)
+  return {
+    icon: 'bg-yellow-100 text-yellow-600 dark:bg-yellow-900 dark:text-yellow-300',
+    content:
+      'bg-yellow-50 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-100',
+  }
+}
+
 const getTitle = (name: string, args: ToolCallMessageProps['args']) => {
   // For tool calls, include the tool name if available
   if (args.toolName) {
@@ -51,14 +77,20 @@ const getTitle = (name: string, args: ToolCallMessageProps['args']) => {
 }
 
 export function ToolCallMessage({ name, args }: ToolCallMessageProps) {
+  const colorClasses = getColorClasses(args.status, args.error)
+
   return (
     <div className="flex w-full max-w-full gap-2 py-2 animate-in fade-in justify-start">
-      <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-orange-100 text-orange-600 dark:bg-orange-900 dark:text-orange-300">
+      <div
+        className={`flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md ${colorClasses.icon}`}
+      >
         <Wrench className="h-5 w-5" />
       </div>
 
       <div className="flex flex-col space-y-1 items-start w-full sm:w-[85%] md:w-[75%] lg:w-[65%]">
-        <details className="rounded-2xl px-4 py-2 text-sm w-full group [&:not([open])]:h-8 [&:not([open])]:flex [&:not([open])]:items-center [&:not([open])]:py-0 bg-orange-50 text-orange-900 dark:bg-orange-950 dark:text-orange-100">
+        <details
+          className={`rounded-2xl px-4 py-2 text-sm w-full group [&:not([open])]:h-8 [&:not([open])]:flex [&:not([open])]:items-center [&:not([open])]:py-0 ${colorClasses.content}`}
+        >
           <summary className="font-medium mb-1 flex items-center gap-2 list-none [&::-webkit-details-marker]:hidden cursor-pointer group-[&:not([open])]:mb-0">
             <ChevronRight className="h-4 w-4 transition-transform group-open:rotate-90" />
             {getTitle(name, args)}