Improve JsonView component styling and change to use JsonView in PromptsTab

Author: cgoinglove

client/src/components/JsonView.tsx

@@ -1,5 +1,6 @@
 import { useState, memo } from "react";
 import { JsonValue } from "./DynamicJsonForm";
+import clsx from "clsx";
 
 interface JsonViewProps {
   data: JsonValue;
@@ -70,7 +71,7 @@ const JsonNode = memo(
       boolean: "text-amber-600",
       null: "text-purple-600",
       undefined: "text-gray-600",
-      string: "text-green-600",
+      string: "text-green-600 break-all",
       default: "text-gray-700",
     };
 
@@ -173,7 +174,7 @@ const JsonNode = memo(
                 {name}:
               </span>
             )}
-            <span className={typeStyleMap.string}>"{value}"</span>
+            <p className={typeStyleMap.string}>"{value}"</p>
           </div>
         );
       }
@@ -186,7 +187,10 @@ const JsonNode = memo(
             </span>
           )}
           <span
-            className={`${typeStyleMap.string} cursor-pointer group-hover:text-green-500`}
+            className={clsx(
+              typeStyleMap.string,
+              "cursor-pointer group-hover:text-green-500",
+            )}
             onClick={() => setIsExpanded(!isExpanded)}
             title={isExpanded ? "Click to collapse" : "Click to expand"}
           >

client/src/components/PromptsTab.tsx

@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Combobox } from "@/components/ui/combobox";
 import { Label } from "@/components/ui/label";
 import { TabsContent } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
+
 import {
   ListPromptsResult,
   PromptReference,
@@ -13,6 +13,7 @@ import { AlertCircle } from "lucide-react";
 import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
 import { useCompletionState } from "@/lib/hooks/useCompletionState";
+import JsonView from "./JsonView";
 
 export type Prompt = {
   name: string;
@@ -151,11 +152,9 @@ const PromptsTab = ({
                 Get Prompt
               </Button>
               {promptContent && (
-                <Textarea
-                  value={promptContent}
-                  readOnly
-                  className="h-64 font-mono"
-                />
+                <div className="p-4 border rounded">
+                  <JsonView data={promptContent} />
+                </div>
               )}
             </div>
           ) : (

client/src/components/ToolsTab.tsx

@@ -54,17 +54,14 @@ const ToolsTab = ({
         return (
           <>
             <h4 className="font-semibold mb-2">Invalid Tool Result:</h4>
-            <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
+            <div className="p-4 border rounded">
               <JsonView data={escapeUnicode(toolResult)} />
-            </pre>
+            </div>
             <h4 className="font-semibold mb-2">Errors:</h4>
             {parsedResult.error.errors.map((error, idx) => (
-              <pre
-                key={idx}
-                className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64"
-              >
+              <div key={idx} className="p-4 border rounded">
                 <JsonView data={escapeUnicode(error)} />
-              </pre>
+              </div>
             ))}
           </>
         );
@@ -80,9 +77,9 @@ const ToolsTab = ({
           {structuredResult.content.map((item, index) => (
             <div key={index} className="mb-2">
               {item.type === "text" && (
-                <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
+                <div className="p-4 border rounded">
                   <JsonView data={item.text} />
-                </pre>
+                </div>
               )}
               {item.type === "image" && (
                 <img
@@ -101,9 +98,9 @@ const ToolsTab = ({
                     <p>Your browser does not support audio playback</p>
                   </audio>
                 ) : (
-                  <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words p-4 rounded text-sm overflow-auto max-h-64">
+                  <div className="p-4 border rounded">
                     <JsonView data={escapeUnicode(item.resource)} />
-                  </pre>
+                  </div>
                 ))}
             </div>
           ))}
@@ -113,9 +110,9 @@ const ToolsTab = ({
       return (
         <>
           <h4 className="font-semibold mb-2">Tool Result (Legacy):</h4>
-          <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
+          <div className="p-4 border rounded">
             <JsonView data={escapeUnicode(toolResult.toolResult)} />
-          </pre>
+          </div>
         </>
       );
     }