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

package/src/Presentation/components/UI/Placeholders/ErrorComponent/ErrorComponent.scss

@@ -0,0 +1,74 @@
+$error-container-background-color: var(--main-background);
+$error-container-error-message-text-color: var(--caption);
+$error-container-error-action-color: var(--main-elements);
+$error-container-divider: var(--divider);
+
+.error-container-wrapper {
+  // padding-top: 9px;
+  // padding-bottom: 12px;
+  border: 1px solid $error-container-divider;
+}
+
+.error-container {
+  display: flex;
+  flex-flow: column nowrap;
+  min-width: 360px;
+  min-height: 156px;
+  margin: 0 auto;
+  justify-content: center;
+  align-items: center;
+  // border: 1px solid green;
+  gap: 16px;
+  background-color: $error-container-background-color;
+  &__error-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+
+    min-width: 60px;
+    min-height: 60px;
+
+
+    color: $error-container-error-message-text-color;
+    svg path {fill: $error-container-error-message-text-color}
+  }
+  &__error-message {
+    min-height: 24px;
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    letter-spacing: 0.15px;
+    color: $error-container-error-message-text-color;
+  }
+  &--error-action {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    gap: 8px;
+    min-height: 40px;
+    min-width: 92px;
+    cursor: pointer;
+
+    &__refresh-icon {
+      min-width: 24px;
+      min-height: 24px;
+      svg path {fill: $error-container-error-action-color}
+    }
+    &__refresh-text {
+      color: $error-container-error-action-color;
+      font-family: 'Roboto';
+      font-style: normal;
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 16px;
+      letter-spacing: 0.4px;
+     }
+  }
+}

package/src/Presentation/components/UI/Placeholders/ErrorComponent/ErrorComponent.tsx

@@ -0,0 +1,52 @@
+import './ErrorComponent.scss';
+import React from 'react';
+import { IconTheme } from '../../svgs/Icons/IconsCommonTypes';
+import Error from '../../svgs/Icons/Status/Error';
+import { FunctionTypeVoidToVoid } from '../../../../../CommonTypes/BaseViewModel';
+import ColumnContainer from '../../../containers/ColumnContainer/ColumnContainer';
+
+type ErrorComponentProps = {
+  title?: string;
+  ClickActionHandler?: FunctionTypeVoidToVoid;
+  TouchActionHandler?: FunctionTypeVoidToVoid;
+  theme?: IconTheme;
+};
+// eslint-disable-next-line react/function-component-definition
+const ErrorComponent: React.FC<ErrorComponentProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  title,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ClickActionHandler,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  TouchActionHandler,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  theme = undefined,
+}: ErrorComponentProps) => {
+  return (
+    <div className="error-container-wrapper">
+      <ColumnContainer>
+        <div
+          style={{ width: '52px', height: '52px' }}
+          className="error-container__error-icon"
+        >
+          {theme ? <Error color={theme?.color} /> : <Error />}
+        </div>
+        <div className="error-container__error-message">{title}</div>
+        <div
+          className="error-container--error-action"
+          onClick={ClickActionHandler}
+          onTouchStart={TouchActionHandler}
+        >
+          {/* <div className="error-container--error-action__refresh-icon"> */}
+          {/*  <Refresh height="24" width="24" color={theme?.color} applyZoom /> */}
+          {/* </div> */}
+          {/* <div className="error-container--error-action__refresh-text"> */}
+          {/*  Retry */}
+          {/* </div> */}
+        </div>
+      </ColumnContainer>
+    </div>
+  );
+};
+
+export default ErrorComponent;

package/src/Presentation/components/UI/Placeholders/LoaderComponent/LoaderComponent.scss

