@coder/mux-chat-components

@coder/mux-chat-components

Shared chat UI from Mux, published for reuse in mux.md.

Principle: this package re-exports Mux’s existing chat renderer implementation (messages, tools, markdown, diff rendering) to avoid a parallel rendering stack.

Usage

import {
  ChatHostContextProvider,
  ThemeProvider,
  MessageRenderer,
  createReadOnlyChatHostContext,
  type DisplayedMessage,
} from "@coder/mux-chat-components";

function ConversationViewer(props: { messages: DisplayedMessage[] }) {
  return (
    <ThemeProvider>
      <ChatHostContextProvider value={createReadOnlyChatHostContext()}>
        {props.messages.map((m) => (
          <MessageRenderer key={m.historyId} message={m} />
        ))}
      </ChatHostContextProvider>
    </ThemeProvider>
  );
}

Read-only host defaults

createReadOnlyChatHostContext() sets most ChatHostContext.uiSupport flags to "unsupported" and enables:

• jsonRawView
• imageAttachments

You can override individual flags:

createReadOnlyChatHostContext({ jsonRawView: "supported" });

Styling

Mux uses Tailwind + CSS variables for theming.

This package ships a minimal CSS variable set for 4 themes (dark/light/solarized-dark/solarized-light):

import "@coder/mux-chat-components/styles";

The host app is still responsible for providing Tailwind (or equivalent styles) for layout/typography; the CSS export is primarily for tokens (colors, borders, etc.).

Development

cd packages/chat-components
bun install
bun run typecheck
bun run build

License

AGPL-3.0-only