quickblox-react-ui-kit 0.2.8 → 0.3.0-beta.1

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

@@ -0,0 +1,143 @@
+.message-item {
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+
+  &__right {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  &__more {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+    align-self: stretch;
+    flex-shrink: 0;
+    position: relative;
+    cursor: pointer;
+
+    &__icon {
+      border-radius: 4px;
+      display: flex;
+      flex-direction: row;
+      gap: 0px;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: 24px;
+      height: 24px;
+      position: relative;
+      //padding-bottom: 10px;
+
+      &__actions {
+        fill: var(--tertiary-elements, #636D78);
+        path: var(--tertiary-elements, #636D78);
+      }
+    }
+  }
+
+  &__outgoing {
+    background: var(--main-background, #ffffff);
+    padding: 0px 8px 8px 16px;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: flex-end;
+    justify-content: flex-end;
+    align-self: stretch;
+    flex-shrink: 0;
+    width: 320px;
+    position: relative;
+
+    &__chat {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      align-items: flex-start;
+      justify-content: flex-start;
+      flex-shrink: 0;
+      position: relative;
+
+      &__bubble-background {
+        background: var(--outgoing-background, #E7EFFF);
+        border-radius: 22px 22px 0px 22px;
+        padding: 8px 12px 8px 12px;
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        align-items: flex-start;
+        justify-content: flex-start;
+        flex-shrink: 0;
+        position: relative;
+      }
+    }
+  }
+
+  &__incoming-mes {
+    background: var(--secondary-background, #ffffff);
+    padding: 0px 16px 8px 8px;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: flex-end;
+    justify-content: flex-start;
+    align-self: stretch;
+    flex-shrink: 0;
+    width: 320px;
+    position: relative;
+  }
+
+  &__incoming {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    align-items: flex-start;
+    justify-content: flex-end;
+    flex-shrink: 0;
+    position: relative;
+
+    &__chat {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+      align-items: flex-end;
+      justify-content: flex-start;
+      flex-shrink: 0;
+      position: relative;
+
+      &__bubble {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        align-items: flex-end;
+        justify-content: flex-end;
+        flex-shrink: 0;
+        position: relative;
+
+        &__background {
+          background: var(--incoming-background, #e4e6e8);
+          border-radius: 22px 22px 22px 0px;
+          padding: 8px 12px 8px 12px;
+          display: flex;
+          flex-direction: row;
+          gap: 10px;
+          align-items: flex-start;
+          justify-content: flex-start;
+          flex-shrink: 0;
+          position: relative;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,261 @@
+import React, { ReactElement } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import Message, { MessageProps } from './Message';
+import TextBubble from './Bubble/TextBubble/TextBubble';
+import FileBubble from './Bubble/FileBubble/FileBubble';
+import ImageBubble from './Bubble/ImageBubble/ImageBubble';
+import AudioBubble from './Bubble/AudioBubble/AudioBubble';
+import VideoBubble from './Bubble/VideoBubble/VideoBubble';
+import AITranslate from './AITranslate/AITranslate';
+import AIAssist from './AIAssist/AIAssist';
+
+function createBubbleByType(
+  type: 'incoming' | 'outgoing',
+  children?: ReactElement,
+) {
+  const isTextBubbleType = children?.type === TextBubble;
+  const isFileBubbleType = children?.type === FileBubble;
+  const isImageBubbleType = children?.type === ImageBubble;
+  const isAudioBubbleType = children?.type === AudioBubble;
+  const isVideoBubbleType = children?.type === VideoBubble;
+
+  if (isTextBubbleType) {
+    return (
+      <TextBubble
+        text="The QuickBlox UIKit for React is a comprehensive user interface kit specifically designed for building chat applications. It provides a collection of pre-built components, modules, and utilities that simplify the process of creating chat applications."
+        type={type}
+      />
+    );
+  }
+  if (isFileBubbleType) {
+    return (
+      <FileBubble
+        title="00b5563-small-qb-logo-docs-white-9px.png"
+        href="https://files.readme.io/00b5563-small-qb-logo-docs-white-9px.png"
+        type={type}
+      />
+    );
+  }
+  if (isImageBubbleType) {
+    return (
+      <ImageBubble
+        title="QuickBlox"
+        href="https://files.readme.io/00b5563-small-qb-logo-docs-white-9px.png"
+      />
+    );
+  }
+  if (isAudioBubbleType) {
+    return (
+      <AudioBubble
+        title="1.mp3"
+        href="//samplelib.com/lib/preview/mp3/sample-3s.mp3"
+        audioFileType="mp3"
+        fileUid="12345678901234544"
+        type={type}
+      />
+    );
+  }
+  if (isVideoBubbleType) {
+    return (
+      <VideoBubble
+        title="QuickBlox"
+        href="https://www.youtube.com/watch?v=0QFqNjhP-wM"
+      />
+    );
+  }
+
+  return undefined;
+}
+
+function getChildrenByType(type: string, children?: ReactElement) {
+  if ((type === 'incoming' || type === 'outgoing') && children) {
+    return createBubbleByType(type, children);
+  }
+
+  return undefined;
+}
+// const meta: Meta<typeof Message> = {
+const meta: Meta<MessageProps> = {
+  title: 'Message',
+  component: Message,
+  decorators: [
+    (StoryFn, context) => {
+      const { type, children } = context.args;
+      const modifiedArgs = {
+        ...context.args,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        children: getChildrenByType(type, children),
+      };
+
+      return <StoryFn {...context} args={modifiedArgs} />;
+    },
+  ],
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+    },
+  },
+  args: {
+    userName: 'Nate',
+    time: '16:58',
+    type: 'incoming',
+    status: undefined,
+    enableSelect: true,
+    isSelect: false,
+    disabled: false,
+    // bottomPart: (
+    //   <AITranslate
+    //     languagesForAITranslate={['UA', 'Eng', 'Fr', 'Ger', 'pl']}
+    //     onClickOriginalText={() => {
+    //       console.log('orig');
+    //     }}
+    //     originalTextMessage={false}
+    //     waitAIWidget={false}
+    //     onTranslate={() => {
+    //       console.log('translate');
+    //     }}
+    //   />
+    // ),
+    // additionalPart: (
+    //   <AIAssist
+    //     onAssistAnswer={() => {
+    //       console.log('ai-assist');
+    //     }}
+    //     waitAIWidget={false}
+    //   />
+    // ),
+  },
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: ['incoming', 'outgoing'],
+    },
+    children: {
+      description: 'Message bubble',
+      control: 'select',
+      options: [
+        'TextMessage',
+        'FileMessage',
+        'ImageMessage',
+        'AudioMessage',
+        'VideoMessage',
+      ],
+      mapping: {
+        TextMessage: (
+          <TextBubble
+            text="The QuickBlox UIKit for React is a comprehensive user interface kit specifically designed for building chat applications. It provides a collection of pre-built components, modules, and utilities that simplify the process of creating chat applications."
+            type="incoming"
+          />
+        ),
+        FileMessage: (
+          <FileBubble
+            title="00b5563-small-qb-logo-docs-white-9px.png"
+            href="https://files.readme.io/00b5563-small-qb-logo-docs-white-9px.png"
+            type="incoming"
+          />
+        ),
+        ImageMessage: (
+          <ImageBubble
+            title="QuickBlox"
+            href="https://files.readme.io/00b5563-small-qb-logo-docs-white-9px.png"
+          />
+        ),
+        AudioMessage: (
+          <AudioBubble
+            title="1.mp3"
+            href="//samplelib.com/lib/preview/mp3/sample-3s.mp3"
+            audioFileType="mp3"
+            fileUid="12345678901234544"
+            type="incoming"
+          />
+        ),
+        VideoMessage: (
+          <VideoBubble
+            title="QuickBlox"
+            href="https://www.youtube.com/watch?v=0QFqNjhP-wM"
+          />
+        ),
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const MessageText: Story = {
+  args: {
+    children: <TextBubble text="Test Message" type="incoming" />,
+  },
+};
+
+export const MessageImage: Story = {
+  args: {
+    children: (
+      <ImageBubble
+        title="QuickBlox"
+        href="https://files.readme.io/0a66fe7-SreenModulesDialogList.png"
+      />
+    ),
+  },
+};
+
+// export const MessageVideo: Story = {
+//   args: {
+//     children: (
+//       <VideoBubble
+//         title="QuickBlox"
+//         href="https://www.youtube.com/watch?v=0QFqNjhP-wM"
+//       />
+//     ),
+//   },
+// };
+
+export const MessageFile: Story = {
+  args: {
+    children: (
+      <FileBubble
+        type="incoming"
+        title="QuickBlox"
+        href="https://raw.githubusercontent.com/QuickBlox/react-ui-kit/main/README.md"
+      />
+    ),
+  },
+};
+
+export const MessageTextWithAIfeatures: Story = {
+  args: {
+    children: <TextBubble text="Test Message" type="incoming" />,
+    bottomPart: (
+      <AITranslate
+        languagesForAITranslate={[
+          'English',
+          'French',
+          'Portuguese',
+          'German',
+          'Ukrainian',
+        ]}
+        onClickOriginalText={() => {
+          console.log('orig');
+        }}
+        defaultLanguageForAITranslate="English"
+        originalTextMessage={false}
+        waitAIWidget={false}
+        onTranslate={() => {
+          console.log('translate');
+        }}
+      />
+    ),
+    additionalPart: (
+      <AIAssist
+        onAssistAnswer={() => {
+          console.log('ai-assist');
+        }}
+        waitAIWidget={false}
+      />
+    ),
+  },
+};

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

@@ -0,0 +1,85 @@
+import React, { ReactElement } from 'react';
+import Avatar from '../Avatar/Avatar';
+import CheckBox from '../CheckBox/CheckBox';
+import MessageCaption from './MessageCaption/MessageCaption';
+import TimeAndStatus from './TimeAndStatus/TimeAndStatus';
+import './Message.scss';
+
+export type MessageProps = {
+  userName: string;
+  avatar?: ReactElement;
+  time: string;
+  type: 'outgoing' | 'incoming';
+  subtype?: 'reply' | 'forward';
+  status?: 'sent' | 'delivered' | 'viewed' | 'error';
+  enableSelect: boolean;
+  isSelect: boolean;
+  disabled: boolean;
+  onSelect?: (isSelected: boolean) => void;
+  bottomPart?: ReactElement;
+  additionalPart?: ReactElement;
+  children?: ReactElement;
+};
+
+// eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
+export default function Message({
+  userName,
+  avatar = <Avatar />,
+  time,
+  type,
+  status,
+  subtype,
+  enableSelect = true,
+  isSelect = false,
+  disabled = false,
+  onSelect,
+  bottomPart,
+  additionalPart,
+  children,
+}: MessageProps) {
+  return (
+    <div className="message-item">
+      {enableSelect && (
+        <CheckBox disabled={disabled} checked={isSelect} onChange={onSelect} />
+      )}
+
+      {type === 'outgoing' ? (
+        <div className="message-item__right">
+          <div className="message-item__outgoing">
+            <TimeAndStatus status={status} time={time} />
+            {additionalPart}
+            <div className="message-item__outgoing__chat">
+              <MessageCaption
+                type={type}
+                subtype={subtype}
+                userName={userName}
+              />
+              {children}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div>
+          <div className="message-item__incoming-mes">
+            {avatar}
+            <div className="message-item__incoming">
+              <MessageCaption
+                type={type}
+                subtype={subtype}
+                userName={userName}
+              />
+              <div className="message-item__incoming__chat">
+                <div className="message-item__incoming__chat__bubble">
+                  {children}
+                  {bottomPart}
+                </div>
+                {additionalPart}
+                <TimeAndStatus status={status} time={time} />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/Presentation/ui-components/Message/MessageCaption/MessageCaption.scss

@@ -0,0 +1,90 @@
+.message-caption {
+
+  &__user {
+    padding: 0px 16px 0px 16px;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: flex-start;
+    justify-content: flex-start;
+    flex-shrink: 0;
+    position: relative;
+
+    &__caption {
+      display: flex;
+      flex-direction: row;
+      gap: 2px;
+      align-items: center;
+      justify-content: flex-start;
+      flex-shrink: 0;
+      position: relative;
+
+      &__name {
+        color: var(--secondary-text, #636d78);
+        text-align: left;
+        font: var(--label-label-medium);
+        position: relative;
+      }
+    }
+  }
+
+  &__forward-reply {
+    display: flex;
+    flex-direction: row;
+    gap: 2px;
+    align-items: center;
+    justify-content: flex-start;
+    flex-shrink: 0;
+    position: relative;
+
+    &--reply {
+      width: 16px;
+      height: 16px;
+      align-self: stretch;
+      flex: 1;
+      position: relative;
+      overflow: visible;
+      fill: var(--tertiary-elements, #636d78);
+    }
+
+    &--forward {
+      width: 16px;
+      height: 16px;
+      align-self: stretch;
+      flex: 1;
+      position: relative;
+      overflow: visible;
+      fill: var(--tertiary-elements, #636d78);
+    }
+
+    &__icon {
+      border-radius: 4px;
+      display: flex;
+      flex-direction: row;
+      gap: 0px;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: 16px;
+      height: 16px;
+      position: relative;
+
+      &--filled {
+        align-self: stretch;
+        flex: 1;
+        height: auto;
+        position: relative;
+        overflow: visible;
+        fill: var(--tertiary-elements, #636d78);
+      }
+    }
+
+    &__from {
+      color: var(--tertiary-elements, #636d78);
+      text-align: left;
+      font: var(--label-label-medium);
+      position: relative;
+    }
+  }
+
+}

package/src/Presentation/ui-components/Message/MessageCaption/MessageCaption.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ReactComponent as ForwardSvg } from '../../../icons/actions/forward-filled.svg';
+import { ReactComponent as ReplySvg } from '../../../icons/actions/reply-filled.svg';
+import './MessageCaption.scss';
+
+interface MessageCaptionProps {
+  type: 'outgoing' | 'incoming';
+  subtype?: 'reply' | 'forward';
+  userName: string;
+}
+
+const subtypeIconDictionary = {
+  forward: ForwardSvg,
+  reply: ReplySvg,
+};
+
+const renderSubtype = (subtype: 'reply' | 'forward') => {
+  const SubTypeIcon = subtypeIconDictionary[subtype];
+
+  return (
+    <SubTypeIcon className={`message-caption__forward-reply--${subtype}`} />
+  );
+};
+
+export default function MessageCaption({
+  type,
+  subtype,
+  userName,
+}: MessageCaptionProps) {
+  return (
+    <div className="message-caption__user__caption">
+      <div className="message-caption__forward-reply">
+        {subtype && renderSubtype(subtype)}
+        <span className="message-caption__forward-reply__from">
+          {subtype === 'forward' && 'Forwarded from '}
+          {subtype === 'reply' && 'Replied to '}
+        </span>
+      </div>
+      {(type === 'incoming' ||
+        subtype === 'reply' ||
+        subtype === 'forward') && (
+        <div className="message-caption__user__caption__name">{userName}</div>
+      )}
+    </div>
+  );
+}

package/src/Presentation/ui-components/Message/MessageContextMenu/MessageContextMenu.scss

@@ -0,0 +1,19 @@
+  .message-context-menu-actions {
+    border-radius: 4px;
+    display: flex;
+    flex-direction: row;
+    gap: 0px;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    position: relative;
+
+    &__icon {
+      fill: var(--tertiary-elements, #636D78);
+      path: var(--tertiary-elements, #636D78);
+      width: 24px;
+      height: 24px;
+    }
+  }

package/src/Presentation/ui-components/Message/MessageContextMenu/MessageContextMenu.tsx

@@ -0,0 +1,67 @@
+import Dropdown from '../../Dropdown/Dropdown';
+import { MessageEntity } from '../../../../Domain/entity/MessageEntity';
+import { FunctionTypeMessageEntityToVoid } from '../../../../CommonTypes/BaseViewModel';
+import { ReactComponent as MoreSvg } from '../../../icons/navigation/more.svg';
+import { Option } from '../../Dropdown/DropdownOption';
+import './MessageContextMenu.scss';
+
+export type MessageContextMenuProps = {
+  message: MessageEntity;
+  enableForwarding: boolean;
+  enableReplying: boolean;
+  onReply: FunctionTypeMessageEntityToVoid;
+  onForward: FunctionTypeMessageEntityToVoid;
+};
+
+export default function MessageContextMenu({
+  message,
+  enableReplying,
+  enableForwarding,
+  onReply,
+  onForward,
+}: MessageContextMenuProps) {
+  function selectHandler(value: string) {
+    if (value === 'Reply' && enableReplying) {
+      onReply(message);
+    }
+    if (value === 'Forward' && enableForwarding) {
+      onForward(message);
+    }
+  }
+
+  const options: Option[] = [];
+
+  if (enableReplying) {
+    options.push({
+      value: 'Reply',
+      label: 'Reply',
+    });
+  }
+
+  if (enableForwarding) {
+    options.push({
+      value: 'Forward',
+      label: 'Forward',
+    });
+  }
+
+  return (
+    <div>
+      {enableForwarding || enableReplying ? (
+        <Dropdown
+          options={options}
+          disabled={false}
+          onSelect={(value) => selectHandler(value)}
+        >
+          <div className="message-context-menu-actions">
+            <MoreSvg className="message-context-menu-actions__icon" />
+          </div>
+        </Dropdown>
+      ) : (
+        <div className="message-context-menu-actions">
+          <MoreSvg className="message-context-menu-actions__icon" />
+        </div>
+      )}
+    </div>
+  );
+}