✨ feat: initial new design implementation

flexcodelabs · Jun 13, 2024 · 1f719c1 · 1f719c1
1 parent ace20f5
commit 1f719c1
Show file tree

Hide file tree

Showing 10 changed files with 724 additions and 447 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 ?? 31} />
+    {/* 1258 */}
   </React.StrictMode>
 );
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,46 @@
 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>
+);
+
 // that x icon
 export const Close: FC<IconProps> = ({ size, style, className }) => {
   return (
@@ -51,30 +86,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",
             }
           : {}),