Merge branch 'main' into refactor/llm-handler

2025-11-29 08:33:20 +00:00 · 2025-06-06 17:36:31 +05:30
parent e5b1a71659 31baf181a3
commit dd9d18208d
28 changed files with 547 additions and 489 deletions
--- a/frontend/src/About.tsx
+++ b/frontend/src/About.tsx
@@ -1,99 +0,0 @@
-//TODO - Add hyperlinks to text
-//TODO - Styling
-import DocsGPT3 from './assets/cute_docsgpt3.svg';
-
-export default function About() {
-  return (
-    <div className="mx-5 grid min-h-screen md:mx-36">
-      <article className="place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-4 rounded-3xl bg-gray-100 p-6 text-jet dark:bg-gun-metal dark:text-bright-gray lg:p-6 xl:p-10">
-        <div className="flex items-center">
-          <p className="mr-2 text-3xl">About DocsGPT</p>
-          <img className="h14 mb-2" src={DocsGPT3} alt="DocsGPT" />
-        </div>
-        <p className="mt-4">
-          Find the information in your documentation through AI-powered
-          <a
-            className="text-blue-500"
-            href="https://github.com/arc53/DocsGPT"
-            target="_blank"
-            rel="noreferrer"
-          >
-            {' '}
-            open-source{' '}
-          </a>
-          chatbot. Powered by GPT-3, Faiss and LangChain.
-        </p>
-
-        <div>
-          <p>
-            If you want to add your own documentation, please follow the
-            instruction below:
-          </p>
-          <p className="ml-2 mt-4">
-            1. Navigate to{' '}
-            <span className="bg-gray-200 italic dark:bg-outer-space">
-              {' '}
-              /application
-            </span>{' '}
-            folder
-          </p>
-          <p className="ml-2 mt-4">
-            2. Install dependencies from{' '}
-            <span className="bg-gray-200 italic dark:bg-outer-space">
-              pip install -r requirements.txt
-            </span>
-          </p>
-          <p className="ml-2 mt-4">
-            3. Prepare a{' '}
-            <span className="bg-gray-200 italic dark:bg-outer-space">.env</span>{' '}
-            file. Copy{' '}
-            <span className="bg-gray-200 italic dark:bg-outer-space">
-              .env_sample
-            </span>{' '}
-            and create{' '}
-            <span className="bg-gray-200 italic dark:bg-outer-space">.env</span>{' '}
-            with your OpenAI API token
-          </p>
-          <p className="ml-2 mt-4">
-            4. Run the app with{' '}
-            <span className="bg-gray-200 italic dark:bg-outer-space">
-              python app.py
-            </span>
-          </p>
-        </div>
-
-        <p>
-          Currently It uses{' '}
-          <span className="font-medium text-blue-950">DocsGPT</span>{' '}
-          documentation, so it will respond to information relevant to{' '}
-          <span className="font-medium text-blue-950">DocsGPT</span>. If you
-          want to train it on different documentation - please follow
-          <a
-            className="text-blue-500"
-            href="https://github.com/arc53/DocsGPT/wiki/How-to-train-on-other-documentation"
-            target="_blank"
-            rel="noreferrer"
-          >
-            {' '}
-            this guide
-          </a>
-          .
-        </p>
-
-        <p className="mt-4 text-left">
-          If you want to launch it on your own server - follow
-          <a
-            className="text-blue-500"
-            href="https://github.com/arc53/DocsGPT/wiki/Hosting-the-app"
-            target="_blank"
-            rel="noreferrer"
-          >
-            {' '}
-            this guide
-          </a>
-          .
-        </p>
-      </article>
-    </div>
-  );
-}
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,7 +3,9 @@ import './locale/i18n';
 import { useState } from 'react';
 import { Outlet, Route, Routes } from 'react-router-dom';

-import About from './About';
+import Agents from './agents';
+import SharedAgentGate from './agents/SharedAgentGate';
+import ActionButtons from './components/ActionButtons';
 import Spinner from './components/Spinner';
 import Conversation from './conversation/Conversation';
 import { SharedConversation } from './conversation/SharedConversation';
@@ -12,8 +14,6 @@ import useTokenAuth from './hooks/useTokenAuth';
 import Navigation from './Navigation';
 import PageNotFound from './PageNotFound';
 import Setting from './settings';
