blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,306 @@
+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 Logo from "../../../assets/logo.png";
+import { TextButton } from "../../action/textButton";
+import { Loading } from "../../display/loading";
+import README from "./README.md";
+
+const stories = storiesOf("Chat", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+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 [message, setMessage] = useState("");
+  const [messageLimit] = useState(20);
+  const [search, setSearch] = useState("");
+  const [filteredConversation, setFilteredConversation] =
+    useState<Conversation | null>();
+  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(),
+      },
+    ],
+  });
+
+  const handleOnSendMessage = (conversation: Conversation) => {
+    setConversation(conversation);
+    setMessage("");
+    setFile(undefined);
+  };
+
+  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);
+    }
+  };
+
+  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]);
+    } 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(),
+      });
+      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 footerElement = renderFooterElement();
+
+  const additionalAction: ChatBaseAction[] = [
+    {
+      text: "Clear",
+      onClick: handleOnClearMessage,
+      icon: <TrashIcon className="w-3 h-3" aria-hidden="true" />,
+    },
+  ];
+
+  const loadingElement = (
+    <div className="w-full h-full flex flex-col justify-center items-center">
+      <Loading />
+      <p className="mt-2">Uploading File</p>
+    </div>
+  );
+
+  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);
+  }, []);
+
+  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}
+    />
+  );
+});

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

@@ -0,0 +1,161 @@
+# Chat Dashboard
+
+<!-- STORY -->
+
+<hr>
+
+Chat Dashboard
+
+##### Import
+
+```js
+import { ChatDashboard } from "blixify-ui-web/components/chat/chatDashboard";
+```
+
+##### Usage
+
+```jsx
+const [message, setMessage] = useState("");
+const [search, setSearch] = useState("");
+const [isLoading, setIsLoading] = useState(false);
+const [mobileSelectedChat, setMobileSelectedChat] = useState(false);
+const [filteredConversation, setFilteredConversation] =
+  useState<Conversation | null>();
+const [conversation, setConversation] = useState<Conversation>({
+  id: "",
+  members: [],
+  messageList: [],
+});
+const [conversationList, setConversationList] = useState<Conversation[]>([]);
+
+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;
+  });
+
+  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]);
+};
+
+const handleMessageList = (id: string) => {
+  setIsLoading(true);
+  setMobileSelectedChat(true);
+  setTimeout(() => {
+    setIsLoading(false);
+    conversationList.map((eachConversation) => {
+      if (eachConversation.id === id) {
+        setConversation(eachConversation);
+      }
+      return null;
+    });
+  }, 1000);
+};
+
+const handleOnSearch = (searchMessage: string) => {
+  if (searchMessage.length === 0) {
+    setSearch("");
+    setFilteredConversation(null);
+  } else {
+    const dupMessageList = conversation.messageList.filter((eachMessage) => {
+      return eachMessage.messageBody
+        .toLowerCase()
+        .includes(searchMessage.toLowerCase());
+    });
+    const dupConversation = {
+      id: conversation.id,
+      members: [...conversation.members],
+      messageList: [...dupMessageList],
+    };
+    setFilteredConversation(dupConversation);
+  }
+};
+
+return (
+  <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}
+  />
+);
+```
+
+##### Required props
+
+| Name                 | Type             | Description                             |
+| -------------------- | ---------------- | --------------------------------------- |
+| value                | `string`         | Message input text                      |
+| currentUser          | `User`           | User Object                             |
+| selectedConversation | `Conversation`   | Selected Conversation Object to display |
+| conversationList     | `Conversation[]` | List of Conversation Objects            |
+
+##### Optional props
+
+| Name                       | Type                 | Default                         | Description                       |
+| -------------------------- | -------------------- | ------------------------------- | --------------------------------- |
+| mobileSelectedChat         | `boolean`            | false                           | Mobile state for selected chat    |
+| searchMessage              | `string`             | ""                              | Search input text                 |
+| headerElement              | `React Element`      | null                            | Replaces default component Header |
+| bodyElement                | `React Element`      | null                            | Replaces default component Body   |
+| className                  | `tailwind classname` | ""                              | For component container           |
+| sizeClassName              | `tailwind classname` | ""                              | For component size                |
+| chatBaseClassName          | `tailwind classname` | ""                              | For Chat Base component container |
+| chatBaseSizeClassName      | `tailwind classname` | ""                              | For Chat Base component size      |
+| onSendMessage              | `function`           | `(event: any) => {}`            | To send message                   |
+| onChangeMessage            | `function`           | `(event: any) => {}`            | To type in message input          |
+| onChangeSearch             | `function`           | `(event: any) => {}`            | To type in search input           |
+| onSearch                   | `function`           | `(searchMessage: string) => {}` | To search in messages             |
+| handleSelectedConversation | `function`           | `(id: string) => {}`            | Display selected conversation     |
+
+##### Interface User
+
+| Name       | Type     | Description       |
+| ---------- | -------- | ----------------- |
+| `id`       | `string` | Required id       |
+| `name`     | `string` | Required name     |
+| `imageUrl` | `string` | Optional imageURL |
+
+##### Interface Conversation
+
+| Name          | Type        | Description               |
+| ------------- | ----------- | ------------------------- |
+| `id`          | `string`    | Required id               |
+| `members`     | `User[]`    | Required list of Users    |
+| `messageList` | `Message[]` | Required list of Messages |
+
+##### Interface Message
+
+| Name          | Type     | Description          |
+| ------------- | -------- | -------------------- |
+| `sender`      | `User`   | Required User        |
+| `messageBody` | `string` | Required messageBody |
+| `createdAt`   | `Date`   | Required date        |

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

@@ -0,0 +1,154 @@
+import { ChevronLeftIcon } from "@heroicons/react/24/outline";
+import { storiesOf } from "@storybook/react";
+import moment from "moment";
+import React, { useEffect, useState } from "react";
+import { ChatDashboard } from ".";
+import Logo from "../../../assets/logo.png";
+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";
+
+const stories = storiesOf("Chat", module);
+
+stories.addParameters({
+  readme: {
+    content: README,
+  },
+});
+
+stories.add("Chat Dashboard", () => {
+  const [message, setMessage] = useState("");
+  const [search, setSearch] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [mobileSelectedChat, setMobileSelectedChat] = useState(false);
+  const [filteredConversation, setFilteredConversation] =
+    useState<Conversation | null>();
+  const [conversation, setConversation] = useState<Conversation>({
+    id: "",
+    members: [],
+    messageList: [],
+  });
+  const [conversationList, setConversationList] = useState<Conversation[]>([]);
+
+  useEffect(() => {
+    handleSortConvoList(convoList);
+  }, []);
+
+  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);
+    }
+  };
+
+  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;
+    });
+
+    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]);
+  };
+
+  const handleMessageList = (id: string) => {
+    setIsLoading(true);
+    setMobileSelectedChat(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      conversationList.map((eachConversation) => {
+        if (eachConversation.id === id) {
+          setConversation(eachConversation);
+        }
+        return null;
+      });
+    }, 1000);
+  };
+
+  const renderBodyElement = () => {
+    return isLoading ? (
+      <div className="w-full">
+        <Loading />
+      </div>
+    ) : undefined;
+  };
+
+  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>
+    );
+  };
+
+  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>
+  );
+});

package/lib/components/data/dataGraph/README.md

@@ -0,0 +1,13 @@
+# Data Graph
+
+<!-- STORY -->
+
+<hr>
+
+Data Graph for Dashboard
+
+##### Import
+
+```js
+import { DataGraph } from "blixify-ui-web/components/data/dataGraph";
+```