# ChatMessage

## Overview

Render a single chat message bubble with markdown, optional attachments preview, tool invocation blocks, reasoning collapsible, time stamps, actions and inline edit for assistant messages.

---

## Props

| Prop                       | Type                                                     | Default      | Description                                             |
| -------------------------- | -------------------------------------------------------- | ------------ | ------------------------------------------------------- | ------------ | ------------------------------------------- | ---------------- |
| `id`                       | `string`                                                 | **required** | Message id.                                             |
| `role`                     | `"user"                                                  | "assistant"  | (string)`                                               | **required** | Role determines bubble style and alignment. |
| `content`                  | `string`                                                 | **required** | Message text (markdown supported).                      |
| `createdAt`                | `Date`                                                   | `undefined`  | Optional timestamp.                                     |
| `experimental_attachments` | `{ url: string; name?: string; contentType?: string }[]` | `undefined`  | Files to preview (user messages).                       |
| `toolInvocations`          | `ToolInvocation[]`                                       | `undefined`  | Tool call states (`call`, `result`).                    |
| `parts`                    | `MessagePart[]`                                          | `undefined`  | Mixed message content (text/reasoning/tool-invocation). |
| `showTimeStamp`            | `boolean`                                                | `false`      | Show `createdAt` under bubble.                          |
| `animation`                | `"none"                                                  | "slide"      | "scale"                                                 | "fade"`      | `"scale"`                                   | Entry animation. |
| `actions`                  | `React.ReactNode`                                        | `undefined`  | Action buttons area (shown on hover).                   |
| `editable`                 | `boolean`                                                | `false`      | Force edit UI even without `onEdit`.                    |
| `onEdit`                   | `(newContent: string) => void`                           | `undefined`  | Show edit UI on assistant messages.                     |
| `onMessageSave`            | `(messageId: string, content: string) => void`           | `undefined`  | Save callback (rendered in action area).                |

---

## Behavior

- **User vs Assistant**: Different bubble alignment and token styles.
- **Markdown**: Rendered via `MarkdownRenderer` with async suspense fallback.
- **Attachments**: User attachments rendered as `FilePreview` chips.
- **Tool calls**: `ToolInvocation` blocks show calling/result state with icons.
- **Edit**: Assistant messages can be edited inline (Enter save, Esc cancel).

---

## Examples

```tsx
import { ChatMessage } from "laif-ds";

export function Examples() {
  return (
    <div className="space-y-4">
      <ChatMessage
        id="u1"
        role="user"
        content="Hello"
        createdAt={new Date()}
        showTimeStamp
      />
      <ChatMessage
        id="a1"
        role="assistant"
        content="Hi there!"
        createdAt={new Date()}
        showTimeStamp
      />
      <ChatMessage id="a2" role="assistant" content={"**Bold** and `code`"} />
    </div>
  );
}
```

---

## Notes

- **Reasoning**: Use `parts` with `{ type: "reasoning", reasoning: string }` to show collapsible reasoning.
- **Actions**: Pass small `Button`s or icons (from `laif-ds`) via `actions`.