Skip to content

Commit

Permalink
🪄 feat: initial audio recording implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Era360
Era360 committed Jun 25, 2024
1 parent dcb6263 commit 717415c
Show file tree
Hide file tree
Showing 7 changed files with 498 additions and 50 deletions.
2 changes: 1 addition & 1 deletion example/src/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ ReactDOM.createRoot(
).render(
<React.StrictMode>
{/* @ts-ignore */}
<SarufiChatbox botId={window?.botId ?? 31} />
<SarufiChatbox botId={window?.botId ?? 4107} />
{/* 1258 */}
</React.StrictMode>
);
49 changes: 49 additions & 0 deletions src/assets/icons/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,29 @@ export const Calendar: FC<IconProps> = ({ size, style, className }) => (
</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 (
Expand All @@ -61,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
Expand Down
6 changes: 6 additions & 0 deletions src/chat/chat.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

107 changes: 58 additions & 49 deletions src/chat/chatbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,11 @@ import { CSSProperties, useEffect, useRef, useState } from "react";
import Button from "./button";
import Input from "./input";
import ChatLoader from "./chat-loader";
import {
Attachment,
Calendar,
Close,
MicIcon,
SendIcon,
} from "../assets/icons";
import { Attachment, Close, MicIcon, SendIcon } from "../assets/icons";
import { SarufiIcon } from "../assets/illustrations";
import Media from "./media";
import DatePicker from "./message-actions/date-picker";
import RecordAudio from "./message-actions/audio-record";

type ChatType = {
message: string;
Expand Down Expand Up @@ -50,6 +46,7 @@ const Chatbox = ({
const [loading, setLoading] = useState(false);
const ref = useRef<HTMLDivElement>(null);
const [chatId, setChatId] = useState<string | number>(id);
const [isRecording, setIsRecording] = useState(false);

const onSubmit = (message: string, type?: string, itemId?: string) => {
if (!message) return;
Expand Down Expand Up @@ -223,56 +220,68 @@ const Chatbox = ({
style={{
background: "var(--sarufi-secondary-color)",
// background: "rgb(0, 0, 0, 0.2)",
padding: ".5rem 1rem",
padding: ".5rem",
}}
>
<form
style={{
position: "relative",
marginRight: ".5rem",
width: "100%",
background:
mode === "light" ? "white" : "var(--sarufi-primary-color)",
}}
onSubmit={(e) => {
e.preventDefault();
onSubmit(value);
}}
>
<Input
value={value}
mode={mode}
primaryColor={primaryColor}
autoFocus
placeholder="Compose a message"
save={() => onSubmit(value)}
onChange={(e) => {
setValue(e.target.value);
{!isRecording && (
<form
style={{
position: "relative",
marginRight: ".5rem",
width: "100%",
background:
mode === "light" ? "white" : "var(--sarufi-primary-color)",
}}
/>
<Button
mode={mode}
label={
<span className="sarufi-flex-center">
<SendIcon size={24} />
</span>
}
/>
</form>
onSubmit={(e) => {
e.preventDefault();
onSubmit(value);
}}
>
<Input
value={value}
mode={mode}
primaryColor={primaryColor}
autoFocus
placeholder="Compose a message"
save={() => onSubmit(value)}
onChange={(e) => {
setValue(e.target.value);
}}
/>
<Button
mode={mode}
label={
<span className="sarufi-flex-center">
<SendIcon size={24} />
</span>
}
/>
</form>
)}
<div
className="sarufi-flex-center"
className="sarufi-flex-center message-actions"
style={{
color: mode === "light" ? "#525252" : "white",
width: isRecording ? "100%" : "auto",
}}
>
<Attachment size={18} />
<Calendar
size={18}
style={{
margin: "0 .5rem",
}}
{!isRecording && (
<>
<button>
<Attachment size={18} />
</button>
<DatePicker
onSelect={(d) => setValue(d.toISOString().split("T")[0])}
styles={{
margin: "0 .3rem",
}}
/>
</>
)}
<RecordAudio
readFile={(file) => console.log(file.size)}
saveIsRecording={(record) => setIsRecording(record)}
/>
<MicIcon size={18} />
</div>
</div>
<p
Expand All @@ -285,7 +294,7 @@ const Chatbox = ({
mode === "light" ? "white" : "var(--sarufi-primary-color)",
}}
>
Made by{" "}
Powered by{" "}
<a
href="https://sarufi.io"
target="_blank"
Expand Down
Loading

0 comments on commit 717415c

Please sign in to comment.