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

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

 # Chat
 
 ## Overview
 
 Complete chat interface: message list with markdown rendering, auto-scroll and typing indicator; composer with text, attachments, and voice; optional suggestions for empty state; message actions (copy, rate, save) and inline edit of assistant messages.
 
 ---
 
 ## Props
 
 | Prop               | Type                                           | Default     | Description |
 | ------------------ | ---------------------------------------------- | ----------- | ----------- |
 | `messages`         | `Message[]`                                    | **required**| Messages to render. See `ChatMessage` for shape. |
 | `input`            | `string`                                       | **required**| Current input value. |
 | `handleSubmit`     | `(event?, opts?) => void`                      | **required**| Called on form submit. Supports `{ experimental_attachments?: FileList }`. |
 | `handleInputChange`| `React.ChangeEventHandler<HTMLTextAreaElement>`| **required**| Input change handler. |
 | `isGenerating`     | `boolean`                                      | `false`     | Whether assistant is generating. Enables interrupt UI. |
 | `stop`             | `() => void`                                   | `undefined` | Stop generation callback. |
 | `allowAttachments` | `boolean`                                      | `false`     | Enable file attachments UI. |
 | `transcribeAudio`  | `(blob: Blob) => Promise<string>`              | `undefined` | Speech-to-text function for voice input. |
 | `onEdit`           | `(messageId: string, newContent: string) => void`| `undefined`| Enable inline edit on assistant messages. |
 | `onMessageSave`    | `(messageId: string, content: string) => void` | `undefined` | Enable save action on assistant messages. |
 | `onRateResponse`   | `(messageId: string, rating: "thumbs-up" | "thumbs-down") => void` | `undefined` | Enable rating actions. |
 | `append`           | `(message: { role: "user"; content: string }) => void` | `undefined` | Show prompt suggestions and handle clicks. |
 | `suggestions`      | `string[]`                                     | `undefined` | Suggestions displayed when empty. Requires `append`. |
 | `className`        | `string`                                       | `undefined` | Wrapper classes. |
 | `welcomeTitle`     | `string`                                       | `"Da dove iniziamo?"` | Title shown in empty state. |
 
 ---
 
 ## Behavior
 
 - **Auto-scroll**: Scrolls to latest messages unless user scrolls up (then shows "scroll to bottom").
 - **Composer**: `MessageInput` supports Enter-to-send, attachments, and voice input with transcription.
 - **Actions**: Copy, save, thumbs up/down per assistant message.
 - **Edit**: Inline edit of assistant messages with Enter to save / Esc to cancel.
 - **Suggestions**: When `messages` is empty and `suggestions` provided, renders clickable suggestions via `append`.
 
 ---
 
 ## Examples
 
 ### Default
 
 ```tsx
 import * as React from "react";
 import { Chat } from "laif-ds";
 import type { Message } from "laif-ds";
 
 export function BasicChat() {
   const [messages, setMessages] = React.useState<Message[]>([
     { id: "1", role: "user", content: "Hello!", createdAt: new Date() },
     { id: "2", role: "assistant", content: "How can I help?", createdAt: new Date() },
   ]);
   const [input, setInput] = React.useState("");
 
   const handleSubmit = () => {
     if (!input.trim()) return;
     setMessages((prev) => [...prev, { id: Date.now().toString(), role: "user", content: input, createdAt: new Date() }]);
     setInput("");
   };
 
   return (
     <div className="h-[500px] w-full max-w-3xl">
       <Chat
         messages={messages}
         input={input}
         handleInputChange={(e) => setInput(e.target.value)}
         handleSubmit={handleSubmit}
         isGenerating={false}
       />
     </div>
   );
 }
 ```
 
 ### With Attachments and Actions
 
 ```tsx
 import * as React from "react";
 import { Chat } from "laif-ds";
 
 export function FullChat() {
   const [input, setInput] = React.useState("");
   return (
     <div className="h-[600px] w-full">
       <Chat
         messages={[]}
         input={input}
         handleInputChange={(e) => setInput(e.target.value)}
         handleSubmit={() => {}}
         isGenerating={false}
         allowAttachments
         onMessageSave={(id, content) => console.log("save", id, content)}
         onRateResponse={(id, rating) => console.log("rate", id, rating)}
       />
     </div>
   );
 }
 ```
 
 ---
 
 ## Notes
 
 - **Types**: See `Message` in `chat-message.tsx` for full shape (supports tool invocations and parts).
 - **Interrupt**: When `isGenerating` is true and `stop` provided, `Enter` prompts to stop then submit.
 - **Composition**: Chat uses `MessageList`, `MessageInput`, and utilities like `CopyButton` and `PromptSuggestions`.