@automatey-org/ui-fluent

Reusable FluentUI v9 chat components — the shared presentational layer for the Automatey web app, VS Code extension, and Unreal @madehuman/ux toolkit. One component per file, driven purely by data (no business logic), so any host can wire them to an agent loop (e.g. @automatey-org/agent-core).

Components

| Export | Purpose | |--------|---------| | ChatHeader | Title bar with model label + action slots. | | Composer | Multiline input with send/cancel. | | MessageCard | A single user/assistant message bubble. | | MarkdownMessage | GitHub-flavored Markdown renderer. | | CodeBlock | Syntax-highlighted code with copy. | | ThinkingBubble | Collapsible reasoning/thinking panel. | | ToolEventCard | Tool call/result/error timeline card. | | MetricsRow | Token/latency metrics strip. |

Types: ChatMessage, ChatToolEvent, ChatToolEventKind, and each component's *Props.

Usage

import { ChatHeader, MessageCard, Composer, type ChatMessage } from '@automatey-org/ui-fluent';

function Chat({ messages, onSend }: { messages: ChatMessage[]; onSend: (t: string) => void }) {
  return (
    <>
      <ChatHeader title="Automatey" modelLabel="nemotron" />
      {messages.map((m) => (
        <MessageCard key={m.id} message={m} />
      ))}
      <Composer onSend={onSend} />
    </>
  );
}

Peer dependencies

react / react-dom (>=18), @fluentui/react-components (>=9), @fluentui/react-icons (>=2), react-markdown (>=9), react-syntax-highlighter (>=15), remark-gfm (>=4), and @automatey-org/agent-core (>=0.1.0, type-only). Deduplicate react, react-dom, @fluentui/react-components, @fluentui/react-icons, and @griffel/react in your bundler so a single instance is used.

License

MIT