Prompt composer

'use client';

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

const PROMPT = 'Summarize the notes from the Tuesday design review';
const MODELS: ModelOption[] = [
  {
    id: 'pro',
    name: 'Lumen 2 Pro',
    description: 'Best for hard, long tasks',
    speed: 1,
    intelligence: 3,
    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',
  atlas: 'M8.667 1.333 2.667 9.333H8l-.667 5.334 6-8H8z',
};
const REASON = "You reached today's message limit. You can send more tomorrow.";

/** 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 PromptComposerDemo({ replay = 0 }: { replay?: number }) {
  const [text, setText] = React.useState('');
  const [status, setStatus] = React.useState<ComposerStatus>('ready');
  const [model, setModel] = React.useState('pro');
  const [effort, setEffort] = React.useState('High');
  const [files, setFiles] = React.useState<{ id: number; name: string }[]>([]);
  const fileIds = React.useRef(0);
  const timers = React.useRef<number[]>([]);

  const clear = React.useCallback(() => {
    for (const timer of timers.current) window.clearTimeout(timer);
    timers.current = [];
  }, []);
  React.useEffect(() => clear, [clear]);

  // A fake answer: wait, stream, then ready again.
  const submit = React.useCallback(() => {
    clear();
    setText('');
    setFiles([]);
    setStatus('submitted');
    timers.current.push(window.setTimeout(() => setStatus('streaming'), 900));
    timers.current.push(window.setTimeout(() => setStatus('ready'), 3200));
  }, [clear]);

  React.useEffect(() => {
    if (replay === 0) return;
    clear();
    setStatus('ready');
    setText('');
    timers.current.push(window.setTimeout(() => setText(PROMPT), 300));
    timers.current.push(window.setTimeout(submit, 1000));
  }, [replay, clear, submit]);

  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <PromptComposer
        value={text}
        status={status}
        maxLength={500}
        onValueChange={setText}
        onSubmit={submit}
        onStop={() => {
          clear();
          setStatus('ready');
        }}
        onFilesSelected={(picked) =>
          setFiles((list) => [...list, ...picked.map((f) => ({ id: ++fileIds.current, name: f.name }))])
        }
        toolbar={
          <ModelPicker
            models={MODELS}
            value={model}
            effort={effort}
            onValueChange={setModel}
            onEffortChange={setEffort}
            renderIcon={(option) => (
              <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>
            )}
          />
        }
        attachments={files.map((file) => (
          <FileChip
            key={file.id}
            name={file.name}
            onRemove={() => setFiles((list) => list.filter((f) => f.id !== file.id))}
          />
        ))}
      />
      <PromptComposer disabled disabledReason={REASON} />
    </div>
  );
}