MessageEntry

Router component for rendering individual entries

MessageEntry is a router component that renders the appropriate sub-component based on the entry type. It handles user messages, assistant responses, thinking blocks, tool calls, and errors.

Entry Types

user_message

Can you analyze this dataset for trends?

assistant_message

I'll analyze the dataset and identify key trends for you.

thinking

Let me consider the best approach to analyze this data...

error

Error: Unable to process the request. Please try again.

Import

import

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

Usage

CustomMessageList.tsx

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

function CustomMessageList({ entries }: { entries: NormalizedEntry[] }) {
  return (
    <div className="space-y-4">
      {entries.map((entry) => (
        <MessageEntry key={entry.id} entry={entry} />
      ))}
    </div>
  );
}

Props

Prop	Type	Description
entry	NormalizedEntry	The normalized entry to render

Sub-components

MessageEntry internally uses these sub-components:

UserMessage

Blue right-aligned bubbles with file attachment support

AssistantMessage

Gray left-aligned with markdown rendering

ThinkingMessage

Purple italic blocks for reasoning

ToolCallMessage

Renders ToolCallCard for tool executions

ErrorMessage

Red error blocks with error codes

File Attachments

User messages can include file attachments that are displayed inline:

example.tsx

const userEntry: NormalizedEntry = {
  id: '1',
  entryType: 'user_message',
  content: 'Please analyze this file',
  timestamp: new Date().toISOString(),
  files: [
    {
      name: 'data.csv',
      type: 'text/csv',
      size: 2048,
    }
  ]
};