laif-ds 0.2.74 → 0.2.76

package/dist/agent-docs/components/Chat.md

@@ -1,109 +1,121 @@
- # 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`.
- 
+# 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`.

package/dist/agent-docs/components/ChatMessage.md

@@ -1,61 +1,72 @@
- # 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`.
- 
+# 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`.