experimental-a2 0.8.0 → 0.9.0

package/examples/playground/app/chat/[chatId]/agent-stream-drawer.tsx

@@ -0,0 +1,316 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import type { ChatAgentMessage, ChatAgentStep } from '../model'
+import type { AgentStreamSelection } from './chat-view'
+
+const json = (value: unknown): string =>
+  JSON.stringify(value, null, 2) ?? String(value)
+
+const toolStateLabel = (state: string): string => {
+  switch (state) {
+    case 'input-streaming':
+      return 'streaming input'
+    case 'input-available':
+      return 'running'
+    case 'approval-requested':
+      return 'awaiting approval'
+    case 'approval-responded':
+      return 'approval received'
+    case 'output-available':
+      return 'completed'
+    case 'output-error':
+      return 'failed'
+    case 'output-denied':
+      return 'denied'
+    default:
+      return state
+  }
+}
+
+export type AgentStreamStatus =
+  'streaming' | 'completed' | 'failed' | 'interrupted'
+
+function StreamPart({
+  part,
+  position,
+}: {
+  part: ChatAgentMessage['parts'][number]
+  position: number
+}): ReactNode {
+  if (part.type === 'step-start') {
+    return (
+      <div className="agent-stream-step" role="separator">
+        <span>Model step</span>
+      </div>
+    )
+  }
+
+  if (part.type === 'text' || part.type === 'reasoning') {
+    return (
+      <section className={`agent-stream-part ${part.type}`}>
+        <header>
+          <span>{part.type === 'reasoning' ? 'Reasoning' : 'Model text'}</span>
+          <span className="agent-stream-part-state">
+            {part.state ?? 'done'} · not posted
+          </span>
+        </header>
+        {part.text ? (
+          <p>{part.text}</p>
+        ) : (
+          <p className="hint">
+            {part.state === 'streaming'
+              ? 'Waiting for content…'
+              : 'No text was emitted.'}
+          </p>
+        )}
+        {part.providerMetadata === undefined ? null : (
+          <details>
+            <summary>Provider metadata</summary>
+            <pre>{json(part.providerMetadata)}</pre>
+          </details>
+        )}
+      </section>
+    )
+  }
+
+  if (part.type === 'tool-post') {
+    const output = 'output' in part ? part.output : undefined
+    const errorText = 'errorText' in part ? part.errorText : undefined
+    return (
+      <section className="agent-stream-part tool">
+        <header>
+          <span>
+            Tool <code>post</code>
+          </span>
+          <span className="agent-stream-part-state">
+            {toolStateLabel(part.state)}
+          </span>
+        </header>
+        <div className="agent-stream-value">
+          <span>Input</span>
+          <pre>{json(part.input)}</pre>
+        </div>
+        {output === undefined ? null : (
+          <div className="agent-stream-value">
+            <span>Result</span>
+            <pre>{json(output)}</pre>
+          </div>
+        )}
+        {errorText === undefined ? null : <p className="error">{errorText}</p>}
+      </section>
+    )
+  }
+
+  if (part.type === 'source-url') {
+    return (
+      <section className="agent-stream-part source">
+        <header>
+          <span>Source</span>
+        </header>
+        <a href={part.url} target="_blank" rel="noreferrer">
+          {part.title ?? part.url}
+        </a>
+      </section>
+    )
+  }
+
+  if (part.type === 'source-document') {
+    return (
+      <section className="agent-stream-part source">
+        <header>
+          <span>Document source</span>
+        </header>
+        <p>{part.title}</p>
+        <code>{part.filename ?? part.mediaType}</code>
+      </section>
+    )
+  }
+
+  if (part.type === 'file' || part.type === 'reasoning-file') {
+    return (
+      <section className="agent-stream-part source">
+        <header>
+          <span>{part.type === 'file' ? 'File' : 'Reasoning file'}</span>
+        </header>
+        <a href={part.url} target="_blank" rel="noreferrer">
+          {'filename' in part && part.filename ? part.filename : part.mediaType}
+        </a>
+      </section>
+    )
+  }
+
+  return (
+    <section className="agent-stream-part extended">
+      <header>
+        <span>{part.type}</span>
+        <span className="agent-stream-part-state">part {position + 1}</span>
+      </header>
+      <pre>{json(part)}</pre>
+    </section>
+  )
+}
+
+function StepMetadata({ step }: { step: ChatAgentStep }): ReactNode {
+  return (
+    <article className="agent-stream-generation">
+      <header>
+        <code>{step.model}</code>
+        <span>{step.finishReason}</span>
+      </header>
+      <dl>
+        <dt>Generation</dt>
+        <dd>
+          <code>{step.generationId}</code>
+        </dd>
+        <dt>Completed</dt>
+        <dd>{new Date(step.completedAt).toLocaleString()}</dd>
+        <dt>Tokens</dt>
+        <dd>{(step.usage.totalTokens ?? 0).toLocaleString()}</dd>
+      </dl>
+      <details>
+        <summary>Full AI SDK usage</summary>
+        <pre>{json(step.usage)}</pre>
+      </details>
+    </article>
+  )
+}
+
+export function AgentStreamDrawer({
+  responseMessageId,
+  selection,
+  summary,
+  status,
+  onClose,
+}: {
+  responseMessageId: string | null
+  selection: AgentStreamSelection | null
+  summary: string | null
+  status: AgentStreamStatus
+  onClose: () => void
+}): ReactNode {
+  const dialogRef = useRef<HTMLDialogElement>(null)
+  const [rawOpen, setRawOpen] = useState(false)
+
+  useEffect(() => {
+    const dialog = dialogRef.current
+    if (!dialog) return
+    if (responseMessageId && !dialog.open) dialog.showModal()
+    if (!responseMessageId && dialog.open) dialog.close()
+  }, [responseMessageId])
+
+  useEffect(() => setRawOpen(false), [responseMessageId])
+
+  return (
+    <dialog
+      id="agent-stream-drawer"
+      ref={dialogRef}
+      className="agent-stream-drawer"
+      aria-labelledby="agent-stream-title"
+      onCancel={(event) => {
+        event.preventDefault()
+        onClose()
+      }}
+      onKeyDown={(event) => {
+        if (event.key === 'Escape') {
+          event.preventDefault()
+          onClose()
+        }
+      }}
+      onClose={onClose}
+      onClick={(event) => {
+        if (event.target === event.currentTarget) onClose()
+      }}
+    >
+      <div className="agent-stream-drawer-shell">
+        <header className="agent-stream-drawer-header">
+          <div>
+            <p className="eyebrow">Private model output</p>
+            <h2 id="agent-stream-title">Agent stream</h2>
+            <p>{summary ?? 'Waiting for stream metadata…'}</p>
+          </div>
+          <button
+            type="button"
+            className="secondary compact agent-stream-close"
+            aria-label="Close agent stream"
+            autoFocus
+            onClick={onClose}
+          >
+            Close
+          </button>
+        </header>
+
+        <div className="agent-stream-drawer-body">
+          <div className="agent-stream-identity">
+            <span
+              className={`badge${
+                status === 'streaming'
+                  ? ' live'
+                  : status === 'failed' || status === 'interrupted'
+                    ? ' cut'
+                    : ' done'
+              }`}
+            >
+              {status}
+            </span>
+            {responseMessageId ? <code>{responseMessageId}</code> : null}
+          </div>
+
+          {selection === null ? (
+            <p className="agent-stream-empty">The stream is starting…</p>
+          ) : (
+            <>
+              <section className="agent-stream-section">
+                <h3>Ordered UI message parts</h3>
+                <p className="hint">
+                  This is the complete projected stream. Only successful{' '}
+                  <code>post</code> calls appear in the room.
+                </p>
+                <div className="agent-stream-parts">
+                  {selection.parts.length === 0 ? (
+                    <p className="agent-stream-empty">
+                      No stream parts have arrived yet.
+                    </p>
+                  ) : (
+                    selection.parts.map((part, position) => (
+                      <StreamPart
+                        key={`${responseMessageId ?? 'stream'}:${position}`}
+                        part={part}
+                        position={position}
+                      />
+                    ))
+                  )}
+                </div>
+              </section>
+
+              <section className="agent-stream-section">
+                <h3>Generation metadata</h3>
+                {selection.metadata?.steps.length ? (
+                  <div className="agent-stream-generations">
+                    {selection.metadata.steps.map((step) => (
+                      <StepMetadata key={step.generationId} step={step} />
+                    ))}
+                  </div>
+                ) : (
+                  <p className="agent-stream-empty">
+                    No model step has completed yet.
+                  </p>
+                )}
+              </section>
+
+              <details
+                className="agent-stream-raw"
+                open={rawOpen}
+                onToggle={(event) => setRawOpen(event.currentTarget.open)}
+              >
+                <summary>Raw extended UIMessage</summary>
+                {rawOpen ? <pre>{json(selection.message)}</pre> : null}
+              </details>
+            </>
+          )}
+        </div>
+      </div>
+    </dialog>
+  )
+}