i18n support

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>