i18n support

src/components/Sidepanel/Chat/empty.tsx

@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query"
 import { Select } from "antd"
 import { RotateCcw } from "lucide-react"
 import { useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
 import { useMessage } from "~/hooks/useMessage"
 import {
   getAllModels,
@@ -12,6 +13,7 @@ import {
 
 export const EmptySidePanel = () => {
   const [ollamaURL, setOllamaURL] = useState<string>("")
+  const { t } = useTranslation(["playground", "common"])
   const {
     data: ollamaInfo,
     status: ollamaStatus,
@@ -38,7 +40,7 @@ export const EmptySidePanel = () => {
     }
   }, [ollamaInfo])
 
-  const { setSelectedModel, selectedModel, chatMode, setChatMode,  } =
+  const { setSelectedModel, selectedModel, chatMode, setChatMode } =
     useMessage()
 
   return (
@@ -48,7 +50,7 @@ export const EmptySidePanel = () => {
           <div className="inline-flex items-center space-x-2">
             <div className="w-3 h-3 bg-blue-500 rounded-full animate-bounce"></div>
             <p className="dark:text-gray-400 text-gray-900">
-              Searching for your Ollama 🦙
+              {t("ollamaState.searching")}
             </p>
           </div>
         )}
@@ -57,7 +59,7 @@ export const EmptySidePanel = () => {
             <div className="inline-flex  items-center space-x-2">
               <div className="w-3 h-3 bg-green-500 rounded-full"></div>
               <p className="dark:text-gray-400 text-gray-900">
-                Ollama is running 🦙
+                {t("ollamaState.running")}
               </p>
             </div>
           ) : (
@@ -65,7 +67,7 @@ export const EmptySidePanel = () => {
               <div className="inline-flex  space-x-2">
                 <div className="w-3 h-3 bg-red-500 rounded-full"></div>
                 <p className="dark:text-gray-400 text-gray-900">
-                  We couldn't find your Ollama 🦙
+                  {t("ollamaState.notRunning")}
                 </p>
               </div>
 
@@ -83,7 +85,7 @@ export const EmptySidePanel = () => {
                 }}
                 className="inline-flex mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50 ">
                 <RotateCcw className="h-4 w-4 mr-3" />
-                Retry
+                {t("common:retry")}
               </button>
             </div>
           )
@@ -91,8 +93,6 @@ export const EmptySidePanel = () => {
 
         {ollamaStatus === "success" && ollamaInfo.isOk && (
           <div className="mt-4">
-            <p className="dark:text-gray-400 text-gray-900">Models:</p>
-
             <Select
               onChange={(e) => {
                 setSelectedModel(e)
@@ -104,7 +104,7 @@ export const EmptySidePanel = () => {
                 option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }
               showSearch
-              placeholder="Select a model"
+              placeholder={t("common:selectAModel")}
               style={{ width: "100%" }}
               className="mt-4"
               options={ollamaInfo.models?.map((model) => ({
@@ -145,7 +145,7 @@ export const EmptySidePanel = () => {
                 <label
                   className="mt-px font-light  cursor-pointer select-none text-gray-900 dark:text-gray-400"
                   htmlFor="check">
-                  Chat with Current Page
+                  {t("common:chatWithCurrentPage")}
                 </label>
               </div>
             </div>

src/components/Sidepanel/Chat/form.tsx

@@ -9,6 +9,7 @@ import { useSpeechRecognition } from "~/hooks/useSpeechRecognition"
 import { useWebUI } from "~/store/webui"
 import { defaultEmbeddingModelForRag } from "~/services/ollama"
 import { ImageIcon, MicIcon, X } from "lucide-react"
+import { useTranslation } from "react-i18next"
 
 type Props = {
   dropedFile: File | undefined
@@ -19,6 +20,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
   const inputRef = React.useRef<HTMLInputElement>(null)
   const { sendWhenEnter, setSendWhenEnter } = useWebUI()
   const [typing, setTyping] = React.useState<boolean>(false)
+  const { t } = useTranslation(["playground", "common"])
 
   const textAreaFocus = () => {
     if (textareaRef.current) {
@@ -88,16 +90,13 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
           return
         }
         if (!selectedModel || selectedModel.length === 0) {
-          form.setFieldError("message", "Please select a model")
+          form.setFieldError("message", t("formError.noModel"))
           return
         }
         if (chatMode === "rag") {
           const defaultEM = await defaultEmbeddingModelForRag()
           if (!defaultEM) {
-            form.setFieldError(
-              "message",
-              "Please set an embedding model on the settings page"
-            )
+            form.setFieldError("message", t("formError.noEmbeddingModel"))
             return
           }
         }
@@ -139,16 +138,13 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
           <form
             onSubmit={form.onSubmit(async (value) => {
               if (!selectedModel || selectedModel.length === 0) {
-                form.setFieldError("message", "Please select a model")
+                form.setFieldError("message", t("formError.noModel"))
                 return
               }
               if (chatMode === "rag") {
                 const defaultEM = await defaultEmbeddingModelForRag()
                 if (!defaultEM) {
-                  form.setFieldError(
-                    "message",
-                    "Please set an embedding model on the settings page"
-                  )
+                  form.setFieldError("message", t("formError.noEmbeddingModel"))
                   return
                 }
               }
@@ -181,11 +177,11 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                 tabIndex={0}
                 onCompositionStart={() => setTyping(true)}
                 onCompositionEnd={() => setTyping(false)}
-                placeholder="Type a message..."
+                placeholder={t("form.textarea.placeholder")}
                 {...form.getInputProps("message")}
               />
               <div className="flex mt-4 justify-end gap-3">
-                <Tooltip title="Voice Message">
+                <Tooltip title={t("tooltip.speechToText")}>
                   <button
                     type="button"
                     onClick={() => {
@@ -209,7 +205,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                     )}
                   </button>
                 </Tooltip>
-                <Tooltip title="Upload Image">
+                <Tooltip title={t("tooltip.uploadImage")}>
                   <button
                     type="button"
                     onClick={() => {
@@ -250,7 +246,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                             onChange={(e) =>
                               setSendWhenEnter(e.target.checked)
                             }>
-                            Send when Enter pressed
+                            {t("sendWhenEnter")}
                           </Checkbox>
                         )
                       }
@@ -271,7 +267,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                         <path d="M20 4v7a4 4 0 01-4 4H4"></path>
                       </svg>
                     ) : null}
-                    Submit
+                    {t("common:submit")}
                   </div>
                 </Dropdown.Button>
               </div>

src/components/Sidepanel/Chat/header.tsx

@@ -3,18 +3,25 @@ import { useMessage } from "~/hooks/useMessage"
 import { Link } from "react-router-dom"
 import { Tooltip } from "antd"
 import { BoxesIcon, CogIcon, RefreshCcw } from "lucide-react"
+import { useTranslation } from "react-i18next"
 export const SidepanelHeader = () => {
   const { clearChat, isEmbedding } = useMessage()
+  const { t } = useTranslation(["sidepanel", "common"])
+
   return (
     <div className="flex px-3 justify-between bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700 py-4 items-center">
       <div className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white">
-        <img className="h-6 w-auto" src={logoImage} alt="Page Assist" />
-        <span className="ml-1 text-sm ">Page Assist</span>
+        <img
+          className="h-6 w-auto"
+          src={logoImage}
+          alt={t("common:pageAssist")}
+        />
+        <span className="ml-1 text-sm ">{t("common:pageAssist")}</span>
       </div>
 
       <div className="flex items-center space-x-3">
         {isEmbedding ? (
-          <Tooltip title="It may take a few minutes to embed the page. Please wait...">
+          <Tooltip title={t("tooltip.embed")}>
             <BoxesIcon className="h-5 w-5 text-gray-500 dark:text-gray-400 animate-bounce animate-infinite" />
           </Tooltip>
         ) : null}