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/Common/Markdown.tsx
+++ b/src/components/Common/Markdown.tsx
@@ -1,7 +1,6 @@
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
 import remarkGfm from "remark-gfm"
 import { nightOwl } from "react-syntax-highlighter/dist/cjs/styles/prism"
-import rehypeMathjax from "rehype-mathjax"
 import remarkMath from "remark-math"
 import ReactMarkdown from "react-markdown"
 import "property-information"
@@ -19,7 +18,6 @@ export default function Markdown({ message }: { message: string }) {
      <ReactMarkdown
        className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark"
        remarkPlugins={[remarkGfm, remarkMath]}
-        rehypePlugins={[rehypeMathjax]}
        components={{
          code({ node, inline, className, children, ...props }) {
            const match = /language-(\w+)/.exec(className || "")
--- a/src/components/Common/Playground/Message.tsx
+++ b/src/components/Common/Playground/Message.tsx
@@ -2,10 +2,18 @@ import Markdown from "../../Common/Markdown"
 import React from "react"
 import { Image, Tooltip } from "antd"
 import { WebSearch } from "./WebSearch"
-import { CheckIcon, ClipboardIcon, Pen, RotateCcw } from "lucide-react"
+import {
+  CheckIcon,
+  ClipboardIcon,
+  Pen,
+  PlayIcon,
+  RotateCcw,
+  Square
+} from "lucide-react"
 import { EditMessageForm } from "./EditMessageForm"
 import { useTranslation } from "react-i18next"
 import { MessageSource } from "./MessageSource"
+import { useTTS } from "@/hooks/useTTS"

 type Props = {
  message: string
@@ -25,6 +33,7 @@ type Props = {
  sources?: any[]
  hideEditAndRegenerate?: boolean
  onSourceClick?: (source: any) => void
+  isTTSEnabled?: boolean
 }

 export const PlaygroundMessage = (props: Props) => {
@@ -32,6 +41,7 @@ export const PlaygroundMessage = (props: Props) => {
  const [editMode, setEditMode] = React.useState(false)

  const { t } = useTranslation("common")
+  const { cancel, isSpeaking, speak } = useTTS()

  return (
    <div className="group w-full text-gray-800 dark:text-gray-100">
@@ -98,8 +108,10 @@ export const PlaygroundMessage = (props: Props) => {
              <div className="mb-3 flex flex-wrap gap-2">
                {props?.sources?.map((source, index) => (
                  <MessageSource
-                  onSourceClick={props.onSourceClick}
-                  key={index} source={source} />
+                    onSourceClick={props.onSourceClick}
+                    key={index}
+                    source={source}
+                  />
                ))}
              </div>
            )}
@@ -110,11 +122,31 @@ export const PlaygroundMessage = (props: Props) => {
                    ? "hidden group-hover:flex"
                    : "flex"
                }`}>
+                {props.isTTSEnabled && (
+                  <Tooltip title={t("tts")}>
+                    <button
+                      onClick={() => {
+                        if (isSpeaking) {
+                          cancel()
+                        } else {
+                          speak({
+                            utterance: props.message
+                          })
+                        }
+                      }}
+                      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">
+                      {!isSpeaking ? (
+                        <PlayIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                      ) : (
+                        <Square className="w-3 h-3 text-red-400 group-hover:text-red-500" />
+                      )}
+                    </button>
+                  </Tooltip>
+                )}
                {props.isBot && (
                  <>
                    {!props.hideCopy && (
-                      <Tooltip title={t("copyToClipboard")}
-                      >
+                      <Tooltip title={t("copyToClipboard")}>
                        <button
                          onClick={() => {
                            navigator.clipboard.writeText(props.message)
@@ -135,8 +167,7 @@ export const PlaygroundMessage = (props: Props) => {

                    {!props.hideEditAndRegenerate &&
                      props.currentMessageIndex === props.totalMessages - 1 && (
-                        <Tooltip title={t("regenerate")}
-                        >
+                        <Tooltip title={t("regenerate")}>
                          <button
                            onClick={props.onRengerate}
                            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">
@@ -147,8 +178,7 @@ export const PlaygroundMessage = (props: Props) => {
                  </>
                )}
                {!props.hideEditAndRegenerate && (
-                  <Tooltip title={t("edit")}
-                  >
+                  <Tooltip title={t("edit")}>
                    <button
                      onClick={() => setEditMode(true)}
                      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">
--- 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>
+  )
+}