A chat where agent replies become working interfaces.

pnpm add @texuli/[email protected]

<script lang="ts">
import { applyChatStreamEvent, type ChatMessage, ChatThread } from '@texuli/chat';

let messages = $state<ChatMessage[]>([]);
const agent = { id: 'agent', name: 'Example agent' };

function onSend(body: string) {
  messages = [...messages, { id: crypto.randomUUID(), author: { id: 'me', name: 'Me' }, at: Date.now(), body }];
  const id = crypto.randomUUID();
  messages = applyChatStreamEvent(messages, { type: 'start', id, author: agent, at: Date.now() });
  messages = applyChatStreamEvent(messages, { type: 'delta', id, text: 'Hello from **example.com**.' });
  messages = applyChatStreamEvent(messages, { type: 'end', id });
}
</script>

<ChatThread {messages} currentUserId="me" {onSend} />

<script lang="ts">
import { validateDraft } from '@texuli/catalog/validate';
import { ChatAttachment } from '@texuli/chat';
import { createPlayerCatalog, Player } from '@texuli/player';

let { blueprint }: { blueprint: unknown } = $props();
const catalog = createPlayerCatalog();
const check = (artifact: unknown) => {
  const result = validateDraft(artifact, { catalog, tier: 'untrusted' });
  return result.ok && result.draft
    ? { ok: true as const, value: result.draft }
    : { ok: false as const, reasons: result.diagnostics.map((d) => d.message) };
};
</script>

<ChatAttachment artifact={blueprint} title="Report" {check}>
  {#snippet preview(value)}<Player blueprint={value} label="Report" />{/snippet}
</ChatAttachment>