blixify-ui-web-mcp 0.1.2 → 0.1.18

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

@@ -1,154 +1,443 @@
-import { ChevronLeftIcon } from "@heroicons/react/24/outline";
-import { storiesOf } from "@storybook/react";
-import moment from "moment";
+import {
+  ChevronLeftIcon,
+  PencilSquareIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
+import dayjs from "../../dayjs";
 import React, { useEffect, useState } from "react";
+import { v4 as uuidv4 } from "uuid";
 import { ChatDashboard } from ".";
-import Logo from "../../../assets/logo.png";
+import { StorySection } from "../../storyUtils";
 import { IconButton } from "../../action/iconButton";
 import { Loading } from "../../display/loading";
-import { Conversation } from "../chatBase";
-import { conversationList as convoList, currentUser } from "../chatUtils";
-import README from "./README.md";
+import { ChatBaseAction, Conversation } from "../chatBase";
+import { conversationList as seedConvoList, currentUser } from "../chatUtils";
+import { Button } from "../../action/button";
 
-const stories = storiesOf("Chat", module);
+const meta = { title: "Chat/Chat Dashboard" };
+export default meta;
 
-stories.addParameters({
-  readme: {
-    content: README,
-  },
-});
 
-stories.add("Chat Dashboard", () => {
+const sortByLatest = (list: Conversation[]) =>
+  [...list].sort((a, b) =>
+    dayjs(b.messageList[b.messageList.length - 1].createdAt).diff(
+      dayjs(a.messageList[a.messageList.length - 1].createdAt),
+    ),
+  );
+
+// INFO: demo statuses for renderConversationMeta / renderHeaderTags
+const DEMO_STATUSES = ["active", "waiting", "closed", "assigned"];
+const DEMO_BADGE_COLORS: Record<string, string> = {
+  active: "bg-green-100 text-green-700",
+  waiting: "bg-yellow-100 text-yellow-700",
+  closed: "bg-gray-100 text-gray-500",
+  assigned: "bg-blue-100 text-blue-700",
+};
+
+export const ChatDashboardStory = () => {
+  // INFO: Section 1 — Base chat state
   const [message, setMessage] = useState("");
   const [search, setSearch] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [mobileSelectedChat, setMobileSelectedChat] = useState(false);
   const [filteredConversation, setFilteredConversation] =
-    useState<Conversation | null>();
+    useState<Conversation | null>(null);
+  const [conversationList, setConversationList] = useState<Conversation[]>([]);
   const [conversation, setConversation] = useState<Conversation>({
     id: "",
     members: [],
     messageList: [],
   });
-  const [conversationList, setConversationList] = useState<Conversation[]>([]);
+  const [file, setFile] = useState<File | any>(undefined);
 
-  useEffect(() => {
-    handleSortConvoList(convoList);
-  }, []);
+  // INFO: Section 2 — Meta & Tags state
+  const [metaConvoList, setMetaConvoList] = useState<Conversation[]>([]);
+  const [metaConvo, setMetaConvo] = useState<Conversation>({
+    id: "",
+    members: [],
+    messageList: [],
+  });
+  const [metaMessage, setMetaMessage] = useState("");
 
-  const handleOnSearch = (searchMessage: string) => {
-    if (searchMessage.length === 0) {
-      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);
-    }
-  };
+  // INFO: Section 3 — Pagination state
+  const [paginationConvoList, setPaginationConvoList] = useState<
+    Conversation[]
+  >([]);
+  const [paginationConvo, setPaginationConvo] = useState<Conversation>({
+    id: "",
+    members: [],
+    messageList: [],
+  });
+  const [paginationMessage, setPaginationMessage] = useState("");
+  const [page, setPage] = useState(1);
+  const [loadingConversations, setLoadingConversations] = useState(false);
+  const [loadingMessages, setLoadingMessages] = useState(false);
+  const [msgPage, setMsgPage] = useState(1);
 
-  const handleOnSendMessage = (conversation: Conversation) => {
-    setConversation({
-      id: conversation.id,
-      members: [...conversation.members],
-      messageList: [...conversation.messageList],
-    });
-    setMessage("");
-    const dupConvoList = conversationList.map((eachConvo, i) => {
-      if (eachConvo.id === conversation.id) {
-        return conversation;
-      }
-      return eachConvo;
+  // INFO: pageNum 0 generates 15 contacts to ensure the list overflows and is scrollable
+  const generateConversations = (pageNum: number): Conversation[] => {
+    const count = pageNum === 1 ? 15 : 5;
+    return Array.from({ length: count }, (_, i) => {
+      const idx = (pageNum - 1) * 5 + i;
+      const otherUser = {
+        id: `user-${idx}`,
+        name: `Contact ${idx + 1}`,
+        imageUrl: `https://ui-avatars.com/api/?name=C${idx + 1}&background=6366f1&color=fff`,
+      };
+      return {
+        id: uuidv4(),
+        members: [currentUser, otherUser],
+        messageList: Array.from({ length: 10 }, (_, j) => ({
+          sender: j % 2 === 0 ? otherUser : currentUser,
+          messageBody: `Message ${j + 1} from page ${pageNum}`,
+          createdAt: dayjs()
+            .subtract(10 - j, "minutes")
+            .toDate(),
+        })),
+      };
     });
-
-    handleSortConvoList(dupConvoList);
   };
 
-  const handleSortConvoList = (convoList: Conversation[]) => {
-    const sortedConvoList = convoList.sort((a, b) => {
-      return moment(b.messageList[b.messageList.length - 1].createdAt).diff(
-        moment(a.messageList[a.messageList.length - 1].createdAt)
-      );
-    });
-    setConversationList(sortedConvoList);
-    setConversation(sortedConvoList[0]);
-  };
+  useEffect(() => {
+    // INFO: inject demo images of varying aspect ratios to exercise the bubble size cap
+    const demoImages = [
+      { id: 1015, w: 1600, h: 900, label: "Landscape (16:9)" },
+      { id: 1027, w: 900, h: 1600, label: "Portrait (9:16)" },
+      { id: 237, w: 1200, h: 1200, label: "Square (1:1)" },
+    ];
+    const withImages = seedConvoList.map((convo, idx) =>
+      idx === 0
+        ? {
+            ...convo,
+            messageList: [
+              ...convo.messageList,
+              ...demoImages.map((img) => ({
+                sender: convo.members.find((m) => m.id !== currentUser.id)!,
+                messageBody: {
+                  fileName: `https://picsum.photos/id/${img.id}/${img.w}/${img.h}`,
+                  token: img.label,
+                  type: "image/jpeg",
+                },
+                createdAt: dayjs().subtract(demoImages.length - img.id, "minutes").toDate(),
+              })),
+              {
+                sender: convo.members.find((m) => m.id !== currentUser.id)!,
+                messageBody: {
+                  fileName: "https://www.w3schools.com/html/mov_bbb.mp4",
+                  token: "Sample video",
+                  type: "video/mp4",
+                },
+                createdAt: dayjs().toDate(),
+              },
+            ],
+          }
+        : convo,
+    );
+    const sorted = sortByLatest(withImages);
+    setConversationList(sorted);
+    setConversation(sorted[0]);
+    setMetaConvoList(sorted);
+    setMetaConvo(sorted[0]);
+    const initial = generateConversations(1);
+    setPaginationConvoList(initial);
+    setPaginationConvo(initial[0]);
+  }, []);
 
-  const handleMessageList = (id: string) => {
+  const handleSelectConversation = (id: string) => {
     setIsLoading(true);
     setMobileSelectedChat(true);
     setTimeout(() => {
       setIsLoading(false);
-      conversationList.map((eachConversation) => {
-        if (eachConversation.id === id) {
-          setConversation(eachConversation);
-        }
-        return null;
-      });
-    }, 1000);
+      const found = conversationList.find((c) => c.id === id);
+      if (found) setConversation(found);
+    }, 800);
   };
 
-  const renderBodyElement = () => {
-    return isLoading ? (
-      <div className="w-full">
-        <Loading />
-      </div>
-    ) : undefined;
+  const handleSendMessage = (updated: Conversation) => {
+    setConversation(updated);
+    setMessage("");
+    setConversationList(
+      sortByLatest(
+        conversationList.map((c) => (c.id === updated.id ? updated : c)),
+      ),
+    );
   };
 
-  const renderHeaderElement = () => {
-    const otherUser = conversation.members.find((eachMember) => {
-      return eachMember.id !== currentUser.id;
-    });
-    const userName = otherUser ? otherUser.name : "";
-
-    return (
-      <div className="w-full flex items-center h-12 text-white bg-primary-500 text-center">
-        <IconButton
-          icon={<ChevronLeftIcon className="w-6 h-6" />}
-          background="bg-transparent"
-          onClick={() => setMobileSelectedChat(false)}
-          className={`${!mobileSelectedChat ? "hidden sm:flex" : ""} sm:hidden`}
-        />
-        <p className="ml-2 sm:ml-12">{userName}</p>
-      </div>
+  const handleSearch = (searchMessage: string) => {
+    if (!searchMessage) {
+      setSearch("");
+      setFilteredConversation(null);
+    } else {
+      setFilteredConversation({
+        ...conversation,
+        messageList: conversation.messageList.filter(
+          (m) =>
+            typeof m.messageBody === "string" &&
+            m.messageBody.toLowerCase().includes(searchMessage.toLowerCase()),
+        ),
+      });
+    }
+  };
+
+  const handleSendUpload = (conv: Conversation, uploadedFile: File) => {
+    const fileUrl = URL.createObjectURL(uploadedFile);
+    const updated: Conversation = {
+      ...conv,
+      messageList: [
+        ...conv.messageList,
+        {
+          sender: currentUser,
+          messageBody: {
+            fileName: fileUrl,
+            token: uuidv4(),
+            type: uploadedFile.type,
+          },
+          createdAt: dayjs().toDate(),
+        },
+      ],
+    };
+    setConversation(updated);
+    setFile(undefined);
+    setConversationList(
+      sortByLatest(
+        conversationList.map((c) => (c.id === updated.id ? updated : c)),
+      ),
     );
   };
 
+  const otherUser = conversation.members.find((m) => m.id !== currentUser.id);
+
   return (
-    <div>
-      <div className="flex justify-center items-center py-2 space-x-4">
-        <img src={Logo} alt="" className="h-14" />
-        <h1 className="text-2xl text-primary-400">Chat App</h1>
-      </div>
-      <ChatDashboard
-        value={message}
-        searchMessage={search}
-        currentUser={currentUser}
-        selectedConversation={filteredConversation ?? conversation}
-        conversationList={conversationList}
-        mobileSelectedChat={mobileSelectedChat}
-        sizeClassName="w-full h-[50vh] sm:h-[50vh]"
-        chatBaseSizeClassName="w-full h-[50vh] sm:h-[50vh]"
-        headerElement={renderHeaderElement()}
-        bodyElement={renderBodyElement()}
-        onChangeMessage={(e) => setMessage(e.target.value)}
-        handleSelectedConversation={handleMessageList}
-        onSendMessage={handleOnSendMessage}
-        onChangeSearch={(e) => setSearch(e.target.value)}
-        onSearch={handleOnSearch}
-      />
-    </div>
+    <>
+      {/* INFO: Section 1 — Base chat with file upload, search, actions */}
+      <StorySection
+        title="Base Chat"
+        description="Two-panel layout with conversation list, file upload, search, and actions. Mobile toggle via mobileSelectedChat."
+      >
+        <div className="w-full">
+          <ChatDashboard
+            value={message}
+            searchMessage={search}
+            currentUser={currentUser}
+            selectedConversation={filteredConversation ?? conversation}
+            conversationList={conversationList}
+            mobileSelectedChat={mobileSelectedChat}
+            sizeClassName="w-96 h-[60vh]"
+            chatBaseSizeClassName="w-full h-[60vh]"
+            headerElement={
+              <div className="w-full flex items-center h-12 text-white bg-primary-500">
+                <IconButton
+                  icon={<ChevronLeftIcon className="w-6 h-6" />}
+                  background="bg-transparent"
+                  onClick={() => setMobileSelectedChat(false)}
+                  className={`${!mobileSelectedChat ? "hidden sm:flex" : ""} sm:hidden`}
+                />
+                <p className="ml-2 sm:ml-4 font-medium">
+                  {otherUser?.name ?? "Chat"}
+                </p>
+              </div>
+            }
+            bodyElement={
+              isLoading ? (
+                <div className="w-full h-full flex items-center justify-center">
+                  <Loading />
+                </div>
+              ) : undefined
+            }
+            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: handleSendUpload,
+            }}
+            leftPanelHeaderElement={
+              <div className="p-4">
+                <Button
+                  type="normal"
+                  size="small"
+                  text="New Chat"
+                  icon={<PencilSquareIcon className="w-4 h-4" />}
+                  onClick={() => alert("New Chat clicked")}
+                  className="w-full"
+                />
+              </div>
+            }
+            onChangeMessage={(e) => setMessage(e.target.value)}
+            onSendMessage={handleSendMessage}
+            onChangeSearch={(e) => setSearch(e.target.value)}
+            onSearch={handleSearch}
+            handleSelectedConversation={handleSelectConversation}
+            additionalAction={
+              [
+                {
+                  text: "Clear Chat",
+                  onClick: () =>
+                    setConversation((prev) => ({ ...prev, messageList: [] })),
+                  icon: <TrashIcon className="w-3 h-3" />,
+                },
+              ] as ChatBaseAction[]
+            }
+          />
+        </div>
+      </StorySection>
+
+      {/* INFO: Section 2 — renderConversationMeta + renderHeaderTags */}
+      <StorySection
+        title="Meta Badges & Header Tags"
+        description="renderConversationMeta shows status badges and 'Needs Reply' on left panel items. renderHeaderTags shows tags in the chat header."
+      >
+        <div className="w-full">
+          <ChatDashboard
+            value={metaMessage}
+            currentUser={currentUser}
+            selectedConversation={metaConvo}
+            conversationList={metaConvoList}
+            sizeClassName="w-96 h-[60vh]"
+            chatBaseSizeClassName="w-full h-[60vh]"
+            headerElement={
+              <div className="w-full flex items-center h-12 px-4 text-white bg-primary-500">
+                <p className="font-medium">
+                  {metaConvo.members.find((m) => m.id !== currentUser.id)
+                    ?.name ?? "Chat"}
+                </p>
+              </div>
+            }
+            renderConversationMeta={(convo) => {
+              const status =
+                DEMO_STATUSES[
+                  Math.abs(convo.id.charCodeAt(0)) % DEMO_STATUSES.length
+                ];
+              const needsReply = convo.id.charCodeAt(0) % 2 === 0;
+              return (
+                <div className="flex gap-1 mt-1 flex-wrap">
+                  <span
+                    className={`text-[10px] px-1.5 py-0.5 rounded ${DEMO_BADGE_COLORS[status]}`}
+                  >
+                    {status}
+                  </span>
+                  {needsReply && (
+                    <span className="text-[10px] px-1.5 py-0.5 rounded bg-orange-100 text-orange-700">
+                      Needs Reply
+                    </span>
+                  )}
+                </div>
+              );
+            }}
+            renderHeaderTags={(convo) => {
+              const status =
+                DEMO_STATUSES[
+                  Math.abs(convo.id.charCodeAt(0)) % DEMO_STATUSES.length
+                ];
+              return (
+                <div className="flex gap-1">
+                  <span className="text-[10px] px-1.5 py-0.5 rounded bg-white/20 text-white">
+                    {status}
+                  </span>
+                  <span className="text-[10px] px-1.5 py-0.5 rounded bg-white/20 text-white">
+                    whatsapp
+                  </span>
+                </div>
+              );
+            }}
+            onChangeMessage={(e) => setMetaMessage(e.target.value)}
+            onSendMessage={(updated) => {
+              setMetaConvo(updated);
+              setMetaMessage("");
+              setMetaConvoList((prev) =>
+                sortByLatest(
+                  prev.map((c) => (c.id === updated.id ? updated : c)),
+                ),
+              );
+            }}
+            handleSelectedConversation={(id) => {
+              const found = metaConvoList.find((c) => c.id === id);
+              if (found) setMetaConvo(found);
+            }}
+          />
+        </div>
+      </StorySection>
+
+      {/* INFO: Section 3 — Pagination scroll callbacks */}
+      <StorySection
+        title="Pagination (Infinite Scroll)"
+        description="onConversationListScrollEnd loads more contacts with a spinner at the bottom. onMessageListScrollTop prepends older messages with a spinner at the top. Scroll to see both effects."
+      >
+        <div className="w-full">
+          <ChatDashboard
+            value={paginationMessage}
+            currentUser={currentUser}
+            selectedConversation={paginationConvo}
+            conversationList={paginationConvoList}
+            isLoadingConversations={loadingConversations}
+            isLoadingMessages={loadingMessages}
+            sizeClassName="w-96 h-[60vh]"
+            chatBaseSizeClassName="w-full h-[60vh]"
+            headerElement={
+              <div className="w-full flex items-center h-12 px-4 text-white bg-primary-500">
+                <p className="font-medium">
+                  {paginationConvo.members.find(
+                    (m) => m.id !== currentUser.id,
+                  )?.name ?? "Chat"}
+                </p>
+              </div>
+            }
+            onConversationListScrollEnd={() => {
+              setLoadingConversations(true);
+              const nextPage = page + 1;
+              setTimeout(() => {
+                const more = generateConversations(nextPage);
+                setPaginationConvoList((prev) => [...prev, ...more]);
+                setPage(nextPage);
+                setLoadingConversations(false);
+              }, 1000);
+            }}
+            onMessageListScrollTop={() => {
+              setLoadingMessages(true);
+              const nextMsgPage = msgPage + 1;
+              setTimeout(() => {
+                setPaginationConvo((prev) => ({
+                  ...prev,
+                  messageList: [
+                    ...Array.from({ length: 10 }, (_, i) => ({
+                      sender:
+                        i % 2 === 0
+                          ? prev.members.find(
+                              (m) => m.id !== currentUser.id,
+                            )!
+                          : currentUser,
+                      messageBody: `Older message ${i + 1} from page ${nextMsgPage}`,
+                      createdAt: dayjs()
+                        .subtract(nextMsgPage * 10 + (10 - i), "minutes")
+                        .toDate(),
+                    })),
+                    ...prev.messageList,
+                  ],
+                }));
+                setMsgPage(nextMsgPage);
+                setLoadingMessages(false);
+              }, 1000);
+            }}
+            onChangeMessage={(e) => setPaginationMessage(e.target.value)}
+            onSendMessage={(updated) => {
+              setPaginationConvo(updated);
+              setPaginationMessage("");
+              setPaginationConvoList((prev) =>
+                sortByLatest(
+                  prev.map((c) => (c.id === updated.id ? updated : c)),
+                ),
+              );
+            }}
+            handleSelectedConversation={(id) => {
+              const found = paginationConvoList.find((c) => c.id === id);
+              if (found) setPaginationConvo(found);
+            }}
+          />
+        </div>
+      </StorySection>
+    </>
   );
-});
+}