Merge pull request #46 from Era360/master

new design implementation
flexcodelabs · Jul 31, 2024 · fe57bae · fe57bae
2 parents 9c5a301 + 65e5eb9
commit fe57bae
Show file tree

Hide file tree

Showing 16 changed files with 1,158 additions and 458 deletions.
diff --git a/example/src/main.tsx b/example/src/main.tsx
@@ -8,6 +8,7 @@ ReactDOM.createRoot(
 ).render(
   <React.StrictMode>
     {/* @ts-ignore */}
-    <SarufiChatbox botId={window?.botId ?? 16} />
+    <SarufiChatbox botId={window?.botId ?? 4107} />
+    {/* 1258 */}
   </React.StrictMode>
 );
diff --git a/example/vanilla-js/script.js b/example/vanilla-js/script.js
diff --git a/example/vanilla-js/style.css b/example/vanilla-js/style.css
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/icons/index.tsx b/src/assets/icons/index.tsx
@@ -1,11 +1,69 @@
 import React, { CSSProperties, FC } from "react";
 
-interface IconProps {
+export interface IconProps {
   size?: number | string;
   className?: string;
   style?: CSSProperties;
 }
 
+export const Attachment: FC<IconProps> = ({ size, style, className }) => (
+  <svg
+    width={size ?? 24}
+    height={size ?? 24}
+    viewBox="0 0 13 14"
+    fill="none"
+    className={className}
+    style={style}
+  >
+    <path
+      d="M3.15433 7L2.31791 6.16358C1.39403 5.2397 1.39403 3.74179 2.31791 2.81791C3.24179 1.89403 4.7397 1.89403 5.66358 2.81791L10.6821 7.83642C11.606 8.7603 11.606 10.2582 10.6821 11.1821C9.75821 12.106 8.2603 12.106 7.33642 11.1821L5.45448 9.30015C4.87705 8.72272 4.87705 7.78653 5.45448 7.2091C6.0319 6.63168 6.9681 6.63168 7.54552 7.2091L8.59104 8.25463"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const Calendar: FC<IconProps> = ({ size, style, className }) => (
+  <svg
+    width={size ?? 24}
+    height={size ?? 24}
+    viewBox="0 0 13 14"
+    fill="none"
+    className={className}
+    style={style}
+  >
+    <path
+      d="M10.8331 2.5998H9.0998V1.7998H8.23314V2.5998H4.76647V1.7998H3.8998V2.5998H2.16647C1.6898 2.5998 1.2998 2.9598 1.2998 3.3998V11.3998C1.2998 11.8398 1.6898 12.1998 2.16647 12.1998H10.8331C11.3098 12.1998 11.6998 11.8398 11.6998 11.3998V3.3998C11.6998 2.9598 11.3098 2.5998 10.8331 2.5998ZM10.8331 11.3998H2.16647V5.7998H10.8331V11.3998ZM10.8331 4.9998H2.16647V3.3998H3.8998V4.1998H4.76647V3.3998H8.23314V4.1998H9.0998V3.3998H10.8331V4.9998Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const CancelRecordIcon = ({ size, className, style }: IconProps) => (
+  <svg
+    width={size || "108"}
+    height={size || "108"}
+    className={className}
+    style={style}
+    viewBox="0 0 108 108"
+    fill="none"
+  >
+    {/* <path
+      opacity="0.32"
+      d="M54 108C39.569 108 25.9759 102.414 15.8276 92.1724C5.58621 82.0241 0 68.431 0 54C0 39.569 5.58621 25.9759 15.8276 15.8276C26.069 5.58621 39.569 0 54 0C68.431 0 82.0241 5.58621 92.1724 15.8276C102.414 26.069 108 39.569 108 54C108 68.431 102.414 82.0241 92.1724 92.1724C82.0241 102.414 68.431 108 54 108ZM54 5.58621C41.0586 5.58621 28.9552 10.6138 19.7379 19.7379C10.5207 28.8621 5.58621 41.0586 5.58621 54C5.58621 66.9414 10.6138 79.0448 19.7379 88.2621C28.8621 97.4793 41.0586 102.414 54 102.414C66.9414 102.414 79.0448 97.3862 88.2621 88.2621C97.4793 79.1379 102.414 66.9414 102.414 54C102.414 41.0586 97.3862 28.9552 88.2621 19.7379C79.0448 10.6138 66.9414 5.58621 54 5.58621Z"
+      fill="#D51A52"
+    /> */}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M27.666 80.3338C20.6819 73.3497 16.7583 63.8772 16.7583 54.0002C16.7583 44.1231 20.6819 34.6507 27.666 27.6665C34.6502 20.6824 44.1227 16.7588 53.9997 16.7588C63.8767 16.7588 73.3492 20.6824 80.3333 27.6665C87.3174 34.6506 91.2411 44.1231 91.2411 54.0002C91.2411 63.8772 87.3174 73.3497 80.3333 80.3338C73.3492 87.3179 63.8767 91.2415 53.9997 91.2415C44.1227 91.2415 34.6502 87.3179 27.666 80.3338ZM68.4313 43.4794L57.9106 54.0001L68.4313 64.5208C69.5485 65.5449 69.5485 67.3139 68.4313 68.4311C67.8727 68.9898 67.1278 69.2691 66.4761 69.2691C65.8244 69.2691 65.0796 68.9898 64.5209 68.4311L54.0003 57.9104L43.3865 68.4311C42.8278 68.9898 42.083 69.2691 41.4313 69.2691C40.7796 69.2691 40.0347 68.9898 39.4761 68.4311C38.3589 67.407 38.3589 65.638 39.4761 64.5208L50.0899 54.0001L39.5692 43.3863C38.452 42.3622 38.452 40.5932 39.5692 39.476C40.5934 38.3587 42.3623 38.3587 43.4796 39.476L54.0003 50.0898L64.5209 39.5691C65.5451 38.4518 67.314 38.4518 68.4313 39.5691C69.5485 40.5932 69.5485 42.3622 68.4313 43.4794Z"
+      fill="#D51A52"
+    />
+  </svg>
+);
+
 // that x icon
 export const Close: FC<IconProps> = ({ size, style, className }) => {
   return (
@@ -26,6 +84,32 @@ export const Close: FC<IconProps> = ({ size, style, className }) => {
   );
 };
 
+export const RecordingAudioIcon = ({ size, className, style }: IconProps) => (
+  <svg
+    width={size || "108"}
+    height={size || "108"}
+    className={className}
+    style={style}
+    viewBox="0 0 108 108"
+    fill="none"
+  >
+    <path
+      d="M54 3.05664C40.489 3.05664 27.5314 8.42388 17.9776 17.9776C8.42388 27.5314 3.05664 40.489 3.05664 54C3.05664 67.5111 8.42388 80.4687 17.9776 90.0225C27.5314 99.5762 40.489 104.943 54 104.943C67.5111 104.943 80.4687 99.5762 90.0225 90.0225C99.5762 80.4687 104.943 67.5111 104.943 54C104.943 40.489 99.5762 27.5314 90.0225 17.9776C80.4687 8.42388 67.5111 3.05664 54 3.05664Z"
+      fill="#9BCCF5"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M33.8267 74.1736C34.438 74.7849 35.1512 75.0906 35.9663 75.0906C36.7814 75.0906 37.5965 74.7849 38.1059 74.0717C39.3286 72.951 39.3286 71.0151 38.1059 69.7925C32.1965 63.8831 30.0569 55.3246 32.5021 47.3774C33.0116 45.8491 32.0946 44.117 30.4644 43.6076C28.9361 43.0981 27.204 44.0151 26.6946 45.6453C23.638 55.7321 26.3889 66.7359 33.8267 74.1736ZM35.9663 39.0227H35.9663C36.7814 39.0227 37.5965 38.717 38.1059 38.1057C38.7172 37.5963 39.0229 36.7812 39.0229 35.9661C39.0229 35.8642 38.9974 35.7623 38.972 35.6604C38.9465 35.5585 38.921 35.4566 38.921 35.3547C38.8701 35.2529 38.8446 35.151 38.8191 35.0491C38.7937 34.9472 38.7682 34.8453 38.7172 34.7434C38.6663 34.6415 38.6154 34.5651 38.5644 34.4887C38.5135 34.4123 38.4625 34.3359 38.4116 34.234C38.3097 34.0302 38.1059 33.8264 38.004 33.7246C37.9021 33.5208 37.8003 33.4189 37.5965 33.317C37.4946 33.2661 37.4182 33.2151 37.3418 33.1642C37.2654 33.1132 37.1889 33.0623 37.087 33.0114C36.8833 32.9095 36.6795 32.8076 36.4757 32.8076C35.4569 32.6038 34.438 32.9095 33.7248 33.6227C33.521 33.8264 33.4191 33.9283 33.3172 34.1321C33.2154 34.234 33.1135 34.4378 33.0116 34.6415L33.0116 34.6415L33.0116 34.6415C32.9097 34.8453 32.8078 35.0491 32.8078 35.2529C32.7059 35.4566 32.7059 35.6604 32.7059 35.8642C32.7059 35.9661 32.7314 36.068 32.7569 36.1698C32.7823 36.2717 32.8078 36.3736 32.8078 36.4755C32.8587 36.5774 32.8842 36.6793 32.9097 36.7812C32.9352 36.883 32.9606 36.9849 33.0116 37.0868C33.0625 37.1887 33.1135 37.2651 33.1644 37.3415C33.2154 37.418 33.2663 37.4944 33.3172 37.5963L33.7248 38.0038L33.7248 38.0038C33.9286 38.2076 34.0304 38.3095 34.2342 38.4114C34.3361 38.5132 34.5399 38.6151 34.7437 38.717C34.9474 38.8189 35.1512 38.9208 35.355 38.9208C35.5587 39.0227 35.7625 39.0227 35.9663 39.0227ZM69.8946 74.1736C70.5059 74.7849 71.2191 75.0906 72.0342 75.0906C72.7474 75.0906 73.5625 74.7849 74.1738 74.2755C85.2795 63.1698 85.2795 45.034 74.1738 33.9283C73.0531 32.7057 71.1172 32.7057 69.8946 33.9283C68.672 35.0491 68.672 36.9849 69.8946 38.2076C78.6569 46.9698 78.6569 61.1321 69.8946 69.8944C68.672 71.0151 68.672 72.951 69.8946 74.1736ZM42.4871 65.5132C43.0984 66.1246 43.8116 66.4302 44.6267 66.4302C45.4418 66.4302 46.155 66.1246 46.7663 65.4114C47.9889 64.2906 47.9889 62.3547 46.7663 61.1321C42.7927 57.1585 42.7927 50.7397 46.7663 46.7661C47.9889 45.6453 47.9889 43.7095 46.7663 42.4868C45.6455 41.2642 43.7097 41.2642 42.4871 42.4868C36.1701 48.8038 36.1701 59.1963 42.4871 65.5132ZM61.2342 65.5129C61.8456 66.1242 62.5588 66.4299 63.3739 66.4299C64.189 66.4299 64.9022 66.1242 65.5135 65.6148C71.8305 59.2978 71.8305 48.9053 65.5135 42.5884C64.3927 41.3657 62.4569 41.3657 61.2342 42.5884C60.0116 43.7091 60.0116 45.645 61.2342 46.8676C65.2078 50.8412 65.2078 57.2601 61.2342 61.2337C60.0116 62.3544 60.0116 64.2903 61.2342 65.5129ZM51.4531 56.5469C52.1663 57.2601 53.0833 57.5657 54.0003 57.5657C54.9173 57.5657 55.8342 57.2601 56.4456 56.5469C57.872 55.2223 57.872 52.9808 56.4456 51.5544C55.121 50.128 52.8795 50.128 51.4531 51.5544C50.0267 52.8789 50.0267 55.1204 51.4531 56.5469Z"
+      fill="#2A6FDB"
+    />
+    <path
+      d="M54 108C24.2491 108 0 83.7509 0 54C0 24.2491 24.2491 0 54 0C83.7509 0 108 24.2491 108 54C108 83.7509 83.7509 108 54 108ZM54 6.11321C27.6113 6.11321 6.11321 27.6113 6.11321 54C6.11321 80.3887 27.6113 101.887 54 101.887C80.3887 101.887 101.887 80.3887 101.887 54C101.887 27.6113 80.3887 6.11321 54 6.11321Z"
+      fill="#2A6FDB"
+    />
+  </svg>
+);
+
 export const TextComponent: FC<IconProps> = ({ size, style, className }) => {
   return (
     <svg
@@ -51,30 +135,56 @@ export const TextComponent: FC<IconProps> = ({ size, style, className }) => {
 export const SendIcon: FC<IconProps> = ({ size, className, style }) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      enableBackground="new 0 0 128 128"
-      height={size ?? 20}
+      width={size ?? 24}
+      height={size ?? 24}
       className={className}
       style={style}
-      id="Layer_1"
-      version="1.1"
-      viewBox="0 0 128 128"
-      width={size ?? 20}
-      xmlSpace="preserve"
+      viewBox="0 0 18 18"
+      fill="none"
     >
       <path
+        d="M0.649965 0.000468815C0.542544 0.00447137 0.437632 0.0340679 0.343957 0.0867961C0.250282 0.139524 0.170552 0.213859 0.111401 0.303617C0.0522503 0.393375 0.0153887 0.495961 0.00388277 0.602839C-0.00762314 0.709717 0.00655937 0.817797 0.0452505 0.918088L2.52036 7.3089C2.56296 7.41854 2.63346 7.51514 2.72488 7.58914C2.81631 7.66314 2.92547 7.71197 3.04158 7.7308L9.76551 8.82245C9.93302 8.84961 9.91669 8.89797 9.91669 9C9.91669 9.10202 9.93302 9.15038 9.76551 9.17754L3.04158 10.2692C2.92547 10.288 2.81631 10.3368 2.72488 10.4109C2.63346 10.4849 2.56296 10.5815 2.52036 10.6911L0.0452505 17.0819C-0.00373964 17.2089 -0.0132051 17.3477 0.0180957 17.4802C0.0493965 17.6126 0.120002 17.7325 0.22065 17.8241C0.321298 17.9158 0.447288 17.9748 0.582093 17.9936C0.716899 18.0123 0.854223 17.9899 0.976054 17.9292L17.6268 9.60383C17.7389 9.54776 17.8333 9.46158 17.8992 9.35492C17.9651 9.24827 18 9.12537 18 9C18 8.87462 17.9651 8.75172 17.8992 8.64507C17.8333 8.53841 17.7389 8.45223 17.6268 8.39616L0.976054 0.0707845C0.874951 0.0204373 0.762832 -0.00373935 0.649965 0.000468815Z"
         fill="currentColor"
-        d="M74.508,108.239c-0.772,0-1.479-0.445-1.81-1.148l-16.863-35.84L20.732,55.116c-0.734-0.337-1.193-1.083-1.164-1.891  c0.03-0.808,0.543-1.518,1.3-1.8l83.312-31.107c0.729-0.271,1.552-0.096,2.105,0.452c0.555,0.548,0.739,1.369,0.475,2.102  l-30.371,84.047c-0.274,0.761-0.98,1.28-1.788,1.318C74.569,108.238,74.538,108.239,74.508,108.239z M26.772,53.49l31.396,14.432  c0.429,0.197,0.774,0.539,0.975,0.965l15.122,32.139l27.264-75.448L26.772,53.49z"
-      />
-      <path
-        fill="currentColor"
-        d="M57.334,71.738c-0.512,0-1.023-0.195-1.414-0.586c-0.781-0.78-0.781-2.047,0-2.828l47.545-47.546  c0.781-0.781,2.047-0.781,2.828,0c0.781,0.781,0.781,2.047,0,2.828L58.748,71.152C58.357,71.543,57.846,71.738,57.334,71.738z"
       />
     </svg>
   );
 };
 
+export const MicIcon: FC<IconProps> = ({ size, className, style }) => (
+  <svg
+    width={size ?? 24}
+    height={size ?? 24}
+    viewBox="0 0 10 16"
+    fill="none"
+    className={className}
+    style={style}
+  >
+    <path
+      d="M5 0.496094C3.34911 0.496094 2.00003 1.84517 2.00003 3.49606V8.49601C2.00003 10.1469 3.34911 11.496 5 11.496C6.65089 11.496 7.99997 10.1469 7.99997 8.49601V3.49606C7.99997 1.84517 6.65089 0.496094 5 0.496094ZM5 1.49608C6.11042 1.49608 6.99998 2.38565 6.99998 3.49606V8.49601C6.99998 9.60643 6.11042 10.496 5 10.496C3.88959 10.496 3.00002 9.60643 3.00002 8.49601V3.49606C3.00002 2.38565 3.88959 1.49608 5 1.49608ZM0.492234 6.8222C0.35974 6.82427 0.233486 6.87885 0.141202 6.97394C0.0489181 7.06903 -0.00184911 7.19686 5.15062e-05 7.32936V8.49601C5.15062e-05 11.0828 1.97804 13.2187 4.50001 13.4706V14.9959C4.49907 15.0622 4.51131 15.128 4.53602 15.1895C4.56072 15.2509 4.5974 15.3069 4.64392 15.3541C4.69045 15.4013 4.74588 15.4387 4.80701 15.4643C4.86814 15.4899 4.93374 15.5031 5 15.5031C5.06626 15.5031 5.13186 15.4899 5.19299 15.4643C5.25412 15.4387 5.30956 15.4013 5.35608 15.3541C5.4026 15.3069 5.43928 15.2509 5.46399 15.1895C5.48869 15.128 5.50093 15.0622 5.5 14.9959V13.4706C8.02196 13.2187 9.99995 11.0828 9.99995 8.49601V7.32936C10.0009 7.2631 9.98865 7.19732 9.96394 7.13584C9.93923 7.07435 9.90255 7.01839 9.85603 6.97121C9.80951 6.92403 9.75407 6.88656 9.69295 6.86098C9.63182 6.83541 9.56622 6.82224 9.49996 6.82224C9.43369 6.82224 9.36809 6.83541 9.30696 6.86098C9.24584 6.88656 9.1904 6.92403 9.14388 6.97121C9.09736 7.01839 9.06068 7.07435 9.03597 7.13584C9.01126 7.19732 8.99902 7.2631 8.99996 7.32936V8.49601C8.99996 10.6911 7.24654 12.4609 5.05925 12.4927C5.03701 12.4899 5.0146 12.4886 4.99219 12.4888C4.9739 12.4891 4.95565 12.4904 4.9375 12.4927C2.75173 12.4592 1.00004 10.69 1.00004 8.49601V7.32936C1.001 7.26244 0.988517 7.196 0.963329 7.134C0.938141 7.07199 0.900762 7.01567 0.853406 6.96837C0.806051 6.92108 0.749682 6.88377 0.687642 6.85866C0.625603 6.83355 0.559154 6.82116 0.492234 6.8222Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const MinusIcon: FC<IconProps> = ({ size, className, style }) => (
+  <svg
+    width={size ?? 16}
+    height={size ?? 2}
+    className={className}
+    style={style}
+    viewBox="0 0 16 2"
+    fill="none"
+  >
+    <rect
+      x="0.799805"
+      y="0.0996094"
+      width="14.4"
+      height="1.8"
+      fill="currentColor"
+    />
+  </svg>
+);
+
 export const Pause: FC<IconProps> = ({ className, size }) => {
   return (
     <svg

diff --git a/src/assets/illustrations.tsx b/src/assets/illustrations.tsx
@@ -0,0 +1,24 @@
+import React, { FC } from "react";
+import { IconProps } from "./icons";
+
+export const SarufiIcon: FC<IconProps> = ({ size, style, className }) => (
+  <svg
+    width={size ?? 32}
+    height={size ?? 32}
+    style={style}
+    className={className}
+    viewBox="0 0 32 32"
+    fill="none"
+  >
+    <path
+      d="M26.8632 10.3902L25.4496 10.9596L25.8102 11.8546L26.7738 11.911L26.8632 10.3902ZM26.8738 19.8307L26.7758 18.3105L25.8153 18.3719L25.4582 19.2664L26.8738 19.8307ZM26.2704 23.0754L27.7196 22.6056L27.7155 22.5934L26.2704 23.0754ZM27.5047 26.8849L28.9747 26.4831L28.9655 26.4491L28.9543 26.4151L27.5047 26.8849ZM26.8703 27.5198L26.4533 28.9857L26.4614 28.9878L26.469 28.9898L26.8703 27.5198ZM22.7784 26.3556L23.1954 24.8903L23.1715 24.8837L23.1481 24.8776L22.7784 26.3556ZM20.6267 26.5324L19.9746 25.1549L19.9598 25.162L19.9451 25.1691L20.6267 26.5324ZM14.7362 27.8022L14.787 26.2789H14.7814H14.7763L14.7362 27.8022ZM3.31123 19.8322L4.72278 19.2573L4.35808 18.3618L3.3925 18.3105L3.31123 19.8322ZM3.29904 10.3902L3.38996 11.9115L4.35453 11.8536L4.71364 10.9566L3.29904 10.3902ZM15.8999 2.44053L15.7998 3.96129L15.8069 3.9618L15.8999 2.44053ZM30.1637 12.2762C30.1637 10.4588 28.7446 8.9741 26.9526 8.86896L26.7738 11.911C26.9643 11.9227 27.1161 12.0822 27.1161 12.2762H30.1637ZM30.1637 17.9453V12.2762H27.1161V17.9453H30.1637ZM26.9714 21.3515C28.7542 21.2367 30.1637 19.756 30.1637 17.9453H27.1161C27.1161 18.1388 26.9653 18.2983 26.7758 18.3105L26.9714 21.3515ZM27.8095 21.4647C27.9832 21.1173 28.1432 20.7602 28.2889 20.3955L25.4582 19.2664C25.3444 19.5519 25.2195 19.8302 25.0839 20.1014L27.8095 21.4647ZM27.7155 22.5934C27.6017 22.252 27.6302 21.8233 27.8095 21.4647L25.0839 20.1014C24.5577 21.1534 24.4444 22.4176 24.8248 23.5574L27.7155 22.5934ZM28.9543 26.4151L27.7196 22.6056L24.8208 23.5452L26.055 27.3548L28.9543 26.4151ZM26.469 28.9898C27.9933 29.4058 29.3922 28.01 28.9747 26.4831L26.0352 27.2872C25.8295 26.5355 26.5223 25.8457 27.271 26.0499L26.469 28.9898ZM22.3613 27.8215L26.4533 28.9857L27.2868 26.0544L23.1954 24.8903L22.3613 27.8215ZM21.2789 27.9094C21.5806 27.7667 21.988 27.7291 22.4086 27.8342L23.1481 24.8776C22.1577 24.6302 21.0128 24.6632 19.9746 25.1549L21.2789 27.9094ZM14.6854 29.325C17.056 29.4043 19.3178 28.8902 21.3084 27.8952L19.9451 25.1691C18.4081 25.9381 16.6491 26.3414 14.787 26.2789L14.6854 29.325ZM1.90019 20.4072C3.96951 25.4871 8.92341 29.1737 14.6961 29.3255L14.7763 26.2789C10.2715 26.1601 6.35783 23.272 4.72278 19.2573L1.90019 20.4072ZM0 17.9453C0 19.7692 1.42984 21.258 3.23047 21.354L3.3925 18.3105C3.20101 18.3003 3.04761 18.1403 3.04761 17.9453H0ZM0 12.2762V17.9453H3.04761V12.2762H0ZM3.20863 8.86896C1.41816 8.97562 0 10.4598 0 12.2762H3.04761C3.04761 12.0822 3.19948 11.9227 3.38996 11.9115L3.20863 8.86896ZM16.0005 0.920279C9.61623 0.498693 4.08685 4.32344 1.88444 9.82388L4.71364 10.9566C6.44976 6.62134 10.7951 3.63062 15.7998 3.96129L16.0005 0.920279ZM28.2762 9.82083C26.2821 4.87049 21.5715 1.2606 15.9929 0.919771L15.8069 3.9618C20.164 4.22795 23.8765 7.05512 25.4496 10.9596L28.2762 9.82083Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.0814 24.5586C20.2999 24.5586 24.53 20.3285 24.53 15.1105C24.53 9.89247 20.2999 5.66238 15.0814 5.66238C9.86339 5.66238 5.6333 9.89247 5.6333 15.1105C5.6333 20.3285 9.86339 24.5586 15.0814 24.5586ZM10.3576 14.9154C11.1403 14.9154 11.7747 14.281 11.7747 13.4983C11.7747 12.7156 11.1403 12.0812 10.3576 12.0812C9.57488 12.0812 8.94047 12.7156 8.94047 13.4983C8.94047 14.281 9.57488 14.9154 10.3576 14.9154ZM21.2229 13.4983C21.2229 14.281 20.5884 14.9154 19.8057 14.9154C19.023 14.9154 18.3886 14.281 18.3886 13.4983C18.3886 12.7156 19.023 12.0812 19.8057 12.0812C20.5884 12.0812 21.2229 12.7156 21.2229 13.4983ZM15.0814 20.1238C16.3863 20.1238 17.4438 19.0663 17.4438 17.7619H12.7195V17.7711C12.7246 19.0714 13.7801 20.1238 15.0814 20.1238Z"
+      fill="currentColor"
+    />
+  </svg>
+);
diff --git a/src/chat/button.tsx b/src/chat/button.tsx
@@ -21,16 +21,13 @@ const Button: FC<Props> = ({ label, mode, onClick, disabled }) => {
         cursor: disabled ? "default" : "pointer",
         opacity: disabled ? 0.4 : 1,
         fontSize: ".9rem",
-        padding: ".7rem 1rem",
-        position: "absolute",
         overflow: "hidden",
         transition: ".3s linear",
         zIndex: 100001,
-        right: "5px",
         border: "none",
+        backgroundColor: "transparent",
         ...(mode === "dark"
           ? {
-              backgroundColor: "transparent",
               color: "white",
             }
           : {}),