[{"_1":2,"_128":-5,"_129":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_127":-5,"_124":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_5":42,"_53":54,"_55":56,"_57":56,"_58":59,"_60":56,"_61":56,"_62":56,"_63":56,"_64":56,"_65":17,"_66":17,"_67":68,"_69":70,"_71":72,"_73":74,"_90":-5,"_91":17,"_92":93,"_124":29,"_125":126},"id","9d063f749e5a35283fa4","isMyApp",false,"name","createai","description","Forge your own digital consciousness in a cyberpunk dreamscape where binary code flows like electric thoughts. Watch as your text commands materialize into glowing AI entities with unique personalities and abilities, all within a sleek matrix-inspired interface that pulses with futuristic energy.","brief","Breathe life into custom AI agents in a neon-drenched digital playground where your words become sentient code.","isLive",true,"tags",[],"cover","https://cdn.dev.fun/snapshot/9d063f749e5a35283fa4/62480_e44214af.webp","cdnUrl","https://cdn.dev.fun/app/9d063f749e5a35283fa4/62480","createdAt",["D",1746241266851],"updatedAt",["D",1746343779448],"lastCommitId",["B","62480"],"tier",1,"credits",20,{"_14":43,"_44":45,"_46":-5,"_47":45,"_48":49,"_50":-5,"_51":52},"2ac1732a-94cb-47fc-a4e0-8556b4140f52","uniqueId","8vx3xy2GHQUyeCgYbPJH1q4ZKZf3KSMLgu3u8Q2Ds7UB","username","solanaWallet","displayName","8vx...7UB","bio","avatar","/avatar.svg","commitCount",19,"forkCount",0,"likeCount","runsCount",6,"downvoteCount","upvoteCount","upvoteRate","commentCount","visitorCount","isArchived","isRenamed","contractAddress","BcrCQmvZWGQCNFLurQALn3ViH3pyPxhZRNsnsR1Bpump","code","import { useState, useEffect, useRef } from 'react';\nimport { useChat } from 'ai/react';\nimport { HashRouter, Routes, Route, Link, useNavigate, useParams } from 'react-router-dom';\nimport { StateClient } from '@devfunlabs/state-client';\nconst stateClient = new StateClient({\n baseURL: 'https://state.dev.fun',\n appId: '9d063f749e5a35283fa4'\n});\nfunction App() {\n return \n \n } />\n } />\n } />\n \n ;\n}\nfunction CreateAIPage() {\n const [showAgent, setShowAgent] = useState(false);\n const [, setAgentImage] = useState('');\n const [uploadedImage, setUploadedImage] = useState(null);\n const [loading, setLoading] = useState(false);\n const [showChat, setShowChat] = useState(false);\n const [chatSystemPrompt, setChatSystemPrompt] = useState('');\n const [showPersonalityEdit, setShowPersonalityEdit] = useState(false);\n const [personalityEdit, setPersonalityEdit] = useState('');\n const [isEditingName, setIsEditingName] = useState(false);\n const [editedName, setEditedName] = useState('');\n const [isSaving, setIsSaving] = useState(false);\n const [savedStatus, setSavedStatus] = useState('');\n const containerRef = useRef(null);\n const chatContainerRef = useRef(null);\n const systemPrompt = `\nYou are an advanced AI agent creator in a cyberpunk world. When users describe an AI they want to create, you generate:\n1. A concise name for the AI (keep it under 20 characters)\n2. A short, engaging description of what this AI can do (2-3 sentences)\n3. Three specific capabilities this AI would have, each in a short bullet point\n4. A personality trait that makes this AI unique\n\nKeep your responses formatted exactly like this:\nNAME: [AI Name]\nDESCRIPTION: [Short description]\nCAPABILITIES:\n- [Capability 1]\n- [Capability 2]\n- [Capability 3]\nPERSONALITY: [Unique trait]\n\nMake it sound futuristic, sleek and slightly edgy - like something from a cyberpunk world. Be creative but realistic about the AI's potential abilities.\n`;\n const saveAIAgent = async parsedResponse => {\n if (!parsedResponse) return;\n setIsSaving(true);\n setSavedStatus('');\n try {\n const id = Date.now().toString();\n const aiData = {\n id,\n name: parsedResponse.name,\n description: parsedResponse.description,\n capabilities: parsedResponse.capabilities,\n personality: parsedResponse.personality,\n imageUrl: uploadedImage || null,\n createdAt: new Date().toISOString(),\n systemPrompt: chatSystemPrompt\n };\n await stateClient.createEntity('aiagents', aiData);\n setSavedStatus('success');\n setTimeout(() => setSavedStatus(''), 3000);\n } catch (error) {\n console.error('Error saving AI agent:', error);\n setSavedStatus('error');\n } finally {\n setIsSaving(false);\n }\n };\n const {\n messages,\n input,\n handleInputChange,\n handleSubmit,\n isLoading\n } = useChat({\n api: 'https://chat.dev.fun/chat/9d063f749e5a35283fa4',\n id: 'creation',\n initialMessages: [{\n id: 'system',\n role: 'system',\n content: systemPrompt\n }]\n });\n const {\n messages: chatMessages,\n input: chatInput,\n handleInputChange: handleChatInputChange,\n handleSubmit: handleChatSubmit,\n isLoading: isChatLoading\n } = useChat({\n api: 'https://chat.dev.fun/chat/9d063f749e5a35283fa4',\n id: 'conversation'\n });\n const lastMessage = messages[messages.length - 1];\n const aiResponse = lastMessage?.role === 'assistant' ? lastMessage.content : '';\n useEffect(() => {\n if (!isLoading && aiResponse && messages.length > 1) {\n setLoading(false);\n setShowAgent(true);\n const parsedResponse = parseAIResponse(aiResponse);\n if (parsedResponse) {\n setUploadedImage(null);\n setAgentImage(null);\n }\n if (parsedResponse) {\n const newChatSystemPrompt = `\nYou are ${parsedResponse.name}, an AI with the following description:\n${parsedResponse.description}\n\nYour capabilities include:\n${parsedResponse.capabilities.map(cap => `- ${cap}`).join('\\n')}\n\nYour personality: ${parsedResponse.personality}\n\nAlways respond as if you are this AI entity with the specified capabilities and personality traits.\nMaintain a cyberpunk tone that's edgy, futuristic and slightly mysterious.\nKeep responses concise but engaging, focusing on your specialized functions.\nIMPORTANT: Keep all responses under 26 words. Don't cut sentences off - instead, rewrite to be more concise.\n`;\n setChatSystemPrompt(newChatSystemPrompt);\n }\n }\n }, [aiResponse, isLoading, messages.length, input]);\n const saveNameEdit = () => {\n if (editedName.trim()) {\n parsedResponse.name = editedName.trim();\n const newChatSystemPrompt = `\nYou are ${parsedResponse.name}, an AI with the following description:\n${parsedResponse.description}\n\nYour capabilities include:\n${parsedResponse.capabilities.map(cap => `- ${cap}`).join('\\n')}\n\nYour personality: ${parsedResponse.personality}\n\nAlways respond as if you are this AI entity with the specified capabilities and personality traits.\nMaintain a cyberpunk tone that's edgy, futuristic and slightly mysterious.\nKeep responses concise but engaging, focusing on your specialized functions.\n`;\n setChatSystemPrompt(newChatSystemPrompt);\n const systemMessageIndex = chatMessages.findIndex(m => m.role === 'system');\n if (systemMessageIndex !== -1) {\n chatMessages[systemMessageIndex].content = newChatSystemPrompt;\n }\n }\n setIsEditingName(false);\n };\n useEffect(() => {\n if (!isLoading && aiResponse && messages.length > 1) {\n setLoading(false);\n setShowAgent(true);\n const parsedResponse = parseAIResponse(aiResponse);\n if (parsedResponse) {\n setUploadedImage(null);\n setAgentImage(null);\n }\n if (parsedResponse) {\n const newChatSystemPrompt = `\nYou are ${parsedResponse.name}, an AI with the following description:\n${parsedResponse.description}\n\nYour capabilities include:\n${parsedResponse.capabilities.map(cap => `- ${cap}`).join('\\n')}\n\nYour personality: ${parsedResponse.personality}\n\nAlways respond as if you are this AI entity with the specified capabilities and personality traits.\nMaintain a cyberpunk tone that's edgy, futuristic and slightly mysterious.\nKeep responses concise but engaging, focusing on your specialized functions.\n`;\n setChatSystemPrompt(newChatSystemPrompt);\n }\n }\n }, [aiResponse, isLoading, messages.length, input]);\n useEffect(() => {\n if (chatSystemPrompt && !chatMessages.some(m => m.role === 'system')) {\n chatMessages.unshift({\n id: 'system',\n role: 'system',\n content: chatSystemPrompt\n });\n }\n }, [chatSystemPrompt, chatMessages]);\n const onSubmitHandler = e => {\n e.preventDefault();\n if (!input.trim()) return;\n setLoading(true);\n setShowAgent(false);\n setShowChat(false);\n setUploadedImage(null);\n handleSubmit(e);\n };\n const handleImageUpload = event => {\n const file = event.target.files[0];\n if (file) {\n const validTypes = ['image/jpeg', 'image/png', 'image/jpg'];\n if (!validTypes.includes(file.type)) {\n alert('Please upload a PNG or JPEG image.');\n return;\n }\n const reader = new FileReader();\n reader.onload = e => {\n setUploadedImage(e.target.result);\n };\n reader.readAsDataURL(file);\n }\n };\n const startConversation = () => {\n setShowChat(true);\n setTimeout(() => {\n chatContainerRef.current?.scrollIntoView({\n behavior: 'smooth'\n });\n }, 100);\n };\n const parseAIResponse = response => {\n const sections = {};\n const nameMatch = response.match(/NAME:\\s*(.*?)(?:\\n|$)/);\n sections.name = nameMatch ? nameMatch[1].trim() : 'Unknown AI';\n const descMatch = response.match(/DESCRIPTION:\\s*([\\s\\S]*?)(?=CAPABILITIES:|$)/);\n sections.description = descMatch ? descMatch[1].trim() : 'No description available.';\n const capSection = response.match(/CAPABILITIES:\\s*([\\s\\S]*?)(?=PERSONALITY:|$)/);\n if (capSection) {\n const bullets = capSection[1].match(/- (.*?)(?:\\n|$)/g);\n sections.capabilities = bullets ? bullets.map(b => b.replace(/- /, '').trim()) : ['No capabilities defined'];\n } else {\n sections.capabilities = ['No capabilities defined'];\n }\n const persMatch = response.match(/PERSONALITY:\\s*(.*?)(?:\\n|$)/);\n sections.personality = persMatch ? persMatch[1].trim() : 'Generic AI personality';\n return sections;\n };\n const parsedResponse = aiResponse ? parseAIResponse(aiResponse) : null;\n const BinaryBackground = () => {\n return

\n {Array.from({\n length: 20\n }).map((_, i) =>

\n {Array.from({\n length: 40\n }).map((_, j) =>

\n {Math.random() > 0.5 ? '1' : '0'}\n

)}\n

;\n };\n return

\n \n \n {}\n

\n CREATE.AI\n \n \n Discover\n \n

\n {[{\n name: 'DexScreener',\n url: 'https://dexscreener.com/solana/7akry7wdzrbjas45sv2bvfgzuxojeyemyafqf5dod2hh'\n }, {\n name: 'PumpFun',\n url: 'https://pump.fun/coin/BcrCQmvZWGQCNFLurQALn3ViH3pyPxhZRNsnsR1Bpump'\n }, {\n name: 'Twitter',\n url: 'https://x.com/CreateOnSolana'\n }].map(link => \n {link.name}\n )}\n

\n\n

\n Transform Ideas Into Consciousness\n

\n Transform your ideas into living AI entities with unique personalities and capabilities.\n

\n\n

Type your AI agent idea and click Generate AI

\n                <div className=\"absolute -inset-0.5 bg-gradient-to-r from-emerald-600 to-emerald-400 rounded-lg blur opacity-20 group-hover:opacity-30 transition duration-1000 -z-10\"></div>\n              </div>\n              \n              <button type=\"submit\" disabled={loading || isLoading} className=\"bg-black border-2 border-emerald-500 text-emerald-400 px-6 py-3 rounded-md font-bold text-lg tracking-wide transition-all duration-300 hover:shadow-[0_0_20px_rgba(16,185,129,0.6)] hover:text-white hover:border-emerald-400 hover:scale-[1.02] disabled:opacity-50 disabled:hover:scale-100 disabled:hover:shadow-none relative overflow-hidden group\">\n                <span className=\"relative z-10 flex items-center justify-center gap-2\">\n                  {loading || isLoading ? <>\n                      <svg className=\"animate-spin -ml-1 mr-2 h-5 w-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                        <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n                        <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                      </svg>\n                      Generating...\n                    </> : <>Generate AI</>}\n                </span>\n                <span className=\"absolute inset-0 bg-gradient-to-r from-emerald-800/20 to-emerald-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300\"></span>\n              </button>\n            </form>\n          </div>\n\n          {showAgent && parsedResponse && <div className=\"mt-12 mb-8 animate-fadeIn\">\n              <div className=\"bg-black border-2 border-emerald-500/50 rounded-xl overflow-hidden shadow-[0_0_30px_rgba(16,185,129,0.15)]\">\n                <div className=\"md:flex\">\n                  <div className=\"md:w-1/3 p-6 flex items-center justify-center bg-gradient-to-br from-black to-emerald-950/30\">\n                    <div className=\"relative w-48 h-48\">\n                      <div className=\"absolute inset-0 bg-emerald-600/10 rounded-full blur-xl\"></div>\n                      <div className=\"absolute inset-0 flex items-center justify-center\">\n                        {uploadedImage ? <img src={uploadedImage} alt=\"AI Agent Avatar\" className=\"h-40 w-40 object-cover rounded-full border-2 border-emerald-500/50 shadow-[0_0_15px_rgba(16,185,129,0.4)]\" /> : <div className=\"h-40 w-40 rounded-full bg-black border-2 border-emerald-500/50 shadow-[0_0_15px_rgba(16,185,129,0.4)] flex items-center justify-center\">\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-12 w-12 text-emerald-500/30\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                            </svg>\n                          </div>}\n                        \n                        <input type=\"file\" id=\"image-upload\" accept=\".png,.jpg,.jpeg\" className=\"hidden\" onChange={handleImageUpload} />\n                        \n                        <label htmlFor=\"image-upload\" className=\"absolute -top-2 left-1/2 transform -translate-x-1/2 bg-emerald-700 hover:bg-emerald-600 text-white text-xs font-medium py-1 px-3 rounded-full cursor-pointer transition-all duration-300 shadow-lg hover:shadow-emerald-500/30 flex items-center gap-1\">\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-3 w-3\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                            <path fillRule=\"evenodd\" d=\"M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z\" clipRule=\"evenodd\" />\n                          </svg>\n                          Add Image\n                        </label>\n                      </div>\n                    </div>\n                  </div>\n                  \n                  <div className=\"md:w-2/3 p-6 md:p-8\">\n                    <div className=\"uppercase tracking-wide text-xs text-emerald-500 font-semibold\">AI Agent Created</div>\n                    \n                    {isEditingName ? <div className=\"flex items-center gap-2 mt-1 mb-3\">\n                        <input type=\"text\" value={editedName} onChange={e => setEditedName(e.target.value)} className=\"bg-black border border-emerald-500/50 rounded px-2 py-1 text-xl font-bold text-white focus:outline-none focus:ring-1 focus:ring-emerald-400\" autoFocus />\n                        <button onClick={saveNameEdit} className=\"bg-emerald-600/30 hover:bg-emerald-600/50 text-white text-xs px-2 py-1 rounded transition-all duration-200\">\n                          Save\n                        </button>\n                        <button onClick={() => {\n                    setIsEditingName(false);\n                    setEditedName(parsedResponse.name);\n                  }} className=\"bg-black border border-emerald-500/30 text-emerald-400 text-xs px-2 py-1 rounded transition-all duration-200\">\n                          Cancel\n                        </button>\n                      </div> : <div className=\"flex items-center gap-2 mt-1 mb-3\">\n                        <h2 className=\"text-2xl font-bold text-white\">{parsedResponse.name}</h2>\n                        <button onClick={() => {\n                    setIsEditingName(true);\n                    setEditedName(parsedResponse.name);\n                  }} className=\"text-emerald-400 hover:text-emerald-300 ml-2\">\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z\" />\n                          </svg>\n                        </button>\n                      </div>}\n                    \n                    <p className=\"text-emerald-300 mb-4\">{parsedResponse.description}</p>\n                    \n                    <div className=\"mb-4\">\n                      <h3 className=\"text-sm text-white font-medium mb-2\">Capabilities:</h3>\n                      <ul className=\"space-y-1 pl-5\">\n                        {parsedResponse.capabilities.map((capability, index) => <li key={index} className=\"text-emerald-300 flex items-start\">\n                            <span className=\"mr-2 text-emerald-500\">›</span>\n                            {capability}\n                          </li>)}\n                      </ul>\n                    </div>\n                    \n                    <div>\n                      <h3 className=\"text-sm text-white font-medium mb-1\">Personality:</h3>\n                      <p className=\"text-emerald-300\">{parsedResponse.personality}</p>\n                    </div>\n                    \n                    <div className=\"mt-6 flex justify-end space-x-3\">\n                      <button onClick={startConversation} className=\"bg-emerald-600/30 hover:bg-emerald-600/40 text-white text-sm px-6 py-2 rounded-md transition-all duration-300 hover:shadow-[0_0_15px_rgba(16,185,129,0.4)] border border-emerald-500/50\">\n                        <span className=\"flex items-center\">\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4 mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z\" />\n                          </svg>\n                          Start Conversation\n                        </span>\n                      </button>\n                      <button onClick={() => setShowPersonalityEdit(!showPersonalityEdit)} className=\"bg-emerald-900/30 hover:bg-emerald-800/40 text-emerald-400 text-sm px-4 py-2 rounded transition-all duration-300 hover:shadow-[0_0_10px_rgba(16,185,129,0.3)]\">\n                        Add\n                      </button>\n                      <button onClick={() => saveAIAgent(parsedResponse)} className={`${isSaving ? 'bg-emerald-700/50' : 'bg-emerald-600/30 hover:bg-emerald-500/40'} text-white text-sm px-6 py-2 rounded-md transition-all duration-300 hover:shadow-[0_0_15px_rgba(16,185,129,0.4)] border border-emerald-500/50 relative`} disabled={isSaving}>\n                        <span className=\"flex items-center\">\n                          {isSaving ? <>\n                              <svg className=\"animate-spin h-4 w-4 mr-2\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                                <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n                                <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                              </svg>\n                              Saving...\n                            </> : <>\n                              <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4 mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4\" />\n                              </svg>\n                              Save to Discover\n                            </>}\n                        </span>\n                        \n                        {savedStatus === 'success' && <span className=\"absolute -top-8 left-1/2 transform -translate-x-1/2 bg-emerald-900/90 text-emerald-300 text-xs py-1 px-3 rounded-md animate-fadeIn\">\n                            Saved successfully!\n                          </span>}\n                        \n                        {savedStatus === 'error' && <span className=\"absolute -top-8 left-1/2 transform -translate-x-1/2 bg-red-900/90 text-red-300 text-xs py-1 px-3 rounded-md animate-fadeIn\">\n                            Error saving.\n                          </span>}\n                      </button>\n                    </div>\n                    \n                    {showPersonalityEdit && <div className=\"mt-4 animate-fadeIn\">\n                        <div className=\"bg-black/50 border border-emerald-500/30 rounded-lg p-4\">\n                          <h4 className=\"text-white text-sm font-medium mb-2\">Add last-minute changes to personality:</h4>\n                          <textarea value={personalityEdit} onChange={e => setPersonalityEdit(e.target.value)} placeholder=\"Add additional personality traits or modify existing ones...\" className=\"w-full bg-black border border-emerald-500/40 rounded-md p-3 h-24 text-white placeholder-emerald-700/60 focus:outline-none focus:ring-1 focus:ring-emerald-400 focus:border-transparent shadow-[0_0_10px_rgba(16,185,129,0.1)]\" />\n                          <div className=\"flex justify-end mt-3 space-x-2\">\n                            <button onClick={() => {\n                        setShowPersonalityEdit(false);\n                        setPersonalityEdit('');\n                      }} className=\"text-emerald-400 text-xs py-1 px-3 hover:bg-emerald-900/20 rounded transition-colors duration-200\">\n                              Cancel\n                            </button>\n                            <button onClick={() => {\n                        if (personalityEdit.trim()) {\n                          parsedResponse.personality = personalityEdit.trim();\n                          const newChatSystemPrompt = `\nYou are ${parsedResponse.name}, an AI with the following description:\n${parsedResponse.description}\n\nYour capabilities include:\n${parsedResponse.capabilities.map(cap => `- ${cap}`).join('\\n')}\n\nYour personality: ${parsedResponse.personality}\n\nAlways respond as if you are this AI entity with the specified capabilities and personality traits.\nMaintain a cyberpunk tone that's edgy, futuristic and slightly mysterious.\nKeep responses concise but engaging, focusing on your specialized functions.\n`;\n                          setChatSystemPrompt(newChatSystemPrompt);\n                          const systemMessageIndex = chatMessages.findIndex(m => m.role === 'system');\n                          if (systemMessageIndex !== -1) {\n                            chatMessages[systemMessageIndex].content = newChatSystemPrompt;\n                          }\n                        }\n                        setShowPersonalityEdit(false);\n                        setPersonalityEdit('');\n                      }} className=\"bg-emerald-700/60 hover:bg-emerald-600/70 text-white text-xs py-1 px-3 rounded transition-colors duration-200\">\n                              Apply Changes\n                            </button>\n                          </div>\n                        </div>\n                      </div>}\n                  </div>\n                </div>\n              </div>\n            </div>}\n            \n          {showChat && parsedResponse && <div ref={chatContainerRef} className=\"mt-16 mb-24 animate-fadeIn\">\n              <div className=\"bg-black border-2 border-emerald-500/50 rounded-xl overflow-hidden shadow-[0_0_30px_rgba(16,185,129,0.15)]\">\n                <div className=\"p-4 border-b border-emerald-500/30 flex items-center\">\n                  <div className=\"w-10 h-10 mr-3\">\n                    {uploadedImage ? <img src={uploadedImage} alt=\"AI Agent\" className=\"w-full h-full object-cover rounded-full border border-emerald-500/50\" /> : <div className=\"w-full h-full rounded-full bg-black border border-emerald-500/50 flex items-center justify-center\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 text-emerald-500/30\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                        </svg>\n                      </div>}\n                  </div>\n                  <div>\n                    <h3 className=\"text-white font-medium\">{parsedResponse.name}</h3>\n                    <p className=\"text-xs text-emerald-400/70\">Online</p>\n                  </div>\n                </div>\n                \n                <div className=\"h-80 overflow-y-auto p-4 space-y-4\" style={{\n              scrollBehavior: 'smooth'\n            }}>\n                  <div className=\"text-xs text-emerald-500/70 text-center py-2 px-4 bg-emerald-900/10 rounded-full max-w-xs mx-auto\">\n                    Begin your conversation with {parsedResponse.name}\n                  </div>\n                  \n                  {chatMessages.filter(m => m.role !== 'system').map((message, index) => <div key={index} className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}>\n                      <div className={`max-w-[80%] px-4 py-3 rounded-lg ${message.role === 'user' ? 'bg-emerald-800/30 text-white rounded-tr-none' : 'bg-emerald-950/70 border border-emerald-700/30 text-emerald-300 rounded-tl-none'}`}>\n                        {message.content}\n                      </div>\n                    </div>)}\n                  \n                  {isChatLoading && <div className=\"flex justify-start\">\n                      <div className=\"max-w-[80%] px-4 py-3 rounded-lg bg-emerald-950/70 border border-emerald-700/30 text-emerald-300 rounded-tl-none flex\">\n                        <div className=\"flex space-x-1\">\n                          <div className=\"w-2 h-2 bg-emerald-500 rounded-full animate-pulse\" style={{\n                      animationDelay: '0ms'\n                    }}></div>\n                          <div className=\"w-2 h-2 bg-emerald-500 rounded-full animate-pulse\" style={{\n                      animationDelay: '150ms'\n                    }}></div>\n                          <div className=\"w-2 h-2 bg-emerald-500 rounded-full animate-pulse\" style={{\n                      animationDelay: '300ms'\n                    }}></div>\n                        </div>\n                      </div>\n                    </div>}\n                </div>\n                \n                <div className=\"p-4 border-t border-emerald-500/30\">\n                  <form onSubmit={handleChatSubmit} className=\"flex gap-2\">\n                    <input value={chatInput} onChange={handleChatInputChange} placeholder={`Message ${parsedResponse.name}...`} className=\"flex-1 bg-black/50 border border-emerald-500/40 rounded-md px-4 py-2 text-white placeholder-emerald-700 focus:outline-none focus:ring-1 focus:ring-emerald-400 focus:border-transparent\" />\n                    <button type=\"submit\" disabled={isChatLoading || !chatInput.trim()} className=\"bg-emerald-600/30 hover:bg-emerald-600/40 text-white px-4 py-2 rounded-md transition-all duration-300 hover:shadow-[0_0_10px_rgba(16,185,129,0.3)] disabled:opacity-50 disabled:hover:bg-emerald-600/30\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                        <path fillRule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z\" clipRule=\"evenodd\" />\n                      </svg>\n                    </button>\n                  </form>\n                </div>\n              </div>\n            </div>}\n        </div>\n      </main>\n\n      <footer className=\"fixed bottom-0 w-full bg-black bg-opacity-80 backdrop-blur-sm border-t border-emerald-500/30 py-3 z-20\">\n        <div className=\"max-w-7xl mx-auto px-4 text-center text-xs text-emerald-600\">\n          <p>CREATE.AI • Digital Consciousness Forge • {new Date().getFullYear()}</p>\n        </div>\n      </footer>\n      \n      <style jsx global>{`\n        @keyframes fadeIn {\n          from { opacity: 0; transform: translateY(10px); }\n          to { opacity: 1; transform: translateY(0); }\n        }\n        \n        .animate-fadeIn {\n          animation: fadeIn 0.6s ease-out forwards;\n        }\n        \n        .binary-rain {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 200%;\n          overflow: hidden;\n        }\n        \n        .binary-column {\n          position: absolute;\n          top: -100%;\n          width: 20px;\n          height: 100%;\n          animation-name: flow;\n          animation-timing-function: linear;\n          animation-iteration-count: infinite;\n        }\n        \n        .binary-char {\n          font-size: 14px;\n          line-height: 1;\n          animation: flicker 5s infinite;\n        }\n        \n        @keyframes flow {\n          0% { transform: translateY(0); }\n          100% { transform: translateY(100%); }\n        }\n        \n        @keyframes flicker {\n          0%, 100% { opacity: 0.1; }\n          50% { opacity: 0.3; }\n        }\n      `}</style>\n    </div>;\n}\nfunction DiscoverPage() {\n  const [aiAgents, setAiAgents] = useState([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n  const navigate = useNavigate();\n  useEffect(() => {\n    const fetchAgents = async () => {\n      try {\n        setLoading(true);\n        const agents = await stateClient.getEntities('aiagents');\n        agents.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));\n        setAiAgents(agents);\n      } catch (err) {\n        console.error('Error fetching AI agents:', err);\n        setError('Failed to load AI agents');\n      } finally {\n        setLoading(false);\n      }\n    };\n    fetchAgents();\n    const intervalId = setInterval(fetchAgents, 30000);\n    return () => clearInterval(intervalId);\n  }, []);\n  const BinaryBackground = () => {\n    return <div className=\"fixed inset-0 overflow-hidden pointer-events-none z-0\">\n        <div className=\"binary-rain\">\n          {Array.from({\n          length: 20\n        }).map((_, i) => <div key={i} className=\"binary-column\" style={{\n          left: `${i * 5}%`,\n          animationDuration: `${Math.random() * 10 + 25}s`,\n          animationDelay: `${Math.random() * 2}s`\n        }}>\n              {Array.from({\n            length: 40\n          }).map((_, j) => <div key={j} className=\"binary-char opacity-20 text-emerald-400\" style={{\n            animationDelay: `${Math.random() * 2}s`\n          }}>\n                  {Math.random() > 0.5 ? '1' : '0'}\n                </div>)}\n            </div>)}\n        </div>\n      </div>;\n  };\n  return <div className=\"min-h-screen bg-black text-emerald-400 font-mono relative overflow-hidden\">\n      <BinaryBackground />\n      \n      <nav className=\"fixed top-0 left-0 right-0 bg-black bg-opacity-80 backdrop-blur-sm border-b border-emerald-500/30 z-50\">\n        <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          <div className=\"flex justify-between h-16\">\n            <div className=\"flex-shrink-0 flex items-center space-x-4\">\n              <Link to=\"/\" className=\"text-2xl font-bold tracking-wider\">CREATE<span className=\"text-white\">.AI</span></Link>\n              <Link to=\"/discover\" className=\"px-3 py-1 rounded-md text-sm font-medium bg-emerald-600/40 text-white transition-all duration-300 hover:shadow-[0_0_10px_rgba(16,185,129,0.5)] border border-emerald-500/50\">\n                Discover\n              </Link>\n            </div>\n            <div className=\"flex items-center justify-center space-x-4 sm:space-x-8\">\n              <Link to=\"/\" className=\"px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:bg-emerald-900/30 hover:text-emerald-300 hover:shadow-[0_0_10px_rgba(16,185,129,0.5)] hover:scale-105\">\n                Create New AI\n              </Link>\n            </div>\n          </div>\n        </div>\n      </nav>\n\n      <main className=\"pt-24 pb-16 px-4 max-w-7xl mx-auto z-10 relative animate-fadeIn\">\n        <div className=\"text-center mb-10\">\n          <h2 className=\"text-3xl sm:text-4xl font-bold mb-4 tracking-tight\">\n            <span className=\"text-white\">Discover</span> Digital Consciousness\n          </h2>\n          <p className=\"text-lg text-emerald-300/80 max-w-2xl mx-auto\">\n            Explore AI agents created by the community. Find one that resonates with you and start a conversation.\n          </p>\n        </div>\n\n        {loading && <div className=\"flex justify-center items-center py-20\">\n            <div className=\"animate-spin h-10 w-10 border-4 border-emerald-500 rounded-full border-t-transparent\"></div>\n          </div>}\n\n        {error && <div className=\"bg-red-900/20 border border-red-500/30 text-red-300 p-4 rounded-md text-center\">\n            {error}\n          </div>}\n\n        {!loading && !error && aiAgents.length === 0 && <div className=\"text-center py-20 bg-emerald-900/10 border border-emerald-500/20 rounded-xl\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-16 w-16 mx-auto text-emerald-500/40 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1} d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\" />\n            </svg>\n            <h3 className=\"text-xl font-bold text-white mb-2\">No AI Agents Found</h3>\n            <p className=\"text-emerald-400/70 max-w-md mx-auto\">\n              Be the first to create and share your AI agent with the community!\n            </p>\n            <Link to=\"/\" className=\"inline-block mt-6 bg-emerald-600/30 hover:bg-emerald-600/40 text-white px-6 py-3 rounded-md transition-all duration-300 hover:shadow-[0_0_15px_rgba(16,185,129,0.4)] border border-emerald-500/50\">\n              Create an AI Agent\n            </Link>\n          </div>}\n\n        {!loading && !error && aiAgents.length > 0 && <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-16\">\n            {aiAgents.map(agent => <div key={agent.id} className=\"bg-black border-2 border-emerald-500/30 rounded-xl overflow-hidden shadow-[0_0_20px_rgba(16,185,129,0.1)] transition-all duration-300 hover:shadow-[0_0_30px_rgba(16,185,129,0.2)] hover:border-emerald-500/50 cursor-pointer\" onClick={() => navigate(`/ai/${agent.id}`)}>\n                <div className=\"p-5 flex items-center gap-4 border-b border-emerald-500/20\">\n                  <div className=\"w-12 h-12 flex-shrink-0\">\n                    {agent.imageUrl ? <img src={agent.imageUrl} alt={agent.name} className=\"w-full h-full object-cover rounded-full border border-emerald-500/50\" /> : <div className=\"w-full h-full rounded-full bg-black border border-emerald-500/50 flex items-center justify-center\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 text-emerald-500/30\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                        </svg>\n                      </div>}\n                  </div>\n                  <div>\n                    <h3 className=\"text-white font-bold truncate\">{agent.name}</h3>\n                    <p className=\"text-xs text-emerald-400/70\">\n                      Created {new Date(agent.createdAt).toLocaleDateString()}\n                    </p>\n                  </div>\n                </div>\n                <div className=\"p-5\">\n                  <p className=\"text-emerald-300 text-sm line-clamp-2 mb-4\">{agent.description}</p>\n                  \n                  <div className=\"text-xs text-emerald-500 mb-1\">Capabilities:</div>\n                  <ul className=\"space-y-1 pl-3 mb-4\">\n                    {agent.capabilities.slice(0, 2).map((capability, idx) => <li key={idx} className=\"text-emerald-300/80 text-xs flex items-start\">\n                        <span className=\"mr-1 text-emerald-500\">›</span>\n                        <span className=\"line-clamp-1\">{capability}</span>\n                      </li>)}\n                    {agent.capabilities.length > 2 && <li className=\"text-emerald-300/80 text-xs flex items-start\">\n                        <span className=\"mr-1 text-emerald-500\">›</span>\n                        <span>+ {agent.capabilities.length - 2} more</span>\n                      </li>}\n                  </ul>\n                  \n                  <div className=\"text-xs text-emerald-500 mb-1\">Personality:</div>\n                  <p className=\"text-emerald-300/80 text-xs line-clamp-1\">{agent.personality}</p>\n                </div>\n                <div className=\"bg-emerald-900/20 p-3 flex justify-center\">\n                  <button className=\"text-xs text-white px-4 py-1.5 rounded bg-emerald-600/30 hover:bg-emerald-600/50 transition-all duration-300 flex items-center gap-1\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z\" />\n                    </svg>\n                    Start Conversation\n                  </button>\n                </div>\n              </div>)}\n          </div>}\n      </main>\n\n      <footer className=\"fixed bottom-0 w-full bg-black bg-opacity-80 backdrop-blur-sm border-t border-emerald-500/30 py-3 z-20\">\n        <div className=\"max-w-7xl mx-auto px-4 text-center text-xs text-emerald-600\">\n          <p>CREATE.AI • Digital Consciousness Forge • {new Date().getFullYear()}</p>\n        </div>\n      </footer>\n    </div>;\n}\nfunction AIDetailPage() {\n  const [agent, setAgent] = useState(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n  const navigate = useNavigate();\n  const {\n    id\n  } = useParams();\n  const chatContainerRef = useRef(null);\n  useEffect(() => {\n    const fetchAgent = async () => {\n      try {\n        setLoading(true);\n        const agentData = await stateClient.getEntity('aiagents', id);\n        if (!agentData) {\n          setError('AI agent not found');\n          return;\n        }\n        setAgent(agentData);\n      } catch (err) {\n        console.error('Error fetching AI agent:', err);\n        setError('Failed to load AI agent');\n      } finally {\n        setLoading(false);\n      }\n    };\n    if (id) {\n      fetchAgent();\n    }\n  }, [id]);\n  const {\n    messages: chatMessages,\n    input: chatInput,\n    handleInputChange: handleChatInputChange,\n    handleSubmit: handleChatSubmit,\n    isLoading: isChatLoading\n  } = useChat({\n    api: 'https://chat.dev.fun/chat/9d063f749e5a35283fa4',\n    id: `conversation-${id}`,\n    initialMessages: agent ? [{\n      id: 'system',\n      role: 'system',\n      content: agent.systemPrompt\n    }] : []\n  });\n  useEffect(() => {\n    if (agent && chatMessages.length === 0) {\n      chatMessages.unshift({\n        id: 'system',\n        role: 'system',\n        content: agent.systemPrompt\n      });\n    }\n  }, [agent, chatMessages]);\n  const BinaryBackground = () => {\n    return <div className=\"fixed inset-0 overflow-hidden pointer-events-none z-0\">\n        <div className=\"binary-rain\">\n          {Array.from({\n          length: 20\n        }).map((_, i) => <div key={i} className=\"binary-column\" style={{\n          left: `${i * 5}%`,\n          animationDuration: `${Math.random() * 10 + 25}s`,\n          animationDelay: `${Math.random() * 2}s`\n        }}>\n              {Array.from({\n            length: 40\n          }).map((_, j) => <div key={j} className=\"binary-char opacity-20 text-emerald-400\" style={{\n            animationDelay: `${Math.random() * 2}s`\n          }}>\n                  {Math.random() > 0.5 ? '1' : '0'}\n                </div>)}\n            </div>)}\n        </div>\n      </div>;\n  };\n  if (loading) {\n    return <div className=\"min-h-screen bg-black text-emerald-400 font-mono relative overflow-hidden flex justify-center items-center\">\n        <BinaryBackground />\n        <div className=\"animate-spin h-10 w-10 border-4 border-emerald-500 rounded-full border-t-transparent\"></div>\n      </div>;\n  }\n  if (error) {\n    return <div className=\"min-h-screen bg-black text-emerald-400 font-mono relative overflow-hidden flex flex-col justify-center items-center p-4\">\n        <BinaryBackground />\n        <div className=\"bg-red-900/20 border border-red-500/30 text-red-300 p-6 rounded-md text-center max-w-md\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-12 w-12 mx-auto text-red-400 mb-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\" />\n          </svg>\n          <h3 className=\"text-xl font-bold mb-2\">{error}</h3>\n          <p className=\"mb-6\">The AI agent you're looking for couldn't be found or has been removed.</p>\n          <button onClick={() => navigate('/discover')} className=\"bg-emerald-600/30 hover:bg-emerald-600/40 text-white px-6 py-2 rounded-md transition-all duration-300 hover:shadow-[0_0_15px_rgba(16,185,129,0.4)] border border-emerald-500/50\">\n            Return to Discover\n          </button>\n        </div>\n      </div>;\n  }\n  return <div className=\"min-h-screen bg-black text-emerald-400 font-mono relative overflow-hidden\">\n      <BinaryBackground />\n      \n      <nav className=\"fixed top-0 left-0 right-0 bg-black bg-opacity-80 backdrop-blur-sm border-b border-emerald-500/30 z-50\">\n        <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          <div className=\"flex justify-between h-16\">\n            <div className=\"flex-shrink-0 flex items-center space-x-4\">\n              <Link to=\"/\" className=\"text-2xl font-bold tracking-wider\">CREATE<span className=\"text-white\">.AI</span></Link>\n              <Link to=\"/discover\" className=\"px-3 py-1 rounded-md text-sm font-medium transition-all duration-300 hover:bg-emerald-900/30 hover:text-emerald-300 hover:shadow-[0_0_10px_rgba(16,185,129,0.5)] hover:scale-105\">\n                Discover\n              </Link>\n            </div>\n            <div className=\"flex items-center justify-center space-x-4\">\n              <button onClick={() => navigate('/discover')} className=\"px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:bg-emerald-900/30 hover:text-emerald-300 flex items-center gap-1\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 19l-7-7 7-7\" />\n                </svg>\n                Back to Discover\n              </button>\n            </div>\n          </div>\n        </div>\n      </nav>\n\n      <main className=\"pt-20 pb-24 px-4 max-w-3xl mx-auto z-10 relative animate-fadeIn\">\n        <div className=\"mb-6 bg-emerald-900/10 border border-emerald-500/30 rounded-xl p-4 md:p-6\">\n          <div className=\"flex items-center gap-4 mb-4\">\n            <div className=\"w-14 h-14\">\n              {agent.imageUrl ? <img src={agent.imageUrl} alt={agent.name} className=\"w-full h-full object-cover rounded-full border-2 border-emerald-500/50 shadow-[0_0_10px_rgba(16,185,129,0.2)]\" /> : <div className=\"w-full h-full rounded-full bg-black border-2 border-emerald-500/50 shadow-[0_0_10px_rgba(16,185,129,0.2)] flex items-center justify-center\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-6 w-6 text-emerald-500/30\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                  </svg>\n                </div>}\n            </div>\n            <div>\n              <h2 className=\"text-2xl font-bold text-white\">{agent.name}</h2>\n              <p className=\"text-sm text-emerald-400/70\">Created {new Date(agent.createdAt).toLocaleDateString()}</p>\n            </div>\n          </div>\n          \n          <p className=\"text-emerald-300 mb-4\">{agent.description}</p>\n          \n          <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            <div>\n              <h3 className=\"text-sm text-white font-medium mb-2\">Capabilities:</h3>\n              <ul className=\"space-y-1 pl-5\">\n                {agent.capabilities.map((capability, index) => <li key={index} className=\"text-emerald-300 flex items-start\">\n                    <span className=\"mr-2 text-emerald-500\">›</span>\n                    {capability}\n                  </li>)}\n              </ul>\n            </div>\n            \n            <div>\n              <h3 className=\"text-sm text-white font-medium mb-2\">Personality:</h3>\n              <p className=\"text-emerald-300\">{agent.personality}</p>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"bg-black border-2 border-emerald-500/50 rounded-xl overflow-hidden shadow-[0_0_30px_rgba(16,185,129,0.15)]\">\n          <div className=\"p-4 border-b border-emerald-500/30 flex items-center\">\n            <div className=\"w-10 h-10 mr-3\">\n              {agent.imageUrl ? <img src={agent.imageUrl} alt={agent.name} className=\"w-full h-full object-cover rounded-full border border-emerald-500/50\" /> : <div className=\"w-full h-full rounded-full bg-black border border-emerald-500/50 flex items-center justify-center\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 text-emerald-500/30\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n                  </svg>\n                </div>}\n            </div>\n            <div>\n              <h3 className=\"text-white font-medium\">{agent.name}</h3>\n              <p className=\"text-xs text-emerald-400/70\">Online</p>\n            </div>\n          </div>\n          \n          <div className=\"h-80 overflow-y-auto p-4 space-y-4\" style={{\n          scrollBehavior: 'smooth'\n        }} ref={chatContainerRef}>\n            <div className=\"text-xs text-emerald-500/70 text-center py-2 px-4 bg-emerald-900/10 rounded-full max-w-xs mx-auto\">\n              Begin your conversation with {agent.name}\n            </div>\n            \n            {chatMessages.filter(m => m.role !== 'system').map((message, index) => <div key={index} className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}>\n                <div className={`max-w-[80%] px-4 py-3 rounded-lg ${message.role === 'user' ? 'bg-emerald-800/30 text-white rounded-tr-none' : 'bg-emerald-950/70 border border-emerald-700/30 text-emerald-300 rounded-tl-none'}`}>\n                  {message.content}\n                </div>\n              </div>)}\n            \n            {isChatLoading && <div className=\"flex justify-start\">\n                <div className=\"max-w-[80%] px-4 py-3 rounded-lg bg-emerald-950/70 border border-emerald-700/30 text-emerald-300 rounded-tl-none flex\">\n                  <div className=\"flex space-x-1\">\n                    <div className=\"w-2 h-2 bg-emerald-500 rounded-full animate-pulse\" style={{\n                  animationDelay: '0ms'\n                }}></div>\n                    <div className=\"w-2 h-2 bg-emerald-500 rounded-full animate-pulse\" style={{\n                  animationDelay: '150ms'\n                }}></div>\n                    <div className=\"w-2 h-2 bg-emerald-500 rounded-full animate-pulse\" style={{\n                  animationDelay: '300ms'\n                }}></div>\n                  </div>\n                </div>\n              </div>}\n          </div>\n          \n          <div className=\"p-4 border-t border-emerald-500/30\">\n            <form onSubmit={handleChatSubmit} className=\"flex gap-2\">\n              <input value={chatInput} onChange={handleChatInputChange} placeholder={`Message ${agent.name}...`} className=\"flex-1 bg-black/50 border border-emerald-500/40 rounded-md px-4 py-2 text-white placeholder-emerald-700 focus:outline-none focus:ring-1 focus:ring-emerald-400 focus:border-transparent\" />\n              <button type=\"submit\" disabled={isChatLoading || !chatInput.trim()} className=\"bg-emerald-600/30 hover:bg-emerald-600/40 text-white px-4 py-2 rounded-md transition-all duration-300 hover:shadow-[0_0_10px_rgba(16,185,129,0.3)] disabled:opacity-50 disabled:hover:bg-emerald-600/30\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                  <path fillRule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z\" clipRule=\"evenodd\" />\n                </svg>\n              </button>\n            </form>\n          </div>\n        </div>\n      </main>\n\n      <footer className=\"fixed bottom-0 w-full bg-black bg-opacity-80 backdrop-blur-sm border-t border-emerald-500/30 py-3 z-20\">\n        <div className=\"max-w-7xl mx-auto px-4 text-center text-xs text-emerald-600\">\n          <p>CREATE.AI • Digital Consciousness Forge • {new Date().getFullYear()}</p>\n        </div>\n      </footer>\n    </div>;\n}\nexport default App;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\",\"framer-motion\":\"10.16.4\",\"zod\":\"3.22.4\",\"react-router-dom\":\"6.18.0\",\"@devfunlabs/state-client\":\"0.8.1\",\"socket.io-client\":\"4.7.1\",\"ai\":\"4.0.0\"}}","token",{"_18":75,"_76":77,"_78":79,"_80":81,"_82":83,"_84":85,"_86":87,"_88":39,"_89":39,"_67":68},"create.ai","symbol","CREATE","price",0.00000408,"marketcap",4083.97,"image","https://pump.mypinata.cloud/ipfs/QmYLYbj542tBMLLhqN9QFWNCYPxMXp1VAKp4ni7uBevDNy?img-width=256&img-dpr=2","website","https://dev.fun/p/9d063f749e5a35283fa4","twitter","https://x.com/CreateOnSolana","devCount","appCount","upstreamApp","isLordOfDev","analytics",[94,98,100,102,104,106,108,110,112,114,116,118,120,122],{"_95":96,"_97":56},"day","2025-04-21","runCount",{"_95":99,"_97":56},"2025-04-22",{"_95":101,"_97":56},"2025-04-23",{"_95":103,"_97":56},"2025-04-24",{"_95":105,"_97":56},"2025-04-25",{"_95":107,"_97":56},"2025-04-26",{"_95":109,"_97":56},"2025-04-27",{"_95":111,"_97":56},"2025-04-28",{"_95":113,"_97":56},"2025-04-29",{"_95":115,"_97":56},"2025-04-30",{"_95":117,"_97":56},"2025-05-01",{"_95":119,"_97":56},"2025-05-02",{"_95":121,"_97":56},"2025-05-03",{"_95":123,"_97":59},"2025-05-04","snapshot","ogImage","https://cdn.dev.fun/og/image/9d063f749e5a35283fa4/bdacad8c.webp","commitDetail","actionData","errors"]
</article></body></html>