Mintplex-Labs · timothycarambat · May 27, 2025 · May 25, 2025 · May 25, 2025 · May 27, 2025
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx
@@ -19,6 +19,7 @@ import ConfluenceLogo from "@/media/dataConnectors/confluence.png";
 import DrupalWikiLogo from "@/media/dataConnectors/drupalwiki.png";
 import ObsidianLogo from "@/media/dataConnectors/obsidian.png";
 import { toPercentString } from "@/utils/numbers";
+import { useTranslation } from "react-i18next";
 import pluralize from "pluralize";
 import useTextSize from "@/hooks/useTextSize";
 
@@ -44,6 +45,7 @@ export default function Citations({ sources = [] }) {
   if (sources.length === 0) return null;
   const [open, setOpen] = useState(false);
   const [selectedSource, setSelectedSource] = useState(null);
+  const { t } = useTranslation();
   const { textSizeClass } = useTextSize();
 
   return (
@@ -54,7 +56,9 @@ export default function Citations({ sources = [] }) {
           open ? "pb-2" : ""
         } hover:text-white/75 hover:light:text-black/75 transition-all duration-300`}
       >
-        {open ? "Hide Citations" : "Show Citations"}
+        {open
+          ? t("chat_window.hide_citations")
+          : t("chat_window.show_citations")}
         <CaretRight
           weight="bold"
           size={14}

diff --git a/...ts/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx b/...ts/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx
@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useRef } from "react";
 import { Trash, DotsThreeVertical, TreeView } from "@phosphor-icons/react";
+import { useTranslation } from "react-i18next";
 
 function ActionMenu({ chatId, forkThread, isEditing, role }) {
+  const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const menuRef = useRef(null);
 
@@ -40,8 +42,8 @@ function ActionMenu({ chatId, forkThread, isEditing, role }) {
         onClick={toggleMenu}
         className="border-none text-[var(--theme-sidebar-footer-icon-fill)] hover:text-[var(--theme-sidebar-footer-icon-fill)] transition-colors duration-200"
         data-tooltip-id="action-menu"
-        data-tooltip-content="More actions"
-        aria-label="More actions"
+        data-tooltip-content={t("chat_window.more_actions")}
+        aria-label={t("chat_window.more_actions")}
       >
         <DotsThreeVertical size={24} weight="bold" />
       </button>
@@ -52,14 +54,14 @@ function ActionMenu({ chatId, forkThread, isEditing, role }) {
             className="border-none rounded-t-lg flex items-center text-white gap-x-2 hover:bg-theme-action-menu-item-hover py-1.5 px-2 transition-colors duration-200 w-full text-left"
           >
             <TreeView size={18} />
-            <span className="text-sm">Fork</span>
+            <span className="text-sm">{t("chat_window.fork")}</span>
           </button>
           <button
             onClick={handleDelete}
             className="border-none flex rounded-b-lg items-center text-white gap-x-2 hover:bg-theme-action-menu-item-hover py-1.5 px-2 transition-colors duration-200 w-full text-left"
           >
             <Trash size={18} />
-            <span className="text-sm">Delete</span>
+            <span className="text-sm">{t("chat_window.delete")}</span>
           </button>
         </div>
       )}

diff --git a/...s/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx b/...s/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
@@ -1,6 +1,7 @@
 import { Pencil } from "@phosphor-icons/react";
 import { useState, useEffect, useRef } from "react";
 import Appearance from "@/models/appearance";
+import { useTranslation } from "react-i18next";
 
 const EDIT_EVENT = "toggle-message-edit";
 
@@ -30,6 +31,7 @@ export function useEditMessage({ chatId, role }) {
 }
 
 export function EditMessageAction({ chatId = null, role, isEditing }) {
+  const { t } = useTranslation();
   function handleEditClick() {
     window.dispatchEvent(
       new CustomEvent(EDIT_EVENT, { detail: { chatId, role } })
@@ -46,11 +48,13 @@ export function EditMessageAction({ chatId = null, role, isEditing }) {
       <button
         onClick={handleEditClick}
         data-tooltip-id="edit-input-text"
-        data-tooltip-content={`Edit ${
-          role === "user" ? "Prompt" : "Response"
+        data-tooltip-content={`${
+          role === "user"
+            ? t("chat_window.edit_prompt")
+            : t("chat_window.edit_response")
         } `}
         className="border-none text-zinc-300"
-        aria-label={`Edit ${role === "user" ? "Prompt" : "Response"}`}
+        aria-label={`Edit ${role === "user" ? t("chat_window.edit_prompt") : t("chat_window.edit_response")}`}
       >
         <Pencil
           color="var(--theme-sidebar-footer-icon-fill)"
@@ -71,6 +75,7 @@ export function EditMessageForm({
   saveChanges,
 }) {
   const formRef = useRef(null);
+  const { t } = useTranslation();
   function handleSaveMessage(e) {
     e.preventDefault();
     const form = new FormData(e.target);
@@ -109,14 +114,14 @@ export function EditMessageForm({
           type="submit"
           className="border-none px-2 py-1 bg-gray-200 text-gray-700 font-medium rounded-md mr-2 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
         >
-          Save & Submit
+          {t("chat_window.save_submit")}
         </button>
         <button
           type="button"
           className="border-none px-2 py-1 bg-historical-msg-system text-white font-medium rounded-md hover:bg-historical-msg-user/90 light:hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
           onClick={cancelEdits}
         >
-          Cancel
+          {t("chat_window.cancel")}
         </button>
       </div>
     </form>

diff --git a/.../WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/asyncTts.jsx b/.../WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/asyncTts.jsx
@@ -2,12 +2,14 @@ import { useEffect, useState, useRef } from "react";
 import { SpeakerHigh, PauseCircle, CircleNotch } from "@phosphor-icons/react";
 import Workspace from "@/models/workspace";
 import showToast from "@/utils/toast";
+import { useTranslation } from "react-i18next";
 
 export default function AsyncTTSMessage({ slug, chatId }) {
   const playerRef = useRef(null);
   const [speaking, setSpeaking] = useState(false);
   const [loading, setLoading] = useState(false);
   const [audioSrc, setAudioSrc] = useState(null);
+  const { t } = useTranslation();
 
   function speakMessage() {
     if (speaking) {
@@ -59,7 +61,9 @@ export default function AsyncTTSMessage({ slug, chatId }) {
         data-auto-play-chat-id={chatId}
         data-tooltip-id="message-to-speech"
         data-tooltip-content={
-          speaking ? "Pause TTS speech of message" : "TTS Speak message"
+          speaking
+            ? t("pause_tts_speech_message")
+            : t("chat_window.tts_speak_message")
         }
         className="border-none text-[var(--theme-sidebar-footer-icon-fill)]"
         aria-label={speaking ? "Pause speech" : "Speak message"}

diff --git a/...rc/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx b/...rc/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
@@ -5,6 +5,7 @@ import Workspace from "@/models/workspace";
 import { EditMessageAction } from "./EditMessage";
 import RenderMetrics from "./RenderMetrics";
 import ActionMenu from "./ActionMenu";
+import { useTranslation } from "react-i18next";
 
 const Actions = ({
   message,
@@ -19,6 +20,7 @@ const Actions = ({
   metrics = {},
   alignmentCls = "",
 }) => {
+  const { t } = useTranslation();
   const [selectedFeedback, setSelectedFeedback] = useState(feedbackScore);
   const handleFeedback = async (newFeedback) => {
     const updatedFeedback =
@@ -49,7 +51,7 @@ const Actions = ({
               isSelected={selectedFeedback === true}
               handleFeedback={() => handleFeedback(true)}
               tooltipId="feedback-button"
-              tooltipContent="Good response"
+              tooltipContent={t("chat_window.good_response")}
               IconComponent={ThumbsUp}
             />
           )}
@@ -94,16 +96,17 @@ function FeedbackButton({
 
 function CopyMessage({ message }) {
   const { copied, copyText } = useCopyText();
+  const { t } = useTranslation();
 
   return (
     <>
       <div className="mt-3 relative">
         <button
           onClick={() => copyText(message)}
           data-tooltip-id="copy-assistant-text"
-          data-tooltip-content="Copy"
+          data-tooltip-content={t("chat_window.copy")}
           className="text-zinc-300"
-          aria-label="Copy"
+          aria-label={t("chat_window.copy")}
         >
           {copied ? (
             <Check
@@ -126,14 +129,15 @@ function CopyMessage({ message }) {
 
 function RegenerateMessage({ regenerateMessage, chatId }) {
   if (!chatId) return null;
+  const { t } = useTranslation();
   return (
     <div className="mt-3 relative">
       <button
         onClick={() => regenerateMessage(chatId)}
         data-tooltip-id="regenerate-assistant-text"
-        data-tooltip-content="Regenerate response"
+        data-tooltip-content={t("chat_window.regenerate_response")}
         className="border-none text-zinc-300"
-        aria-label="Regenerate"
+        aria-label={t("chat_window.regenerate")}
       >
         <ArrowsClockwise
           color="var(--theme-sidebar-footer-icon-fill)"

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AgentMenu/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AgentMenu/index.jsx
@@ -51,6 +51,7 @@ export function AvailableAgents({
   const formRef = useRef(null);
   const agentSessionActive = useIsAgentSessionActive();
   const [searchParams] = useSearchParams();
+  const { t } = useTranslation();
 
   /*
    * @checklist-item
@@ -98,7 +99,8 @@ export function AvailableAgents({
             >
               <div className="w-full flex-col text-left flex pointer-events-none">
                 <div className="text-theme-text-primary text-sm">
-                  <b>@agent</b> - the default agent for this workspace.
+                  <b>{t("chat_window.at_agent")}</b>
+                  {t("chat_window.default_agent_description")}
                 </div>
                 <div className="flex flex-wrap gap-2 mt-2">
                   <AbilityTag text="rag-search" />
@@ -118,7 +120,7 @@ export function AvailableAgents({
             >
               <div className="w-full flex-col text-center flex pointer-events-none">
                 <div className="text-theme-text-secondary text-xs italic">
-                  custom agents are coming soon!
+                  {t("chat_window.custom_agents_coming_soon")}
                 </div>
               </div>
             </button>

diff --git a/...nts/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/AddPresetModal.jsx b/...nts/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/AddPresetModal.jsx
@@ -2,9 +2,11 @@ import { useState } from "react";
 import { X } from "@phosphor-icons/react";
 import ModalWrapper from "@/components/ModalWrapper";
 import { CMD_REGEX } from ".";
+import { useTranslation } from "react-i18next";
 
 export default function AddPresetModal({ isOpen, onClose, onSave }) {
   const [command, setCommand] = useState("");
+  const { t } = useTranslation();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -29,7 +31,7 @@ export default function AddPresetModal({ isOpen, onClose, onSave }) {
         <div className="relative p-6 border-b rounded-t border-theme-modal-border">
           <div className="w-full flex gap-x-2 items-center">
             <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
-              Add New Preset
+              {t("chat_window.add_new_preset")}
             </h3>
           </div>
           <button
@@ -52,15 +54,15 @@ export default function AddPresetModal({ isOpen, onClose, onSave }) {
                     htmlFor="command"
                     className="block mb-2 text-sm font-medium text-white"
                   >
-                    Command
+                    {t("chat_window.command")}
                   </label>
                   <div className="flex items-center">
                     <span className="text-white text-sm mr-2 font-bold">/</span>
                     <input
                       name="command"
                       type="text"
                       id="command"
-                      placeholder="your-command"
+                      placeholder={t("chat_window.your_command")}
                       value={command}
                       onChange={handleCommandChange}
                       maxLength={25}
@@ -81,7 +83,7 @@ export default function AddPresetModal({ isOpen, onClose, onSave }) {
                     name="prompt"
                     id="prompt"
                     autoComplete="off"
-                    placeholder="This is the content that will be injected in front of your prompt."
+                    placeholder={t("chat_window.placeholder_prompt")}
                     required={true}
                     className="border-none bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   ></textarea>
@@ -91,13 +93,13 @@ export default function AddPresetModal({ isOpen, onClose, onSave }) {
                     htmlFor="description"
                     className="block mb-2 text-sm font-medium text-white"
                   >
-                    Description
+                    {t("chat_window.description")}
                   </label>
                   <input
                     type="text"
                     name="description"
                     id="description"
-                    placeholder="Responds with a poem about LLMs."
+                    placeholder={t("chat_window.placeholder_description")}
                     maxLength={80}
                     autoComplete="off"
                     required={true}
@@ -112,13 +114,13 @@ export default function AddPresetModal({ isOpen, onClose, onSave }) {
                 type="button"
                 className="transition-all duration-300 bg-transparent text-white hover:opacity-60 px-4 py-2 rounded-lg text-sm"
               >
-                Cancel
+                {t("chat_window.cancel")}
               </button>
               <button
                 type="submit"
                 className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
               >
-                Save
+                {t("chat_window.save")}
               </button>
             </div>
           </form>

diff --git a/...c/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx b/...c/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx
@@ -7,9 +7,11 @@ import System from "@/models/system";
 import { DotsThree, Plus } from "@phosphor-icons/react";
 import showToast from "@/utils/toast";
 import { useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 export const CMD_REGEX = new RegExp(/[^a-zA-Z0-9_-]/g);
 export default function SlashPresets({ setShowing, sendCommand, promptRef }) {
+  const { t } = useTranslation();
   const isActiveAgentSession = useIsAgentSessionActive();
   const {
     isOpen: isAddModalOpen,
@@ -130,7 +132,7 @@ export default function SlashPresets({ setShowing, sendCommand, promptRef }) {
         <div className="w-full flex-row flex pointer-events-none items-center gap-2">
           <Plus size={24} weight="fill" className="text-theme-text-primary" />
           <div className="text-theme-text-primary text-sm font-medium">
-            Add New Preset
+            {t("chat_window.add_new_preset")}
           </div>
         </div>
       </button>

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx
@@ -1,6 +1,8 @@
 import { useIsAgentSessionActive } from "@/utils/chat/agent";
+import { useTranslation } from "react-i18next";
 
 export default function ResetCommand({ setShowing, sendCommand }) {
+  const { t } = useTranslation();
   const isActiveAgentSession = useIsAgentSessionActive();
   if (isActiveAgentSession) return null; // cannot reset during active agent chat
 
@@ -13,9 +15,11 @@ export default function ResetCommand({ setShowing, sendCommand }) {
       className="border-none w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-col justify-start"
     >
       <div className="w-full flex-col text-left flex pointer-events-none">
-        <div className="text-white text-sm font-bold">/reset</div>
+        <div className="text-white text-sm font-bold">
+          {t("chat_window.slash_reset")}
+        </div>
         <div className="text-white text-opacity-60 text-sm">
-          Clear your chat history and begin a new chat
+          {t("chat_window.preset_reset_description")}
         </div>
       </div>
     </button>