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

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 || "")

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">