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

Add new translations and update existing ones

Browse Source
This commit is contained in:
n4ze3m 2024-03-24 14:38:37 +05:30
parent 9a2adbd859
commit d9ce1e2d2c
8 changed files with 116 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/assets/locale/en/common.json Normal file
View File

@ -0,0 +1,45 @@
{
"save": "Save",
"saved": "Saved",
"cancel": "Cancel",
"share": {
"tooltip": {
"share": "Share"
},
"modal": {
"title": "Share link to Chat"
},
"form": {
"defaultValue": {
"name": "Anonymous",
"title": "Untitled chat"
},
"title": {
"label": "Chat title",
"placeholder": "Enter Chat title",
"required": "Chat title is required"
},
"name": {
"label": "Your name",
"placeholder": "Enter your name",
"required": "Your name is required"
},
"btn": {
"save": "Generate Link",
"saving": "Generating Link..."
}
},
"notification": {
"successGenerate": "Link copied to clipboard",
"failGenerate": "Failed to generate link"
}
},
"copyToClipboard": "Copy to clipboard",
"webSearch": "Searching the web",
"regenerate": "Regenerate",
"edit": "Edit",
"saveAndSubmit": "Save & Submit",
"editMessage": {
"placeholder": "Type a message..."
}
}

15
src/components/Common/Markdown.tsx
View File

