Composer

1'use client';
2
3import { useState } from 'react';
4import { Composer, type ComposerMessage } from '@/components/ui/composer';
5
6const MODELS = [
7  { id: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash', description: 'Fast, cheap, most turns' },
8  { id: 'gemini-2.5-pro', label: 'Gemini 2.5 Pro', description: 'Slower, for hard questions' },
9  { id: 'claude-sonnet-5', label: 'Claude Sonnet 5', description: 'Long context, careful' },
10];
11
12const SUGGESTIONS = ['What is NachUI?', 'Install the CLI', 'Show me a chat example'];
13
14export function Default() {
15  const [model, setModel] = useState(MODELS[0]?.id ?? '');
16  const [sent, setSent] = useState<ComposerMessage | null>(null);
17
18  return (
19    <div className="flex w-full max-w-lg flex-col gap-3">
20      <Composer
21        onSend={setSent}
22        suggestions={SUGGESTIONS}
23        models={MODELS}
24        model={model}
25        onModelChange={setModel}
26        context={{ used: 12400, max: 128000 }}
27        placeholder="Ask about any component…"
28      />
29      {sent && (
30        <p className="text-muted-foreground text-xs">
31          Sent “{sent.text}” with {sent.files.length} file{sent.files.length === 1 ? '' : 's'}
32        </p>
33      )}
34    </div>
35  );
36}

1'use client';
2
3import { useEffect, useRef, useState } from 'react';
4import { Composer, type ComposerStatus } from '@/components/ui/composer';
5
6export function Streaming() {
7  const [status, setStatus] = useState<ComposerStatus>('ready');
8  const [last, setLast] = useState<string | null>(null);
9  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
10
11  useEffect(() => {
12    return () => {
13      if (timer.current) clearTimeout(timer.current);
14    };
15  }, []);
16
17  const stop = () => {
18    if (timer.current) clearTimeout(timer.current);
19    setStatus('ready');
20  };
21
22  return (
23    <div className="flex w-full max-w-lg flex-col gap-3">
24      <Composer
25        status={status}
26        onSend={(message) => {
27          setLast(message.text);
28          setStatus('streaming');
29          timer.current = setTimeout(() => setStatus('ready'), 3000);
30        }}
31        onStop={stop}
32        placeholder="Send something and watch the button…"
33      />
34      <p className="text-muted-foreground text-xs">
35        {status === 'streaming'
36          ? `Streaming an answer to “${last}”. Stop cuts it short.`
37          : 'Ready. The send button turns into stop for three seconds after you send.'}
38      </p>
39    </div>
40  );
41}