refactor(agent-streaming): Create React components

- chore: Add React dependencies
- chore: Update configs for React
- refactor: Create React types
- refactor: Create ThoughtBox component
- refactor: Create MessageBubble component
- refactor: Create ChatInput component
- refactor: Create App component

Author: agduan

agent-streaming/package-lock.json

@@ -20,12 +20,17 @@
     "express": "^5.2.1",
     "genkit": "^1.36.0",
     "helmet": "^8.2.0",
-    "marked": "^18.0.5"
+    "marked": "^18.0.5",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
     "@types/express": "^5.0.6",
     "@types/node": "^25.9.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
     "tsx": "^4.22.4",
     "typescript": "^6.0.3",
     "vite": "^8.0.16"

agent-streaming/package.json

@@ -0,0 +1,51 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+interface ChatInputProps {
+  onSubmit: (prompt: string) => void;
+  disabled: boolean;
+}
+
+export const ChatInput: React.FC<ChatInputProps> = ({ onSubmit, disabled }) => {
+  const [input, setInput] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmed = input.trim();
+    if (trimmed && !disabled) {
+      onSubmit(trimmed);
+      setInput('');
+    }
+  };
+
+  // Keep focus on input when transition completes or loading ends
+  useEffect(() => {
+    if (!disabled) {
+      inputRef.current?.focus();
+    }
+  }, [disabled]);
+
+  return (
+    <form className="chat-input-form" onSubmit={handleSubmit}>
+      <input
+        ref={inputRef}
+        type="text"
+        placeholder="Type a message..."
+        autoComplete="off"
+        required
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        disabled={disabled}
+      />
+      <button
+        type="submit"
+        aria-label="Send message"
+        disabled={disabled || !input.trim()}
+      >
+        <svg viewBox="0 0 24 24" width="24" height="24">
+          <path fill="currentColor" d="M2,21L23,12L2,3V10L17,12L2,14V21Z" />
+        </svg>
+      </button>
+    </form>
+  );
+};

agent-streaming/src/client/components/ChatInput.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+
+import { TextMessage, ErrorMessage } from '../types.js';
+
+type MessageBubbleProps = TextMessage | ErrorMessage;
+
+export const MessageBubble: React.FC<MessageBubbleProps> = ({ role, type, content }) => {
+  const sanitizedHtml = useMemo(() => {
+    if (role === 'model' && type === 'text') {
+      try {
+        const rawHtml = marked.parse(content, { breaks: true }) as string;
+        return DOMPurify.sanitize(rawHtml);
+      } catch (err) {
+        console.error('Markdown parsing/sanitization error:', err);
+      }
+    }
+
+    // Content shouldn't be, or can't be, converted to HTML
+    return null;
+  }, [content, role, type]);
+
+  // Determine container classes
+  let containerClass = 'message';
+  if (role === 'user') {
+    containerClass += ' user-message';
+  } else if (role === 'model') {
+    containerClass += ' model-message';
+  } else if (role === 'system') {
+    containerClass += ' system-message';
+    if (type === 'error') {
+      containerClass += ' error';
+    }
+  }
+
+  return (
+    <div className={containerClass}>
+      {role === 'model' && type === 'text' && sanitizedHtml ? (
+        <div
+          className="message-content"
+          dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
+        />
+      ) : (
+        <div className="message-content">{content}</div>
+      )}
+    </div>
+  );
+};

agent-streaming/src/client/components/MessageBubble.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+
+interface ThoughtBoxProps {
+  content: string;
+  stepName?: string;
+}
+
+export const ThoughtBox: React.FC<ThoughtBoxProps> = ({ content, stepName }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const activeStep = stepName || 'Thinking';
+
+  return (
+    <div className="message thought-message">
+      <div className="thought-box">
+        <div className="thought-header">
+          {/* Use key={activeStep} on indicator and label to trigger a re-animation on step change */}
+          <div key={`indicator-${activeStep}`} className="thought-indicator indicator-animate" />
+          <div key={`label-${activeStep}`} className="thought-step-label step-animate">
+            Thinking: {activeStep}
+          </div>
+        </div>
+        <details
+          className="thought-details"
+          onToggle={(e) => setIsOpen(e.currentTarget.open)}
+        >
+          <summary className="thought-summary">
+            <span className="summary-text">
+              {isOpen ? 'Hide Full Reasoning' : 'Show Full Reasoning'}
+            </span>
+          </summary>
+          <div className="thought-body">{content}</div>
+        </details>
+      </div>
+    </div>
+  );
+};

agent-streaming/src/client/components/ThoughtBox.tsx

@@ -0,0 +1,32 @@
+export interface StreamChunk {
+  messageId: string;
+  type: 'thought' | 'text' | 'error';
+  content: string;
+  currentStep?: string;
+}
+
+export interface BaseMessage {
+  id: string;
+}
+
+export interface TextMessage extends BaseMessage {
+  type: 'text';
+  role: 'user' | 'model' | 'system';
+  content: string;
+}
+
+export interface ThoughtMessage extends BaseMessage {
+  type: 'thought';
+  role: 'model';
+  content: string;
+  stepName?: string; // For thought cards
+}
+
+export interface ErrorMessage extends BaseMessage {
+  type: 'error';
+  role: 'system';
+  content: string;
+}
+
+export type Message = TextMessage | ThoughtMessage | ErrorMessage;
+

agent-streaming/src/client/types.ts

@@ -16,7 +16,8 @@
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true
+    "noEmit": true,
+    "jsx": "react-jsx"
   },
   "include": [
     "src"

agent-streaming/tsconfig.json

@@ -1,6 +1,8 @@
 import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 export default defineConfig({
+  plugins: [react()],
   server: {
     // Port for the Vite development frontend server
     port: 5173,