ChatGPT Clone

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_211":212,"_213":214},"routes/_app.x.$handle.$name",{"_100":99,"_32":49,"_108":90,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_21":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":25,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_47":48,"_32":49,"_37":50,"_51":-5,"_52":25,"_53":54,"_55":54,"_56":-5,"_57":-5,"_18":58,"_59":60,"_61":62,"_63":62,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",4,"changes",[19,20],"aiChatInfo","userId",{"_21":42,"_23":-7,"_24":25,"_26":25,"_27":43,"_29":43},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":21,"_35":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous","deleted",false,"deletedHere","path","frontend/index.html","latestPath","fileId","9a89994e-37a7-11f0-94b0-9e149126039e","name","index.html","fileType","content","\n\n\n \n \n ChatGPT Clone\n \n \n \n \n \n \n\n\n

\n \n\n","createdAt",["D",1747985344021],"branchVersion","branchId","6876e736-37a7-11f0-9033-9e149126039e",{"_30":44,"_32":43,"_34":45,"_35":-5,"_37":46,"_39":14,"_40":41,"_24":25},"frontend","6fd9bce1-a291-4b42-8b9b-195b34991ba4","directory",["D",1747985344021],"id","6876a0c8-37a7-11f0-9033-9e149126039e","GokuAi",["D",1747985260013],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","60fb6c16-2bdf-4286-9ac5-f4b9e6eb529c","pinnedFileId","95692826-37a7-11f0-b0cf-9e149126039e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","4a331ea8-f02b-42f1-b904-21c47f2b041c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":58,"_104":105,"_106":25},"branch",{"_13":89,"_32":90,"_47":41,"_91":48,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":49,"_98":99},"isOwned",12,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","Itssongoku","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yck1oWTdNWlpJSmNPMWpWR1VSM3VvNEQyWXQifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_47":48,"_32":49,"_37":207,"_51":-5,"_52":25,"_53":54,"_55":54,"_56":-5,"_57":-5,"_18":58,"_59":60,"_61":62,"_63":62,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":208,"_84":209,"_86":210,"_88":25},"tree",[169,171,173,175],"files",[169,170,171,172,173,174,175],"counts",{"_159":66,"_160":138,"_161":66,"_162":163,"_164":165},"contents",[130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_47":153,"_32":154,"_30":155,"_137":-5,"_40":41,"_39":156,"_139":62,"_37":157,"_13":66,"_34":45,"_35":-5,"_24":25,"_142":-5,"_27":158},{"_47":150,"_32":43,"_30":44,"_137":-5,"_40":41,"_39":14,"_139":62,"_37":151,"_13":66,"_34":45,"_35":-5,"_24":25,"_142":-5,"_27":152},{"_47":144,"_32":145,"_30":146,"_137":-5,"_40":41,"_39":147,"_139":62,"_37":148,"_13":66,"_34":45,"_35":-5,"_24":25,"_142":-5,"_27":149},{"_47":134,"_32":135,"_30":136,"_137":-5,"_40":41,"_39":138,"_139":62,"_37":140,"_13":66,"_34":21,"_35":141,"_24":25,"_142":-5,"_27":143},"85f70e8a-37a7-11f0-9483-9e149126039e","README.md","85f70f52-37a7-11f0-9483-9e149126039e","parentId",1,"latest",["D",1747985309507],"# ChatGPT Clone\n\nA complete ChatGPT-like interface built with React and Hono, featuring:\n\n- Modern ChatGPT-style UI with dark theme\n- Real-time chat interface\n- Message history\n- Typing indicators\n- Responsive design\n- OpenAI GPT integration\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main Hono server with API routes\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main chat application\n│ │ ├── ChatMessage.tsx # Individual message component\n│ │ └── ChatInput.tsx # Message input component\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ └── style.css # Custom styles\n├── shared/\n│ └── types.ts # Shared TypeScript types\n└── README.md\n```\n\n## Features\n\n- **Chat Interface**: Clean, modern design matching ChatGPT's appearance\n- **Message History**: Persistent conversation history\n- **Real-time Responses**: Streaming-like response display\n- **Responsive Design**: Works on desktop and mobile\n- **Dark Theme**: Modern dark theme similar to ChatGPT\n\n## Setup\n\n1. Set your OpenAI API key in environment variables as `OPENAI_API_KEY`\n2. The app will be available at the HTTP endpoint\n\n## Usage\n\nSimply start typing in the chat input and press Enter or click Send to get AI responses.","label",[135],"88a0b208-37a7-11f0-9b65-9e149126039e","shared","ac6770b9-b12d-4570-bc21-3f034f4639f4",2,["D",1747985313969],[145],"9a89a02e-37a7-11f0-94b0-9e149126039e",["D",1747985344021],[43],"956933a2-37a7-11f0-b0cf-9e149126039e","backend","c74e2adf-fbaa-4ca2-b63b-7a80065a927f",3,["D",1747985335418],[154],"pulls","branches","forks","envVars",{"_166":66,"_168":66},"connections",{"_166":66,"_167":66},"count","unfilledCount","emptyCount",{"_47":153,"_32":154,"_30":155,"_137":-5,"_40":41,"_39":156,"_139":62,"_37":204,"_13":66,"_34":45,"_35":-5,"_24":25,"_142":-5,"_177":205,"_27":206},{"_47":198,"_32":199,"_30":60,"_137":155,"_40":41,"_39":156,"_139":25,"_37":200,"_13":66,"_34":184,"_35":201,"_24":25,"_142":-5,"_177":202,"_27":203},{"_47":150,"_32":43,"_30":44,"_137":-5,"_40":41,"_39":14,"_139":62,"_37":195,"_13":66,"_34":45,"_35":-5,"_24":25,"_142":-5,"_177":196,"_27":197},{"_47":191,"_32":33,"_30":31,"_137":44,"_40":41,"_39":14,"_139":62,"_37":192,"_13":66,"_34":21,"_35":36,"_24":25,"_142":-5,"_177":193,"_27":194},{"_47":144,"_32":145,"_30":146,"_137":-5,"_40":41,"_39":147,"_139":62,"_37":188,"_13":66,"_34":45,"_35":-5,"_24":25,"_142":-5,"_177":189,"_27":190},{"_47":180,"_32":181,"_30":182,"_137":146,"_40":41,"_39":147,"_139":62,"_37":183,"_13":66,"_34":184,"_35":185,"_24":25,"_142":-5,"_177":186,"_27":187},{"_47":134,"_32":135,"_30":136,"_137":-5,"_40":41,"_39":138,"_139":62,"_37":176,"_13":66,"_34":21,"_35":141,"_24":25,"_142":-5,"_177":178,"_27":179},["D",1747985309507],"children",[],[135],"88a090e8-37a7-11f0-9b65-9e149126039e","types.ts","88a091ba-37a7-11f0-9b65-9e149126039e",["D",1747985313969],"script","export interface ChatMessage {\n id: string;\n role: 'user' | 'assistant';\n content: string;\n timestamp: number;\n}\n\nexport interface ChatRequest {\n message: string;\n conversationId?: string;\n}\n\nexport interface ChatResponse {\n message: ChatMessage;\n conversationId: string;\n}\n\nexport interface Conversation {\n id: string;\n messages: ChatMessage[];\n createdAt: number;\n updatedAt: number;\n}",[],[145,181],["D",1747985313969],[174],[145],"9a899886-37a7-11f0-94b0-9e149126039e",["D",1747985344021],[],[43,33],["D",1747985344021],[172],[43],"95692768-37a7-11f0-b0cf-9e149126039e","index.ts",["D",1747985335418],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport type { ChatMessage, ChatRequest, ChatResponse, Conversation } from \"../shared/types.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\nconst openai = new OpenAI();\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve main page\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Get conversation history\napp.get(\"/api/conversations/:id\", async c => {\n const conversationId = c.req.param(\"id\");\n try {\n const conversation = await blob.getJSON(`conversation_${conversationId}`) as Conversation;\n return c.json(conversation);\n } catch (error) {\n return c.json({ error: \"Conversation not found\" }, 404);\n }\n});\n\n// Send a chat message\napp.post(\"/api/chat\", async c => {\n try {\n const { message, conversationId }: ChatRequest = await c.req.json();\n \n // Generate conversation ID if not provided\n const convId = conversationId || `conv_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\n \n // Get existing conversation or create new one\n let conversation: Conversation;\n try {\n conversation = await blob.getJSON(`conversation_${convId}`) as Conversation;\n } catch {\n conversation = {\n id: convId,\n messages: [],\n createdAt: Date.now(),\n updatedAt: Date.now()\n };\n }\n \n // Add user message\n const userMessage: ChatMessage = {\n id: `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,\n role: 'user',\n content: message,\n timestamp: Date.now()\n };\n \n conversation.messages.push(userMessage);\n \n // Get AI response\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o-mini\",\n messages: conversation.messages.map(msg => ({\n role: msg.role,\n content: msg.content\n })),\n max_tokens: 1000,\n temperature: 0.7,\n });\n \n const assistantMessage: ChatMessage = {\n id: `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,\n role: 'assistant',\n content: completion.choices[0].message.content || \"I apologize, but I couldn't generate a response.\",\n timestamp: Date.now()\n };\n \n conversation.messages.push(assistantMessage);\n conversation.updatedAt = Date.now();\n \n // Save conversation\n await blob.setJSON(`conversation_${convId}`, conversation);\n \n const response: ChatResponse = {\n message: assistantMessage,\n conversationId: convId\n };\n \n return c.json(response);\n } catch (error) {\n console.error(\"Chat error:\", error);\n return c.json({ error: \"Failed to process chat message\" }, 500);\n }\n});\n\n// List recent conversations\napp.get(\"/api/conversations\", async c => {\n try {\n const keys = await blob.list(\"conversation_\");\n const conversations = await Promise.all(\n keys.slice(0, 10).map(async key => {\n try {\n const conv = await blob.getJSON(key) as Conversation;\n return {\n id: conv.id,\n lastMessage: conv.messages[conv.messages.length - 1]?.content.slice(0, 50) + \"...\" || \"New conversation\",\n updatedAt: conv.updatedAt\n };\n } catch {\n return null;\n }\n })\n );\n \n return c.json(conversations.filter(Boolean).sort((a, b) => b!.updatedAt - a!.updatedAt));\n } catch (error) {\n console.error(\"Error fetching conversations:\", error);\n return c.json([]);\n }\n});\n\nexport default app.fetch;",[],[154,199],["D",1747985335418],[170],[154],["D",1747985260013],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":58,"_104":105,"_106":25},{"_13":89,"_32":90,"_47":41,"_91":48,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":49,"_98":99},"ctx",{"_82":-5,"_127":244,"_245":246,"_247":248,"_249":25,"_250":25,"_251":25,"_252":62,"_253":-5,"_254":-7,"_255":-7,"_256":66,"_257":25,"_258":25,"_259":-5,"_260":25,"_261":25,"_262":25,"_263":-5},"ENV",{"_215":216,"_217":218,"_219":90,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v4