quickblox-react-ui-kit 0.2.0 → 0.2.2

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

@@ -0,0 +1,7 @@
+.message-view-container--outgoing-message-wrapper--context-menu{
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-width: 35px;
+}

package/src/Presentation/components/UI/Dialogs/MessagesView/OutGoingMessage/OutGoingMessage.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import './OutGoingMessage.scss';
+import { MessageEntity } from '../../../../../../Domain/entity/MessageEntity';
+import UiKitTheme from '../../../../../assets/UiKitTheme';
+import ViewedDelivered from '../../../svgs/Icons/Status/ViewedDelivered';
+import SentStatusIcon from '../../../svgs/Icons/Status/Sent';
+import { getTimeShort24hFormat } from '../../../../../../utils/DateTimeFormatter';
+
+export function OutGoingMessage(props: {
+  message: MessageEntity;
+  theme: UiKitTheme | undefined;
+  element: JSX.Element;
+}) {
+  // const [haveHover, setHaveHover] = useState(false);
+  // const [openMenu, setOpenMenu] = useState(false);
+
+  return (
+    <div
+      // onMouseEnter={() => setHaveHover(true)}
+      // onMouseLeave={() => setHaveHover(false)}
+      className="message-view-container--outgoing-message-wrapper"
+    >
+      {/* {haveHover || openMenu ? ( */}
+      {/*  <div */}
+      {/*    className="message-view-container--outgoing-message-wrapper--context-menu" */}
+      {/*    // onClick={() => { */}
+      {/*    //   setOpenMenu(!openMenu); */}
+      {/*    // }} */}
+      {/*  > */}
+      {/*     <EditDots */}
+      {/*      color={ */}
+      {/*        props.theme */}
+      {/*          ? props.theme.secondaryText() */}
+      {/*          : 'var(--secondary-text)' */}
+      {/*      } */}
+      {/*     /> */}
+      {/*    /!* {openMenu ? ( *!/ */}
+      {/*    /!*  <DropDownMenu *!/ */}
+      {/*    /!*    items={contextMessageMenu} *!/ */}
+      {/*    /!*    itemsAI={contextMessageMenuAI} *!/ */}
+      {/*    /!*  /> *!/ */}
+      {/*    /!* ) : null} *!/ */}
+      {/*  </div> */}
+      {/* ) : */}
+      <div className="message-view-container__status-message">
+        <div className="message-view-container__incoming-time">
+          {props.message.delivered_ids &&
+          props.message.delivered_ids.length > 0 ? (
+            <ViewedDelivered
+              width="13"
+              height="13"
+              applyZoom
+              color={
+                props.theme
+                  ? props.theme.mainElements()
+                  : 'var(--main-elements)'
+              }
+            />
+          ) : (
+            <SentStatusIcon
+              width="13"
+              height="13"
+              applyZoom
+              color={
+                props.theme
+                  ? props.theme.mainElements()
+                  : 'var(--main-elements)'
+              }
+            />
+          )}
+        </div>
+        <div
+          style={
+            props.theme
+              ? { color: props.theme ? props.theme.mainText() : '' }
+              : {}
+          }
+          className="message-view-container__incoming-time"
+        >
+          {getTimeShort24hFormat(props.message.date_sent)}
+        </div>
+      </div>
+      {/* )} */}
+      <div
+        style={
+          props.theme
+            ? {
+                color: props.theme.mainText(),
+                backgroundColor: props.theme.outgoingBackground(),
+              }
+            : {}
+        }
+        className="message-view-container__outgoing-message"
+      >
+        {props.element}
+      </div>
+    </div>
+  );
+}

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

