blixify-ui-web-mcp 0.1.3 → 0.1.18

package/lib/components/chat/chatBase/README.md

@@ -4,7 +4,7 @@
 
 <hr>
 
-A chat window component with message bubbles, markdown rendering for received messages, message search, file upload (image/video), a loading reply indicator, and customisable header/footer/body slots.
+A chat window component with message bubbles, markdown rendering for received messages, message search, file upload (images, videos, PDFs, and other documents), a loading reply indicator, tool report logs, tool call chips, and customisable header/footer/body slots.
 
 ##### Import
 
@@ -13,6 +13,8 @@ import {
   ChatBase,
   Conversation,
   Message,
+  ToolReport,
+  ToolCall,
   User,
 } from "blixify-ui-web/components/chat/chatBase";
 ```
@@ -80,9 +82,9 @@ With file upload:
   fileUpload={{
     allowFileUpload: true,
     file,
-    acceptFileType: ".jpg,.jpeg,.png,.mp4,.webm",
+    acceptFileType: ".jpg,.jpeg,.png,.mp4,.webm,.pdf,.docx",
     onChangeUpload: (e) => setFile(e.target.files[0]),
-    onSendUpload: (conversation) => { /* append file message */ },
+    onSendUpload: (conversation, file) => { /* handle upload */ },
   }}
   onSendMessage={...}
   onChangeMessage={...}
@@ -103,6 +105,43 @@ With loading reply indicator:
 />
 ```
 
+With tool report (shows model + tool call status above an assistant message):
+
+```jsx
+const assistantMessage: Message = {
+  sender: botUser,
+  messageBody: "Your order is out for delivery.",
+  createdAt: new Date(),
+  toolReport: {
+    model: "gemini-2.0-flash",
+    tools: [
+      { content: "search_orders", request: {}, response: {}, status: "done" },
+      {
+        content: "fetch_delivery_status",
+        request: {},
+        response: {},
+        status: "done",
+      },
+    ],
+  },
+};
+```
+
+Status dot colours: `"pending"` → yellow pulsing, `"done"` → green, `"error"` → red.
+
+With tool call chips (for AI pipelines that log tool invocations as separate messages):
+
+```jsx
+// Messages where author === "tool" should set isToolCall: true.
+// They render as a small centred chip instead of a chat bubble.
+const toolCallMessage: Message = {
+  sender: botUser,
+  messageBody: "fetch_policy_details",
+  createdAt: new Date(),
+  isToolCall: true,
+};
+```
+
 ##### Required props
 
 | Name           | Type           | Description                                                          |
@@ -130,6 +169,7 @@ With loading reply indicator:
 | `sizeClassName`        | `string`                               | `h-full w-full sm:h-[75vh] sm:w-96` | Tailwind classes controlling the component dimensions                                         |
 | `className`            | `string`                               | —                                   | Additional Tailwind classes applied to the outer container                                    |
 | `paddingTop`           | `number`                               | `0`                                 | Top padding in pixels. Used to offset the actions menu in mobile app layouts.                 |
+| `inputActions`         | `ReactElement[]`                       | —                                   | Extra icon buttons rendered in the input row between the paperclip and the send button        |
 | `onSendMessage`        | `(conversation: Conversation) => void` | —                                   | Called with the updated conversation (including the new message) when send is triggered       |
 | `onChangeMessage`      | `(event: any) => void`                 | —                                   | Called on every keystroke in the message input                                                |
 | `onSearch`             | `(searchMessage: string) => void`      | —                                   | Called when the search form is submitted                                                      |
@@ -139,14 +179,22 @@ With loading reply indicator:
 
 ##### FileUpload
 