@@ -0,0 +1,21 @@
+$default-background-color: var(--main-elements);
+$default-width-icon: 44;
+$default-height-icon: 44;
+
+// #Loader{fill: $default-background-color};
+
+.loader {
+  animation: spin 2s linear infinite;
+  svg path {fill: $default-background-color};
+  min-width: $default-width-icon;
+  min-height: $default-height-icon;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/Presentation/components/UI/Placeholders/LoaderComponent/LoaderComponent.tsx

@@ -0,0 +1,44 @@
+import './LoaderComponent.scss';
+// import Loader from '../../svgs/Icons/Status/Loader';
+import { IconTheme } from '../../svgs/Icons/IconsCommonTypes';
+import { LoaderSvg } from '../../../../icons';
+
+export default function LoaderComponent(
+  theme: IconTheme | undefined = undefined,
+) {
+  const loaderStyles = theme
+    ? {
+        animation: 'spin 1s linear infinite',
+        svg: {
+          path: {
+            fill: theme?.color ? theme?.color : '',
+          },
+        },
+        minWidth: theme?.width,
+        minHeight: theme?.height,
+        Loader: {
+          fill: theme?.color ? theme?.color : '',
+        },
+        fill: theme?.color ? theme?.color : '',
+      }
+    : {};
+  const loaderClasses = [
+    theme && Object.keys(theme).length > 0 ? '' : 'loader',
+  ].join(' ');
+
+  return (
+    <div style={loaderStyles} className={loaderClasses}>
+      {theme ? (
+        <LoaderSvg className="loader" />
+      ) : (
+        // <Loader
+        //   color={theme?.color}
+        //   width={theme?.width}
+        //   height={theme?.height}
+        // />
+        // <Loader />
+        <LoaderSvg className="loader" />
+      )}
+    </div>
+  );
+}

package/src/Presentation/components/UI/svgs/ActiveSvg/ActiveSvg.scss

@@ -0,0 +1,3 @@
+.active-svg-container{
+  cursor: pointer;
+}

package/src/Presentation/components/UI/svgs/ActiveSvg/ActiveSvg.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { FunctionTypeVoidToVoid } from '../../../../../CommonTypes/BaseViewModel';
+import './ActiveSvg.scss';
+
+type ActiveSvgContainerProps = {
+  content: React.ReactNode;
+  onTouch?: FunctionTypeVoidToVoid;
+  onClick?: FunctionTypeVoidToVoid;
+  disabled?: boolean;
+};
+// eslint-disable-next-line react/function-component-definition
+const ActiveSvg: React.FC<ActiveSvgContainerProps> = ({
+  content,
+  onTouch,
+  onClick,
+  disabled = false,
+}: ActiveSvgContainerProps) => {
+  return (
+    <div
+      className="active-svg-container"
+      style={{ cursor: disabled ? 'default' : 'pointer' }}
+      onTouchStart={(event: React.TouchEvent) => {
+        // eslint-disable-next-line no-unused-expressions
+        onTouch && typeof onTouch === 'function' && !disabled
+          ? onTouch()
+          : () => {
+              console.log('touched');
+            };
+        event.preventDefault();
+      }}
+      onClick={() => {
+        // eslint-disable-next-line no-unused-expressions
+        onClick && typeof onClick === 'function' && !disabled
+          ? onClick()
+          : () => {
+              console.log('clicked');
+            };
+      }}
+    >
+      {content}
+    </div>
+  );
+};
+
+export default ActiveSvg;

package/src/Presentation/components/UI/svgs/Icons/AIWidgets/AIWidget/Send.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="M2.76833 38.5L41.25 22L2.76833 5.5L2.75 18.3333L30.25 22L2.75 25.6667L2.76833 38.5Z" fill="#0B121B"/>
+</svg>

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function AIWidgetIcon(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="M2.76833 38.5L41.25 22L2.76833 5.5L2.75 18.3333L30.25 22L2.75 25.6667L2.76833 38.5Z"
+        id="SendB"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  ) : (
+    <svg
+      width={theme && theme.width ? theme.width : '28'}
+      height={theme && theme.height ? theme.height : '28'}
+      viewBox="0 0 22 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18,6 C20.209139,6 22,7.790861 22,10 L22,18 C22,19.9255253 20.6753401,21.786149 18.0260203,23.581871 C18.5654117,21.193957 18.3975027,20 17.5222933,20 L10,20 C7.790861,20 6,18.209139 6,16 L6,10 C6,7.790861 7.790861,6 10,6 L18,6 Z M18,10 L10,10 C9.44771525,10 9,10.4477153 9,11 L9,14 C9,14.5522847 9.44771525,15 10,15 L18,15 C18.5522847,15 19,14.5522847 19,14 L19,11 C19,10.4477153 18.5522847,10 18,10 Z M12,11 C12.5522847,11 13,11.4477153 13,12 L13,13 C13,13.5522847 12.5522847,14 12,14 C11.4477153,14 11,13.5522847 11,13 L11,12 C11,11.4477153 11.4477153,11 12,11 Z M16,11 C16.5522847,11 17,11.4477153 17,12 L17,13 C17,13.5522847 16.5522847,14 16,14 C15.4477153,14 15,13.5522847 15,13 L15,12 C15,11.4477153 15.4477153,11 16,11 Z M4,10 L5,10 L5,10 L5,16 L4,16 C3.44771525,16 3,15.5522847 3,15 L3,11 C3,10.4477153 3.44771525,10 4,10 Z M23,10 L24,10 C24.5522847,10 25,10.4477153 25,11 L25,15 C25,15.5522847 24.5522847,16 24,16 L23,16 L23,16 L23,10 Z"
+        id="AIWidget"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+/*
+
+
+ */
+export default AIWidgetIcon;

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/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;

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/Add/Add.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="M34.8333 5.5H9.16667C7.13167 5.5 5.5 7.15 5.5 9.16667V34.8333C5.5 36.85 7.13167 38.5 9.16667 38.5H34.8333C36.85 38.5 38.5 36.85 38.5 34.8333V9.16667C38.5 7.15 36.85 5.5 34.8333 5.5ZM34.8333 34.8333H9.16667V9.16667H34.8333V34.8333ZM20.1667 31.1667H23.8333V23.8333H31.1667V20.1667H23.8333V12.8333H20.1667V20.1667H12.8333V23.8333H20.1667V31.1667Z" fill="#0B121B"/>
+</svg>

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Add(theme: IconTheme | undefined = undefined) {
+  return (
+    <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="M34.8333 5.5H9.16667C7.13167 5.5 5.5 7.15 5.5 9.16667V34.8333C5.5 36.85 7.13167 38.5 9.16667 38.5H34.8333C36.85 38.5 38.5 36.85 38.5 34.8333V9.16667C38.5 7.15 36.85 5.5 34.8333 5.5ZM34.8333 34.8333H9.16667V9.16667H34.8333V34.8333ZM20.1667 31.1667H23.8333V23.8333H31.1667V20.1667H23.8333V12.8333H20.1667V20.1667H12.8333V23.8333H20.1667V31.1667Z"
+        id="Add"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Add;

package/src/Presentation/components/UI/svgs/Icons/Actions/AddContact/Add contact.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="M27.4999 22C31.5516 22 34.8333 18.7183 34.8333 14.6666C34.8333 10.615 31.5516 7.33331 27.4999 7.33331C23.4483 7.33331 20.1666 10.615 20.1666 14.6666C20.1666 18.7183 23.4483 22 27.4999 22ZM27.4999 11C29.5166 11 31.1666 12.65 31.1666 14.6666C31.1666 16.6833 29.5166 18.3333 27.4999 18.3333C25.4833 18.3333 23.8333 16.6833 23.8333 14.6666C23.8333 12.65 25.4833 11 27.4999 11ZM27.4999 25.6666C22.6049 25.6666 12.8333 28.1233 12.8333 33V36.6666H42.1666V33C42.1666 28.1233 32.3949 25.6666 27.4999 25.6666ZM16.4999 33C16.9033 31.68 22.5683 29.3333 27.4999 29.3333C32.4499 29.3333 38.1333 31.6983 38.4999 33H16.4999ZM10.9999 27.5V22H16.4999V18.3333H10.9999V12.8333H7.33325V18.3333H1.83325V22H7.33325V27.5H10.9999Z" fill="#0B121B"/>
+</svg>

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function AddContact(theme: IconTheme | undefined = undefined) {
+  return (
+    <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="M27.4999 22C31.5516 22 34.8333 18.7183 34.8333 14.6666C34.8333 10.615 31.5516 7.33331 27.4999 7.33331C23.4483 7.33331 20.1666 10.615 20.1666 14.6666C20.1666 18.7183 23.4483 22 27.4999 22ZM27.4999 11C29.5166 11 31.1666 12.65 31.1666 14.6666C31.1666 16.6833 29.5166 18.3333 27.4999 18.3333C25.4833 18.3333 23.8333 16.6833 23.8333 14.6666C23.8333 12.65 25.4833 11 27.4999 11ZM27.4999 25.6666C22.6049 25.6666 12.8333 28.1233 12.8333 33V36.6666H42.1666V33C42.1666 28.1233 32.3949 25.6666 27.4999 25.6666ZM16.4999 33C16.9033 31.68 22.5683 29.3333 27.4999 29.3333C32.4499 29.3333 38.1333 31.6983 38.4999 33H16.4999ZM10.9999 27.5V22H16.4999V18.3333H10.9999V12.8333H7.33325V18.3333H1.83325V22H7.33325V27.5H10.9999Z"
+        id="AddContact"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default AddContact;

package/src/Presentation/components/UI/svgs/Icons/Actions/Archive/Archive.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="M37.6567 9.58833L35.1083 6.50833C34.6133 5.885 33.8617 5.5 33 5.5H11C10.1383 5.5 9.38667 5.885 8.87333 6.50833L6.34333 9.58833C5.81167 10.2117 5.5 11.0367 5.5 11.9167V34.8333C5.5 36.85 7.15 38.5 9.16667 38.5H34.8333C36.85 38.5 38.5 36.85 38.5 34.8333V11.9167C38.5 11.0367 38.1883 10.2117 37.6567 9.58833ZM11.44 9.16667H32.56L34.045 10.945H9.97333L11.44 9.16667ZM9.16667 34.8333V14.6667H34.8333V34.8333H9.16667ZM24.6583 18.3333H19.3417V23.8333H14.6667L22 31.1667L29.3333 23.8333H24.6583V18.3333Z" fill="#0B121B"/>
+</svg>

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Archive(theme: IconTheme | undefined = undefined) {
+  return (
+    <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="M37.6567 9.58833L35.1083 6.50833C34.6133 5.885 33.8617 5.5 33 5.5H11C10.1383 5.5 9.38667 5.885 8.87333 6.50833L6.34333 9.58833C5.81167 10.2117 5.5 11.0367 5.5 11.9167V34.8333C5.5 36.85 7.15 38.5 9.16667 38.5H34.8333C36.85 38.5 38.5 36.85 38.5 34.8333V11.9167C38.5 11.0367 38.1883 10.2117 37.6567 9.58833ZM11.44 9.16667H32.56L34.045 10.945H9.97333L11.44 9.16667ZM9.16667 34.8333V14.6667H34.8333V34.8333H9.16667ZM24.6583 18.3333H19.3417V23.8333H14.6667L22 31.1667L29.3333 23.8333H24.6583V18.3333Z"
+        id="Archive"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Archive;

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>