{
const location = useLocation()
+ const { t } = useTranslation("settings")
+
return (
<>
@@ -54,31 +57,31 @@ export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
className="flex gap-x-3 gap-y-1 whitespace-nowrap lg:flex-col">
-
diff --git a/src/components/Option/Models/index.tsx b/src/components/Option/Models/index.tsx
index e1d16e8..88f4804 100644
--- a/src/components/Option/Models/index.tsx
+++ b/src/components/Option/Models/index.tsx
@@ -1,18 +1,20 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import { Skeleton, Table, Tag, Tooltip, notification, Modal, Input } from "antd"
-import { bytePerSecondFormatter } from "~libs/byte-formater"
-import { deleteModel, getAllModels } from "~services/ollama"
+import { bytePerSecondFormatter } from "~/libs/byte-formater"
+import { deleteModel, getAllModels } from "~/services/ollama"
import dayjs from "dayjs"
import relativeTime from "dayjs/plugin/relativeTime"
import { useState } from "react"
import { useForm } from "@mantine/form"
import { Download, RotateCcw, Trash2 } from "lucide-react"
+import { useTranslation } from "react-i18next"
dayjs.extend(relativeTime)
export const ModelsBody = () => {
const queryClient = useQueryClient()
const [open, setOpen] = useState(false)
+ const { t } = useTranslation(["settings", "common"])
const form = useForm({
initialValues: {
@@ -32,22 +34,24 @@ export const ModelsBody = () => {
queryKey: ["fetchAllModels"]
})
notification.success({
- message: "Model Deleted",
- description: "Model has been deleted successfully"
+ message: t("manageModels.notification.success"),
+ description: t("manageModels.notification.successDeleteDescription")
})
},
onError: (error) => {
notification.error({
message: "Error",
- description: error?.message || "Something went wrong"
+ description: error?.message || t("manageModels.notification.someError")
})
}
})
const pullModel = async (modelName: string) => {
notification.info({
- message: "Pulling Model",
- description: `Pulling ${modelName} model. For more details, check the extension icon.`
+ message: t("manageModels.notification.pullModel"),
+ description: t("manageModels.notification.pullModelDescription", {
+ modelName
+ })
})
setOpen(false)
@@ -76,7 +80,7 @@ export const ModelsBody = () => {
@@ -88,12 +92,12 @@ export const ModelsBody = () => {
(
@@ -105,28 +109,26 @@ export const ModelsBody = () => {
)
},
{
- title: "Modified",
+ title: t("manageModels.columns.modifiedAt"),
dataIndex: "modified_at",
key: "modified_at",
render: (text: string) => dayjs(text).fromNow(true)
},
{
- title: "Size",
+ title: t("manageModels.columns.size"),
dataIndex: "size",
key: "size",
render: (text: number) => bytePerSecondFormatter(text)
},
{
- title: "Action",
+ title: t("manageModels.columns.actions"),
render: (_, record) => (
-
+
-
+
diff --git a/src/components/Option/Playground/PlaygroundChat.tsx b/src/components/Option/Playground/PlaygroundChat.tsx
index 4b42806..8b0a876 100644
--- a/src/components/Option/Playground/PlaygroundChat.tsx
+++ b/src/components/Option/Playground/PlaygroundChat.tsx
@@ -1,7 +1,7 @@
import React from "react"
-import { useMessageOption } from "~hooks/useMessageOption"
+import { useMessageOption } from "~/hooks/useMessageOption"
import { PlaygroundEmpty } from "./PlaygroundEmpty"
-import { PlaygroundMessage } from "~components/Common/Playground/Message"
+import { PlaygroundMessage } from "~/components/Common/Playground/Message"
export const PlaygroundChat = () => {
const {
diff --git a/src/components/Option/Playground/PlaygroundEmpty.tsx b/src/components/Option/Playground/PlaygroundEmpty.tsx
index 8e6b1a8..81771da 100644
--- a/src/components/Option/Playground/PlaygroundEmpty.tsx
+++ b/src/components/Option/Playground/PlaygroundEmpty.tsx
@@ -1,14 +1,16 @@
import { useQuery } from "@tanstack/react-query"
import { RotateCcw } from "lucide-react"
import { useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
import {
getOllamaURL,
isOllamaRunning,
setOllamaURL as saveOllamaURL
-} from "~services/ollama"
+} from "~/services/ollama"
export const PlaygroundEmpty = () => {
const [ollamaURL, setOllamaURL] = useState("")
+ const { t } = useTranslation(["playground", "common"])
const {
data: ollamaInfo,
status: ollamaStatus,
@@ -40,7 +42,7 @@ export const PlaygroundEmpty = () => {
- Searching for Your Ollama ๐ฆ
+ {t("ollamaState.searching")}
)}
@@ -49,7 +51,7 @@ export const PlaygroundEmpty = () => {
- Ollama is running ๐ฆ
+ {t("ollamaState.running")}
) : (
@@ -57,7 +59,7 @@ export const PlaygroundEmpty = () => {
- Unable to connect to Ollama ๐ฆ
+ {t("ollamaState.notRunning")}
@@ -75,7 +77,7 @@ export const PlaygroundEmpty = () => {
}}
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 ">
- Retry
+ {t("common:retry")}
)
diff --git a/src/components/Option/Playground/PlaygroundForm.tsx b/src/components/Option/Playground/PlaygroundForm.tsx
index 4f68c52..6776732 100644
--- a/src/components/Option/Playground/PlaygroundForm.tsx
+++ b/src/components/Option/Playground/PlaygroundForm.tsx
@@ -1,22 +1,24 @@
import { useForm } from "@mantine/form"
import { useMutation, useQueryClient } from "@tanstack/react-query"
import React from "react"
-import useDynamicTextareaSize from "~hooks/useDynamicTextareaSize"
-import { toBase64 } from "~libs/to-base64"
-import { useMessageOption } from "~hooks/useMessageOption"
+import useDynamicTextareaSize from "~/hooks/useDynamicTextareaSize"
+import { toBase64 } from "~/libs/to-base64"
+import { useMessageOption } from "~/hooks/useMessageOption"
import { Checkbox, Dropdown, Switch, Tooltip } from "antd"
import { Image } from "antd"
-import { useSpeechRecognition } from "~hooks/useSpeechRecognition"
-import { useWebUI } from "~store/webui"
-import { defaultEmbeddingModelForRag } from "~services/ollama"
+import { useSpeechRecognition } from "~/hooks/useSpeechRecognition"
+import { useWebUI } from "~/store/webui"
+import { defaultEmbeddingModelForRag } from "~/services/ollama"
import { ImageIcon, MicIcon, StopCircleIcon, X } from "lucide-react"
-import { getVariable } from "~utils/select-varaible"
+import { getVariable } from "~/utils/select-varaible"
+import { useTranslation } from "react-i18next"
type Props = {
dropedFile: File | undefined
}
export const PlaygroundForm = ({ dropedFile }: Props) => {
+ const { t } = useTranslation(["playground", "common"])
const inputRef = React.useRef(null)
const [typing, setTyping] = React.useState(false)
const {
@@ -117,13 +119,13 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
})
const handleKeyDown = (e: React.KeyboardEvent) => {
- if (e.key === "Process" || e.key === "229" ) return
+ if (e.key === "Process" || e.key === "229") return
if (
!typing &&
e.key === "Enter" &&
!e.shiftKey &&
!isSending &&
- sendWhenEnter
+ sendWhenEnter
) {
e.preventDefault()
form.onSubmit(async (value) => {
@@ -131,16 +133,13 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
return
}
if (!selectedModel || selectedModel.length === 0) {
- form.setFieldError("message", "Please select a model")
+ form.setFieldError("message", t("formError.noModel"))
return
}
if (webSearch) {
const defaultEM = await defaultEmbeddingModelForRag()
if (!defaultEM) {
- form.setFieldError(
- "message",
- "Please set an embedding model on the Settings > Ollama page"
- )
+ form.setFieldError("message", t("formError.noEmbeddingModel"))
return
}
}
@@ -181,16 +180,13 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {