laif-ds/dist/agent-docs/components/ChatMessage.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # 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`.