@@ -295,7 +295,7 @@ export default function useMessagesViewModel(
   const sendTypingTextMessage = () => {
     console.log('call release in MessagesViewModelWithMockUseCase');
     userTypingMessageUseCase.execute().catch((reason) => {
-      const errorMessage = stringifyError(reason);
+      const errorMessage: string = stringifyError(reason);
 
       console.log('have exception in sendTypingTextMessage: ', errorMessage);
 
@@ -344,7 +344,7 @@ export default function useMessagesViewModel(
     sendTextMessageUseCase
       .execute()
       .catch((reason) => {
-        const errorMessage = stringifyError(reason);
+        const errorMessage: string = stringifyError(reason);
 
         console.log(
           'exception in sendMessage in useMessagesViewModel',
@@ -364,7 +364,7 @@ export default function useMessagesViewModel(
     const currentUserId =
       currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId || 0;
     const messageToSend: MessageEntity = Stubs.createMessageEntityWithParams(
-      0,
+      '',
       dialog.id,
       newMessage,
       Date.now().toString(),
@@ -401,7 +401,7 @@ export default function useMessagesViewModel(
         // '[attachment]'
         const messageToSend: MessageEntity =
           Stubs.createMessageEntityWithParams(
-            0,
+            '',
             dialog.id,
             // eslint-disable-next-line promise/always-return
             fileMessage.name || '[attachment]',
@@ -421,11 +421,13 @@ export default function useMessagesViewModel(
         messageToSend.dialogType = dialog.type;
         const attachments: ChatMessageAttachmentEntity[] = [
           {
-            id: fileMessage.uid,
+            id: fileMessage.id as string,
+            uid: fileMessage.uid,
             type: fileMessage.type!,
             file: fileMessage,
             name: fileMessage.name,
             size: fileMessage.size,
+            url: fileMessage.url,
           },
         ];
 

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function BookIcon() {
+  return <span>📖</span>;
+}
+
+export default BookIcon;

package/src/Presentation/components/UI/svgs/Icons/AIWidgets/HammerIcon/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function HammerIcon() {
+  return <span>🔨</span>;
+}
+
+export default HammerIcon;

package/src/Presentation/components/UI/svgs/Icons/AIWidgets/HandshakeIcon/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function HandshakeIcon() {
+  return <span>🤝</span>;
+}
+
+export default HandshakeIcon;

package/src/Presentation/components/UI/svgs/Icons/AIWidgets/MuscleIcon/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function MuscleIcon() {
+  return <span>💪</span>;
+}
+
+export default MuscleIcon;

package/src/Presentation/components/UI/svgs/Icons/AIWidgets/NecktieIcon/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function NecktieIcon() {
+  return <span>👔</span>;
+}
+
+export default NecktieIcon;

package/src/Presentation/components/UI/svgs/Icons/AIWidgets/NeutralFaceIcon/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function NeutralFaceIcon() {
+  return <span>😐</span>;
+}
+
+export default NeutralFaceIcon;

package/src/Presentation/components/UI/svgs/Icons/AIWidgets/PalmsUpTogetherIcon/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function PalmsUpTogetherIcon() {
+  return <span>🤲</span>;
+}
+
+export default PalmsUpTogetherIcon;

package/src/Presentation/components/UI/svgs/Icons/AIWidgets/PerformingArtsIcon/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function PerformingArtsIcon() {
+  return <span>🎭</span>;
+}
+
+export default PerformingArtsIcon;

package/src/Presentation/components/UI/svgs/Icons/AIWidgets/PointUpIcon/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function PointUpIcon() {
+  return <span>☝️</span>;
+}
+
+export default PointUpIcon;

package/src/Presentation/components/UI/svgs/Icons/AIWidgets/SmileyIcon/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+function SmileyIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 496 512"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M248 0C111 0 0 111 0 248s111 248 248 248 248-111 248-248S385 0 248 0zm-8 376c-53 0-99.1-26.2-128.4-66.6a8 8 0 0 1 11.3-11.3c30.3 30.4 71 47.6 116.8 47.6 45.9 0 86.5-17.3 116.8-47.6a8 8 0 0 1 11.3 11.3C355.1 349.8 309 376 256 376zm-72-120c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 0c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default SmileyIcon;

package/src/Presentation/components/UI/svgs/Icons/AIWidgets/SmirkIcon/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function SmirkIcon() {
+  return <span>😏</span>;
+}
+
+export default SmirkIcon;

package/src/Presentation/components/UI/svgs/Icons/AIWidgets/WhiteCheckMarkIcon/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function WhiteCheckMarkIcon() {
+  return <span>✅</span>;
+}
+
+export default WhiteCheckMarkIcon;

package/src/Presentation/components/UI/svgs/Icons/Actions/AssistAnswer/AssistAnswer.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M15.7687 4.60889C17.85 4.60889 19.5373 6.27566 19.5373 8.33173V15.7774C19.5373 17.5695 18.2893 19.3012 15.7932 20.9725C16.3014 18.7501 16.1432 17.6388 15.3186 17.6388H8.23152C6.15018 17.6388 4.46292 15.9721 4.46292 13.916V8.33173C4.46292 6.27566 6.15018 4.60889 8.23152 4.60889H15.7687ZM15.7687 8.33173H8.23152C7.71118 8.33173 7.28937 8.74842 7.28937 9.26244V12.0546C7.28937 12.5686 7.71118 12.9853 8.23152 12.9853H15.7687C16.289 12.9853 16.7109 12.5686 16.7109 12.0546V9.26244C16.7109 8.74842 16.289 8.33173 15.7687 8.33173ZM10.1158 9.26244C10.6361 9.26244 11.058 9.67913 11.058 10.1932V11.1239C11.058 11.6379 10.6361 12.0546 10.1158 12.0546C9.59548 12.0546 9.17366 11.6379 9.17366 11.1239V10.1932C9.17366 9.67913 9.59548 9.26244 10.1158 9.26244ZM13.8844 9.26244C14.4047 9.26244 14.8266 9.67913 14.8266 10.1932V11.1239C14.8266 11.6379 14.4047 12.0546 13.8844 12.0546C13.3641 12.0546 12.9423 11.6379 12.9423 11.1239V10.1932C12.9423 9.67913 13.3641 9.26244 13.8844 9.26244ZM2.57862 8.33173H3.52077V13.916H2.57862C2.05829 13.916 1.63647 13.4993 1.63647 12.9853V9.26244C1.63647 8.74842 2.05829 8.33173 2.57862 8.33173ZM20.4794 8.33173H21.4216C21.9419 8.33173 22.3637 8.74842 22.3637 9.26244V12.9853C22.3637 13.4993 21.9419 13.916 21.4216 13.916H20.4794V8.33173Z" fill="#3978FC"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Actions/AssistAnswer/index.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function AssitAnswerIcon(theme: IconTheme | undefined = undefined) {
+  return !theme?.applyZoom ? (
+    <svg
+      // style={{
+      //   padding: '5px 3px 5px 3px',
+      //   alignSelf: 'stretch',
+      //   flex: '1',
+      //   position: 'relative',
+      //   overflow: 'visible',
+      // }}
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        id="AssistAnswer"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.7687 4.60889C17.85 4.60889 19.5373 6.27566 19.5373 8.33173V15.7774C19.5373 17.5695 18.2893 19.3012 15.7932 20.9725C16.3014 18.7501 16.1432 17.6388 15.3186 17.6388H8.23152C6.15018 17.6388 4.46292 15.9721 4.46292 13.916V8.33173C4.46292 6.27566 6.15018 4.60889 8.23152 4.60889H15.7687ZM15.7687 8.33173H8.23152C7.71118 8.33173 7.28937 8.74842 7.28937 9.26244V12.0546C7.28937 12.5686 7.71118 12.9853 8.23152 12.9853H15.7687C16.289 12.9853 16.7109 12.5686 16.7109 12.0546V9.26244C16.7109 8.74842 16.289 8.33173 15.7687 8.33173ZM10.1158 9.26244C10.6361 9.26244 11.058 9.67913 11.058 10.1932V11.1239C11.058 11.6379 10.6361 12.0546 10.1158 12.0546C9.59548 12.0546 9.17366 11.6379 9.17366 11.1239V10.1932C9.17366 9.67913 9.59548 9.26244 10.1158 9.26244ZM13.8844 9.26244C14.4047 9.26244 14.8266 9.67913 14.8266 10.1932V11.1239C14.8266 11.6379 14.4047 12.0546 13.8844 12.0546C13.3641 12.0546 12.9423 11.6379 12.9423 11.1239V10.1932C12.9423 9.67913 13.3641 9.26244 13.8844 9.26244ZM2.57862 8.33173H3.52077V13.916H2.57862C2.05829 13.916 1.63647 13.4993 1.63647 12.9853V9.26244C1.63647 8.74842 2.05829 8.33173 2.57862 8.33173ZM20.4794 8.33173H21.4216C21.9419 8.33173 22.3637 8.74842 22.3637 9.26244V12.9853C22.3637 13.4993 21.9419 13.916 21.4216 13.916H20.4794V8.33173Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  ) : (
+    <svg
+      // style={{
+      //   padding: '5px 3px 5px 3px',
+      //   alignSelf: 'stretch',
+      //   flex: '1',
+      //   position: 'relative',
+      //   overflow: 'visible',
+      // }}
+      width={theme && theme.width ? theme.width : '24'}
+      height={theme && theme.height ? theme.height : '24'}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        id="AssistAnswer"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.7687 4.60889C17.85 4.60889 19.5373 6.27566 19.5373 8.33173V15.7774C19.5373 17.5695 18.2893 19.3012 15.7932 20.9725C16.3014 18.7501 16.1432 17.6388 15.3186 17.6388H8.23152C6.15018 17.6388 4.46292 15.9721 4.46292 13.916V8.33173C4.46292 6.27566 6.15018 4.60889 8.23152 4.60889H15.7687ZM15.7687 8.33173H8.23152C7.71118 8.33173 7.28937 8.74842 7.28937 9.26244V12.0546C7.28937 12.5686 7.71118 12.9853 8.23152 12.9853H15.7687C16.289 12.9853 16.7109 12.5686 16.7109 12.0546V9.26244C16.7109 8.74842 16.289 8.33173 15.7687 8.33173ZM10.1158 9.26244C10.6361 9.26244 11.058 9.67913 11.058 10.1932V11.1239C11.058 11.6379 10.6361 12.0546 10.1158 12.0546C9.59548 12.0546 9.17366 11.6379 9.17366 11.1239V10.1932C9.17366 9.67913 9.59548 9.26244 10.1158 9.26244ZM13.8844 9.26244C14.4047 9.26244 14.8266 9.67913 14.8266 10.1932V11.1239C14.8266 11.6379 14.4047 12.0546 13.8844 12.0546C13.3641 12.0546 12.9423 11.6379 12.9423 11.1239V10.1932C12.9423 9.67913 13.3641 9.26244 13.8844 9.26244ZM2.57862 8.33173H3.52077V13.916H2.57862C2.05829 13.916 1.63647 13.4993 1.63647 12.9853V9.26244C1.63647 8.74842 2.05829 8.33173 2.57862 8.33173ZM20.4794 8.33173H21.4216C21.9419 8.33173 22.3637 8.74842 22.3637 9.26244V12.9853C22.3637 13.4993 21.9419 13.916 21.4216 13.916H20.4794V8.33173Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default AssitAnswerIcon;
+
+/*
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function User(theme: IconTheme | undefined = undefined) {
+  return !theme?.applyZoom ? (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21.9999 10.8167C24.1266 10.8167 25.8499 12.54 25.8499 14.6667C25.8499 16.7934 24.1266 18.5167 21.9999 18.5167C19.8733 18.5167 18.1499 16.7934 18.1499 14.6667C18.1499 12.54 19.8733 10.8167 21.9999 10.8167ZM21.9999 27.3167C27.4449 27.3167 33.1833 29.9934 33.1833 31.1667V33.1834H10.8166V31.1667C10.8166 29.9934 16.5549 27.3167 21.9999 27.3167ZM21.9999 7.33337C17.9483 7.33337 14.6666 10.615 14.6666 14.6667C14.6666 18.7184 17.9483 22 21.9999 22C26.0516 22 29.3333 18.7184 29.3333 14.6667C29.3333 10.615 26.0516 7.33337 21.9999 7.33337ZM21.9999 23.8334C17.1049 23.8334 7.33325 26.29 7.33325 31.1667V36.6667H36.6666V31.1667C36.6666 26.29 26.8949 23.8334 21.9999 23.8334Z"
+        id="User"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  ) : (
+    <svg
+      width={theme && theme.width ? theme.width : '26'}
+      height={theme && theme.height ? theme.height : '26'}
+      viewBox="0 0 26 26"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.9999 6.46418C14.2428 6.46418 15.2499 7.47132 15.2499 8.71418C15.2499 9.95704 14.2428 10.9642 12.9999 10.9642C11.757 10.9642 10.7499 9.95704 10.7499 8.71418C10.7499 7.47132 11.757 6.46418 12.9999 6.46418ZM12.9999 16.107C16.182 16.107 19.5356 17.6713 19.5356 18.357V19.5356H6.46418V18.357C6.46418 17.6713 9.81775 16.107 12.9999 16.107ZM12.9999 4.42847C10.632 4.42847 8.71418 6.34632 8.71418 8.71418C8.71418 11.082 10.632 12.9999 12.9999 12.9999C15.3678 12.9999 17.2856 11.082 17.2856 8.71418C17.2856 6.34632 15.3678 4.42847 12.9999 4.42847ZM12.9999 14.0713C10.1392 14.0713 4.42847 15.507 4.42847 18.357V21.5713H21.5713V18.357C21.5713 15.507 15.8606 14.0713 12.9999 14.0713Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default User;
+
+ */

package/src/Presentation/components/UI/svgs/Icons/Actions/Summarize/Summarize.svg

@@ -0,0 +1,6 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.667 3.66663H7.33366C5.31699 3.66663 3.66699 5.31663 3.66699 7.33329V40.3333L11.0003 33H36.667C38.6837 33 40.3337 31.35 40.3337 29.3333V7.33329C40.3337 5.31663 38.6837 3.66663 36.667 3.66663ZM36.667 29.3333H11.0003L7.33366 33V7.33329H36.667V29.3333Z" fill="#0B121B"/>
+<path d="M12.0002 13C12.0002 12.4477 12.448 12 13.0002 12H22.0002C22.5525 12 23.0002 12.4477 23.0002 13V17C23.0002 17.5523 22.5525 18 22.0002 18H13.0002C12.448 18 12.0002 17.5523 12.0002 17V13Z" fill="#0B121B"/>
+<path d="M26.0002 13C26.0002 12.4477 26.448 12 27.0002 12H31.0002C31.5525 12 32.0002 12.4477 32.0002 13V24C32.0002 24.5523 31.5525 25 31.0002 25H27.0002C26.448 25 26.0002 24.5523 26.0002 24V13Z" fill="#0B121B"/>
+<path d="M15.0002 21C15.0002 20.4477 15.448 20 16.0002 20H22.0002C22.5525 20 23.0002 20.4477 23.0002 21V23C23.0002 23.5523 22.5525 24 22.0002 24H16.0002C15.448 24 15.0002 23.5523 15.0002 23V21Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Actions/Summarize/index.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function SummarizeIcon(theme: IconTheme | undefined = undefined) {
+  return !theme?.applyZoom ? (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M36.667 3.66663H7.33366C5.31699 3.66663 3.66699 5.31663 3.66699 7.33329V40.3333L11.0003 33H36.667C38.6837 33 40.3337 31.35 40.3337 29.3333V7.33329C40.3337 5.31663 38.6837 3.66663 36.667 3.66663ZM36.667 29.3333H11.0003L7.33366 33V7.33329H36.667V29.3333Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+      <path
+        d="M12.0002 13C12.0002 12.4477 12.448 12 13.0002 12H22.0002C22.5525 12 23.0002 12.4477 23.0002 13V17C23.0002 17.5523 22.5525 18 22.0002 18H13.0002C12.448 18 12.0002 17.5523 12.0002 17V13Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+      <path
+        d="M26.0002 13C26.0002 12.4477 26.448 12 27.0002 12H31.0002C31.5525 12 32.0002 12.4477 32.0002 13V24C32.0002 24.5523 31.5525 25 31.0002 25H27.0002C26.448 25 26.0002 24.5523 26.0002 24V13Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+      <path
+        d="M15.0002 21C15.0002 20.4477 15.448 20 16.0002 20H22.0002C22.5525 20 23.0002 20.4477 23.0002 21V23C23.0002 23.5523 22.5525 24 22.0002 24H16.0002C15.448 24 15.0002 23.5523 15.0002 23V21Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  ) : (
+    <svg
+      width={theme && theme.width ? theme.width : '22'}
+      height={theme && theme.height ? theme.height : '22'}
+      viewBox="0 0 22 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M36.667 3.66663H7.33366C5.31699 3.66663 3.66699 5.31663 3.66699 7.33329V40.3333L11.0003 33H36.667C38.6837 33 40.3337 31.35 40.3337 29.3333V7.33329C40.3337 5.31663 38.6837 3.66663 36.667 3.66663ZM36.667 29.3333H11.0003L7.33366 33V7.33329H36.667V29.3333Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+      <path
+        d="M12.0002 13C12.0002 12.4477 12.448 12 13.0002 12H22.0002C22.5525 12 23.0002 12.4477 23.0002 13V17C23.0002 17.5523 22.5525 18 22.0002 18H13.0002C12.448 18 12.0002 17.5523 12.0002 17V13Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+      <path
+        d="M26.0002 13C26.0002 12.4477 26.448 12 27.0002 12H31.0002C31.5525 12 32.0002 12.4477 32.0002 13V24C32.0002 24.5523 31.5525 25 31.0002 25H27.0002C26.448 25 26.0002 24.5523 26.0002 24V13Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+      <path
+        d="M15.0002 21C15.0002 20.4477 15.448 20 16.0002 20H22.0002C22.5525 20 23.0002 20.4477 23.0002 21V23C23.0002 23.5523 22.5525 24 22.0002 24H16.0002C15.448 24 15.0002 23.5523 15.0002 23V21Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default SummarizeIcon;

package/src/Presentation/components/UI/svgs/Icons/Actions/Tone/Tone.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 6V0L14 8L22 16V10C28.62 10 34 15.38 34 22C34 24.02 33.5 25.94 32.6 27.6L35.52 30.52C37.08 28.06 38 25.14 38 22C38 13.16 30.84 6 22 6ZM22 34C15.38 34 10 28.62 10 22C10 19.98 10.5 18.06 11.4 16.4L8.48 13.48C6.92 15.94 6 18.86 6 22C6 30.84 13.16 38 22 38V44L30 36L22 28V34Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Actions/Tone/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function ToneIcon(theme: IconTheme | undefined = undefined) {
+  return !theme?.applyZoom ? (
+    <svg
+      width={theme && theme.width ? theme.width : '24'}
+      height={theme && theme.height ? theme.height : '24'}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        id="ToneIcon"
+        d="M12 3.27273V0L7.63634 4.36364L12 8.72727V5.45455C15.6109 5.45455 18.5454 8.38909 18.5454 12C18.5454 13.1018 18.2727 14.1491 17.7818 15.0545L19.3745 16.6473C20.2254 15.3055 20.7272 13.7127 20.7272 12C20.7272 7.17818 16.8218 3.27273 12 3.27273ZM12 18.5455C8.38907 18.5455 5.45452 15.6109 5.45452 12C5.45452 10.8982 5.72725 9.85091 6.21816 8.94545L4.62543 7.35273C3.77452 8.69455 3.27271 10.2873 3.27271 12C3.27271 16.8218 7.17816 20.7273 12 20.7273V24L16.3636 19.6364L12 15.2727V18.5455Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  ) : (
+    <svg
+      width={theme && theme.width ? theme.width : '24'}
+      height={theme && theme.height ? theme.height : '24'}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        id="ToneIcon"
+        d="M12 3.27273V0L7.63634 4.36364L12 8.72727V5.45455C15.6109 5.45455 18.5454 8.38909 18.5454 12C18.5454 13.1018 18.2727 14.1491 17.7818 15.0545L19.3745 16.6473C20.2254 15.3055 20.7272 13.7127 20.7272 12C20.7272 7.17818 16.8218 3.27273 12 3.27273ZM12 18.5455C8.38907 18.5455 5.45452 15.6109 5.45452 12C5.45452 10.8982 5.72725 9.85091 6.21816 8.94545L4.62543 7.35273C3.77452 8.69455 3.27271 10.2873 3.27271 12C3.27271 16.8218 7.17816 20.7273 12 20.7273V24L16.3636 19.6364L12 15.2727V18.5455Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default ToneIcon;

package/src/Presentation/components/UI/svgs/Icons/Media/Translate/Translate.svg

@@ -0,0 +1,3 @@
+<svg width="46" height="44" viewBox="0 0 46 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.74 30.14L20.66 25.12L20.72 25.06C24.2 21.18 26.68 16.72 28.14 12H34V8H20V4H16V8H2V11.98H24.34C23 15.84 20.88 19.5 18 22.7C16.14 20.64 14.6 18.38 13.38 16H9.38C10.84 19.26 12.84 22.34 15.34 25.12L5.16 35.16L8 38L18 28L24.22 34.22L25.74 30.14ZM37 20H33L24 44H28L30.24 38H39.74L42 44H46L37 20ZM31.76 34L35 25.34L38.24 34H31.76Z" fill="black"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Media/Translate/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function TranslateIcon(theme: IconTheme | undefined = undefined) {
+  return !theme?.applyZoom ? (
+    <svg
+      width={theme && theme.width ? theme.width : '16'}
+      height={theme && theme.height ? theme.height : '16'}
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <path
+        id="TranslateIcon"
+        d="M9.36002 10.9596L7.51275 9.1341L7.53457 9.11228C8.80002 7.70137 9.70184 6.07956 10.2327 4.36319H12.3637V2.90865H7.27275V1.4541H5.8182V2.90865H0.727295V4.35592H8.85093C8.36366 5.75956 7.59275 7.09047 6.54548 8.2541C5.86911 7.50501 5.30911 6.68319 4.86548 5.81774H3.41093C3.94184 7.00319 4.66911 8.12319 5.5782 9.1341L1.87639 12.785L2.90911 13.8177L6.54548 10.1814L8.80729 12.4432L9.36002 10.9596ZM13.4546 7.27228H12L8.72729 15.9996H10.1818L10.9964 13.8177H14.4509L15.2727 15.9996H16.7273L13.4546 7.27228ZM11.5491 12.3632L12.7273 9.2141L13.9055 12.3632H11.5491Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  ) : (
+    <svg
+      width={theme && theme.width ? theme.width : '17'}
+      height={theme && theme.height ? theme.height : '16'}
+      viewBox="0 0 17 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        id="TranslateIcon"
+        d="M9.36002 10.9596L7.51275 9.1341L7.53457 9.11228C8.80002 7.70137 9.70184 6.07956 10.2327 4.36319H12.3637V2.90865H7.27275V1.4541H5.8182V2.90865H0.727295V4.35592H8.85093C8.36366 5.75956 7.59275 7.09047 6.54548 8.2541C5.86911 7.50501 5.30911 6.68319 4.86548 5.81774H3.41093C3.94184 7.00319 4.66911 8.12319 5.5782 9.1341L1.87639 12.785L2.90911 13.8177L6.54548 10.1814L8.80729 12.4432L9.36002 10.9596ZM13.4546 7.27228H12L8.72729 15.9996H10.1818L10.9964 13.8177H14.4509L15.2727 15.9996H16.7273L13.4546 7.27228ZM11.5491 12.3632L12.7273 9.2141L13.9055 12.3632H11.5491Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default TranslateIcon;