quickblox-react-ui-kit 0.2.2 → 0.2.4

package/src/Presentation/components/UI/Dialogs/MessagesView/VideoAttachmentComponent/VideoAttachmentComponent.scss

@@ -1,7 +1,11 @@
 .video-body{
   // border: 1px solid red;
-  // max-height: 300px;
-  // max-width: 100%;
+  //max-height: 300px;
+  //max-width: 100%;
+  max-width: 240px;
+  max-height: 130px;
+  min-width: 240px;
+  width: 240px;
   padding: 0;
   border-radius: 4px;
 }

package/src/Presentation/components/UI/Dialogs/MessagesView/useMessagesViewModel.ts

@@ -399,12 +399,18 @@ export default function useMessagesViewModel(
       .then((fileMessage: FileEntity) => {
         console.log(JSON.stringify(fileMessage));
         // '[attachment]'
+        const recipientId =
+          dialog.type === DialogType.private
+            ? (dialog as PrivateDialogEntity).participantId
+            : currentUserId;
+
+        // eslint-disable-next-line promise/always-return
+        const messageBody = fileMessage.name || '[attachment]';
         const messageToSend: MessageEntity =
           Stubs.createMessageEntityWithParams(
             '',
             dialog.id,
-            // eslint-disable-next-line promise/always-return
-            fileMessage.name || '[attachment]',
+            messageBody,
             Date.now().toString(),
             Date.now(),
             Date.now().toString(),
@@ -412,7 +418,8 @@ export default function useMessagesViewModel(
             [],
             1,
             currentUserId,
-            currentUserId,
+            // eslint-disable-next-line promise/always-return
+            recipientId,
             [],
             '',
             DialogType.group,
@@ -433,6 +440,9 @@ export default function useMessagesViewModel(
 
         messageToSend.attachments = attachments;
 
+        messageToSend.message = `MediaContentEntity|${messageBody}|${
+          fileMessage.uid
+        }|${fileMessage.type!.toString()}`;
         sendMessage(messageToSend);
         //
       })

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewAudioFile/PreviewAudioFile.scss

@@ -0,0 +1,62 @@
+.preview-audio-file-container,
+.preview-audio-file-container * {
+  box-sizing: border-box;
+}
+.preview-audio-file-container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+
+  &--placeholder {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    position: static;
+
+    &__bg {
+      background: var(--incoming-background, #e4e6e8);
+      border-radius: 8px;
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+    }
+    &__icon {
+      border-radius: 4px;
+      padding: 4px;
+      display: flex;
+      flex-direction: row;
+      gap: 0px;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      position: absolute;
+      left: 4px;
+      top: 4px;
+    }
+  }
+
+  &--audio-mp-3 {
+    color: var(--main-text, #0b121b);
+    text-align: left;
+    font: 400 12px/16px "Roboto", sans-serif;
+    position: relative;
+    flex: 1;
+  }
+}
+
+
+.media-audio-file {
+  align-self: stretch;
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}
+

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewAudioFile/PreviewAudioFile.tsx

@@ -0,0 +1,25 @@
+import './PreviewAudioFile.scss';
+import React from 'react';
+import AudioFile from '../../../svgs/Icons/Media/AudioFile';
+
+type PreviewAudioFileProps = {
+  fileName: string;
+};
+// eslint-disable-next-line react/function-component-definition
+const PreviewAudioFile: React.FC<PreviewAudioFileProps> = ({
+  fileName,
+}: PreviewAudioFileProps) => {
+  return (
+    <div className="preview-audio-file-container">
+      <div className="preview-audio-file-container--placeholder">
+        <div className="preview-audio-file-container--placeholder__bg" />
+        <div className="preview-audio-file-container--placeholder__icon">
+          <AudioFile width="16" height="16" applyZoom color="var(--caption)" />
+        </div>
+      </div>
+      <div className="preview-audio-file-container--audio-mp-3">{fileName}</div>
+    </div>
+  );
+};
+
+export default PreviewAudioFile;

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewDefaultFile/PreviewDefaultFile.scss

@@ -0,0 +1,61 @@
+.preview-default-file-container,
+.preview-default-file-container * {
+  box-sizing: border-box;
+}
+.preview-default-file-container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+
+  &--placeholder {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    position: static;
+
+    &__bg {
+      background: var(--incoming-background, #e4e6e8);
+      border-radius: 8px;
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+    }
+    &__icon {
+      border-radius: 4px;
+      padding: 4px;
+      display: flex;
+      flex-direction: row;
+      gap: 0px;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      position: absolute;
+      left: 4px;
+      top: 4px;
+    }
+  }
+
+  &--default-file {
+    color: var(--main-text, #0b121b);
+    text-align: left;
+    font: 400 12px/16px "Roboto", sans-serif;
+    position: relative;
+    flex: 1;
+  }
+}
+
+.media-text-document {
+  align-self: stretch;
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}
+

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewDefaultFile/PreviewDefaultFile.tsx

@@ -0,0 +1,32 @@
+import './PreviewDefaultFile.scss';
+import React from 'react';
+import TextDocument from '../../../svgs/Icons/Media/TextDocument';
+
+type PreviewDefaultFileProps = {
+  fileName: string;
+};
+// eslint-disable-next-line react/function-component-definition
+const PreviewDefaultFile: React.FC<PreviewDefaultFileProps> = ({
+  fileName,
+}: PreviewDefaultFileProps) => {
+  return (
+    <div className="preview-default-file-container">
+      <div className="preview-default-file-container--placeholder">
+        <div className="preview-default-file-container--placeholder__bg" />
+        <div className="preview-default-file-container--placeholder__icon">
+          <TextDocument
+            width="16"
+            height="16"
+            applyZoom
+            color="var(--caption)"
+          />
+        </div>
+      </div>
+      <div className="preview-default-file-container--default-file">
+        {fileName}
+      </div>
+    </div>
+  );
+};
+
+export default PreviewDefaultFile;

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewDialog.scss

@@ -2,7 +2,7 @@
 
 $preview-dialog-color-divider: var(--color-divider);
 $row-center-container-base-font-size: 12px;
-$row-center-container-base-font-line-height: 24px;
+$row-center-container-base-font-line-height: 32px;
 $row--main-container-min-height: 72px;
 $row--main-container-min-width: 320px;
 $row--main-container-text-title-width: 120px;
@@ -55,7 +55,7 @@ $preview-dialog-avatar-wrapper-background-color-private: var(--caption);
     word-wrap: break-word;
     overflow: hidden;
     max-height: $row-center-container-base-font-line-height; /* (Number of lines you want visible) * (line-height) */
-    line-height: $row-center-container-base-font-size;
+    line-height: 11px; // $row-center-container-base-font-size;
     text-align:justify;
   }
 

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewDialog.tsx

@@ -14,6 +14,10 @@ import PreviewDialogViewModel from './PreviewDialogViewModel';
 import NotifyOff from '../../svgs/Icons/Toggle/NotifyOff';
 import EditDots from '../../svgs/Icons/Actions/EditDots';
 import UiKitTheme from '../../../../assets/UiKitTheme';
+import PreviewImageFile from './PreviewImageFile/PreviewImageFile';
+import PreviewAudioFile from './PreviewAudioFile/PreviewAudioFile';
+import PreviewVideoFile from './PreviewVideoFile/PreviewVideoFile';
+import PreviewDefaultFile from './PreviewDefaultFile/PreviewDefaultFile';
 
 export type ThemeNames = 'light' | 'dark' | 'custom';
 type PreviewDialogsColorTheme = {
@@ -285,6 +289,50 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
     minWidth: '182px',
   };
 
+  const getMessageParts = (message: string) => {
+    if (
+      message.includes('MediaContentEntity') ||
+      message.includes('[Attachment]')
+    ) {
+      const messageParts = message.split('|');
+
+      // val messageBody = "${MediaContentEntity::class.java.simpleName}|$fileName|$uid|$fileMimeType"
+      // 0, 1, 2, 3
+      return messageParts;
+    }
+
+    return [];
+  };
+
+  const getPreviewMessage = (message: string): JSX.Element => {
+    const messageParts = getMessageParts(message);
+
+    if (messageParts && messageParts.length > 0) {
+      const fileName: string = messageParts[1];
+      const fileUid: string = messageParts[2];
+      const fileUrl: string = fileUid && QB.content.privateUrl(fileUid);
+
+      const result: JSX.Element = <div>{message}</div>;
+
+      if (messageParts[3].includes('audio')) {
+        return <PreviewAudioFile fileName={fileName} />;
+      }
+      if (messageParts[3].includes('video')) {
+        return <PreviewVideoFile fileName={fileName} />;
+      }
+      if (messageParts[3].includes('image')) {
+        return <PreviewImageFile fileName={fileName} imgUrl={fileUrl} />;
+      }
+      if (fileName.length > 0 && fileName.includes('.')) {
+        return <PreviewDefaultFile fileName={fileName} />;
+      }
+
+      return result;
+    }
+
+    return <div>{message}</div>;
+  };
+
   return (
     <div
       onMouseEnter={() => setHaveHover(true)}
@@ -388,7 +436,7 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
                 CenterItem={
                   <div className="preview-dialog-container__text-left">
                     <span className="preview-dialog-container__text-concat">
-                      {previewMessage}
+                      {getPreviewMessage(previewMessage || '')}
                     </span>
                   </div>
                 }
@@ -420,7 +468,7 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
                     className={textWrapperContainer}
                   >
                     <span className="preview-dialog-container__text-concat">
-                      {previewMessage}
+                      {getPreviewMessage(previewMessage || '')}
                     </span>
                   </div>
                 }

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewImageFile/PreviewImageFile.scss

@@ -0,0 +1,40 @@
+.preview-image-file-container,
+.preview-image-file-container * {
+  box-sizing: border-box;
+}
+.preview-image-file-container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+
+  &--placeholder {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    position: static;
+
+    &__bg {
+      border-radius: 8px;
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+    }
+  }
+
+  &--travel-img {
+    color: var(--main-text, #0b121b);
+    text-align: left;
+    font: 400 12px/16px "Roboto", sans-serif;
+    position: relative;
+    flex: 1;
+  }
+}
+
+

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewImageFile/PreviewImageFile.tsx

@@ -0,0 +1,26 @@
+import './PreviewImageFile.scss';
+import React from 'react';
+
+type PreviewImageFileProps = {
+  fileName: string;
+  imgUrl: string;
+};
+// eslint-disable-next-line react/function-component-definition
+const PreviewImageFile: React.FC<PreviewImageFileProps> = ({
+  fileName,
+  imgUrl,
+}: PreviewImageFileProps) => {
+  return (
+    <div className="preview-image-file-container">
+      <div className="preview-image-file-container--placeholder">
+        <img
+          className="preview-image-file-container--placeholder__bg"
+          src={imgUrl}
+        />
+      </div>
+      <div className="preview-image-file-container--travel-img">{fileName}</div>
+    </div>
+  );
+};
+
+export default PreviewImageFile;

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewVideoFile/PreviewVideoFile.scss

@@ -0,0 +1,62 @@
+.preview-video-file-container,
+.preview-video-file-container * {
+  box-sizing: border-box;
+}
+.preview-video-file-container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+
+  &--placeholder {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    position: static;
+
+    &__bg {
+      background: var(--incoming-background, #e4e6e8);
+      border-radius: 8px;
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+    }
+    &__icon {
+      border-radius: 4px;
+      padding: 4px;
+      display: flex;
+      flex-direction: row;
+      gap: 0px;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      position: absolute;
+      left: 4px;
+      top: 4px;
+    }
+  }
+
+  &--video-mp-4 {
+    color: var(--main-text, #0b121b);
+    text-align: left;
+    font: 400 12px/16px "Roboto", sans-serif;
+    position: relative;
+    flex: 1;
+  }
+}
+
+
+.toggle-play {
+  align-self: stretch;
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}
+

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewVideoFile/PreviewVideoFile.tsx

@@ -0,0 +1,25 @@
+import './PreviewVideoFile.scss';
+import React from 'react';
+import ImagePlay from '../../../svgs/Icons/Toggle/ImagePlay';
+
+type PreviewVideoFileProps = {
+  fileName: string;
+};
+// eslint-disable-next-line react/function-component-definition
+const PreviewVideoFile: React.FC<PreviewVideoFileProps> = ({
+  fileName,
+}: PreviewVideoFileProps) => {
+  return (
+    <div className="preview-video-file-container">
+      <div className="preview-video-file-container--placeholder">
+        <div className="preview-video-file-container--placeholder__bg" />
+        <div className="preview-video-file-container--placeholder__icon">
+          <ImagePlay width="16" height="16" applyZoom color="var(--caption)" />
+        </div>
+      </div>
+      <div className="preview-video-file-container--video-mp-4">{fileName}</div>
+    </div>
+  );
+};
+
+export default PreviewVideoFile;

package/src/Presentation/components/UI/svgs/Icons/AIWidgets/BotIcon/BotIcon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
+    <path d="M16.1339 5.61003H12.9186V4.69137C12.9186 4.44772 12.8219 4.21406 12.6496 4.04177C12.4773 3.86949 12.2436 3.77271 12 3.77271C11.7563 3.77271 11.5227 3.86949 11.3504 4.04177C11.1781 4.21406 11.0813 4.44772 11.0813 4.69137V5.61003H7.86601C6.64779 5.61003 5.47946 6.09396 4.61805 6.95537C3.75664 7.81678 3.27271 8.98511 3.27271 10.2033V16.6339C3.27271 17.8522 3.75664 19.0205 4.61805 19.8819C5.47946 20.7433 6.64779 21.2272 7.86601 21.2272H16.1339C16.7371 21.2272 17.3344 21.1084 17.8917 20.8776C18.449 20.6468 18.9554 20.3084 19.3819 19.8819C19.8084 19.4554 20.1468 18.949 20.3776 18.3917C20.6084 17.8344 20.7272 17.2371 20.7272 16.6339V10.2033C20.7272 9.60013 20.6084 9.00283 20.3776 8.44555C20.1468 7.88826 19.8084 7.3819 19.3819 6.95537C18.9554 6.52884 18.449 6.1905 17.8917 5.95967C17.3344 5.72883 16.7371 5.61003 16.1339 5.61003ZM18.8899 16.6339C18.8899 17.3649 18.5996 18.0659 18.0827 18.5827C17.5659 19.0996 16.8649 19.3899 16.1339 19.3899H7.86601C7.13507 19.3899 6.43408 19.0996 5.91723 18.5827C5.40039 18.0659 5.11003 17.3649 5.11003 16.6339V10.2033C5.11003 9.47239 5.40039 8.7714 5.91723 8.25455C6.43408 7.73771 7.13507 7.44735 7.86601 7.44735H16.1339C16.8649 7.44735 17.5659 7.73771 18.0827 8.25455C18.5996 8.7714 18.8899 9.47239 18.8899 10.2033V16.6339Z" fill="#3978FC"/>
+    <path d="M14.7559 10.2034C14.5123 10.2034 14.2786 10.3002 14.1063 10.4724C13.9341 10.6447 13.8373 10.8784 13.8373 11.122V12.9594C13.8373 13.203 13.9341 13.4367 14.1063 13.6089C14.2786 13.7812 14.5123 13.878 14.7559 13.878C14.9996 13.878 15.2332 13.7812 15.4055 13.6089C15.5778 13.4367 15.6746 13.203 15.6746 12.9594V11.122C15.6746 10.8784 15.5778 10.6447 15.4055 10.4724C15.2332 10.3002 14.9996 10.2034 14.7559 10.2034Z" fill="#3978FC"/>
+    <path d="M9.24398 10.2034C9.00034 10.2034 8.76668 10.3002 8.59439 10.4724C8.42211 10.6447 8.32532 10.8784 8.32532 11.122V12.9594C8.32532 13.203 8.42211 13.4367 8.59439 13.6089C8.76668 13.7812 9.00034 13.878 9.24398 13.878C9.48763 13.878 9.72129 13.7812 9.89358 13.6089C10.0659 13.4367 10.1626 13.203 10.1626 12.9594V11.122C10.1626 10.8784 10.0659 10.6447 9.89358 10.4724C9.72129 10.3002 9.48763 10.2034 9.24398 10.2034Z" fill="#3978FC"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/AIWidgets/BotIcon/BotIcon.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function BotIcon(theme: IconTheme | undefined = undefined) {
+  return !theme?.applyZoom ? (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={theme && theme.width ? theme.width : '24'}
+      height={theme && theme.height ? theme.height : '25'}
+      viewBox="0 0 24 25"
+      fill="none"
+    >
+      <path
+        d="M16.1339 5.61003H12.9186V4.69137C12.9186 4.44772 12.8219 4.21406 12.6496 4.04177C12.4773 3.86949 12.2436 3.77271 12 3.77271C11.7563 3.77271 11.5227 3.86949 11.3504 4.04177C11.1781 4.21406 11.0813 4.44772 11.0813 4.69137V5.61003H7.86601C6.64779 5.61003 5.47946 6.09396 4.61805 6.95537C3.75664 7.81678 3.27271 8.98511 3.27271 10.2033V16.6339C3.27271 17.8522 3.75664 19.0205 4.61805 19.8819C5.47946 20.7433 6.64779 21.2272 7.86601 21.2272H16.1339C16.7371 21.2272 17.3344 21.1084 17.8917 20.8776C18.449 20.6468 18.9554 20.3084 19.3819 19.8819C19.8084 19.4554 20.1468 18.949 20.3776 18.3917C20.6084 17.8344 20.7272 17.2371 20.7272 16.6339V10.2033C20.7272 9.60013 20.6084 9.00283 20.3776 8.44555C20.1468 7.88826 19.8084 7.3819 19.3819 6.95537C18.9554 6.52884 18.449 6.1905 17.8917 5.95967C17.3344 5.72883 16.7371 5.61003 16.1339 5.61003ZM18.8899 16.6339C18.8899 17.3649 18.5996 18.0659 18.0827 18.5827C17.5659 19.0996 16.8649 19.3899 16.1339 19.3899H7.86601C7.13507 19.3899 6.43408 19.0996 5.91723 18.5827C5.40039 18.0659 5.11003 17.3649 5.11003 16.6339V10.2033C5.11003 9.47239 5.40039 8.7714 5.91723 8.25455C6.43408 7.73771 7.13507 7.44735 7.86601 7.44735H16.1339C16.8649 7.44735 17.5659 7.73771 18.0827 8.25455C18.5996 8.7714 18.8899 9.47239 18.8899 10.2033V16.6339Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+      <path
+        d="M14.7559 10.2034C14.5123 10.2034 14.2786 10.3002 14.1063 10.4724C13.9341 10.6447 13.8373 10.8784 13.8373 11.122V12.9594C13.8373 13.203 13.9341 13.4367 14.1063 13.6089C14.2786 13.7812 14.5123 13.878 14.7559 13.878C14.9996 13.878 15.2332 13.7812 15.4055 13.6089C15.5778 13.4367 15.6746 13.203 15.6746 12.9594V11.122C15.6746 10.8784 15.5778 10.6447 15.4055 10.4724C15.2332 10.3002 14.9996 10.2034 14.7559 10.2034Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+      <path
+        d="M9.24398 10.2034C9.00034 10.2034 8.76668 10.3002 8.59439 10.4724C8.42211 10.6447 8.32532 10.8784 8.32532 11.122V12.9594C8.32532 13.203 8.42211 13.4367 8.59439 13.6089C8.76668 13.7812 9.00034 13.878 9.24398 13.878C9.48763 13.878 9.72129 13.7812 9.89358 13.6089C10.0659 13.4367 10.1626 13.203 10.1626 12.9594V11.122C10.1626 10.8784 10.0659 10.6447 9.89358 10.4724C9.72129 10.3002 9.48763 10.2034 9.24398 10.2034Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  ) : (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={theme && theme.width ? theme.width : '24'}
+      height={theme && theme.height ? theme.height : '25'}
+      viewBox="0 0 24 25"
+      fill="none"
+    >
+      <path
+        d="M16.1339 5.61003H12.9186V4.69137C12.9186 4.44772 12.8219 4.21406 12.6496 4.04177C12.4773 3.86949 12.2436 3.77271 12 3.77271C11.7563 3.77271 11.5227 3.86949 11.3504 4.04177C11.1781 4.21406 11.0813 4.44772 11.0813 4.69137V5.61003H7.86601C6.64779 5.61003 5.47946 6.09396 4.61805 6.95537C3.75664 7.81678 3.27271 8.98511 3.27271 10.2033V16.6339C3.27271 17.8522 3.75664 19.0205 4.61805 19.8819C5.47946 20.7433 6.64779 21.2272 7.86601 21.2272H16.1339C16.7371 21.2272 17.3344 21.1084 17.8917 20.8776C18.449 20.6468 18.9554 20.3084 19.3819 19.8819C19.8084 19.4554 20.1468 18.949 20.3776 18.3917C20.6084 17.8344 20.7272 17.2371 20.7272 16.6339V10.2033C20.7272 9.60013 20.6084 9.00283 20.3776 8.44555C20.1468 7.88826 19.8084 7.3819 19.3819 6.95537C18.9554 6.52884 18.449 6.1905 17.8917 5.95967C17.3344 5.72883 16.7371 5.61003 16.1339 5.61003ZM18.8899 16.6339C18.8899 17.3649 18.5996 18.0659 18.0827 18.5827C17.5659 19.0996 16.8649 19.3899 16.1339 19.3899H7.86601C7.13507 19.3899 6.43408 19.0996 5.91723 18.5827C5.40039 18.0659 5.11003 17.3649 5.11003 16.6339V10.2033C5.11003 9.47239 5.40039 8.7714 5.91723 8.25455C6.43408 7.73771 7.13507 7.44735 7.86601 7.44735H16.1339C16.8649 7.44735 17.5659 7.73771 18.0827 8.25455C18.5996 8.7714 18.8899 9.47239 18.8899 10.2033V16.6339Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+      <path
+        d="M14.7559 10.2034C14.5123 10.2034 14.2786 10.3002 14.1063 10.4724C13.9341 10.6447 13.8373 10.8784 13.8373 11.122V12.9594C13.8373 13.203 13.9341 13.4367 14.1063 13.6089C14.2786 13.7812 14.5123 13.878 14.7559 13.878C14.9996 13.878 15.2332 13.7812 15.4055 13.6089C15.5778 13.4367 15.6746 13.203 15.6746 12.9594V11.122C15.6746 10.8784 15.5778 10.6447 15.4055 10.4724C15.2332 10.3002 14.9996 10.2034 14.7559 10.2034Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+      <path
+        d="M9.24398 10.2034C9.00034 10.2034 8.76668 10.3002 8.59439 10.4724C8.42211 10.6447 8.32532 10.8784 8.32532 11.122V12.9594C8.32532 13.203 8.42211 13.4367 8.59439 13.6089C8.76668 13.7812 9.00034 13.878 9.24398 13.878C9.48763 13.878 9.72129 13.7812 9.89358 13.6089C10.0659 13.4367 10.1626 13.203 10.1626 12.9594V11.122C10.1626 10.8784 10.0659 10.6447 9.89358 10.4724C9.72129 10.3002 9.48763 10.2034 9.24398 10.2034Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default BotIcon;