Material UI chat

'use client'import { useMemo, type FormEvent, type KeyboardEvent } from 'react'import { useChat } from '@agentskit/react'import { createMockAdapter, initialAssistant } from './_shared/mock-adapter'/** * Material UI styled chat. Roboto typography, 2dp elevation on the outer card, * 4px radii, primary blue (#1976d2), outlined text field, contained send * button with a ripple-style hover, and a secondary avatar badge. * Drives state via `useChat` — everything else is pure Material UI idiom. */export function MuiChat() {  const adapter = useMemo(    () =>      createMockAdapter([        {          text: 'Swap the design system, keep the hook. AgentsKit components emit `data-ak-*` hooks — Material UI paints them.',        },        {          text: 'No theme provider required for the demo, but a real app would wrap this in `<ThemeProvider>` with your MUI palette.',        },      ]),    [],  )  const chat = useChat({    adapter,    initialMessages: [initialAssistant('Ask anything — styled with Material UI tokens.')],  })  const submit = (e: FormEvent) => {    e.preventDefault()    const value = chat.input.trim()    if (!value || chat.status === 'streaming') return    void chat.send(value)  }  const keyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {    if (e.key === 'Enter' && !e.shiftKey) {      e.preventDefault()      submit(e as unknown as FormEvent)    }  }  const visible = chat.messages.filter((m) => m.role !== 'tool')  return (    <div      data-ak-example      className="ak-mui flex h-[540px] flex-col overflow-hidden rounded border border-slate-200 bg-white font-['Roboto',_sans-serif] text-slate-900 shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.24)] dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100"    >      <header className="flex items-center justify-between gap-2 bg-[#1976d2] px-4 py-3 text-white shadow-[0_2px_4px_-1px_rgba(0,0,0,0.2)]">        <div className="flex items-center gap-3">          <Avatar initials="AK" />          <div>            <div className="text-[0.95rem] font-medium tracking-wide">AgentsKit Assistant</div>            <div className="text-[0.75rem] opacity-80">material design · online</div>          </div>        </div>        <IconButton aria-label="info">          <InfoIcon />        </IconButton>      </header>      <div className="flex-1 space-y-3 overflow-y-auto bg-[#fafafa] px-4 py-4 dark:bg-slate-950">        {visible.map((m) => (          <Bubble key={m.id} role={m.role} content={m.content} />        ))}        {chat.status === 'streaming' ? <Typing /> : null}      </div>      <form onSubmit={submit} className="flex items-end gap-3 border-t border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900">        <label className="relative flex-1">          <textarea            value={chat.input}            onChange={(e) => chat.setInput(e.target.value)}            onKeyDown={keyDown}            rows={1}            placeholder=" "            className="peer w-full resize-none rounded border border-slate-300 bg-transparent px-3 pb-2 pt-4 text-sm outline-none transition focus:border-[#1976d2] focus:shadow-[inset_0_-1px_0_0_#1976d2] dark:border-slate-700 dark:focus:border-[#90caf9]"          />          <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-xs text-slate-500 transition peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-[0.65rem] peer-focus:text-[#1976d2] peer-[&:not(:placeholder-shown)]:top-2 peer-[&:not(:placeholder-shown)]:translate-y-0 peer-[&:not(:placeholder-shown)]:text-[0.65rem] dark:text-slate-400">            Message          </span>        </label>        <button          type="submit"          disabled={!chat.input.trim() || chat.status === 'streaming'}          className="inline-flex h-10 items-center gap-1 rounded bg-[#1976d2] px-4 text-sm font-medium uppercase tracking-wider text-white shadow-[0_2px_2px_0_rgba(0,0,0,0.14),0_3px_1px_-2px_rgba(0,0,0,0.2),0_1px_5px_0_rgba(0,0,0,0.12)] transition hover:bg-[#1565c0] active:shadow-[0_5px_5px_-3px_rgba(0,0,0,0.2),0_8px_10px_1px_rgba(0,0,0,0.14),0_3px_14px_2px_rgba(0,0,0,0.12)] disabled:pointer-events-none disabled:opacity-50"        >          <SendIcon />          Send        </button>      </form>    </div>  )}function Bubble({ role, content }: { role: string; content: string }) {  const user = role === 'user'  return (    <div className={`flex items-end gap-2 ${user ? 'justify-end' : 'justify-start'}`}>      {!user ? <Avatar initials="AK" small /> : null}      <div        className={`max-w-[76%] rounded px-3.5 py-2 text-sm leading-relaxed ${          user            ? 'rounded-br-sm bg-[#1976d2] text-white shadow-[0_1px_2px_rgba(0,0,0,0.14),0_1px_1px_rgba(0,0,0,0.12)]'            : 'rounded-bl-sm bg-white text-slate-900 shadow-[0_1px_2px_rgba(0,0,0,0.08),0_1px_1px_rgba(0,0,0,0.06)] dark:bg-slate-800 dark:text-slate-100'        }`}      >        {content}      </div>      {user ? <Avatar initials="You" small variant="secondary" /> : null}    </div>  )}function Avatar({  initials,  small = false,  variant = 'primary',}: {  initials: string  small?: boolean  variant?: 'primary' | 'secondary'}) {  const base =    variant === 'primary'      ? 'bg-[#1976d2] text-white'      : 'bg-[#f50057] text-white'  return (    <span      className={`inline-flex shrink-0 items-center justify-center rounded-full text-[0.65rem] font-semibold tracking-wider ${base} ${        small ? 'h-7 w-7' : 'h-9 w-9'      }`}    >      {initials}    </span>  )}function Typing() {  return (    <div className="flex items-center gap-2">      <Avatar initials="AK" small />      <div className="flex items-center gap-1 rounded bg-white px-3 py-2 shadow-[0_1px_2px_rgba(0,0,0,0.08)] dark:bg-slate-800">        <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-[#1976d2] [animation-delay:-.3s]" />        <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-[#1976d2] [animation-delay:-.15s]" />        <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-[#1976d2]" />      </div>    </div>  )}function IconButton({ children, ...props }: React.HTMLAttributes<HTMLButtonElement> & { 'aria-label': string }) {  return (    <button      type="button"      {...props}      className="inline-flex h-9 w-9 items-center justify-center rounded-full text-white/90 transition hover:bg-white/10 active:bg-white/20"    >      {children}    </button>  )}function SendIcon() {  return (    <svg viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">      <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />    </svg>  )}function InfoIcon() {  return (    <svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />    </svg>  )}

import type { AdapterFactory, StreamChunk, ToolDefinition } from '@agentskit/core'export type ToolCallEmit = {  name: string  args?: Record<string, unknown>  result?: unknown  durationMs?: number}export type Turn = {  /** Text streamed as the assistant reply. */  text: string  /** Optional tool calls to emit before the text. The runtime executes each via   *  the matching tool stub exposed by `toolsFor(turns)`. */  toolCalls?: ToolCallEmit[]  /** Optional reasoning stream emitted before tool calls / text. */  reasoning?: string}export function createMockAdapter(turns: Turn[], cps = 80): AdapterFactory {  let idx = 0  return {    createSource: () => ({      stream: async function* (): AsyncIterableIterator<StreamChunk> {        const turn = turns[idx % turns.length]        idx += 1        if (turn.reasoning) {          for (const ch of turn.reasoning) {            await sleep(1000 / cps)            yield { type: 'reasoning', content: ch }          }        }        if (turn.toolCalls) {          for (const call of turn.toolCalls) {            yield {              type: 'tool_call',              toolCall: {                id: `call-${Math.random().toString(36).slice(2, 8)}`,                name: call.name,                args: JSON.stringify(call.args ?? {}),              },            }          }        }        for (const ch of turn.text) {          await sleep(1000 / cps)          yield { type: 'text', content: ch }        }        yield { type: 'done' }      },      abort() {},    }),    capabilities: { streaming: true, tools: true },  }}/** * Build a registry of tool stubs whose `execute()` resolves to the mocked * result declared for that tool name in `turns`. When the controller sees a * `tool_call` chunk from the mock adapter it looks up the name here, runs the * stub (with a simulated latency), and emits `tool_result`. */export function toolsFor(turns: Turn[]): ToolDefinition[] {  const byName = new Map<string, ToolCallEmit>()  for (const t of turns) {    for (const c of t.toolCalls ?? []) {      if (!byName.has(c.name)) byName.set(c.name, c)    }  }  return Array.from(byName.values()).map<ToolDefinition>((call) => ({    name: call.name,    description: `Mock ${call.name}`,    schema: {},    async execute() {      if (call.durationMs) await sleep(call.durationMs)      return JSON.stringify(call.result ?? { ok: true })    },  }))}function sleep(ms: number) {  return new Promise<void>((r) => setTimeout(r, ms))}export function initialAssistant(content: string) {  return {    id: 'init',    role: 'assistant' as const,    content,    status: 'complete' as const,    createdAt: new Date(),  }}