Agent composer

'use client';

import * as React from 'react';
import type { ModelOption } from '../model-picker/model-picker';
import type { ComposerStatus } from '../prompt-composer/prompt-composer';
import { AgentComposer } from './agent-composer';

const MODELS: ModelOption[] = [
  {
    id: 'pro',
    name: 'Lumen 2 Pro',
    description: 'Best for hard, long tasks',
    speed: 1,
    intelligence: 3,
    reasoning: true,
  },
  {
    id: 'orbit',
    name: 'Orbit 5',
    description: 'Fast and smart for most work',
    speed: 2,
    intelligence: 2,
    reasoning: true,
  },
  {
    id: 'atlas',
    name: 'Atlas Fast',
    description: 'Quick answers to simple questions',
    speed: 3,
    intelligence: 1,
  },
];
const MARKS: Record<string, string> = {
  pro: 'M6.667 2 7.6 5.067 10.667 6 7.6 6.933 6.667 10 5.733 6.933 2.667 6l3.066-.933zM11.667 9.333l.5 1.5 1.5.5-1.5.5-.5 1.5-.5-1.5-1.5-.5 1.5-.5z',
  orbit: 'M8 1.667 13.5 4.833v6.334L8 14.333 2.5 11.167V4.833z',
  atlas: 'M8.667 1.333 2.667 9.333H8l-.667 5.334 6-8H8z',
};
const PROMPT = 'Add a coupon field to the checkout page and show the discount';
const FILES = ['checkout.tsx', 'coupon-rules.pdf'];

/** A plain file chip for the demo; apps put their own attachment chips in the slot. */
function FileChip({ name, onRemove }: { name: string; onRemove: () => void }) {
  return (
    <span className="inline-flex h-8 max-w-60 items-center gap-1 rounded-lg border border-secondary bg-primary_alt ps-2.5 pe-1 text-xs font-medium text-secondary">
      <span className="truncate">{name}</span>
      <button
        type="button"
        aria-label={`Remove ${name}`}
        className="inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-fg-quaternary outline-none hover:bg-tertiary hover:text-fg-secondary focus-visible:shadow-focus-ring"
        onClick={onRemove}
      >
        <svg
          aria-hidden="true"
          viewBox="0 0 16 16"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          className="size-3.5"
        >
          <path d="M12 4 4 12M4 4l8 8" />
        </svg>
      </button>
    </span>
  );
}

export default function AgentComposerDemo({ replay = 0 }: { replay?: number }) {
  const [text, setText] = React.useState('');
  const [status, setStatus] = React.useState<ComposerStatus>('ready');
  const [files, setFiles] = React.useState<string[]>(FILES);
  const [model, setModel] = React.useState('pro');
  const [effort, setEffort] = React.useState('High');
  const [branch, setBranch] = React.useState('main');
  const [used, setUsed] = React.useState(84_000);
  const [listening, setListening] = React.useState(false);
  const timers = React.useRef<number[]>([]);

  const clear = React.useCallback(() => {
    for (const timer of timers.current) window.clearTimeout(timer);
    timers.current = [];
  }, []);
  React.useEffect(() => clear, [clear]);
  const later = (ms: number, run: () => void) => timers.current.push(window.setTimeout(run, ms));

  // A fake run: wait, stream while the agent switches branch and reads more context, then ready.
  const submit = () => {
    clear();
    setText('');
    setFiles([]);
    setStatus('submitted');
    later(900, () => {
      setStatus('streaming');
      setBranch('feat/coupons');
      setUsed(168_000);
    });
    later(3400, () => setStatus('ready'));
  };
  const submitRef = React.useRef(submit);
  submitRef.current = submit;

  React.useEffect(() => {
    if (replay === 0) return;
    for (const timer of timers.current) window.clearTimeout(timer);
    timers.current = [];
    setStatus('ready');
    setBranch('main');
    setUsed(84_000);
    setFiles(FILES);
    setText('');
    timers.current.push(window.setTimeout(() => setText(PROMPT), 300));
    timers.current.push(window.setTimeout(() => submitRef.current(), 1100));
  }, [replay]);

  return (
    <div className="flex min-h-[420px] w-full max-w-[640px] flex-col justify-end">
      <AgentComposer
        value={text}
        status={status}
        branch={branch}
        folder="web-app"
        context={{ used, limit: 200_000 }}
        models={MODELS}
        model={model}
        effort={effort}
        listening={listening}
        onValueChange={setText}
        onSubmit={submit}
        onStop={() => {
          clear();
          setStatus('ready');
        }}
        onModelChange={setModel}
        onEffortChange={setEffort}
        onFilesSelected={(picked) => setFiles((list) => [...list, ...picked.map((f) => f.name)])}
        onVoice={() => setListening((on) => !on)}
        renderIcon={(option, kind) =>
          kind === 'model' ? (
            <svg
              aria-hidden="true"
              viewBox="0 0 16 16"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d={MARKS[option.id]} />
            </svg>
          ) : undefined
        }
        attachments={files.map((name) => (
          <FileChip
            key={name}
            name={name}
            onRemove={() => setFiles((list) => list.filter((f) => f !== name))}
          />
        ))}
      />
    </div>
  );
}