blixify-ui-web-mcp 0.1.2 → 0.1.3

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

@@ -1,12 +1,12 @@
 import { TrashIcon } from "@heroicons/react/24/outline";
 import { storiesOf } from "@storybook/react";
 import moment from "moment";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { ChatBase, ChatBaseAction, Conversation } 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";
 
 const stories = storiesOf("Chat", module);
@@ -17,290 +17,268 @@ stories.addParameters({
   },
 });
 
+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 = [
+  {
+    sender: botUser,
+    messageBody: "Hi! How can I help you? 🤖",
+    createdAt: moment("2023-11-03 12:00").toDate(),
+  },
+  {
+    sender: currentUser,
+    messageBody: "My computer keeps crashing.",
+    createdAt: moment("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(),
+  },
+  {
+    sender: currentUser,
+    messageBody: "Thanks, I'll try that!",
+    createdAt: moment("2023-11-03 12:03").toDate(),
+  },
+];
+
+const makeConversation = (messages = 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" };
+  // --- Default ---
+  const [msg1, setMsg1] = useState("");
+  const [conv1, setConv1] = useState(makeConversation());
 
-  const [message, setMessage] = useState("");
-  const [messageLimit] = useState(20);
+  // --- 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 [conv3, setConv3] = useState(makeConversation());
+  const [filteredConv, setFilteredConv] = useState<Conversation | null>(null);
+
+  // --- File upload ---
+  const [msg4, setMsg4] = useState("");
+  const [conv4, setConv4] = useState(makeConversation());
   const [file, setFile] = useState<File | any>(undefined);
-  const [loading, setLoading] = useState(false);
 
-  const [conversation, setConversation] = useState<Conversation>({
-    id: "1",
-    members: [currentUser, botUser],
-    messageList: [
-      {
-        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(),
-      },
-      {
-        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(),
-      },
-      {
-        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(),
-      },
-      {
-        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(),
-      },
-      {
-        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(),
-      },
-      {
-        sender: currentUser,
-        messageBody: "Here's mine! He says hello!",
-        createdAt: moment(
-          "Fri Nov 03 2023 19:22:14 GMT+0800 (Malaysia Time)"
-        ).toDate(),
-      },
-    ],
-  });
+  // --- Loading reply ---
+  const [msg5, setMsg5] = useState("");
+  const [conv5, setConv5] = useState(makeConversation());
+  const [isLoading, setIsLoading] = useState(false);
 
-  const handleOnSendMessage = (conversation: Conversation) => {
-    setConversation(conversation);
-    setMessage("");
-    setFile(undefined);
-  };
+  const sendMessage =
+    (
+      conv: Conversation,
+      setConv: (c: Conversation) => void,
+      setMsg: (s: string) => void
+    ) =>
+    (updated: Conversation) => {
+      setConv(updated);
+      setMsg("");
+    };
 
-  const handleOnSearch = (searchMessage: string) => {
-    if (searchMessage.length === 0) {
+  const handleSearch = (searchMessage: string) => {
+    if (!searchMessage) {
       setSearch("");
-      setFilteredConversation(null);
-    } else {
-      const dupMessageList = conversation.messageList.filter((eachMessage) => {
-        if (typeof eachMessage.messageBody === "string") {
-          return eachMessage.messageBody
-            .toLowerCase()
-            .includes(searchMessage.toLowerCase());
-        }
-        return null;
-      });
-      const dupConversation = {
-        id: conversation.id,
-        members: [...conversation.members],
-        messageList: [...dupMessageList],
-      };
-      setFilteredConversation(dupConversation);
-    }
-  };
-
-  const handleOnClearMessage = () => {
-    setFilteredConversation(null);
-    setConversation({
-      id: "1",
-      members: [currentUser, botUser],
-      messageList: [],
-    });
-  };
-
-  const handleOnChangeUpload = (e: any) => {
-    if (e && e.target.files.length > 0) {
-      setFile(e.target.files[0]);
+      setFilteredConv(null);
     } else {
-      setFile(undefined);
-    }
-  };
-
-  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(),
+      setFilteredConv({
+        ...conv3,
+        messageList: conv3.messageList.filter(
+          (m) =>
+            typeof m.messageBody === "string" &&
+            m.messageBody.toLowerCase().includes(searchMessage.toLowerCase())
+        ),
       });
-      setTimeout(() => {
-        setConversation(dupConversation);
-        setMessage("");
-        setFile(undefined);
-        setLoading(false);
-      }, 5000);
     }
   };
 
-  const headerElement = (
-    <div className="p-2 bg-primary-500 rounded-t-md">
-      <img src={Logo} alt="" className="h-12" />
-    </div>
-  );
-
-  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;
+  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: moment().toDate(),
+          },
+        ],
+      }));
+      setIsLoading(false);
+    }, 2000);
   };
-  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. The selected file is previewed before sending. onSendUpload is called with the current conversation when the send button is clicked."
+      >
+        <ChatBase
+          open
+          value={msg4}
+          currentUser={currentUser}
+          conversation={conv4}
+          fileUpload={{
+            allowFileUpload: true,
+            file,
+            acceptFileType: ".jpg,.jpeg,.png,.mp4,.webm",
+            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("");
+              }
+            },
+          }}
+          onSendMessage={sendMessage(conv4, setConv4, setMsg4)}
+          onChangeMessage={(e) => setMsg4(e.target.value)}
+          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>
+    </>
   );
 });