🤖 ChatGPT Клон

\n \n

\n {messages.map((msg) => (\n

\n {msg.role === 'user' ? (\n

👤

\n ) : (\n

🤖

\n )}\n

{msg.content}

\n {msg.role === 'assistant' && msg.status === 'sent' && (\n \n )}\n

\n ))}\n

setInput(e.target.value)}\n          placeholder=\"Введите ваш вопрос...\"\n          disabled={isLoading}\n          rows={1}\n          className=\"chat-input\"\n        />\n        <button \n          type=\"submit\" \n          disabled={isLoading || !input.trim()}\n          className=\"send-button\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n            <path fill=\"currentColor\" d=\"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z\"/>\n          </svg>\n        </button>\n      </form>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  \n  const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_chats_7 (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      messages TEXT NOT NULL,\n      timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Fetch chat history\n  if (request.method === \"GET\" && new URL(request.url).pathname === \"/history\") {\n    const result = await sqlite.execute(`\n      SELECT messages FROM ${KEY}_chats_7 \n      ORDER BY timestamp DESC \n      LIMIT 50\n    `);\n    \n    const parsedMessages = result.rows.map(row => \n      JSON.parse(row.messages)\n    ).flat().reverse();\n\n    return new Response(JSON.stringify(parsedMessages), {\n      headers: { \"Content-Type\": \"application/json\" }\n    });\n  }\n\n  // Reset conversation\n  if (request.method === \"POST\" && new URL(request.url).pathname === \"/reset\") {\n    await sqlite.execute(`DELETE FROM ${KEY}_chats_7`);\n    return new Response(\"Conversation reset\", { status: 200 });\n  }\n\n  // Chat completion\n  if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n    const { messages } = await request.json();\n\n    // Save messages to SQLite\n    await sqlite.execute(`\n      INSERT INTO ${KEY}_chats_7 (messages) \n      VALUES (?)\n    `, [JSON.stringify(messages)]);\n\n    const openai = new OpenAI();\n    const systemPrompt = \"Ты дружелюбный и умный ассистент. Отвечай четко и по существу.\";\n\n    const modifiedMessages = [\n      { role: \"system\", content: systemPrompt },\n      ...messages\n    ];\n\n    const stream = await openai.chat.completions.create({\n      model: \"gpt-4o-mini\",\n      messages: modifiedMessages,\n      stream: true,\n    });\n\n    const encoder = new TextEncoder();\n    const readableStream = new ReadableStream({\n      async start(controller) {\n        for await (const chunk of stream) {\n          const content = chunk.choices[0]?.delta?.content || \"\";\n          if (content) {\n            controller.enqueue(encoder.encode(content));\n          }\n        }\n        controller.close();\n      }\n    });\n\n    return new Response(readableStream, {\n      headers: { \"Content-Type\": \"text/plain\" }\n    });\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>🤖 ChatGPT Клон</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { \"Content-Type\": \"text/html\" }\n  });\n}\n\n// CSS remains the same as in the previous version\nconst css = `\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  background-color: #f5f5f5;\n  display: flex;\n  justify-content: center;\n  height: 100vh;\n}\n\n.chat-container {\n  width: 100%;\n  max-width: 800px;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  background-color: white;\n  box-shadow: 0 0 15px rgba(0,0,0,0.1);\n}\n\n.chat-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 15px 20px;\n  background-color: #f7f7f8;\n  border-bottom: 1px solid #e5e5e5;\n}\n\n.chat-header h1 {\n  font-size: 1.2rem;\n  color: #333;\n}\n\n.clear-chat-btn {\n  background-color: #f04438;\n  color: white;\n  border: none;\n  padding: 8px 15px;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 0.9rem;\n  transition: background-color 0.3s;\n}\n\n.clear-chat-btn:hover {\n  background-color: #d32f2f;\n}\n\n.messages-container {\n  flex-grow: 1;\n  overflow-y: auto;\n  padding: 20px;\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n}\n\n.message {\n  display: flex;\n  margin-bottom: 15px;\n  max-width: 90%;\n}\n\n.message-content {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  width: 100%;\n}\n\n.user-icon, .ai-icon {\n  font-size: 1.2rem;\n  margin-top: 5px;\n}\n\n.message.user {\n  align-self: flex-end;\n}\n\n.message.assistant {\n  align-self: flex-start;\n}\n\n.text-container {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  width: 100%;\n}\n\n.message .text {\n  background-color: #f0f0f0;\n  padding: 10px 15px;\n  border-radius: 10px;\n  max-width: 100%;\n  line-height: 1.5;\n}\n\n.message.user .text {\n  background-color: #007bff;\n  color: white;\n}\n\n.audio-btn {\n  align-self: flex-start;\n  background-color: #10a37f;\n  color: white;\n  border: none;\n  padding: 5px 10px;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 0.8rem;\n  transition: background-color 0.3s;\n}\n\n.audio-btn.active {\n  background-color: #f04438;\n}\n\n.audio-btn:hover {\n  opacity: 0.9;\n}\n\n.input-area {\n  display: flex;\n  align-items: center;\n  padding: 15px 20px;\n  background-color: white;\n  border-top: 1px solid #e5e5e5;\n}\n\n.chat-input {\n  flex-grow: 1;\n  resize: none;\n  padding: 10px 15px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  margin-right: 10px;\n  font-size: 1rem;\n  max-height: 150px;\n  overflow-y: auto;\n}\n\n.send-button {\n  background-color: #10a37f;\n  color: white;\n  border: none;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: background-color 0.3s;\n}\n\n.send-button:disabled {\n  background-color: #cccccc;\n  cursor: not-allowed;\n}\n\n.send-button:hover:not(:disabled) {\n  background-color: #0f8c6a;\n}\n\n.send-button svg {\n  width: 24px;\n  height: 24px;\n}\n`;",["D",1739184941263],"version",6,"currentUserHasLiked","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_96":97,"_101":102},"forkedVal","interval","description","@jsxImportSource https://esm.sh/react@18.2.0","latestEvaluation","slug","Custodia/enchantingScarletChickadee","versions",[157,161,165,169,173,176,179],{"_98":158,"_139":140,"_159":160},["D",1739184941263],"n","1",{"_98":162,"_139":163,"_159":164},["D",1739184716642],5,"2",{"_98":166,"_139":167,"_159":168},["D",1739181626745],4,"3",{"_98":170,"_139":171,"_159":172},["D",1739181451601],3,"4",{"_98":174,"_139":90,"_159":175},["D",1739180981241],"5",{"_98":177,"_139":107,"_159":178},["D",1739180789646],"6",{"_98":180,"_139":31,"_159":181},["D",1739180609028],"7","hasNext","filters",{"_185":186,"_187":188,"_128":129},"sort","newest","type","all","routes/_app","actionData","errors"]
</article></body></html>