Update import statement in local-duckduckgo.ts, prompt.tsx, wxt.config.ts, webui.tsx, PlaygroundChat.tsx, other.tsx, Markdown.tsx, and useMessageOption.tsx

2024-04-11 00:08:20 +05:30
parent 291f7392c2
commit a3810cd534
14 changed files with 385 additions and 46 deletions
--- a/src/components/Option/Playground/PlaygroundChat.tsx
+++ b/src/components/Option/Playground/PlaygroundChat.tsx
@@ -10,7 +10,8 @@ export const PlaygroundChat = () => {
    streaming,
    regenerateLastMessage,
    isSearchingInternet,
-    editMessage
+    editMessage,
+    ttsEnabled
  } = useMessageOption()
  const divRef = React.useRef<HTMLDivElement>(null)
  const [isSourceOpen, setIsSourceOpen] = React.useState(false)
@@ -50,6 +51,7 @@ export const PlaygroundChat = () => {
              setSource(data)
              setIsSourceOpen(true)
            }}
+            isTTSEnabled={ttsEnabled}
          />
        ))}
        {messages.length > 0 && (
--- a/src/components/Option/Settings/other.tsx
+++ b/src/components/Option/Settings/other.tsx
@@ -8,6 +8,7 @@ import { MoonIcon, SunIcon } from "lucide-react"
 import { SearchModeSettings } from "./search-mode"
 import { useTranslation } from "react-i18next"
 import { useI18n } from "@/hooks/useI18n"
+import { TTSModeSettings } from "./tts-mode"

 export const SettingOther = () => {
  const { clearChat, speechToTextLanguage, setSpeechToTextLanguage } =
@@ -89,6 +90,7 @@ export const SettingOther = () => {
        </button>
      </div>
      <SearchModeSettings />
+      <TTSModeSettings  />
      <div>
        <div className="mb-5">
          <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
--- a/src/components/Option/Settings/prompt.tsx
+++ b/src/components/Option/Settings/prompt.tsx
@@ -5,8 +5,6 @@ import { useTranslation } from "react-i18next"
 import { SaveButton } from "~/components/Common/SaveButton"
 import {
  getWebSearchPrompt,
-  setSystemPromptForNonRagOption,
-  systemPromptForNonRagOption,
  geWebSearchFollowUpPrompt,
  setWebPrompts,
  promptForRag,
--- a/src/components/Option/Settings/search-mode.tsx
+++ b/src/components/Option/Settings/search-mode.tsx
@@ -44,43 +44,50 @@ export const SearchModeSettings = () => {
          await setSearchSettings(values)
        })}
        className="space-y-4">
-        <div className="flex flex-row justify-between">
+        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
          <span className="text-gray-500 dark:text-neutral-50 ">
            {t("generalSettings.webSearch.provider.label")}
          </span>
-          <Select
-            placeholder={t("generalSettings.webSearch.provider.placeholder")}
-            showSearch
-            style={{ width: "200px" }}
-            options={SUPPORTED_SERACH_PROVIDERS}
-            filterOption={(input, option) =>
-              option!.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
-              option!.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }
-            {...form.getInputProps("searchProvider")}
-          />
+          <div>
+            <Select
+              placeholder={t("generalSettings.webSearch.provider.placeholder")}
+              showSearch
+              className="w-full mt-4 sm:mt-0 sm:w-[200px]"
+              options={SUPPORTED_SERACH_PROVIDERS}
+              filterOption={(input, option) =>
+                option!.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
+                option!.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }
+              {...form.getInputProps("searchProvider")}
+            />
+          </div>
        </div>
-        <div className="flex flex-row justify-between">
+        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
          <span className="text-gray-500 dark:text-neutral-50 ">
            {t("generalSettings.webSearch.searchMode.label")}
          </span>
-          <Switch
-            {...form.getInputProps("isSimpleInternetSearch", {
-              type: "checkbox"
-            })}
-          />
+          <div>
+            <Switch
+            className="mt-4 sm:mt-0"
+              {...form.getInputProps("isSimpleInternetSearch", {
+                type: "checkbox"
+              })}
+            />
+          </div>
        </div>
-        <div className="flex flex-row justify-between">
+        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
          <span className="text-gray-500 dark:text-neutral-50 ">
            {t("generalSettings.webSearch.totalSearchResults.label")}
          </span>
-          <InputNumber
-            placeholder={t(
-              "generalSettings.webSearch.totalSearchResults.placeholder"
-            )}
-            {...form.getInputProps("totalSearchResults")}
-            style={{ width: "200px" }}
-          />
+          <div>
+            <InputNumber
+              placeholder={t(
+                "generalSettings.webSearch.totalSearchResults.placeholder"
+              )}
+              {...form.getInputProps("totalSearchResults")}
+              className="!w-full mt-4 sm:mt-0 sm:w-[200px]"
+            />
+          </div>
        </div>

        <div className="flex justify-end">
--- a/src/components/Option/Settings/tts-mode.tsx
+++ b/src/components/Option/Settings/tts-mode.tsx
@@ -0,0 +1,116 @@
+import { SaveButton } from "@/components/Common/SaveButton"
+import { getSearchSettings, setSearchSettings } from "@/services/search"
+import { getTTSSettings, setTTSSettings } from "@/services/tts"
+import { SUPPORTED_SERACH_PROVIDERS } from "@/utils/search-provider"
+import { useForm } from "@mantine/form"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
+import { Select, Skeleton, Switch, InputNumber } from "antd"
+import { useTranslation } from "react-i18next"
+
+export const TTSModeSettings = ({ hideTitle }: { hideTitle?: boolean }) => {
+  const { t } = useTranslation("settings")
+  const queryClient = useQueryClient()
+
+  const form = useForm({
+    initialValues: {
+      ttsEnabled: false,
+      ttsProvider: "",
+      voice: "",
+      ssmlEnabled: false
+    }
+  })
+
+  const { status, data } = useQuery({
+    queryKey: ["fetchTTSSettings"],
+    queryFn: async () => {
+      const data = await getTTSSettings()
+      form.setValues(data)
+      return data
+    }
+  })
+
+  if (status === "pending" || status === "error") {
+    return <Skeleton active />
+  }
+
+  return (
+    <div>
+      {!hideTitle && (
+        <div className="mb-5">
+          <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
+            {t("generalSettings.tts.heading")}
+          </h2>
+          <div className="border border-b border-gray-200 dark:border-gray-600 mt-3"></div>
+        </div>
+      )}
+      <form
+        onSubmit={form.onSubmit(async (values) => {
+          await setTTSSettings(values)
+        })}
+        className="space-y-4">
+        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
+          <span className="text-gray-500 dark:text-neutral-50 ">
+            {t("generalSettings.tts.ttsEnabled.label")}
+          </span>
+          <div>
+            <Switch
+              className="mt-4 sm:mt-0"
+              {...form.getInputProps("ttsEnabled", {
+                type: "checkbox"
+              })}
+            />
+          </div>
+        </div>
+        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
+          <span className="text-gray-500 dark:text-neutral-50 ">
+            {t("generalSettings.tts.ttsProvider.label")}
+          </span>
+          <div>
+            <Select
+              placeholder={t("generalSettings.tts.ttsProvider.placeholder")}
+              className="w-full mt-4 sm:mt-0 sm:w-[200px]"
+              options={[{ label: "Browser TTS", value: "browser" }]}
+              {...form.getInputProps("ttsProvider")}
+            />
+          </div>
+        </div>
+        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
+          <span className="text-gray-500 dark:text-neutral-50 ">
+            {t("generalSettings.tts.ttsVoice.label")}
+          </span>
+          <div>
+            <Select
+              placeholder={t("generalSettings.tts.ttsVoice.placeholder")}
+              className="w-full mt-4 sm:mt-0 sm:w-[200px]"
+              options={data?.browserTTSVoices?.map(
+                (voice) =>
+                  ({
+                    label: `${voice.voiceName} - ${voice.lang}`.trim(),
+                    value: voice.voiceName
+                  }) || []
+              )}
+              {...form.getInputProps("voice")}
+            />
+          </div>
+        </div>
+        <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">
+          <span className="text-gray-500 dark:text-neutral-50 ">
+            {t("generalSettings.tts.ssmlEnabled.label")}
+          </span>
+          <div>
+            <Switch
+              className="mt-4 sm:mt-0"
+              {...form.getInputProps("ssmlEnabled", {
+                type: "checkbox"
+              })}
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end">
+          <SaveButton btnType="submit" />
+        </div>
+      </form>
+    </div>
+  )
+}