Add new translations and update existing ones

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