Live conversation

import { useState } from 'react';
import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import { Thread, spec as thread } from '@/components/klarhimmel/blocks/app-assistant-thread';
import { Composer, spec as composer } from '@/components/klarhimmel/blocks/app-assistant-composer';
import { ToolCall, spec as tool } from '@/components/klarhimmel/blocks/app-assistant-tool-call';
import { Approval, spec as approval } from '@/components/klarhimmel/blocks/app-assistant-approval';

type Turn = { role: 'user' | 'assistant'; text: string };

export default function Assistant() {
  const [draft, setDraft] = useState('');
  const [turns, setTurns] = useState<Turn[]>([]);
  const send = () => {
    setTurns((t) => [...t, { role: 'user', text: draft }]);
    setDraft('');
  };
  const answer = (text: string) => setTurns((t) => [...t, { role: 'assistant', text }]);
  return (
    <Theme>
      <BlockSurface>
        <main className="mx-auto flex max-w-kh-narrow flex-col gap-4 p-4">
          <Thread props={{ ...thread.defaults, state: turns.length ? 'idle' : 'empty', turns }} onSuggest={setDraft}>
            {turns.length > 0 && <ToolCall props={tool.defaults} />}
            {turns.length > 0 && <Approval props={approval.defaults} onApprove={() => answer('Done.')} onDeny={() => answer('Left as it is.')} />}
          </Thread>
          <Composer props={{ ...composer.defaults, attachments: [], state: draft ? 'filled' : 'ready' }} value={draft} onChange={setDraft} onSend={send} />
        </main>
      </BlockSurface>
    </Theme>
  );
}