MessageList

Display a list of normalized message entries

The MessageList component renders a scrollable list of conversation entries including user messages, assistant responses, thinking blocks, tool calls, and errors.

Preview

Can you help me analyze this data?

I'd be happy to help you analyze the data. Let me take a look at what we're working with.

Thinking...The user wants data analysis. I should first understand the structure of their data...

Import

import

import { MessageList } from '@ash-cloud/ash-ui';

Usage

ChatInterface.tsx

import { MessageList } from '@ash-cloud/ash-ui';
import type { NormalizedEntry } from '@ash-cloud/ash-ui/types';

function ChatInterface() {
  const [entries, setEntries] = useState<NormalizedEntry[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [streamingContent, setStreamingContent] = useState<string>();

  return (
    <MessageList
      entries={entries}
      loading={isLoading}
      streamingContent={streamingContent}
      className="h-[600px]"
    />
  );
}

Props

Prop	Type	Default	Description
entries	NormalizedEntry[]	required	Array of normalized message entries to display
loading	boolean	false	Shows a loading indicator at the bottom
streamingContent	string	undefined	Content being streamed in real-time
className	string	undefined	Additional CSS classes

Supported Entry Types

MessageList automatically renders different components based on the entry type:

user_message

User input messages

assistant_message

AI assistant responses

thinking

Reasoning/thinking blocks

tool_call

Tool execution entries

error

Error messages

NormalizedEntry Type

types.ts

type NormalizedEntry = {
  id: string;
  timestamp: string;
  entryType: 'user_message' | 'assistant_message' | 'thinking' | 'tool_call' | 'error';
  content: string;
  toolCall?: NormalizedToolCall;  // For tool_call entries
  files?: FileAttachment[];       // For user messages with attachments
};