Add new translations and update existing ones

src/assets/locale/en/common.json

@@ -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..."
+    }
+}

src/components/Common/Markdown.tsx

@@ -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)
-
+  const { t } = useTranslation("common")
-  React.useEffect(() => {
-    if (isBtnPressed) {
-      setTimeout(() => {
-        setIsBtnPressed(false)
-      }, 4000)
-    }
-  }, [isBtnPressed])
 
   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 ? (

src/components/Common/Playground/EditMessageForm.tsx

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

src/components/Common/Playground/Message.tsx

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

src/components/Common/Playground/WebSearch.tsx

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

src/components/Common/SaveButton.tsx

@@ -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",
+  text = "save",
-  textOnSave = "Saved",
+  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>
   )
 }

src/components/Common/ShareBtn.tsx

@@ -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")
+      message.success(t("share.notification.successGenerate"))
-      await saveWebshare({ title: data.title, url, api_url: data.api_url, share_id: data.share_id })
+      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",
+            title: t("share.form.defaultValue.title"),
-            name: "Anonymous"
+            name: t("share.form.defaultValue.name")
           }}>
           <Form.Item
             name="title"
-            label="Chat Title"
+            label={t("share.form.title.label")}
-            rules={[{ required: true, message: "Please enter chat title" }]}>
+            rules={[
-            <Input size="large" placeholder="Enter chat title" />
+              { 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"
+            label={t("share.form.name.label")}
-            rules={[{ required: true, message: "Please enter your name" }]}>
+            rules={[
-            <Input size="large" placeholder="Enter your name" />
+              { 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>

src/i18n/lang/en.ts

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