Spaces:
Running
Running
| import React, { useState } from "react"; | |
| import { | |
| Store, | |
| Sparkles, | |
| Plus, | |
| Search, | |
| Star, | |
| Users, | |
| BookOpen, | |
| Code, | |
| FileText, | |
| Image as ImageIcon, | |
| Database, | |
| Lock, | |
| Globe, | |
| ArrowRight, | |
| Check, | |
| Upload, | |
| X, | |
| Sliders, | |
| Share2, | |
| LogIn, | |
| Zap, | |
| ShieldCheck, | |
| Cpu, | |
| Layers, | |
| ExternalLink | |
| } from "lucide-react"; | |
| export interface CustomGpt { | |
| id: string; | |
| name: string; | |
| author: string; | |
| description: string; | |
| category: "coding" | "oxford" | "creative" | "productivity" | "analytics"; | |
| avatar: string; | |
| rating: number; | |
| useCount: number; | |
| systemPrompt: string; | |
| knowledgeFiles?: string[]; | |
| capabilities: { | |
| webSearch: boolean; | |
| codeExecution: boolean; | |
| artifacts: boolean; | |
| computerUse: boolean; | |
| }; | |
| customApiActions?: { | |
| endpointUrl: string; | |
| method: "GET" | "POST"; | |
| headers: string; | |
| }[]; | |
| isCustomCreated?: boolean; | |
| } | |
| interface CustomGptStoreModalProps { | |
| isOpen: boolean; | |
| onClose: () => void; | |
| currentUser: { email?: string; isGuest?: boolean } | null; | |
| onOpenAuthModal: () => void; | |
| onSelectGpt: (gpt: CustomGpt) => void; | |
| } | |
| export default function CustomGptStoreModal({ | |
| isOpen, | |
| onClose, | |
| currentUser, | |
| onOpenAuthModal, | |
| onSelectGpt | |
| }: CustomGptStoreModalProps) { | |
| const [activeTab, setActiveTab] = useState<"marketplace" | "create" | "myGpts">("marketplace"); | |
| const [selectedCategory, setSelectedCategory] = useState<string>("all"); | |
| const [searchQuery, setSearchQuery] = useState<string>(""); | |
| // New GPT Form State | |
| const [name, setName] = useState<string>(""); | |
| const [description, setDescription] = useState<string>(""); | |
| const [category, setCategory] = useState<CustomGpt["category"]>("coding"); | |
| const [avatar, setAvatar] = useState<string>("🤖"); | |
| const [systemPrompt, setSystemPrompt] = useState<string>(""); | |
| const [knowledgeFiles, setKnowledgeFiles] = useState<string[]>([]); | |
| const [webSearch, setWebSearch] = useState<boolean>(true); | |
| const [codeExecution, setCodeExecution] = useState<boolean>(true); | |
| const [artifacts, setArtifacts] = useState<boolean>(true); | |
| const [computerUse, setComputerUse] = useState<boolean>(false); | |
| const [apiEndpoint, setApiEndpoint] = useState<string>(""); | |
| const [apiMethod, setApiMethod] = useState<"GET" | "POST">("POST"); | |
| // Default Featured Custom GPT Marketplace Items | |
| const [customGpts, setCustomGpts] = useState<CustomGpt[]>([ | |
| { | |
| id: "gpt-oxford", | |
| name: "Oxford Textbook Master", | |
| author: "Oxford Education AI", | |
| description: "Expert tutor for Grade 6-8 Oxford English lessons, literature summaries, and Q&A analysis.", | |
| category: "oxford", | |
| avatar: "📚", | |
| rating: 4.9, | |
| useCount: 14200, | |
| systemPrompt: "You are an expert Oxford English literature & language tutor with full indexed knowledge of Grade 6, Grade 7, and Grade 8 textbooks.", | |
| capabilities: { webSearch: true, codeExecution: false, artifacts: true, computerUse: false } | |
| }, | |
| { | |
| id: "gpt-code-architect", | |
| name: "React & Vite Code Architect", | |
| author: "Aura Dev Labs", | |
| description: "Senior full-stack code architect creating production-ready React 19, TypeScript, and Express components with side-by-side Artifacts execution.", | |
| category: "coding", | |
| avatar: "⚡", | |
| rating: 4.95, | |
| useCount: 28900, | |
| systemPrompt: "You are a master React 19 & TypeScript software architect specializing in clean, modern UI components with Tailwind CSS.", | |
| capabilities: { webSearch: true, codeExecution: true, artifacts: true, computerUse: true } | |
| }, | |
| { | |
| id: "gpt-image-prompt", | |
| name: "FLUX & Gemini Visual Designer", | |
| author: "Aura Creative", | |
| description: "Crafts ultra-detailed image prompts, vector SVG graphic layouts, and typography palettes for AI Image Studio.", | |
| category: "creative", | |
| avatar: "🎨", | |
| rating: 4.88, | |
| useCount: 9800, | |
| systemPrompt: "You are a master creative director generating photorealistic FLUX image prompts and custom SVG vector art.", | |
| capabilities: { webSearch: false, codeExecution: false, artifacts: true, computerUse: false } | |
| }, | |
| { | |
| id: "gpt-data-analyst", | |
| name: "Spreadsheet & SQL Data Analyst", | |
| author: "Analytics Core", | |
| description: "Parses CSV, Excel, and JSON data to generate interactive charts, SQL queries, and financial trend breakdowns.", | |
| category: "analytics", | |
| avatar: "📊", | |
| rating: 4.85, | |
| useCount: 11200, | |
| systemPrompt: "You are an expert data analyst who transforms raw data files into clear visualizations, Recharts charts, and SQL queries.", | |
| capabilities: { webSearch: true, codeExecution: true, artifacts: true, computerUse: false } | |
| } | |
| ]); | |
| if (!isOpen) return null; | |
| const isSignedIn = currentUser && !currentUser.isGuest && Boolean(currentUser.email); | |
| const filteredGpts = customGpts.filter(gpt => { | |
| const matchesCategory = selectedCategory === "all" || gpt.category === selectedCategory; | |
| const matchesSearch = gpt.name.toLowerCase().includes(searchQuery.toLowerCase()) || | |
| gpt.description.toLowerCase().includes(searchQuery.toLowerCase()); | |
| return matchesCategory && matchesSearch; | |
| }); | |
| const handleCreateGpt = (e: React.FormEvent) => { | |
| e.preventDefault(); | |
| if (!isSignedIn) { | |
| onOpenAuthModal(); | |
| return; | |
| } | |
| if (!name.trim() || !systemPrompt.trim()) return; | |
| const newGpt: CustomGpt = { | |
| id: `custom-gpt-${Date.now()}`, | |
| name, | |
| author: currentUser?.email || "Signed-in Creator", | |
| description: description || "Custom user-built specialized AI micro-app.", | |
| category, | |
| avatar, | |
| rating: 5.0, | |
| useCount: 1, | |
| systemPrompt, | |
| knowledgeFiles, | |
| capabilities: { | |
| webSearch, | |
| codeExecution, | |
| artifacts, | |
| computerUse | |
| }, | |
| customApiActions: apiEndpoint ? [{ endpointUrl: apiEndpoint, method: apiMethod, headers: "Content-Type: application/json" }] : [], | |
| isCustomCreated: true | |
| }; | |
| setCustomGpts([newGpt, ...customGpts]); | |
| setActiveTab("marketplace"); | |
| onSelectGpt(newGpt); | |
| }; | |
| return ( | |
| <div className="fixed inset-0 z-50 flex items-center justify-center p-3 md:p-6 bg-slate-950/85 backdrop-blur-md animate-fade-in font-sans"> | |
| <div | |
| className="relative w-full max-w-5xl max-h-[92vh] bg-slate-900 text-slate-100 rounded-3xl shadow-2xl border border-slate-700/80 flex flex-col overflow-hidden" | |
| onClick={e => e.stopPropagation()} | |
| > | |
| {/* Header Bar */} | |
| <div className="bg-gradient-to-r from-slate-950 via-slate-900 to-indigo-950 p-5 border-b border-slate-800 shrink-0 flex items-center justify-between gap-4"> | |
| <div className="flex items-center gap-3"> | |
| <div className="h-11 w-11 rounded-2xl bg-indigo-500/20 border border-indigo-500/40 flex items-center justify-center text-indigo-400 shrink-0 shadow-inner"> | |
| <Store className="h-6 w-6" /> | |
| </div> | |
| <div> | |
| <div className="flex items-center gap-2"> | |
| <h3 className="text-lg font-black tracking-tight text-white">Custom GPT Store & Studio</h3> | |
| <span className="px-2.5 py-0.5 rounded-full bg-purple-500/20 text-purple-300 border border-purple-500/30 text-[10px] font-mono font-bold"> | |
| Micro-App Marketplace | |
| </span> | |
| </div> | |
| <p className="text-xs text-slate-400"> | |
| Package tailored system prompts, knowledge files, and custom API connections into shareable micro-apps | |
| </p> | |
| </div> | |
| </div> | |
| <button | |
| onClick={onClose} | |
| className="h-8 w-8 rounded-full bg-slate-800 hover:bg-slate-700 text-slate-300 flex items-center justify-center transition cursor-pointer shrink-0" | |
| > | |
| <X className="h-4.5 w-4.5" /> | |
| </button> | |
| </div> | |
| {/* Tab Navigation */} | |
| <div className="bg-slate-950 border-b border-slate-800 px-5 py-3 flex items-center justify-between gap-3 flex-wrap"> | |
| <div className="flex items-center gap-2 bg-slate-900 p-1 rounded-2xl border border-slate-800 text-xs font-semibold"> | |
| <button | |
| onClick={() => setActiveTab("marketplace")} | |
| className={`px-4 py-2 rounded-xl flex items-center gap-2 transition cursor-pointer ${ | |
| activeTab === "marketplace" ? "bg-indigo-600 text-white shadow-md" : "text-slate-400 hover:text-slate-200" | |
| }`} | |
| > | |
| <Store className="h-4 w-4" /> | |
| <span>Marketplace ({customGpts.length})</span> | |
| </button> | |
| <button | |
| onClick={() => { | |
| if (!isSignedIn) { | |
| onOpenAuthModal(); | |
| } else { | |
| setActiveTab("create"); | |
| } | |
| }} | |
| className={`px-4 py-2 rounded-xl flex items-center gap-2 transition cursor-pointer ${ | |
| activeTab === "create" ? "bg-indigo-600 text-white shadow-md" : "text-slate-400 hover:text-slate-200" | |
| }`} | |
| > | |
| <Plus className="h-4 w-4 text-amber-400" /> | |
| <span>Create Custom GPT</span> | |
| {!isSignedIn && <Lock className="h-3 w-3 text-amber-400 ml-1" />} | |
| </button> | |
| </div> | |
| {/* User Sign-In Badge */} | |
| <div> | |
| {isSignedIn ? ( | |
| <div className="px-3 py-1.5 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-300 text-xs font-mono font-bold flex items-center gap-1.5"> | |
| <ShieldCheck className="h-3.5 w-3.5 text-emerald-400" /> | |
| <span>Signed In ({currentUser?.email})</span> | |
| </div> | |
| ) : ( | |
| <button | |
| onClick={onOpenAuthModal} | |
| className="px-3.5 py-1.5 rounded-xl bg-amber-500/20 hover:bg-amber-500/30 text-amber-200 border border-amber-500/40 text-xs font-bold flex items-center gap-1.5 transition cursor-pointer" | |
| > | |
| <LogIn className="h-3.5 w-3.5 text-amber-400" /> | |
| <span>Sign In Required for Custom GPT Creation</span> | |
| </button> | |
| )} | |
| </div> | |
| </div> | |
| {/* TAB 1: Marketplace View */} | |
| {activeTab === "marketplace" && ( | |
| <div className="flex-1 overflow-y-auto p-5 flex flex-col gap-5 bg-slate-950/60"> | |
| {/* Search & Categories Bar */} | |
| <div className="flex flex-col sm:flex-row items-center justify-between gap-3"> | |
| <div className="relative w-full sm:w-80"> | |
| <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" /> | |
| <input | |
| type="text" | |
| value={searchQuery} | |
| onChange={e => setSearchQuery(e.target.value)} | |
| placeholder="Search Custom GPTs by name or skill..." | |
| className="w-full pl-9 pr-4 py-2 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" | |
| /> | |
| </div> | |
| {/* Category Pills */} | |
| <div className="flex items-center gap-1.5 overflow-x-auto w-full sm:w-auto pb-1"> | |
| {[ | |
| { id: "all", label: "All GPTs" }, | |
| { id: "coding", label: "Coding & Dev" }, | |
| { id: "oxford", label: "Oxford Education" }, | |
| { id: "creative", label: "Creative & Design" }, | |
| { id: "analytics", label: "Data & Charts" } | |
| ].map(cat => ( | |
| <button | |
| key={cat.id} | |
| onClick={() => setSelectedCategory(cat.id)} | |
| className={`px-3 py-1.5 rounded-xl text-xs font-bold shrink-0 transition cursor-pointer ${ | |
| selectedCategory === cat.id | |
| ? "bg-indigo-600 text-white" | |
| : "bg-slate-900 text-slate-400 hover:text-slate-200 border border-slate-800" | |
| }`} | |
| > | |
| {cat.label} | |
| </button> | |
| ))} | |
| </div> | |
| </div> | |
| {/* Custom GPT Cards Grid */} | |
| <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| {filteredGpts.map(gpt => ( | |
| <div | |
| key={gpt.id} | |
| className="p-4 rounded-2xl bg-slate-900/90 border border-slate-800 hover:border-indigo-500/50 transition-all shadow-lg flex flex-col justify-between gap-4 group" | |
| > | |
| <div className="flex items-start gap-3"> | |
| <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20 border border-indigo-500/30 flex items-center justify-center text-2xl shrink-0 shadow-inner group-hover:scale-105 transition-transform"> | |
| {gpt.avatar} | |
| </div> | |
| <div className="min-w-0 flex-1"> | |
| <div className="flex items-center justify-between gap-2"> | |
| <h4 className="text-sm font-bold text-white truncate">{gpt.name}</h4> | |
| <span className="flex items-center gap-1 text-[11px] font-bold text-amber-400"> | |
| <Star className="h-3 w-3 fill-amber-400" /> | |
| {gpt.rating} | |
| </span> | |
| </div> | |
| <span className="text-[10px] font-mono text-indigo-400 block mb-1">By {gpt.author}</span> | |
| <p className="text-xs text-slate-300 line-clamp-2 leading-relaxed">{gpt.description}</p> | |
| </div> | |
| </div> | |
| {/* Capabilities Badges */} | |
| <div className="flex items-center justify-between pt-2 border-t border-slate-800 text-[10px] font-mono text-slate-400"> | |
| <div className="flex items-center gap-1.5 flex-wrap"> | |
| {gpt.capabilities.artifacts && <span className="px-2 py-0.5 rounded bg-indigo-500/10 text-indigo-300 border border-indigo-500/20">Artifacts</span>} | |
| {gpt.capabilities.codeExecution && <span className="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-300 border border-emerald-500/20">Code Run</span>} | |
| {gpt.capabilities.computerUse && <span className="px-2 py-0.5 rounded bg-purple-500/10 text-purple-300 border border-purple-500/20">Computer Use</span>} | |
| </div> | |
| <button | |
| onClick={() => { | |
| onSelectGpt(gpt); | |
| onClose(); | |
| }} | |
| className="px-3 py-1.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-xs flex items-center gap-1.5 shadow-md cursor-pointer transition active:scale-95 shrink-0" | |
| > | |
| <span>Load GPT</span> | |
| <ArrowRight className="h-3.5 w-3.5" /> | |
| </button> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| )} | |
| {/* TAB 2: Create Custom GPT Form */} | |
| {activeTab === "create" && ( | |
| <form onSubmit={handleCreateGpt} className="flex-1 overflow-y-auto p-5 flex flex-col gap-5 bg-slate-950/60"> | |
| {!isSignedIn && ( | |
| <div className="p-4 rounded-2xl bg-amber-500/10 border border-amber-500/30 text-amber-200 text-xs flex items-center justify-between gap-3"> | |
| <div className="flex items-center gap-2"> | |
| <Lock className="h-4 w-4 text-amber-400 shrink-0" /> | |
| <span>Sign In Required to publish Custom GPT micro-apps to the marketplace.</span> | |
| </div> | |
| <button | |
| type="button" | |
| onClick={onOpenAuthModal} | |
| className="px-3 py-1.5 rounded-xl bg-amber-600 hover:bg-amber-500 text-white font-bold text-xs shrink-0 cursor-pointer" | |
| > | |
| Sign In Now | |
| </button> | |
| </div> | |
| )} | |
| <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label className="text-xs font-bold text-slate-300 block mb-1">GPT Name</label> | |
| <input | |
| type="text" | |
| required | |
| value={name} | |
| onChange={e => setName(e.target.value)} | |
| placeholder="e.g. Oxford Grade 7 Math Tutor" | |
| className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:outline-none focus:border-indigo-500" | |
| /> | |
| </div> | |
| <div> | |
| <label className="text-xs font-bold text-slate-300 block mb-1">Category & Emoji Avatar</label> | |
| <div className="flex gap-2"> | |
| <select | |
| value={category} | |
| onChange={e => setCategory(e.target.value as any)} | |
| className="flex-1 px-3.5 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:outline-none focus:border-indigo-500 cursor-pointer" | |
| > | |
| <option value="coding">Coding & Dev</option> | |
| <option value="oxford">Oxford Education</option> | |
| <option value="creative">Creative & Design</option> | |
| <option value="productivity">Productivity</option> | |
| <option value="analytics">Data & Analytics</option> | |
| </select> | |
| <input | |
| type="text" | |
| value={avatar} | |
| onChange={e => setAvatar(e.target.value)} | |
| maxLength={2} | |
| className="w-14 text-center px-2 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-lg font-bold" | |
| /> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label className="text-xs font-bold text-slate-300 block mb-1">Short Description</label> | |
| <input | |
| type="text" | |
| value={description} | |
| onChange={e => setDescription(e.target.value)} | |
| placeholder="What does this specialized micro-app do?" | |
| className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:outline-none focus:border-indigo-500" | |
| /> | |
| </div> | |
| <div> | |
| <label className="text-xs font-bold text-slate-300 block mb-1">System Instructions & Custom Persona</label> | |
| <textarea | |
| required | |
| rows={4} | |
| value={systemPrompt} | |
| onChange={e => setSystemPrompt(e.target.value)} | |
| placeholder="Detailed system prompt guiding how the model thinks, acts, formats output, and uses tools..." | |
| className="w-full p-3.5 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:outline-none focus:border-indigo-500 font-mono resize-none leading-relaxed" | |
| /> | |
| </div> | |
| {/* Capability Toggles */} | |
| <div> | |
| <label className="text-xs font-bold text-slate-300 block mb-2">Enabled Capabilities</label> | |
| <div className="grid grid-cols-2 sm:grid-cols-4 gap-2"> | |
| {[ | |
| { label: "Web Search", state: webSearch, setter: setWebSearch }, | |
| { label: "Code Run", state: codeExecution, setter: setCodeExecution }, | |
| { label: "Artifacts", state: artifacts, setter: setArtifacts }, | |
| { label: "Computer Use", state: computerUse, setter: setComputerUse } | |
| ].map((cap, i) => ( | |
| <button | |
| key={i} | |
| type="button" | |
| onClick={() => cap.setter(!cap.state)} | |
| className={`p-2.5 rounded-xl border text-xs font-bold flex items-center justify-between cursor-pointer transition ${ | |
| cap.state ? "bg-indigo-600/20 border-indigo-500 text-indigo-300" : "bg-slate-900 border-slate-800 text-slate-500" | |
| }`} | |
| > | |
| <span>{cap.label}</span> | |
| {cap.state && <Check className="h-3.5 w-3.5 text-indigo-400" />} | |
| </button> | |
| ))} | |
| </div> | |
| </div> | |
| {/* Custom API Action Connection */} | |
| <div className="p-4 rounded-2xl bg-slate-900 border border-slate-800 flex flex-col gap-3"> | |
| <span className="text-xs font-bold text-white flex items-center gap-2"> | |
| <Zap className="h-4 w-4 text-amber-400" /> | |
| Custom API Action Connection (OpenAPI Spec) | |
| </span> | |
| <div className="flex gap-2"> | |
| <select | |
| value={apiMethod} | |
| onChange={e => setApiMethod(e.target.value as any)} | |
| className="px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-xs font-mono font-bold text-white" | |
| > | |
| <option value="GET">GET</option> | |
| <option value="POST">POST</option> | |
| </select> | |
| <input | |
| type="text" | |
| value={apiEndpoint} | |
| onChange={e => setApiEndpoint(e.target.value)} | |
| placeholder="https://api.example.com/v1/action" | |
| className="flex-1 px-3 py-2 rounded-xl bg-slate-950 border border-slate-800 text-xs font-mono text-white focus:outline-none" | |
| /> | |
| </div> | |
| </div> | |
| {/* Form Submit */} | |
| <button | |
| type="submit" | |
| disabled={!isSignedIn} | |
| className="w-full py-3 px-6 rounded-2xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 disabled:opacity-50 text-white font-bold text-xs flex items-center justify-center gap-2 shadow-xl cursor-pointer transition" | |
| > | |
| <Sparkles className="h-4 w-4 text-amber-400" /> | |
| <span>Publish Custom GPT to Marketplace</span> | |
| </button> | |
| </form> | |
| )} | |
| </div> | |
| </div> | |
| ); | |
| } | |