iod/page-assist
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

i18n support

Browse Source
This commit is contained in:
n4ze3m
2024-03-24 21:00:00 +05:30
parent 3143dd3490
commit 01d27fd1c2
25 changed files with 583 additions and 491 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Sidepanel/Chat/empty.tsx
View File

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

26
src/components/Sidepanel/Chat/form.tsx
View File

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

13
src/components/Sidepanel/Chat/header.tsx
View File

@@ -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}

118
src/components/Sidepanel/Settings/body.tsx
View File

@@ -20,8 +20,11 @@ import { SaveButton } from "~/components/Common/SaveButton"
import { SUPPORTED_LANGUAGES } from "~/utils/supporetd-languages"
import { useMessage } from "~/hooks/useMessage"
import { MoonIcon, SunIcon } from "lucide-react"
import { useTranslation } from "react-i18next"
import { useI18n } from "@/hooks/useI18n"
export const SettingsBody = () => {
const { t } = useTranslation("settings")
const [ollamaURL, setOllamaURL] = React.useState<string>("")
const [systemPrompt, setSystemPrompt] = React.useState<string>("")
const [ragPrompt, setRagPrompt] = React.useState<string>("")
@@ -33,6 +36,8 @@ export const SettingsBody = () => {
const { speechToTextLanguage, setSpeechToTextLanguage } = useMessage()
const { mode, toggleDarkMode } = useDarkMode()
const { changeLocale, locale, supportLanguage } = useI18n()
const { data, status } = useQuery({
queryKey: ["sidebarSettings"],
queryFn: async () => {
@@ -104,20 +109,26 @@ export const SettingsBody = () => {
return (
<div className="flex flex-col gap-4 p-4 max-w-2xl mx-auto lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl">
<div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
<h2 className="text-md font-semibold dark:text-white">Prompt</h2>
<h2 className="text-md font-semibold dark:text-white">
{t("managePrompts.title")}
</h2>
<div className="my-3 flex justify-end">
<Radio.Group
defaultValue={selectedValue}
onChange={(e) => setSelectedValue(e.target.value)}>
<Radio.Button value="normal">Normal</Radio.Button>
<Radio.Button value="rag">Rag</Radio.Button>
<Radio.Button value="normal">
{t("managePrompts.option1")}
</Radio.Button>
<Radio.Button value="rag">
{t("managePrompts.option2")}
</Radio.Button>
</Radio.Group>
</div>
{selectedValue === "normal" && (
<div>
<span className="text-md font-thin text-gray-500 dark:text-gray-400">
System Prompt
{t("managePrompts.systemPrompt")}
</span>
<textarea
className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
@@ -138,7 +149,7 @@ export const SettingsBody = () => {
<div>
<div className="mb-3">
<span className="text-md font-thin text-gray-500 dark:text-gray-400">
System Prompt
{t("managePrompts.systemPrompt")}
</span>
<textarea
className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
@@ -148,7 +159,7 @@ export const SettingsBody = () => {
</div>
<div className="mb-3">
<span className="text-md font-thin text-gray-500 dark:text-gray-400">
Question Prompt
{t("managePrompts.questionPrompt")}
</span>
<textarea
className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
@@ -170,14 +181,14 @@ export const SettingsBody = () => {
<div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
<h2 className="text-md mb-4 font-semibold dark:text-white">
Ollama URL
{t("ollamaSettings.heading")}
</h2>
<input
className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
value={ollamaURL}
type="url"
onChange={(e) => setOllamaURL(e.target.value)}
placeholder="Enter Ollama URL here"
placeholder={t("ollamaSettings.settings.ollamaUrl.placeholder")}
/>
<div className="flex justify-end">
<SaveButton
@@ -190,7 +201,7 @@ export const SettingsBody = () => {
<div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
<h2 className="text-md mb-4 font-semibold dark:text-white">
RAG Configuration
{t("ollamaSettings.settings.ragSettings.label")}
</h2>
<Form
onFinish={(data) => {
@@ -207,9 +218,14 @@ export const SettingsBody = () => {
}}>
<Form.Item
name="defaultEM"
label="Embedding Model"
help="Highly recommended to use embedding models like `nomic-embed-text`."
rules={[{ required: true, message: "Please select a model!" }]}>
label={t("ollamaSettings.settings.ragSettings.model.label")}
help={t("ollamaSettings.settings.ragSettings.model.help")}
rules={[
{
required: true,
message: t("ollamaSettings.settings.ragSettings.model.required")
}
]}>
<Select
size="large"
filterOption={(input, option) =>
@@ -229,21 +245,38 @@ export const SettingsBody = () => {
<Form.Item
name="chunkSize"
label="Chunk Size"
label={t("ollamaSettings.settings.ragSettings.chunkSize.label")}
rules={[
{ required: true, message: "Please input your chunk size!" }
]}>
<InputNumber style={{ width: "100%" }} placeholder="Chunk Size" />
</Form.Item>
<Form.Item
name="chunkOverlap"
label="Chunk Overlap"
rules={[
{ required: true, message: "Please input your chunk overlap!" }
{
required: true,
message: t(
"ollamaSettings.settings.ragSettings.chunkSize.required"
)
}
]}>
<InputNumber
style={{ width: "100%" }}
placeholder="Chunk Overlap"
placeholder={t(
"ollamaSettings.settings.ragSettings.chunkSize.placeholder"
)}
/>
</Form.Item>
<Form.Item
name="chunkOverlap"
label={t("ollamaSettings.settings.ragSettings.chunkOverlap.label")}
rules={[
{
required: true,
message: t(
"ollamaSettings.settings.ragSettings.chunkOverlap.required"
)
}
]}>
<InputNumber
style={{ width: "100%" }}
placeholder={t(
"ollamaSettings.settings.ragSettings.chunkOverlap.placeholder"
)}
/>
</Form.Item>
@@ -254,10 +287,33 @@ export const SettingsBody = () => {
</div>
<div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
<h2 className="text-md mb-4 font-semibold dark:text-white">
Speech Recognition Language
{t("generalSettings.settings.language.label")}{" "}
</h2>
<Select
placeholder="Select Language"
placeholder={t("generalSettings.settings.language.placeholder")}
showSearch
options={supportLanguage}
value={locale}
filterOption={(input, option) =>
option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
onChange={(value) => {
changeLocale(value)
}}
style={{
width: "100%"
}}
/>
</div>
<div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
<h2 className="text-md mb-4 font-semibold dark:text-white">
{t("generalSettings.settings.speechRecognitionLang.label")}{" "}
</h2>
<Select
placeholder={t(
"generalSettings.settings.speechRecognitionLang.placeholder"
)}
allowClear
showSearch
options={SUPPORTED_LANGUAGES}
@@ -275,20 +331,22 @@ export const SettingsBody = () => {
/>
</div>
<div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
<h2 className="text-md mb-4 font-semibold dark:text-white">Theme</h2>
<h2 className="text-md mb-4 font-semibold dark:text-white">
{t("generalSettings.settings.darkMode.label")}{" "}
</h2>
{mode === "dark" ? (
<button
onClick={toggleDarkMode}
className="select-none inline-flex w-full rounded-lg border border-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
className="select-none inline-flex text-center w-full rounded-lg border border-gray-900 py-3 px-6 justify-center font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
<SunIcon className="h-4 w-4 mr-2" />
Light
{t("generalSettings.settings.darkMode.options.light")}
</button>
) : (
<button
onClick={toggleDarkMode}
className="select-none inline-flex w-full rounded-lg border border-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
className="select-none inline-flex text-center w-full rounded-lg border border-gray-900 py-3 px-6 justify-center font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
<MoonIcon className="h-4 w-4 mr-2" />
Dark
{t("generalSettings.settings.darkMode.options.dark")}
</button>
)}
</div>

6
src/components/Sidepanel/Settings/header.tsx
View File

@@ -1,16 +1,18 @@
import { ChevronLeft } from "lucide-react"
import { useTranslation } from "react-i18next"
import { Link } from "react-router-dom"
import logoImage from "~/assets/icon.png"
export const SidepanelSettingsHeader = () => {
const { t } = useTranslation("common")
return (
<div className="flex px-3 justify-start gap-3 bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700 py-4 items-center">
<Link to="/">
<ChevronLeft className="h-5 w-5 text-gray-500 dark:text-gray-400" />
</Link>
<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("pageAssist")} />
<span className="ml-1 text-sm ">{t("pageAssist")}</span>
</div>
</div>
)