blixify-ui-web-mcp 0.1.3 → 0.1.18

package/lib/components/chat/chatBase/chatBase.stories.tsx

@@ -1,21 +1,16 @@
 import { TrashIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
-import moment from "moment";
+import { MicrophoneIcon, CameraIcon } from "@heroicons/react/24/outline";
+import { DocumentIcon, XMarkIcon } from "@heroicons/react/24/solid";
+import dayjs from "../../dayjs";
 import React, { useState } from "react";
-import { v4 as uuidv4 } from "uuid";
-import { ChatBase, ChatBaseAction, Conversation } from ".";
+import { ChatBase, ChatBaseAction, Conversation, Message, ToolCall } from ".";
 import Logo from "../../../assets/logo.png";
 import { StorySection } from "../../storyUtils";
 import { TextButton } from "../../action/textButton";
-import README from "./README.md";
+import { IconButton } from "../../action/iconButton";
 
-const stories = storiesOf("Chat", module);
-
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
+const meta = { title: "Chat/Chat Base" };
+export default meta;
 
 const botUser = {
   id: "bot",
@@ -25,37 +20,190 @@ const botUser = {
 };
 const currentUser = { id: "me", name: "You" };
 
-const seedMessages = [
+const seedMessages: Message[] = [
   {
     sender: botUser,
     messageBody: "Hi! How can I help you? 🤖",
-    createdAt: moment("2023-11-03 12:00").toDate(),
+    createdAt: dayjs("2023-11-03 12:00").toDate(),
   },
   {
     sender: currentUser,
     messageBody: "My computer keeps crashing.",
-    createdAt: moment("2023-11-03 12:01").toDate(),
+    createdAt: dayjs("2023-11-03 12:01").toDate(),
   },
   {
     sender: botUser,
     messageBody:
       "**Quick Tips**\n1. Restart your machine.\n2. Check for updates.\n3. Free up disk space.",
-    createdAt: moment("2023-11-03 12:02").toDate(),
+    createdAt: dayjs("2023-11-03 12:02").toDate(),
   },
   {
     sender: currentUser,
     messageBody: "Thanks, I'll try that!",
-    createdAt: moment("2023-11-03 12:03").toDate(),
+    createdAt: dayjs("2023-11-03 12:03").toDate(),
+  },
+  {
+    sender: botUser,
+    messageBody:
+      "You can also check the [official troubleshooting guide](https://google.com) or visit [our FAQ page](https://google.com) for more help.",
+    createdAt: dayjs("2023-11-03 12:04").toDate(),
   },
 ];
 
-const makeConversation = (messages = seedMessages): Conversation => ({
+const makeConversation = (
+  messages: Message[] = seedMessages
+): Conversation => ({
   id: "1",
   members: [currentUser, botUser],
   messageList: messages,
 });
 
-stories.add("Chat Base", () => {
+const toolCallSequence: {
+  content: string;
+  request: string;
+  delayMs: number;
+}[] = [
+  {
+    content: "search_knowledge_base",
+    request: "query: order status #4821",
+    delayMs: 800,
+  },
+  {
+    content: "fetch_user_context",
+    request: "userId: current_user",
+    delayMs: 1400,
+  },
+  {
+    content: "generate_summary",
+    request: "summarize order + delivery info",
+    delayMs: 2200,
+  },
+];
+
+const seedToolMessages: Message[] = [
+  {
+    sender: botUser,
+    messageBody:
+      "Hi! I'm an AI assistant. Ask me anything and I'll show you which tools I use to answer.",
+    createdAt: dayjs("2023-11-03 12:00").toDate(),
+  },
+  {
+    sender: { id: "me", name: "You" },
+    messageBody: "What's the status of my latest order?",
+    createdAt: dayjs("2023-11-03 12:01").toDate(),
+  },
+  {
+    sender: botUser,
+    messageBody:
+      "Your latest order #4821 is currently **out for delivery** and should arrive today by 6 PM.",
+    createdAt: dayjs("2023-11-03 12:01").toDate(),
+    toolReport: {
+      model: "gemini-3-flash-preview",
+      tools: [
+        {
+          content: "search_orders",
+          request: "query: latest order for user",
+          response: { success: true, output: "Order #4821 found" },
+          status: "done",
+        },
+        {
+          content: "fetch_delivery_status",
+          request: "orderId: 4821",
+          response: { success: true, output: "Out for delivery, ETA 6 PM" },
+          status: "done",
+        },
+      ],
+    },
+  },
+  {
+    sender: { id: "me", name: "You" },
+    messageBody: "Can you summarise my account activity?",
+    createdAt: dayjs("2023-11-03 12:02").toDate(),
+  },
+  {
+    sender: botUser,
+    messageBody:
+      "Sorry, I couldn't retrieve your account activity right now. Please try again later.",
+    createdAt: dayjs("2023-11-03 12:02").toDate(),
+    toolReport: {
+      model: "gemini-3-flash-preview",
+      tools: [
+        {
+          content: "fetch_account_activity",
+          request: "userId: current_user",
+          response: { success: false, output: "Service unavailable" },
+          status: "error",
+        },
+      ],
+    },
+  },
+];
+
+const toolCallConversation: Conversation = {
+  id: "tool-call-demo",
+  members: [currentUser, botUser],
+  messageList: [
+    {
+      sender: currentUser,
+      messageBody: "What's my policy renewal date?",
+      createdAt: dayjs("2023-11-03 12:00").toDate(),
+    },
+    {
+      sender: botUser,
+      messageBody: "lookup_policy_by_user",
+      createdAt: dayjs("2023-11-03 12:00").toDate(),
+      isToolCall: true,
+    },
+    {
+      sender: botUser,
+      messageBody: "fetch_renewal_schedule",
+      createdAt: dayjs("2023-11-03 12:00").toDate(),
+      isToolCall: true,
+    },
+    {
+      sender: botUser,
+      messageBody:
+        "Your policy **POL-00421** is due for renewal on **15 Jan 2025**. Would you like me to send a reminder?",
+      createdAt: dayjs("2023-11-03 12:00").toDate(),
+    },
+    {
+      sender: currentUser,
+      messageBody:
+        "Yes please, and also check if there are any pending claims.",
+      createdAt: dayjs("2023-11-03 12:01").toDate(),
+    },
+    {
+      sender: botUser,
+      messageBody: "schedule_renewal_reminder",
+      createdAt: dayjs("2023-11-03 12:01").toDate(),
+      isToolCall: true,
+    },
+    {
+      sender: botUser,
+      messageBody: "fetch_claims_by_policy",
+      createdAt: dayjs("2023-11-03 12:01").toDate(),
+      isToolCall: true,
+    },
+    {
+      sender: botUser,
+      messageBody:
+        "Done! Reminder set for 8 Jan 2025. You have **1 pending claim** (REF-8821) currently under review.",
+      createdAt: dayjs("2023-11-03 12:01").toDate(),
+    },
+  ],
+};
+
+// INFO: generates older messages for scroll-up pagination demo
+const generateOlderMessages = (page: number): Message[] =>
+  Array.from({ length: 10 }, (_, i) => ({
+    sender: i % 2 === 0 ? botUser : currentUser,
+    messageBody: `Older message ${i + 1} from page ${page}`,
+    createdAt: dayjs("2023-11-03 12:00")
+      .subtract(page * 10 + (10 - i), "minutes")
+      .toDate(),
+  }));
+
+export const ChatBaseStory = () => {
   // --- Default ---
   const [msg1, setMsg1] = useState("");
   const [conv1, setConv1] = useState(makeConversation());
@@ -73,14 +221,140 @@ stories.add("Chat Base", () => {
 
   // --- File upload ---
   const [msg4, setMsg4] = useState("");
-  const [conv4, setConv4] = useState(makeConversation());
-  const [file, setFile] = useState<File | any>(undefined);
+  const [conv4, setConv4] = useState(
+    makeConversation([
+      {
+        sender: botUser,
+        messageBody: {
+          fileName:
+            "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400",
+          token: "sample-image.jpg",
+          type: "image/jpeg",
+        } as any,
+        createdAt: dayjs("2023-11-03 12:00").toDate(),
+      },
+      {
+        sender: botUser,
+        messageBody: {
+          fileName:
+            "https://firebasestorage.googleapis.com/v0/b/verdant-solar-dev.appspot.com/o/preCheckList%2F0184b7ee-8bb0-4a48-992c-ac8d37f8e833%2FPre-Checklist.pdf?alt=media&token=1de8eafb-27c4-4ff7-91a3-e640e4ef07cf",
+          token: "sample-document.pdf",
+          type: "application/pdf",
+        } as any,
+        createdAt: dayjs("2023-11-03 12:01").toDate(),
+      },
+      {
+        sender: botUser,
+        messageBody: {
+          fileName:
+            "https://docs.google.com/document/d/18eW31QU-UY_Tw2zJBzwaWTiijbuRKR7x/edit?usp=drive_link&ouid=106313527006787712257&rtpof=true&sd=true",
+          token: "sample-report.docx",
+          type: "",
+        } as any,
+        createdAt: dayjs("2023-11-03 12:02").toDate(),
+      },
+    ])
+  );
+  const [files4, setFiles4] = useState<File[]>([]);
+
+  // --- Multi-line input ---
+  const [msg11, setMsg11] = useState("");
+  const [conv11, setConv11] = useState(makeConversation());
+
+  // --- Media rendering (audio / attachments[]) ---
+  const [msg12, setMsg12] = useState("");
+  const [conv12, setConv12] = useState(
+    makeConversation([
+      {
+        sender: currentUser,
+        messageBody: "Here are the photos from the site visit.",
+        attachments: [
+          {
+            fileName:
+              "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400",
+            token: "site-photo-1.jpg",
+            type: "image/jpeg",
+          },
+          {
+            fileName:
+              "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400",
+            token: "site-photo-2.jpg",
+            type: "image/jpeg",
+          },
+        ] as any,
+        createdAt: dayjs("2023-11-03 12:00").toDate(),
+      },
+      {
+        sender: botUser,
+        messageBody:
+          "Got them, thanks! I've also attached the inspection report and a voice note summary.",
+        attachments: [
+          {
+            fileName:
+              "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
+            token: "voice-summary.mp3",
+            type: "audio/mpeg",
+          },
+        ] as any,
+        createdAt: dayjs("2023-11-03 12:01").toDate(),
+      },
+      {
+        sender: currentUser,
+        messageBody: "Perfect. Can you also send the diagram?",
+        attachments: [
+          {
+            fileName:
+              "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=400",
+            token: "diagram.jpg",
+            type: "image/jpeg",
+          },
+        ] as any,
+        createdAt: dayjs("2023-11-03 12:02").toDate(),
+      },
+    ])
+  );
 
   // --- Loading reply ---
-  const [msg5, setMsg5] = useState("");
+  const [msg5, setMsg5] = useState("Hello, any updates?");
   const [conv5, setConv5] = useState(makeConversation());
   const [isLoading, setIsLoading] = useState(false);
 
+  // --- Tool report ---
+  const [msg6, setMsg6] = useState("");
+  const [isLoading6, setIsLoading6] = useState(false);
+  const [conv6, setConv6] = useState<Conversation>({
+    id: "tool-demo",
+    members: [currentUser, botUser],
+    messageList: seedToolMessages,
+  });
+
+  // --- Scroll-up pagination ---
+  const [msg7, setMsg7] = useState("");
+  const [msgPage, setMsgPage] = useState(1);
+  const [loadingOlder, setLoadingOlder] = useState(false);
+  const [conv7, setConv7] = useState<Conversation>(
+    makeConversation(generateOlderMessages(0))
+  );
+
+  // --- Quick replies (footerElement) ---
+  const quickReplies = [
+    "Track my order",
+    "Speak to an agent",
+    "View FAQs",
+    "Reset password",
+  ];
+  const [msg8, setMsg8] = useState("");
+  const [conv8, setConv8] = useState(makeConversation());
+
+  // --- Input actions ---
+  const [msg9, setMsg9] = useState("");
+  const [conv9, setConv9] = useState(makeConversation());
+
+  // --- File attach with URI footer ---
+  const [msg10, setMsg10] = useState("");
+  const [conv10, setConv10] = useState(makeConversation());
+  const [files10, setFiles10] = useState<File[]>([]);
+
   const sendMessage =
     (
       conv: Conversation,
@@ -108,6 +382,67 @@ stories.add("Chat Base", () => {
     }
   };
 
+  const handleSendToolReport = (updated: Conversation) => {
+    setMsg6("");
+    setIsLoading6(true);
+
+    const pendingTools: ToolCall[] = toolCallSequence.map((t) => ({
+      content: t.content,
+      request: t.request,
+      response: null,
+      status: "pending" as const,
+    }));
+
+    const placeholderMsg: Message = {
+      sender: botUser,
+      messageBody: "",
+      createdAt: dayjs().toDate(),
+      toolReport: { model: "gemini-3-flash-preview", tools: pendingTools },
+    };
+
+    setConv6({
+      ...updated,
+      messageList: [...updated.messageList, placeholderMsg],
+    });
+
+    toolCallSequence.forEach(({ content, delayMs }) => {
+      setTimeout(() => {
+        setConv6((prev) => {
+          const msgs = [...prev.messageList];
+          const last = { ...msgs[msgs.length - 1] };
+          last.toolReport = {
+            ...last.toolReport!,
+            tools: last.toolReport!.tools.map((t) =>
+              t.content === content
+                ? {
+                    ...t,
+                    status: "done" as const,
+                    response: { success: true, output: "OK" },
+                  }
+                : t
+            ),
+          };
+          msgs[msgs.length - 1] = last;
+          return { ...prev, messageList: msgs };
+        });
+      }, delayMs);
+    });
+
+    const totalDelay =
+      toolCallSequence[toolCallSequence.length - 1].delayMs + 400;
+    setTimeout(() => {
+      setConv6((prev) => {
+        const msgs = [...prev.messageList];
+        const last = { ...msgs[msgs.length - 1] };
+        last.messageBody =
+          "I've checked across all relevant sources. Here's a summary based on your query — everything looks good on our end!";
+        msgs[msgs.length - 1] = last;
+        return { ...prev, messageList: msgs };
+      });
+      setIsLoading6(false);
+    }, totalDelay);
+  };
+
   const handleSendWithReply = (updated: Conversation) => {
     setConv5(updated);
     setMsg5("");
@@ -120,7 +455,7 @@ stories.add("Chat Base", () => {
           {
             sender: botUser,
             messageBody: "Got it! Let me look into that for you.",
-            createdAt: moment().toDate(),
+            createdAt: dayjs().toDate(),
           },
         ],
       }));
@@ -128,6 +463,20 @@ stories.add("Chat Base", () => {
     }, 2000);
   };
 
+  // INFO: scroll-up handler — prepends older messages after a simulated delay
+  const handleLoadOlderMessages = () => {
+    setLoadingOlder(true);
+    const nextPage = msgPage + 1;
+    setTimeout(() => {
+      setConv7((prev) => ({
+        ...prev,
+        messageList: [...generateOlderMessages(nextPage), ...prev.messageList],
+      }));
+      setMsgPage(nextPage);
+      setLoadingOlder(false);
+    }, 1000);
+  };
+
   const clearAction = (
     setConv: (c: Conversation) => void
   ): ChatBaseAction[] => [
@@ -218,7 +567,7 @@ stories.add("Chat Base", () => {
 
       <StorySection
         title="File Upload"
-        description="fileUpload.allowFileUpload=true shows a paperclip button. The selected file is previewed before sending. onSendUpload is called with the current conversation when the send button is clicked."
+        description="fileUpload.allowFileUpload=true shows a paperclip button. Selected files appear as chips in footerElement. onSendMessage fires for both text and file sends — the consumer handles upload logic there."
       >
         <ChatBase
           open
@@ -227,37 +576,58 @@ stories.add("Chat Base", () => {
           conversation={conv4}
           fileUpload={{
             allowFileUpload: true,
-            file,
-            acceptFileType: ".jpg,.jpeg,.png,.mp4,.webm",
+            hasFiles: files4.length > 0,
+            multiple: true,
+            acceptFileType: ".jpg,.jpeg,.png,.mp4,.webm,.pdf,.docx",
             onChangeUpload: (e) => {
-              if (e?.target?.files?.length > 0) setFile(e.target.files[0]);
-              else setFile(undefined);
-            },
-            onSendUpload: (conversation) => {
-              if (file) {
-                const fileUrl = URL.createObjectURL(file);
-                setConv4({
-                  ...conversation,
-                  messageList: [
-                    ...conversation.messageList,
-                    {
-                      sender: currentUser,
-                      messageBody: {
-                        fileName: fileUrl,
-                        token: uuidv4(),
-                        type: file.type,
-                      },
-                      createdAt: moment().toDate(),
-                    },
-                  ],
-                });
-                setFile(undefined);
-                setMsg4("");
-              }
+              if (e?.target?.files?.length > 0)
+                setFiles4((prev) => [
+                  ...prev,
+                  ...Array.from(e.target.files as FileList),
+                ]);
             },
           }}
-          onSendMessage={sendMessage(conv4, setConv4, setMsg4)}
+          onSendMessage={(updated) => {
+            const newMessages = files4.map((f) => ({
+              sender: currentUser,
+              messageBody: {
+                fileName: URL.createObjectURL(f),
+                token: f.name,
+                type: f.type,
+              },
+              createdAt: dayjs().toDate(),
+            }));
+            setConv4({
+              ...updated,
+              messageList: [...updated.messageList, ...newMessages],
+            });
+            setFiles4([]);
+            setMsg4("");
+          }}
           onChangeMessage={(e) => setMsg4(e.target.value)}
+          footerElement={
+            files4.length > 0 ? (
+              <div className="flex flex-wrap gap-2 px-2 pb-1 pt-1">
+                {files4.map((f, i) => (
+                  <span
+                    key={i}
+                    className="inline-flex items-center gap-1.5 rounded-full border border-primary-300 bg-primary-50 py-1 pl-2.5 pr-1.5 text-xs text-primary-700"
+                  >
+                    <DocumentIcon className="h-3.5 w-3.5 flex-shrink-0 text-primary-500" />
+                    <span className="max-w-[140px] truncate">{f.name}</span>
+                    <button
+                      onClick={() =>
+                        setFiles4((prev) => prev.filter((_, idx) => idx !== i))
+                      }
+                      className="ml-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full hover:bg-primary-200 transition-colors"
+                    >
+                      <XMarkIcon className="h-3 w-3 text-primary-500" />
+                    </button>
+                  </span>
+                ))}
+              </div>
+            ) : undefined
+          }
           sizeClassName="h-[500px] w-96"
           disableMobileResize
         />
@@ -279,6 +649,236 @@ stories.add("Chat Base", () => {
           disableMobileResize
         />
       </StorySection>
+
+      <StorySection
+        title="Tool Report"
+        description="When a message has a toolReport, a compact log panel is shown above the message body. It displays the model used and each tool call with a status dot: yellow (pending), green (done), red (error). Send a message to see the simulated tool-call flow."
+      >
+        <ChatBase
+          open
+          value={msg6}
+          currentUser={currentUser}
+          conversation={conv6}
+          isLoadingReply={isLoading6}
+          onSendMessage={handleSendToolReport}
+          onChangeMessage={(e) => setMsg6(e.target.value)}
+          sizeClassName="h-[500px] w-96"
+          disableMobileResize
+        />
+      </StorySection>
+
+      <StorySection
+        title="Tool Call Messages"
+        description="Messages with isToolCall=true are rendered as centered inline chips instead of chat bubbles. This is used when the chat history includes tool invocation records (e.g. author: 'tool' from an AI pipeline). They sit between user and assistant messages to show what happened behind the scenes."
+      >
+        <ChatBase
+          open
+          value=""
+          currentUser={currentUser}
+          conversation={toolCallConversation}
+          sizeClassName="h-[500px] w-96"
+          disableMobileResize
+          hideAdditionalAction
+        />
+      </StorySection>
+
+      <StorySection
+        title="Scroll-Up Pagination"
+        description="onMessageListScrollTop fires when scrolled near the top. isLoadingMessages shows a spinner at the top while older messages are being fetched. Scroll up to see the effect."
+      >
+        <ChatBase
+          open
+          value={msg7}
+          currentUser={currentUser}
+          conversation={conv7}
+          isLoadingMessages={loadingOlder}
+          onMessageListScrollTop={handleLoadOlderMessages}
+          onSendMessage={(updated) => {
+            setConv7(updated);
+            setMsg7("");
+          }}
+          onChangeMessage={(e) => setMsg7(e.target.value)}
+          sizeClassName="h-[500px] w-96"
+          disableMobileResize
+        />
+      </StorySection>
+
+      <StorySection
+        title="Quick Replies (footerElement)"
+        description="footerElement renders above the message input. Pass quick-reply chips here so users can tap a preset prompt instead of typing. Clicking a chip fills the input — the user still hits send."
+      >
+        <ChatBase
+          open
+          value={msg8}
+          currentUser={currentUser}
+          conversation={conv8}
+          onSendMessage={(updated) => {
+            setConv8(updated);
+            setMsg8("");
+          }}
+          onChangeMessage={(e) => setMsg8(e.target.value)}
+          footerElement={
+            <div className="flex flex-wrap gap-2 px-2 pb-1 pt-1">
+              {quickReplies.map((reply) => (
+                <button
+                  key={reply}
+                  onClick={() => setMsg8(reply)}
+                  className="text-xs px-3 py-1 rounded-full border border-primary-300 text-primary-600 bg-primary-50 hover:bg-primary-100 transition-colors"
+                >
+                  {reply}
+                </button>
+              ))}
+            </div>
+          }
+          sizeClassName="h-[500px] w-96"
+          disableMobileResize
+        />
+      </StorySection>
+
+      <StorySection
+        title="File Attach with Chips Footer"
+        description="Attach multiple files via the paperclip. Each file appears as a dismissible chip in footerElement — click × to remove individually. onSendMessage handles both text and files together."
+      >
+        <ChatBase
+          open
+          value={msg10}
+          currentUser={currentUser}
+          conversation={conv10}
+          fileUpload={{
+            allowFileUpload: true,
+            hasFiles: files10.length > 0,
+            multiple: true,
+            acceptFileType: ".jpg,.jpeg,.png,.mp4,.webm,.pdf,.docx",
+            onChangeUpload: (e) => {
+              if (e?.target?.files?.length > 0)
+                setFiles10((prev) => [
+                  ...prev,
+                  ...Array.from(e.target.files as FileList),
+                ]);
+            },
+          }}
+          onSendMessage={(updated) => {
+            const newMessages = files10.map((f) => ({
+              sender: currentUser,
+              messageBody: {
+                fileName: URL.createObjectURL(f),
+                token: f.name,
+                type: f.type,
+              },
+              createdAt: dayjs().toDate(),
+            }));
+            setConv10({
+              ...updated,
+              messageList: [...updated.messageList, ...newMessages],
+            });
+            setFiles10([]);
+            setMsg10("");
+          }}
+          onChangeMessage={(e) => setMsg10(e.target.value)}
+          footerElement={
+            files10.length > 0 ? (
+              <div className="flex flex-wrap gap-2 px-2 pb-1 pt-1">
+                {files10.map((f, i) => (
+                  <span
+                    key={i}
+                    className="inline-flex items-center gap-1.5 rounded-full border border-primary-300 bg-primary-50 py-1 pl-2.5 pr-1.5 text-xs text-primary-700"
+                  >
+                    <DocumentIcon className="h-3.5 w-3.5 flex-shrink-0 text-primary-500" />
+                    <span className="max-w-[180px] truncate">{f.name}</span>
+                    <button
+                      onClick={() =>
+                        setFiles10((prev) => prev.filter((_, idx) => idx !== i))
+                      }
+                      className="ml-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full hover:bg-primary-200 transition-colors"
+                    >
+                      <XMarkIcon className="h-3 w-3 text-primary-500" />
+                    </button>
+                  </span>
+                ))}
+              </div>
+            ) : undefined
+          }
+          sizeClassName="h-[500px] w-96"
+          disableMobileResize
+        />
+      </StorySection>
+
+      <StorySection
+        title="Custom Input Actions (inputActions)"
+        description="inputActions renders extra icon buttons in the input row between the paperclip and the send button. Useful for voice input, camera, or any custom LLM action."
+      >
+        <ChatBase
+          open
+          value={msg9}
+          currentUser={currentUser}
+          conversation={conv9}
+          onSendMessage={(updated) => {
+            setConv9(updated);
+            setMsg9("");
+          }}
+          onChangeMessage={(e) => setMsg9(e.target.value)}
+          fileUpload={{
+            allowFileUpload: true,
+            hasFiles: false,
+            onChangeUpload: () => {},
+          }}
+          inputActions={[
+            <IconButton
+              key="mic"
+              onClick={() => alert("Voice input triggered")}
+              className="focus:ring-transparent flex flex-col justify-center"
+              icon={<MicrophoneIcon className="w-5 h-5 text-primary-500" />}
+            />,
+            <IconButton
+              key="camera"
+              onClick={() => alert("Camera triggered")}
+              className="focus:ring-transparent flex flex-col justify-center"
+              icon={<CameraIcon className="w-5 h-5 text-primary-500" />}
+            />,
+          ]}
+          sizeClassName="h-[500px] w-96"
+          disableMobileResize
+        />
+      </StorySection>
+
+      <StorySection
+        title="Multi-line Input (Email Composer)"
+        description="multiLine=true expands the textarea to 5 rows and moves action buttons to a bottom-right row. Enter adds a new line instead of sending — use the send button to submit. Ideal for composing emails."
+      >
+        <ChatBase
+          open
+          value={msg11}
+          currentUser={currentUser}
+          conversation={conv11}
+          multiLine={5}
+          onSendMessage={(updated) => {
+            setConv11(updated);
+            setMsg11("");
+          }}
+          onChangeMessage={(e) => setMsg11(e.target.value)}
+          sizeClassName="h-[500px] w-96"
+          disableMobileResize
+        />
+      </StorySection>
+
+      <StorySection
+        title="Media Rendering (Text + Attachments)"
+        description="Messages with both a text messageBody and an attachments[] array — images, PDFs, and audio files rendered inline beneath the message text. Simulates real-world scenarios like sending a caption with photos or a bot reply with supporting files."
+      >
+        <ChatBase
+          open
+          value={msg12}
+          currentUser={currentUser}
+          conversation={conv12}
+          onSendMessage={(updated) => {
+            setConv12(updated);
+            setMsg12("");
+          }}
+          onChangeMessage={(e) => setMsg12(e.target.value)}
+          sizeClassName="h-[500px] w-96"
+          disableMobileResize
+        />
+      </StorySection>
     </>
   );
-});
+};