(feat:sources) renamed docs,fe

frontend/src/components/Chunks.tsx

@@ -77,7 +77,7 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
   );
 };
 
-interface DocumentChunksProps {
+interface ChunksProps {
   documentId: string;
   documentName?: string;
   handleGoBack: () => void;
@@ -85,7 +85,7 @@ interface DocumentChunksProps {
   renderFileSearch?: () => React.ReactNode;
 }
 
-const DocumentChunks: React.FC<DocumentChunksProps> = ({
+const Chunks: React.FC<ChunksProps> = ({
   documentId,
   documentName,
   handleGoBack,
@@ -406,13 +406,13 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                       ? `${(totalChunks / 1000000).toFixed(2)}M`
                       : totalChunks > 999
                         ? `${(totalChunks / 1000).toFixed(2)}K`
-                        : totalChunks} {t('settings.documents.chunks')}
+                        : totalChunks} {t('settings.sources.chunks')}
                   </div>
                   <div className="h-full w-[1px] bg-[#D1D9E0] dark:bg-[#6A6A6A]"></div>
                   <div className="flex-1 h-full">
                     <input
                       type="text"
-                      placeholder={t('settings.documents.searchPlaceholder')}
+                      placeholder={t('settings.sources.searchPlaceholder')}
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
                       className="w-full h-full px-3 py-2 bg-transparent border-none outline-none font-normal text-[13.56px] leading-[100%] dark:text-[#E0E0E0]"
@@ -421,14 +421,14 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                 </div>
                 <button
                   className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] w-full sm:w-auto min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white shrink-0"
-                  title={t('settings.documents.addNew')}
+                  title={t('settings.sources.addNew')}
                   onClick={() => {
                     setIsAddingChunk(true);
                     setEditingTitle('');
                     setEditingText('');
                   }}
                 >
-                  {t('settings.documents.addNew')}
+                  {t('settings.sources.addNew')}
                 </button>
               </div>
               {loading ? (
@@ -441,10 +441,10 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                     <div className="col-span-full w-full min-h-[50vh] flex flex-col items-center justify-center text-center text-gray-500 dark:text-gray-400">
                       <img
                         src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                        alt={t('settings.documents.noChunksAlt')}
+                        alt={t('settings.sources.noChunksAlt')}
                         className="mx-auto mb-2 h-24 w-24"
                       />
-                      {t('settings.documents.noChunks')}
+                      {t('settings.sources.noChunks')}
                     </div>
                   ) : (
                     filteredChunks.map((chunk, index) => (
@@ -460,7 +460,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                         <div className="w-full">
                           <div className="flex w-full items-center justify-between border-b border-[#D1D9E0] bg-[#F6F8FA] dark:bg-[#27282D] dark:border-[#6A6A6A] px-4 py-3">
                             <div className="text-[#59636E] text-sm dark:text-[#E0E0E0]">
-                              {chunk.metadata.token_count ? chunk.metadata.token_count.toLocaleString() : '-'} {t('settings.documents.tokensUnit')}
+                              {chunk.metadata.token_count ? chunk.metadata.token_count.toLocaleString() : '-'} {t('settings.sources.tokensUnit')}
                             </div>
                           </div>
                           <div className="px-4 pt-3 pb-6">
@@ -491,7 +491,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
               <div className="relative flex flex-col rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden w-full">
                 <div className="flex w-full items-center justify-between border-b border-[#D1D9E0] bg-[#F6F8FA] dark:bg-[#27282D] dark:border-[#6A6A6A] px-4 py-3">
                   <div className="text-[#59636E] text-sm dark:text-[#E0E0E0]">
-                    {editingChunk.metadata.token_count ? editingChunk.metadata.token_count.toLocaleString() : '-'} {t('settings.documents.tokensUnit')}
+                    {editingChunk.metadata.token_count ? editingChunk.metadata.token_count.toLocaleString() : '-'} {t('settings.sources.tokensUnit')}
                   </div>
                 </div>
                 <div className="p-4 overflow-hidden">
@@ -535,4 +535,4 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
   );
 };
 
-export default DocumentChunks;
+export default Chunks;

frontend/src/components/FileTreeComponent.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import DocumentChunks from './DocumentChunks';
+import Chunks from './Chunks';
 import ContextMenu, { MenuOption } from './ContextMenu';
 import userService from '../api/services/userService';
 import FileIcon from '../assets/file.svg';
@@ -201,19 +201,21 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   ): MenuOption[] => {
     const options: MenuOption[] = [];
 
-    if (isFile) {
-      options.push({
-        icon: EyeView,
-        label: t('settings.documents.view'),
-        onClick: (event: React.SyntheticEvent) => {
-          event.stopPropagation();
+    options.push({
+      icon: EyeView,
+      label: t('settings.sources.view'),
+      onClick: (event: React.SyntheticEvent) => {
+        event.stopPropagation();
+        if (isFile) {
           handleFileClick(name);
-        },
-        iconWidth: 18,
-        iconHeight: 18,
-        variant: 'primary',
-      });
-    }
+        } else {
+          navigateToDirectory(name);
+        }
+      },
+      iconWidth: 18,
+      iconHeight: 18,
+      variant: 'primary',
+    });
 
     options.push({
       icon: Trash,
@@ -494,7 +496,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               <div className="flex items-center">
                 <img
                   src={FolderIcon}
-                  alt={t('settings.documents.parentFolderAlt')}
+                  alt={t('settings.sources.parentFolderAlt')}
                   className="mr-2 h-4 w-4 flex-shrink-0"
                 />
                 <span className="text-sm dark:text-[#E0E0E0] truncate">..</span>
@@ -523,7 +525,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           >
             <td className="px-2 lg:px-4 py-2">
               <div className="flex items-center min-w-0">
-                <img src={FolderIcon} alt={t('settings.documents.folderAlt')} className="mr-2 h-4 w-4 flex-shrink-0" />
+                <img src={FolderIcon} alt={t('settings.sources.folderAlt')} className="mr-2 h-4 w-4 flex-shrink-0" />
                 <span className="text-sm dark:text-[#E0E0E0] truncate">{name}</span>
               </div>
             </td>
@@ -544,7 +546,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                 >
                   <img
                     src={ThreeDots}
-                    alt={t('settings.documents.menuAlt')}
+                    alt={t('settings.sources.menuAlt')}
                     className="opacity-60 hover:opacity-100"
                   />
                 </button>
@@ -575,7 +577,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           >
             <td className="px-2 lg:px-4 py-2">
               <div className="flex items-center min-w-0">
-                <img src={FileIcon} alt={t('settings.documents.fileAlt')} className="mr-2 h-4 w-4 flex-shrink-0" />
+                <img src={FileIcon} alt={t('settings.sources.fileAlt')} className="mr-2 h-4 w-4 flex-shrink-0" />
                 <span className="text-sm dark:text-[#E0E0E0] truncate">{name}</span>
               </div>
             </td>
@@ -594,7 +596,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                 >
                   <img
                     src={ThreeDots}
-                    alt={t('settings.documents.menuAlt')}
+                    alt={t('settings.sources.menuAlt')}
                     className="opacity-60 hover:opacity-100"
                   />
                 </button>
@@ -671,7 +673,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                 setSearchResults(searchFiles(e.target.value, directoryStructure));
               }
             }}
-            placeholder={t('settings.documents.searchFiles')}
+            placeholder={t('settings.sources.searchFiles')}
             className={`w-full px-4 py-2 pl-10 border border-[#D1D9E0] dark:border-[#6A6A6A] ${
               searchQuery ? 'rounded-t-md rounded-b-none border-b-0' : 'rounded-md'
             } bg-transparent dark:text-[#E0E0E0] focus:outline-none`}
@@ -687,7 +689,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
             <div className="absolute z-10 w-full border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-b-md bg-white dark:bg-[#1F2023] shadow-lg max-h-[calc(100vh-200px)] overflow-y-auto">
               {searchResults.length === 0 ? (
                 <div className="text-sm text-gray-500 dark:text-gray-400 text-center py-2">
-                  {t('settings.documents.noResults')}
+                  {t('settings.sources.noResults')}
                 </div>
               ) : (
                 searchResults.map((result, index) => (
@@ -701,7 +703,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                   >
                     <img
                       src={result.isFile ? FileIcon : FolderIcon}
-                      alt={result.isFile ? t('settings.documents.fileAlt') : t('settings.documents.folderAlt')}
+                      alt={result.isFile ? t('settings.sources.fileAlt') : t('settings.sources.folderAlt')}
                       className="flex-shrink-0 w-4 h-4 mr-2"
                     />
                     <span className="text-sm dark:text-[#E0E0E0]">
@@ -722,7 +724,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
       {selectedFile ? (
         <div className="flex">
           <div className="flex-1">
-            <DocumentChunks
+            <Chunks
               documentId={docId}
               documentName={sourceName}
               handleGoBack={() => setSelectedFile(null)}
@@ -750,16 +752,16 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                   <thead className="bg-gray-100 dark:bg-[#27282D]">
                     <tr className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]">
                       <th className="min-w-[200px] px-2 lg:px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
-                        {t('settings.documents.fileName')}
+                        {t('settings.sources.fileName')}
                       </th>
                       <th className="min-w-[80px] px-2 lg:px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
-                        {t('settings.documents.tokens')}
+                        {t('settings.sources.tokens')}
                       </th>
                       <th className="min-w-[80px] px-2 lg:px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
-                        {t('settings.documents.size')}
+                        {t('settings.sources.size')}
                       </th>
                       <th className="w-[60px] px-2 lg:px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
-                        <span className="sr-only">{t('settings.documents.actions')}</span>
+                        <span className="sr-only">{t('settings.sources.actions')}</span>
                       </th>
                     </tr>
                   </thead>
@@ -775,7 +777,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
       <ConfirmationModal
         message={
           itemToDelete?.isFile
-            ? t('settings.documents.confirmDelete')
+            ? t('settings.sources.confirmDelete')
             : `Are you sure you want to delete the directory "${itemToDelete?.name}" and all its contents? This action cannot be undone.`
         }
         modalState={deleteModalState}

frontend/src/components/Head.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-interface DocumentHeadProps {
+interface HeadProps {
   title?: string;
   description?: string;
   keywords?: string;
@@ -13,7 +13,7 @@ interface DocumentHeadProps {
   children?: React.ReactNode;
 }
 
-export function DocumentHead({
+export function Head({
   title,
   description,
   keywords,
@@ -24,7 +24,7 @@ export function DocumentHead({
   twitterTitle,
   twitterDescription,
   children,
-}: DocumentHeadProps) {
+}: HeadProps) {
   return (
     <>
       {title && <title>{title}</title>}

frontend/src/components/SettingsBar.tsx

@@ -10,7 +10,7 @@ const useTabs = () => {
   const { t } = useTranslation();
   const tabs = [
     t('settings.general.label'),
-    t('settings.documents.label'),
+    t('settings.sources.label'),
     t('settings.analytics.label'),
     t('settings.logs.label'),
     t('settings.tools.label'),

frontend/src/components/SourceDropdown.tsx

@@ -158,7 +158,7 @@ function SourceDropdown({
         </div>
       )}
       <ConfirmationModal
-        message={t('settings.documents.deleteWarning', {
+        message={t('settings.sources.deleteWarning', {
           name: documentToDelete?.name,
         })}
         modalState={deleteModalState}

frontend/src/components/SourcesPopup.tsx

@@ -135,7 +135,7 @@ export default function SourcesPopup({
             type="text"
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            placeholder={t('settings.documents.searchPlaceholder')}
+            placeholder={t('settings.sources.searchPlaceholder')}
             borderVariant="thin"
             className="mb-4"
             labelBgClassName="bg-lotion dark:bg-charleston-green-2"
@@ -203,11 +203,11 @@ export default function SourcesPopup({
 
         <div className="shrink-0 px-4 py-4 opacity-75 transition-opacity duration-200 hover:opacity-100 md:px-6">
           <a
-            href="/settings/documents"
+            href="/settings/sources"
             className="text-violets-are-blue inline-flex items-center gap-2 text-base font-medium"
             onClick={onClose}
           >
-            {t('settings.documents.goToDocuments')}
+            {t('settings.sources.goToSources')}
             <img src={RedirectIcon} alt="Redirect" className="h-3 w-3" />
           </a>
         </div>
@@ -217,7 +217,7 @@ export default function SourcesPopup({
             onClick={handleUploadClick}
             className="border-violets-are-blue text-violets-are-blue hover:bg-violets-are-blue w-auto rounded-full border px-4 py-2 text-[14px] font-medium transition-colors duration-200 hover:text-white"
           >
-            {t('settings.documents.uploadNew')}
+            {t('settings.sources.uploadNew')}
           </button>
         </div>
       </div>