working streaming draft (not syncing tabs yet)

Author: whoiskatrin

examples/http-reusable-chat/index.html

@@ -4,20 +4,20 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "wrangler dev --port 5175",
-    "deploy": "wrangler deploy",
-    "typecheck": "tsc --noEmit"
+    "deploy": "vite build && wrangler deploy",
+    "start": "vite dev"
   },
   "dependencies": {
     "agents": "workspace:*",
     "ai": "^4.0.0",
     "@ai-sdk/openai": "^1.0.0",
-    "hono": "^4.0.0"
+    "hono": "^4.0.0",
+    "nanoid": "^5.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20241106.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
     "typescript": "^5.0.0",
     "vite": "^5.0.0",
     "wrangler": "^3.0.0"

examples/http-reusable-chat/package.json

@@ -0,0 +1,110 @@
+import type { UIMessage as Message } from "ai";
+import "./styles.css";
+import { useAgentChatHttp } from "agents/use-agent-chat-http";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export default function Chat() {
+  const [theme, setTheme] = useState<"dark" | "light">("dark");
+  const [input, setInput] = useState("");
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, []);
+
+  useEffect(() => {
+    // Set initial theme
+    document.documentElement.setAttribute("data-theme", theme);
+  }, [theme]);
+
+  // Scroll to bottom on mount
+  useEffect(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+
+  const toggleTheme = () => {
+    const newTheme = theme === "dark" ? "light" : "dark";
+    setTheme(newTheme);
+    document.documentElement.setAttribute("data-theme", newTheme);
+  };
+
+  const { messages, sendMessage, clearChatHistory } = useAgentChatHttp({
+    agent: "resumable-chat-agent",
+    enableResumableStreams: true
+  });
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      if (input.trim()) {
+        sendMessage({ role: "user", parts: [{ type: "text", text: input }] });
+        setInput("");
+      }
+    },
+    [input, sendMessage]
+  );
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInput(e.target.value);
+  };
+
+  // Scroll to bottom when messages change
+  useEffect(() => {
+    messages.length > 0 && scrollToBottom();
+  }, [messages, scrollToBottom]);
+
+  return (
+    <>
+      <div className="controls-container">
+        <button
+          type="button"
+          onClick={toggleTheme}
+          className="theme-switch"
+          data-theme={theme}
+          aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
+        >
+          <div className="theme-switch-handle" />
+        </button>
+        <button
+          type="button"
+          onClick={clearChatHistory}
+          className="clear-history"
+        >
+          🗑️ Clear History
+        </button>
+      </div>
+
+      <div className="chat-container">
+        <div className="messages-wrapper">
+          {messages?.map((m: Message) => (
+            <div key={m.id} className="message">
+              <strong>{`${m.role}: `}</strong>
+              {m.parts?.map((part, i) => {
+                switch (part.type) {
+                  case "text":
+                    return (
+                      // biome-ignore lint/suspicious/noArrayIndexKey: vibes
+                      <div key={i} className="message-content">
+                        {part.text}
+                      </div>
+                    );
+                }
+              })}
+              <br />
+            </div>
+          ))}
+          <div ref={messagesEndRef} />
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <input
+            className="chat-input"
+            value={input}
+            placeholder="Say something..."
+            onChange={handleInputChange}
+          />
+        </form>
+      </div>
+    </>
+  );
+}

examples/http-reusable-chat/src/app.tsx

@@ -0,0 +1,7 @@
+import "./styles.css";
+import { createRoot } from "react-dom/client";
+import App from "./app";
+
+const root = createRoot(document.getElementById("root")!);
+
+root.render(<App />);

examples/http-reusable-chat/src/client.tsx

@@ -0,0 +1,45 @@
+import { openai } from "@ai-sdk/openai";
+import { routeAgentRequest } from "agents";
+import { AIHttpChatAgent } from "agents/ai-chat-agent-http";
+import {
+  convertToModelMessages,
+  createUIMessageStream,
+  createUIMessageStreamResponse,
+  type StreamTextOnFinishCallback,
+  type ToolSet,
+  streamText
+} from "ai";
+
+type Env = {
+  OPENAI_API_KEY: string;
+};
+
+export class ResumableChatAgent extends AIHttpChatAgent<Env> {
+  async onChatMessage(
+    onFinish: StreamTextOnFinishCallback<ToolSet>,
+    options?: { streamId?: string }
+  ): Promise<Response | undefined> {
+    const stream = createUIMessageStream({
+      execute: async ({ writer }) => {
+        const result = streamText({
+          messages: convertToModelMessages(this.messages),
+          model: openai("gpt-4o"),
+          onFinish
+        });
+
+        writer.merge(result.toUIMessageStream());
+      }
+    });
+
+    return createUIMessageStreamResponse({ stream });
+  }
+}
+
+export default {
+  async fetch(request: Request, env: Env, _ctx: ExecutionContext) {
+    return (
+      (await routeAgentRequest(request, env)) ||
+      new Response("Not found", { status: 404 })
+    );
+  }
+} satisfies ExportedHandler<Env>;