feat: add draw.io theme toggle between minimal and sketch (#106)

- Add toggle button in chat input area to switch between min and sketch themes
- Show warning dialog before switching (clears messages and diagram)
- Persist theme selection in localStorage
- Default theme is minimal (hides shapes sidebar)

components/chat-input.tsx

@@ -5,6 +5,14 @@ import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { ResetWarningModal } from "@/components/reset-warning-modal";
 import { SaveDialog } from "@/components/save-dialog";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
 import {
     Loader2,
     Send,
@@ -12,6 +20,8 @@ import {
     Image as ImageIcon,
     History,
     Download,
+    PenTool,
+    LayoutGrid,
 } from "lucide-react";
 import { toast } from "sonner";
 import { ButtonWithTooltip } from "@/components/button-with-tooltip";
@@ -97,6 +107,8 @@ interface ChatInputProps {
     onToggleHistory?: (show: boolean) => void;
     sessionId?: string;
     error?: Error | null;
+    drawioUi?: "min" | "sketch";
+    onToggleDrawioUi?: () => void;
 }
 
 export function ChatInput({
@@ -111,6 +123,8 @@ export function ChatInput({
     onToggleHistory = () => {},
     sessionId,
     error = null,
+    drawioUi = "min",
+    onToggleDrawioUi = () => {},
 }: ChatInputProps) {
     const { diagramHistory, saveDiagramToFile } = useDiagram();
     const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -118,6 +132,7 @@ export function ChatInput({
     const [isDragging, setIsDragging] = useState(false);
     const [showClearDialog, setShowClearDialog] = useState(false);
     const [showSaveDialog, setShowSaveDialog] = useState(false);
+    const [showThemeWarning, setShowThemeWarning] = useState(false);
 
     // Allow retry when there's an error (even if status is still "streaming" or "submitted")
     const isDisabled =
@@ -295,6 +310,50 @@ export function ChatInput({
                             showHistory={showHistory}
                             onToggleHistory={onToggleHistory}
                         />
+
+                        <ButtonWithTooltip
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setShowThemeWarning(true)}
+                            tooltipContent={drawioUi === "min" ? "Switch to Sketch theme" : "Switch to Minimal theme"}
+                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                        >
+                            {drawioUi === "min" ? (
+                                <PenTool className="h-4 w-4" />
+                            ) : (
+                                <LayoutGrid className="h-4 w-4" />
+                            )}
+                        </ButtonWithTooltip>
+
+                        <Dialog open={showThemeWarning} onOpenChange={setShowThemeWarning}>
+                            <DialogContent>
+                                <DialogHeader>
+                                    <DialogTitle>Switch Theme?</DialogTitle>
+                                    <DialogDescription>
+                                        Switching themes will reload the diagram editor and clear any unsaved changes.
+                                    </DialogDescription>
+                                </DialogHeader>
+                                <DialogFooter>
+                                    <Button
+                                        variant="outline"
+                                        onClick={() => setShowThemeWarning(false)}
+                                    >
+                                        Cancel
+                                    </Button>
+                                    <Button
+                                        variant="destructive"
+                                        onClick={() => {
+                                            onClearChat();
+                                            onToggleDrawioUi();
+                                            setShowThemeWarning(false);
+                                        }}
+                                    >
+                                        Switch Theme
+                                    </Button>
+                                </DialogFooter>
+                            </DialogContent>
+                        </Dialog>
                     </div>
 
                     {/* Right actions */}

components/chat-panel.tsx

@@ -29,11 +29,15 @@ import {
 interface ChatPanelProps {
     isVisible: boolean;
     onToggleVisibility: () => void;
+    drawioUi: "min" | "sketch";
+    onToggleDrawioUi: () => void;
 }
 
 export default function ChatPanel({
     isVisible,
     onToggleVisibility,
+    drawioUi,
+    onToggleDrawioUi,
 }: ChatPanelProps) {
     const {
         loadDiagram: onDisplayChart,
@@ -531,6 +535,8 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                     onToggleHistory={setShowHistory}
                     sessionId={sessionId}
                     error={error}
+                    drawioUi={drawioUi}
+                    onToggleDrawioUi={onToggleDrawioUi}
                 />
             </footer>