feat: add Text-to-Speech (speaker) button to read chatbot responses aloud

README.md

@@ -111,6 +111,13 @@ You can also customize chatbot with different configuration
       observeLoading: (loading) => {
         console.log({ loading });
       },
+    // It is only applicable if feedback is enabled
+    ttsConfig: {
+      language: 'en-US', // ISO code, e.g., 'en-US'
+      voice: 'Google UK English Male', // Specific voice name, e.g., 'Google UK English Male'
+      rate: 1, // Speed of speech: 0.1 - 10 (default is 1)
+      pitch: 1, // Pitch of voice: 0 - 2 (default is 1)
+      volume: 1, // Volume: 0 - 1 (default is 1)
     },
     theme: {
       button: {

dist/components/Bot.d.ts

@@ -80,6 +80,13 @@ export type MessageType = {
 };
 type observerConfigType = (accessor: string | boolean | object | MessageType[]) => void;
 export type observersConfigType = Record<'observeUserInput' | 'observeLoading' | 'observeMessages', observerConfigType>;
+export type ttsConfigType = {
+    language?: string;
+    voice?: string;
+    rate?: number;
+    pitch?: number;
+    volume?: number;
+};
 export type BotProps = {
     chatflowid: string;
     apiHost?: string;
@@ -109,6 +116,7 @@ export type BotProps = {
     footer?: FooterTheme;
     sourceDocsTitle?: string;
     observersConfig?: observersConfigType;
+    ttsConfig?: ttsConfigType;
     starterPrompts?: string[] | Record<string, {
         prompt: string;
     }>;

dist/components/bubbles/BotBubble.d.ts

@@ -1,4 +1,4 @@
-import { IAction, MessageType } from '../Bot';
+import { IAction, MessageType, ttsConfigType } from '../Bot';
 import { DateTimeToggleTheme } from '@/features/bubble/types';
 type Props = {
     message: MessageType;
@@ -19,6 +19,7 @@ type Props = {
     showAgentMessages?: boolean;
     sourceDocsTitle?: string;
     renderHTML?: boolean;
+    ttsConfig?: ttsConfigType;
     handleActionClick: (elem: any, action: IAction | undefined | null) => void;
     handleSourceDocumentsClick: (src: any) => void;
 };

dist/components/buttons/FeedbackButtons.d.ts

@@ -9,5 +9,9 @@ type RatingButtonProps = {
 export declare const CopyToClipboardButton: (props: RatingButtonProps) => JSX.Element;
 export declare const ThumbsUpButton: (props: RatingButtonProps) => JSX.Element;
 export declare const ThumbsDownButton: (props: RatingButtonProps) => JSX.Element;
+type TTSButtonProps = {
+    isPlaying?: boolean;
+} & RatingButtonProps;
+export declare const TTSButton: (props: TTSButtonProps) => JSX.Element;
 export {};
 //# sourceMappingURL=FeedbackButtons.d.ts.map

dist/components/icons/CheckIcon.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'solid-js/jsx-runtime';
+export declare const CheckIcon: (props: JSX.SvgSVGAttributes<SVGSVGElement>) => JSX.Element;
+//# sourceMappingURL=CheckIcon.d.ts.map

dist/components/icons/PauseIcon.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'solid-js/jsx-runtime';
+export declare const PauseIcon: (props: JSX.SvgSVGAttributes<SVGSVGElement>) => JSX.Element;
+//# sourceMappingURL=PauseIcon.d.ts.map

dist/components/icons/PlayIcon.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'solid-js/jsx-runtime';
+export declare const PlayIcon: (props: JSX.SvgSVGAttributes<SVGSVGElement>) => JSX.Element;
+//# sourceMappingURL=PlayIcon.d.ts.map

dist/components/icons/VolumeIcon.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'solid-js/jsx-runtime';
+export declare const VolumeIcon: (props: JSX.SvgSVGAttributes<SVGSVGElement>) => JSX.Element;
+//# sourceMappingURL=VolumeIcon.d.ts.map

dist/components/icons/index.d.ts

@@ -11,4 +11,6 @@ export * from './XIcon';
 export * from './TickIcon';
 export * from './AttachmentIcon';
 export * from './SparklesIcon';
+export * from './PauseIcon';
+export * from './PlayIcon';
 //# sourceMappingURL=index.d.ts.map