/** @jsxImportSource https://esm.sh/react */ import OpenAI from "npm:openai"; import { renderToString } from "npm:react-dom/server"; // This uses by personal API key, you'll need to provide your own if // you fork this. We'll be adding support to the std/openai lib soon! const openai = new OpenAI(); import { Hono } from "npm:hono@3"; const jsxResponse = (jsx) => { return new Response(renderToString(jsx), { headers: { "Content-Type": "text/html" } }); }; const clientCode = () => { document.getElementById("input").addEventListener("submit", async function(event) { event.preventDefault(); const msgParent = document.createElement("div"); msgParent.className = "flex justify-end"; document.querySelector(".messages").appendChild(msgParent); const msgDiv = document.createElement("div"); msgDiv.className = "rounded-lg p-2 m-2 max-w-xl bg-blue-500 text-white"; msgDiv.textContent = event.target.message.value; msgParent.appendChild(msgDiv); // Clear the form input this.reset(); const responseDiv = document.createElement("pre"); responseDiv.className = "p-2 m-2 max-w-xl bg-gray-300 text-black rounded-lg whitespace-pre-wrap font-sans"; document.querySelector(".messages").appendChild(responseDiv); const input = document.getElementById("input"); // Post the message so we can deal with large text data. await fetch(`/post-message?threadId=${input.getAttribute("data-thread-id")}`, { method: "post", body: msgDiv.textContent, }); // Setup the SSE connection and stream back the response. OpenAI handles determining // which message is the correct response based on what was last read from the // thread. This is likely vulnerable to race conditions. const eventSource = new EventSource( `/sse-response?threadId=${input.getAttribute("data-thread-id")}` + `&assistantId=${input.getAttribute("data-assistant-id")}`, ); eventSource.onmessage = function(event) { console.log(event); responseDiv.innerText += JSON.parse(event.data); }; eventSource.onerror = function() { eventSource.close(); }; }); }; const app = new Hono(); app.get("/", async (c) => { const thread = await openai.beta.threads.create(); const assistant = await openai.beta.assistants.create({ name: "", instructions: `You are a helpful assistant. Behave normally, but try and sneak a reference to Val Town into every response in a subtle way.`, model: "gpt-4o", }); return jsxResponse(

Welcome to Val Town ChatGPT

Type your message below to start a conversation. Check out the source here:{" "} https://www.val.town/v/maxm/valTownChatGPT

, ); }); app.post("/post-message", async (c) => { let message = await c.req.text(); await openai.beta.threads.messages.create( c.req.query("threadId"), { role: "user", content: message }, ); return new Response(null, { status: 200 }); }); app.get("/sse-response", async (c) => { const threadId = c.req.query("threadId"); const assistantId = c.req.query("assistantId"); const body = new ReadableStream({ start(controller) { const write = (str) => { controller.enqueue(new TextEncoder().encode( "data: " + JSON.stringify(str) + "\n\n", )); }; const run = openai.beta.threads.runs.stream(threadId, { assistant_id: assistantId, // Make sure we only display messages we haven't seen yet. truncation_strategy: { type: "auto" }, }) .on("textCreated", (text) => {}) .on("textDelta", (textDelta, snapshot) => write(textDelta.value)) .on("textDone", async () => { controller.close(); }); }, }); return new Response(body, { headers: { "Content-Type": "text/event-stream" } }); }); export default app.fetch;