feat: refresh UI with new typography and edit diff display (#63)

- Switch from Geist to Plus Jakarta Sans (body) and JetBrains Mono (code)
- Add visual diff display for edit_diagram tool showing search/replace pairs
- Update color palette to clean modern OKLCH-based scheme
- Improve chat message display with better styling and animations
- Add syntax-highlighted code blocks for XML/JSON output
- Improve scrollbar and shadow utilities

components/chat-example-panel.tsx

@@ -1,3 +1,37 @@
+"use client";
+
+import { Zap, Cloud, GitBranch, Palette } from "lucide-react";
+
+interface ExampleCardProps {
+    icon: React.ReactNode;
+    title: string;
+    description: string;
+    onClick: () => void;
+}
+
+function ExampleCard({ icon, title, description, onClick }: ExampleCardProps) {
+    return (
+        <button
+            onClick={onClick}
+            className="group w-full text-left p-4 rounded-xl border border-border/60 bg-card hover:bg-accent/50 hover:border-primary/30 transition-all duration-200 hover:shadow-sm"
+        >
+            <div className="flex items-start gap-3">
+                <div className="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center shrink-0 group-hover:bg-primary/15 transition-colors">
+                    {icon}
+                </div>
+                <div className="min-w-0">
+                    <h3 className="text-sm font-medium text-foreground group-hover:text-primary transition-colors">
+                        {title}
+                    </h3>
+                    <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
+                        {description}
+                    </p>
+                </div>
+            </div>
+        </button>
+    );
+}
+
 export default function ExamplePanel({
     setInput,
     setFiles,
@@ -5,80 +39,85 @@ export default function ExamplePanel({
     setInput: (input: string) => void;
     setFiles: (files: File[]) => void;
 }) {
-    // New handler for the "Replicate this flowchart" button
     const handleReplicateFlowchart = async () => {
         setInput("Replicate this flowchart.");
 
         try {
-            // Fetch the example image
             const response = await fetch("/example.png");
             const blob = await response.blob();
             const file = new File([blob], "example.png", { type: "image/png" });
-
-            // Set the file to the files state
             setFiles([file]);
         } catch (error) {
             console.error("Error loading example image:", error);
         }
     };
 
-    // Handler for the "Replicate this in aws style" button
     const handleReplicateArchitecture = async () => {
         setInput("Replicate this in aws style");
 
         try {
-            // Fetch the architecture image
             const response = await fetch("/architecture.png");
             const blob = await response.blob();
             const file = new File([blob], "architecture.png", {
                 type: "image/png",
             });
-
-            // Set the file to the files state
             setFiles([file]);
         } catch (error) {
             console.error("Error loading architecture image:", error);
         }
     };
+
     return (
-        <div className="px-4 py-2 border-t border-b border-gray-100">
-            <p className="text-sm text-gray-500 mb-2">
-                {" "}
-                Start a conversation to generate or modify diagrams.
-            </p>
-            <p className="text-sm text-gray-500 mb-2">
-                {" "}
-                You can also upload images to use as references.
-            </p>
-            <p className="text-sm text-gray-500 mb-2">
-                Try these examples{" "}
-                <span className="text-xs text-gray-400">(cached for instant response)</span>:
-            </p>
-            <div className="flex flex-wrap gap-5">
-                <button
-                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
-                    onClick={() => setInput("Give me a **animated connector** diagram of transformer's architecture")}
-                >
-                    Draw diagram with Animated Connectors
-                </button>
-                <button
-                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
-                    onClick={handleReplicateArchitecture}
-                >
-                    Create AWS architecture
-                </button>
-                <button
-                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
-                    onClick={handleReplicateFlowchart}
-                >
-                    Replicate flowchart
-                </button>
-                <button
-                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
-                    onClick={() => setInput("Draw a cat for me")}
-                >
-                    Draw a cat
-                </button>
+        <div className="py-6 px-2 animate-fade-in">
+            {/* Welcome section */}
+            <div className="text-center mb-6">
+                <h2 className="text-lg font-semibold text-foreground mb-2">
+                    Create diagrams with AI
+                </h2>
+                <p className="text-sm text-muted-foreground max-w-xs mx-auto">
+                    Describe what you want to create or upload an image to replicate
+                </p>
+            </div>
+
+            {/* Examples grid */}
+            <div className="space-y-3">
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider px-1">
+                    Quick Examples
+                </p>
+
+                <div className="grid gap-2">
+                    <ExampleCard
+                        icon={<Zap className="w-4 h-4 text-primary" />}
+                        title="Animated Diagram"
+                        description="Draw a transformer architecture with animated connectors"
+                        onClick={() => setInput("Give me a **animated connector** diagram of transformer's architecture")}
+                    />
+
+                    <ExampleCard
+                        icon={<Cloud className="w-4 h-4 text-primary" />}
+                        title="AWS Architecture"
+                        description="Create a cloud architecture diagram with AWS icons"
+                        onClick={handleReplicateArchitecture}
+                    />
+
+                    <ExampleCard
+                        icon={<GitBranch className="w-4 h-4 text-primary" />}
+                        title="Replicate Flowchart"
+                        description="Upload and replicate an existing flowchart"
+                        onClick={handleReplicateFlowchart}
+                    />
+
+                    <ExampleCard
+                        icon={<Palette className="w-4 h-4 text-primary" />}
+                        title="Creative Drawing"
+                        description="Draw something fun and creative"
+                        onClick={() => setInput("Draw a cat for me")}
+                    />
+                </div>
+
+                <p className="text-[11px] text-muted-foreground/60 text-center mt-4">
+                    Examples are cached for instant response
+                </p>
             </div>
         </div>
     );