feat: highlight tool errors in red text

Author: kavinkumar807

client/src/components/JsonView.tsx

@@ -11,6 +11,7 @@ interface JsonViewProps {
   initialExpandDepth?: number;
   className?: string;
   withCopyButton?: boolean;
+  isError?: boolean;
 }
 
 function tryParseJson(str: string): { success: boolean; data: JsonValue } {
@@ -35,6 +36,7 @@ const JsonView = memo(
     initialExpandDepth = 3,
     className,
     withCopyButton = true,
+    isError = false
   }: JsonViewProps) => {
     const { toast } = useToast();
     const [copied, setCopied] = useState(false);
@@ -100,6 +102,7 @@ const JsonView = memo(
             name={name}
             depth={0}
             initialExpandDepth={initialExpandDepth}
+            isError = {isError}
           />
         </div>
       </div>
@@ -114,10 +117,11 @@ interface JsonNodeProps {
   name?: string;
   depth: number;
   initialExpandDepth: number;
+  isError?: boolean;
 }
 
 const JsonNode = memo(
-  ({ data, name, depth = 0, initialExpandDepth }: JsonNodeProps) => {
+  ({ data, name, depth = 0, initialExpandDepth, isError = false }: JsonNodeProps) => {
     const [isExpanded, setIsExpanded] = useState(depth < initialExpandDepth);
 
     const getDataType = (value: JsonValue): string => {
@@ -133,7 +137,8 @@ const JsonNode = memo(
       boolean: "text-amber-600",
       null: "text-purple-600",
       undefined: "text-gray-600",
-      string: "text-green-600 break-all whitespace-pre-wrap",
+      string: "text-green-600 group-hover:text-green-500",
+      error: "text-red-600 group-hover:text-red-500",
       default: "text-gray-700",
     };
 
@@ -236,7 +241,7 @@ const JsonNode = memo(
                 {name}:
               </span>
             )}
-            <pre className={typeStyleMap.string}>"{value}"</pre>
+            <pre className={clsx(typeStyleMap.string, "break-all whitespace-pre-wrap")}>"{value}"</pre>
           </div>
         );
       }
@@ -250,8 +255,8 @@ const JsonNode = memo(
           )}
           <pre
             className={clsx(
-              typeStyleMap.string,
-              "cursor-pointer group-hover:text-green-500",
+              isError ? typeStyleMap.error : typeStyleMap.string,
+              "cursor-pointer break-all whitespace-pre-wrap",
             )}
             onClick={() => setIsExpanded(!isExpanded)}
             title={isExpanded ? "Click to collapse" : "Click to expand"}

client/src/components/ToolsTab.tsx

@@ -66,11 +66,11 @@ const ToolsTab = ({
       return (
         <>
           <h4 className="font-semibold mb-2">
-            Tool Result: {isError ? "Error" : "Success"}
+            Tool Result: {isError ? <span className="text-red-600 font-semibold">Error</span> : <span className="text-green-600 font-semibold">Success</span>}
           </h4>
           {structuredResult.content.map((item, index) => (
             <div key={index} className="mb-2">
-              {item.type === "text" && <JsonView data={item.text} />}
+              {item.type === "text" && <JsonView data={item.text} isError={isError}/>}
               {item.type === "image" && (
                 <img
                   src={`data:${item.mimeType};base64,${item.data}`}