@clikvn/agent-widget-embedded 0.0.4-dev → 0.0.6-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.4-dev",
+  "version": "0.0.6-dev",
   "author": "Clik JSC",
   "license": "ISC",
   "type": "module",

package/src/components/Chat/AudioPlayer.tsx

@@ -0,0 +1,44 @@
+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();
+    }
+  };
+
+  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)}
+        onPause={() => setIsPlaying(false)}
+        onPlay={() => setIsPlaying(true)}
+      ></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,7 +477,13 @@ export const MoreIcon = ({ size = 16 }: { size?: number }) => {
   );
 };
 
-export const TrashIcon = ({ size = 16, color }: { size?: number, color?: string }) => {
+export const TrashIcon = ({
+  size = 16,
+  color,
+}: {
+  size?: number;
+  color?: string;
+}) => {
   return (
     <svg
       height={size}
@@ -882,7 +888,13 @@ export const MicrophoneIcon = ({ size = 16 }: { size?: number }) => {
   );
 };
 
-export const CircleDotIcon = ({ size = 16, color = 'red' }: { size?: number, color?: string }) => (
+export const CircleDotIcon = ({
+  size = 16,
+  color = 'red',
+}: {
+  size?: number;
+  color?: string;
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     height={size}
@@ -898,3 +910,21 @@ export const CircleDotIcon = ({ size = 16, color = 'red' }: { size?: number, col
     <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/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

@@ -12,17 +12,16 @@ import {
   cn,
   generateExtendedFileName,
   generateUUID,
-  sleep,
 } from '../../utils/commonUtils';
 import { PreviewAttachment } from './PreviewAttachment';
 import {
   ArrowUpIcon,
   CircleDotIcon,
   MicrophoneIcon,
-  PaperclipIcon,
   PlusIcon,
   StopIcon,
   TrashIcon,
+  VolumeIcon,
 } from './Icons';
 import { ChatMessageType, IFileUpload } from '../../types/flowise.type';
 import { BotType } from '../../types/bot.type';
@@ -31,29 +30,7 @@ import { createAttachments } from '../../services/chat.service';
 import { Button } from './ui/Button';
 import { Textarea } from './ui/Textarea';
 import { useAudioRecording } from '../../hooks/useAudioRecording';
-
-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 { useChatData } from '../../hooks/useChatData';
 
 type PropsType = {
   input: string;
@@ -73,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> = ({
@@ -90,7 +69,10 @@ export const MultimodalInput: FC<PropsType> = ({
   setAttachments,
   bot,
   apiHost,
+  setEnableTTS,
+  enableTTS,
 }) => {
+  const { suggestedActions = [] } = useChatData();
   const {
     isRecording,
     setIsRecording,
@@ -98,17 +80,7 @@ export const MultimodalInput: FC<PropsType> = ({
     onRecordingStopped,
     elapsedTime,
     isLoadingRecording,
-  } = useAudioRecording({
-    addRecordingToPreviews: async (blob: Blob) => {
-      try {
-        const audioFile = await toAudioBase64(blob);
-        handleSubmit(undefined, [audioFile]);
-        setIsRecording(false);
-      } catch (error) {
-        console.error('Error uploading files!', error);
-      }
-    },
-  });
+  } = useAudioRecording();
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const { width } = useWindowSize();
   useEffect(() => {
@@ -289,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 && (
@@ -371,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!'
@@ -379,7 +371,7 @@ export const MultimodalInput: FC<PropsType> = ({
             } else if (uploadQueue.length) {
               console.error('Please wait for file is uploading!');
             } else {
-              submitForm();
+              handleSend();
             }
           }
         }}
@@ -401,11 +393,7 @@ 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();
-            if (isRecording) {
-              onRecordingStopped();
-            } else {
-              submitForm();
-            }
+            handleSend();
           }}
           disabled={
             !isRecording && (input.length === 0 || !!uploadQueue.length)
@@ -440,18 +428,32 @@ export const MultimodalInput: FC<PropsType> = ({
           </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-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 left-2 m-0.5 dark:border-zinc-700"
         onClick={(event) => {

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

@@ -5,12 +5,7 @@ import {
   stopAudioRecording,
 } from '../utils/audioRecording';
 
-type Props = {
-  addRecordingToPreviews: (blob: Blob) => void;
-};
-
-export const useAudioRecording = (props: Props) => {
-  const { addRecordingToPreviews } = props;
+export const useAudioRecording = () => {
   const [elapsedTime, setElapsedTime] = useState('00:00');
   const [recordingNotSupported, setRecordingNotSupported] = useState(false);
   const [isLoadingRecording, setIsLoadingRecording] = useState(false);
@@ -23,6 +18,7 @@ export const useAudioRecording = (props: Props) => {
   }, [isRecording]);
   const onRecordingStarted = () => {
     setIsRecording(true);
+    setIsLoadingRecording(false);
     startAudioRecording(
       setIsRecording,
       setRecordingNotSupported,
@@ -36,9 +32,9 @@ export const useAudioRecording = (props: Props) => {
     setRecordingNotSupported(false);
   };
 
-  const onRecordingStopped = () => {
+  const onRecordingStopped = (onStop: null | ((blob: Blob) => void)) => {
     setIsLoadingRecording(true);
-    stopAudioRecording(addRecordingToPreviews);
+    stopAudioRecording(onStop);
   };
 
   return {

package/src/hooks/useChat.ts

@@ -33,6 +33,8 @@ type ReturnType = {
   chatId: string;
   append: (message: ChatMessageType) => Promise<void>;
   bot: BotType | null;
+  enableTTS: boolean;
+  setEnableTTS: (value: boolean) => void;
 };
 
 export const useChat = (props: PropsType): ReturnType => {
@@ -43,6 +45,7 @@ export const useChat = (props: PropsType): ReturnType => {
   const chatIdRef = useRef<string>(idKey);
   const [chatId, setChatId] = useState(idKey);
   const [bot, setBot] = useState<BotType | null>(null);
+  const [enableTTS, setEnableTTS] = useState(false);
 
   const updateChatId = (uuid: string) => {
     chatIdRef.current = uuid;
@@ -91,6 +94,9 @@ export const useChat = (props: PropsType): ReturnType => {
           lastMsg.content = newMessage.metaData.question;
         }
         mutateMessages([...msgs, { ...newMessage }]);
+      } else if (chunk.event == 'audio') {
+        newMessage.ttsUrl = chunk.data as string;
+        mutateMessages([...msgs, { ...newMessage }]);
       }
     };
 
@@ -170,7 +176,8 @@ export const useChat = (props: PropsType): ReturnType => {
       chatId: chatIdRef.current,
       question: message.content,
       chatflowId: bot?.id,
-      overrideConfig: overrideConfig?.overrideConfig,
+      overrideConfig: overrideConfig,
+      tts: enableTTS,
     });
     setInput('');
   };
@@ -213,7 +220,8 @@ export const useChat = (props: PropsType): ReturnType => {
         question: input || '',
         uploads: files || [],
         chatflowId: bot?.id,
-        overrideConfig: overrideConfig?.overrideConfig,
+        overrideConfig: overrideConfig,
+        tts: enableTTS,
       });
       setInput('');
     },
@@ -231,5 +239,7 @@ export const useChat = (props: PropsType): ReturnType => {
     chatId,
     append,
     bot,
+    enableTTS,
+    setEnableTTS,
   };
 };

package/src/hooks/useChatData.tsx

@@ -4,11 +4,13 @@ import { getChatMessage } from '../services/chat.service';
 import { ChatMessageType } from '../types/flowise.type';
 import { generateUUID } from '../utils/commonUtils';
 import { useConfiguration } from './useConfiguration';
+import { SuggestionType } from '../types/common.type';
 
 type ChatData = {
   chatId?: string | undefined;
   listeners?: Record<EVENT_TYPE, (props: any) => void>;
   initialMessages?: ChatMessageType[];
+  suggestedActions?: SuggestionType[];
 };
 
 const ChatDataContext = createContext<ChatData | undefined>(undefined);
@@ -21,6 +23,7 @@ export const ChatDataProvider = ({
   data: ChatData;
 }) => {
   const [chatData, setChatData] = useState<ChatData>({
+    ...data,
     chatId: data.chatId || generateUUID(),
   });
 

package/src/hooks/useConfiguration.tsx

@@ -1,17 +1,12 @@
 import React, { createContext, useEffect, useState } from 'react';
-import { EVENT_TYPE } from '../models';
 
 type ConfigurationData = {
   apiHost: string;
   agentId: string;
-  overrideConfig?: {
-    chatId?: string | undefined;
-    overrideConfig?: Record<string, any>;
-  } & Record<string, unknown>;
+  overrideConfig?: Record<string, any>;
   theme?: {
     avatar?: string;
   } & Record<string, unknown>;
-  listeners?: Record<EVENT_TYPE, (props: any) => void>;
 };
 
 const ConfigurationContext = createContext<ConfigurationData | undefined>(

package/src/register.tsx

@@ -2,13 +2,15 @@ import { agentWidgetElementName } from './constants';
 import * as ReactDom from 'react-dom';
 import AgentWidget from './features/AgentWidget';
 import { EVENT_TYPE } from './models';
+import { SuggestionType } from './types/common.type';
 
-type AgentType = {
+export type AgentWidgetType = {
   apiHost: string;
   agentId: string;
   overrideConfig?: {
     chatId?: string | undefined;
     overrideConfig?: Record<string, unknown>;
+    suggestedActions?: SuggestionType[];
   } & Record<string, unknown>;
   theme?: {
     avatar?: string;
@@ -22,6 +24,7 @@ export class AgentWidgetComponent extends HTMLElement {
   overrideConfig?: {
     chatId?: string | undefined;
     overrideConfig?: Record<string, unknown>;
+    suggestedActions?: SuggestionType[];
   } & Record<string, unknown>;
   theme?: {
     avatar?: string;
@@ -32,7 +35,7 @@ export class AgentWidgetComponent extends HTMLElement {
     this.updateAttributes = this.updateAttributes.bind(this);
   }
 
-  updateAttributes(attributes: AgentType) {
+  updateAttributes(attributes: AgentWidgetType) {
     this.apiHost = attributes.apiHost;
     this.agentId = attributes.agentId;
     this.overrideConfig = attributes.overrideConfig;

package/src/types/common.type.ts

@@ -9,3 +9,9 @@ export interface CommonChatType {
   type: 'PRIVATE' | 'ANONYMOUS';
   bot: BotType;
 }
+
+export interface SuggestionType {
+  title?: string;
+  label?: string;
+  action?: string;
+}

package/src/types/flowise.type.ts

@@ -11,6 +11,7 @@ export interface PredictionData {
   leadEmail?: string;
   action?: IAction;
   language?: string;
+  tts?: boolean;
 }
 
 export interface ChatMessageType {
@@ -32,6 +33,7 @@ export interface ChatMessageType {
   fileAnnotations?: FileAnnotation[];
   agentReasoning?: AgentReasoning[];
   metaData?: ChatMessageMetadataType;
+  ttsUrl?: string;
 }
 
 export interface ChatMessageMetadataType {

package/src/window.ts

@@ -1,22 +1,9 @@
 import { agentWidgetElementName } from './constants';
-import { registerWebComponents } from './register';
-import { EVENT_TYPE } from './models';
+import { AgentWidgetType, registerWebComponents } from './register';
 
 let elementUsed: Element | undefined;
 
-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 const initWidget = (props: VoiceAgentWidget & { id?: string }) => {
+export const initWidget = (props: AgentWidgetType & { id?: string }) => {
   destroy();
   const element: any = props.id
     ? document.getElementById(props.id)