@ -8,17 +8,11 @@ import "property-information"
import React from "react"
import { Tooltip } from "antd"
import { CheckIcon, ClipboardIcon } from "lucide-react"
import { useTranslation } from "react-i18next"
export default function Markdown({ message }: { message: string }) {
const [isBtnPressed, setIsBtnPressed] = React.useState(false)
React.useEffect(() => {
if (isBtnPressed) {
setTimeout(() => {
setIsBtnPressed(false)
}, 4000)
}
}, [isBtnPressed])
const { t } = useTranslation("common")
return (
<React.Fragment>
@ -37,11 +31,14 @@ export default function Markdown({ message }: { message: string }) {
</span>
<div className="flex items-center">
<Tooltip title="Copy to clipboard">
<Tooltip title={t("copyToClipboard")}>
<button
onClick={() => {
navigator.clipboard.writeText(children[0] as string)
setIsBtnPressed(true)
setTimeout(() => {
setIsBtnPressed(false)
}, 4000)
}}
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-200 hover:bg-gray-700 hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-100">
{!isBtnPressed ? (

12
src/components/Common/Playground/EditMessageForm.tsx
View File

@ -1,5 +1,6 @@
import { useForm } from "@mantine/form"
import React from "react"
import { useTranslation } from "react-i18next"
import useDynamicTextareaSize from "~/hooks/useDynamicTextareaSize"
type Props = {
@ -12,6 +13,7 @@ type Props = {
export const EditMessageForm = (props: Props) => {
const [isComposing, setIsComposing] = React.useState(false)
const textareaRef = React.useRef<HTMLTextAreaElement>(null)
const { t } = useTranslation("common")
const form = useForm({
initialValues: {
@ -40,21 +42,21 @@ export const EditMessageForm = (props: Props) => {
rows={1}
style={{ minHeight: "60px" }}
tabIndex={0}
placeholder="Type a message..."
placeholder={t("editMessage.placeholder")}
ref={textareaRef}
className="w-full bg-transparent focus-within:outline-none focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
/>
<div className="flex justify-center space-x-2 mt-2">
<button
aria-label="Save"
aria-label={t("save")}
className="bg-white dark:bg-black px-2.5 py-2 rounded-md text-gray-700 dark:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900">
{props.isBot ? "Save" : "Save & Submit"}
{props.isBot ? t("save") : t("saveAndSubmit")}
</button>
<button
onClick={props.onClose}
aria-label="Cancel"
aria-label={t("cancel")}
className="border dark:border-gray-600 px-2.5 py-2 rounded-md text-gray-700 dark:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900">
Cancel
{t("cancel")}
</button>
</div>
</form>

12
src/components/Common/Playground/Message.tsx
View File

@ -4,6 +4,7 @@ import { Image, Tooltip } from "antd"
import { WebSearch } from "./WebSearch"
import { CheckIcon, ClipboardIcon, Pen, RotateCcw } from "lucide-react"
import { EditMessageForm } from "./EditMessageForm"
import { useTranslation } from "react-i18next"
type Props = {
message: string
@ -28,6 +29,8 @@ export const PlaygroundMessage = (props: Props) => {
const [isBtnPressed, setIsBtnPressed] = React.useState(false)
const [editMode, setEditMode] = React.useState(false)
const { t } = useTranslation("common")
return (
<div className="group w-full text-gray-800 dark:text-gray-100">
<div className="text-base md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
@ -112,7 +115,8 @@ export const PlaygroundMessage = (props: Props) => {
{props.isBot && (
<>
{!props.hideCopy && (
<Tooltip title="Copy to clipboard">
<Tooltip title={t("copyToClipboard")}
>
<button
onClick={() => {
navigator.clipboard.writeText(props.message)
@ -133,7 +137,8 @@ export const PlaygroundMessage = (props: Props) => {
{!props.hideEditAndRegenerate &&
props.currentMessageIndex === props.totalMessages - 1 && (
<Tooltip title="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">
@ -144,7 +149,8 @@ export const PlaygroundMessage = (props: Props) => {
</>
)}
{!props.hideEditAndRegenerate && (
<Tooltip title="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">

6
src/components/Common/Playground/WebSearch.tsx
View File

@ -1,12 +1,16 @@
import { Globe } from "lucide-react"
import { useTranslation } from "react-i18next"
export const WebSearch = () => {
const {t} = useTranslation('common')
return (
<div className="gradient-border mt-4 flex w-56 items-center gap-4 rounded-lg bg-neutral-100 p-1ccc text-slate-900 dark:bg-neutral-800 dark:text-slate-50">
<div className="rounded p-1">
<Globe className="w-6 h-6" />
</div>
<div className="text-sm font-semibold">Searching the web</div>
<div className="text-sm font-semibold">
{t('webSearch')}
</div>
</div>
)
}

8
src/components/Common/SaveButton.tsx
View File

@ -1,5 +1,6 @@
import { useState } from "react"
import { CheckIcon } from "lucide-react"
import { useTranslation } from "react-i18next"
type Props = {
onClick?: () => void
disabled?: boolean
@ -13,11 +14,12 @@ export const SaveButton = ({
onClick,
disabled,
className,
text = "Save",
textOnSave = "Saved",
text = "save",
textOnSave = "saved",
btnType = "button"
}: Props) => {
const [clickedSave, setClickedSave] = useState(false)
const { t } = useTranslation("common")
return (
<button
type={btnType}
@ -33,7 +35,7 @@ export const SaveButton = ({
disabled={disabled}
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 dark:bg-white dark:text-gray-800 disabled:opacity-50 ${className}`}>
{clickedSave ? <CheckIcon className="w-4 h-4 mr-2" /> : null}
{clickedSave ? textOnSave : text}
{clickedSave ? t(textOnSave) : t(text)}
</button>
)
}

49
src/components/Common/ShareBtn.tsx
View File

@ -8,6 +8,7 @@ import { useMutation } from "@tanstack/react-query"
import { getPageShareUrl } from "~/services/ollama"
import { cleanUrl } from "~/libs/clean-url"
import { getUserId, saveWebshare } from "~/libs/db"
import { useTranslation } from "react-i18next"
type Props = {
messages: Message[]
@ -75,6 +76,7 @@ export const PlaygroundMessage = (
}
export const ShareBtn: React.FC<Props> = ({ messages }) => {
const { t } = useTranslation("common")
const [open, setOpen] = useState(false)
const [form] = Form.useForm()
const name = Form.useWatch("name", form)
@ -104,7 +106,7 @@ export const ShareBtn: React.FC<Props> = ({ messages }) => {
})
})
if (!res.ok) throw new Error("Failed to create share link")
if (!res.ok) throw new Error(t("share.notification.failGenerate"))
const data = await res.json()
@ -121,18 +123,23 @@ export const ShareBtn: React.FC<Props> = ({ messages }) => {
onSuccess: async (data) => {
const url = data.url
navigator.clipboard.writeText(url)
message.success("Link copied to clipboard")
await saveWebshare({ title: data.title, url, api_url: data.api_url, share_id: data.share_id })
message.success(t("share.notification.successGenerate"))
await saveWebshare({
title: data.title,
url,
api_url: data.api_url,
share_id: data.share_id
})
setOpen(false)
},
onError: (error) => {
message.error(error?.message || "Failed to create share link")
message.error(error?.message || t("share.notification.failGenerate"))
}
})
return (
<>
<Tooltip title="Share">
<Tooltip title={t("share.tooltip.share")}>
<button
onClick={() => setOpen(true)}
className="!text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
@ -141,7 +148,7 @@ export const ShareBtn: React.FC<Props> = ({ messages }) => {
</Tooltip>
<Modal
title="Share link to Chat"
title={t("share.modal.title")}
open={open}
footer={null}
width={600}
@ -151,20 +158,30 @@ export const ShareBtn: React.FC<Props> = ({ messages }) => {
layout="vertical"
onFinish={createShareLink}
initialValues={{
title: "Untitled Chat",
name: "Anonymous"
title: t("share.form.defaultValue.title"),
name: t("share.form.defaultValue.name")
}}>
<Form.Item
name="title"
label="Chat Title"
rules={[{ required: true, message: "Please enter chat title" }]}>
<Input size="large" placeholder="Enter chat title" />
label={t("share.form.title.label")}
rules={[
{ required: true, message: t("share.form.title.required") }
]}>
<Input
size="large"
placeholder={t("share.form.title.placeholder")}
/>
</Form.Item>
<Form.Item
name="name"
label="Your Name"
rules={[{ required: true, message: "Please enter your name" }]}>
<Input size="large" placeholder="Enter your name" />
label={t("share.form.name.label")}
rules={[
{ required: true, message: t("share.form.name.required") }
]}>
<Input
size="large"
placeholder={t("share.form.name.placeholder")}
/>
</Form.Item>
<Form.Item>
@ -182,7 +199,9 @@ export const ShareBtn: React.FC<Props> = ({ messages }) => {
<button
type="submit"
className="inline-flex items-center rounded-md border border-transparent bg-black px-2 py-2.5 text-md font-medium leading-4 text-white shadow-sm dark:bg-white dark:text-gray-800 disabled:opacity-50 ">
{isPending ? "Generating link..." : "Generate Link"}
{isPending
? t("share.form.btn.saving")
: t("share.form.btn.save")}
</button>
</div>
</Form.Item>

6
src/i18n/lang/en.ts
View File

@ -1,6 +1,10 @@
import option from "@/assets/locale/en/option.json";
import optionPlayground from "@/assets/locale/en/option-playground.json";
import common from "@/assets/locale/en/common.json";
export const en = {
option
option,
optionPlayground,
common
}