Embed tts

n4ze3m · Apr 8, 2024 · b92dce7 · b92dce7
1 parent a366c77
commit b92dce7
Show file tree

Hide file tree

Showing 18 changed files with 372 additions and 135 deletions.
diff --git a/app/ui/package.json b/app/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "app",
   "private": true,
-  "version": "1.7.8",
+  "version": "1.7.9",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/app/ui/src/components/Bot/Appearance/AppearanceForm.tsx b/app/ui/src/components/Bot/Appearance/AppearanceForm.tsx
@@ -1,4 +1,12 @@
-import { Divider, Form, FormInstance, Input, notification } from "antd";
+import {
+  Divider,
+  Form,
+  FormInstance,
+  Input,
+  Select,
+  Switch,
+  notification,
+} from "antd";
 import { AppearanceType } from "./types";
 import { DbColorPicker } from "../../Common/DbColorPicker";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
@@ -16,7 +24,8 @@ export const AppearanceForm = ({
 }) => {
   const botBubbleStyle = Form.useWatch("chat_bot_bubble_style", form);
   const humanBubbleStyle = Form.useWatch("chat_human_bubble_style", form);
-
+  const isTTS = Form.useWatch("tts", form);
+  const ttsProvider = Form.useWatch("tts_provider", form);
   const params = useParams<{ id: string }>();
 
   const onFinish = async (values: any) => {
@@ -218,6 +227,69 @@ export const AppearanceForm = ({
         </div>
       </Form.Item>
 
+      <Divider orientation="left">Text to Speech (TTS) Settings</Divider>
+
+      <Form.Item label="Enable TTS" name="tts" valuePropName="checked">
+        <Switch />
+      </Form.Item>
+
+      {isTTS && (
+        <>
+          <Form.Item
+            rules={[
+              {
+                required: true,
+                message: "Please select a voice provider!",
+              },
+            ]}
+            label="TTS Provider"
+            name="tts_provider"
+          >
+            <Select
+              placeholder="Select a TTS provider"
+              options={[
+                {
+                  label: "Eleven Labs",
+                  value: "eleven_labs",
+                },
+                {
+                  label: "OpenAI",
+                  value: "openai",
+                },
+              ]}
+            />
+          </Form.Item>
+          {ttsProvider === "openai" && (
+            <Form.Item
+              name="tts_model"
+              label="TTS Model"
+              rules={[
+                {
+                  required: true,
+                  message: "Please select a TTS model!",
+                },
+              ]}
+            >
+              <Select
+                placeholder="Select a TTS model"
+                options={initialData.tts_data.openai.models}
+              />
+            </Form.Item>
+          )}
+
+          <Form.Item name="tts_voice" label="TTS Voice">
+            <Select
+              placeholder="Select a TTS voice"
+              options={
+                ttsProvider === "eleven_labs"
+                  ? initialData.tts_data.eleven_labs.voices
+                  : initialData.tts_data.openai.voices
+              }
+            />
+          </Form.Item>
+        </>
+      )}
+
       <div className="mt-3 text-right">
         <button
           type="submit"

diff --git a/app/ui/src/components/Bot/Appearance/AppearancePreview.tsx b/app/ui/src/components/Bot/Appearance/AppearancePreview.tsx
@@ -1,10 +1,14 @@
+import { PlayIcon } from "@heroicons/react/24/outline";
 import { FormInstance, Form } from "antd";
 
 export const AppearancePreview = ({ form }: { form: FormInstance }) => {
   const botBubbleStyle = Form.useWatch("chat_bot_bubble_style", form);
   const humanBubbleStyle = Form.useWatch("chat_human_bubble_style", form);
   const botName = Form.useWatch("bot_name", form);
   const firstMessage = Form.useWatch("first_message", form);
+
+  const isTTS = Form.useWatch("tts", form);
+
   return (
     <div
       style={{
@@ -75,6 +79,13 @@ export const AppearancePreview = ({ form }: { form: FormInstance }) => {
               }}
             >
               <p className="text-sm">{firstMessage}</p>
+              {isTTS && (
+                <div className=" mt-3">
+                  <button className="flex bg-white shadow-md items-center border justify-center w-6 h-6 rounded-full transition-colors duration-200">
+                    <PlayIcon className="w-3 h-3" />
+                  </button>
+                </div>
+              )}
             </div>
           </div>
 

diff --git a/app/ui/src/components/Bot/Appearance/types.ts b/app/ui/src/components/Bot/Appearance/types.ts
@@ -1,16 +1,41 @@
 export interface AppearanceType {
-    public_id: string;
-    data: {
-        background_color?: string;
-        bot_name: string;
-        chat_bot_bubble_style?: {
-            background_color?: string;
-            text_color?: string;
-        };
-        chat_human_bubble_style?: {
-            background_color?: string;
-            text_color?: string;
-        };
-        first_message: string;
-    }
-}
+  public_id: string;
+  data: {
+    background_color?: string;
+    bot_name: string;
+    chat_bot_bubble_style?: {
+      background_color?: string;
+      text_color?: string;
+    };
+    chat_human_bubble_style?: {
+      background_color?: string;
+      text_color?: string;
+    };
+    first_message: string;
+    tts: boolean;
+    tts_voice: string | null;
+    tts_provider: string | null;
+  };
+  tts_data: {
+    eleven_labs: {
+      models: {
+        label: string;
+        value: string;
+      }[];
+      voices: {
+        label: string;
+        value: string;
+      }[];
+    };
+    openai: {
+      models: {
+        label: string;
+        value: string;
+      }[];
+      voices: {
+        label: string;
+        value: string;
+      }[];
+    };
+  };
+}
diff --git a/app/ui/src/components/Bot/Playground/Message.tsx b/app/ui/src/components/Bot/Playground/Message.tsx
@@ -108,12 +108,12 @@ export const PlaygroundMessage = (props: Props) => {
                       cancel();
                     }
                   }}
-                  className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+                  className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
                 >
                   {!isWebSpeaking ? (
-                    <PlayIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                    <PlayIcon className="w-4 h-4 text-gray-400 group-hover:text-gray-500" />
                   ) : (
-                    <StopIcon className="w-3 h-3 text-red-400 group-hover:text-red-500" />
+                    <StopIcon className="w-4 h-4 text-red-400 group-hover:text-red-500" />
                   )}
                 </button>
               )}
@@ -131,13 +131,13 @@ export const PlaygroundMessage = (props: Props) => {
                         cancelElevenLabs();
                       }
                     }}
-                    className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+                    className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
                   >
                     {!isElevenLabsLoading ? (
                       !isElevenLabsPlaying ? (
-                        <PlayIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                        <PlayIcon className="w-4 h-4 text-gray-400 group-hover:text-gray-500" />
                       ) : (
-                        <StopIcon className="w-3 h-3 text-red-400 group-hover:text-red-500" />
+                        <StopIcon className="w-4 h-4 text-red-400 group-hover:text-red-500" />
                       )
                     ) : (
                       <svg

diff --git a/app/ui/src/routes/bot/appearance.tsx b/app/ui/src/routes/bot/appearance.tsx
@@ -17,7 +17,6 @@ export default function BotAppearanceRoot() {
     },
     {
       enabled: !!param.id,
-      refetchInterval: 1000,
     }
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,7 +17,6 @@ export default function BotAppearanceRoot() { @@
         },
         {
           enabled: !!param.id,
-          refetchInterval: 1000,
         }
       );
@@ Expand Down @@