/** @jsxImportSource https://esm.sh/react */ import { Hono } from "npm:hono@3"; import OpenAI from "npm:openai"; import { renderToString } from "npm:react-dom/server"; const jsxResponse = (jsx) => { return new Response(renderToString(jsx), { headers: { "Content-Type": "text/html" } }); }; const clientCode = () => { document.getElementById("input").addEventListener("submit", 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-xs 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); // Setup the SSE connection const input = document.getElementById("input"); const eventSource = new EventSource( `/sse-response?message=${msgDiv.textContent}` + `&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 openai = new OpenAI(); 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

<button className="ml-4 p-2 bg-blue-500 text-white rounded-lg shadow-sm hover:bg-blue-600">
              Send
            </button>
          </form>
          <script dangerouslySetInnerHTML={{ __html: `(${clientCode.toString()})()` }}>
          </script>
        </div>
      </body>
    </html>,
  );
});

app.get("/sse-response", async (c) => {
  const threadId = c.req.query("threadId");
  const assistantId = c.req.query("assistantId");
  const message = c.req.query("message");

await openai.beta.threads.messages.create(
    threadId,
    { role: "user", content: message },
  );

return new Response(body, { headers: { "Content-Type": "text/event-stream" } });
});
export default app.fetch;</article></body></html>

chatGPT