quickblox-react-ui-kit 0.3.0-beta.2 → 0.3.0-beta.3

package/src/Presentation/layouts/Desktop/DesktopLayout.scss

@@ -4,9 +4,9 @@ $desktop-main-container-item-width: 320px;
 $desktop-main-container-item-center-width: 720px;
 // $desktop-main-container-item-center-width: 1040px;
 
-.desktop-layout-main-container{
+.desktop-layout-main-container {
   // border: 1px solid var(--color-divider, #e7efff);
-   // border: 2px solid #6c38cc;
+  // border: 2px solid #6c38cc;
   // min-height: $desktop-main-container-min-height;
   // max-width: $desktop-main-container-max-width;
   // height: calc(100vh - 128px);
@@ -23,8 +23,8 @@ $desktop-main-container-item-center-width: 720px;
     height: 100%;
   }
   &__item-right {
-    border: 1px solid  var(--divider);
-    flex: 1 1 $desktop-main-container-item-width;
+    border: 1px solid var(--divider);
+    flex: 1 0 $desktop-main-container-item-width;
     // max-width: $desktop-main-container-item-width
     width: 100%;
     height: 100%;
@@ -34,14 +34,14 @@ $desktop-main-container-item-center-width: 720px;
     border-style: solid;
     border-color: var(--divider, #e7efff);
     border-width: 1px 1px 1px 0;
-   // flex: 3 2 $desktop-main-container-item-center-width;
+    // flex: 3 2 $desktop-main-container-item-center-width;
     height: 100%;
     width: 100%;
-   //  min-width: 320px;
+    //  min-width: 320px;
   }
 }
 
-.dialog-leave-container{
+.dialog-leave-container {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -49,7 +49,7 @@ $desktop-main-container-item-center-width: 720px;
   gap: 8px;
 }
 
-.empty-chat-placeholder{
+.empty-chat-placeholder {
   display: flex;
   justify-content: center;
   align-items: center;

package/src/Presentation/layouts/Desktop/QuickBloxUIKitDesktopLayout.tsx

@@ -60,6 +60,7 @@ import { MessageSeparator, Placeholder } from '../../ui-components';
 import ToastProvider from '../../ui-components/Toast/ToastProvider';
 import CreateNewDialogFlow from '../../Views/Flow/CreateDialogFlow/CreateNewDialogFlow';
 import useModal from '../../../hooks/useModal';
+import useQBConnection from '../../providers/QuickBloxUIKitProvider/useQBConnection';
 
 type AIWidgetPlaceHolder = {
   enabled: boolean;
@@ -102,16 +103,34 @@ const QuickBloxUIKitDesktopLayout: React.FC<
   // @ts-ignore
   const userName =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userName;
-  const userId =
+  const currentUserId =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId;
-  // const currentUserName =
-  //  currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userName;
   const sessionToken =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.sessionToken;
 
   const dialogsViewModel: DialogListViewModel =
     useDialogListViewModel(currentContext);
 
+  // must re-create as result dialog changing
+  const messagesViewModel: DialogViewModel = useDialogViewModel(
+    dialogsViewModel.entity?.type,
+    dialogsViewModel.entity,
+  );
+
+  const { connectionRepository, browserOnline } = useQBConnection();
+  const [isOnline, setIsOnline] = useState<boolean>(browserOnline);
+
+  useEffect(() => {
+    if (
+      isOnline === false ||
+      connectionRepository.isChatConnected() === false
+    ) {
+      setIsOnline(false);
+    } else {
+      setIsOnline(true);
+    }
+  }, [browserOnline, connectionRepository.isChatConnected()]);
+
   let defaultAIRephraseWidget = AIRephrase?.AIWidget; // useDefaultTextInputWidget();
   let defaultAITranslateWidget = AITranslate?.AIWidget;
   let defaultAIAssistWidget = AIAssist?.AIWidget;
@@ -232,6 +251,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
   const selectDialogActions = (item: BaseViewModel<DialogEntity>): void => {
     if (!dialogsViewModel.loading) {
       setSelectedDialog(item.entity);
+      // dialogsViewModel.entity = item.entity;
     }
   };
 
@@ -239,9 +259,14 @@ const QuickBloxUIKitDesktopLayout: React.FC<
   const [messagesToReply, setMessagesToReply] = useState<MessageEntity[]>([]);
   const [isMobile, width, height, breakpoint] = useMobileLayout();
   const [clientHeight, setClientHeight] = useState<number>(0);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [scrollUpToDown, setScrollUpToDown] = React.useState(false);
 
-  // const subscribeToDialogEventsUseCase: SubscribeToDialogEventsUseCase =
-  //   new SubscribeToDialogEventsUseCase(eventMessaging, 'TestStage');
+  // const [dialogMessagesCount, setDialogMessageCount] = useState(100);
+  // const [hasMore, setHasMore] = React.useState(true);
+  // const [messagesToView, setMessagesToView] = React.useState<MessageEntity[]>(
+  //   [],
+  // );
 
   // инициализация СДК и загрузка тестовых данных, запуск пинга - может не быть
   // todo: добавить метод в контекст
@@ -308,19 +333,78 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     }
   }, [currentContext.InitParams]);
 
-  // const getCountDialogMembers = (dialogEntity: DialogEntity): number => {
-  //   let participants = [];
+  // const fetchMoreData = () => {
+  //   if (messagesToView.length >= dialogMessagesCount) {
+  //     setHasMore(false);
   //
-  //   if (dialogEntity.type === DialogType.group) {
-  //     participants = (dialogEntity as GroupDialogEntity).participantIds;
-  //   } else if (dialogEntity.type === DialogType.private) {
-  //     participants = [(dialogEntity as PrivateDialogEntity).participantId];
-  //   } else if (dialogEntity.type === DialogType.public) {
-  //     participants = [];
+  //     return;
   //   }
+  //   if (
+  //     hasMore &&
+  //     messagesToView.length > 0 &&
+  //     messagesToView.length < dialogMessagesCount
+  //   ) {
+  //     setMessagesToView((prevState) => {
+  //       const newState = [...prevState];
   //
-  //   return participants.length;
+  //       const newMessageEntity: MessageEntity =
+  //         messagesViewModel.messages[prevState.length];
+  //
+  //       newState.push(newMessageEntity);
+  //       // newState.unshift(newMessageEntity);
+  //
+  //       return newState;
+  //     });
+  //   }
   // };
+
+  // function prepareFirstPage(initData: MessageEntity[]) {
+  //   const firstPageSize = messagesViewModel.messages.length;
+  //
+  //   for (let i = firstPageSize - 1; i >= 0; i -= 1) {
+  //     initData.push(messagesViewModel.messages[i]);
+  //   }
+  // }
+
+  //
+  // useEffect(() => {
+  //   setDialogMessageCount(messagesViewModel?.messages?.length || 0);
+  //   if (messagesToView?.length === 0 && messagesViewModel.messages.length > 0) {
+  //     const initData: MessageEntity[] = [];
+  //
+  //     console.log(JSON.stringify(messagesViewModel.messages));
+  //     prepareFirstPage(initData);
+  //     setMessagesToView(initData);
+  //   } else if (messagesViewModel.messages.length - messagesToView.length >= 1) {
+  //     setHasMore(true);
+  //     setScrollUpToDown(true);
+  //   }
+  // }, [messagesViewModel.messages]);
+  //
+  // useEffect(() => {
+  //   if (messagesViewModel.messages.length - messagesToView.length >= 1) {
+  //     fetchMoreData();
+  //   }
+  // }, [dialogMessagesCount]);
+  const messagePerPage = 47;
+
+  useEffect(() => {
+    if (messagesViewModel.entity) {
+      messagesViewModel.getMessages(new Pagination(0, messagePerPage));
+    }
+  }, [messagesViewModel.entity]);
+
+  const fetchMoreData = () => {
+    if (messagesViewModel.pagination.hasNextPage()) {
+      const newPagination = messagesViewModel.pagination;
+
+      newPagination.perPage = messagePerPage;
+      newPagination.nextPage();
+
+      messagesViewModel.getMessages(newPagination);
+    }
+  };
+
   const userViewModel = useUsersListViewModel(selectedDialog);
   const [dialogAvatarUrl, setDialogAvatarUrl] = React.useState('');
   const getUserAvatarByUid = async () => {
@@ -417,23 +501,10 @@ const QuickBloxUIKitDesktopLayout: React.FC<
   const [waitAIWidget, setWaitAIWidget] = useState<boolean>(false);
   const [messageText, setMessageText] = useState<string>('');
 
-  // must re-create as result dialog changing
-  const messagesViewModel: DialogViewModel = useDialogViewModel(
-    dialogsViewModel.entity?.type,
-    dialogsViewModel.entity,
-  );
-
   const [warningErrorText, setWarningErrorText] = useState<string>('');
   // const [showErrorToast, setShowErrorToast] = useState<boolean>(false);
   // const [messageErrorToast, setMessageErrorToast] = useState<string>('');
 
-  const [dialogMessagesCount, setDialogMessageCount] = useState(100);
-  const [hasMore, setHasMore] = React.useState(true);
-  const [scrollUpToDown, setScrollUpToDown] = React.useState(false);
-  const [messagesToView, setMessagesToView] = React.useState<MessageEntity[]>(
-    [],
-  );
-
   const [useAudioWidget, setUseAudioWidget] = useState<boolean>(false);
 
   const [fileToSend, setFileToSend] = useState<File | null>(null);
@@ -740,15 +811,10 @@ const QuickBloxUIKitDesktopLayout: React.FC<
   //
   useEffect(() => {
     messagesViewModel.entity = dialogsViewModel.entity;
-    setMessagesToView([]);
+    // setMessagesToView([]);
     setMessageText('');
   }, [dialogsViewModel.entity]);
 
-  useEffect(() => {
-    if (messagesViewModel.entity) {
-      messagesViewModel.getMessages(new Pagination());
-    }
-  }, [messagesViewModel.entity]);
   //
   useEffect(() => {
     if (!isMobile && messagesViewModel.entity) {
@@ -765,13 +831,6 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     };
   }, [messagesViewModel?.loading]);
   //
-  function prepareFirstPage(initData: MessageEntity[]) {
-    const firstPageSize = messagesViewModel.messages.length;
-
-    for (let i = firstPageSize - 1; i >= 0; i -= 1) {
-      initData.push(messagesViewModel.messages[i]);
-    }
-  }
 
   const ChangeFileHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     const reader = new FileReader();
@@ -786,51 +845,6 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     if (file !== null) reader.readAsDataURL(file);
   };
 
-  const fetchMoreData = () => {
-    if (messagesToView.length >= dialogMessagesCount) {
-      setHasMore(false);
-
-      return;
-    }
-    if (
-      hasMore &&
-      messagesToView.length > 0 &&
-      messagesToView.length < dialogMessagesCount
-    ) {
-      setMessagesToView((prevState) => {
-        const newState = [...prevState];
-
-        const newMessageEntity: MessageEntity =
-          messagesViewModel.messages[prevState.length];
-
-        newState.push(newMessageEntity);
-        // newState.unshift(newMessageEntity);
-
-        return newState;
-      });
-    }
-  };
-
-  //
-  useEffect(() => {
-    setDialogMessageCount(messagesViewModel?.messages?.length || 0);
-    if (messagesToView?.length === 0 && messagesViewModel.messages.length > 0) {
-      const initData: MessageEntity[] = [];
-
-      console.log(JSON.stringify(messagesViewModel.messages));
-      prepareFirstPage(initData);
-      setMessagesToView(initData);
-    } else if (messagesViewModel.messages.length - messagesToView.length >= 1) {
-      setHasMore(true);
-      setScrollUpToDown(true);
-    }
-  }, [messagesViewModel.messages]);
-  //
-  useEffect(() => {
-    if (messagesViewModel.messages.length - messagesToView.length >= 1) {
-      fetchMoreData();
-    }
-  }, [dialogMessagesCount]);
   //
   //
   const maxWidthToResizing =
@@ -877,8 +891,9 @@ const QuickBloxUIKitDesktopLayout: React.FC<
 
   function getSectionData(messages2View: MessageEntity[]) {
     const groupMessages: { [date: string]: MessageEntity[] } = {};
+    const reversedMessages = [...messages2View].reverse();
 
-    messages2View.forEach((message) => {
+    reversedMessages.forEach((message) => {
       const date = new Date(message.created_at);
 
       date.setUTCHours(0, 0, 0, 0);
@@ -893,12 +908,18 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     Object.keys(groupMessages).forEach((date) => {
       groupMessages[date].sort((a, b) => a.date_sent - b.date_sent);
     });
-    const sections: SectionItem<MessageEntity>[] = Object.keys(
-      groupMessages,
-    ).map((date) => ({
-      title: date,
-      data: { [date]: groupMessages[date] },
-    }));
+    const sections: SectionItem<MessageEntity>[] = Object.keys(groupMessages)
+      .sort((a, b) => a.localeCompare(b))
+      .map((date) => ({
+        title: date,
+        data: { [date]: groupMessages[date] },
+      }));
+    // const sections: SectionItem<MessageEntity>[] = Object.keys(
+    //   groupMessages,
+    // ).map((date) => ({
+    //   title: date,
+    //   data: { [date]: groupMessages[date] },
+    // }));
 
     return sections;
   }
@@ -1148,9 +1169,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                 renderMessageList={
                   messagesViewModel &&
                   messagesViewModel.messages &&
-                  messagesViewModel.messages.length > 0 &&
-                  messagesToView &&
-                  messagesToView.length > 0 && (
+                  messagesViewModel.messages.length > 0 && (
                     <SectionList
                       resetScroll={scrollUpToDown}
                       className="messages-container"
@@ -1179,7 +1198,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                           <MessageItem
                             // defaultGetSenderName={defaultGetSenderName}
                             message={message}
-                            userId={userId || -1}
+                            currentUserId={currentUserId || -1}
                             enableForwarding={enableForwarding}
                             enableReplying={enableReplying}
                             onReply={(m: MessageEntity) => {
@@ -1203,12 +1222,12 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                             onError={(messageError: string) => {
                               toast(messageError);
                             }}
-                            messagesToView={messagesToView}
+                            messagesToView={messagesViewModel.messages}
                             maxTokens={maxTokensForAIRephrase}
                           />
                         ))
                       }
-                      sections={getSectionData(messagesToView)}
+                      sections={getSectionData(messagesViewModel.messages)}
                     />
                   )
                 }
@@ -1260,8 +1279,8 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                         setMessageErrorToast={(e: string) => {
                           toast(e);
                         }}
-                        messagesToView={messagesToView}
-                        currentUserId={userId || -1}
+                        messagesToView={messagesViewModel.messages}
+                        currentUserId={currentUserId || -1}
                         maxTokensForAIRephrase={maxTokensForAIRephrase}
                         rephraseTones={rephraseTones}
                       />

package/src/Presentation/ui-components/Avatar/avatar.stories.tsx

@@ -9,7 +9,7 @@ import {
 import Avatar from './Avatar';
 
 const meta: Meta<typeof Avatar> = {
-  title: 'Avatar',
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Avatar',
   component: Avatar,
   tags: ['autodocs'],
   parameters: {

package/src/Presentation/ui-components/Badge/Badge.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Badge from './Badge';
 
 const meta: Meta<typeof Badge> = {
-  title: 'Badge',
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Badge',
   component: Badge,
   tags: ['autodocs'],
   parameters: {

package/src/Presentation/ui-components/Button/Button.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Button from './Button';
 
 const meta = {
-  title: 'Button',
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Button',
   component: Button,
   tags: ['autodocs'],
   parameters: {

package/src/Presentation/ui-components/DialogBanner/DialogBanner.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import DialogBanner from './DialogBanner';
 
 const meta = {
-  title: 'DialogBanner',
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/DialogBanner',
   component: DialogBanner,
   tags: ['autodocs'],
   parameters: {
@@ -32,6 +32,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const DialogBannerDefault: Story = {
+  name: 'DialogBanner Default',
   args: {
     text: '3 new messages',
   },

package/src/Presentation/ui-components/DialogItemPreview/DialogItemPreview.stories.tsx

@@ -14,7 +14,7 @@ import PreviewFileMessage from '../PreviewFileMessage/PreviewFileMessage';
 import Dropdown from '../Dropdown/Dropdown';
 
 const meta: Meta<typeof DialogItemPreview> = {
-  title: 'DialogItemPreview',
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/DialogItemPreview',
   tags: ['autodocs'],
   component: DialogItemPreview,
   decorators: [],
@@ -111,13 +111,21 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const DialogItemPreviewDefault: Story = {
+  name: 'DialogItemPreview Default',
   args: {
     title: 'Name',
     avatar: <Avatar size="lg" icon={<UserSvg />} />,
   },
+  render: (args) => {
+    // eslint-disable-next-line no-param-reassign
+    args.date = new Date(args.date!).toLocaleDateString();
+
+    return <DialogItemPreview {...args} />;
+  },
 };
 
 export const DialogItemPreviewFullScreen: Story = {
+  name: 'DialogItemPreview FullScreen',
   args: {
     title: 'Name',
     avatar: <Avatar size="lg" icon={<UserSvg />} />,
@@ -131,9 +139,16 @@ export const DialogItemPreviewFullScreen: Story = {
       defaultViewport: 'responsive',
     },
   },
+  render: (args) => {
+    // eslint-disable-next-line no-param-reassign
+    args.date = new Date(args.date!).toLocaleDateString();
+
+    return <DialogItemPreview {...args} />;
+  },
 };
 
 export const DialogItemPreviewMobileScreen: Story = {
+  name: 'DialogItemPreview MobileScreen',
   args: {
     title: 'Name',
     avatar: <Avatar size="lg" icon={<UserSvg />} />,
@@ -147,9 +162,16 @@ export const DialogItemPreviewMobileScreen: Story = {
       defaultViewport: 'iphonese2',
     },
   },
+  render: (args) => {
+    // eslint-disable-next-line no-param-reassign
+    args.date = new Date(args.date!).toLocaleDateString();
+
+    return <DialogItemPreview {...args} />;
+  },
 };
 
 export const DialogItemPreviewMobileScreenIPad: Story = {
+  name: 'DialogItemPreview MobileScreen IPad',
   args: {
     title: 'Name',
     avatar: <Avatar size="lg" icon={<UserSvg />} />,
@@ -163,4 +185,10 @@ export const DialogItemPreviewMobileScreenIPad: Story = {
       defaultViewport: 'ipad',
     },
   },
+  render: (args) => {
+    // eslint-disable-next-line no-param-reassign
+    args.date = new Date(args.date!).toLocaleDateString();
+
+    return <DialogItemPreview {...args} />;
+  },
 };

package/src/Presentation/ui-components/DialogItemPreview/DialogItemPreview.tsx

@@ -53,7 +53,10 @@ const DialogItemPreview: React.FC<DialogItemPreviewProps> = ({
           <div className="dialog-item-preview__content-bottom-message">
             {lastMessage}
           </div>
-          <div className="dialog-item-preview__content-bottom-controls">
+          <div
+            onClick={(event) => event.stopPropagation()}
+            className="dialog-item-preview__content-bottom-controls"
+          >
             {badge}
             {contextMenu && (
               <div className="dialog-item-preview__content-bottom-controls-menu">

package/src/Presentation/ui-components/DialogWindow/DialogWindow.stories.tsx

@@ -5,7 +5,7 @@ import DialogWindow from './DialogWindow';
 import Button from '../Button/Button';
 
 const meta: Meta<typeof DialogWindow> = {
-  title: 'Dialog Window',
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/DialogWindow',
   component: DialogWindow,
   tags: ['autodocs'],
   parameters: {
@@ -102,5 +102,6 @@ function DialogWindowExample() {
 }
 
 export const DialogWindowDefault: StoryDefault = {
+  name: 'DialogWindow Default',
   render: () => <DialogWindowExample />,
 };

package/src/Presentation/ui-components/Dropdown/Dropdown.stories.tsx

@@ -5,7 +5,7 @@ import Dropdown from './Dropdown';
 import Button from '../Button/Button';
 
 const meta: Meta<typeof Dropdown> = {
-  title: 'Dropdown',
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Dropdown',
   component: Dropdown,
   tags: ['autodocs'],
   parameters: {
@@ -20,6 +20,7 @@ const meta: Meta<typeof Dropdown> = {
   },
   argTypes: {
     children: {
+      control: false,
       table: {
         defaultValue: {
           summary: null,

package/src/Presentation/ui-components/Dropdown/Dropdown.tsx

@@ -53,7 +53,10 @@ export default function Dropdown({
       }
     };
 
-    if (isOpen) document.addEventListener('click', handleBlur);
+    if (isOpen)
+      document.addEventListener('click', handleBlur, {
+        capture: true,
+      });
 
     return () => document.removeEventListener('click', handleBlur);
   }, [isOpen]);

package/src/Presentation/ui-components/Header/Header.stories.tsx

@@ -13,7 +13,7 @@ import {
 import Avatar from '../Avatar/Avatar';
 
 const meta: Meta = {
-  title: 'Header',
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Header',
   component: Header,
   tags: ['autodocs'],
   parameters: {
@@ -42,6 +42,7 @@ const meta: Meta = {
       },
     },
     badge: {
+      control: false,
       description: 'Badge or dialog status',
     },
     children: {

package/src/Presentation/ui-components/Loader/Loader.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Loader from './Loader';
 
 const meta = {
-  title: 'Loader',
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Loader',
   component: Loader,
   tags: ['autodocs'],
   parameters: {

package/src/Presentation/ui-components/Message/Bubble/AttachmentBubble/AttachmentBubble.tsx

@@ -52,7 +52,12 @@ export default function AttachmentBubble({
       />
     );
   }
-  if (attachment.type.toString().includes(FileType.image)) {
+
+  if (
+    attachment.type.toString().split('/')[1] !== 'heic' &&
+    attachment.type.toString().split('/')[1] !== 'heif' &&
+    attachment.type.toString().includes(FileType.image)
+  ) {
     return <ImageBubble title={attachment.file?.name || ''} href={fileUrl} />;
   }
 

package/src/Presentation/ui-components/Message/Bubble/AudioBubble/AudioBubble.scss

@@ -3,6 +3,12 @@
   gap: 5px;
   flex-direction: row;
   align-items: center;
+
+  &__equalizer-time {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
 }
 .audio-body{
   padding: 5px;
@@ -40,6 +46,13 @@
   }
 }
 
+.time-play {
+  color: var(--secondary-text, #636d78);
+  text-align: left;
+  font: var(--label-label-small);
+  height: 16px;
+}
+
 .audio-bubble-background {
 
   &__incoming {