Skip to content

Commit 1f719c1

Browse files
Era360Era360
committed
✨ feat: initial new design implementation
1 parent ace20f5 commit 1f719c1

File tree

10 files changed

+724
-447
lines changed

10 files changed

+724
-447
lines changed

‎example/src/main.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ ReactDOM.createRoot(
88
).render(
99
<React.StrictMode>
1010
{/* @ts-ignore */}
11-
<SarufiChatbox botId={window?.botId ?? 16} />
11+
<SarufiChatbox botId={window?.botId ?? 31} />
12+
{/* 1258 */}
1213
</React.StrictMode>
1314
);

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/icons/index.tsx

Lines changed: 76 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,46 @@
11
import React, { CSSProperties, FC } from "react";
22

3-
interface IconProps {
3+
export interface IconProps {
44
size?: number | string;
55
className?: string;
66
style?: CSSProperties;
77
}
88

9+
export const Attachment: FC<IconProps> = ({ size, style, className }) => (
10+
<svg
11+
width={size ?? 24}
12+
height={size ?? 24}
13+
viewBox="0 0 13 14"
14+
fill="none"
15+
className={className}
16+
style={style}
17+
>
18+
<path
19+
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"
20+
stroke="currentColor"
21+
strokeWidth="1.5"
22+
strokeLinecap="round"
23+
strokeLinejoin="round"
24+
/>
25+
</svg>
26+
);
27+
28+
export const Calendar: FC<IconProps> = ({ size, style, className }) => (
29+
<svg
30+
width={size ?? 24}
31+
height={size ?? 24}
32+
viewBox="0 0 13 14"
33+
fill="none"
34+
className={className}
35+
style={style}
36+
>
37+
<path
38+
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"
39+
fill="currentColor"
40+
/>
41+
</svg>
42+
);
43+
944
// that x icon
1045
export const Close: FC<IconProps> = ({ size, style, className }) => {
1146
return (
@@ -51,30 +86,56 @@ export const TextComponent: FC<IconProps> = ({ size, style, className }) => {
5186
export const SendIcon: FC<IconProps> = ({ size, className, style }) => {
5287
return (
5388
<svg
54-
xmlns="http://www.w3.org/2000/svg"
55-
xmlnsXlink="http://www.w3.org/1999/xlink"
56-
enableBackground="new 0 0 128 128"
57-
height={size ?? 20}
89+
width={size ?? 24}
90+
height={size ?? 24}
5891
className={className}
5992
style={style}
60-
id="Layer_1"
61-
version="1.1"
62-
viewBox="0 0 128 128"
63-
width={size ?? 20}
64-
xmlSpace="preserve"
93+
viewBox="0 0 18 18"
94+
fill="none"
6595
>
6696
<path
97+
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"
6798
fill="currentColor"
68-
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"
69-
/>
70-
<path
71-
fill="currentColor"
72-
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"
7399
/>
74100
</svg>
75101
);
76102
};
77103

104+
export const MicIcon: FC<IconProps> = ({ size, className, style }) => (
105+
<svg
106+
width={size ?? 24}
107+
height={size ?? 24}
108+
viewBox="0 0 10 16"
109+
fill="none"
110+
className={className}
111+
style={style}
112+
>
113+
<path
114+
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"
115+
fill="currentColor"
116+
/>
117+
</svg>
118+
);
119+
120+
export const MinusIcon: FC<IconProps> = ({ size, className, style }) => (
121+
<svg
122+
width={size ?? 16}
123+
height={size ?? 2}
124+
className={className}
125+
style={style}
126+
viewBox="0 0 16 2"
127+
fill="none"
128+
>
129+
<rect
130+
x="0.799805"
131+
y="0.0996094"
132+
width="14.4"
133+
height="1.8"
134+
fill="currentColor"
135+
/>
136+
</svg>
137+
);
138+
78139
export const Pause: FC<IconProps> = ({ className, size }) => {
79140
return (
80141
<svg

‎src/assets/illustrations.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { FC } from "react";
2+
import { IconProps } from "./icons";
3+
4+
export const SarufiIcon: FC<IconProps> = ({ size, style, className }) => (
5+
<svg
6+
width={size ?? 32}
7+
height={size ?? 32}
8+
style={style}
9+
className={className}
10+
viewBox="0 0 32 32"
11+
fill="none"
12+
>
13+
<path
14+
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"
15+
fill="currentColor"
16+
/>
17+
<path
18+
fillRule="evenodd"
19+
clipRule="evenodd"
20+
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"
21+
fill="currentColor"
22+
/>
23+
</svg>
24+
);

‎src/chat/button.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,13 @@ const Button: FC<Props> = ({ label, mode, onClick, disabled }) => {
2121
cursor: disabled ? "default" : "pointer",
2222
opacity: disabled ? 0.4 : 1,
2323
fontSize: ".9rem",
24-
padding: ".7rem 1rem",
25-
position: "absolute",
2624
overflow: "hidden",
2725
transition: ".3s linear",
2826
zIndex: 100001,
29-
right: "5px",
3027
border: "none",
28+
backgroundColor: "transparent",
3129
...(mode === "dark"
3230
? {
33-
backgroundColor: "transparent",
3431
color: "white",
3532
}
3633
: {}),

0 commit comments

Comments
 (0)