cloudflare · zebp · Apr 30, 2025 · May 1, 2025
diff --git a/examples/observability-spa/@obs.html b/examples/observability-spa/@obs.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Observability SPA</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/observability/client.tsx"></script>
+  </body>
+</html>
diff --git a/examples/observability-spa/index.html b/examples/observability-spa/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Observability Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/application/client.tsx"></script>
+  </body>
+</html>
diff --git a/examples/observability-spa/package.json b/examples/observability-spa/package.json
@@ -0,0 +1,18 @@
+{
+  "author": "",
+  "description": "",
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.5",
+    "tailwindcss": "^4.1.5"
+  },
+  "keywords": [],
+  "license": "ISC",
+  "name": "@cloudflare/agents-observability-spa-example",
+  "private": true,
+  "scripts": {
+    "deploy": "vite build && wrangler deploy",
+    "start": "vite dev"
+  },
+  "type": "module",
+  "version": "0.0.0"
+}
diff --git a/examples/observability-spa/src/application/client.tsx b/examples/observability-spa/src/application/client.tsx
@@ -0,0 +1,15 @@
+import { createRoot } from "react-dom/client";
+import Chat from "./components/Chat";
+import "./styles.css";
+
+function App() {
+  return (
+    <div className="container">
+      <div className="col-span-1">
+        <Chat />
+      </div>
+    </div>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(<App />);
diff --git a/examples/observability-spa/src/application/components/Chat.css b/examples/observability-spa/src/application/components/Chat.css
@@ -0,0 +1,108 @@
+/* Chat Wrapper Styles */
+.chat-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 20px;
+}
+
+.tab-bar {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 20px;
+}
+
+.tab {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.tab:hover {
+  background-color: #e0e0e0;
+  color: #333;
+}
+
+.tab.active {
+  background-color: #007bff;
+  color: white;
+}
+
+/* Chat Room Styles */
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 80vh;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  width: 100%;
+}
+
+.messages-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.message {
+  margin-bottom: 16px;
+  padding: 12px;
+  border-radius: 8px;
+  background-color: #f5f5f5;
+  color: #333333;
+}
+
+.message-content {
+  margin-top: 8px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.chat-input {
+  width: 100%;
+  padding: 12px;
+  border: 2px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 16px;
+  background-color: #ffffff;
+  color: #333333;
+  transition: border-color 0.2s ease;
+  box-sizing: border-box;
+}
+
+.chat-input:focus {
+  outline: none;
+  border-color: #007bff;
+}
+
+.controls-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 12px;
+}
+
+.clear-history {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  color: #333333;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.clear-history:hover {
+  background-color: #e0e0e0;
+}
diff --git a/examples/observability-spa/src/application/components/Chat.tsx b/examples/observability-spa/src/application/components/Chat.tsx
@@ -0,0 +1,71 @@
+import type { Message } from "@ai-sdk/react";
+import "./Chat.css";
+import { useAgentChat } from "agents/ai-react";
+import { useAgent } from "agents/react";
+import { useCallback, useEffect, useRef } from "react";
+
+export default function Chat() {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, []);
+
+  // Scroll to bottom on mount
+  useEffect(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+
+  const agent = useAgent({
+    agent: "TestingAgent",
+    name: "chat",
+  });
+
+  const { messages, input, handleInputChange, handleSubmit } = useAgentChat({
+    agent,
+    maxSteps: 5,
+  });
+
+  // Scroll to bottom when messages change
+  useEffect(() => {
+    messages.length > 0 && scrollToBottom();
+  }, [messages, scrollToBottom]);
+
+  return (
+    <div className="chat-wrapper">
+      <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>
+                    );
+                  default:
+                    return null;
+                }
+              })}
+              <br />
+            </div>
+          ))}
+          <div ref={messagesEndRef} />
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <input
+            className="chat-input"
+            value={input}
+            placeholder="Say something..."
+            onChange={handleInputChange}
+          />
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/examples/observability-spa/src/application/styles.css b/examples/observability-spa/src/application/styles.css
@@ -0,0 +1,60 @@
+/* Global styles */
+body {
+  margin: 0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, sans-serif;
+  background-color: #f5f5f5;
+}
+
+/* Global container style */
+.container {
+  max-width: 800px;
+  margin: 40px auto;
+  padding: 0 20px;
+}
+
+/* Global toast notifications */
+.toasts-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.toast {
+  min-width: 200px;
+  padding: 12px 24px;
+  border-radius: 6px;
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  animation: slideIn 0.3s ease-out forwards;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.toast-success {
+  background-color: #28a745;
+}
+
+.toast-error {
+  background-color: #dc3545;
+}
+
+.toast-info {
+  background-color: #17a2b8;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
diff --git a/examples/observability-spa/src/observability/client.tsx b/examples/observability-spa/src/observability/client.tsx
@@ -0,0 +1,12 @@
+import { createRoot } from "react-dom/client";
+import "./styles.css";
+
+function App() {
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <h1 className="text-4xl font-bold mb-4">Observability</h1>
+    </div>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(<App />);
diff --git a/examples/observability-spa/src/observability/styles.css b/examples/observability-spa/src/observability/styles.css
@@ -0,0 +1 @@
+@import "tailwindcss";