"use client"; import React, { useState, useEffect, useRef, useCallback, memo } from "react"; import { MessageSquare, Send, Sparkles, Brain, Cpu, Code2, Palette, Search, Terminal, Eye, Trash2, Loader2, Bot, User, X, RotateCcw, CheckCircle2, Copy, Monitor, StopCircle, Maximize2, Minimize2, ChevronRight, Layout, Zap, Ghost } from "lucide-react"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; import rehypeHighlight from "rehype-highlight"; import { cn } from "@/lib/utils"; import { AIAssistMessage } from "@/types"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Input } from "@/components/ui/input"; import useStore from "@/lib/store"; import { translations } from "@/lib/i18n/translations"; import modelAdapter from "@/lib/services/adapter-instance"; // --- Types --- interface PreviewData { type: string; data: string; language?: string; isStreaming?: boolean; } // --- Specialized Components --- /** * A ultra-stable iframe wrapper that avoids hydration issues * and provides a WOW visual experience. */ const LiveCanvas = memo(({ data, type, isStreaming }: { data: string, type: string, isStreaming: boolean }) => { const iframeRef = useRef(null); useEffect(() => { if (!iframeRef.current) return; const isHtml = data.includes(" ${data} `; iframeRef.current.srcdoc = doc; } }, [data, type]); return (