@clikvn/agent-widget-embedded 0.0.3-dev → 0.0.5-dev

package/dist/window.d.ts

@@ -1,17 +1,5 @@
-import { EVENT_TYPE } from './models';
-type VoiceAgentWidget = {
-    apiHost: string;
-    agentId: string;
-    overrideConfig?: {
-        chatId?: string | undefined;
-        overrideConfig?: Record<string, any>;
-    } & Record<string, unknown>;
-    theme?: {
-        avatar?: string;
-    } & Record<string, unknown>;
-    listeners?: Record<EVENT_TYPE, (props: any) => void>;
-};
-export declare const initWidget: (props: VoiceAgentWidget & {
+import { AgentWidgetType } from './register';
+export declare const initWidget: (props: AgentWidgetType & {
     id?: string;
 }) => void;
 export declare const destroy: () => void;
@@ -20,7 +8,7 @@ type AgentWidget = {
     destroy: typeof destroy;
 };
 export declare const parseAgentVoice: () => {
-    initWidget: (props: VoiceAgentWidget & {
+    initWidget: (props: AgentWidgetType & {
         id?: string;
     }) => void;
     destroy: () => void;

package/dist/window.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../src/window.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE;QACf,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAC5B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACtC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;CACtD,CAAC;AACF,eAAO,MAAM,UAAU,UAAW,gBAAgB,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,SAYnE,CAAC;AAEF,eAAO,MAAM,OAAO,YAEnB,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,UAAU,CAAC;IAC9B,OAAO,EAAE,OAAO,OAAO,CAAC;CACzB,CAAC;AAQF,eAAO,MAAM,eAAe;wBA7BM,gBAAgB,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE;;CAgClE,CAAC;AAEH,eAAO,MAAM,wBAAwB,UAAW,WAAW,SAG1D,CAAC"}
+{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../src/window.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAyB,MAAM,YAAY,CAAC;AAIpE,eAAO,MAAM,UAAU,UAAW,eAAe,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,SAYlE,CAAC;AAEF,eAAO,MAAM,OAAO,YAEnB,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,UAAU,CAAC;IAC9B,OAAO,EAAE,OAAO,OAAO,CAAC;CACzB,CAAC;AAQF,eAAO,MAAM,eAAe;wBA7BM,eAAe,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE;;CAgCjE,CAAC;AAEH,eAAO,MAAM,wBAAwB,UAAW,WAAW,SAG1D,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clikvn/agent-widget-embedded",
   "description": "This is agent widget",
-  "version": "0.0.3-dev",
+  "version": "0.0.5-dev",
   "author": "Clik JSC",
   "license": "ISC",
   "type": "module",
@@ -32,6 +32,7 @@
     "@types/react-dom": "^18.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "device-detector-js": "^3.0.3",
     "framer-motion": "^11.18.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/src/components/Chat/AudioPlayer.tsx

@@ -0,0 +1,43 @@
+import React, { useRef, useState } from 'react';
+import { PlayIcon, StopIcon1 } from './Icons';
+
+const AudioPlayer = ({
+  src,
+  autoplay = false,
+}: {
+  src: string;
+  autoplay?: boolean;
+}) => {
+  const audioRef = useRef<any>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const handlePlayPause = (e: any) => {
+    e.preventDefault();
+    if (isPlaying) {
+      audioRef.current.pause();
+    } else {
+      audioRef.current.play();
+    }
+    setIsPlaying(!isPlaying);
+  };
+
+  return (
+    <>
+      <button
+        className="rounded-full cursor-pointer h-fit w-[24px]"
+        onClick={handlePlayPause}
+      >
+        {isPlaying ? <StopIcon1 /> : <PlayIcon />}
+      </button>
+      <audio
+        ref={audioRef}
+        className="hidden"
+        src={src}
+        autoPlay={autoplay}
+        onEnded={() => setIsPlaying(false)}
+      ></audio>
+    </>
+  );
+};
+
+export default AudioPlayer;

package/src/components/Chat/Chat.tsx

@@ -25,6 +25,8 @@ export const Chat: FC<PropsType> = ({ id, agentId, initialMessages = [] }) => {
     chatId,
     append,
     bot,
+    enableTTS,
+    setEnableTTS,
   } = useChat({ id, initialMessages, agentId });
   const { apiHost } = useConfiguration();
   const [messagesContainerRef, messagesEndRef] =
@@ -47,6 +49,7 @@ export const Chat: FC<PropsType> = ({ id, agentId, initialMessages = [] }) => {
               chatId={id}
               message={message}
               isLoading={isLoading && (messages || []).length - 1 === index}
+              enableTTS={enableTTS}
             />
           ))}
 
@@ -76,6 +79,8 @@ export const Chat: FC<PropsType> = ({ id, agentId, initialMessages = [] }) => {
             setAttachments={setAttachments}
             bot={bot}
             apiHost={apiHost}
+            setEnableTTS={setEnableTTS}
+            enableTTS={enableTTS}
           />
         </form>
       </div>

package/src/components/Chat/Icons.tsx

@@ -477,14 +477,20 @@ export const MoreIcon = ({ size = 16 }: { size?: number }) => {
   );
 };
 
-export const TrashIcon = ({ size = 16 }: { size?: number }) => {
+export const TrashIcon = ({
+  size = 16,
+  color,
+}: {
+  size?: number;
+  color?: string;
+}) => {
   return (
     <svg
       height={size}
       strokeLinejoin="round"
       viewBox="0 0 16 16"
       width={size}
-      style={{ color: 'currentcolor' }}
+      style={{ color: color || 'currentcolor' }}
     >
       <path
         fillRule="evenodd"
@@ -859,9 +865,9 @@ export const CheckCirclFillIcon = ({ size = 16 }: { size?: number }) => {
 export const MicrophoneIcon = ({ size = 16 }: { size?: number }) => {
   return (
     <svg
-      height={size}
       strokeLinejoin="round"
       viewBox="0 0 490.9 490.9"
+      height={size}
       width={size}
       style={{ color: 'currentcolor' }}
     >
@@ -881,3 +887,44 @@ export const MicrophoneIcon = ({ size = 16 }: { size?: number }) => {
     </svg>
   );
 };
+
+export const CircleDotIcon = ({
+  size = 16,
+  color = 'red',
+}: {
+  size?: number;
+  color?: string;
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={size}
+    width={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <circle cx="12" cy="12" r="1" />
+  </svg>
+);
+
+export const PlayIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9l0-176c0-8.7 4.7-16.7 12.3-20.9z" />
+  </svg>
+);
+
+export const StopIcon1 = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm192-96l128 0c17.7 0 32 14.3 32 32l0 128c0 17.7-14.3 32-32 32l-128 0c-17.7 0-32-14.3-32-32l0-128c0-17.7 14.3-32 32-32z" />
+  </svg>
+);
+
+export const VolumeIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+    <path d="M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64l0 384c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352 64 352c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l67.8 0L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z" />
+  </svg>
+);

package/src/components/Chat/Markdown.tsx

@@ -243,7 +243,18 @@ const NonMemoizedMarkdown: FC<{
             content.indexOf('.jpeg') >= 0 ||
             content.indexOf('.png') >= 0 ||
             content.indexOf('.gif') >= 0);
-        if (isImageUrl) {
+        const isAudioUrl =
+          content &&
+          (content.indexOf('.mp3') >= 0 ||
+            content.indexOf('.wav') >= 0 ||
+            content.indexOf('.ogg') >= 0);
+        if (isAudioUrl) {
+          return (
+            <audio controls>
+              <source src={content} />
+            </audio>
+          );
+        } else if (isImageUrl) {
           return (
             <a href={content} target="_blank" rel="noopener noreferrer">
               <img

package/src/components/Chat/Message.tsx

@@ -10,12 +10,14 @@ import {
   ToolUsage,
 } from '../../types/flowise.type';
 import { cn } from '../../utils/commonUtils';
+import AudioPlayer from './AudioPlayer';
 
 type PropsType = {
   chatId?: string;
   message: ChatMessageType;
   isLoading: boolean;
   bot: BotType | null;
+  enableTTS?: boolean;
 };
 
 const getRole = (role?: MessageRoleType) => {
@@ -31,6 +33,7 @@ export const PreviewMessage: FC<PropsType> = ({
   message,
   isLoading,
   bot,
+  enableTTS,
 }) => {
   const parseOutput = (outputData: any) => {
     try {
@@ -136,6 +139,9 @@ export const PreviewMessage: FC<PropsType> = ({
               </Markdown>
             </div>
           )}
+          {message?.ttsUrl && (
+            <AudioPlayer src={message.ttsUrl} autoplay={!!enableTTS} />
+          )}
         </div>
       </div>
     </motion.div>

package/src/components/Chat/MultimodalInput.tsx

@@ -14,36 +14,23 @@ import {
   generateUUID,
 } from '../../utils/commonUtils';
 import { PreviewAttachment } from './PreviewAttachment';
-import { ArrowUpIcon, PaperclipIcon, StopIcon } from './Icons';
+import {
+  ArrowUpIcon,
+  CircleDotIcon,
+  MicrophoneIcon,
+  PlusIcon,
+  StopIcon,
+  TrashIcon,
+  VolumeIcon,
+} from './Icons';
 import { ChatMessageType, IFileUpload } from '../../types/flowise.type';
 import { BotType } from '../../types/bot.type';
 
 import { createAttachments } from '../../services/chat.service';
 import { Button } from './ui/Button';
 import { Textarea } from './ui/Textarea';
-
-const suggestedActions = [
-  {
-    title: 'What is the weather',
-    label: 'in Ha Noi?',
-    action: 'What is the weather in Ha Noi?',
-  },
-  {
-    title: 'Create a travel plan for an traveling',
-    label: 'to Ha Noi',
-    action: 'Create a travel plan for an traveling to Ha Noi',
-  },
-  {
-    title: 'Top of tourist attractions',
-    label: 'in Ha Noi',
-    action: 'Top of tourist attractions in Ha Noi',
-  },
-  {
-    title: 'List of museums',
-    label: 'in Ha Noi',
-    action: 'List of museums in Ha Noi',
-  },
-];
+import { useAudioRecording } from '../../hooks/useAudioRecording';
+import { useChatData } from '../../hooks/useChatData';
 
 type PropsType = {
   input: string;
@@ -63,6 +50,8 @@ type PropsType = {
   setAttachments?: (func: (files: IFileUpload[]) => IFileUpload[]) => void;
   bot: BotType | null;
   apiHost: string;
+  setEnableTTS: (value: boolean) => void;
+  enableTTS: boolean;
 };
 
 export const MultimodalInput: FC<PropsType> = ({
@@ -80,7 +69,18 @@ export const MultimodalInput: FC<PropsType> = ({
   setAttachments,
   bot,
   apiHost,
+  setEnableTTS,
+  enableTTS,
 }) => {
+  const { suggestedActions = [] } = useChatData();
+  const {
+    isRecording,
+    setIsRecording,
+    onRecordingCancelled,
+    onRecordingStopped,
+    elapsedTime,
+    isLoadingRecording,
+  } = useAudioRecording();
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const { width } = useWindowSize();
   useEffect(() => {
@@ -130,7 +130,7 @@ export const MultimodalInput: FC<PropsType> = ({
     handleSubmit(undefined, attachments);
     setLocalStorageInput('');
     if (setAttachments) {
-      setAttachments((currentAttachments: IFileUpload[]) => []);
+      setAttachments((_) => []);
       if (fileInputRef.current) {
         (fileInputRef.current as HTMLInputElement).value = '';
       }
@@ -157,6 +157,33 @@ export const MultimodalInput: FC<PropsType> = ({
     [chatId]
   );
 
+  const toAudioBase64 = (blob: Blob) => {
+    return new Promise<IFileUpload>((resolve) => {
+      let mimeType = '';
+      const pos = blob.type.indexOf(';');
+      if (pos === -1) {
+        mimeType = blob.type;
+      } else {
+        mimeType = blob.type.substring(0, pos);
+      }
+
+      // read blob and add to previews
+      const reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onloadend = () => {
+        const base64data = reader.result as string;
+        const upload: IFileUpload = {
+          tempId: generateUUID(),
+          data: base64data,
+          type: 'audio',
+          name: `audio_${Date.now()}.wav`,
+          mime: mimeType,
+        };
+        resolve(upload);
+      };
+    });
+  };
+
   const toBase64 = async (
     file: File,
     type = 'file'
@@ -213,7 +240,6 @@ export const MultimodalInput: FC<PropsType> = ({
   const handleFileChange = useCallback(
     async (event: ChangeEvent<HTMLInputElement>) => {
       const files = Array.from(event.target.files || []);
-
       try {
         const uploadPromises = files.map((file) => checkUploadFile(file));
         const uploadedAttachments = await Promise.all(uploadPromises);
@@ -235,6 +261,27 @@ export const MultimodalInput: FC<PropsType> = ({
     [setAttachments, checkUploadFile]
   );
 
+  const handleSubmitRecording = useCallback(
+    async (blob: Blob) => {
+      try {
+        const audioFile = await toAudioBase64(blob);
+        handleSubmit(undefined, [audioFile]);
+        setIsRecording(false);
+      } catch (error) {
+        console.error('Error uploading files!', error);
+      }
+    },
+    [handleSubmit, setIsRecording]
+  );
+
+  const handleSend = useCallback(async () => {
+    if (isRecording) {
+      onRecordingStopped(handleSubmitRecording);
+    } else {
+      submitForm();
+    }
+  }, [submitForm, onRecordingStopped, handleSubmitRecording]);
+
   return (
     <div className="relative w-full flex flex-col gap-4">
       {messages.length === 0 && (
@@ -317,7 +364,6 @@ export const MultimodalInput: FC<PropsType> = ({
         onKeyDown={(event) => {
           if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();
-
             if (isLoading) {
               console.error(
                 'Please wait for the model to finish its response!'
@@ -325,7 +371,7 @@ export const MultimodalInput: FC<PropsType> = ({
             } else if (uploadQueue.length) {
               console.error('Please wait for file is uploading!');
             } else {
-              submitForm();
+              handleSend();
             }
           }
         }}
@@ -347,24 +393,77 @@ export const MultimodalInput: FC<PropsType> = ({
           className="rounded-full p-1.5 h-fit absolute bottom-2 right-2 m-0.5 border dark:border-zinc-600"
           onClick={(event) => {
             event.preventDefault();
-            submitForm();
+            handleSend();
           }}
-          disabled={input.length === 0 || !!uploadQueue.length}
+          disabled={
+            !isRecording && (input.length === 0 || !!uploadQueue.length)
+          } // zero input or uploading
         >
           <ArrowUpIcon size={14} />
         </Button>
       )}
+      {isRecording ? (
+        <>
+          <div
+            className="rounded-full bg-background flex absolute p-1 bottom-2 right-[80px]"
+            data-testid="input"
+          >
+            <div className="flex items-center gap-3">
+              <span>
+                <CircleDotIcon color="red" />
+              </span>
+              <span>{elapsedTime || '00:00'}</span>
+              {isLoadingRecording && <span className="ml-1.5">Sending...</span>}
+            </div>
+          </div>
+          <Button
+            className="rounded-full p-1.5 h-fit absolute bottom-2 right-11 m-0.5 dark:border-zinc-700"
+            variant="outline"
+            onClick={(event) => {
+              event.preventDefault();
+              onRecordingCancelled();
+            }}
+          >
+            <TrashIcon size={14} color="red" />
+          </Button>
+        </>
+      ) : (
+        <>
+          <Button
+            className="rounded-full p-1.5 h-fit absolute bottom-2 right-11 m-0.5 dark:border-zinc-700"
+            onClick={(event) => {
+              event.preventDefault();
+              setIsRecording(true);
+            }}
+            variant="outline"
+            disabled={isLoading}
+          >
+            <MicrophoneIcon size={14} />
+          </Button>
+          <Button
+            className={`rounded-full p-1.5 h-fit absolute bottom-2 right-[80px] m-0.5 dark:border-zinc-700 ${enableTTS ? 'text-white hover:bg-primary/90 bg-primary' : ''}`}
+            onClick={(event) => {
+              event.preventDefault();
+              setEnableTTS(!enableTTS);
+            }}
+            variant="outline"
+            disabled={isLoading}
+          >
+            <VolumeIcon />
+          </Button>
+        </>
+      )}
 
       <Button
-        className="rounded-full p-1.5 h-fit absolute bottom-2 right-11 m-0.5 dark:border-zinc-700"
+        className="rounded-full p-1.5 h-fit absolute bottom-2 left-2 m-0.5 dark:border-zinc-700"
         onClick={(event) => {
           event.preventDefault();
           fileInputRef.current?.click();
         }}
         variant="outline"
-        disabled={isLoading}
+        disabled={isLoading || isRecording}
       >
-        <PaperclipIcon size={14} />
+        <PlusIcon size={14} />
       </Button>
     </div>
   );

package/src/components/Chat/PreviewAttachment.tsx

@@ -1,5 +1,6 @@
 import { IFileUpload } from '../../types/flowise.type';
 import { LoaderIcon } from './Icons';
+import React from 'react';
 
 export const PreviewAttachment = ({
   attachment,
@@ -11,9 +12,13 @@ export const PreviewAttachment = ({
   const { name, data, mime, tempId } = attachment;
   return (
     <div className="flex flex-col gap-2">
-      <div className="w-30 p-2 max-w-[200px] bg-muted rounded-md relative flex flex-col items-center justify-center">
+      <div className="w-30 p-0 max-w-[400px] bg-muted rounded-md relative flex flex-col items-center justify-center">
         {data ? (
-          mime.startsWith('image') ? (
+          mime.startsWith('audio') ? (
+            <audio controls>
+              <source src={data} type={mime} />
+            </audio>
+          ) : mime.startsWith('image') ? (
             <img
               key={tempId}
               src={data}
@@ -33,9 +38,9 @@ export const PreviewAttachment = ({
           </div>
         )}
       </div>
-      <div className="text-xs text-zinc-500 max-w-[200px] truncate ">
-        {name}
-      </div>
+      {/*<div className="text-xs text-zinc-500 max-w-[200px] truncate ">*/}
+      {/*  {name}*/}
+      {/*</div>*/}
     </div>
   );
 };

package/src/features/AgentWidget/index.tsx

@@ -5,6 +5,7 @@ import Agent from '../../components/Agent';
 import { ChatDataProvider } from '../../hooks/useChatData';
 import styles from '../../assets/tailwindcss.css';
 import commonStyles from '../../assets/common.css';
+import { SuggestionType } from '../../types/common.type';
 
 export type AgentWidgetType = {
   apiHost: string;
@@ -12,6 +13,7 @@ export type AgentWidgetType = {
   overrideConfig?: {
     chatId?: string | undefined;
     overrideConfig?: Record<string, unknown>;
+    suggestedActions?: SuggestionType[];
   } & Record<string, unknown>;
   theme?: {
     avatar?: string;
@@ -27,14 +29,15 @@ const AgentWidget: FC<AgentWidgetType> = (props: AgentWidgetType) => {
         config={{
           apiHost: props.apiHost,
           agentId: props.agentId,
-          listeners: props.listeners,
-          overrideConfig: props.overrideConfig,
+          overrideConfig: props.overrideConfig?.overrideConfig,
           theme: props.theme,
         }}
       >
         <ChatDataProvider
           data={{
             chatId: props.overrideConfig?.chatId,
+            suggestedActions: props.overrideConfig?.suggestedActions,
+            listeners: props.listeners,
           }}
         >
           <Agent />

package/src/hooks/useAudioRecording.ts

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import {
+  cancelAudioRecording,
+  startAudioRecording,
+  stopAudioRecording,
+} from '../utils/audioRecording';
+
+export const useAudioRecording = () => {
+  const [elapsedTime, setElapsedTime] = useState('00:00');
+  const [recordingNotSupported, setRecordingNotSupported] = useState(false);
+  const [isLoadingRecording, setIsLoadingRecording] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+
+  useEffect(() => {
+    if (isRecording) {
+      onRecordingStarted();
+    }
+  }, [isRecording]);
+  const onRecordingStarted = () => {
+    setIsRecording(true);
+    setIsLoadingRecording(false);
+    startAudioRecording(
+      setIsRecording,
+      setRecordingNotSupported,
+      setElapsedTime
+    );
+  };
+
+  const onRecordingCancelled = () => {
+    if (!recordingNotSupported) cancelAudioRecording();
+    setIsRecording(false);
+    setRecordingNotSupported(false);
+  };
+
+  const onRecordingStopped = (onStop: null | ((blob: Blob) => void)) => {
+    setIsLoadingRecording(true);
+    stopAudioRecording(onStop);
+  };
+
+  return {
+    elapsedTime,
+    recordingNotSupported,
+    isLoadingRecording,
+    isRecording,
+    setIsRecording,
+    onRecordingCancelled,
+    onRecordingStopped,
+    onRecordingStarted,
+  };
+};