\n {messages\n .filter(m => m.role !== 'system')\n .map((msg, index) => (\n

\n {msg.content}\n

\n ))}\n {isLoading && (\n

\n Thinking... 💭\n

\n )}\n

\n \n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === 'POST') {\n try {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n \n const { messages } = await request.json();\n\n const completion = await openai.chat.completions.create({\n messages: messages,\n model: \"gpt-4o-mini\",\n max_tokens: 300,\n });\n\n return Response.json({ \n message: completion.choices[0].message.content \n });\n } catch (error) {\n console.error(error);\n return new Response(JSON.stringify({ \n error: 'Failed to generate response' \n }), { status: 500 });\n }\n }\n\n return new Response(`\n \n \n AI Chat\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}\n\nconst css = `\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n background-color: #f0f0f0;\n}\n\n.chat-container {\n width: 100%;\n max-width: 600px;\n height: 100vh;\n display: flex;\n flex-direction: column;\n background-color: white;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n}\n\n.messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n}\n\n.message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 10px;\n max-width: 80%;\n word-wrap: break-word;\n}\n\n.message.user {\n align-self: flex-end;\n background-color: #007bff;\n color: white;\n margin-left: auto;\n}\n\n.message.assistant {\n align-self: flex-start;\n background-color: #e9ecef;\n color: black;\n margin-right: auto;\n}\n\n.message.loading {\n font-style: italic;\n color: #6c757d;\n}\n\n.input-area {\n display: flex;\n padding: 10px;\n background-color: #f8f9fa;\n border-top: 1px solid #e9ecef;\n}\n\n.input-area input {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid #ced4da;\n border-radius: 4px;\n margin-right: 10px;\n}\n\n.input-area button {\n padding: 10px 15px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.input-area button:disabled {\n background-color: #6c757d;\n cursor: not-allowed;\n}\n\n.source-link {\n position: absolute;\n bottom: 10px;\n right: 10px;\n color: #6c757d;\n text-decoration: none;\n font-size: 0.8em;\n}\n`;","createdAt",["D",1739863727233],"version","currentUserHasLiked","likeCount",1,"forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","Samvic11","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ0Q2tsV1NPdG9FNFBQWTdFYndVSEU4WDByOCJ9","forkedVal","interval","slug","Samvic11/chatGPTClone","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[141],{"_118":32,"_142":-5,"_116":143,"_113":111},"prId",["D",1739863727233],"recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.forks",{"_151":152,"_195":121,"_196":136,"_197":32,"_95":198},"forksList",[153],{"_101":154,"_155":156},"ad2da2ac-f37d-11ef-8ec1-569c3dd06744","initialData",{"_99":100,"_96":157,"_101":154,"_103":-5,"_104":-5,"_105":106,"_107":67,"_108":109,"_110":158,"_112":26,"_113":158,"_114":159,"_116":160,"_118":161,"_119":26,"_120":32,"_123":32,"_124":32,"_125":32,"_122":32,"_126":32,"_127":-5,"_20":162,"_133":165,"_134":-7,"_137":138,"_167":-5,"_135":168,"_139":169},"7ee2c18d-9116-452d-82bf-876ebb62a363","57936b3a-f3a3-11ef-b3b6-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { CatClient } from \"https://esm.sh/ccat-api\";\n\nfunction App() {\n const [messages, setMessages] = useState([]);\n const [inputMessage, setInputMessage] = useState(\"\");\n const [connectionStatus, setConnectionStatus] = useState(\"Disconnected\");\n const [plugins, setPlugins] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const catClientRef = useRef(null);\n\n useEffect(() => {\n initializeCatClient();\n }, []);\n\n const initializeCatClient = async () => {\n setLoading(true);\n setError(null);\n try {\n const config = await fetchWithRetry('/get-cat-config', 3);\n\n catClientRef.current = new CatClient({\n host: config.host,\n port: config.port,\n secure: config.secure,\n credential: config.credential,\n userId: \"user\",\n ws: {\n retries: 3,\n delay: 3000,\n onFailed: () => setConnectionStatus(\"Connection failed\"),\n },\n });\n\n catClientRef.current.onConnected(() => {\n setConnectionStatus(\"Connected\");\n console.log(\"Socket connected\");\n }).onMessage(msg => {\n console.log(msg);\n setMessages(prevMessages => [...prevMessages, { type: 'ai', content: msg.content }]);\n }).onError((err, e) => {\n console.error(err, e);\n setConnectionStatus(\"Error\");\n setError(`WebSocket error: ${err.message}`);\n }).onDisconnected(() => {\n console.log(\"Socket disconnected\");\n setConnectionStatus(\"Disconnected\");\n });\n\n // Configure LLM\n await retryOperation(() => catClientRef.current.api.llm.upsertLlmSetting('LLMOpenAIConfig', {\n openai_api_key: config.openaiApiKey\n }));\n\n // List plugins\n const pluginList = await retryOperation(() => catClientRef.current.api.plugins.listAvailablePlugins());\n setPlugins(pluginList);\n } catch (err) {\n console.error(\"Failed to initialize CatClient:\", err);\n setError(`Failed to initialize: ${err.message}`);\n } finally {\n setLoading(false);\n }\n };\n\n const fetchWithRetry = async (url, retries) => {\n for (let i = 0; i < retries; i++) {\n try {\n const response = await fetch(url);\n return await response.json();\n } catch (err) {\n if (i === retries - 1) throw err;\n await new Promise(resolve => setTimeout(resolve, 1000));\n }\n }\n };\n\n const retryOperation = async (operation, retries = 3) => {\n for (let i = 0; i < retries; i++) {\n try {\n return await operation();\n } catch (err) {\n if (i === retries - 1) throw err;\n await new Promise(resolve => setTimeout(resolve, 1000));\n }\n }\n };\n\n const sendMessage = async () => {\n if (inputMessage.trim() === \"\") return;\n setError(null);\n try {\n setMessages(prevMessages => [...prevMessages, { type: 'user', content: inputMessage }]);\n await catClientRef.current.send(inputMessage);\n setInputMessage(\"\");\n } catch (err) {\n console.error(\"Failed to send message:\", err);\n setError(`Failed to send message: ${err.message}`);\n }\n };\n\n return (\n

Cheshire Cat AI Client

Connection Status: {connectionStatus}

\n {loading &&

}\n {error &&

{error}

}\n

\n {messages.map((message, index) => (\n

\n {message.type === 'user' ? 'You' : 'AI'}: {message.content}\n

\n ))}\n

\n setInputMessage(e.target.value)}\n onKeyPress={(e) => e.key === 'Enter' && sendMessage()}\n style={{ width: '80%', marginRight: '10px' }}\n />\n \n

Available Plugins

{plugin.name}

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n if (request.url.endsWith('/get-cat-config')) {\n const config = {\n host: Deno.env.get(\"CCAT_CORE_HOST\") || \"localhost\",\n port: parseInt(Deno.env.get(\"CCAT_CORE_PORT\") || \"1865\"),\n secure: Deno.env.get(\"CCAT_CORE_USE_SECURE_PROTOCOLS\") === \"true\",\n credential: Deno.env.get(\"CCAT_API_KEY\"),\n openaiApiKey: Deno.env.get(\"OPENAI_API_KEY\"),\n };\n\n return new Response(JSON.stringify(config), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(`\n \n \n Cheshire Cat AI Client\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: system-ui, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n}\nul {\n list-style-type: none;\n padding: 0;\n}\nli {\n margin-bottom: 10px;\n padding: 10px;\n background-color: #f0f0f0;\n border-radius: 5px;\n}\ninput[type=\"text\"] {\n padding: 5px;\n font-size: 16px;\n}\nbutton {\n padding: 5px 10px;\n font-size: 16px;\n background-color: #4CAF50;\n color: white;\n border: none;\n cursor: pointer;\n}\nbutton:hover {\n background-color: #45a049;\n}\nbutton:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n`;",["D",1740506834608],6,{"_129":163,"_131":164},"gigmx","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybnBtekRodDdiRDdIQmJqQXNJY0hiQmhyNEoifQ",{"_113":111,"_129":130,"_99":100,"_118":32,"_166":-5},"prDisabledHint","latestEvaluation","gigmx/chatGPTClone",[170,174,178,182,186,189,192],{"_116":171,"_118":161,"_172":173},["D",1740506834608],"n","1",{"_116":175,"_118":176,"_172":177},["D",1740506055389],5,"2",{"_116":179,"_118":180,"_172":181},["D",1740505964090],4,"3",{"_116":183,"_118":184,"_172":185},["D",1740505914711],3,"4",{"_116":187,"_118":91,"_172":188},["D",1740505884342],"5",{"_116":190,"_118":121,"_172":191},["D",1740490681922],"6",{"_116":193,"_118":32,"_172":194},["D",1740490657359],"7","forksCount","valname","page",{"_113":111,"_99":100,"_129":130,"_11":97,"_118":32,"_101":102,"_114":115,"_105":106,"_112":26,"_135":136},"routes/_app","actionData","errors"]