-| Name              | Type                                   | Description                                                                               |
-| ----------------- | -------------------------------------- | ----------------------------------------------------------------------------------------- |
-| `allowFileUpload` | `boolean`                              | Shows the paperclip button to trigger file selection                                      |
-| `file`            | `string \| File \| any`                | Currently selected file                                                                   |
-| `maxFileSize`     | `number`                               | Maximum file size in MB. Defaults to `15`.                                                |
-| `acceptFileType`  | `string`                               | Comma-separated accepted extensions, e.g. `".jpg,.png,.mp4"`                              |
-| `onChangeUpload`  | `(event: any) => void`                 | Called when a file is selected via the file input                                         |
-| `onSendUpload`    | `(conversation: Conversation) => void` | Called with the current conversation when the send button is clicked with a file selected |
+| Name              | Type                   | Description                                                                                                                              |
+| ----------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `allowFileUpload` | `boolean`              | Shows the paperclip button to trigger file selection                                                                                     |
+| `hasFiles`        | `boolean`              | Tells the component files are selected — shows the send button and triggers `onSendMessage` on send                                      |
+| `multiple`        | `boolean`              | Allows picking multiple files at once                                                                                                    |
+| `acceptFileType`  | `string`               | Comma-separated accepted extensions, e.g. `".jpg,.png,.mp4,.pdf,.docx"`. Defaults to images only if omitted.                            |
+| `onChangeUpload`  | `(event: any) => void` | Called when files are selected via the file input. Consumer extracts files from `event.target.files` and manages their own `File[]` state |
+
+##### File rendering in message bubbles
+
+| File type         | Behaviour                                                                                            |
+| ----------------- | ---------------------------------------------------------------------------------------------------- |
+| `image/*`         | Renders as an inline image. Click to open a full-size preview modal. Hover to download.              |
+| `video/*`         | Renders as an inline video player. Hover to download.                                                |
+| `application/pdf` | Renders as a document icon + filename. Click to open a PDF preview modal. Download link shown below. |
+| Other             | Renders as a document icon + filename with a "Cannot preview" label. Download link shown below.      |
 
 ##### ChatBaseAction
 
@@ -166,12 +214,45 @@ With loading reply indicator:
 
 ##### Message
 
-| Name           | Type                | Description                                                                                    |
-| -------------- | ------------------- | ---------------------------------------------------------------------------------------------- |
-| `sender`       | `User`              | The user who sent the message                                                                  |
-| `messageBody`  | `string \| FileObj` | Text content (supports markdown for received messages) or a `FileObj` for image/video messages |
-| `reactElement` | `ReactElement`      | Optional — replaces `messageBody` rendering with a custom element                              |
-| `createdAt`    | `Date`              | Timestamp shown below the message bubble                                                       |
+| Name           | Type                | Description                                                                                                       |
+| -------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `sender`       | `User`              | The user who sent the message                                                                                     |
+| `messageBody`  | `string \| FileObj` | Text content (supports markdown for received messages) or a `FileObj` for image, video, PDF, or document messages |
+| `reactElement` | `ReactElement`      | Optional — replaces `messageBody` rendering with a custom element                                                 |
+| `createdAt`    | `Date`              | Timestamp shown below the message bubble                                                                          |
+| `toolReport`   | `ToolReport`        | Optional — renders a compact tool log panel above the message body (see ToolReport below)                         |
+| `isToolCall`   | `boolean`           | Optional — renders the message as a centred chip instead of a chat bubble (see Tool Calls)                        |
+
+##### ToolReport
+
+Attach to an assistant `Message` to show which model and tools were used to produce the reply.
+
+| Name    | Type         | Description                          |
+| ------- | ------------ | ------------------------------------ |
+| `model` | `string`     | Optional model name shown at the top |
+| `tools` | `ToolCall[]` | List of tool calls and their status  |
+
+##### ToolCall
+
+| Name       | Type                             | Description                                                                      |
+| ---------- | -------------------------------- | -------------------------------------------------------------------------------- |
+| `content`  | `string`                         | Tool name displayed in the summary row                                           |
+| `request`  | `string \| any`                  | Request payload — shown in the expandable details panel                          |
+| `response` | `any`                            | Response payload — shown in the expandable details panel                         |
+| `status`   | `"pending" \| "done" \| "error"` | Dot colour: yellow pulsing (pending), green (done), red (error). Default pending |
+
+##### Tool Calls
+
+When an AI pipeline stores tool invocations as separate messages (e.g. `author: "tool"` in a database), set `isToolCall: true` on those messages. They render as small centred chips between conversation bubbles — visually distinct from user/assistant messages.
+
+```jsx
+const messages = chatList.map((chat) => ({
+  sender: chat.author === "assistant" ? botUser : userObj,
+  messageBody: chat.content,
+  createdAt: new Date(chat.createdAt),
+  isToolCall: chat.author === "tool",
+}));
+```
 
 ##### User
 
@@ -183,8 +264,8 @@ With loading reply indicator:
 
 ##### FileObj
 
-| Name       | Type     | Description                                    |
-| ---------- | -------- | ---------------------------------------------- |
-| `fileName` | `string` | File URL or path                               |
-| `token`    | `string` | Unique file token                              |
-| `type`     | `string` | MIME type, e.g. `"image/png"` or `"video/mp4"` |
+| Name       | Type     | Description                                                       |
+| ---------- | -------- | ----------------------------------------------------------------- |
+| `fileName` | `string` | File URL or path                                                  |
+| `token`    | `string` | Unique file token — also used as the display name in the bubble   |
+| `type`     | `string` | MIME type, e.g. `"image/png"`, `"video/mp4"`, `"application/pdf"` |