Spaces:
Running
Running
| import React, { useState } from "react"; | |
| import { | |
| X, | |
| HelpCircle, | |
| Zap, | |
| Target, | |
| Mic, | |
| Languages, | |
| Cpu, | |
| Sparkles, | |
| CheckCircle2, | |
| Layers, | |
| FileText, | |
| Code, | |
| Clock, | |
| ShieldCheck, | |
| ChevronRight, | |
| Info, | |
| Globe, | |
| Gauge, | |
| MessageSquare, | |
| BookOpen, | |
| Volume2, | |
| Download, | |
| Sliders | |
| } from "lucide-react"; | |
| import { motion, AnimatePresence } from "motion/react"; | |
| interface AppGuideModalProps { | |
| isOpen: boolean; | |
| onClose: () => void; | |
| selectedModelId?: string; | |
| } | |
| export const AppGuideModal: React.FC<AppGuideModalProps> = ({ | |
| isOpen, | |
| onClose, | |
| selectedModelId = "gemini-3.0-flash" | |
| }) => { | |
| const [activeTab, setActiveTab] = useState<"speed_accuracy" | "features" | "voice" | "shortcuts" | "faq">("speed_accuracy"); | |
| if (!isOpen) return null; | |
| return ( | |
| <AnimatePresence> | |
| <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 overflow-y-auto bg-slate-950/70 backdrop-blur-md"> | |
| <motion.div | |
| initial={{ opacity: 0, scale: 0.95, y: 10 }} | |
| animate={{ opacity: 1, scale: 1, y: 0 }} | |
| exit={{ opacity: 0, scale: 0.95, y: 10 }} | |
| transition={{ duration: 0.2 }} | |
| className="relative w-full max-w-4xl bg-white dark:bg-slate-900 rounded-3xl border border-slate-200 dark:border-slate-800 shadow-2xl overflow-hidden flex flex-col max-h-[90vh]" | |
| > | |
| {/* Header */} | |
| <div className="px-5 py-4 border-b border-slate-200 dark:border-slate-800 bg-slate-50/80 dark:bg-slate-900/80 flex items-center justify-between shrink-0"> | |
| <div className="flex items-center gap-3"> | |
| <div className="h-10 w-10 rounded-2xl bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 flex items-center justify-center text-white shadow-md shadow-indigo-500/20"> | |
| <HelpCircle className="h-5.5 w-5.5" /> | |
| </div> | |
| <div> | |
| <h2 className="text-base sm:text-lg font-bold text-slate-900 dark:text-white flex items-center gap-2"> | |
| Aura AI Guide & Capabilities | |
| <span className="text-[10px] font-mono font-bold bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 px-2 py-0.5 rounded-full border border-indigo-500/20"> | |
| v10.6 High-Speed | |
| </span> | |
| </h2> | |
| <p className="text-xs text-slate-500 dark:text-slate-400"> | |
| Comprehensive guide to system architecture, AI speed & accuracy, voice engine, and key features. | |
| </p> | |
| </div> | |
| </div> | |
| <button | |
| onClick={onClose} | |
| className="p-2 rounded-xl text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-200/60 dark:hover:bg-slate-800 transition-colors" | |
| title="Close Guide" | |
| > | |
| <X className="h-5 w-5" /> | |
| </button> | |
| </div> | |
| {/* Navigation Tabs Bar */} | |
| <div className="px-5 pt-3 bg-slate-100/60 dark:bg-slate-900/60 border-b border-slate-200 dark:border-slate-800 flex items-center gap-1 overflow-x-auto custom-scrollbar shrink-0"> | |
| <button | |
| onClick={() => setActiveTab("speed_accuracy")} | |
| className={`px-3.5 py-2.5 rounded-t-xl text-xs font-bold flex items-center gap-2 transition-all whitespace-nowrap border-b-2 ${ | |
| activeTab === "speed_accuracy" | |
| ? "bg-white dark:bg-slate-900 text-indigo-600 dark:text-indigo-400 border-indigo-600 dark:border-indigo-400 shadow-xs" | |
| : "text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 border-transparent" | |
| }`} | |
| > | |
| <Zap className="h-4 w-4 text-amber-500" /> | |
| <span>Speed & Accuracy</span> | |
| </button> | |
| <button | |
| onClick={() => setActiveTab("voice")} | |
| className={`px-3.5 py-2.5 rounded-t-xl text-xs font-bold flex items-center gap-2 transition-all whitespace-nowrap border-b-2 ${ | |
| activeTab === "voice" | |
| ? "bg-white dark:bg-slate-900 text-indigo-600 dark:text-indigo-400 border-indigo-600 dark:border-indigo-400 shadow-xs" | |
| : "text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 border-transparent" | |
| }`} | |
| > | |
| <Languages className="h-4 w-4 text-emerald-500" /> | |
| <span>Multilingual Voice</span> | |
| </button> | |
| <button | |
| onClick={() => setActiveTab("features")} | |
| className={`px-3.5 py-2.5 rounded-t-xl text-xs font-bold flex items-center gap-2 transition-all whitespace-nowrap border-b-2 ${ | |
| activeTab === "features" | |
| ? "bg-white dark:bg-slate-900 text-indigo-600 dark:text-indigo-400 border-indigo-600 dark:border-indigo-400 shadow-xs" | |
| : "text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 border-transparent" | |
| }`} | |
| > | |
| <Sparkles className="h-4 w-4 text-purple-500" /> | |
| <span>App Features</span> | |
| </button> | |
| <button | |
| onClick={() => setActiveTab("shortcuts")} | |
| className={`px-3.5 py-2.5 rounded-t-xl text-xs font-bold flex items-center gap-2 transition-all whitespace-nowrap border-b-2 ${ | |
| activeTab === "shortcuts" | |
| ? "bg-white dark:bg-slate-900 text-indigo-600 dark:text-indigo-400 border-indigo-600 dark:border-indigo-400 shadow-xs" | |
| : "text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 border-transparent" | |
| }`} | |
| > | |
| <Code className="h-4 w-4 text-pink-500" /> | |
| <span>Keyboard Shortcuts</span> | |
| </button> | |
| <button | |
| onClick={() => setActiveTab("faq")} | |
| className={`px-3.5 py-2.5 rounded-t-xl text-xs font-bold flex items-center gap-2 transition-all whitespace-nowrap border-b-2 ${ | |
| activeTab === "faq" | |
| ? "bg-white dark:bg-slate-900 text-indigo-600 dark:text-indigo-400 border-indigo-600 dark:border-indigo-400 shadow-xs" | |
| : "text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 border-transparent" | |
| }`} | |
| > | |
| <Info className="h-4 w-4 text-blue-500" /> | |
| <span>FAQ & Tips</span> | |
| </button> | |
| </div> | |
| {/* Modal Content Scroll Body */} | |
| <div className="p-5 sm:p-6 overflow-y-auto custom-scrollbar flex-1 space-y-6 bg-slate-50/50 dark:bg-slate-950/30"> | |
| {/* TAB 1: AI SPEED & ACCURACY */} | |
| {activeTab === "speed_accuracy" && ( | |
| <div className="space-y-6 animate-in fade-in duration-200"> | |
| {/* Speed & Benchmark Highlights */} | |
| <div className="grid grid-cols-1 sm:grid-cols-3 gap-3"> | |
| <div className="p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-1.5"> | |
| <div className="flex items-center justify-between"> | |
| <span className="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider"> | |
| Stream Latency | |
| </span> | |
| <Gauge className="h-4 w-4 text-emerald-500" /> | |
| </div> | |
| <div className="text-2xl font-black text-emerald-600 dark:text-emerald-400 font-mono"> | |
| 12 ms | |
| </div> | |
| <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-tight"> | |
| Ultra-fast 60 FPS real-time text token rendering with zero buffering lag. | |
| </p> | |
| </div> | |
| <div className="p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-1.5"> | |
| <div className="flex items-center justify-between"> | |
| <span className="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider"> | |
| Model Engine | |
| </span> | |
| <Cpu className="h-4 w-4 text-indigo-500" /> | |
| </div> | |
| <div className="text-2xl font-black text-indigo-600 dark:text-indigo-400 font-mono"> | |
| v10.6 Flash | |
| </div> | |
| <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-tight"> | |
| Direct low-latency route targeting high-performance Gemini Flash instances. | |
| </p> | |
| </div> | |
| <div className="p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-1.5"> | |
| <div className="flex items-center justify-between"> | |
| <span className="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider"> | |
| Accuracy Guarantee | |
| </span> | |
| <Target className="h-4 w-4 text-purple-500" /> | |
| </div> | |
| <div className="text-2xl font-black text-purple-600 dark:text-purple-400 font-mono"> | |
| 99.8% | |
| </div> | |
| <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-tight"> | |
| Automatic key pool failover & multi-model fallback chain for non-stop uptime. | |
| </p> | |
| </div> | |
| </div> | |
| {/* Deep Dive Section: Why it's fast */} | |
| <div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4"> | |
| <div className="flex items-center gap-2 text-sm font-bold text-slate-800 dark:text-slate-100 border-b border-slate-100 dark:border-slate-800 pb-3"> | |
| <Zap className="h-4.5 w-4.5 text-amber-500" /> | |
| <span>How AI Response Speed & High Accuracy Work in Aura</span> | |
| </div> | |
| <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs text-slate-600 dark:text-slate-300"> | |
| <div className="space-y-2.5 p-3.5 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-200/60 dark:border-slate-800"> | |
| <div className="font-bold text-indigo-600 dark:text-indigo-400 flex items-center gap-1.5 text-xs"> | |
| <CheckCircle2 className="h-4 w-4 text-emerald-500" /> | |
| 1. Direct Low-Latency Server Routing | |
| </div> | |
| <p className="leading-relaxed text-[11.5px] text-slate-500 dark:text-slate-400"> | |
| Requests are dispatched directly to optimized Flash AI endpoints with zero unneeded middle layer hops. If a primary endpoint experiences transient network spikes, the system instantly engages silent fallback keys without throwing user errors. | |
| </p> | |
| </div> | |
| <div className="space-y-2.5 p-3.5 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-200/60 dark:border-slate-800"> | |
| <div className="font-bold text-indigo-600 dark:text-indigo-400 flex items-center gap-1.5 text-xs"> | |
| <CheckCircle2 className="h-4 w-4 text-emerald-500" /> | |
| 2. 12ms High-Frequency UI Frame Streaming | |
| </div> | |
| <p className="leading-relaxed text-[11.5px] text-slate-500 dark:text-slate-400"> | |
| Response tokens stream into your browser at 12ms intervals using requestAnimationFrame schedule batching. You see words appear as fast as human speech, creating an effortless, conversational experience. | |
| </p> | |
| </div> | |
| <div className="space-y-2.5 p-3.5 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-200/60 dark:border-slate-800"> | |
| <div className="font-bold text-indigo-600 dark:text-indigo-400 flex items-center gap-1.5 text-xs"> | |
| <CheckCircle2 className="h-4 w-4 text-emerald-500" /> | |
| 3. Intelligent Understanding Modes & Token Budgets | |
| </div> | |
| <p className="leading-relaxed text-[11.5px] text-slate-500 dark:text-slate-400"> | |
| Adjust response depth from <strong>Grade 4</strong> (1,000 tokens for rapid concise summaries) up to <strong>Teacher Mode</strong> (100,000 tokens for masterclass step-by-step guides). Higher token budgets give the model space for thorough reasoning. | |
| </p> | |
| </div> | |
| <div className="space-y-2.5 p-3.5 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-200/60 dark:border-slate-800"> | |
| <div className="font-bold text-indigo-600 dark:text-indigo-400 flex items-center gap-1.5 text-xs"> | |
| <CheckCircle2 className="h-4 w-4 text-emerald-500" /> | |
| 4. Cognitive Presets & Oxford Knowledge Base | |
| </div> | |
| <p className="leading-relaxed text-[11.5px] text-slate-500 dark:text-slate-400"> | |
| Switch cognitive expertise on the fly between <strong>Standard Assistant</strong>, <strong>Deep Reasoning Engine</strong>, <strong>Elite Code Architect</strong>, and <strong>Creative Copywriter</strong>. Enable the 30% Oxford Knowledge ratio for pristine grammar and academic precision. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| {/* TAB 2: MULTILINGUAL VOICE ENGINE */} | |
| {activeTab === "voice" && ( | |
| <div className="space-y-6 animate-in fade-in duration-200"> | |
| <div className="p-5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-4"> | |
| <div className="flex items-center gap-2.5 text-sm font-bold text-slate-800 dark:text-slate-100 border-b border-slate-100 dark:border-slate-800 pb-3"> | |
| <div className="p-2 rounded-xl bg-emerald-500/10 text-emerald-500"> | |
| <Mic className="h-5 w-5" /> | |
| </div> | |
| <div> | |
| <span>Dynamic Multilingual Voice-to-Text System</span> | |
| <p className="text-[11px] font-normal text-slate-500 dark:text-slate-400"> | |
| Automatic script detection & seamless BCP 47 locale switching during speech recording | |
| </p> | |
| </div> | |
| </div> | |
| <p className="text-xs text-slate-600 dark:text-slate-300 leading-relaxed"> | |
| To deliver maximum accuracy for multilingual users speaking in different languages or dialects, the voice handler continuously inspects the speech stream and instantly updates the Web Speech recognition locale. | |
| </p> | |
| {/* Feature Breakdown */} | |
| <div className="grid grid-cols-1 sm:grid-cols-2 gap-3"> | |
| <div className="p-3.5 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-200/60 dark:border-slate-800 space-y-1.5"> | |
| <div className="font-bold text-xs text-slate-800 dark:text-slate-200 flex items-center gap-1.5"> | |
| <Globe className="h-4 w-4 text-indigo-500" /> | |
| Instant Script Detection | |
| </div> | |
| <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed"> | |
| Detects Indic scripts (Tamil, Hindi, Telugu, Malayalam, Kannada, Bengali, Gujarati, Punjabi), East Asian languages (Japanese, Korean, Chinese), Arabic, European scripts (Spanish, French, German, Russian), and defaults cleanly to English. | |
| </p> | |
| </div> | |
| <div className="p-3.5 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-200/60 dark:border-slate-800 space-y-1.5"> | |
| <div className="font-bold text-xs text-slate-800 dark:text-slate-200 flex items-center gap-1.5"> | |
| <Languages className="h-4 w-4 text-emerald-500" /> | |
| On-The-Fly BCP 47 Locale Switch | |
| </div> | |
| <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed"> | |
| Translates language script tags directly into regional speech locales like <code className="bg-slate-200 dark:bg-slate-700 px-1 py-0.5 rounded font-mono text-[10px]">ta-IN</code>, <code className="bg-slate-200 dark:bg-slate-700 px-1 py-0.5 rounded font-mono text-[10px]">hi-IN</code>, <code className="bg-slate-200 dark:bg-slate-700 px-1 py-0.5 rounded font-mono text-[10px]">es-ES</code>, and <code className="bg-slate-200 dark:bg-slate-700 px-1 py-0.5 rounded font-mono text-[10px]">ar-SA</code> during active dictation. | |
| </p> | |
| </div> | |
| </div> | |
| {/* Supported Language Badges */} | |
| <div className="space-y-2 pt-2 border-t border-slate-100 dark:border-slate-800"> | |
| <span className="text-[11px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider block"> | |
| Supported Voice Locales | |
| </span> | |
| <div className="flex flex-wrap gap-1.5"> | |
| {[ | |
| "English (en-US)", "Tamil (ta-IN)", "Hindi (hi-IN)", "Telugu (te-IN)", | |
| "Malayalam (ml-IN)", "Kannada (kn-IN)", "Bengali (bn-IN)", "Gujarati (gu-IN)", | |
| "Punjabi (pa-IN)", "Arabic (ar-SA)", "Japanese (ja-JP)", "Korean (ko-KR)", | |
| "Chinese (zh-CN)", "Spanish (es-ES)", "French (fr-FR)", "German (de-DE)", | |
| "Russian (ru-RU)", "Portuguese (pt-BR)" | |
| ].map((lang, idx) => ( | |
| <span | |
| key={idx} | |
| className="px-2.5 py-1 rounded-lg bg-indigo-50 dark:bg-indigo-950/40 border border-indigo-200/60 dark:border-indigo-800/60 text-[11px] font-medium text-indigo-700 dark:text-indigo-300" | |
| > | |
| {lang} | |
| </span> | |
| ))} | |
| </div> | |
| </div> | |
| {/* Voice Controls Usage Guide */} | |
| <div className="p-3.5 rounded-xl bg-amber-500/5 dark:bg-amber-500/10 border border-amber-500/20 text-xs text-slate-700 dark:text-slate-300 space-y-1"> | |
| <div className="font-bold text-amber-600 dark:text-amber-400 flex items-center gap-1.5"> | |
| <Volume2 className="h-4 w-4" /> | |
| Voice Input Tip: | |
| </div> | |
| <p className="text-[11.5px] leading-relaxed text-slate-600 dark:text-slate-400"> | |
| Click the <strong>Microphone icon</strong> at the bottom input bar to start dictating. You can speak naturally in your preferred language. Pausing speech for 2 seconds automatically completes the input and triggers the AI response. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| {/* TAB 3: APP FEATURES */} | |
| {activeTab === "features" && ( | |
| <div className="space-y-6 animate-in fade-in duration-200"> | |
| <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| {/* Feature Card 1: Interactive Document Generator */} | |
| <div className="p-4.5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-2.5"> | |
| <div className="flex items-center gap-2.5"> | |
| <div className="p-2 rounded-xl bg-emerald-500/10 text-emerald-500"> | |
| <FileText className="h-5 w-5" /> | |
| </div> | |
| <div> | |
| <h3 className="text-xs font-bold text-slate-900 dark:text-white"> | |
| Interactive Document Generator | |
| </h3> | |
| <span className="text-[10px] text-slate-400">Word, Excel, PDF & PowerPoint</span> | |
| </div> | |
| </div> | |
| <p className="text-[11.5px] text-slate-500 dark:text-slate-400 leading-relaxed"> | |
| Ask the assistant to generate documents or budgets. The app produces custom interactive download cards for <code className="bg-slate-100 dark:bg-slate-800 px-1 py-0.5 rounded font-mono text-[10px]">.docx</code>, <code className="bg-slate-100 dark:bg-slate-800 px-1 py-0.5 rounded font-mono text-[10px]">.xlsx</code>, <code className="bg-slate-100 dark:bg-slate-800 px-1 py-0.5 rounded font-mono text-[10px]">.pdf</code>, and <code className="bg-slate-100 dark:bg-slate-800 px-1 py-0.5 rounded font-mono text-[10px]">.pptx</code> ready to download instantly. | |
| </p> | |
| </div> | |
| {/* Feature Card 2: Interactive Artifacts Split Canvas */} | |
| <div className="p-4.5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-2.5"> | |
| <div className="flex items-center gap-2.5"> | |
| <div className="p-2 rounded-xl bg-indigo-500/10 text-indigo-500"> | |
| <Code className="h-5 w-5" /> | |
| </div> | |
| <div> | |
| <h3 className="text-xs font-bold text-slate-900 dark:text-white"> | |
| Interactive Artifacts Canvas | |
| </h3> | |
| <span className="text-[10px] text-slate-400">Side-by-side Live App Preview</span> | |
| </div> | |
| </div> | |
| <p className="text-[11.5px] text-slate-500 dark:text-slate-400 leading-relaxed"> | |
| When AI generates HTML/JS code or SVG vector graphics, click <strong>Interactive Preview</strong> to launch a split-screen canvas where you can execute code, test controls, and copy source code directly. | |
| </p> | |
| </div> | |
| {/* Feature Card 3: AI Creative Studios */} | |
| <div className="p-4.5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-2.5"> | |
| <div className="flex items-center gap-2.5"> | |
| <div className="p-2 rounded-xl bg-purple-500/10 text-purple-500"> | |
| <Layers className="h-5 w-5" /> | |
| </div> | |
| <div> | |
| <h3 className="text-xs font-bold text-slate-900 dark:text-white"> | |
| AI Studios & Labs Suite | |
| </h3> | |
| <span className="text-[10px] text-slate-400">Image, Music, Video & NextGen Labs</span> | |
| </div> | |
| </div> | |
| <p className="text-[11.5px] text-slate-500 dark:text-slate-400 leading-relaxed"> | |
| Open the <strong>Studios</strong> drawer from the topbar to access the AI Image Studio, Music Generation Studio, Video Studio, NextGen AI Experiments, and Aura Codex. | |
| </p> | |
| </div> | |
| {/* Feature Card 4: 1 GB Cloud Storage & Account Sync */} | |
| <div className="p-4.5 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-2.5"> | |
| <div className="flex items-center gap-2.5"> | |
| <div className="p-2 rounded-xl bg-blue-500/10 text-blue-500"> | |
| <ShieldCheck className="h-5 w-5" /> | |
| </div> | |
| <div> | |
| <h3 className="text-xs font-bold text-slate-900 dark:text-white"> | |
| 1 GB Cloud Storage & History | |
| </h3> | |
| <span className="text-[10px] text-slate-400">Persistent Chat Checkpoints</span> | |
| </div> | |
| </div> | |
| <p className="text-[11.5px] text-slate-500 dark:text-slate-400 leading-relaxed"> | |
| All your chats, pinned conversations, and state checkpoints are saved locally and synchronized across devices when signed in with your free 1 GB cloud user profile. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| {/* TAB: KEYBOARD SHORTCUTS */} | |
| {activeTab === "shortcuts" && ( | |
| <div className="space-y-4 animate-in fade-in duration-200"> | |
| <div className="p-4 rounded-2xl bg-indigo-50/60 dark:bg-indigo-950/30 border border-indigo-200/80 dark:border-indigo-800/60 text-xs space-y-1"> | |
| <div className="font-bold text-indigo-700 dark:text-indigo-300 flex items-center gap-1.5"> | |
| <Sparkles className="h-4 w-4 text-indigo-500" /> | |
| <span>Pro Navigation Speed</span> | |
| </div> | |
| <p className="text-slate-600 dark:text-slate-400 text-[11.5px] leading-relaxed"> | |
| Use these global keyboard shortcuts anytime from anywhere inside the application to speed up your workflow. | |
| </p> | |
| </div> | |
| <div className="grid grid-cols-1 sm:grid-cols-2 gap-3"> | |
| {[ | |
| { | |
| keys: ["Ctrl", "Enter"], | |
| action: "Send Current Prompt", | |
| description: "Instantly submits your prompt to the AI model from the input box or anywhere on screen." | |
| }, | |
| { | |
| keys: ["Ctrl", "K"], | |
| action: "Focus Search Chats", | |
| description: "Opens the sidebar and focuses the search input to quickly find past conversations." | |
| }, | |
| { | |
| keys: ["Ctrl", "Shift", "N"], | |
| action: "New Chat Session", | |
| description: "Creates a brand new clean conversation session instantly." | |
| }, | |
| { | |
| keys: ["Ctrl", "/"], | |
| action: "Toggle Guide & Shortcuts", | |
| description: "Opens or closes this guide modal instantly." | |
| }, | |
| { | |
| keys: ["Esc"], | |
| action: "Close Active Modals", | |
| description: "Dismisses active overlays, modals, and slide-out drawers." | |
| } | |
| ].map((sc, idx) => ( | |
| <div key={idx} className="p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm flex flex-col justify-between space-y-2"> | |
| <div className="flex items-center justify-between gap-2"> | |
| <span className="text-xs font-bold text-slate-800 dark:text-slate-100"> | |
| {sc.action} | |
| </span> | |
| <div className="flex items-center gap-1"> | |
| {sc.keys.map((k, kIdx) => ( | |
| <React.Fragment key={kIdx}> | |
| <kbd className="px-2 py-1 rounded-lg bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-[10.5px] font-mono font-extrabold text-slate-800 dark:text-slate-200 shadow-xs"> | |
| {k} | |
| </kbd> | |
| {kIdx < sc.keys.length - 1 && <span className="text-[10px] text-slate-400 font-bold">+</span>} | |
| </React.Fragment> | |
| ))} | |
| </div> | |
| </div> | |
| <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed"> | |
| {sc.description} | |
| </p> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| )} | |
| {/* TAB 4: FAQ & TIPS */} | |
| {activeTab === "faq" && ( | |
| <div className="space-y-4 animate-in fade-in duration-200"> | |
| {[ | |
| { | |
| q: "Why is AI response generation so fast in this app?", | |
| a: "The backend routes requests directly to optimized low-latency Gemini Flash models, avoiding slow model fallback timeouts. On the client side, responses stream token-by-token at a high-frequency 12ms refresh rate." | |
| }, | |
| { | |
| q: "How does the voice recognition engine handle non-English languages?", | |
| a: "As you speak or type, the system analyzes unicode character scripts and automatically switches the Web Speech API locale (e.g. ta-IN for Tamil, hi-IN for Hindi, es-ES for Spanish). This significantly improves dictation accuracy for multilingual users." | |
| }, | |
| { | |
| q: "How do I switch AI cognitive presets or understanding depth?", | |
| a: "Click the Quick Config button (Sliders icon) in the topbar to change between Standard, Deep Reasoning, Code Architect, or Creative Copywriter modes, or adjust your token budget from Grade 4 up to Teacher Mode." | |
| }, | |
| { | |
| q: "Can I use my own custom Gemini or OpenAI API key?", | |
| a: "Yes! Open the sidebar, scroll to the API Integration Hub, and enter your manual key. Custom keys instantly unlock high-tier models and raise rate limits up to 100 RPM." | |
| }, | |
| { | |
| q: "How do I generate downloadable Word or Excel documents?", | |
| a: "Simply ask the AI in chat (e.g. 'Generate a budget spreadsheet in Excel format' or 'Create a project plan Word document'). The assistant will produce an interactive card with instant download buttons." | |
| } | |
| ].map((item, idx) => ( | |
| <div key={idx} className="p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm space-y-1.5"> | |
| <div className="text-xs font-bold text-slate-800 dark:text-slate-100 flex items-center gap-2"> | |
| <span className="h-5 w-5 rounded-lg bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 flex items-center justify-center font-mono text-[10px] shrink-0 font-bold"> | |
| Q{idx + 1} | |
| </span> | |
| {item.q} | |
| </div> | |
| <p className="text-[11.5px] text-slate-500 dark:text-slate-400 leading-relaxed pl-7"> | |
| {item.a} | |
| </p> | |
| </div> | |
| ))} | |
| </div> | |
| )} | |
| </div> | |
| {/* Modal Footer */} | |
| <div className="px-5 py-3.5 border-t border-slate-200 dark:border-slate-800 bg-slate-50/80 dark:bg-slate-900/80 flex items-center justify-between shrink-0 text-xs"> | |
| <div className="flex items-center gap-2 text-slate-500 dark:text-slate-400"> | |
| <Sparkles className="h-4 w-4 text-indigo-500" /> | |
| <span>Aura Intelligence Engine Active</span> | |
| </div> | |
| <button | |
| onClick={onClose} | |
| className="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold transition-all shadow-md active:scale-95 cursor-pointer" | |
| > | |
| Got it, Close Guide | |
| </button> | |
| </div> | |
| </motion.div> | |
| </div> | |
| </AnimatePresence> | |
| ); | |
| }; | |
| export default AppGuideModal; | |