blixify-ui-web-mcp 0.1.2 → 0.1.18

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

@@ -4,7 +4,7 @@
 
 <hr>
 
-Chat Dashboard
+A two-panel chat layout with a scrollable conversation list on the left and a `ChatBase` chat window on the right. On mobile, the two panels toggle — the list hides when a conversation is selected and reappears when the user navigates back. The conversation list is sorted and updated automatically as new messages are sent.
 
 ##### Import
 
@@ -16,146 +16,106 @@ import { ChatDashboard } from "blixify-ui-web/components/chat/chatDashboard";
 
 ```jsx
 const [message, setMessage] = useState("");
-const [search, setSearch] = useState("");
-const [isLoading, setIsLoading] = useState(false);
+const [conversation, setConversation] = useState<Conversation>(conversationList[0]);
+const [conversationList, setConversationList] = useState<Conversation[]>(seedList);
 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);
+const handleSelectConversation = (id: string) => {
   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);
 };
 
-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);
-  }
+const handleSendMessage = (updated: Conversation) => {
+  setConversation(updated);
+  setMessage("");
+  setConversationList((prev) =>
+    prev.map((c) => (c.id === updated.id ? updated : c))
+  );
 };
 
-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}
-  />
+// Custom header with a back button for mobile
+const headerElement = (
+  <div className="flex items-center h-12 bg-primary-500 text-white px-4">
+    <button
+      className="sm:hidden mr-2"
+      onClick={() => setMobileSelectedChat(false)}
+    >
+      ←
+    </button>
+    <span>{otherUser?.name}</span>
+  </div>
 );
+
+<ChatDashboard
+  value={message}
+  currentUser={currentUser}
+  selectedConversation={conversation}
+  conversationList={conversationList}
+  mobileSelectedChat={mobileSelectedChat}
+  sizeClassName="w-64 h-[60vh]"
+  chatBaseSizeClassName="w-full h-[60vh]"
+  headerElement={headerElement}
+  onChangeMessage={(e) => setMessage(e.target.value)}
+  onSendMessage={handleSendMessage}
+  handleSelectedConversation={handleSelectConversation}
+/>
 ```
 
 ##### 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            |
+| Name                         | Type                   | Description                                                                                                         |
+| ---------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| `value`                      | `string`               | Current message input value                                                                                         |
+| `currentUser`                | `User`                 | The logged-in user — used to identify which side messages appear on and to find the other user in each conversation |
+| `selectedConversation`       | `Conversation`         | The conversation currently displayed in the chat panel                                                              |
+| `conversationList`           | `Conversation[]`       | All conversations shown in the left panel list                                                                      |
+| `handleSelectedConversation` | `(id: string) => void` | Called with the conversation `id` when a list item is clicked                                                       |
 
 ##### 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        |
+| Name                    | Type                                   | Default    | Description                                                                                                                       |
+| ----------------------- | -------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `mobileSelectedChat`    | `boolean`                              | `false`    | When `true`, hides the conversation list and shows the chat panel on mobile. Set to `false` to go back to the list.               |
+| `disableMessageInput`   | `boolean`                              | `false`    | When `true`, message input is disabled.                                                                                           |
+| `searchMessage`         | `string`                               | —          | Current search input value. Pass a filtered conversation to `selectedConversation` to show results.                               |
+| `headerElement`         | `ReactElement`                         | —          | Replaces the default `ChatBase` header. Use this to show the other user's name and a mobile back button.                          |
+| `bodyElement`           | `ReactElement`                         | —          | Replaces the `ChatBase` message list. Useful for showing a loading spinner while fetching messages.                               |
+| `className`             | `string`                               | —          | Tailwind classes for the conversation list panel container                                                                        |
+| `sizeClassName`         | `string`                               | `h-[75vh]` | Tailwind classes controlling the height/width of the conversation list panel                                                      |
+| `chatBaseClassName`     | `string`                               | —          | Tailwind classes for the `ChatBase` container                                                                                     |
+| `chatBaseSizeClassName` | `string`                               | —          | Tailwind classes controlling the height/width of the `ChatBase` panel                                                             |
+| `onSendMessage`         | `(conversation: Conversation) => void` | —          | Called with the updated conversation when a message is sent                                                                       |
+| `onChangeMessage`       | `(event: any) => void`                 | —          | Called on every keystroke in the message input                                                                                    |
+| `onSearch`              | `(searchMessage: string) => void`      | —          | Called when the search form is submitted inside `ChatBase`                                                                        |
+| `onChangeSearch`        | `(event: any) => void`                 | —          | Called on every keystroke in the search input inside `ChatBase`                                                                   |
+| `additionalAction`      | `ChatBaseAction[]`                     | —          | Extra items appended to the `⋮` actions menu in the chat panel. Each item requires `text` and `onClick`, with an optional `icon`. |
+
+##### Conversation list behaviour
+
+Each item in `conversationList` renders the other user's avatar and name (the member whose `id` differs from `currentUser.id`) and the last message body as a preview. Items with a `FileObj` message body show an empty preview string.
+
+##### User
+
+| Name       | Type     | Description                                       |
+| ---------- | -------- | ------------------------------------------------- |
+| `id`       | `string` | Unique identifier                                 |
+| `name`     | `string` | Display name                                      |
+| `imageUrl` | `string` | Avatar URL — shown in the conversation list items |
+
+##### Conversation
+
+| Name          | Type        | Description                                                  |
+| ------------- | ----------- | ------------------------------------------------------------ |
+| `id`          | `string`    | Unique conversation identifier                               |
+| `members`     | `User[]`    | Participants — must include `currentUser` and one other user |
+| `messageList` | `Message[]` | Ordered list of messages                                     |
+
+##### Message
+
+| Name           | Type                | Description                                                       |
+| -------------- | ------------------- | ----------------------------------------------------------------- |
+| `sender`       | `User`              | The user who sent the message.                                    |
+| `messageBody`  | `string \| FileObj` | Text content or a file object for image/video messages            |
+| `reactElement` | `ReactElement`      | Optional — replaces `messageBody` rendering with a custom element |
+| `createdAt`    | `Date`              | Timestamp                                                         |