Merge pull request #246 from n4ze3m/next

v1.7.9
n4ze3m · Apr 8, 2024 · 3134d91 · 3134d91
2 parents a366c77 + 0042131
commit 3134d91
Show file tree

Hide file tree

Showing 32 changed files with 675 additions and 139 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,
     }
   );
 

diff --git a/app/widget/package.json b/app/widget/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.18",
     "@mantine/form": "^6.0.13",
     "@tailwindcss/forms": "^0.5.3",
     "@tanstack/react-query": "^4.29.12",

diff --git a/app/widget/src/App.tsx b/app/widget/src/App.tsx
@@ -50,7 +50,12 @@ function App() {
       } else {
         setMessages([
           ...messages,
-          { isBot: true, message: botStyle.data.first_message, sources: [] },
+          {
+            isBot: true,
+            message: botStyle.data.first_message,
+            sources: [],
+            id: "first-message",
+          },
         ]);
       }
     }

diff --git a/app/widget/src/components/BotChatBubble.tsx b/app/widget/src/components/BotChatBubble.tsx
@@ -1,7 +1,9 @@
+import { PlayIcon, StopIcon } from "@heroicons/react/20/solid";
 import { Message } from "../store";
 import { BotStyle } from "../utils/types";
 import BotSource from "./BotSource";
 import Markdown from "./Markdown";
+import { useVoice } from "../hooks/useVoice";
 
 export default function BotChatBubble({
   message,
@@ -10,6 +12,7 @@ export default function BotChatBubble({
   message: Message;
   botStyle: BotStyle;
 }) {
+  const { cancel, isPlaying, loading, speak } = useVoice();
   return (
     <div className="mt-2 flex flex-col">
       <div
@@ -38,6 +41,51 @@ export default function BotChatBubble({
             <p className="text-sm">
               <Markdown message={message.message} />
             </p>
+            {botStyle.data.tts && message.isBot && message.id !== "temp-id" && (
+              <div className=" mt-3">
+                <button
+                  onClick={() => {
+                    if (!isPlaying) {
+                      speak({
+                        id: message.id,
+                      });
+                    } else {
+                      cancel();
+                    }
+                  }}
+                  className="flex bg-white shadow-md items-center border justify-center w-6 h-6 rounded-full transition-colors duration-200"
+                >
+                  {!loading ? (
+                    !isPlaying ? (
+                      <PlayIcon className="w-4 h-4 text-gray-400 group-hover:text-gray-500" />
+                    ) : (
+                      <StopIcon className="w-4 h-4 text-red-400 group-hover:text-red-500" />
+                    )
+                  ) : (
+                    <svg
+                      className="animate-spin h-5 w-5 text-gray-400 group-hover:text-gray-500"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      ></circle>
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      ></path>
+                    </svg>
+                  )}
+                </button>
+              </div>
+            )}
           </div>
           <div className="flex flex-wrap items-start justify-start space-x-3">
             {botStyle.data.show_reference &&

diff --git a/app/widget/src/components/BotHeader.tsx b/app/widget/src/components/BotHeader.tsx
@@ -26,6 +26,7 @@ export default function BotHeader({
                setMessages([
                  {
                    message: botStyle?.data?.first_message,
+                   id: "first-message",
                    isBot: true,
                    sources: [],
                  },
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,7 +17,6 @@ export default function BotAppearanceRoot() { @@
         },
         {
           enabled: !!param.id,
-          refetchInterval: 1000,
         }
       );
@@ Expand Down @@