dopus 0.0.0-stage → 0.2.0

package/templates/ui/agent-chat.module.css

@@ -0,0 +1,255 @@
+/* Styles for agent-chat.tsx. Copied by `dopus init`; yours to edit. Theme with the --dopus-* variables. */
+.chat {
+  --dopus-bg: #ffffff;
+  --dopus-fg: #18181b;
+  --dopus-muted: #71717a;
+  --dopus-border: #e4e4e7;
+  --dopus-surface: #f4f4f5;
+  --dopus-accent: #18181b;
+  --dopus-accent-fg: #ffffff;
+  --dopus-danger: #b91c1c;
+  --dopus-radius: 12px;
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 320px;
+  background: var(--dopus-bg);
+  color: var(--dopus-fg);
+  border: 1px solid var(--dopus-border);
+  border-radius: var(--dopus-radius);
+  font:
+    14px / 1.5 system-ui,
+    -apple-system,
+    "Segoe UI",
+    sans-serif;
+  overflow: hidden;
+}
+
+@media (prefers-color-scheme: dark) {
+  .chat {
+    --dopus-bg: #18181b;
+    --dopus-fg: #f4f4f5;
+    --dopus-muted: #a1a1aa;
+    --dopus-border: #3f3f46;
+    --dopus-surface: #27272a;
+    --dopus-accent: #f4f4f5;
+    --dopus-accent-fg: #18181b;
+    --dopus-danger: #f87171;
+  }
+}
+
+.header {
+  padding: 12px 16px;
+  font-weight: 600;
+  border-bottom: 1px solid var(--dopus-border);
+}
+
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.message {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 85%;
+}
+
+.message[data-role="user"] {
+  align-self: flex-end;
+  align-items: flex-end;
+}
+
+.text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.message[data-role="user"] .text {
+  background: var(--dopus-accent);
+  color: var(--dopus-accent-fg);
+  padding: 8px 12px;
+  border-radius: var(--dopus-radius);
+}
+
+.tool {
+  font-size: 13px;
+  color: var(--dopus-muted);
+  background: var(--dopus-surface);
+  border-radius: 8px;
+  padding: 6px 10px;
+}
+
+.tool summary {
+  cursor: pointer;
+}
+
+.tool[data-state="error"] {
+  color: var(--dopus-danger);
+}
+
+.approval {
+  margin: 0;
+  min-inline-size: 0;
+  border: 1px solid var(--dopus-border);
+  border-radius: var(--dopus-radius);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.approvalTitle {
+  float: left;
+  width: 100%;
+  padding: 0;
+  font-weight: 600;
+}
+
+.approvalActions {
+  display: flex;
+  gap: 8px;
+}
+
+.json {
+  margin: 0;
+  font:
+    12px / 1.4 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  max-height: 200px;
+  overflow: auto;
+}
+
+.thinking {
+  color: var(--dopus-muted);
+}
+
+.error {
+  color: var(--dopus-danger);
+}
+
+.suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.suggestion {
+  border: 1px solid var(--dopus-border);
+  background: transparent;
+  color: inherit;
+  border-radius: 999px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font: inherit;
+}
+
+.form {
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  border-top: 1px solid var(--dopus-border);
+}
+
+.input {
+  flex: 1;
+  resize: none;
+  border: 1px solid var(--dopus-border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  font: inherit;
+  background: var(--dopus-bg);
+  color: inherit;
+  max-height: 160px;
+}
+
+.primary,
+.secondary {
+  border-radius: 8px;
+  padding: 8px 14px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.primary {
+  background: var(--dopus-accent);
+  color: var(--dopus-accent-fg);
+  border: 1px solid var(--dopus-accent);
+}
+
+.primary:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.secondary {
+  background: transparent;
+  color: inherit;
+  border: 1px solid var(--dopus-border);
+}
+
+.link {
+  background: none;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+  font: inherit;
+}
+
+.spinner {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: dopus-spin 0.8s linear infinite;
+  vertical-align: -1px;
+}
+
+@keyframes dopus-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.widget {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.panel {
+  width: min(400px, calc(100vw - 40px));
+  height: min(600px, calc(100vh - 120px));
+  box-shadow: 0 12px 40px rgb(0 0 0 / 0.18);
+}
+
+.launcher {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  border: 0;
+  background: #18181b;
+  color: #ffffff;
+  font-size: 22px;
+  cursor: pointer;
+  box-shadow: 0 6px 20px rgb(0 0 0 / 0.2);
+}

package/templates/ui/agent-chat.tsx

@@ -0,0 +1,294 @@
+'use client'
+
+/**
+ * Chat UI for the dopus agent. Copied by `dopus init`; this file is yours to edit.
+ * Talks to POST /api/agent with the AI SDK `useChat` protocol. Styles: ./agent-chat.module.css
+ */
+import { useChat } from '@ai-sdk/react'
+import {
+  DefaultChatTransport,
+  getToolName,
+  isToolUIPart,
+  lastAssistantMessageIsCompleteWithApprovalResponses,
+  type UIMessage,
+} from 'ai'
+import { type FormEvent, type KeyboardEvent, useEffect, useRef, useState } from 'react'
+import styles from './agent-chat.module.css'
+
+const DEFAULT_LABELS = {
+  title: 'Assistant',
+  placeholder: 'Ask anything…',
+  send: 'Send',
+  stop: 'Stop',
+  retry: 'Retry',
+  error: 'Something went wrong.',
+  thinking: 'Thinking…',
+  running: 'Running',
+  needsApproval: 'Needs your approval',
+  approve: 'Approve',
+  decline: 'Decline',
+  approved: 'Approved',
+  declined: 'Declined',
+  failed: 'Failed',
+  details: 'Details',
+  open: 'Open assistant',
+  close: 'Close assistant',
+}
+
+export type AgentChatLabels = typeof DEFAULT_LABELS
+
+export interface AgentChatProps {
+  /** Route created by `dopus init`. */
+  api?: string
+  labels?: Partial<AgentChatLabels>
+  /** Example prompts shown before the first message. */
+  suggestions?: string[]
+  className?: string
+}
+
+type ToolPart = Extract<UIMessage['parts'][number], { toolCallId: string }>
+
+/** `cancelOrder` → `Cancel order` */
+function humanize(name: string) {
+  const words = name
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[_-]+/g, ' ')
+    .toLowerCase()
+  return words.charAt(0).toUpperCase() + words.slice(1)
+}
+
+function Json({ value }: { value: unknown }) {
+  return <pre className={styles.json}>{JSON.stringify(value, null, 2)}</pre>
+}
+
+function ToolCall({
+  part,
+  labels,
+  onRespond,
+}: {
+  part: ToolPart
+  labels: AgentChatLabels
+  onRespond: (approvalId: string, approved: boolean) => void
+}) {
+  const name = humanize(getToolName(part))
+
+  switch (part.state) {
+    case 'input-streaming':
+    case 'input-available':
+      return (
+        <div className={styles.tool} data-state="running">
+          <span className={styles.spinner} aria-hidden /> {labels.running}: {name}
+        </div>
+      )
+    case 'approval-requested':
+      return (
+        <fieldset className={styles.approval}>
+          <legend className={styles.approvalTitle}>
+            {name} · {labels.needsApproval}
+          </legend>
+          <Json value={part.input} />
+          <div className={styles.approvalActions}>
+            <button
+              type="button"
+              className={styles.primary}
+              onClick={() => onRespond(part.approval.id, true)}
+            >
+              {labels.approve}
+            </button>
+            <button
+              type="button"
+              className={styles.secondary}
+              onClick={() => onRespond(part.approval.id, false)}
+            >
+              {labels.decline}
+            </button>
+          </div>
+        </fieldset>
+      )
+    case 'approval-responded':
+      return (
+        <div className={styles.tool} data-state={part.approval.approved ? 'running' : 'declined'}>
+          {part.approval.approved ? `${labels.approved}: ${name}` : `${labels.declined}: ${name}`}
+        </div>
+      )
+    case 'output-available':
+      return (
+        <details className={styles.tool} data-state="done">
+          <summary>✓ {name}</summary>
+          <Json value={part.output} />
+        </details>
+      )
+    case 'output-error':
+      return (
+        <div className={styles.tool} data-state="error">
+          ✗ {name} · {labels.failed}
+        </div>
+      )
+    case 'output-denied':
+      return (
+        <div className={styles.tool} data-state="declined">
+          {labels.declined}: {name}
+        </div>
+      )
+    default:
+      return null
+  }
+}
+
+function Message({
+  message,
+  labels,
+  onRespond,
+}: {
+  message: UIMessage
+  labels: AgentChatLabels
+  onRespond: (approvalId: string, approved: boolean) => void
+}) {
+  return (
+    <div className={styles.message} data-role={message.role}>
+      {message.parts.map((part, index) => {
+        const key = `${message.id}-${index}`
+        if (part.type === 'text') {
+          return part.text ? (
+            <div key={key} className={styles.text}>
+              {part.text}
+            </div>
+          ) : null
+        }
+        if (isToolUIPart(part)) {
+          return <ToolCall key={key} part={part} labels={labels} onRespond={onRespond} />
+        }
+        return null
+      })}
+    </div>
+  )
+}
+
+export function AgentChat({
+  api = '/api/agent',
+  labels: labelOverrides,
+  suggestions = [],
+  className,
+}: AgentChatProps) {
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides }
+  const [transport] = useState(
+    () =>
+      new DefaultChatTransport({
+        api,
+        // Untrusted hints for the prompt; the server only accepts `locale` and `page`.
+        body: () => ({ context: { page: window.location.pathname, locale: navigator.language } }),
+      }),
+  )
+  const { messages, sendMessage, status, stop, error, regenerate, addToolApprovalResponse } =
+    useChat({
+      transport,
+      sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
+    })
+  const [input, setInput] = useState('')
+  const listRef = useRef<HTMLDivElement>(null)
+  const busy = status === 'submitted' || status === 'streaming'
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: scroll whenever messages change
+  useEffect(() => {
+    listRef.current?.scrollTo({ top: listRef.current.scrollHeight, behavior: 'smooth' })
+  }, [messages])
+
+  function send(text: string) {
+    const trimmed = text.trim()
+    if (!trimmed || busy) return
+    sendMessage({ text: trimmed })
+    setInput('')
+  }
+
+  function onSubmit(event: FormEvent) {
+    event.preventDefault()
+    send(input)
+  }
+
+  function onKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
+    // Enter sends, Shift+Enter adds a line. Ignore Enter while an IME (Korean, Japanese…) is composing.
+    if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
+      event.preventDefault()
+      send(input)
+    }
+  }
+
+  const respond = (id: string, approved: boolean) => addToolApprovalResponse({ id, approved })
+
+  return (
+    <section
+      className={[styles.chat, className].filter(Boolean).join(' ')}
+      aria-label={labels.title}
+    >
+      <header className={styles.header}>{labels.title}</header>
+      <div ref={listRef} className={styles.messages} aria-live="polite">
+        {messages.length === 0 && suggestions.length > 0 && (
+          <div className={styles.suggestions}>
+            {suggestions.map((text) => (
+              <button
+                key={text}
+                type="button"
+                className={styles.suggestion}
+                onClick={() => send(text)}
+              >
+                {text}
+              </button>
+            ))}
+          </div>
+        )}
+        {messages.map((message) => (
+          <Message key={message.id} message={message} labels={labels} onRespond={respond} />
+        ))}
+        {status === 'submitted' && <div className={styles.thinking}>{labels.thinking}</div>}
+        {error && (
+          <div className={styles.error} role="alert">
+            {labels.error}{' '}
+            <button type="button" className={styles.link} onClick={() => regenerate()}>
+              {labels.retry}
+            </button>
+          </div>
+        )}
+      </div>
+      <form className={styles.form} onSubmit={onSubmit}>
+        <textarea
+          className={styles.input}
+          value={input}
+          onChange={(event) => setInput(event.target.value)}
+          onKeyDown={onKeyDown}
+          placeholder={labels.placeholder}
+          rows={1}
+          aria-label={labels.placeholder}
+        />
+        {busy ? (
+          <button type="button" className={styles.secondary} onClick={() => stop()}>
+            {labels.stop}
+          </button>
+        ) : (
+          <button type="submit" className={styles.primary} disabled={!input.trim()}>
+            {labels.send}
+          </button>
+        )}
+      </form>
+    </section>
+  )
+}
+
+/** Floating button that opens the chat in a panel. Put it once in your root layout. */
+export function AgentWidget(props: AgentChatProps) {
+  const [open, setOpen] = useState(false)
+  const labels = { ...DEFAULT_LABELS, ...props.labels }
+  return (
+    <div className={styles.widget}>
+      {open && <AgentChat {...props} className={styles.panel} />}
+      <button
+        type="button"
+        className={styles.launcher}
+        aria-expanded={open}
+        aria-label={open ? labels.close : labels.open}
+        onClick={() => setOpen((value) => !value)}
+      >
+        {open ? '×' : '✦'}
+      </button>
+    </div>
+  )
+}