-import Agents from './agents';
-import ActionButtons from './components/ActionButtons';

 function AuthWrapper({ children }: { children: React.ReactNode }) {
  const { isAuthLoading } = useTokenAuth();
@@ -29,8 +29,8 @@ function AuthWrapper({ children }: { children: React.ReactNode }) {
 }

 function MainLayout() {
-  const { isMobile } = useMediaQuery();
-  const [navOpen, setNavOpen] = useState(!isMobile);
+  const { isMobile, isTablet } = useMediaQuery();
+  const [navOpen, setNavOpen] = useState(!(isMobile || isTablet));

  return (
    <div className="relative h-screen overflow-hidden dark:bg-raisin-black">
@@ -38,7 +38,7 @@ function MainLayout() {
      <ActionButtons showNewChat={true} showShare={true} />
      <div
        className={`h-[calc(100dvh-64px)] overflow-auto lg:h-screen ${
-          !isMobile
+          !(isMobile || isTablet)
            ? `ml-0 ${!navOpen ? 'lg:mx-auto' : 'lg:ml-72'}`
            : 'ml-0 lg:ml-16'
        }`}
@@ -64,11 +64,11 @@ export default function App() {
          }
        >
          <Route index element={<Conversation />} />
-          <Route path="/about" element={<About />} />
          <Route path="/settings/*" element={<Setting />} />
          <Route path="/agents/*" element={<Agents />} />
        </Route>
        <Route path="/share/:identifier" element={<SharedConversation />} />
+        <Route path="/shared/agent/:agentId" element={<SharedAgentGate />} />
        <Route path="/*" element={<PageNotFound />} />
      </Routes>
    </div>
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -72,7 +72,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
  const sharedAgents = useSelector(selectSharedAgents);
  const selectedAgent = useSelector(selectSelectedAgent);

-  const { isMobile } = useMediaQuery();
+  const { isMobile, isTablet } = useMediaQuery();
  const [isDarkTheme] = useDarkTheme();
  const { showTokenModal, handleTokenSubmit } = useTokenAuth();

@@ -163,7 +163,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
  const handleAgentClick = (agent: Agent) => {
    resetConversation();
    dispatch(setSelectedAgent(agent));
-    if (isMobile) setNavOpen(!navOpen);
+    if (isMobile || isTablet) setNavOpen(!navOpen);
    navigate('/');
  };

@@ -267,8 +267,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
  }

  useEffect(() => {
-    setNavOpen(!isMobile);
-  }, [isMobile]);
+    setNavOpen(!(isMobile || isTablet));
+  }, [isMobile, isTablet]);

  useDefaultDocument();
  return (
@@ -348,7 +348,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
        <NavLink
          to={'/'}
          onClick={() => {
-            if (isMobile) {
+            if (isMobile || isTablet) {
              setNavOpen(!navOpen);
            }
            resetConversation();
@@ -411,7 +411,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                        </p>
                      </div>
                      <div
-                        className={`${isMobile ? 'flex' : 'invisible flex group-hover:visible'} items-center px-3`}
+                        className={`${isMobile || isTablet ? 'flex' : 'invisible flex group-hover:visible'} items-center px-3`}
                      >
                        <button
                          className="rounded-full hover:opacity-75"
@@ -433,6 +433,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                  className="mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
                  onClick={() => {
                    dispatch(setSelectedAgent(null));
+                    if (isMobile || isTablet) {
+                      setNavOpen(false);
+                    }
                    navigate('/agents');
                  }}
                >
@@ -444,7 +447,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                    />
                  </div>
                  <p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-sm leading-6 text-eerie-black dark:text-bright-gray">
-                    Manage Agents
+                    {t('manageAgents')}
                  </p>
                </div>
              </div>
@@ -452,7 +455,13 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
          ) : (
            <div
              className="mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
-              onClick={() => navigate('/agents')}
+              onClick={() => {
+                if (isMobile || isTablet) {
+                  setNavOpen(false);
+                }
+                dispatch(setSelectedAgent(null));
+                navigate('/agents');
+              }}
            >
              <div className="flex w-6 justify-center">
                <img
@@ -462,7 +471,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                />
              </div>
              <p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-sm leading-6 text-eerie-black dark:text-bright-gray">
-                Manage Agents
+                {t('manageAgents')}
              </p>
            </div>
          )}
@@ -498,8 +507,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
          <div className="flex flex-col gap-2 border-b-[1px] py-2 dark:border-b-purple-taupe">
            <NavLink
              onClick={() => {
-                if (isMobile) {
-                  setNavOpen(!navOpen);
+                if (isMobile || isTablet) {
+                  setNavOpen(false);
                }
                resetConversation();
              }}
--- a/frontend/src/agents/SharedAgent.tsx
+++ b/frontend/src/agents/SharedAgent.tsx
@@ -21,6 +21,7 @@ import {
 import { useDarkTheme } from '../hooks';
 import { selectToken, setSelectedAgent } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
+import SharedAgentCard from './SharedAgentCard';
 import { Agent } from './types';

 export default function SharedAgent() {
@@ -193,65 +194,3 @@ export default function SharedAgent() {
    </div>
  );
 }
-
-function SharedAgentCard({ agent }: { agent: Agent }) {
-  return (
-    <div className="flex w-full max-w-[720px] flex-col rounded-3xl border border-dark-gray p-6 shadow-sm dark:border-grey sm:w-fit sm:min-w-[480px]">
-      <div className="flex items-center gap-3">
-        <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full p-1">
-          <img src={Robot} className="h-full w-full object-contain" />
-        </div>
-        <div className="flex max-h-[92px] w-[80%] flex-col gap-px">
-          <h2 className="text-base font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-lg">
-            {agent.name}
-          </h2>
-          <p className="overflow-y-auto text-wrap break-all text-xs text-[#71717A] dark:text-[#949494] sm:text-sm">
-            {agent.description}
-          </p>
-        </div>
-      </div>
-      <div className="mt-4 flex items-center gap-8">
-        {agent.shared_metadata?.shared_by && (
-          <p className="text-xs font-light text-[#212121] dark:text-[#E0E0E0] sm:text-sm">
-            by {agent.shared_metadata.shared_by}
-          </p>
-        )}
-        {agent.shared_metadata?.shared_at && (
-          <p className="text-xs font-light text-[#71717A] dark:text-[#949494] sm:text-sm">
-            Shared on{' '}
-            {new Date(agent.shared_metadata.shared_at).toLocaleString('en-US', {
-              month: 'long',
-              day: 'numeric',
-              year: 'numeric',
-              hour: '2-digit',
-              minute: '2-digit',
-              hour12: true,
-            })}
-          </p>
-        )}
-      </div>
-      {agent.tools.length > 0 && (
-        <div className="mt-8">
-          <p className="text-sm font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-base">
-            Connected Tools
-          </p>
-          <div className="mt-2 flex flex-wrap gap-2">
-            {agent.tools.map((tool, index) => (
-              <span
-                key={index}
-                className="flex items-center gap-1 rounded-full bg-bright-gray px-3 py-1 text-xs font-light text-[#212121] dark:bg-dark-charcoal dark:text-[#E0E0E0]"
-              >
-                <img
-                  src={`/toolIcons/tool_${tool}.svg`}
-                  alt={`${tool} icon`}
-                  className="h-3 w-3"
-                />{' '}
-                {tool}
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
--- a/frontend/src/agents/SharedAgentCard.tsx
+++ b/frontend/src/agents/SharedAgentCard.tsx
@@ -0,0 +1,69 @@
+import Robot from '../assets/robot.svg';
+import { Agent } from './types';
+
+export default function SharedAgentCard({ agent }: { agent: Agent }) {
+  return (
+    <div className="flex w-full max-w-[720px] flex-col rounded-3xl border border-dark-gray p-6 shadow-sm dark:border-grey sm:w-fit sm:min-w-[480px]">
+      <div className="flex items-center gap-3">
+        <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full p-1">
+          <img src={Robot} className="h-full w-full object-contain" />
+        </div>
+        <div className="flex max-h-[92px] w-[80%] flex-col gap-px">
+          <h2 className="text-base font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-lg">
+            {agent.name}
+          </h2>
+          <p className="overflow-y-auto text-wrap break-all text-xs text-[#71717A] dark:text-[#949494] sm:text-sm">
+            {agent.description}
+          </p>
+        </div>
+      </div>
+      {agent.shared_metadata && (
+        <div className="mt-4 flex items-center gap-8">
+          {agent.shared_metadata?.shared_by && (
+            <p className="text-xs font-light text-[#212121] dark:text-[#E0E0E0] sm:text-sm">
+              by {agent.shared_metadata.shared_by}
+            </p>
+          )}
+          {agent.shared_metadata?.shared_at && (
+            <p className="text-xs font-light text-[#71717A] dark:text-[#949494] sm:text-sm">
+              Shared on{' '}
+              {new Date(agent.shared_metadata.shared_at).toLocaleString(
+                'en-US',
+                {
+                  month: 'long',
+                  day: 'numeric',
+                  year: 'numeric',
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  hour12: true,
+                },
+              )}
+            </p>
+          )}
+        </div>
+      )}
+      {agent.tool_details && agent.tool_details.length > 0 && (
+        <div className="mt-8">
+          <p className="text-sm font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-base">
+            Connected Tools
+          </p>
+          <div className="mt-2 flex flex-wrap gap-2">
+            {agent.tool_details.map((tool, index) => (
+              <span
+                key={index}
+                className="flex items-center gap-1 rounded-full bg-bright-gray px-3 py-1 text-xs font-light text-[#212121] dark:bg-dark-charcoal dark:text-[#E0E0E0]"
+              >
+                <img
+                  src={`/toolIcons/tool_${tool.name}.svg`}
+                  alt={`${tool.name} icon`}
+                  className="h-3 w-3"
+                />{' '}
+                {tool.name}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/agents/SharedAgentGate.tsx
+++ b/frontend/src/agents/SharedAgentGate.tsx
@@ -0,0 +1,7 @@
+import { Navigate, useParams } from 'react-router-dom';
+
+export default function SharedAgentGate() {
+  const { agentId } = useParams();
+
+  return <Navigate to={`/agents/shared/${agentId}`} replace />;
+}
--- a/frontend/src/agents/index.tsx
+++ b/frontend/src/agents/index.tsx
@@ -286,7 +286,10 @@ function AgentCard({

  const handleHideSharedAgent = async () => {
    try {
-      const response = await userService.hideSharedAgent(agent.id ?? '', token);
+      const response = await userService.removeSharedAgent(
+        agent.id ?? '',
+        token,
+      );
      if (!response.ok) throw new Error('Failed to hide shared agent');
      const updatedAgents = agents.filter(
        (prevAgent) => prevAgent.id !== agent.id,
--- a/frontend/src/agents/types/index.ts
+++ b/frontend/src/agents/types/index.ts
@@ -1,3 +1,9 @@
+export type ToolSummary = {
+  id: string;
+  name: string;
+  display_name: string;
+};
+
 export type Agent = {
  id?: string;
  name: string;
@@ -8,6 +14,7 @@ export type Agent = {
  retriever: string;
  prompt_id: string;
  tools: string[];
+  tool_details?: ToolSummary[];
  agent_type: string;
  status: string;
  key?: string;
--- a/frontend/src/api/endpoints.ts
+++ b/frontend/src/api/endpoints.ts
@@ -18,7 +18,7 @@ const endpoints = {
    SHARED_AGENT: (id: string) => `/api/shared_agent?token=${id}`,
    SHARED_AGENTS: '/api/shared_agents',
    SHARE_AGENT: `/api/share_agent`,
-    HIDE_SHARED_AGENT: (id: string) => `/api/hide_shared_agent?id=${id}`,
+    REMOVE_SHARED_AGENT: (id: string) => `/api/remove_shared_agent?id=${id}`,
    AGENT_WEBHOOK: (id: string) => `/api/agent_webhook?id=${id}`,
    PROMPTS: '/api/get_prompts',
    CREATE_PROMPT: '/api/create_prompt',
--- a/frontend/src/api/services/userService.ts
+++ b/frontend/src/api/services/userService.ts
@@ -41,8 +41,8 @@ const userService = {
    apiClient.get(endpoints.USER.SHARED_AGENTS, token),
  shareAgent: (data: any, token: string | null): Promise<any> =>
    apiClient.put(endpoints.USER.SHARE_AGENT, data, token),
-  hideSharedAgent: (id: string, token: string | null): Promise<any> =>
-    apiClient.delete(endpoints.USER.HIDE_SHARED_AGENT(id), token),
+  removeSharedAgent: (id: string, token: string | null): Promise<any> =>
+    apiClient.delete(endpoints.USER.REMOVE_SHARED_AGENT(id), token),
  getAgentWebhook: (id: string, token: string | null): Promise<any> =>
    apiClient.get(endpoints.USER.AGENT_WEBHOOK(id), token),
  getPrompts: (token: string | null): Promise<any> =>
--- a/frontend/src/components/SourcesPopup.tsx
+++ b/frontend/src/components/SourcesPopup.tsx
@@ -207,7 +207,7 @@ export default function SourcesPopup({
            className="inline-flex items-center gap-2 text-base font-medium text-violets-are-blue"
            onClick={onClose}
          >
-            Go to Documents
+            {t('settings.documents.goToDocuments')}
            <img src={RedirectIcon} alt="Redirect" className="h-3 w-3" />
          </a>
        </div>
@@ -217,7 +217,7 @@ export default function SourcesPopup({
            onClick={handleUploadClick}
            className="w-auto rounded-full border border-violets-are-blue px-4 py-2 text-[14px] font-medium text-violets-are-blue transition-colors duration-200 hover:bg-violets-are-blue hover:text-white"
          >
-            Upload new
+            {t('settings.documents.uploadNew')}
          </button>
        </div>
      </div>
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -3,6 +3,7 @@ import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';

+import SharedAgentCard from '../agents/SharedAgentCard';
 import DragFileUpload from '../assets/DragFileUpload.svg';
 import MessageInput from '../components/MessageInput';
 import { useMediaQuery } from '../hooks';
@@ -193,6 +194,14 @@ export default function Conversation() {
        handleFeedback={handleFeedback}
        queries={queries}
        status={status}
+        showHeroOnEmpty={selectedAgent ? false : true}
+        headerContent={
+          selectedAgent ? (
+            <div className="flex w-full items-center justify-center py-4">
+              <SharedAgentCard agent={selectedAgent} />
+            </div>
+          ) : undefined
+        }
      />

      <div className="z-3 flex h-auto w-full max-w-[1300px] flex-col items-end self-center rounded-2xl bg-opacity-0 py-1 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
--- a/frontend/src/hooks/index.ts
+++ b/frontend/src/hooks/index.ts
@@ -35,8 +35,8 @@ export function useOutsideAlerter<T extends HTMLElement>(

 export function useMediaQuery() {
  const mobileQuery = '(max-width: 768px)';
-  const tabletQuery = '(max-width: 1024px)'; // Tablet breakpoint at 1024px
-  const desktopQuery = '(min-width: 1025px)'; // Desktop starts after tablet
+  const tabletQuery = '(max-width: 1023px)';
+  const desktopQuery = '(min-width: 1024px)';
  const [isMobile, setIsMobile] = useState(false);
  const [isTablet, setIsTablet] = useState(false);
  const [isDesktop, setIsDesktop] = useState(false);
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -77,7 +77,9 @@
      "backToAll": "Back to all documents",
      "chunks": "Chunks",
      "noChunks": "No chunks found",
-      "noChunksAlt": "No chunks found"
+      "noChunksAlt": "No chunks found",
+      "goToDocuments": "Go to Documents",
+      "uploadNew": "Upload new"
    },
    "apiKeys": {
      "label": "Chatbots",
@@ -138,7 +140,7 @@
      "addAction": "Add action",
      "noActionsFound": "No actions found",
      "url": "URL",
-      "urlPlaceholder": "Enter url",
+      "urlPlaceholder": "Enter URL",
      "method": "Method",
      "description": "Description",
      "descriptionPlaceholder": "Enter description",
@@ -146,15 +148,20 @@
      "queryParameters": "Query Parameters",
      "body": "Body",
      "deleteActionWarning": "Are you sure you want to delete the action \"{{name}}\"?",
-      "backToTools": "Back to Tools",
+      "backToAllTools": "Back to all tools",
      "save": "Save",
-      "name": "Name",
-      "type": "Type",
+      "fieldName": "Field Name",
+      "fieldType": "Field Type",
      "filledByLLM": "Filled by LLM",
+      "fieldDescription": "Field description",
      "value": "Value",
      "addProperty": "Add property",
-      "propertyName": "Property name",
-      "noProperties": "No properties"
+      "propertyName": "New property key",
+      "add": "Add",
+      "cancel": "Cancel",
+      "addNew": "Add New",
+      "name": "Name",
+      "type": "Type"
    }
  },
  "modals": {
@@ -239,6 +246,18 @@
      "promptText": "Prompt Text",
      "save": "Save",
      "nameExists": "Name already exists"
+    },
+    "chunk": {
+      "add": "Add Chunk",
+      "edit": "Edit Chunk",
+      "title": "Title",
+      "enterTitle": "Enter title",
+      "bodyText": "Body text",
+      "promptText": "Prompt Text",
+      "update": "Update",
+      "close": "Close",
+      "delete": "Delete",
+      "deleteConfirmation": "Are you sure you want to delete this chunk?"
    }
  },
  "sharedConv": {
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -11,6 +11,7 @@
  "help": "Asistencia",
  "emailUs": "Envíanos un correo",
  "documentation": "Documentación",
+  "manageAgents": "Administrar Agentes",
  "demo": [
    {
      "header": "Aprende sobre DocsGPT",
@@ -48,7 +49,8 @@
      "medium": "Medio",
      "high": "Alto",
      "unlimited": "Ilimitado",
-      "default": "Predeterminado"
+      "default": "Predeterminado",
+      "addNew": "Añadir Nuevo"
    },
    "documents": {
      "title": "Esta tabla contiene todos los documentos que están disponibles para ti y los que has subido",
@@ -75,7 +77,9 @@
      "backToAll": "Volver a todos los documentos",
      "chunks": "Fragmentos",
      "noChunks": "No se encontraron fragmentos",
-      "noChunksAlt": "No se encontraron fragmentos"
+      "noChunksAlt": "No se encontraron fragmentos",
+      "goToDocuments": "Ir a Documentos",
+      "uploadNew": "Subir nuevo"
    },
    "apiKeys": {
      "label": "Chatbots",
@@ -144,15 +148,20 @@
      "queryParameters": "Parámetros de Consulta",
      "body": "Cuerpo",
      "deleteActionWarning": "¿Estás seguro de que deseas eliminar la acción \"{{name}}\"?",
-      "backToTools": "Volver a Herramientas",
      "save": "Guardar",
      "name": "Nombre",
      "type": "Tipo",
      "filledByLLM": "Completado por LLM",
      "value": "Valor",
      "addProperty": "Agregar propiedad",
-      "propertyName": "Nombre de propiedad",
-      "noProperties": "Sin propiedades"
+      "propertyName": "Nueva clave de propiedad",
+      "backToAllTools": "Volver a todas las herramientas",
+      "fieldName": "Nombre del campo",
+      "fieldType": "Tipo de campo",
+      "fieldDescription": "Descripción del campo",
+      "add": "Añadir",
+      "cancel": "Cancelar",
+      "addNew": "Añadir Nuevo"
    }
  },
  "modals": {
@@ -237,6 +246,18 @@
      "promptText": "Texto del Prompt",
      "save": "Guardar",
      "nameExists": "El nombre ya existe"
+    },
+    "chunk": {
+      "add": "Agregar Fragmento",
+      "edit": "Editar Fragmento",
+      "title": "Título",
+      "enterTitle": "Ingresar título",
+      "bodyText": "Texto del cuerpo",
+      "promptText": "Texto del prompt",
+      "update": "Actualizar",
+      "close": "Cerrar",
+      "delete": "Eliminar",
+      "deleteConfirmation": "¿Estás seguro de que deseas eliminar este fragmento?"
    }
  },
  "sharedConv": {
@@ -270,9 +291,9 @@
    },
    "sources": {
      "title": "Fuentes",
-      "text": "Texto fuente",
      "link": "Enlace fuente",
-      "view_more": "Ver {{count}} más fuentes"
+      "view_more": "Ver {{count}} más fuentes",
+      "text": "Elegir tus fuentes"
    },
    "attachments": {
      "attach": "Adjuntar",
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -11,6 +11,7 @@
  "help": "ヘルプ",
  "emailUs": "メールを送る",
  "documentation": "ドキュメント",
+  "manageAgents": "エージェント管理",
  "demo": [
    {
      "header": "DocsGPTについて学ぶ",
@@ -76,7 +77,9 @@
      "backToAll": "すべてのドキュメントに戻る",
      "chunks": "チャンク",
      "noChunks": "チャンクが見つかりません",
-      "noChunksAlt": "チャンクが見つかりません"
+      "noChunksAlt": "チャンクが見つかりません",
+      "goToDocuments": "ドキュメントへ移動",
+      "uploadNew": "新規アップロード"
    },
    "apiKeys": {
      "label": "チャットボット",
@@ -101,7 +104,6 @@
      },
      "messages": "メッセージ",
      "tokenUsage": "トークン使用量",
-      "feedback": "フィードバック",
      "filterPlaceholder": "フィルター",
      "none": "なし",
      "positiveFeedback": "肯定的なフィードバック",
@@ -146,15 +148,20 @@
      "queryParameters": "クエリパラメータ",
      "body": "ボディ",
      "deleteActionWarning": "アクション \"{{name}}\" を削除してもよろしいですか？",
-      "backToTools": "ツールに戻る",
+      "backToAllTools": "すべてのツールに戻る",
      "save": "保存",
-      "name": "名前",
-      "type": "タイプ",
+      "fieldName": "フィールド名",
+      "fieldType": "フィールドタイプ",
      "filledByLLM": "LLMによる入力",
+      "fieldDescription": "フィールドの説明",
      "value": "値",
      "addProperty": "プロパティを追加",
-      "propertyName": "プロパティ名",
-      "noProperties": "プロパティなし"
+      "propertyName": "新しいプロパティキー",
+      "add": "追加",
+      "cancel": "キャンセル",
+      "addNew": "新規追加",
+      "name": "名前",
+      "type": "タイプ"
    }
  },
  "modals": {
@@ -239,6 +246,18 @@
      "promptText": "プロンプトテキスト",
      "save": "保存",
      "nameExists": "名前が既に存在します"
+    },
+    "chunk": {
+      "add": "チャンクを追加",
+      "edit": "チャンクを編集",
+      "title": "タイトル",
+      "enterTitle": "タイトルを入力",
+      "bodyText": "本文",
+      "promptText": "プロンプトテキスト",
+      "update": "更新",
+      "close": "閉じる",
+      "delete": "削除",
+      "deleteConfirmation": "このチャンクを削除してもよろしいですか？"
    }
  },
  "sharedConv": {
--- a/frontend/src/locale/ru.json
+++ b/frontend/src/locale/ru.json
@@ -11,6 +11,7 @@
  "help": "Помощь",
  "emailUs": "Напишите нам",
  "documentation": "Документация",
+  "manageAgents": "Управление агентами",
  "demo": [
    {
      "header": "Узнайте о DocsGPT",
@@ -76,7 +77,9 @@
      "backToAll": "Вернуться ко всем документам",
      "chunks": "Фрагменты",
      "noChunks": "Фрагменты не найдены",
-      "noChunksAlt": "Фрагменты не найдены"
+      "noChunksAlt": "Фрагменты не найдены",
+      "goToDocuments": "Перейти к документам",
+      "uploadNew": "Загрузить новый"
    },
    "apiKeys": {
      "label": "API ключи",
@@ -137,23 +140,28 @@
      "addAction": "Добавить действие",
      "noActionsFound": "Действия не найдены",
      "url": "URL",
-      "urlPlaceholder": "Введите url",
+      "urlPlaceholder": "Введите URL",
      "method": "Метод",
      "description": "Описание",
      "descriptionPlaceholder": "Введите описание",
      "headers": "Заголовки",
      "queryParameters": "Параметры запроса",
-      "body": "Тело",
+      "body": "Тело запроса",
      "deleteActionWarning": "Вы уверены, что хотите удалить действие \"{{name}}\"?",
-      "backToTools": "Вернуться к инструментам",
+      "backToAllTools": "Вернуться ко всем инструментам",
      "save": "Сохранить",
-      "name": "Имя",
-      "type": "Тип",
-      "filledByLLM": "Заполнено LLM",
+      "fieldName": "Имя поля",
+      "fieldType": "Тип поля",
+      "filledByLLM": "Заполняется LLM",
+      "fieldDescription": "Описание поля",
      "value": "Значение",
      "addProperty": "Добавить свойство",
-      "propertyName": "Имя свойства",
-      "noProperties": "Нет свойств"
+      "propertyName": "Новый ключ свойства",
+      "add": "Добавить",
+      "cancel": "Отмена",
+      "addNew": "Добавить новое",
+      "name": "Имя",
+      "type": "Тип"
    }
  },
  "modals": {
@@ -238,6 +246,18 @@
      "promptText": "Текст подсказки",
      "save": "Сохранить",
      "nameExists": "Название уже существует"
+    },
+    "chunk": {
+      "add": "Добавить фрагмент",
+      "edit": "Редактировать фрагмент",
+      "title": "Заголовок",
+      "enterTitle": "Введите заголовок",
+      "bodyText": "Текст",
+      "promptText": "Текст подсказки",
+      "update": "Обновить",
+      "close": "Закрыть",
+      "delete": "Удалить",
+      "deleteConfirmation": "Вы уверены, что хотите удалить этот фрагмент?"
    }
  },
  "sharedConv": {
@@ -271,7 +291,7 @@
    },
    "sources": {
      "title": "Источники",
-      "text": "Текст источника",
+      "text": "Выберите ваши источники",
      "link": "Ссылка на источник",
      "view_more": "ещё {{count}} источников"
    },
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -11,6 +11,7 @@
  "help": "幫助",
  "emailUs": "給我們發電郵",
  "documentation": "文件",
+  "manageAgents": "管理代理",
  "demo": [
    {
      "header": "了解 DocsGPT",
@@ -76,7 +77,9 @@
      "backToAll": "返回所有文件",
      "chunks": "文本塊",
      "noChunks": "未找到文本塊",
-      "noChunksAlt": "未找到文本塊"
+      "noChunksAlt": "未找到文本塊",
+      "goToDocuments": "前往文件",
+      "uploadNew": "上傳新文件"
    },
    "apiKeys": {
      "label": "聊天機器人",
@@ -145,15 +148,20 @@
      "queryParameters": "查詢參數",
      "body": "主體",
      "deleteActionWarning": "您確定要刪除操作 \"{{name}}\" 嗎？",
-      "backToTools": "返回工具",
+      "backToAllTools": "返回所有工具",
      "save": "儲存",
-      "name": "名稱",
-      "type": "類型",
-      "filledByLLM": "由LLM填寫",
+      "fieldName": "欄位名稱",
+      "fieldType": "欄位類型",
+      "filledByLLM": "由LLM填入",
+      "fieldDescription": "欄位描述",
      "value": "值",
      "addProperty": "新增屬性",
-      "propertyName": "屬性名稱",
-      "noProperties": "無屬性"
+      "propertyName": "新屬性鍵",
+      "add": "新增",
+      "cancel": "取消",
+      "addNew": "新增",
+      "name": "名稱",
+      "type": "類型"
    }
  },
  "modals": {
@@ -238,6 +246,18 @@
      "promptText": "提示文字",
      "save": "儲存",
      "nameExists": "名稱已存在"
+    },
+    "chunk": {
+      "add": "新增區塊",
+      "edit": "編輯區塊",
+      "title": "標題",
+      "enterTitle": "輸入標題",
+      "bodyText": "內文",
+      "promptText": "提示文字",
+      "update": "更新",
+      "close": "關閉",
+      "delete": "刪除",
+      "deleteConfirmation": "您確定要刪除此區塊嗎？"
    }
  },
  "sharedConv": {
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -11,6 +11,7 @@
  "help": "帮助",
  "emailUs": "给我们发邮件",
  "documentation": "文档",
+  "manageAgents": "管理代理",
  "demo": [
    {
      "header": "了解 DocsGPT",
@@ -72,7 +73,13 @@
      },
      "actions": "操作",
      "view": "查看",
-      "deleteWarning": "您确定要删除 \"{{name}}\" 吗？"
+      "deleteWarning": "您确定要删除 \"{{name}}\" 吗？",
+      "backToAll": "返回所有文档",
+      "chunks": "文本块",
+      "noChunks": "未找到文本块",
+      "noChunksAlt": "未找到文本块",
+      "goToDocuments": "前往文档",
+      "uploadNew": "上传新文档"
    },
    "apiKeys": {
      "label": "聊天机器人",
@@ -141,15 +148,20 @@
      "queryParameters": "查询参数",
      "body": "请求体",
      "deleteActionWarning": "您确定要删除操作 \"{{name}}\" 吗？",
-      "backToTools": "返回工具",
+      "backToAllTools": "返回所有工具",
      "save": "保存",
-      "name": "名称",
-      "type": "类型",
+      "fieldName": "字段名称",
+      "fieldType": "字段类型",
      "filledByLLM": "由LLM填充",
+      "fieldDescription": "字段描述",
      "value": "值",
      "addProperty": "添加属性",
-      "propertyName": "属性名称",
-      "noProperties": "无属性"
+      "propertyName": "新属性键",
+      "add": "添加",
+      "cancel": "取消",
+      "addNew": "添加新的",
+      "name": "名称",
+      "type": "类型"
    }
  },
  "modals": {
@@ -234,6 +246,18 @@
      "promptText": "提示文本",
      "save": "保存",
      "nameExists": "名称已存在"
+    },
+    "chunk": {
+      "add": "添加块",
+      "edit": "编辑块",
+      "title": "标题",
+      "enterTitle": "输入标题",
+      "bodyText": "正文",
+      "promptText": "提示文本",
+      "update": "更新",
+      "close": "关闭",
+      "delete": "删除",
+      "deleteConfirmation": "您确定要删除此块吗？"
    }
  },
  "sharedConv": {
--- a/frontend/src/modals/ChunkModal.tsx
+++ b/frontend/src/modals/ChunkModal.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';

-import Exit from '../assets/exit.svg';
 import Input from '../components/Input';
 import { ActiveState } from '../models/misc';
 import ConfirmationModal from './ConfirmationModal';
+import WrapperModal from './WrapperModal';

 export default function ChunkModal({
  type,
@@ -22,6 +23,7 @@ export default function ChunkModal({
  originalText?: string;
  handleDelete?: () => void;
 }) {
+  const { t } = useTranslation();
  const [title, setTitle] = React.useState('');
  const [chunkText, setChunkText] = React.useState('');
  const [deleteModal, setDeleteModal] = React.useState<ActiveState>('INACTIVE');
@@ -30,157 +32,105 @@ export default function ChunkModal({
    setTitle(originalTitle || '');
    setChunkText(originalText || '');
  }, [originalTitle, originalText]);
-  if (type === 'ADD') {
-    return (
-      <div
-        className={`${
-          modalState === 'ACTIVE' ? 'visible' : 'hidden'
-        } fixed left-0 top-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha`}
-      >
-        <article className="flex w-11/12 flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-[#26272E] sm:w-[620px]">
-          <div className="relative">
-            <button
-              className="absolute right-4 top-3 m-2 w-3"
-              onClick={() => {
-                setModalState('INACTIVE');
-              }}
-            >
-              <img className="filter dark:invert" src={Exit} />
-            </button>
-            <div className="p-6">
-              <h2 className="px-3 text-xl font-semibold text-jet dark:text-bright-gray">
-                Add Chunk
-              </h2>
-              <div className="relative mt-6 px-3">
-                <span className="absolute -top-2 left-5 z-10 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
-                  Title
-                </span>
-                <Input
-                  type="text"
-                  value={title}
-                  onChange={(e) => setTitle(e.target.value)}
-                  borderVariant="thin"
-                  placeholder={'Enter title'}
-                  labelBgClassName="bg-white dark:bg-charleston-green-2"
-                ></Input>
-              </div>
-              <div className="relative mt-6 px-3">
-                <div className="rounded-lg border border-silver pb-1 pt-3 dark:border-silver/40">
-                  <span className="absolute -top-2 left-5 rounded-lg bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
-                    Body text
-                  </span>
-                  <textarea
-                    id="chunk-body-text"
-                    className="h-60 w-full px-3 outline-none dark:bg-transparent dark:text-white"
-                    value={chunkText}
-                    onChange={(e) => setChunkText(e.target.value)}
-                    aria-label="Prompt Text"
-                  ></textarea>
-                </div>
-              </div>
-              <div className="mt-8 flex flex-row-reverse gap-1 px-3">
-                <button
-                  onClick={() => {
-                    handleSubmit(title, chunkText);
-                    setModalState('INACTIVE');
-                  }}
-                  className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-violets-are-blue"
-                >
-                  Add
-                </button>
-                <button
-                  onClick={() => {
-                    setModalState('INACTIVE');
-                  }}
-                  className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
-                >
-                  Close
-                </button>
-              </div>
-            </div>
-          </div>
-        </article>
+
+  if (modalState !== 'ACTIVE') return null;
+
+  const content = (
+    <div>
+      <h2 className="px-3 text-xl font-semibold text-jet dark:text-bright-gray">
+        {t(`modals.chunk.${type === 'ADD' ? 'add' : 'edit'}`)}
+      </h2>
+      <div className="relative mt-6 px-3">
+        <Input
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          borderVariant="thin"
+          placeholder={t('modals.chunk.title')}
+          labelBgClassName="bg-white dark:bg-charleston-green-2"
+        />
      </div>
-    );
-  } else {
-    return (
-      <div
-        className={`${
-          modalState === 'ACTIVE' ? 'visible' : 'hidden'
-        } fixed left-0 top-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha`}
-      >
-        <article className="flex w-11/12 flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-[#26272E] sm:w-[620px]">
-          <div className="relative">
+      <div className="relative mt-6 px-3">
+        <div className="rounded-lg border border-silver pb-1 pt-3 dark:border-silver/40">
+          <span className="absolute -top-2 left-5 rounded-lg bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
+            {t('modals.chunk.bodyText')}
+          </span>
+          <textarea
+            id="chunk-body-text"
+            className="h-60 max-h-60 w-full resize-none px-3 outline-none dark:bg-transparent dark:text-white"
+            value={chunkText}
+            onChange={(e) => setChunkText(e.target.value)}
+            aria-label={t('modals.chunk.promptText')}
+          ></textarea>
+        </div>
+      </div>
+
+      {type === 'ADD' ? (
+        <div className="mt-8 flex flex-row-reverse gap-1 px-3">
+          <button
+            onClick={() => {
+              handleSubmit(title, chunkText);
+              setModalState('INACTIVE');
+            }}
+            className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-violets-are-blue"
+          >
+            {t('modals.chunk.add')}
+          </button>
+          <button
+            onClick={() => {
+              setModalState('INACTIVE');
+            }}
+            className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
+          >
+            {t('modals.chunk.close')}
+          </button>
+        </div>
+      ) : (
+        <div className="mt-8 flex w-full items-center justify-between px-3">
+          <button
+            className="text-nowrap rounded-full border border-solid border-red-500 px-5 py-2 text-sm text-red-500 hover:bg-red-500 hover:text-white"
+            onClick={() => {
+              setDeleteModal('ACTIVE');
+            }}
+          >
+            {t('modals.chunk.delete')}
+          </button>
+          <div className="flex flex-row-reverse gap-1">
+            <button
+              onClick={() => {
+                handleSubmit(title, chunkText);
+                setModalState('INACTIVE');
+              }}
+              className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-violets-are-blue"
+            >
+              {t('modals.chunk.update')}
+            </button>
            <button
-              className="absolute right-4 top-3 m-2 w-3"
              onClick={() => {
                setModalState('INACTIVE');
              }}
+              className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
            >
-              <img className="filter dark:invert" src={Exit} />
+              {t('modals.chunk.close')}
            </button>
-            <div className="p-6">
-              <h2 className="px-3 text-xl font-semibold text-jet dark:text-bright-gray">
-                Edit Chunk
-              </h2>
-              <div className="relative mt-6 px-3">
-                <Input
-                  type="text"
-                  value={title}
-                  onChange={(e) => setTitle(e.target.value)}
-                  borderVariant="thin"
-                  placeholder={'Enter title'}
-                  labelBgClassName="bg-white dark:bg-charleston-green-2"
-                ></Input>
-              </div>
-              <div className="relative mt-6 px-3">
-                <div className="rounded-lg border border-silver pb-1 pt-3 dark:border-silver/40">
-                  <span className="absolute -top-2 left-5 rounded-lg bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
-                    Body text
-                  </span>
-                  <textarea
-                    id="chunk-body-text"
-                    className="h-60 w-full px-3 outline-none dark:bg-transparent dark:text-white"
-                    value={chunkText}
-                    onChange={(e) => setChunkText(e.target.value)}
-                    aria-label="Prompt Text"
-                  ></textarea>
-                </div>
-              </div>
-              <div className="mt-8 flex w-full items-center justify-between px-3">
-                <button
-                  className="text-nowrap rounded-full border border-solid border-red-500 px-5 py-2 text-sm text-red-500 hover:bg-red-500 hover:text-white"
-                  onClick={() => {
-                    setDeleteModal('ACTIVE');
-                  }}
-                >
-                  Delete
-                </button>
-                <div className="flex flex-row-reverse gap-1">
-                  <button
-                    onClick={() => {
-                      handleSubmit(title, chunkText);
-                      setModalState('INACTIVE');
-                    }}
-                    className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-violets-are-blue"
-                  >
-                    Update
-                  </button>
-                  <button
-                    onClick={() => {
-                      setModalState('INACTIVE');
-                    }}
-                    className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
-                  >
-                    Close
-                  </button>
-                </div>
-              </div>
-            </div>
          </div>
-        </article>
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <>
+      <WrapperModal
+        close={() => setModalState('INACTIVE')}
+        className="sm:w-[620px]"
+      >
+        {content}
+      </WrapperModal>
+
+      {type === 'EDIT' && (
        <ConfirmationModal
-          message="Are you sure you want to delete this chunk?"
+          message={t('modals.chunk.deleteConfirmation')}
          modalState={deleteModal}
          setModalState={setDeleteModal}
          handleSubmit={
@@ -190,9 +140,9 @@ export default function ChunkModal({
                  /* no-op */
                }
          }
-          submitLabel="Delete"
+          submitLabel={t('modals.chunk.delete')}
        />
-      </div>
-    );
-  }
+      )}
+    </>
+  );
 }
--- a/frontend/src/preferences/PromptsModal.tsx
+++ b/frontend/src/preferences/PromptsModal.tsx
@@ -51,7 +51,7 @@ function AddPrompt({
        </label>
        <textarea
          id="new-prompt-content"
-          className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
+          className="h-56 w-full resize-none rounded-lg border-2 border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
          value={newPromptContent}
          onChange={(e) => setNewPromptContent(e.target.value)}
          aria-label="Prompt Text"
@@ -123,7 +123,7 @@ function EditPrompt({
          </label>
          <textarea
            id="edit-prompt-content"
-            className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
+            className="h-56 w-full resize-none rounded-lg border-2 border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
            value={editPromptContent}
            onChange={(e) => setEditPromptContent(e.target.value)}
            aria-label="Prompt Text"
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -450,7 +450,7 @@ export default function Documents({
                                options={getActionOptions(index, document)}
                                anchorRef={getMenuRef(docId)}
                                position="bottom-left"
-                                offset={{ x: 48, y: -24 }}
+                                offset={{ x: 48, y: 0 }}
                                className="z-50"
                              />
                            </div>
--- a/frontend/src/settings/ToolConfig.tsx
+++ b/frontend/src/settings/ToolConfig.tsx
@@ -169,13 +169,13 @@ export default function ToolConfig({
          >
            <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
          </button>
-          <p className="mt-px">Back to all tools</p>
+          <p className="mt-px">{t('settings.tools.backToAllTools')}</p>
        </div>
        <button
          className="text-nowrap rounded-full bg-purple-30 px-3 py-2 text-xs text-white hover:bg-violets-are-blue sm:px-4 sm:py-2"
          onClick={handleSaveChanges}
        >
-          Save
+          {t('settings.tools.save')}
        </button>
      </div>
      {/* Custom name section */}
@@ -282,7 +282,7 @@ export default function ToolConfig({
                    <Input
                      type="text"
                      className="w-full"
-                      placeholder="Enter description"
+                      placeholder={t('settings.tools.descriptionPlaceholder')}
                      value={action.description}
                      onChange={(e) => {
                        setTool({
@@ -305,11 +305,11 @@ export default function ToolConfig({
                    <table className="table-default">
                      <thead>
                        <tr>
-                          <th>Field Name</th>
-                          <th>Field Type</th>
-                          <th>Filled by LLM</th>
-                          <th>FIeld description</th>
-                          <th>Value</th>
+                          <th>{t('settings.tools.fieldName')}</th>
+                          <th>{t('settings.tools.fieldType')}</th>
+                          <th>{t('settings.tools.filledByLLM')}</th>
+                          <th>{t('settings.tools.fieldDescription')}</th>
+                          <th>{t('settings.tools.value')}</th>
                        </tr>
                      </thead>
                      <tbody>
@@ -619,7 +619,7 @@ function APIToolConfig({
              <div className="mt-4 px-5 py-2">
                <div className="relative w-full">
                  <span className="absolute -top-2 left-5 z-10 bg-white px-2 text-xs text-gray-4000 dark:bg-raisin-black dark:text-silver">
-                    Method
+                    {t('settings.tools.method')}
                  </span>
                  <Dropdown
                    options={['GET', 'POST', 'PUT', 'DELETE']}
@@ -984,7 +984,7 @@ function APIActionTable({
                    handleAddProperty();
                  }
                }}
-                placeholder="New property key"
+                placeholder={t('settings.tools.propertyName')}
                className="flex w-full min-w-[130.5px] items-start rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40"
              />
            </td>
@@ -993,15 +993,13 @@ function APIActionTable({
                onClick={handleAddProperty}
                className="mr-1 rounded-full bg-purple-30 px-5 py-[4px] text-sm text-white hover:bg-violets-are-blue"
              >
-                {' '}
-                Add{' '}
+                {t('settings.tools.add')}
              </button>
              <button
                onClick={handleAddPropertyCancel}
                className="rounded-full border border-solid border-red-500 px-5 py-[4px] text-sm text-red-500 hover:bg-red-500 hover:text-white"
              >
-                {' '}
-                Cancel{' '}
+                {t('settings.tools.cancel')}
              </button>
            </td>
            <td
@@ -1020,7 +1018,7 @@ function APIActionTable({
                onClick={() => handleAddPropertyStart(section)}
                className="flex items-start text-nowrap rounded-full border border-solid border-violets-are-blue px-5 py-[4px] text-sm text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
              >
-                Add New Field
+                {t('settings.tools.addNew')}
              </button>
            </td>
            <td