blixify-ui-web-mcp 0.1.2 → 0.1.18

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

@@ -1,306 +1,884 @@
 import { TrashIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
-import moment from "moment";
-import React, { useEffect, useState } from "react";
-import { v4 as uuidv4 } from "uuid";
-import { ChatBase, ChatBaseAction, Conversation } from ".";
+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 { ChatBase, ChatBaseAction, Conversation, Message, ToolCall } from ".";
 import Logo from "../../../assets/logo.png";
+import { StorySection } from "../../storyUtils";
 import { TextButton } from "../../action/textButton";
-import { Loading } from "../../display/loading";
-import README from "./README.md";
+import { IconButton } from "../../action/iconButton";
 
-const stories = storiesOf("Chat", module);
+const meta = { title: "Chat/Chat Base" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
+const botUser = {
+  id: "bot",
+  name: "Bot",
+  imageUrl:
+    "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+};
+const currentUser = { id: "me", name: "You" };
+
+const seedMessages: Message[] = [
+  {
+    sender: botUser,
+    messageBody: "Hi! How can I help you? 🤖",
+    createdAt: dayjs("2023-11-03 12:00").toDate(),
+  },
+  {
+    sender: currentUser,
+    messageBody: "My computer keeps crashing.",
+    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: dayjs("2023-11-03 12:02").toDate(),
+  },
+  {
+    sender: currentUser,
+    messageBody: "Thanks, I'll try that!",
+    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: Message[] = seedMessages
+): Conversation => ({
+  id: "1",
+  members: [currentUser, botUser],
+  messageList: messages,
 });
 
-stories.add("Chat Base", () => {
-  const botUser = {
-    id: "1",
-    name: "Bot",
-    imageUrl:
-      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
-  };
-  const currentUser = { id: "2", name: "Guest" };
+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 [message, setMessage] = useState("");
-  const [messageLimit] = useState(20);
+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());
+
+  // --- Custom header/footer ---
+  const [msg2, setMsg2] = useState("");
+  const [conv2, setConv2] = useState(makeConversation());
+  const messageLimit = 8;
+
+  // --- Search ---
+  const [msg3, setMsg3] = useState("");
   const [search, setSearch] = useState("");
-  const [filteredConversation, setFilteredConversation] =
-    useState<Conversation | null>();
-  const [file, setFile] = useState<File | any>(undefined);
-  const [loading, setLoading] = useState(false);
+  const [conv3, setConv3] = useState(makeConversation());
+  const [filteredConv, setFilteredConv] = useState<Conversation | null>(null);
 
-  const [conversation, setConversation] = useState<Conversation>({
-    id: "1",
-    members: [currentUser, botUser],
-    messageList: [
+  // --- File upload ---
+  const [msg4, setMsg4] = useState("");
+  const [conv4, setConv4] = useState(
+    makeConversation([
       {
         sender: botUser,
-        messageBody: "Hi! How can I help you? 🤖",
-        createdAt: moment(
-          "Fri Nov 03 2023 12:21:14 GMT+0800 (Malaysia Time)"
-        ).toDate(),
-      },
-      {
-        sender: currentUser,
-        messageBody: "Yo, my computer's acting up.",
-        createdAt: moment(
-          "Fri Nov 03 2023 13:21:14 GMT+0800 (Malaysia Time)"
-        ).toDate(),
-      },
-      {
-        sender: currentUser,
-        messageBody:
-          "It keeps saying 'Error 404: Coffee not found' when I start it up.",
-        createdAt: moment(
-          "Fri Nov 03 2023 14:21:14 GMT+0800 (Malaysia Time)"
-        ).toDate(),
+        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:
-          "Sounds like a caffeine emergency!\nHave you tried offering it coffee?",
-        createdAt: moment(
-          "Fri Nov 03 2023 15:21:14 GMT+0800 (Malaysia Time)"
-        ).toDate(),
-      },
-      {
-        sender: currentUser,
-        messageBody: "Seriously?",
-        createdAt: moment(
-          "Fri Nov 03 2023 16:21:14 GMT+0800 (Malaysia Time)"
-        ).toDate(),
+        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:
-          "Well, computers do like a jolt of energy, but don't spill, that could be 'mocha-nical' trouble!",
-        createdAt: moment(
-          "Fri Nov 03 2023 17:21:14 GMT+0800 (Malaysia Time)"
-        ).toDate(),
+        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: "Cringe. I'll give it a shot.Thanks.",
-        createdAt: moment(
-          "Fri Nov 03 2023 18:21:14 GMT+0800 (Malaysia Time)"
-        ).toDate(),
+        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:
-          "**Quick Tips for Productivity**\n1. Set timers.\n2. Prioritize tasks.\n3. Take breaks.\n\n**Healthy Habits**\n 1. Stay hydrated.\n2. Eat well.\n3. Exercise daily.",
-        createdAt: moment(
-          "Fri Nov 03 2023 19:21:14 GMT+0800 (Malaysia Time)"
-        ).toDate(),
-      },
-      {
-        sender: botUser,
-        messageBody: "Hey check out my dog!",
-        createdAt: moment(
-          "Fri Nov 03 2023 19:21:10 GMT+0800 (Malaysia Time)"
-        ).toDate(),
-      },
-      {
-        sender: botUser,
-        messageBody: {
-          fileName:
-            "https://player.vimeo.com/external/364708250.sd.mp4?s=7382fdedda817a193bcffb6ff74624fa245ee666&profile_id=164&oauth2_token_id=57447761",
-          token: "A",
-          type: "video/mp4",
-        },
-        createdAt: moment(
-          "Fri Nov 03 2023 19:21:14 GMT+0800 (Malaysia Time)"
-        ).toDate(),
-      },
-      {
-        sender: currentUser,
-        messageBody: {
-          fileName:
-            "https://images.pexels.com/photos/3726314/pexels-photo-3726314.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
-          token: "B",
-          type: "image/png",
-        },
-        createdAt: moment(
-          "Fri Nov 03 2023 19:21:18 GMT+0800 (Malaysia Time)"
-        ).toDate(),
+          "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: "Here's mine! He says hello!",
-        createdAt: moment(
-          "Fri Nov 03 2023 19:22:14 GMT+0800 (Malaysia Time)"
-        ).toDate(),
+        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("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,
   });
 
-  const handleOnSendMessage = (conversation: Conversation) => {
-    setConversation(conversation);
-    setMessage("");
-    setFile(undefined);
-  };
+  // --- 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());
 
-  const handleOnSearch = (searchMessage: string) => {
-    if (searchMessage.length === 0) {
+  // --- File attach with URI footer ---
+  const [msg10, setMsg10] = useState("");
+  const [conv10, setConv10] = useState(makeConversation());
+  const [files10, setFiles10] = useState<File[]>([]);
+
+  const sendMessage =
+    (
+      conv: Conversation,
+      setConv: (c: Conversation) => void,
+      setMsg: (s: string) => void
+    ) =>
+    (updated: Conversation) => {
+      setConv(updated);
+      setMsg("");
+    };
+
+  const handleSearch = (searchMessage: string) => {
+    if (!searchMessage) {
       setSearch("");
-      setFilteredConversation(null);
+      setFilteredConv(null);
     } else {
-      const dupMessageList = conversation.messageList.filter((eachMessage) => {
-        if (typeof eachMessage.messageBody === "string") {
-          return eachMessage.messageBody
-            .toLowerCase()
-            .includes(searchMessage.toLowerCase());
-        }
-        return null;
+      setFilteredConv({
+        ...conv3,
+        messageList: conv3.messageList.filter(
+          (m) =>
+            typeof m.messageBody === "string" &&
+            m.messageBody.toLowerCase().includes(searchMessage.toLowerCase())
+        ),
       });
-      const dupConversation = {
-        id: conversation.id,
-        members: [...conversation.members],
-        messageList: [...dupMessageList],
-      };
-      setFilteredConversation(dupConversation);
     }
   };
 
-  const handleOnClearMessage = () => {
-    setFilteredConversation(null);
-    setConversation({
-      id: "1",
-      members: [currentUser, botUser],
-      messageList: [],
+  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],
     });
-  };
 
-  const handleOnChangeUpload = (e: any) => {
-    if (e && e.target.files.length > 0) {
-      setFile(e.target.files[0]);
-    } else {
-      setFile(undefined);
-    }
-  };
+    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 handleOnSendUpload = (conversation: Conversation) => {
-    if (file && conversation) {
-      setLoading(true);
-      const dupConversation = {
-        id: conversation.id,
-        members: [...conversation.members],
-        messageList: [...conversation.messageList],
-      };
-      const fileUrl = URL.createObjectURL(file);
-      const fileObj = {
-        fileName: fileUrl,
-        token: uuidv4(),
-        type: file.type,
-      };
-      dupConversation.messageList.push({
-        sender: currentUser,
-        messageBody: fileObj,
-        createdAt: moment().toDate(),
+    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 };
       });
-      setTimeout(() => {
-        setConversation(dupConversation);
-        setMessage("");
-        setFile(undefined);
-        setLoading(false);
-      }, 5000);
-    }
+      setIsLoading6(false);
+    }, totalDelay);
   };
 
-  const headerElement = (
-    <div className="p-2 bg-primary-500 rounded-t-md">
-      <img src={Logo} alt="" className="h-12" />
-    </div>
-  );
+  const handleSendWithReply = (updated: Conversation) => {
+    setConv5(updated);
+    setMsg5("");
+    setIsLoading(true);
+    setTimeout(() => {
+      setConv5((prev) => ({
+        ...prev,
+        messageList: [
+          ...prev.messageList,
+          {
+            sender: botUser,
+            messageBody: "Got it! Let me look into that for you.",
+            createdAt: dayjs().toDate(),
+          },
+        ],
+      }));
+      setIsLoading(false);
+    }, 2000);
+  };
 
-  const renderFooterElement = () => {
-    if (conversation.messageList.length >= messageLimit)
-      return (
-        <div className="p-2">
-          <div className="p-2 text-xs border rounded-md shadow-md bg-primary-50 border-primary-300">
-            <p>
-              You have reached the message limit of: {messageLimit}
-              <br />
-              Clear previous messages to send a new one.
-            </p>
-            <TextButton
-              text="Clear now"
-              onClick={handleOnClearMessage}
-              className="mt-2"
-            />
-          </div>
-        </div>
-      );
-    else return undefined;
+  // 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 footerElement = renderFooterElement();
 
-  const additionalAction: ChatBaseAction[] = [
+  const clearAction = (
+    setConv: (c: Conversation) => void
+  ): ChatBaseAction[] => [
     {
       text: "Clear",
-      onClick: handleOnClearMessage,
-      icon: <TrashIcon className="w-3 h-3" aria-hidden="true" />,
+      onClick: () => setConv(makeConversation([])),
+      icon: <TrashIcon className="w-3 h-3" />,
     },
   ];
 
-  const loadingElement = (
-    <div className="w-full h-full flex flex-col justify-center items-center">
-      <Loading />
-      <p className="mt-2">Uploading File</p>
-    </div>
-  );
+  return (
+    <>
+      <StorySection
+        title="Default"
+        description="Basic chat with send and receive. Sent messages appear on the right; received messages on the left with the sender's avatar. Received messages support markdown rendering."
+      >
+        <ChatBase
+          open
+          value={msg1}
+          currentUser={currentUser}
+          conversation={conv1}
+          onSendMessage={sendMessage(conv1, setConv1, setMsg1)}
+          onChangeMessage={(e) => setMsg1(e.target.value)}
+          additionalAction={clearAction(setConv1)}
+          sizeClassName="h-[500px] w-96"
+          disableMobileResize
+        />
+      </StorySection>
 
-  useEffect(() => {
-    setTimeout(() => {
-      const dupConversation: Conversation = {
-        id: conversation.id,
-        members: [...conversation.members],
-        messageList: [...conversation.messageList],
-      };
-      dupConversation.messageList.push({
-        sender: botUser,
-        messageBody: "Hello to you too",
-        createdAt: moment().toDate(),
-      });
-      setConversation(dupConversation);
-    }, 2000);
-  }, []);
+      <StorySection
+        title="Custom Header & Footer"
+        description="headerElement replaces the default blue header bar. footerElement renders above the message input — useful for limit warnings, disclaimers, or action prompts."
+      >
+        <ChatBase
+          open
+          value={msg2}
+          currentUser={currentUser}
+          conversation={conv2}
+          onSendMessage={sendMessage(conv2, setConv2, setMsg2)}
+          onChangeMessage={(e) => setMsg2(e.target.value)}
+          headerElement={
+            <div className="p-3 bg-primary-500 rounded-t-md flex items-center">
+              <img src={Logo} alt="Logo" className="h-8" />
+              <span className="ml-3 text-white text-sm font-medium">
+                Support Chat
+              </span>
+            </div>
+          }
+          footerElement={
+            conv2.messageList.length >= messageLimit ? (
+              <div className="p-2">
+                <div className="p-2 text-xs border rounded-md bg-primary-50 border-primary-300">
+                  Message limit reached ({messageLimit}).{" "}
+                  <TextButton
+                    text="Clear"
+                    onClick={() => setConv2(makeConversation([]))}
+                    className="inline"
+                  />
+                </div>
+              </div>
+            ) : undefined
+          }
+          disableMessageInput={conv2.messageList.length >= messageLimit}
+          sizeClassName="h-[500px] w-96"
+          disableMobileResize
+        />
+      </StorySection>
 
-  return (
-    <ChatBase
-      open
-      value={message}
-      currentUser={currentUser}
-      conversation={filteredConversation ?? conversation}
-      fileUpload={{
-        allowFileUpload: true,
-        file: file,
-        acceptFileType: ".jpg,.jpeg,.png,.svg,.tiff,.mp4,.webm,.ogg",
-        onChangeUpload: (e) => handleOnChangeUpload(e),
-        onSendUpload: (conversation) => {
-          handleOnSendUpload(conversation);
-        },
-      }}
-      headerElement={headerElement}
-      footerElement={footerElement}
-      bodyElement={loading ? loadingElement : undefined}
-      additionalAction={additionalAction}
-      searchMessage={search}
-      onChangeSearch={(e) => setSearch(e.target.value)}
-      onSendMessage={handleOnSendMessage}
-      onChangeMessage={(e) => setMessage(e.target.value)}
-      onSearch={handleOnSearch}
-      className="w-full border border-gray-200 shadow-lg sm:w-96"
-      disableMobileResize
-      disableMessageInput={
-        conversation.messageList.length >= messageLimit || (file ? true : false)
-      }
-      onHiddenChatText={true}
-    />
+      <StorySection
+        title="Message Search"
+        description="onSearch filters the conversation to matching messages. The search box is opened via the ⋮ actions menu. onChangeSearch updates the search input value."
+      >
+        <ChatBase
+          open
+          value={msg3}
+          currentUser={currentUser}
+          conversation={filteredConv ?? conv3}
+          searchMessage={search}
+          onSendMessage={sendMessage(conv3, setConv3, setMsg3)}
+          onChangeMessage={(e) => setMsg3(e.target.value)}
+          onSearch={handleSearch}
+          onChangeSearch={(e) => setSearch(e.target.value)}
+          additionalAction={clearAction(setConv3)}
+          sizeClassName="h-[500px] w-96"
+          disableMobileResize
+        />
+      </StorySection>
+
+      <StorySection
+        title="File Upload"
+        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
+          value={msg4}
+          currentUser={currentUser}
+          conversation={conv4}
+          fileUpload={{
+            allowFileUpload: true,
+            hasFiles: files4.length > 0,
+            multiple: true,
+            acceptFileType: ".jpg,.jpeg,.png,.mp4,.webm,.pdf,.docx",
+            onChangeUpload: (e) => {
+              if (e?.target?.files?.length > 0)
+                setFiles4((prev) => [
+                  ...prev,
+                  ...Array.from(e.target.files as FileList),
+                ]);
+            },
+          }}
+          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
+        />
+      </StorySection>
+
+      <StorySection
+        title="Loading Reply"
+        description="isLoadingReply=true shows an animated typing indicator above the input and disables the message input while waiting for a response. Send a message to see the effect."
+      >
+        <ChatBase
+          open
+          value={msg5}
+          currentUser={currentUser}
+          conversation={conv5}
+          isLoadingReply={isLoading}
+          onSendMessage={handleSendWithReply}
+          onChangeMessage={(e) => setMsg5(e.target.value)}
+          sizeClassName="h-[500px] w-96"
+          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>
+    </>
   );
-});
+};