MessageList

Standalone message stream rendering with loading, search highlighting, and optional context capture.

MessageList renders a message feed on its own — markdown, code blocks, loading rows, search highlighting, and optional context capture — without any conversation management.

Live preview

How do I stream responses with the SDK?

Jazzmine

Use client.sendMessage() and read the streamed chunks. The MessageList renders assistant markdown automatically.

Nice — does it support code blocks?

Jazzmine

Yes:

const res = await client.sendMessage('hello');

Full working example

Messages.tsx

import React from 'react';
import { MessageList } from '@jazzmine-ui/react';
import type { Context, Message } from '@jazzmine-ui/react';
import '@jazzmine-ui/react/styles';

export function Messages() {
  const [messages] = React.useState<Message[]>([
    { id: 'm-1', text: 'How do I reset my password?', sender: 'user' },
    { id: 'm-2', text: 'Go to Settings > Account and choose Reset password.', sender: 'assistant' },
  ]);
  const [selectedContexts, setSelectedContexts] = React.useState<Context[]>([]);

  return (
    <div style={{ height: '60vh' }}>
      <MessageList
        messages={messages}
        assistantName="Support Assistant"
        searchQuery="password"
        activeSearchMessageId="m-2"
        onAddContext={(context) => setSelectedContexts((prev) => [...prev, context])}
      />
    </div>
  );
}

Props

Prop

Type

Notes

onAddContext

Use onAddContext to capture snippets a user selects and forward them later through onSend(text, contexts?) in ChatInterface-style flows.

searchQuery + activeSearchMessageId

searchQuery highlights matching text, and activeSearchMessageId moves focus to a specific hit.

Full working example

Props

Notes

On this page