From ade704d065bae686b3e18c826a1bed144625ac0c Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 1 Jul 2025 04:00:57 +0530
Subject: [PATCH 01/57] (refactor:ingestion) pass file path once

---
 application/api/internal/routes.py |  6 +++---
 application/api/user/routes.py     | 26 ++++++++++++--------------
 application/api/user/tasks.py      |  4 ++--
 application/worker.py              | 27 +++++++++++++--------------
 4 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/application/api/internal/routes.py b/application/api/internal/routes.py
index b4422e26..20ce31c7 100755
--- a/application/api/internal/routes.py
+++ b/application/api/internal/routes.py
@@ -48,7 +48,7 @@ def upload_index_files():
     remote_data = request.form["remote_data"] if "remote_data" in request.form else None
     sync_frequency = request.form["sync_frequency"] if "sync_frequency" in request.form else None
     
-    original_file_path = request.form.get("original_file_path")
+    file_path = request.form.get("file_path")
 
     storage = StorageCreator.get_storage()
     index_base_path = f"indexes/{id}"
@@ -87,7 +87,7 @@ def upload_index_files():
                     "retriever": retriever,
                     "remote_data": remote_data,
                     "sync_frequency": sync_frequency,
-                    "file_path": original_file_path,
+                    "file_path": file_path,
                 }
             },
         )
@@ -105,7 +105,7 @@ def upload_index_files():
                 "retriever": retriever,
                 "remote_data": remote_data,
                 "sync_frequency": sync_frequency,
-                "file_path": original_file_path,
+                "file_path": file_path,
             }
         )
     return {"status": "ok"}
diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index c2f89761..fc052421 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -553,11 +553,12 @@ class UploadFile(Resource):
             if len(files) > 1:
                 temp_files = []
                 for file in files:
-                    filename = safe_filename(file.filename)
-                    temp_path = f"{base_path}/temp/{filename}"
+                    original_filename = file.filename
+                    safe_file = safe_filename(original_filename)
+                    temp_path = f"{base_path}/temp/{safe_file}"
                     storage.save_file(file, temp_path)
-                    temp_files.append(temp_path)
-                    print(f"Saved file: {filename}")
+                    temp_files.append({"path": temp_path, "original_name": original_filename})
+                    print(f"Saved file: {original_filename}")
                 zip_filename = f"{dir_name}.zip"
                 zip_path = f"{base_path}/{zip_filename}"
                 zip_temp_path = None
@@ -625,14 +626,12 @@ class UploadFile(Resource):
                             ".jpeg",
                         ],
                         job_name,
-                        zip_filename,
                         user,
-                        dir_name,
-                        safe_user,
+                        file_path=zip_path,
+                        filename=zip_filename
                     )
                 finally:
                     # Clean up temporary files
-
                     for temp_path in temp_files:
                         try:
                             storage.delete_file(temp_path)
@@ -642,15 +641,15 @@ class UploadFile(Resource):
                                 exc_info=True,
                             )
                     # Clean up the zip file if it was created
-
                     if zip_temp_path and os.path.exists(zip_temp_path):
                         os.remove(zip_temp_path)
             else:  # Keep this else block for single file upload
                 # For single file
 
                 file = files[0]
-                filename = safe_filename(file.filename)
-                file_path = f"{base_path}/{filename}"
+                original_filename = file.filename
+                safe_file = safe_filename(original_filename)
+                file_path = f"{base_path}/{safe_file}"
 
                 storage.save_file(file, file_path)
 
@@ -674,10 +673,9 @@ class UploadFile(Resource):
                         ".jpeg",
                     ],
                     job_name,
-                    filename,  # Corrected variable for single-file case
                     user,
-                    dir_name,
-                    safe_user,
+                    file_path=file_path,
+                    filename=original_filename
                 )
         except Exception as err:
             current_app.logger.error(f"Error uploading file: {err}", exc_info=True)
diff --git a/application/api/user/tasks.py b/application/api/user/tasks.py
index c7003ef3..aa40f37b 100644
--- a/application/api/user/tasks.py
+++ b/application/api/user/tasks.py
@@ -11,8 +11,8 @@ from application.worker import (
 
 
 @celery.task(bind=True)
-def ingest(self, directory, formats, job_name, filename, user, dir_name, user_dir):
-    resp = ingest_worker(self, directory, formats, job_name, filename, user, dir_name, user_dir)
+def ingest(self, directory, formats, job_name, user, file_path, filename):
+    resp = ingest_worker(self, directory, formats, job_name, file_path, filename, user)
     return resp
 
 
diff --git a/application/worker.py b/application/worker.py
index c6178931..e685b371 100755
--- a/application/worker.py
+++ b/application/worker.py
@@ -194,7 +194,8 @@ def run_agent_logic(agent_config, input_data):
 
 # Define the main function for ingesting and processing documents.
 def ingest_worker(
-    self, directory, formats, job_name, filename, user, dir_name=None, user_dir=None, retriever="classic"
+    self, directory, formats, job_name, file_path, filename, user, 
+    retriever="classic"
 ):
     """
     Ingest and process documents.
@@ -204,10 +205,9 @@ def ingest_worker(
         directory (str): Specifies the directory for ingesting ('inputs' or 'temp').
         formats (list of str): List of file extensions to consider for ingestion (e.g., [".rst", ".md"]).
         job_name (str): Name of the job for this ingestion task (original, unsanitized).
-        filename (str): Name of the file to be ingested.
+        file_path (str): Complete file path to use consistently throughout the pipeline.
+        filename (str): Original unsanitized filename provided by the user.
         user (str): Identifier for the user initiating the ingestion (original, unsanitized).
-        dir_name (str, optional): Sanitized directory name for filesystem operations.
-        user_dir (str, optional): Sanitized user ID for filesystem operations.
         retriever (str): Type of retriever to use for processing the documents.
 
     Returns:
@@ -220,11 +220,8 @@ def ingest_worker(
     sample = False
     
     storage = StorageCreator.get_storage()
-
-    full_path = os.path.join(directory, user_dir, dir_name)
-    source_file_path = os.path.join(full_path, filename)
-
-    logging.info(f"Ingest file: {full_path}", extra={"user": user, "job": job_name})
+    
+    logging.info(f"Ingest file: {file_path}", extra={"user": user, "job": job_name})
 
     # Create temporary working directory
     with tempfile.TemporaryDirectory() as temp_dir:
@@ -232,8 +229,10 @@ def ingest_worker(
             os.makedirs(temp_dir, exist_ok=True)
 
             # Download file from storage to temp directory
-            temp_file_path = os.path.join(temp_dir, filename)
-            file_data = storage.get_file(source_file_path)
+            temp_filename = os.path.basename(file_path)
+            temp_file_path = os.path.join(temp_dir, temp_filename)
+            
+            file_data = storage.get_file(file_path)
 
             with open(temp_file_path, "wb") as f:
                 f.write(file_data.read())
@@ -241,8 +240,8 @@ def ingest_worker(
             self.update_state(state="PROGRESS", meta={"current": 1})
 
             # Handle zip files
-            if filename.endswith(".zip"):
-                logging.info(f"Extracting zip file: {filename}")
+            if temp_filename.endswith(".zip"):
+                logging.info(f"Extracting zip file: {temp_filename}")
                 extract_zip_recursive(
                     temp_file_path, temp_dir, current_depth=0, max_depth=RECURSION_DEPTH
                 )
@@ -292,7 +291,7 @@ def ingest_worker(
                 "retriever": retriever,
                 "id": str(id),
                 "type": "local",
-                "original_file_path": source_file_path,
+                "file_path": file_path,
             }
 
             upload_index(vector_store_path, file_data)

From fd905b1a06cfaa839b6705686bc9171cb5adc6a0 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 2 Jul 2025 16:30:29 +0530
Subject: [PATCH 02/57] (feat:dir-reader) save tokens with filenames

---
 application/api/internal/routes.py | 13 +++++++++++++
 application/parser/file/bulk.py    | 15 +++++++++++++++
 application/worker.py              |  5 +++++
 3 files changed, 33 insertions(+)

diff --git a/application/api/internal/routes.py b/application/api/internal/routes.py
index 20ce31c7..3f839f40 100755
--- a/application/api/internal/routes.py
+++ b/application/api/internal/routes.py
@@ -1,5 +1,6 @@
 import os
 import datetime
+import json
 from flask import Blueprint, request, send_from_directory
 from werkzeug.utils import secure_filename
 from bson.objectid import ObjectId
@@ -49,6 +50,16 @@ def upload_index_files():
     sync_frequency = request.form["sync_frequency"] if "sync_frequency" in request.form else None
     
     file_path = request.form.get("file_path")
+    file_token_counts = request.form.get("file_token_counts")
+    
+    if file_token_counts:
+        try:
+            file_token_counts = json.loads(file_token_counts)
+        except:
+            logger.error("Error parsing file_token_counts")
+            file_token_counts = {}
+    else:
+        file_token_counts = {}
 
     storage = StorageCreator.get_storage()
     index_base_path = f"indexes/{id}"
@@ -88,6 +99,7 @@ def upload_index_files():
                     "remote_data": remote_data,
                     "sync_frequency": sync_frequency,
                     "file_path": file_path,
+                    "file_token_counts": file_token_counts,
                 }
             },
         )
@@ -106,6 +118,7 @@ def upload_index_files():
                 "remote_data": remote_data,
                 "sync_frequency": sync_frequency,
                 "file_path": file_path,
+                "file_token_counts": file_token_counts,
             }
         )
     return {"status": "ok"}
diff --git a/application/parser/file/bulk.py b/application/parser/file/bulk.py
index da6dc298..2851dcdd 100644
--- a/application/parser/file/bulk.py
+++ b/application/parser/file/bulk.py
@@ -15,6 +15,7 @@ from application.parser.file.json_parser import JSONParser
 from application.parser.file.pptx_parser import PPTXParser
 from application.parser.file.image_parser import ImageParser
 from application.parser.schema.base import Document
+from application.utils import num_tokens_from_string
 
 DEFAULT_FILE_EXTRACTOR: Dict[str, BaseParser] = {
     ".pdf": PDFParser(),
@@ -146,6 +147,8 @@ class SimpleDirectoryReader(BaseReader):
         data: Union[str, List[str]] = ""
         data_list: List[str] = []
         metadata_list = []
+        file_token_counts = {}
+        
         for input_file in self.input_files:
             if input_file.suffix in self.file_extractor:
                 parser = self.file_extractor[input_file.suffix]
@@ -156,6 +159,15 @@ class SimpleDirectoryReader(BaseReader):
                 # do standard read
                 with open(input_file, "r", errors=self.errors) as f:
                     data = f.read()
+            
+            # Calculate token count for this file
+            if isinstance(data, List):
+                file_tokens = sum(num_tokens_from_string(str(d)) for d in data)
+            else:
+                file_tokens = num_tokens_from_string(str(data))
+            
+            file_token_counts[input_file.name] = file_tokens
+            
             # Prepare metadata for this file
             if self.file_metadata is not None:
                 file_metadata = self.file_metadata(input_file.name)
@@ -175,6 +187,9 @@ class SimpleDirectoryReader(BaseReader):
                 # Add the file's metadata to metadata_list
                 metadata_list.append(file_metadata)
 
+        self.file_token_counts = file_token_counts
+        logging.info(f"File token counts: {file_token_counts}")
+
         if concatenate:
             return [Document("\n".join(data_list))]
         elif self.file_metadata is not None:
diff --git a/application/worker.py b/application/worker.py
index e685b371..805fa0ed 100755
--- a/application/worker.py
+++ b/application/worker.py
@@ -258,6 +258,10 @@ def ingest_worker(
                 file_metadata=metadata_from_filename,
             )
             raw_docs = reader.load_data()
+            
+            file_token_counts = getattr(reader, 'file_token_counts', {})
+            
+            logging.info(f"File token counts from reader: {file_token_counts}")
 
             chunker = Chunker(
                 chunking_strategy="classic_chunk",
@@ -292,6 +296,7 @@ def ingest_worker(
                 "id": str(id),
                 "type": "local",
                 "file_path": file_path,
+                "file_token_counts": json.dumps(file_token_counts),
             }
 
             upload_index(vector_store_path, file_data)

From 2ef23fe1b37822c16feaf96bf2ca92a381408a3f Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 3 Jul 2025 01:24:22 +0530
Subject: [PATCH 03/57] (feat:dir-reader) maintain dir structure in db

---
 application/api/internal/routes.py | 16 +++++------
 application/parser/file/bulk.py    | 45 ++++++++++++++++++++++++++++--
 application/worker.py              | 11 ++++----
 3 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/application/api/internal/routes.py b/application/api/internal/routes.py
index 3f839f40..da87655b 100755
--- a/application/api/internal/routes.py
+++ b/application/api/internal/routes.py
@@ -50,16 +50,16 @@ def upload_index_files():
     sync_frequency = request.form["sync_frequency"] if "sync_frequency" in request.form else None
     
     file_path = request.form.get("file_path")
-    file_token_counts = request.form.get("file_token_counts")
+    directory_structure = request.form.get("directory_structure")
     
-    if file_token_counts:
+    if directory_structure:
         try:
-            file_token_counts = json.loads(file_token_counts)
+            directory_structure = json.loads(directory_structure)
         except:
-            logger.error("Error parsing file_token_counts")
-            file_token_counts = {}
+            logger.error("Error parsing directory_structure")
+            directory_structure = {}
     else:
-        file_token_counts = {}
+        directory_structure = {}
 
     storage = StorageCreator.get_storage()
     index_base_path = f"indexes/{id}"
@@ -99,7 +99,7 @@ def upload_index_files():
                     "remote_data": remote_data,
                     "sync_frequency": sync_frequency,
                     "file_path": file_path,
-                    "file_token_counts": file_token_counts,
+                    "directory_structure": directory_structure,
                 }
             },
         )
@@ -118,7 +118,7 @@ def upload_index_files():
                 "remote_data": remote_data,
                 "sync_frequency": sync_frequency,
                 "file_path": file_path,
-                "file_token_counts": file_token_counts,
+                "directory_structure": directory_structure,
             }
         )
     return {"status": "ok"}
diff --git a/application/parser/file/bulk.py b/application/parser/file/bulk.py
index 2851dcdd..85ed9404 100644
--- a/application/parser/file/bulk.py
+++ b/application/parser/file/bulk.py
@@ -142,7 +142,6 @@ class SimpleDirectoryReader(BaseReader):
 
         Returns:
             List[Document]: A list of documents.
-
         """
         data: Union[str, List[str]] = ""
         data_list: List[str] = []
@@ -188,7 +187,13 @@ class SimpleDirectoryReader(BaseReader):
                 metadata_list.append(file_metadata)
 
         self.file_token_counts = file_token_counts
-        logging.info(f"File token counts: {file_token_counts}")
+        
+        # Build directory structure if input_dir is provided
+        if hasattr(self, 'input_dir'):
+            self.directory_structure = self._build_directory_structure(self.input_dir)
+            logging.info(f"Directory structure built successfully")
+        else:
+            self.directory_structure = {}
 
         if concatenate:
             return [Document("\n".join(data_list))]
@@ -196,3 +201,39 @@ class SimpleDirectoryReader(BaseReader):
             return [Document(d, extra_info=m) for d, m in zip(data_list, metadata_list)]
         else:
             return [Document(d) for d in data_list]
+
+    def _build_directory_structure(self, base_path):
+        """Build a dictionary representing the directory structure.
+        
+        Args:
+            base_path: The base path to start building the structure from.
+            
+        Returns:
+            dict: A nested dictionary representing the directory structure.
+        """
+        structure = {}
+        base_path = Path(base_path)
+        
+        def _build_tree(path, current_dict):
+            for item in path.iterdir():
+                if item.is_dir():
+                    if self.exclude_hidden and item.name.startswith('.'):
+                        continue
+                    current_dict[item.name] = {}
+                    _build_tree(item, current_dict[item.name])
+                else:
+                    if self.exclude_hidden and item.name.startswith('.'):
+                        continue
+                    if self.required_exts is not None and item.suffix not in self.required_exts:
+                        continue
+                    # Store file with its token count if available
+                    if hasattr(self, 'file_token_counts') and item.name in self.file_token_counts:
+                        current_dict[item.name] = {
+                            "type": "file",
+                            "token_count": self.file_token_counts[item.name]
+                        }
+                    else:
+                        current_dict[item.name] = {"type": "file"}
+        
+        _build_tree(base_path, structure)
+        return structure
diff --git a/application/worker.py b/application/worker.py
index 805fa0ed..8cc7ac20 100755
--- a/application/worker.py
+++ b/application/worker.py
@@ -259,9 +259,8 @@ def ingest_worker(
             )
             raw_docs = reader.load_data()
             
-            file_token_counts = getattr(reader, 'file_token_counts', {})
-            
-            logging.info(f"File token counts from reader: {file_token_counts}")
+            directory_structure = getattr(reader, 'directory_structure', {})
+            logging.info(f"Directory structure from reader: {directory_structure}")
 
             chunker = Chunker(
                 chunking_strategy="classic_chunk",
@@ -288,15 +287,15 @@ def ingest_worker(
                 for i in range(min(5, len(raw_docs))):
                     logging.info(f"Sample document {i}: {raw_docs[i]}")
             file_data = {
-                "name": job_name,  # Use original job_name
+                "name": job_name,
                 "file": filename,
-                "user": user,  # Use original user
+                "user": user,
                 "tokens": tokens,
                 "retriever": retriever,
                 "id": str(id),
                 "type": "local",
                 "file_path": file_path,
-                "file_token_counts": json.dumps(file_token_counts),
+                "directory_structure": json.dumps(directory_structure),
             }
 
             upload_index(vector_store_path, file_data)

From 82fc19e7b78d3c6206a8c246077be5670aca276a Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 3 Jul 2025 17:28:12 +0530
Subject: [PATCH 04/57] (fix:dir-reader) conflict of same filename in dir

---
 application/parser/file/bulk.py | 42 ++++++++++++++++++++-------------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/application/parser/file/bulk.py b/application/parser/file/bulk.py
index 85ed9404..11e69f75 100644
--- a/application/parser/file/bulk.py
+++ b/application/parser/file/bulk.py
@@ -146,7 +146,7 @@ class SimpleDirectoryReader(BaseReader):
         data: Union[str, List[str]] = ""
         data_list: List[str] = []
         metadata_list = []
-        file_token_counts = {}
+        self.file_token_counts = {}
         
         for input_file in self.input_files:
             if input_file.suffix in self.file_extractor:
@@ -165,28 +165,34 @@ class SimpleDirectoryReader(BaseReader):
             else:
                 file_tokens = num_tokens_from_string(str(data))
             
-            file_token_counts[input_file.name] = file_tokens
+            full_path = str(input_file.resolve())
+            self.file_token_counts[full_path] = file_tokens
             
-            # Prepare metadata for this file
-            if self.file_metadata is not None:
-                file_metadata = self.file_metadata(input_file.name)
+            base_metadata = {
+                'title': input_file.name,
+                'token_count': file_tokens,
+            }
+            
+            if hasattr(self, 'input_dir'):
+                try:
+                    relative_path = str(input_file.relative_to(self.input_dir))
+                    base_metadata['source'] = relative_path
+                except ValueError:
+                    base_metadata['source'] = str(input_file)
             else:
-                # Provide a default empty metadata
-                file_metadata = {'title': '', 'store': ''}
-                # TODO: Find a case with no metadata and check if breaks anything 
+                base_metadata['source'] = str(input_file)
+
+            if self.file_metadata is not None:
+                custom_metadata = self.file_metadata(input_file.name)
+                base_metadata.update(custom_metadata)
 
             if isinstance(data, List):
                 # Extend data_list with each item in the data list
                 data_list.extend([str(d) for d in data])
-                # For each item in the data list, add the file's metadata to metadata_list
-                metadata_list.extend([file_metadata for _ in data])
+                metadata_list.extend([base_metadata for _ in data])
             else:
-                # Add the single piece of data to data_list
                 data_list.append(str(data))
-                # Add the file's metadata to metadata_list
-                metadata_list.append(file_metadata)
-
-        self.file_token_counts = file_token_counts
+                metadata_list.append(base_metadata)
         
         # Build directory structure if input_dir is provided
         if hasattr(self, 'input_dir'):
@@ -227,10 +233,12 @@ class SimpleDirectoryReader(BaseReader):
                     if self.required_exts is not None and item.suffix not in self.required_exts:
                         continue
                     # Store file with its token count if available
-                    if hasattr(self, 'file_token_counts') and item.name in self.file_token_counts:
+                
+                    full_path = str(item.resolve())
+                    if hasattr(self, 'file_token_counts') and full_path in self.file_token_counts:
                         current_dict[item.name] = {
                             "type": "file",
-                            "token_count": self.file_token_counts[item.name]
+                            "token_count": self.file_token_counts[full_path]
                         }
                     else:
                         current_dict[item.name] = {"type": "file"}

From 0f7ebcd8e45f6db9735b6e2cde63ff99076cc59a Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 3 Jul 2025 18:09:19 +0530
Subject: [PATCH 05/57] (feat:dir-reader) store mime types, file size in db

---
 application/parser/file/bulk.py | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/application/parser/file/bulk.py b/application/parser/file/bulk.py
index 11e69f75..6f8d6cde 100644
--- a/application/parser/file/bulk.py
+++ b/application/parser/file/bulk.py
@@ -232,16 +232,24 @@ class SimpleDirectoryReader(BaseReader):
                         continue
                     if self.required_exts is not None and item.suffix not in self.required_exts:
                         continue
-                    # Store file with its token count if available
-                
+                    
                     full_path = str(item.resolve())
+                    file_size_bytes = item.stat().st_size
+                    
+                    import mimetypes
+                    mime_type = mimetypes.guess_type(item.name)[0] or "application/octet-stream"
+                    
                     if hasattr(self, 'file_token_counts') and full_path in self.file_token_counts:
                         current_dict[item.name] = {
-                            "type": "file",
-                            "token_count": self.file_token_counts[full_path]
+                            "type": mime_type,
+                            "token_count": self.file_token_counts[full_path],
+                            "size_bytes": file_size_bytes
                         }
                     else:
-                        current_dict[item.name] = {"type": "file"}
+                        current_dict[item.name] = {
+                            "type": mime_type,
+                            "size_bytes": file_size_bytes
+                        }
         
         _build_tree(base_path, structure)
         return structure

From bbce872ac5e65b8a032689ffb745a547157d4f3b Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Fri, 4 Jul 2025 02:19:58 +0530
Subject: [PATCH 06/57] (fix:chunker) combine metadata as well

---
 application/parser/chunking.py | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/application/parser/chunking.py b/application/parser/chunking.py
index aae14898..f2a69dac 100644
--- a/application/parser/chunking.py
+++ b/application/parser/chunking.py
@@ -35,11 +35,33 @@ class Chunker:
     def combine_documents(self, doc: Document, next_doc: Document) -> Document:
         combined_text = doc.text + " " + next_doc.text
         combined_token_count = len(self.encoding.encode(combined_text))
+        
+        combined_extra_info = {**(doc.extra_info or {}), "token_count": combined_token_count}
+        
+        sources = []
+        if doc.extra_info and 'source' in doc.extra_info:
+            sources.append(doc.extra_info['source'])
+        if next_doc.extra_info and 'source' in next_doc.extra_info:
+            sources.append(next_doc.extra_info['source'])
+        
+        if sources:
+            combined_extra_info['source'] = sources
+    
+        titles = []
+        if doc.extra_info and 'title' in doc.extra_info:
+            titles.append(doc.extra_info['title'])
+        if next_doc.extra_info and 'title' in next_doc.extra_info:
+            titles.append(next_doc.extra_info['title'])
+        
+        # Store combined title
+        if titles:
+            combined_extra_info['title'] = ", ".join(titles)
+        
         new_doc = Document(
             text=combined_text,
             doc_id=doc.doc_id,
             embedding=doc.embedding,
-            extra_info={**(doc.extra_info or {}), "token_count": combined_token_count}
+            extra_info=combined_extra_info
         )
         return new_doc
     

From ca95d7275a8fb9852ad7f37ef5ae189d3bdf0527 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 8 Jul 2025 02:32:18 +0530
Subject: [PATCH 07/57] (feat:dateTimeUtils) localise weekday format

---
 frontend/src/utils/dateTimeUtils.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/src/utils/dateTimeUtils.ts b/frontend/src/utils/dateTimeUtils.ts
index caddf961..acb998a9 100644
--- a/frontend/src/utils/dateTimeUtils.ts
+++ b/frontend/src/utils/dateTimeUtils.ts
@@ -34,6 +34,21 @@ export function formatDate(dateString: string): string {
       day: 'numeric',
       year: 'numeric',
     });
+  } else if (
+    /^[A-Za-z]{3}, \d{2} [A-Za-z]{3} \d{4} \d{2}:\d{2}:\d{2} GMT$/.test(
+      dateString,
+    )
+  ) {
+    // Format: "Fri, 08 Jul 2025 06:00:00 GMT"
+    const dateTime = new Date(dateString);
+    return dateTime.toLocaleDateString('en-US', {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
   } else {
     return dateString;
   }

From 4fcbdae5bf8820f559d362fa158eb9aedd46d0de Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 8 Jul 2025 02:46:34 +0530
Subject: [PATCH 08/57] (feat:docs) cards UI

---
 frontend/src/settings/Documents.tsx | 242 +++++++++++++---------------
 1 file changed, 109 insertions(+), 133 deletions(-)

diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 1e628250..63aea342 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -4,7 +4,6 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
 import ArrowLeft from '../assets/arrow-left.svg';
-import caretSort from '../assets/caret-sort.svg';
 import Edit from '../assets/edit.svg';
 import EyeView from '../assets/eye-view.svg';
 import NoFilesDarkIcon from '../assets/no-files-dark.svg';
@@ -323,146 +322,123 @@ export default function Documents({
           </button>
         </div>
         <div className="relative w-full">
-          <div className="dark:border-silver/40 overflow-hidden rounded-md border border-gray-300">
-            <div className="table-scroll overflow-x-auto">
-              <table className="w-full table-auto">
-                <thead>
-                  <tr className="dark:border-silver/40 border-b border-gray-300">
-                    <th className="text-sonic-silver w-[45%] px-4 py-3 text-left text-xs font-medium">
-                      {t('settings.documents.name')}
-                    </th>
-                    <th className="text-sonic-silver w-[30%] px-4 py-3 text-left text-xs font-medium">
-                      <div className="flex items-center justify-start">
-                        {t('settings.documents.date')}
-                        <img
-                          className="ml-2 cursor-pointer"
-                          onClick={() => refreshDocs('date')}
-                          src={caretSort}
-                          alt="sort"
-                        />
-                      </div>
-                    </th>
-                    <th className="text-sonic-silver w-[15%] px-4 py-3 text-left text-xs font-medium">
-                      <div className="flex items-center justify-start">
-                        <span className="hidden sm:inline">
-                          {t('settings.documents.tokenUsage')}
-                        </span>
-                        <span className="sm:hidden">
-                          {t('settings.documents.tokenUsage')}
-                        </span>
-                        <img
-                          className="ml-2 cursor-pointer"
-                          onClick={() => refreshDocs('tokens')}
-                          src={caretSort}
-                          alt="sort"
-                        />
-                      </div>
-                    </th>
-                    <th className="sr-only w-[10%] px-4 py-3">
-                      {t('settings.documents.actions')}
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="dark:divide-silver/40 divide-y divide-gray-300">
-                  {loading ? (
-                    <SkeletonLoader component="table" />
-                  ) : !currentDocuments?.length ? (
-                    <tr>
-                      <td
-                        colSpan={4}
-                        className="bg-transparent py-4 text-center text-gray-700 dark:text-neutral-200"
-                      >
-                        {t('settings.documents.noData')}
-                      </td>
-                    </tr>
-                  ) : (
-                    currentDocuments.map((document, index) => {
-                      const docId = document.id ? document.id.toString() : '';
+          {loading ? (
+            <SkeletonLoader />
+          ) : !currentDocuments?.length ? (
+            <div className="flex flex-col items-center justify-center py-12">
+              <img
+                src={NoFilesIcon}
+                alt={t('settings.documents.noData')}
+                className="mx-auto mb-6 h-32 w-32"
+              />
+              <p className="text-center text-lg text-gray-500 dark:text-gray-400">
+                {t('settings.documents.noData')}
+              </p>
+            </div>
+          ) : (
+            <div className="flex flex-wrap gap-6">
+              {currentDocuments.map((document, index) => {
+                const docId = document.id ? document.id.toString() : '';
 
-                      return (
-                        <tr key={docId} className="group transition-colors">
-                          <td
-                            className="max-w-0 min-w-48 truncate px-4 py-4 text-sm font-semibold text-gray-700 group-hover:bg-gray-50 dark:text-[#E0E0E0] dark:group-hover:bg-gray-800/50"
+                return (
+                  <div key={docId} className="relative">
+                    <div
+                      className={`flex h-[123px] w-[308px] flex-col justify-between rounded-2xl bg-[#F9F9F9] p-3 transition-all duration-200 dark:bg-[#383838] ${
+                        activeMenuId === docId || syncMenuState.docId === docId
+                          ? 'scale-[1.02] shadow-lg'
+                          : 'hover:scale-[1.02] hover:shadow-lg'
+                      }`}
+                    >
+                      <div className="w-full">
+                        <div className="flex w-full items-center justify-between gap-2">
+                          <h3
+                            className="font-inter dark:text-bright-gray line-clamp-3 text-[13px] leading-[18px] font-semibold break-words text-[#18181B]"
                             title={document.name}
                           >
                             {document.name}
-                          </td>
-                          <td className="px-4 py-4 text-sm whitespace-nowrap text-gray-700 group-hover:bg-gray-50 dark:text-[#E0E0E0] dark:group-hover:bg-gray-800/50">
-                            {document.date ? formatDate(document.date) : ''}
-                          </td>
-                          <td className="px-4 py-4 text-sm whitespace-nowrap text-gray-700 group-hover:bg-gray-50 dark:text-[#E0E0E0] dark:group-hover:bg-gray-800/50">
+                          </h3>
+                          <div
+                            ref={getMenuRef(docId)}
+                            className="relative flex items-center justify-end"
+                          >
+                            {document.syncFrequency && (
+                              <DropdownMenu
+                                name={t('settings.documents.sync')}
+                                options={syncOptions}
+                                onSelect={(value: string) => {
+                                  handleManageSync(document, value);
+                                }}
+                                defaultValue={document.syncFrequency}
+                                icon={SyncIcon}
+                                isOpen={
+                                  syncMenuState.docId === docId &&
+                                  syncMenuState.isOpen
+                                }
+                                onOpenChange={(isOpen) => {
+                                  setSyncMenuState((prev) => ({
+                                    ...prev,
+                                    isOpen,
+                                    docId: isOpen ? docId : null,
+                                    document: isOpen ? document : null,
+                                  }));
+                                }}
+                                anchorRef={getMenuRef(docId)}
+                                position="bottom-left"
+                                offset={{ x: 24, y: -24 }}
+                                className="min-w-[120px]"
+                              />
+                            )}
+                            <button
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleMenuClick(e, docId);
+                              }}
+                              className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E]"
+                              aria-label="Open menu"
+                              data-testid={`menu-button-${docId}`}
+                            >
+                              <img
+                                src={ThreeDots}
+                                alt={t('convTile.menu')}
+                                className="opacity-60 hover:opacity-100"
+                              />
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="mt-auto flex items-center justify-between pt-3">
+                        <div className="font-inter text-[12px] leading-[18px] font-[500] text-[#848484] dark:text-[#848484]">
+                          {document.date ? formatDate(document.date) : ''}
+                        </div>
+                        <div className="font-inter text-[12px] leading-[18px]">
+                          <span className="dark:text-bright-gray font-[400] text-[#18181B]">
+                            {t('settings.documents.tokenUsage')}:
+                          </span>
+                          <span className="ml-1 font-[400] text-[#848484] dark:text-[#848484]">
                             {document.tokens
                               ? formatTokens(+document.tokens)
                               : ''}
-                          </td>
-                          <td
-                            className="px-4 py-4 text-right group-hover:bg-gray-50 dark:group-hover:bg-gray-800/50"
-                            onClick={(e) => e.stopPropagation()}
-                          >
-                            <div
-                              ref={getMenuRef(docId)}
-                              className="relative flex items-center justify-end gap-3"
-                            >
-                              {document.syncFrequency && (
-                                <DropdownMenu
-                                  name={t('settings.documents.sync')}
-                                  options={syncOptions}
-                                  onSelect={(value: string) => {
-                                    handleManageSync(document, value);
-                                  }}
-                                  defaultValue={document.syncFrequency}
-                                  icon={SyncIcon}
-                                  isOpen={
-                                    syncMenuState.docId === docId &&
-                                    syncMenuState.isOpen
-                                  }
-                                  onOpenChange={(isOpen) => {
-                                    setSyncMenuState((prev) => ({
-                                      ...prev,
-                                      isOpen,
-                                      docId: isOpen ? docId : null,
-                                      document: isOpen ? document : null,
-                                    }));
-                                  }}
-                                  anchorRef={getMenuRef(docId)}
-                                  position="bottom-left"
-                                  offset={{ x: 24, y: -24 }}
-                                  className="min-w-[120px]"
-                                />
-                              )}
-                              <button
-                                onClick={(e) => handleMenuClick(e, docId)}
-                                className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
-                                aria-label="Open menu"
-                                data-testid={`menu-button-${docId}`}
-                              >
-                                <img
-                                  src={ThreeDots}
-                                  alt={t('convTile.menu')}
-                                  className="h-4 w-4 opacity-60 hover:opacity-100"
-                                />
-                              </button>
-                              <ContextMenu
-                                isOpen={activeMenuId === docId}
-                                setIsOpen={(isOpen) => {
-                                  setActiveMenuId(isOpen ? docId : null);
-                                }}
-                                options={getActionOptions(index, document)}
-                                anchorRef={getMenuRef(docId)}
-                                position="bottom-left"
-                                offset={{ x: 48, y: 0 }}
-                                className="z-50"
-                              />
-                            </div>
-                          </td>
-                        </tr>
-                      );
-                    })
-                  )}
-                </tbody>
-              </table>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    <ContextMenu
+                      isOpen={activeMenuId === docId}
+                      setIsOpen={(isOpen) => {
+                        setActiveMenuId(isOpen ? docId : null);
+                      }}
+                      options={getActionOptions(index, document)}
+                      anchorRef={getMenuRef(docId)}
+                      position="bottom-left"
+                      offset={{ x: 48, y: 0 }}
+                      className="z-50"
+                    />
+                  </div>
+                );
+              })}
             </div>
-          </div>
+          )}
         </div>
       </div>
 

From f60c516185149bac5ca4544c3621e61ff4a1916c Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Fri, 11 Jul 2025 01:44:30 +0530
Subject: [PATCH 09/57] (feat:dir_tree) table with folder contents

---
 frontend/src/components/FileTreeComponent.tsx | 357 ++++++++++++++++++
 1 file changed, 357 insertions(+)
 create mode 100644 frontend/src/components/FileTreeComponent.tsx

diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
new file mode 100644
index 00000000..b106c106
--- /dev/null
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -0,0 +1,357 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useSelector } from 'react-redux';
+import userService from '../api/services/userService';
+import FileIcon from '../assets/file.svg';
+import FolderIcon from '../assets/folder.svg';
+import ArrowLeft from '../assets/arrow-left.svg';
+import ThreeDots from '../assets/three-dots.svg';
+import EyeView from '../assets/eye-view.svg';
+import OutlineSource from '../assets/outline-source.svg';
+import Trash from '../assets/red-trash.svg';
+import Spinner from './Spinner';
+import { useTranslation } from 'react-i18next';
+import ContextMenu, { MenuOption } from './ContextMenu';
+
+interface FileNode {
+  type?: string;
+  token_count?: number;
+  size_bytes?: number;
+  [key: string]: any;
+}
+
+interface DirectoryStructure {
+  [key: string]: FileNode;
+}
+
+interface FileTreeComponentProps {
+  docId: string;
+  sourceName: string;
+  onBackToDocuments?: () => void;
+}
+
+const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
+  docId,
+  sourceName,
+  onBackToDocuments,
+}) => {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+  const [directoryStructure, setDirectoryStructure] =
+    useState<DirectoryStructure | null>(null);
+  const [currentPath, setCurrentPath] = useState<string[]>([]);
+  const token = useSelector((state: any) => state.auth?.token);
+  const [activeMenuId, setActiveMenuId] = useState<string | null>(null);
+  const menuRefs = useRef<{
+    [key: string]: React.RefObject<HTMLDivElement | null>;
+  }>({});
+
+  useEffect(() => {
+    const fetchDirectoryStructure = async () => {
+      try {
+        setLoading(true);
+        const response = await userService.getDirectoryStructure(docId, token);
+        const data = await response.json();
+
+        if (data && data.directory_structure) {
+          setDirectoryStructure(data.directory_structure);
+        } else {
+          setError('Invalid response format');
+        }
+      } catch (err) {
+        setError('Failed to load directory structure');
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (docId) {
+      fetchDirectoryStructure();
+    }
+  }, [docId, token]);
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const navigateToDirectory = (dirName: string) => {
+    setCurrentPath((prev) => [...prev, dirName]);
+  };
+
+  const navigateUp = () => {
+    setCurrentPath((prev) => prev.slice(0, -1));
+  };
+
+  const getCurrentDirectory = (): DirectoryStructure => {
+    if (!directoryStructure) return {};
+
+    let current: any = directoryStructure;
+    for (const dir of currentPath) {
+      if (current[dir] && !current[dir].type) {
+        current = current[dir];
+      } else {
+        return {};
+      }
+    }
+    return current;
+  };
+
+  const handleBackNavigation = () => {
+    if (currentPath.length === 0) {
+      if (onBackToDocuments) {
+        onBackToDocuments();
+      }
+    } else {
+      navigateUp();
+    }
+  };
+
+  const getMenuRef = (itemId: string) => {
+    if (!menuRefs.current[itemId]) {
+      menuRefs.current[itemId] = React.createRef<HTMLDivElement>();
+    }
+    return menuRefs.current[itemId];
+  };
+
+  const handleMenuClick = (e: React.MouseEvent, itemId: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (activeMenuId === itemId) {
+      setActiveMenuId(null);
+      return;
+    }
+    setActiveMenuId(itemId);
+  };
+
+  const getActionOptions = (name: string, isFile: boolean): MenuOption[] => {
+    const options: MenuOption[] = [];
+
+    if (isFile) {
+      options.push({
+        icon: EyeView,
+        label: t('settings.documents.view'),
+        onClick: (event: React.SyntheticEvent) => {
+          event.stopPropagation();
+          console.log('View file:', name);
+          // View file action will be implemented later
+        },
+        iconWidth: 18,
+        iconHeight: 18,
+        variant: 'primary',
+      });
+    }
+
+    options.push({
+      icon: Trash,
+      label: t('convTile.delete'),
+      onClick: (event: React.SyntheticEvent) => {
+        event.stopPropagation();
+        console.log('Delete item:', name);
+        // Delete action will be implemented later
+      },
+      iconWidth: 18,
+      iconHeight: 18,
+      variant: 'danger',
+    });
+
+    return options;
+  };
+
+  const renderPathNavigation = () => {
+    return (
+      <div className="mb-4 flex items-center text-sm">
+        <button
+          className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
+          onClick={handleBackNavigation}
+        >
+          <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
+        </button>
+
+        <div className="flex items-center">
+          <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5" />
+          <span className="text-purple-30 font-medium">{sourceName}</span>
+          {currentPath.length > 0 && (
+            <>
+              <span className="mx-1 text-gray-500">/</span>
+              {currentPath.map((dir, index) => (
+                <React.Fragment key={index}>
+                  <span className="text-gray-700 dark:text-gray-300">
+                    {dir}
+                  </span>
+                  {index < currentPath.length - 1 && (
+                    <span className="mx-1 text-gray-500">/</span>
+                  )}
+                </React.Fragment>
+              ))}
+            </>
+          )}
+        </div>
+      </div>
+    );
+  };
+  const renderFileTree = (structure: DirectoryStructure): React.ReactNode[] => {
+    const entries = Object.entries(structure);
+    const directories = entries.filter(([_, node]) => !node.type);
+    const files = entries.filter(([_, node]) => node.type);
+
+    return [
+      ...directories.map(([name, node]) => {
+        const itemId = `dir-${name}`;
+        const menuRef = getMenuRef(itemId);
+
+        return (
+          <tr
+            key={itemId}
+            className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]"
+          >
+            <td className="px-4 py-2">
+              <div
+                className="flex cursor-pointer items-center"
+                onClick={() => navigateToDirectory(name)}
+              >
+                <img src={FolderIcon} alt="Folder" className="mr-2 h-4 w-4" />
+                <span className="text-sm">{name}</span>
+              </div>
+            </td>
+            <td className="px-4 py-2 text-sm">-</td>
+            <td className="px-4 py-2 text-sm">-</td>
+            <td className="w-10 px-4 py-2 text-sm">
+              <div ref={menuRef} className="relative">
+                <button
+                  onClick={(e) => handleMenuClick(e, itemId)}
+                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E]"
+                  aria-label="Open menu"
+                >
+                  <img
+                    src={ThreeDots}
+                    alt="Menu"
+                    className="opacity-60 hover:opacity-100"
+                  />
+                </button>
+                <ContextMenu
+                  isOpen={activeMenuId === itemId}
+                  setIsOpen={(isOpen) =>
+                    setActiveMenuId(isOpen ? itemId : null)
+                  }
+                  options={getActionOptions(name, false)}
+                  anchorRef={menuRef}
+                  position="bottom-left"
+                  offset={{ x: 0, y: 8 }}
+                />
+              </div>
+            </td>
+          </tr>
+        );
+      }),
+      ...files.map(([name, node]) => {
+        const itemId = `file-${name}`;
+        const menuRef = getMenuRef(itemId);
+
+        return (
+          <tr
+            key={itemId}
+            className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]"
+          >
+            <td className="px-4 py-2">
+              <div className="flex items-center">
+                <img src={FileIcon} alt="File" className="mr-2 h-4 w-4" />
+                <span className="text-sm">{name}</span>
+              </div>
+            </td>
+            <td className="px-4 py-2 text-sm">
+              {node.token_count?.toLocaleString() || '-'}
+            </td>
+            <td className="px-4 py-2 text-sm">
+              {node.size_bytes ? formatBytes(node.size_bytes) : '-'}
+            </td>
+            <td className="w-10 px-4 py-2 text-sm">
+              <div ref={menuRef} className="relative">
+                <button
+                  onClick={(e) => handleMenuClick(e, itemId)}
+                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E]"
+                  aria-label="Open menu"
+                >
+                  <img
+                    src={ThreeDots}
+                    alt="Menu"
+                    className="opacity-60 hover:opacity-100"
+                  />
+                </button>
+                <ContextMenu
+                  isOpen={activeMenuId === itemId}
+                  setIsOpen={(isOpen) =>
+                    setActiveMenuId(isOpen ? itemId : null)
+                  }
+                  options={getActionOptions(name, true)}
+                  anchorRef={menuRef}
+                  position="bottom-left"
+                  offset={{ x: 0, y: 8 }}
+                />
+              </div>
+            </td>
+          </tr>
+        );
+      }),
+    ];
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (error) {
+    return <div className="p-4 text-center text-red-500">{error}</div>;
+  }
+
+  if (!directoryStructure) {
+    return (
+      <div className="p-4 text-center text-gray-500">
+        No directory structure available
+      </div>
+    );
+  }
+
+  const currentDirectory = getCurrentDirectory();
+
+  return (
+    <div className="w-full">
+      <div className="mb-4">{renderPathNavigation()}</div>
+
+      <div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
+        <table className="min-w-full table-fixed bg-white dark:bg-gray-900">
+          <thead className="bg-gray-100 dark:bg-gray-800">
+            <tr className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]">
+              <th className="w-3/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
+                Name
+              </th>
+              <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
+                Tokens
+              </th>
+              <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
+                Size
+              </th>
+              <th className="w-[60px] px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
+                <span className="sr-only">Actions</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody className="[&>tr:last-child]:border-b-0">
+            {renderFileTree(currentDirectory)}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default FileTreeComponent;

From a24a3f868cc087c52ef3178661adab5d62093626 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Mon, 14 Jul 2025 22:56:03 +0530
Subject: [PATCH 10/57] (feat:dir-structure) adding route

---
 application/api/user/routes.py | 50 ++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index 71d23375..f51ecc10 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -7,6 +7,8 @@ import shutil
 import uuid
 from functools import wraps
 from typing import Optional, Tuple
+import tempfile
+import zipfile
 
 from bson.binary import Binary, UuidRepresentation
 from bson.dbref import DBRef
@@ -3609,3 +3611,51 @@ class ServeImage(Resource):
             return make_response(
                 jsonify({"success": False, "message": "Error retrieving image"}), 500
             )
+
+
+@user_ns.route("/api/directory_structure")
+class DirectoryStructure(Resource):
+    @api.doc(
+        description="Get the directory structure for a document",
+        params={"id": "The document ID"},
+    )
+    def get(self):
+        decoded_token = request.decoded_token
+        if not decoded_token:
+            return make_response(jsonify({"success": False}), 401)
+        
+        user = decoded_token.get("sub")
+        doc_id = request.args.get("id")
+        
+        if not doc_id:
+            return make_response(
+                jsonify({"error": "Document ID is required"}), 400
+            )
+            
+        if not ObjectId.is_valid(doc_id):
+            return make_response(jsonify({"error": "Invalid document ID"}), 400)
+            
+        try:
+            doc = sources_collection.find_one({"_id": ObjectId(doc_id), "user": user})
+            if not doc:
+                return make_response(
+                    jsonify({"error": "Document not found or access denied"}), 404
+                )
+                
+            directory_structure = doc.get("directory_structure", {})
+            
+            return make_response(
+                jsonify({
+                    "success": True,
+                    "directory_structure": directory_structure,
+                    "base_path": doc.get("file_path", "")
+                }), 200
+            )
+            
+        except Exception as e:
+            current_app.logger.error(
+                f"Error retrieving directory structure: {e}", exc_info=True
+            )
+            return make_response(
+                jsonify({"success": False, "error": str(e)}), 500
+            )

From a38d71bbfb0aa3b1df87f0a78f5c1c3b53ba0409 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Mon, 14 Jul 2025 22:57:29 +0530
Subject: [PATCH 11/57] (feat:get_chunks) filtered by relative path

---
 application/api/user/routes.py | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index f51ecc10..d7b923bf 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -3322,8 +3322,13 @@ class DeleteTool(Resource):
 @user_ns.route("/api/get_chunks")
 class GetChunks(Resource):
     @api.doc(
-        description="Retrieves all chunks associated with a document",
-        params={"id": "The document ID"},
+        description="Retrieves chunks from a document, optionally filtered by file path",
+        params={
+            "id": "The document ID",
+            "page": "Page number for pagination",
+            "per_page": "Number of chunks per page",
+            "file_path": "Optional: Filter chunks by relative file path"
+        },
     )
     def get(self):
         decoded_token = request.decoded_token
@@ -3333,6 +3338,7 @@ class GetChunks(Resource):
         doc_id = request.args.get("id")
         page = int(request.args.get("page", 1))
         per_page = int(request.args.get("per_page", 10))
+        file_path = request.args.get("file_path")
 
         if not ObjectId.is_valid(doc_id):
             return make_response(jsonify({"error": "Invalid doc_id"}), 400)
@@ -3344,6 +3350,22 @@ class GetChunks(Resource):
         try:
             store = get_vector_store(doc_id)
             chunks = store.get_chunks()
+            
+            if file_path:
+                filtered_chunks = []
+                for chunk in chunks:
+                    metadata = chunk.get("metadata", {})
+                    source = metadata.get("source", "")
+                    
+                    if isinstance(source, str) and source.endswith(file_path):
+                        filtered_chunks.append(chunk)
+                    elif isinstance(source, list):
+                        for src in source:
+                            if isinstance(src, str) and src.endswith(file_path):
+                                filtered_chunks.append(chunk)
+                                break
+                chunks = filtered_chunks
+            
             total_chunks = len(chunks)
             start = (page - 1) * per_page
             end = start + per_page
@@ -3356,6 +3378,7 @@ class GetChunks(Resource):
                         "per_page": per_page,
                         "total": total_chunks,
                         "chunks": paginated_chunks,
+                        "file_path": file_path if file_path else None
                     }
                 ),
                 200,

From 5b07c5f2e84faca36ba520fd80241ba5743772b2 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 15 Jul 2025 15:31:26 +0530
Subject: [PATCH 12/57] (feat:ingestion) unzip, extract and store

---
 application/api/user/routes.py | 190 ++++++++++-----------------------
 application/worker.py          |  54 +++++++---
 2 files changed, 95 insertions(+), 149 deletions(-)

diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index d7b923bf..68936dcc 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -548,138 +548,60 @@ class UploadFile(Resource):
         # Create safe versions for filesystem operations
         safe_user = safe_filename(user)
         dir_name = safe_filename(job_name)
+        base_path = f"{settings.UPLOAD_FOLDER}/{safe_user}/{dir_name}"
 
         try:
             storage = StorageCreator.get_storage()
-            base_path = f"{settings.UPLOAD_FOLDER}/{safe_user}/{dir_name}"
-
-            if len(files) > 1:
-                temp_files = []
-                for file in files:
-                    original_filename = file.filename
-                    safe_file = safe_filename(original_filename)
-                    temp_path = f"{base_path}/temp/{safe_file}"
-                    storage.save_file(file, temp_path)
-                    temp_files.append({"path": temp_path, "original_name": original_filename})
-                    print(f"Saved file: {original_filename}")
-                zip_filename = f"{dir_name}.zip"
-                zip_path = f"{base_path}/{zip_filename}"
-                zip_temp_path = None
-
-                def create_zip_archive(temp_paths, dir_name, storage):
-                    import tempfile
-
-                    with tempfile.NamedTemporaryFile(
-                        delete=False, suffix=".zip"
-                    ) as temp_zip_file:
-                        zip_output_path = temp_zip_file.name
-                    with tempfile.TemporaryDirectory() as stage_dir:
-                        for path in temp_paths:
-                            try:
-                                file_data = storage.get_file(path)
-                                with open(
-                                    os.path.join(stage_dir, os.path.basename(path)),
-                                    "wb",
-                                ) as f:
-                                    f.write(file_data.read())
-                            except Exception as e:
-                                current_app.logger.error(
-                                    f"Error processing file {path} for zipping: {e}",
-                                    exc_info=True,
-                                )
-                                if os.path.exists(zip_output_path):
-                                    os.remove(zip_output_path)
-                                raise
-                        try:
-                            shutil.make_archive(
-                                base_name=zip_output_path.replace(".zip", ""),
-                                format="zip",
-                                root_dir=stage_dir,
-                            )
-                        except Exception as e:
-                            current_app.logger.error(
-                                f"Error creating zip archive: {e}", exc_info=True
-                            )
-                            if os.path.exists(zip_output_path):
-                                os.remove(zip_output_path)
-                            raise
-                    return zip_output_path
-
-                try:
-                    zip_temp_path = create_zip_archive(temp_files, dir_name, storage)
-                    with open(zip_temp_path, "rb") as zip_file:
-                        storage.save_file(zip_file, zip_path)
-                    task = ingest.delay(
-                        settings.UPLOAD_FOLDER,
-                        [
-                            ".rst",
-                            ".md",
-                            ".pdf",
-                            ".txt",
-                            ".docx",
-                            ".csv",
-                            ".epub",
-                            ".html",
-                            ".mdx",
-                            ".json",
-                            ".xlsx",
-                            ".pptx",
-                            ".png",
-                            ".jpg",
-                            ".jpeg",
-                        ],
-                        job_name,
-                        user,
-                        file_path=zip_path,
-                        filename=zip_filename
-                    )
-                finally:
-                    # Clean up temporary files
-                    for temp_path in temp_files:
-                        try:
-                            storage.delete_file(temp_path)
-                        except Exception as e:
-                            current_app.logger.error(
-                                f"Error deleting temporary file {temp_path}: {e}",
-                                exc_info=True,
-                            )
-                    # Clean up the zip file if it was created
-                    if zip_temp_path and os.path.exists(zip_temp_path):
-                        os.remove(zip_temp_path)
-            else:  # Keep this else block for single file upload
-                # For single file
-
-                file = files[0]
+            
+            
+            for file in files:
                 original_filename = file.filename
                 safe_file = safe_filename(original_filename)
-                file_path = f"{base_path}/{safe_file}"
-
-                storage.save_file(file, file_path)
-
-                task = ingest.delay(
-                    settings.UPLOAD_FOLDER,
-                    [
-                        ".rst",
-                        ".md",
-                        ".pdf",
-                        ".txt",
-                        ".docx",
-                        ".csv",
-                        ".epub",
-                        ".html",
-                        ".mdx",
-                        ".json",
-                        ".xlsx",
-                        ".pptx",
-                        ".png",
-                        ".jpg",
-                        ".jpeg",
-                    ],
-                    job_name,
-                    user,
-                    file_path=file_path,
-                    filename=original_filename
-                )
+                
+                with tempfile.TemporaryDirectory() as temp_dir:
+                    temp_file_path = os.path.join(temp_dir, safe_file)
+                    file.save(temp_file_path)
+                    
+                    if zipfile.is_zipfile(temp_file_path):
+                        try:
+                            with zipfile.ZipFile(temp_file_path, 'r') as zip_ref:
+                                zip_ref.extractall(path=temp_dir)
+                                
+                                # Walk through extracted files and upload them
+                                for root, _, files in os.walk(temp_dir):
+                                    for extracted_file in files:
+                                        if os.path.join(root, extracted_file) == temp_file_path:
+                                            continue
+                                            
+                                        rel_path = os.path.relpath(os.path.join(root, extracted_file), temp_dir)
+                                        storage_path = f"{base_path}/{rel_path}"
+                                        
+                                        with open(os.path.join(root, extracted_file), 'rb') as f:
+                                            storage.save_file(f, storage_path)
+                        except Exception as e:
+                            current_app.logger.error(f"Error extracting zip: {e}", exc_info=True)
+                            # If zip extraction fails, save the original zip file
+                            file_path = f"{base_path}/{safe_file}"
+                            with open(temp_file_path, 'rb') as f:
+                                storage.save_file(f, file_path)
+                    else:
+                        # For non-zip files, save directly
+                        file_path = f"{base_path}/{safe_file}"
+                        with open(temp_file_path, 'rb') as f:
+                            storage.save_file(f, file_path)
+            
+            task = ingest.delay(
+                settings.UPLOAD_FOLDER,
+                [
+                    ".rst", ".md", ".pdf", ".txt", ".docx", ".csv", ".epub",
+                    ".html", ".mdx", ".json", ".xlsx", ".pptx", ".png",
+                    ".jpg", ".jpeg",
+                ],
+                job_name,
+                user,
+                file_path=base_path,
+                filename=dir_name
+            )
         except Exception as err:
             current_app.logger.error(f"Error uploading file: {err}", exc_info=True)
             return make_response(jsonify({"success": False}), 400)
@@ -831,6 +753,7 @@ class PaginatedSources(Resource):
                     "tokens": doc.get("tokens", ""),
                     "retriever": doc.get("retriever", "classic"),
                     "syncFrequency": doc.get("sync_frequency", ""),
+                    "isNested": bool(doc.get("directory_structure"))
                 }
                 paginated_docs.append(doc_data)
             response = {
@@ -878,6 +801,7 @@ class CombinedJson(Resource):
                         "tokens": index.get("tokens", ""),
                         "retriever": index.get("retriever", "classic"),
                         "syncFrequency": index.get("sync_frequency", ""),
+                        "is_nested": bool(index.get("directory_structure"))
                     }
                 )
         except Exception as err:
@@ -3327,7 +3251,7 @@ class GetChunks(Resource):
             "id": "The document ID",
             "page": "Page number for pagination",
             "per_page": "Number of chunks per page",
-            "file_path": "Optional: Filter chunks by relative file path"
+            "path": "Optional: Filter chunks by relative file path"
         },
     )
     def get(self):
@@ -3338,7 +3262,7 @@ class GetChunks(Resource):
         doc_id = request.args.get("id")
         page = int(request.args.get("page", 1))
         per_page = int(request.args.get("per_page", 10))
-        file_path = request.args.get("file_path")
+        path = request.args.get("path")
 
         if not ObjectId.is_valid(doc_id):
             return make_response(jsonify({"error": "Invalid doc_id"}), 400)
@@ -3351,17 +3275,17 @@ class GetChunks(Resource):
             store = get_vector_store(doc_id)
             chunks = store.get_chunks()
             
-            if file_path:
+            if path:
                 filtered_chunks = []
                 for chunk in chunks:
                     metadata = chunk.get("metadata", {})
                     source = metadata.get("source", "")
                     
-                    if isinstance(source, str) and source.endswith(file_path):
+                    if isinstance(source, str) and source.endswith(path):
                         filtered_chunks.append(chunk)
                     elif isinstance(source, list):
                         for src in source:
-                            if isinstance(src, str) and src.endswith(file_path):
+                            if isinstance(src, str) and src.endswith(path):
                                 filtered_chunks.append(chunk)
                                 break
                 chunks = filtered_chunks
@@ -3378,7 +3302,7 @@ class GetChunks(Resource):
                         "per_page": per_page,
                         "total": total_chunks,
                         "chunks": paginated_chunks,
-                        "file_path": file_path if file_path else None
+                        "path": path if path else None
                     }
                 ),
                 200,
diff --git a/application/worker.py b/application/worker.py
index 8cc7ac20..6e3cb1ae 100755
--- a/application/worker.py
+++ b/application/worker.py
@@ -221,31 +221,53 @@ def ingest_worker(
     
     storage = StorageCreator.get_storage()
     
-    logging.info(f"Ingest file: {file_path}", extra={"user": user, "job": job_name})
+    logging.info(f"Ingest path: {file_path}", extra={"user": user, "job": job_name})
 
     # Create temporary working directory
     with tempfile.TemporaryDirectory() as temp_dir:
         try:
             os.makedirs(temp_dir, exist_ok=True)
 
-            # Download file from storage to temp directory
-            temp_filename = os.path.basename(file_path)
-            temp_file_path = os.path.join(temp_dir, temp_filename)
-            
-            file_data = storage.get_file(file_path)
+            if storage.is_directory(file_path):
+                # Handle directory case
+                logging.info(f"Processing directory: {file_path}")
+                files_list = storage.list_files(file_path)
+                
+                for storage_file_path in files_list:
+                    if storage.is_directory(storage_file_path):
+                        continue
+                        
+                    # Create relative path structure in temp directory
+                    rel_path = os.path.relpath(storage_file_path, file_path)
+                    local_file_path = os.path.join(temp_dir, rel_path)
+                    
+                    os.makedirs(os.path.dirname(local_file_path), exist_ok=True)
+                    
+                    # Download file
+                    try:
+                        file_data = storage.get_file(storage_file_path)
+                        with open(local_file_path, "wb") as f:
+                            f.write(file_data.read())
+                    except Exception as e:
+                        logging.error(f"Error downloading file {storage_file_path}: {e}")
+                        continue
+            else:
+                # Handle single file case
+                temp_filename = os.path.basename(file_path)
+                temp_file_path = os.path.join(temp_dir, temp_filename)
+                
+                file_data = storage.get_file(file_path)
+                with open(temp_file_path, "wb") as f:
+                    f.write(file_data.read())
 
-            with open(temp_file_path, "wb") as f:
-                f.write(file_data.read())
+                # Handle zip files
+                if temp_filename.endswith(".zip"):
+                    logging.info(f"Extracting zip file: {temp_filename}")
+                    extract_zip_recursive(
+                        temp_file_path, temp_dir, current_depth=0, max_depth=RECURSION_DEPTH
+                    )
 
             self.update_state(state="PROGRESS", meta={"current": 1})
-
-            # Handle zip files
-            if temp_filename.endswith(".zip"):
-                logging.info(f"Extracting zip file: {temp_filename}")
-                extract_zip_recursive(
-                    temp_file_path, temp_dir, current_depth=0, max_depth=RECURSION_DEPTH
-                )
-
             if sample:
                 logging.info(f"Sample mode enabled. Using {limit} documents.")
 

From 1d9af05e9ecb3442bb2ef892e6db38f4c6f2aba3 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 15 Jul 2025 15:34:16 +0530
Subject: [PATCH 13/57] (feat:storage) is dir fnc

---
 application/storage/base.py  | 13 +++++++++++++
 application/storage/local.py | 13 +++++++++++++
 application/storage/s3.py    | 25 +++++++++++++++++++++++++
 3 files changed, 51 insertions(+)

diff --git a/application/storage/base.py b/application/storage/base.py
index 07f33c7b..50eaac7e 100644
--- a/application/storage/base.py
+++ b/application/storage/base.py
@@ -93,3 +93,16 @@ class BaseStorage(ABC):
             List[str]: List of file paths
         """
         pass
+        
+    @abstractmethod
+    def is_directory(self, path: str) -> bool:
+        """
+        Check if a path is a directory.
+
+        Args:
+            path: Path to check
+
+        Returns:
+            bool: True if the path is a directory
+        """
+        pass
diff --git a/application/storage/local.py b/application/storage/local.py
index fb21f08d..b4530501 100644
--- a/application/storage/local.py
+++ b/application/storage/local.py
@@ -101,3 +101,16 @@ class LocalStorage(BaseStorage):
             raise FileNotFoundError(f"File not found: {full_path}")
 
         return processor_func(local_path=full_path, **kwargs)
+
+    def is_directory(self, path: str) -> bool:
+        """
+        Check if a path is a directory in local storage.
+        
+        Args:
+            path: Path to check
+        
+        Returns:
+            bool: True if the path is a directory, False otherwise
+        """
+        full_path = self._get_full_path(path)
+        return os.path.isdir(full_path)
diff --git a/application/storage/s3.py b/application/storage/s3.py
index 1babb843..36333f1c 100644
--- a/application/storage/s3.py
+++ b/application/storage/s3.py
@@ -130,3 +130,28 @@ class S3Storage(BaseStorage):
             except Exception as e:
                 logging.error(f"Error processing S3 file {path}: {e}", exc_info=True)
                 raise
+
+    def is_directory(self, path: str) -> bool:
+        """
+        Check if a path is a directory in S3 storage.
+        
+        In S3, directories are virtual concepts. A path is considered a directory
+        if there are objects with the path as a prefix.
+        
+        Args:
+            path: Path to check
+        
+        Returns:
+            bool: True if the path is a directory, False otherwise
+        """
+        # Ensure path ends with a slash if not empty
+        if path and not path.endswith('/'):
+            path += '/'
+        
+        response = self.s3.list_objects_v2(
+            Bucket=self.bucket_name,
+            Prefix=path,
+            MaxKeys=1
+        )
+        
+        return 'Contents' in response

From 8a7806ab2dcfd265fa22fa5d1513d6dc2ac500e3 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 15 Jul 2025 19:15:40 +0530
Subject: [PATCH 14/57] (feat:nested source view) file tree, chunks display

---
 frontend/src/api/endpoints.ts                 |  11 +-
 frontend/src/api/services/userService.ts      |   5 +-
 frontend/src/assets/file.svg                  |   3 +
 frontend/src/assets/folder.svg                |   3 +
 frontend/src/assets/outline-source.svg        |   3 +
 frontend/src/components/DocumentChunks.tsx    | 273 +++++++++++++++
 frontend/src/components/FileTreeComponent.tsx | 199 +++++++----
 frontend/src/models/misc.ts                   |   1 +
 frontend/src/settings/Documents.tsx           | 312 ++----------------
 9 files changed, 452 insertions(+), 358 deletions(-)
 create mode 100644 frontend/src/assets/file.svg
 create mode 100644 frontend/src/assets/folder.svg
 create mode 100644 frontend/src/assets/outline-source.svg
 create mode 100644 frontend/src/components/DocumentChunks.tsx

diff --git a/frontend/src/api/endpoints.ts b/frontend/src/api/endpoints.ts
index bb98f02a..37c52c41 100644
--- a/frontend/src/api/endpoints.ts
+++ b/frontend/src/api/endpoints.ts
@@ -38,13 +38,20 @@ const endpoints = {
     UPDATE_TOOL_STATUS: '/api/update_tool_status',
     UPDATE_TOOL: '/api/update_tool',
     DELETE_TOOL: '/api/delete_tool',
-    GET_CHUNKS: (docId: string, page: number, per_page: number) =>
-      `/api/get_chunks?id=${docId}&page=${page}&per_page=${per_page}`,
+    GET_CHUNKS: (
+      docId: string,
+      page: number,
+      per_page: number,
+      path?: string,
+    ) =>
+      `/api/get_chunks?id=${docId}&page=${page}&per_page=${per_page}${path ? `&path=${encodeURIComponent(path)}` : ''}`,
     ADD_CHUNK: '/api/add_chunk',
     DELETE_CHUNK: (docId: string, chunkId: string) =>
       `/api/delete_chunk?id=${docId}&chunk_id=${chunkId}`,
     UPDATE_CHUNK: '/api/update_chunk',
     STORE_ATTACHMENT: '/api/store_attachment',
+    DIRECTORY_STRUCTURE: (docId: string) =>
+      `/api/directory_structure?id=${docId}`,
   },
   CONVERSATION: {
     ANSWER: '/api/answer',
diff --git a/frontend/src/api/services/userService.ts b/frontend/src/api/services/userService.ts
index ffb00a6b..43671657 100644
--- a/frontend/src/api/services/userService.ts
+++ b/frontend/src/api/services/userService.ts
@@ -86,8 +86,9 @@ const userService = {
     page: number,
     perPage: number,
     token: string | null,
+    path?: string,
   ): Promise<any> =>
-    apiClient.get(endpoints.USER.GET_CHUNKS(docId, page, perPage), token),
+    apiClient.get(endpoints.USER.GET_CHUNKS(docId, page, perPage, path), token),
   addChunk: (data: any, token: string | null): Promise<any> =>
     apiClient.post(endpoints.USER.ADD_CHUNK, data, token),
   deleteChunk: (
@@ -98,6 +99,8 @@ const userService = {
     apiClient.delete(endpoints.USER.DELETE_CHUNK(docId, chunkId), token),
   updateChunk: (data: any, token: string | null): Promise<any> =>
     apiClient.put(endpoints.USER.UPDATE_CHUNK, data, token),
+  getDirectoryStructure: (docId: string, token: string | null): Promise<any> =>
+    apiClient.get(endpoints.USER.DIRECTORY_STRUCTURE(docId), token),
 };
 
 export default userService;
diff --git a/frontend/src/assets/file.svg b/frontend/src/assets/file.svg
new file mode 100644
index 00000000..7120a3c9
--- /dev/null
+++ b/frontend/src/assets/file.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 1.94971C0 0.983707 0.784 0.199707 1.75 0.199707H8.336C8.8 0.199707 9.245 0.383707 9.573 0.712707L12.487 3.62671C12.816 3.95471 13 4.39971 13 4.86371V14.4497C13 14.9138 12.8156 15.359 12.4874 15.6871C12.1592 16.0153 11.7141 16.1997 11.25 16.1997H1.75C1.28587 16.1997 0.840752 16.0153 0.512563 15.6871C0.184375 15.359 0 14.9138 0 14.4497V1.94971ZM1.75 1.69971C1.6837 1.69971 1.62011 1.72605 1.57322 1.77293C1.52634 1.81981 1.5 1.8834 1.5 1.94971V14.4497C1.5 14.5877 1.612 14.6997 1.75 14.6997H11.25C11.3163 14.6997 11.3799 14.6734 11.4268 14.6265C11.4737 14.5796 11.5 14.516 11.5 14.4497V6.19971H8.75C8.28587 6.19971 7.84075 6.01533 7.51256 5.68714C7.18437 5.35896 7 4.91384 7 4.44971V1.69971H1.75ZM8.5 1.76171V4.44971C8.5 4.58771 8.612 4.69971 8.75 4.69971H11.438L11.427 4.68671L8.513 1.77271L8.5 1.76171Z" fill="#59636E"/>
+</svg>
diff --git a/frontend/src/assets/folder.svg b/frontend/src/assets/folder.svg
new file mode 100644
index 00000000..2c2217f0
--- /dev/null
+++ b/frontend/src/assets/folder.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.75 0.599915C1.28587 0.599915 0.840752 0.784289 0.512563 1.11248C0.184374 1.44067 0 1.88579 0 2.34991L0 12.8499C0 13.8159 0.784 14.5999 1.75 14.5999H14.25C14.7141 14.5999 15.1592 14.4155 15.4874 14.0874C15.8156 13.7592 16 13.314 16 12.8499V4.34991C16 3.88579 15.8156 3.44067 15.4874 3.11248C15.1592 2.78429 14.7141 2.59991 14.25 2.59991H7.5C7.46119 2.59991 7.42291 2.59088 7.3882 2.57352C7.35348 2.55616 7.32329 2.53096 7.3 2.49991L6.4 1.29991C6.07 0.859915 5.55 0.599915 5 0.599915H1.75Z" fill="#A382E7"/>
+</svg>
diff --git a/frontend/src/assets/outline-source.svg b/frontend/src/assets/outline-source.svg
new file mode 100644
index 00000000..36b3aa6e
--- /dev/null
+++ b/frontend/src/assets/outline-source.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.25 5.25H12.25L10.5 3.5H5.25C4.2875 3.5 3.50875 4.2875 3.50875 5.25L3.5 15.75C3.5 16.7125 4.2875 17.5 5.25 17.5H19.25C20.2125 17.5 21 16.7125 21 15.75V7C21 6.0375 20.2125 5.25 19.25 5.25ZM19.25 15.75H5.25V5.25H9.77375L11.5238 7H19.25V15.75ZM17.5 10.5H7V8.75H17.5V10.5ZM14 14H7V12.25H14V14Z" fill="#949494"/>
+</svg>
diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
new file mode 100644
index 00000000..94307bc0
--- /dev/null
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -0,0 +1,273 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { selectToken } from '../preferences/preferenceSlice';
+import { useDarkTheme, useLoaderState } from '../hooks';
+import userService from '../api/services/userService';
+import ArrowLeft from '../assets/arrow-left.svg';
+import NoFilesIcon from '../assets/no-files.svg';
+import NoFilesDarkIcon from '../assets/no-files-dark.svg';
+import Spinner from '../components/Spinner';
+import Input from '../components/Input';
+import ChunkModal from '../modals/ChunkModal';
+import { ActiveState } from '../models/misc';
+import { ChunkType } from '../settings/types';
+
+interface DocumentChunksProps {
+  documentId: string;
+  documentName?: string;
+  handleGoBack: () => void;
+  showHeader?: boolean;
+  path?: string;
+}
+
+const DocumentChunks: React.FC<DocumentChunksProps> = ({
+  documentId,
+  documentName,
+  handleGoBack,
+  showHeader = true,
+  path,
+}) => {
+  const { t } = useTranslation();
+  const token = useSelector(selectToken);
+  const [isDarkTheme] = useDarkTheme();
+  const [paginatedChunks, setPaginatedChunks] = useState<ChunkType[]>([]);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(5);
+  const [totalChunks, setTotalChunks] = useState(0);
+  const [loading, setLoading] = useLoaderState(true);
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [addModal, setAddModal] = useState<ActiveState>('INACTIVE');
+  const [editModal, setEditModal] = useState<{
+    state: ActiveState;
+    chunk: ChunkType | null;
+  }>({ state: 'INACTIVE', chunk: null });
+
+  const fetchChunks = () => {
+    setLoading(true);
+    try {
+      userService
+        .getDocumentChunks(documentId, page, perPage, token, path)
+        .then((response) => {
+          if (!response.ok) {
+            setLoading(false);
+            setPaginatedChunks([]);
+            throw new Error('Failed to fetch chunks data');
+          }
+          return response.json();
+        })
+        .then((data) => {
+          setPage(data.page);
+          setPerPage(data.per_page);
+          setTotalChunks(data.total);
+          setPaginatedChunks(data.chunks);
+          setLoading(false);
+        });
+    } catch (e) {
+      console.log(e);
+      setLoading(false);
+    }
+  };
+
+  const handleAddChunk = (title: string, text: string) => {
+    try {
+      userService
+        .addChunk(
+          {
+            id: documentId,
+            text: text,
+            metadata: {
+              title: title,
+            },
+          },
+          token,
+        )
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error('Failed to add chunk');
+          }
+          fetchChunks();
+        });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const handleUpdateChunk = (title: string, text: string, chunk: ChunkType) => {
+    try {
+      userService
+        .updateChunk(
+          {
+            id: documentId,
+            chunk_id: chunk.doc_id,
+            text: text,
+            metadata: {
+              title: title,
+            },
+          },
+          token,
+        )
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error('Failed to update chunk');
+          }
+          fetchChunks();
+        });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const handleDeleteChunk = (chunk: ChunkType) => {
+    try {
+      userService
+        .deleteChunk(documentId, chunk.doc_id, token)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error('Failed to delete chunk');
+          }
+          setEditModal({ state: 'INACTIVE', chunk: null });
+          fetchChunks();
+        });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  useEffect(() => {
+    fetchChunks();
+  }, [page, perPage]);
+
+  return (
+    <div className="mt-8 flex flex-col">
+      {showHeader && (
+        <div className="text-eerie-black dark:text-bright-gray mb-3 flex items-center gap-3 text-sm">
+          <button
+            className="rounded-full border p-3 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
+            onClick={handleGoBack}
+          >
+            <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
+          </button>
+          <p className="mt-px">{t('settings.documents.backToAll')}</p>
+        </div>
+      )}
+      <div className="my-3 flex items-center justify-between gap-1">
+        <div className="text-eerie-black dark:text-bright-gray flex w-full items-center gap-2 sm:w-auto">
+          <p className="hidden text-2xl font-semibold sm:flex">{`${totalChunks} ${t('settings.documents.chunks')}`}</p>
+          <label htmlFor="chunk-search-input" className="sr-only">
+            {t('settings.documents.searchPlaceholder')}
+          </label>
+          <Input
+            maxLength={256}
+            placeholder={t('settings.documents.searchPlaceholder')}
+            name="chunk-search-input"
+            type="text"
+            id="chunk-search-input"
+            value={searchTerm}
+            onChange={(e) => {
+              setSearchTerm(e.target.value);
+            }}
+            borderVariant="thin"
+          />
+        </div>
+        <button
+          className="bg-purple-30 hover:bg-violets-are-blue flex h-[32px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white"
+          title={t('settings.documents.addNew')}
+          onClick={() => setAddModal('ACTIVE')}
+        >
+          {t('settings.documents.addNew')}
+        </button>
+      </div>
+      {loading ? (
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          <div className="col-span-2 mt-24 flex h-32 items-center justify-center lg:col-span-3">
+            <Spinner />
+          </div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {paginatedChunks.filter((chunk) => {
+            if (!chunk.metadata?.title) return true;
+            return chunk.metadata.title
+              .toLowerCase()
+              .includes(searchTerm.toLowerCase());
+          }).length === 0 ? (
+            <div className="col-span-2 mt-24 text-center text-gray-500 lg:col-span-3 dark:text-gray-400">
+              <img
+                src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
+                alt={t('settings.documents.noChunksAlt')}
+                className="mx-auto mb-2 h-24 w-24"
+              />
+              {t('settings.documents.noChunks')}
+            </div>
+          ) : (
+            paginatedChunks
+              .filter((chunk) => {
+                if (!chunk.metadata?.title) return true;
+                return chunk.metadata.title
+                  .toLowerCase()
+                  .includes(searchTerm.toLowerCase());
+              })
+              .map((chunk, index) => (
+                <div
+                  key={index}
+                  className="border-silver dark:border-silver/40 relative flex h-56 w-full flex-col justify-between rounded-2xl border p-6"
+                >
+                  <div className="w-full">
+                    <div className="flex w-full items-center justify-between">
+                      <button
+                        aria-label={'edit'}
+                        onClick={() => {
+                          setEditModal({
+                            state: 'ACTIVE',
+                            chunk: chunk,
+                          });
+                        }}
+                        className="text-left"
+                      >
+                        <h3 className="text-eerie-black dark:text-bright-gray line-clamp-2 text-base font-semibold">
+                          {chunk.metadata?.title ||
+                            t('settings.documents.untitled')}
+                        </h3>
+                      </button>
+                    </div>
+                    <div className="mt-2 h-[80px] overflow-hidden">
+                      <p className="text-eerie-black dark:text-bright-gray line-clamp-4 text-sm">
+                        {chunk.text}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ))
+          )}
+        </div>
+      )}
+
+      <ChunkModal
+        type="ADD"
+        modalState={addModal}
+        setModalState={setAddModal}
+        handleSubmit={handleAddChunk}
+      />
+      {editModal.chunk && (
+        <ChunkModal
+          type="EDIT"
+          modalState={editModal.state}
+          setModalState={(state) =>
+            setEditModal((prev) => ({ ...prev, state }))
+          }
+          handleSubmit={(title, text) => {
+            handleUpdateChunk(title, text, editModal.chunk as ChunkType);
+          }}
+          originalText={editModal.chunk?.text ?? ''}
+          originalTitle={editModal.chunk?.metadata?.title ?? ''}
+          handleDelete={() => {
+            handleDeleteChunk(editModal.chunk as ChunkType);
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default DocumentChunks;
diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index b106c106..d4252064 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -1,5 +1,8 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import DocumentChunks from './DocumentChunks';
+import ContextMenu, { MenuOption } from './ContextMenu';
 import userService from '../api/services/userService';
 import FileIcon from '../assets/file.svg';
 import FolderIcon from '../assets/folder.svg';
@@ -8,9 +11,6 @@ import ThreeDots from '../assets/three-dots.svg';
 import EyeView from '../assets/eye-view.svg';
 import OutlineSource from '../assets/outline-source.svg';
 import Trash from '../assets/red-trash.svg';
-import Spinner from './Spinner';
-import { useTranslation } from 'react-i18next';
-import ContextMenu, { MenuOption } from './ContextMenu';
 
 interface FileNode {
   type?: string;
@@ -45,6 +45,18 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   const menuRefs = useRef<{
     [key: string]: React.RefObject<HTMLDivElement | null>;
   }>({});
+  const [selectedFile, setSelectedFile] = useState<{
+    id: string;
+    name: string;
+  } | null>(null);
+
+  const handleFileClick = (fileName: string) => {
+    const fullPath = [...currentPath, fileName].join('/');
+    setSelectedFile({
+      id: fullPath,
+      name: fileName,
+    });
+  };
 
   useEffect(() => {
     const fetchDirectoryStructure = async () => {
@@ -129,7 +141,11 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     setActiveMenuId(itemId);
   };
 
-  const getActionOptions = (name: string, isFile: boolean): MenuOption[] => {
+  const getActionOptions = (
+    name: string,
+    isFile: boolean,
+    itemId: string,
+  ): MenuOption[] => {
     const options: MenuOption[] = [];
 
     if (isFile) {
@@ -138,8 +154,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
         label: t('settings.documents.view'),
         onClick: (event: React.SyntheticEvent) => {
           event.stopPropagation();
-          console.log('View file:', name);
-          // View file action will be implemented later
+          handleFileClick(name);
         },
         iconWidth: 18,
         iconHeight: 18,
@@ -195,32 +210,89 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
       </div>
     );
   };
+
+  const calculateDirectoryStats = (
+    structure: DirectoryStructure,
+  ): { totalSize: number; totalTokens: number } => {
+    let totalSize = 0;
+    let totalTokens = 0;
+
+    Object.entries(structure).forEach(([_, node]) => {
+      if (node.type) {
+        // It's a file
+        totalSize += node.size_bytes || 0;
+        totalTokens += node.token_count || 0;
+      } else {
+        // It's a directory, recurse
+        const stats = calculateDirectoryStats(node);
+        totalSize += stats.totalSize;
+        totalTokens += stats.totalTokens;
+      }
+    });
+
+    return { totalSize, totalTokens };
+  };
+
   const renderFileTree = (structure: DirectoryStructure): React.ReactNode[] => {
+    // Separate directories and files
     const entries = Object.entries(structure);
     const directories = entries.filter(([_, node]) => !node.type);
     const files = entries.filter(([_, node]) => node.type);
 
+    // Create parent directory row
+    const parentRow =
+      currentPath.length > 0
+        ? [
+            <tr
+              key="parent-dir"
+              className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
+              onClick={navigateUp}
+            >
+              <td className="px-4 py-2">
+                <div className="flex items-center">
+                  <img
+                    src={FolderIcon}
+                    alt="Parent folder"
+                    className="mr-2 h-4 w-4"
+                  />
+                  <span className="text-sm dark:text-[#E0E0E0]">..</span>
+                </div>
+              </td>
+              <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
+              <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
+              <td className="w-10 px-4 py-2 text-sm"></td>
+            </tr>,
+          ]
+        : [];
+
+    // Render directories first, then files
     return [
+      ...parentRow,
       ...directories.map(([name, node]) => {
         const itemId = `dir-${name}`;
         const menuRef = getMenuRef(itemId);
+        const dirStats = calculateDirectoryStats(node as DirectoryStructure);
 
         return (
           <tr
             key={itemId}
-            className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]"
+            className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
+            onClick={() => navigateToDirectory(name)}
           >
             <td className="px-4 py-2">
-              <div
-                className="flex cursor-pointer items-center"
-                onClick={() => navigateToDirectory(name)}
-              >
+              <div className="flex items-center">
                 <img src={FolderIcon} alt="Folder" className="mr-2 h-4 w-4" />
-                <span className="text-sm">{name}</span>
+                <span className="text-sm dark:text-[#E0E0E0]">{name}</span>
               </div>
             </td>
-            <td className="px-4 py-2 text-sm">-</td>
-            <td className="px-4 py-2 text-sm">-</td>
+            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">
+              {dirStats.totalTokens > 0
+                ? dirStats.totalTokens.toLocaleString()
+                : '-'}
+            </td>
+            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">
+              {dirStats.totalSize > 0 ? formatBytes(dirStats.totalSize) : '-'}
+            </td>
             <td className="w-10 px-4 py-2 text-sm">
               <div ref={menuRef} className="relative">
                 <button
@@ -239,7 +311,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                   setIsOpen={(isOpen) =>
                     setActiveMenuId(isOpen ? itemId : null)
                   }
-                  options={getActionOptions(name, false)}
+                  options={getActionOptions(name, false, itemId)}
                   anchorRef={menuRef}
                   position="bottom-left"
                   offset={{ x: 0, y: 8 }}
@@ -256,18 +328,19 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
         return (
           <tr
             key={itemId}
-            className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]"
+            className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
+            onClick={() => handleFileClick(name)}
           >
             <td className="px-4 py-2">
               <div className="flex items-center">
                 <img src={FileIcon} alt="File" className="mr-2 h-4 w-4" />
-                <span className="text-sm">{name}</span>
+                <span className="text-sm dark:text-[#E0E0E0]">{name}</span>
               </div>
             </td>
-            <td className="px-4 py-2 text-sm">
+            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">
               {node.token_count?.toLocaleString() || '-'}
             </td>
-            <td className="px-4 py-2 text-sm">
+            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">
               {node.size_bytes ? formatBytes(node.size_bytes) : '-'}
             </td>
             <td className="w-10 px-4 py-2 text-sm">
@@ -288,7 +361,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                   setIsOpen={(isOpen) =>
                     setActiveMenuId(isOpen ? itemId : null)
                   }
-                  options={getActionOptions(name, true)}
+                  options={getActionOptions(name, true, itemId)}
                   anchorRef={menuRef}
                   position="bottom-left"
                   offset={{ x: 0, y: 8 }}
@@ -300,57 +373,47 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
       }),
     ];
   };
-
-  if (loading) {
-    return (
-      <div className="flex h-64 items-center justify-center">
-        <Spinner />
-      </div>
-    );
-  }
-
-  if (error) {
-    return <div className="p-4 text-center text-red-500">{error}</div>;
-  }
-
-  if (!directoryStructure) {
-    return (
-      <div className="p-4 text-center text-gray-500">
-        No directory structure available
-      </div>
-    );
-  }
-
   const currentDirectory = getCurrentDirectory();
 
   return (
-    <div className="w-full">
-      <div className="mb-4">{renderPathNavigation()}</div>
+    <>
+      {selectedFile ? (
+        <DocumentChunks
+          documentId={docId}
+          documentName={selectedFile.name}
+          handleGoBack={() => setSelectedFile(null)}
+          path={selectedFile.id}
+        />
+      ) : (
+        <div className="mt-8 flex flex-col">
+          <div className="mb-4">{renderPathNavigation()}</div>
 
-      <div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
-        <table className="min-w-full table-fixed bg-white dark:bg-gray-900">
-          <thead className="bg-gray-100 dark:bg-gray-800">
-            <tr className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]">
-              <th className="w-3/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
-                Name
-              </th>
-              <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
-                Tokens
-              </th>
-              <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
-                Size
-              </th>
-              <th className="w-[60px] px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
-                <span className="sr-only">Actions</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody className="[&>tr:last-child]:border-b-0">
-            {renderFileTree(currentDirectory)}
-          </tbody>
-        </table>
-      </div>
-    </div>
+          <div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
+            <table className="min-w-full table-fixed bg-transparent">
+              <thead className="bg-gray-100 dark:bg-[#27282D]">
+                <tr className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]">
+                  <th className="w-3/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
+                    Name
+                  </th>
+                  <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
+                    Tokens
+                  </th>
+                  <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
+                    Size
+                  </th>
+                  <th className="w-[60px] px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
+                    <span className="sr-only">Actions</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="[&>tr:last-child]:border-b-0">
+                {renderFileTree(currentDirectory)}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </>
   );
 };
 
diff --git a/frontend/src/models/misc.ts b/frontend/src/models/misc.ts
index 57e100f3..bdd19ed1 100644
--- a/frontend/src/models/misc.ts
+++ b/frontend/src/models/misc.ts
@@ -12,6 +12,7 @@ export type Doc = {
   type?: string;
   retriever?: string;
   syncFrequency?: string;
+  isNested?: boolean;
 };
 
 export type GetDocsResponse = {
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 63aea342..14ab2e87 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -3,11 +3,10 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import userService from '../api/services/userService';
-import ArrowLeft from '../assets/arrow-left.svg';
-import Edit from '../assets/edit.svg';
+
 import EyeView from '../assets/eye-view.svg';
-import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import NoFilesIcon from '../assets/no-files.svg';
+import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import Trash from '../assets/red-trash.svg';
 import SyncIcon from '../assets/sync.svg';
 import ThreeDots from '../assets/three-dots.svg';
@@ -16,9 +15,7 @@ import Pagination from '../components/DocumentPagination';
 import DropdownMenu from '../components/DropdownMenu';
 import Input from '../components/Input';
 import SkeletonLoader from '../components/SkeletonLoader';
-import Spinner from '../components/Spinner';
 import { useDarkTheme, useLoaderState } from '../hooks';
-import ChunkModal from '../modals/ChunkModal';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState, Doc, DocumentsProps } from '../models/misc';
 import { getDocs, getDocsWithPagination } from '../preferences/preferenceApi';
@@ -29,7 +26,8 @@ import {
 } from '../preferences/preferenceSlice';
 import Upload from '../upload/Upload';
 import { formatDate } from '../utils/dateTimeUtils';
-import { ChunkType } from './types';
+import FileTreeComponent from '../components/FileTreeComponent';
+import DocumentChunks from '../components/DocumentChunks';
 
 const formatTokens = (tokens: number): string => {
   const roundToTwoDecimals = (num: number): string => {
@@ -52,6 +50,7 @@ export default function Documents({
   handleDeleteDocument,
 }: DocumentsProps) {
   const { t } = useTranslation();
+  const [isDarkTheme] = useDarkTheme();
   const dispatch = useDispatch();
   const token = useSelector(selectToken);
 
@@ -119,7 +118,7 @@ export default function Documents({
     { label: t('settings.documents.syncFrequency.weekly'), value: 'weekly' },
     { label: t('settings.documents.syncFrequency.monthly'), value: 'monthly' },
   ];
-  const [showDocumentChunks, setShowDocumentChunks] = useState<Doc>();
+  const [documentToView, setDocumentToView] = useState<Doc>();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [syncMenuState, setSyncMenuState] = useState<{
     isOpen: boolean;
@@ -234,7 +233,7 @@ export default function Documents({
         icon: EyeView,
         label: t('settings.documents.view'),
         onClick: () => {
-          setShowDocumentChunks(document);
+          setDocumentToView(document);
         },
         iconWidth: 18,
         iconHeight: 18,
@@ -276,13 +275,23 @@ export default function Documents({
     refreshDocs(undefined, 1, rowsPerPage);
   }, [searchTerm]);
 
-  return showDocumentChunks ? (
-    <DocumentChunks
-      document={showDocumentChunks}
-      handleGoBack={() => {
-        setShowDocumentChunks(undefined);
-      }}
-    />
+  return documentToView ? (
+    <div className="mt-8 flex flex-col">
+      {documentToView.isNested ? (
+        <FileTreeComponent
+          docId={documentToView.id || ''}
+          sourceName={documentToView.name}
+          onBackToDocuments={() => setDocumentToView(undefined)}
+        />
+      ) : (
+        <DocumentChunks
+          documentId={documentToView.id || ''}
+          documentName={documentToView.name}
+          handleGoBack={() => setDocumentToView(undefined)}
+          showHeader={false}
+        />
+      )}
+    </div>
   ) : (
     <div className="mt-8 flex w-full max-w-full flex-col overflow-hidden">
       <div className="relative flex grow flex-col">
@@ -327,7 +336,7 @@ export default function Documents({
           ) : !currentDocuments?.length ? (
             <div className="flex flex-col items-center justify-center py-12">
               <img
-                src={NoFilesIcon}
+                src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
                 alt={t('settings.documents.noData')}
                 className="mx-auto mb-6 h-32 w-32"
               />
@@ -491,274 +500,3 @@ export default function Documents({
     </div>
   );
 }
-
-function DocumentChunks({
-  document,
-  handleGoBack,
-}: {
-  document: Doc;
-  handleGoBack: () => void;
-}) {
-  const { t } = useTranslation();
-  const token = useSelector(selectToken);
-  const [isDarkTheme] = useDarkTheme();
-  const [paginatedChunks, setPaginatedChunks] = useState<ChunkType[]>([]);
-  const [page, setPage] = useState(1);
-  const [perPage, setPerPage] = useState(5);
-  const [totalChunks, setTotalChunks] = useState(0);
-  const [loading, setLoading] = useLoaderState(true);
-  const [searchTerm, setSearchTerm] = useState<string>('');
-  const [addModal, setAddModal] = useState<ActiveState>('INACTIVE');
-  const [editModal, setEditModal] = useState<{
-    state: ActiveState;
-    chunk: ChunkType | null;
-  }>({ state: 'INACTIVE', chunk: null });
-
-  const fetchChunks = () => {
-    setLoading(true);
-    try {
-      userService
-        .getDocumentChunks(document.id ?? '', page, perPage, token)
-        .then((response) => {
-          if (!response.ok) {
-            setLoading(false);
-            setPaginatedChunks([]);
-            throw new Error('Failed to fetch chunks data');
-          }
-          return response.json();
-        })
-        .then((data) => {
-          setPage(data.page);
-          setPerPage(data.per_page);
-          setTotalChunks(data.total);
-          setPaginatedChunks(data.chunks);
-          setLoading(false);
-        });
-    } catch (e) {
-      console.log(e);
-      setLoading(false);
-    }
-  };
-
-  const handleAddChunk = (title: string, text: string) => {
-    try {
-      userService
-        .addChunk(
-          {
-            id: document.id ?? '',
-            text: text,
-            metadata: {
-              title: title,
-            },
-          },
-          token,
-        )
-        .then((response) => {
-          if (!response.ok) {
-            throw new Error('Failed to add chunk');
-          }
-          fetchChunks();
-        });
-    } catch (e) {
-      console.log(e);
-    }
-  };
-
-  const handleUpdateChunk = (title: string, text: string, chunk: ChunkType) => {
-    try {
-      userService
-        .updateChunk(
-          {
-            id: document.id ?? '',
-            chunk_id: chunk.doc_id,
-            text: text,
-            metadata: {
-              title: title,
-            },
-          },
-          token,
-        )
-        .then((response) => {
-          if (!response.ok) {
-            throw new Error('Failed to update chunk');
-          }
-          fetchChunks();
-        });
-    } catch (e) {
-      console.log(e);
-    }
-  };
-
-  const handleDeleteChunk = (chunk: ChunkType) => {
-    try {
-      userService
-        .deleteChunk(document.id ?? '', chunk.doc_id, token)
-        .then((response) => {
-          if (!response.ok) {
-            throw new Error('Failed to delete chunk');
-          }
-          setEditModal({ state: 'INACTIVE', chunk: null });
-          fetchChunks();
-        });
-    } catch (e) {
-      console.log(e);
-    }
-  };
-
-  React.useEffect(() => {
-    fetchChunks();
-  }, [page, perPage]);
-  return (
-    <div className="mt-8 flex flex-col">
-      <div className="text-eerie-black dark:text-bright-gray mb-3 flex items-center gap-3 text-sm">
-        <button
-          className="rounded-full border p-3 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
-          onClick={handleGoBack}
-        >
-          <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
-        </button>
-        <p className="mt-px">{t('settings.documents.backToAll')}</p>
-      </div>
-      <div className="my-3 flex items-center justify-between gap-1">
-        <div className="text-eerie-black dark:text-bright-gray flex w-full items-center gap-2 sm:w-auto">
-          <p className="hidden text-2xl font-semibold sm:flex">{`${totalChunks} ${t('settings.documents.chunks')}`}</p>
-          <label htmlFor="chunk-search-input" className="sr-only">
-            {t('settings.documents.searchPlaceholder')}
-          </label>
-          <Input
-            maxLength={256}
-            placeholder={t('settings.documents.searchPlaceholder')}
-            name="chunk-search-input"
-            type="text"
-            id="chunk-search-input"
-            value={searchTerm}
-            onChange={(e) => {
-              setSearchTerm(e.target.value);
-            }}
-            borderVariant="thin"
-          />
-        </div>
-        <button
-          className="bg-purple-30 hover:bg-violets-are-blue flex h-[32px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white"
-          title={t('settings.documents.addNew')}
-          onClick={() => setAddModal('ACTIVE')}
-        >
-          {t('settings.documents.addNew')}
-        </button>
-      </div>
-      {loading ? (
-        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          <div className="col-span-2 mt-24 flex h-32 items-center justify-center lg:col-span-3">
-            <Spinner />
-          </div>
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          {paginatedChunks.filter((chunk) => {
-            if (!chunk.metadata?.title) return true;
-            return chunk.metadata.title
-              .toLowerCase()
-              .includes(searchTerm.toLowerCase());
-          }).length === 0 ? (
-            <div className="col-span-2 mt-24 text-center text-gray-500 lg:col-span-3 dark:text-gray-400">
-              <img
-                src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                alt={t('settings.documents.noChunksAlt')}
-                className="mx-auto mb-2 h-24 w-24"
-              />
-              {t('settings.documents.noChunks')}
-            </div>
-          ) : (
-            paginatedChunks
-              .filter((chunk) => {
-                if (!chunk.metadata?.title) return true;
-                return chunk.metadata.title
-                  .toLowerCase()
-                  .includes(searchTerm.toLowerCase());
-              })
-              .map((chunk, index) => (
-                <div
-                  key={index}
-                  className="border-silver dark:border-silver/40 relative flex h-56 w-full flex-col justify-between rounded-2xl border p-6"
-                >
-                  <div className="w-full">
-                    <div className="flex w-full items-center justify-between">
-                      <button
-                        aria-label={'edit'}
-                        onClick={() => {
-                          setEditModal({
-                            state: 'ACTIVE',
-                            chunk: chunk,
-                          });
-                        }}
-                        className="absolute top-3 right-3 h-4 w-4 cursor-pointer"
-                      >
-                        <img
-                          alt={'edit'}
-                          src={Edit}
-                          className="opacity-60 hover:opacity-100"
-                        />
-                      </button>
-                    </div>
-                    <div className="mt-[9px]">
-                      <p className="ellipsis-text text-eerie-black h-12 text-sm leading-relaxed font-semibold break-words dark:text-[#EEEEEE]">
-                        {chunk.metadata?.title ?? 'Untitled'}
-                      </p>
-                      <p className="mt-1 h-[110px] overflow-y-auto pr-1 text-[13px] leading-relaxed break-words text-gray-600 dark:text-gray-400">
-                        {chunk.text}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              ))
-          )}
-        </div>
-      )}
-      {!loading &&
-        paginatedChunks.filter((chunk) => {
-          if (!chunk.metadata?.title) return true;
-          return chunk.metadata.title
-            .toLowerCase()
-            .includes(searchTerm.toLowerCase());
-        }).length !== 0 && (
-          <div className="mt-10 flex w-full items-center justify-center">
-            <Pagination
-              currentPage={page}
-              totalPages={Math.ceil(totalChunks / perPage)}
-              rowsPerPage={perPage}
-              onPageChange={(page) => {
-                setPage(page);
-              }}
-              onRowsPerPageChange={(rows) => {
-                setPerPage(rows);
-                setPage(1);
-              }}
-            />
-          </div>
-        )}
-      <ChunkModal
-        type="ADD"
-        modalState={addModal}
-        setModalState={setAddModal}
-        handleSubmit={handleAddChunk}
-      />
-      {editModal.chunk && (
-        <ChunkModal
-          type="EDIT"
-          modalState={editModal.state}
-          setModalState={(state) =>
-            setEditModal((prev) => ({ ...prev, state }))
-          }
-          handleSubmit={(title, text) => {
-            handleUpdateChunk(title, text, editModal.chunk as ChunkType);
-          }}
-          originalText={editModal.chunk?.text ?? ''}
-          originalTitle={editModal.chunk?.metadata?.title ?? ''}
-          handleDelete={() => {
-            handleDeleteChunk(editModal.chunk as ChunkType);
-          }}
-        />
-      )}
-    </div>
-  );
-}

From 99a8962183e33c3041b7d5a7b080321b9b393c32 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 17 Jul 2025 01:05:24 +0530
Subject: [PATCH 15/57] (fix/docs) menu event capture

---
 frontend/src/settings/Documents.tsx | 44 +++++++++--------------------
 1 file changed, 14 insertions(+), 30 deletions(-)

diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 14ab2e87..9a8e4195 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -1,3 +1,4 @@
+
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -94,23 +95,6 @@ export default function Documents({
     setActiveMenuId(docId);
   };
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (activeMenuId) {
-        const activeRef = menuRefs.current[activeMenuId];
-        if (
-          activeRef?.current &&
-          !activeRef.current.contains(event.target as Node)
-        ) {
-          setActiveMenuId(null);
-        }
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [activeMenuId]);
-
   const currentDocuments = paginatedDocuments ?? [];
   const syncOptions = [
     { label: t('settings.documents.syncFrequency.never'), value: 'never' },
@@ -288,7 +272,7 @@ export default function Documents({
           documentId={documentToView.id || ''}
           documentName={documentToView.name}
           handleGoBack={() => setDocumentToView(undefined)}
-          showHeader={false}
+          showHeader={true}
         />
       )}
     </div>
@@ -345,19 +329,19 @@ export default function Documents({
               </p>
             </div>
           ) : (
-            <div className="flex flex-wrap gap-6">
-              {currentDocuments.map((document, index) => {
-                const docId = document.id ? document.id.toString() : '';
+            <div className="flex flex-wrap justify-center md:justify-start gap-6 mx-1">
+            {currentDocuments.map((document, index) => {
+              const docId = document.id ? document.id.toString() : '';
 
-                return (
-                  <div key={docId} className="relative">
-                    <div
-                      className={`flex h-[123px] w-[308px] flex-col justify-between rounded-2xl bg-[#F9F9F9] p-3 transition-all duration-200 dark:bg-[#383838] ${
-                        activeMenuId === docId || syncMenuState.docId === docId
-                          ? 'scale-[1.02] shadow-lg'
-                          : 'hover:scale-[1.02] hover:shadow-lg'
-                      }`}
-                    >
+              return (
+                <div key={docId} className="relative">
+                  <div
+                    className={`flex h-[123px] w-[308px] flex-col justify-between rounded-2xl bg-[#F9F9F9] p-3 transition-all duration-200 dark:bg-[#383838] ${
+                      activeMenuId === docId || syncMenuState.docId === docId
+                        ? 'scale-[1.02]'
+                        : 'hover:scale-[1.02]'
+                    }`}
+                  >
                       <div className="w-full">
                         <div className="flex w-full items-center justify-between gap-2">
                           <h3

From 29698ca169481562c325c7dc0f334ea6be265eb8 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 17 Jul 2025 02:16:40 +0530
Subject: [PATCH 16/57] (feat:chunks) redesigned

---
 frontend/src/components/DocumentChunks.tsx | 172 +++++++++++++--------
 1 file changed, 104 insertions(+), 68 deletions(-)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index 94307bc0..f619afb0 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -7,11 +7,13 @@ import userService from '../api/services/userService';
 import ArrowLeft from '../assets/arrow-left.svg';
 import NoFilesIcon from '../assets/no-files.svg';
 import NoFilesDarkIcon from '../assets/no-files-dark.svg';
+import OutlineSource from '../assets/outline-source.svg';
 import Spinner from '../components/Spinner';
-import Input from '../components/Input';
 import ChunkModal from '../modals/ChunkModal';
 import { ActiveState } from '../models/misc';
 import { ChunkType } from '../settings/types';
+import EditIcon from '../assets/edit.svg';
+import Pagination from './DocumentPagination';
 
 interface DocumentChunksProps {
   documentId: string;
@@ -43,6 +45,8 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
     chunk: ChunkType | null;
   }>({ state: 'INACTIVE', chunk: null });
 
+  const pathParts = path ? path.split('/') : [];
+
   const fetchChunks = () => {
     setLoading(true);
     try {
@@ -138,40 +142,71 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
     fetchChunks();
   }, [page, perPage]);
 
+  const filteredChunks = paginatedChunks.filter((chunk) => {
+    if (!chunk.metadata?.title) return true;
+    return chunk.metadata.title
+      .toLowerCase()
+      .includes(searchTerm.toLowerCase());
+  });
+
   return (
     <div className="mt-8 flex flex-col">
-      {showHeader && (
-        <div className="text-eerie-black dark:text-bright-gray mb-3 flex items-center gap-3 text-sm">
+      <div className="mb-4 flex items-center">
+        {showHeader && (
           <button
-            className="rounded-full border p-3 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
+            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
             onClick={handleGoBack}
           >
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
           </button>
-          <p className="mt-px">{t('settings.documents.backToAll')}</p>
+        )}
+
+        <div className="flex items-center">
+          <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5" />
+          <span className="text-[#7D54D1] font-semibold text-base leading-6">
+            {documentName}
+          </span>
+
+          {pathParts.length > 0 && (
+            <>
+              <span className="mx-1 text-gray-500">/</span>
+              {pathParts.map((part, index) => (
+                <React.Fragment key={index}>
+                  <span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300">
+                    {part}
+                  </span>
+                  {index < pathParts.length - 1 && (
+                    <span className="mx-1 text-gray-500">/</span>
+                  )}
+                </React.Fragment>
+              ))}
+            </>
+          )}
         </div>
-      )}
-      <div className="my-3 flex items-center justify-between gap-1">
-        <div className="text-eerie-black dark:text-bright-gray flex w-full items-center gap-2 sm:w-auto">
-          <p className="hidden text-2xl font-semibold sm:flex">{`${totalChunks} ${t('settings.documents.chunks')}`}</p>
-          <label htmlFor="chunk-search-input" className="sr-only">
-            {t('settings.documents.searchPlaceholder')}
-          </label>
-          <Input
-            maxLength={256}
-            placeholder={t('settings.documents.searchPlaceholder')}
-            name="chunk-search-input"
-            type="text"
-            id="chunk-search-input"
-            value={searchTerm}
-            onChange={(e) => {
-              setSearchTerm(e.target.value);
-            }}
-            borderVariant="thin"
-          />
+      </div>
+
+      <div className="my-3 flex items-center justify-between gap-3">
+        <div className="flex-1 flex items-center border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-md overflow-hidden h-[38px]">
+          <div className="px-4 flex items-center text-gray-700 dark:text-[#E0E0E0] font-medium whitespace-nowrap h-full">
+            {totalChunks > 999999
+              ? `${(totalChunks / 1000000).toFixed(2)}M`
+              : totalChunks > 999
+                ? `${(totalChunks / 1000).toFixed(2)}K`
+                : totalChunks} {t('settings.documents.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')}
+              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]"
+            />
+          </div>
         </div>
         <button
-          className="bg-purple-30 hover:bg-violets-are-blue flex h-[32px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white"
+          className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white shrink-0"
           title={t('settings.documents.addNew')}
           onClick={() => setAddModal('ACTIVE')}
         >
@@ -185,14 +220,9 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
           </div>
         </div>
       ) : (
-        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          {paginatedChunks.filter((chunk) => {
-            if (!chunk.metadata?.title) return true;
-            return chunk.metadata.title
-              .toLowerCase()
-              .includes(searchTerm.toLowerCase());
-          }).length === 0 ? (
-            <div className="col-span-2 mt-24 text-center text-gray-500 lg:col-span-3 dark:text-gray-400">
+        <div className="flex flex-wrap gap-4">
+          {filteredChunks.length === 0 ? (
+            <div className="w-full flex flex-col items-center justify-center mt-24 text-center text-gray-500 dark:text-gray-400">
               <img
                 src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
                 alt={t('settings.documents.noChunksAlt')}
@@ -201,48 +231,54 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
               {t('settings.documents.noChunks')}
             </div>
           ) : (
-            paginatedChunks
-              .filter((chunk) => {
-                if (!chunk.metadata?.title) return true;
-                return chunk.metadata.title
-                  .toLowerCase()
-                  .includes(searchTerm.toLowerCase());
-              })
-              .map((chunk, index) => (
-                <div
-                  key={index}
-                  className="border-silver dark:border-silver/40 relative flex h-56 w-full flex-col justify-between rounded-2xl border p-6"
-                >
-                  <div className="w-full">
-                    <div className="flex w-full items-center justify-between">
-                      <button
-                        aria-label={'edit'}
-                        onClick={() => {
-                          setEditModal({
-                            state: 'ACTIVE',
-                            chunk: chunk,
-                          });
-                        }}
-                        className="text-left"
-                      >
-                        <h3 className="text-eerie-black dark:text-bright-gray line-clamp-2 text-base font-semibold">
-                          {chunk.metadata?.title ||
-                            t('settings.documents.untitled')}
-                        </h3>
-                      </button>
-                    </div>
-                    <div className="mt-2 h-[80px] overflow-hidden">
-                      <p className="text-eerie-black dark:text-bright-gray line-clamp-4 text-sm">
-                        {chunk.text}
-                      </p>
+            filteredChunks.map((chunk, index) => (
+              <div
+                key={index}
+                className="relative flex h-[208px] w-[486px] flex-col justify-between rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden"
+              >
+                <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() : '-'} tokens
                     </div>
+                    <button
+                      aria-label={'edit'}
+                      onClick={() => {
+                        setEditModal({
+                          state: 'ACTIVE',
+                          chunk: chunk,
+                        });
+                      }}
+                      className="text-left"
+                    >
+                      <img src={EditIcon} alt="edit" className="h-4 w-4" />
+                    </button>
+                  </div>
+                  <div className="p-4">
+                    <p className="font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] dark:text-[#E0E0E0] line-clamp-7 font-normal">
+                      {chunk.text}
+                    </p>
                   </div>
                 </div>
-              ))
+              </div>
+            ))
           )}
         </div>
       )}
 
+      {!loading && filteredChunks.length > 0 && (
+        <Pagination
+          currentPage={page}
+          totalPages={Math.ceil(totalChunks / perPage)}
+          rowsPerPage={perPage}
+          onPageChange={setPage}
+          onRowsPerPageChange={(rows) => {
+            setPerPage(rows);
+            setPage(1);
+          }}
+        />
+      )}
+
       <ChunkModal
         type="ADD"
         modalState={addModal}

From 8ddf04a9048d89075cf818f1e60d6fa1b87f19d6 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 17 Jul 2025 03:08:01 +0530
Subject: [PATCH 17/57] (feat:chunks) use common header, navigate

---
 frontend/src/components/DocumentChunks.tsx    | 48 +++++++--------
 frontend/src/components/FileTreeComponent.tsx | 59 +++++++++++--------
 2 files changed, 59 insertions(+), 48 deletions(-)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index f619afb0..90718473 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -151,39 +151,39 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
 
   return (
     <div className="mt-8 flex flex-col">
-      <div className="mb-4 flex items-center">
-        {showHeader && (
+      {showHeader && (
+        <div className="mb-4 flex items-center">
           <button
             className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
             onClick={handleGoBack}
           >
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
           </button>
-        )}
 
-        <div className="flex items-center">
-          <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5" />
-          <span className="text-[#7D54D1] font-semibold text-base leading-6">
-            {documentName}
-          </span>
+          <div className="flex items-center">
+            <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5" />
+            <span className="text-[#7D54D1] font-semibold text-base leading-6">
+              {documentName}
+            </span>
 
-          {pathParts.length > 0 && (
-            <>
-              <span className="mx-1 text-gray-500">/</span>
-              {pathParts.map((part, index) => (
-                <React.Fragment key={index}>
-                  <span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300">
-                    {part}
-                  </span>
-                  {index < pathParts.length - 1 && (
-                    <span className="mx-1 text-gray-500">/</span>
-                  )}
-                </React.Fragment>
-              ))}
-            </>
-          )}
+            {pathParts.length > 0 && (
+              <>
+                <span className="mx-1 text-gray-500">/</span>
+                {pathParts.map((part, index) => (
+                  <React.Fragment key={index}>
+                    <span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300">
+                      {part}
+                    </span>
+                    {index < pathParts.length - 1 && (
+                      <span className="mx-1 text-gray-500">/</span>
+                    )}
+                  </React.Fragment>
+                ))}
+              </>
+            )}
+          </div>
         </div>
-      </div>
+      )}
 
       <div className="my-3 flex items-center justify-between gap-3">
         <div className="flex-1 flex items-center border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-md overflow-hidden h-[38px]">
diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index d4252064..170c4cb9 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -114,7 +114,9 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   };
 
   const handleBackNavigation = () => {
-    if (currentPath.length === 0) {
+    if (selectedFile) {
+      setSelectedFile(null);
+    } else if (currentPath.length === 0) {
       if (onBackToDocuments) {
         onBackToDocuments();
       }
@@ -187,7 +189,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
         >
           <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
         </button>
-
+  
         <div className="flex items-center">
           <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5" />
           <span className="text-purple-30 font-medium">{sourceName}</span>
@@ -206,6 +208,14 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               ))}
             </>
           )}
+          {selectedFile && (
+            <>
+              <span className="mx-1 text-gray-500">/</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                {selectedFile.name}
+              </span>
+            </>
+          )}
         </div>
       </div>
     );
@@ -243,26 +253,26 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     const parentRow =
       currentPath.length > 0
         ? [
-            <tr
-              key="parent-dir"
-              className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
-              onClick={navigateUp}
-            >
-              <td className="px-4 py-2">
-                <div className="flex items-center">
-                  <img
-                    src={FolderIcon}
-                    alt="Parent folder"
-                    className="mr-2 h-4 w-4"
-                  />
-                  <span className="text-sm dark:text-[#E0E0E0]">..</span>
-                </div>
-              </td>
-              <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
-              <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
-              <td className="w-10 px-4 py-2 text-sm"></td>
-            </tr>,
-          ]
+          <tr
+            key="parent-dir"
+            className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
+            onClick={navigateUp}
+          >
+            <td className="px-4 py-2">
+              <div className="flex items-center">
+                <img
+                  src={FolderIcon}
+                  alt="Parent folder"
+                  className="mr-2 h-4 w-4"
+                />
+                <span className="text-sm dark:text-[#E0E0E0]">..</span>
+              </div>
+            </td>
+            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
+            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
+            <td className="w-10 px-4 py-2 text-sm"></td>
+          </tr>,
+        ]
         : [];
 
     // Render directories first, then files
@@ -377,16 +387,17 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
 
   return (
     <>
+      <div className="mb-4">{renderPathNavigation()}</div>
       {selectedFile ? (
         <DocumentChunks
           documentId={docId}
-          documentName={selectedFile.name}
+          documentName={sourceName}
           handleGoBack={() => setSelectedFile(null)}
           path={selectedFile.id}
+          showHeader={false}
         />
       ) : (
         <div className="mt-8 flex flex-col">
-          <div className="mb-4">{renderPathNavigation()}</div>
 
           <div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
             <table className="min-w-full table-fixed bg-transparent">

From f336d445957d04b64c351213ea90fb08add0cb77 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Fri, 18 Jul 2025 15:03:23 +0530
Subject: [PATCH 18/57] (feat:chunks) search in dir

---
 frontend/src/components/DocumentChunks.tsx    |   8 +-
 frontend/src/components/FileTreeComponent.tsx | 124 ++++++++++++++++--
 2 files changed, 119 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index 90718473..f994b6f7 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -140,7 +140,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
 
   useEffect(() => {
     fetchChunks();
-  }, [page, perPage]);
+  }, [page, perPage, path]);
 
   const filteredChunks = paginatedChunks.filter((chunk) => {
     if (!chunk.metadata?.title) return true;
@@ -150,7 +150,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
   });
 
   return (
-    <div className="mt-8 flex flex-col">
+    <div className={`${showHeader ? 'mt-8' : 'mt-0'} flex flex-col`}>
       {showHeader && (
         <div className="mb-4 flex items-center">
           <button
@@ -185,7 +185,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
         </div>
       )}
 
-      <div className="my-3 flex items-center justify-between gap-3">
+      <div className="mb-3 flex items-center justify-between gap-3">
         <div className="flex-1 flex items-center border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-md overflow-hidden h-[38px]">
           <div className="px-4 flex items-center text-gray-700 dark:text-[#E0E0E0] font-medium whitespace-nowrap h-full">
             {totalChunks > 999999
@@ -234,7 +234,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
             filteredChunks.map((chunk, index) => (
               <div
                 key={index}
-                className="relative flex h-[208px] w-[486px] flex-col justify-between rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden"
+                className="relative flex h-[208px] w-[400px] flex-col justify-between rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden"
               >
                 <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">
diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index 170c4cb9..6a61ca12 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -11,6 +11,7 @@ import ThreeDots from '../assets/three-dots.svg';
 import EyeView from '../assets/eye-view.svg';
 import OutlineSource from '../assets/outline-source.svg';
 import Trash from '../assets/red-trash.svg';
+import SearchIcon from '../assets/search.svg';
 
 interface FileNode {
   type?: string;
@@ -29,6 +30,12 @@ interface FileTreeComponentProps {
   onBackToDocuments?: () => void;
 }
 
+interface SearchResult {
+  name: string;
+  path: string;
+  isFile: boolean;
+}
+
 const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   docId,
   sourceName,
@@ -49,6 +56,8 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     id: string;
     name: string;
   } | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
 
   const handleFileClick = (fileName: string) => {
     const fullPath = [...currentPath, fileName].join('/');
@@ -189,7 +198,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
         >
           <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
         </button>
-  
+
         <div className="flex items-center">
           <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5" />
           <span className="text-purple-30 font-medium">{sourceName}</span>
@@ -385,20 +394,116 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   };
   const currentDirectory = getCurrentDirectory();
 
+  const searchFiles = (query: string, structure: DirectoryStructure, currentPath: string[] = []): SearchResult[] => {
+    let results: SearchResult[] = [];
+
+    Object.entries(structure).forEach(([name, node]) => {
+      const fullPath = [...currentPath, name].join('/');
+
+      if (name.toLowerCase().includes(query.toLowerCase())) {
+        results.push({
+          name,
+          path: fullPath,
+          isFile: !!node.type
+        });
+      }
+
+      if (!node.type) {
+        // If it's a directory, search recursively
+        results = [...results, ...searchFiles(query, node as DirectoryStructure, [...currentPath, name])];
+      }
+    });
+
+    return results;
+  };
+
+
+  const handleSearchSelect = (result: SearchResult) => {
+    if (result.isFile) {
+      const pathParts = result.path.split('/');
+      const fileName = pathParts.pop() || '';
+      setCurrentPath(pathParts);
+      
+      setSelectedFile({
+        id: result.path,
+        name: fileName
+      });
+    } else {
+      setCurrentPath(result.path.split('/'));
+      setSelectedFile(null);
+    }
+    setSearchQuery('');
+    setSearchResults([]);
+  };
+
   return (
     <>
       <div className="mb-4">{renderPathNavigation()}</div>
       {selectedFile ? (
-        <DocumentChunks
-          documentId={docId}
-          documentName={sourceName}
-          handleGoBack={() => setSelectedFile(null)}
-          path={selectedFile.id}
-          showHeader={false}
-        />
+        <div className="flex">
+          {/* Search Panel */}
+          <div className="w-[283px] min-w-[283px] pr-4">
+            <div className="relative">
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => {
+                  setSearchQuery(e.target.value);
+                  if (directoryStructure) {
+                    setSearchResults(searchFiles(e.target.value, directoryStructure));
+                  }
+                }}
+                placeholder={t('settings.documents.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`}
+              />
+
+              <img
+                src={SearchIcon}
+                alt="Search"
+                className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 opacity-60"
+              />
+
+              {searchQuery && (
+                <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" style={{ marginTop: "-1px", borderTop: "none", borderTopLeftRadius: 0, borderTopRightRadius: 0 }}>
+                  {searchResults.map((result, index) => (
+                    <div
+                      key={index}
+                      onClick={() => handleSearchSelect(result)}
+                      className={`flex items-center px-3 py-2 cursor-pointer hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${index !== searchResults.length - 1 ? "border-b border-[#D1D9E0] dark:border-[#6A6A6A]" : ""
+                        }`}
+                    >
+                      <img
+                        src={result.isFile ? FileIcon : FolderIcon}
+                        alt={result.isFile ? "File" : "Folder"}
+                        className="w-4 h-4 mr-2"
+                      />
+                      <span className="text-sm truncate dark:text-[#E0E0E0]">
+                        {result.path}
+                      </span>
+                    </div>
+                  ))}
+                  {searchResults.length === 0 && (
+                    <div className="text-sm text-gray-500 dark:text-gray-400 text-center py-2">
+                      {t('settings.documents.noResults')}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="flex-1 pl-4 pt-0">
+      <DocumentChunks
+        documentId={docId}
+        documentName={sourceName}
+        handleGoBack={() => setSelectedFile(null)}
+        path={selectedFile.id}
+        showHeader={false}
+      />
+    </div>
+        </div>
       ) : (
         <div className="mt-8 flex flex-col">
-
           <div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
             <table className="min-w-full table-fixed bg-transparent">
               <thead className="bg-gray-100 dark:bg-[#27282D]">
@@ -429,3 +534,4 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
 };
 
 export default FileTreeComponent;
+

From 3755316d4953fda778a05ddb77248c3dd9b97da3 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Mon, 21 Jul 2025 16:30:30 +0530
Subject: [PATCH 19/57] (fix:chunks) responsive design

---
 frontend/src/components/DocumentChunks.tsx    | 64 +++++++++----------
 frontend/src/components/FileTreeComponent.tsx | 58 +++++++++--------
 2 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index f994b6f7..1cdef63f 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -152,30 +152,30 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
   return (
     <div className={`${showHeader ? 'mt-8' : 'mt-0'} flex flex-col`}>
       {showHeader && (
-        <div className="mb-4 flex items-center">
+        <div className="mb-4 flex items-center overflow-hidden">
           <button
-            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
+            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] flex-shrink-0"
             onClick={handleGoBack}
           >
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
           </button>
 
-          <div className="flex items-center">
-            <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5" />
-            <span className="text-[#7D54D1] font-semibold text-base leading-6">
+          <div className="flex items-center overflow-hidden">
+            <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5 flex-shrink-0" />
+            <span className="text-[#7D54D1] font-semibold text-base leading-6 whitespace-nowrap">
               {documentName}
             </span>
 
             {pathParts.length > 0 && (
               <>
-                <span className="mx-1 text-gray-500">/</span>
+                <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
                 {pathParts.map((part, index) => (
                   <React.Fragment key={index}>
-                    <span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300">
+                    <span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300 whitespace-nowrap">
                       {part}
                     </span>
                     {index < pathParts.length - 1 && (
-                      <span className="mx-1 text-gray-500">/</span>
+                      <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
                     )}
                   </React.Fragment>
                 ))}
@@ -185,8 +185,8 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
         </div>
       )}
 
-      <div className="mb-3 flex items-center justify-between gap-3">
-        <div className="flex-1 flex items-center border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-md overflow-hidden h-[38px]">
+      <div className="mb-3 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+        <div className="flex-1 w-full flex items-center border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-md overflow-hidden h-[38px]">
           <div className="px-4 flex items-center text-gray-700 dark:text-[#E0E0E0] font-medium whitespace-nowrap h-full">
             {totalChunks > 999999
               ? `${(totalChunks / 1000000).toFixed(2)}M`
@@ -206,7 +206,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
           </div>
         </div>
         <button
-          className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white shrink-0"
+          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')}
           onClick={() => setAddModal('ACTIVE')}
         >
@@ -214,28 +214,26 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
         </button>
       </div>
       {loading ? (
-        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          <div className="col-span-2 mt-24 flex h-32 items-center justify-center lg:col-span-3">
-            <Spinner />
-          </div>
-        </div>
-      ) : (
-        <div className="flex flex-wrap gap-4">
-          {filteredChunks.length === 0 ? (
-            <div className="w-full flex flex-col items-center justify-center mt-24 text-center text-gray-500 dark:text-gray-400">
-              <img
-                src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                alt={t('settings.documents.noChunksAlt')}
-                className="mx-auto mb-2 h-24 w-24"
-              />
-              {t('settings.documents.noChunks')}
-            </div>
-          ) : (
-            filteredChunks.map((chunk, index) => (
-              <div
-                key={index}
-                className="relative flex h-[208px] w-[400px] flex-col justify-between rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden"
-              >
+  <div className="w-full mt-24 flex justify-center">
+    <Spinner />
+  </div>
+) : (
+  <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-4">
+    {filteredChunks.length === 0 ? (
+      <div className="col-span-full flex flex-col items-center justify-center mt-24 text-center text-gray-500 dark:text-gray-400">
+        <img
+          src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
+          alt={t('settings.documents.noChunksAlt')}
+          className="mx-auto mb-2 h-24 w-24"
+        />
+        {t('settings.documents.noChunks')}
+      </div>
+    ) : (
+      filteredChunks.map((chunk, index) => (
+        <div
+          key={index}
+          className="relative flex h-[208px] flex-col justify-between rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden w-full"
+        >
                 <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]">
diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index 6a61ca12..64a8e4b1 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -436,6 +436,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     setSearchResults([]);
   };
 
+
   return (
     <>
       <div className="mb-4">{renderPathNavigation()}</div>
@@ -465,24 +466,29 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               />
 
               {searchQuery && (
-                <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" style={{ marginTop: "-1px", borderTop: "none", borderTopLeftRadius: 0, borderTopRightRadius: 0 }}>
-                  {searchResults.map((result, index) => (
-                    <div
-                      key={index}
-                      onClick={() => handleSearchSelect(result)}
-                      className={`flex items-center px-3 py-2 cursor-pointer hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${index !== searchResults.length - 1 ? "border-b border-[#D1D9E0] dark:border-[#6A6A6A]" : ""
-                        }`}
-                    >
-                      <img
-                        src={result.isFile ? FileIcon : FolderIcon}
-                        alt={result.isFile ? "File" : "Folder"}
-                        className="w-4 h-4 mr-2"
-                      />
-                      <span className="text-sm truncate dark:text-[#E0E0E0]">
-                        {result.path}
-                      </span>
-                    </div>
-                  ))}
+                <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.map((result, index) => {
+                    const name = result.path.split('/').pop() || result.path;
+
+                    return (
+                      <div
+                        key={index}
+                        onClick={() => handleSearchSelect(result)}
+                        title={result.path}
+                        className={`flex items-center px-3 py-2 cursor-pointer hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${index !== searchResults.length - 1 ? "border-b border-[#D1D9E0] dark:border-[#6A6A6A]" : ""
+                          }`}
+                      >
+                        <img
+                          src={result.isFile ? FileIcon : FolderIcon}
+                          alt={result.isFile ? "File" : "Folder"}
+                          className="flex-shrink-0 w-4 h-4 mr-2"
+                        />
+                        <span className="text-sm dark:text-[#E0E0E0]">
+                          {name}
+                        </span>
+                      </div>
+                    );
+                  })}
                   {searchResults.length === 0 && (
                     <div className="text-sm text-gray-500 dark:text-gray-400 text-center py-2">
                       {t('settings.documents.noResults')}
@@ -493,14 +499,14 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
             </div>
           </div>
           <div className="flex-1 pl-4 pt-0">
-      <DocumentChunks
-        documentId={docId}
-        documentName={sourceName}
-        handleGoBack={() => setSelectedFile(null)}
-        path={selectedFile.id}
-        showHeader={false}
-      />
-    </div>
+            <DocumentChunks
+              documentId={docId}
+              documentName={sourceName}
+              handleGoBack={() => setSelectedFile(null)}
+              path={selectedFile.id}
+              showHeader={false}
+            />
+          </div>
         </div>
       ) : (
         <div className="mt-8 flex flex-col">

From ff3c7eb5fb7ed1abbd9fa16d208364ae4e4850cc Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Mon, 21 Jul 2025 16:31:42 +0530
Subject: [PATCH 20/57] (fix:delete_old) comply with storage abtrctn

---
 application/api/user/routes.py | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index 68936dcc..d0df5b7f 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -473,7 +473,7 @@ class DeleteByIds(Resource):
 @user_ns.route("/api/delete_old")
 class DeleteOldIndexes(Resource):
     @api.doc(
-        description="Deletes old indexes",
+        description="Deletes old indexes and associated files",
         params={"source_id": "The source ID to delete"},
     )
     def get(self):
@@ -490,21 +490,40 @@ class DeleteOldIndexes(Resource):
         )
         if not doc:
             return make_response(jsonify({"status": "not found"}), 404)
+        
+        storage = StorageCreator.get_storage()
+        
         try:
+            # Delete vector index
             if settings.VECTOR_STORE == "faiss":
-                shutil.rmtree(os.path.join(current_dir, "indexes", str(doc["_id"])))
+                index_path = f"indexes/{str(doc['_id'])}"
+                if storage.file_exists(f"{index_path}/index.faiss"):
+                    storage.delete_file(f"{index_path}/index.faiss")
+                if storage.file_exists(f"{index_path}/index.pkl"):
+                    storage.delete_file(f"{index_path}/index.pkl")
             else:
                 vectorstore = VectorCreator.create_vectorstore(
                     settings.VECTOR_STORE, source_id=str(doc["_id"])
                 )
                 vectorstore.delete_index()
+                
+            if "file_path" in doc and doc["file_path"]:
+                file_path = doc["file_path"]
+                if storage.is_directory(file_path):
+                    files = storage.list_files(file_path)
+                    for f in files:
+                        storage.delete_file(f)
+                else:
+                    storage.delete_file(file_path)
+                    
         except FileNotFoundError:
             pass
         except Exception as err:
             current_app.logger.error(
-                f"Error deleting old indexes: {err}", exc_info=True
+                f"Error deleting files and indexes: {err}", exc_info=True
             )
             return make_response(jsonify({"success": False}), 400)
+            
         sources_collection.delete_one({"_id": ObjectId(source_id)})
         return make_response(jsonify({"success": True}), 200)
 

From 6eb2c884a232ebfd21a9183e350b27347c05a1e1 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 22 Jul 2025 19:36:52 +0530
Subject: [PATCH 21/57] (refactor) separation in chunks/files view

---
 frontend/src/assets/search.svg                |   3 +
 frontend/src/components/DocumentChunks.tsx    | 316 +++++++++---------
 frontend/src/components/FileTreeComponent.tsx | 186 ++++++-----
 frontend/src/settings/Documents.tsx           |   1 -
 4 files changed, 274 insertions(+), 232 deletions(-)
 create mode 100644 frontend/src/assets/search.svg

diff --git a/frontend/src/assets/search.svg b/frontend/src/assets/search.svg
new file mode 100644
index 00000000..2f3d57c4
--- /dev/null
+++ b/frontend/src/assets/search.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4798 10.739C9.27414 11.6748 7.7572 12.116 6.23773 11.9728C4.71826 11.8296 3.31047 11.1127 2.30094 9.96806C1.2914 8.82345 0.756002 7.33714 0.803717 5.81168C0.851432 4.28622 1.47868 2.83628 2.55777 1.75699C3.63706 0.677895 5.087 0.0506505 6.61246 0.00293578C8.13792 -0.044779 9.62423 0.490623 10.7688 1.50016C11.9135 2.50969 12.6303 3.91747 12.7736 5.43694C12.9168 6.95641 12.4756 8.47336 11.5398 9.67899L14.5798 12.719C14.6785 12.8107 14.7507 12.9273 14.7887 13.0565C14.8267 13.1858 14.8291 13.3229 14.7958 13.4534C14.7624 13.5839 14.6944 13.703 14.5991 13.7982C14.5037 13.8933 14.3844 13.961 14.2538 13.994C14.1234 14.0274 13.9864 14.0251 13.8573 13.9872C13.7281 13.9494 13.6115 13.8775 13.5198 13.779L10.4798 10.739ZM11.2998 5.99899C11.3087 5.4026 11.1989 4.81039 10.9768 4.25681C10.7547 3.70323 10.4248 3.19934 10.0062 2.77445C9.58757 2.34955 9.08865 2.01214 8.53844 1.78183C7.98824 1.55152 7.39773 1.43292 6.80127 1.43292C6.20481 1.43292 5.6143 1.55152 5.0641 1.78183C4.5139 2.01214 4.01498 2.34955 3.59637 2.77445C3.17777 3.19934 2.84783 3.70323 2.62575 4.25681C2.40367 4.81039 2.29388 5.4026 2.30277 5.99899C2.32039 7.18045 2.80208 8.30756 3.6438 9.13682C4.48552 9.96608 5.61968 10.4309 6.80127 10.4309C7.98286 10.4309 9.11703 9.96608 9.95874 9.13682C10.8005 8.30756 11.2822 7.18045 11.2998 5.99899Z" fill="#59636E"/>
+</svg>
diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index 1cdef63f..e4dbc4a8 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { selectToken } from '../preferences/preferenceSlice';
@@ -19,16 +19,16 @@ interface DocumentChunksProps {
   documentId: string;
   documentName?: string;
   handleGoBack: () => void;
-  showHeader?: boolean;
   path?: string;
+  renderFileSearch?: () => React.ReactNode;
 }
 
 const DocumentChunks: React.FC<DocumentChunksProps> = ({
   documentId,
   documentName,
   handleGoBack,
-  showHeader = true,
   path,
+  renderFileSearch
 }) => {
   const { t } = useTranslation();
   const token = useSelector(selectToken);
@@ -45,6 +45,8 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
     chunk: ChunkType | null;
   }>({ state: 'INACTIVE', chunk: null });
 
+
+
   const pathParts = path ? path.split('/') : [];
 
   const fetchChunks = () => {
@@ -149,159 +151,173 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
       .includes(searchTerm.toLowerCase());
   });
 
-  return (
-    <div className={`${showHeader ? 'mt-8' : 'mt-0'} flex flex-col`}>
-      {showHeader && (
-        <div className="mb-4 flex items-center overflow-hidden">
-          <button
-            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] flex-shrink-0"
-            onClick={handleGoBack}
-          >
-            <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
-          </button>
-
-          <div className="flex items-center overflow-hidden">
-            <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5 flex-shrink-0" />
-            <span className="text-[#7D54D1] font-semibold text-base leading-6 whitespace-nowrap">
-              {documentName}
-            </span>
-
-            {pathParts.length > 0 && (
-              <>
-                <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
-                {pathParts.map((part, index) => (
-                  <React.Fragment key={index}>
-                    <span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300 whitespace-nowrap">
-                      {part}
-                    </span>
-                    {index < pathParts.length - 1 && (
-                      <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
-                    )}
-                  </React.Fragment>
-                ))}
-              </>
-            )}
-          </div>
-        </div>
-      )}
-
-      <div className="mb-3 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
-        <div className="flex-1 w-full flex items-center border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-md overflow-hidden h-[38px]">
-          <div className="px-4 flex items-center text-gray-700 dark:text-[#E0E0E0] font-medium whitespace-nowrap h-full">
-            {totalChunks > 999999
-              ? `${(totalChunks / 1000000).toFixed(2)}M`
-              : totalChunks > 999
-                ? `${(totalChunks / 1000).toFixed(2)}K`
-                : totalChunks} {t('settings.documents.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')}
-              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]"
-            />
-          </div>
-        </div>
+  const renderPathNavigation = () => {
+    return (
+      <div className="flex items-center">
         <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')}
-          onClick={() => setAddModal('ACTIVE')}
+          className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] flex-shrink-0"
+          onClick={handleGoBack}
         >
-          {t('settings.documents.addNew')}
+          <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
         </button>
-      </div>
-      {loading ? (
-  <div className="w-full mt-24 flex justify-center">
-    <Spinner />
-  </div>
-) : (
-  <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-4">
-    {filteredChunks.length === 0 ? (
-      <div className="col-span-full flex flex-col items-center justify-center mt-24 text-center text-gray-500 dark:text-gray-400">
-        <img
-          src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-          alt={t('settings.documents.noChunksAlt')}
-          className="mx-auto mb-2 h-24 w-24"
-        />
-        {t('settings.documents.noChunks')}
-      </div>
-    ) : (
-      filteredChunks.map((chunk, index) => (
-        <div
-          key={index}
-          className="relative flex h-[208px] flex-col justify-between rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden w-full"
-        >
-                <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() : '-'} tokens
-                    </div>
-                    <button
-                      aria-label={'edit'}
-                      onClick={() => {
-                        setEditModal({
-                          state: 'ACTIVE',
-                          chunk: chunk,
-                        });
-                      }}
-                      className="text-left"
-                    >
-                      <img src={EditIcon} alt="edit" className="h-4 w-4" />
-                    </button>
-                  </div>
-                  <div className="p-4">
-                    <p className="font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] dark:text-[#E0E0E0] line-clamp-7 font-normal">
-                      {chunk.text}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            ))
+
+        <div className="flex items-center overflow-hidden">
+          <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5 flex-shrink-0" />
+          <span className="text-[#7D54D1] font-semibold text-base leading-6 whitespace-nowrap">
+            {documentName}
+          </span>
+
+          {pathParts.length > 0 && (
+            <>
+              <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
+              {pathParts.map((part, index) => (
+                <React.Fragment key={index}>
+                  <span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300 whitespace-nowrap">
+                    {part}
+                  </span>
+                  {index < pathParts.length - 1 && (
+                    <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
+                  )}
+                </React.Fragment>
+              ))}
+            </>
           )}
         </div>
-      )}
+      </div>
+    );
+  };
 
-      {!loading && filteredChunks.length > 0 && (
-        <Pagination
-          currentPage={page}
-          totalPages={Math.ceil(totalChunks / perPage)}
-          rowsPerPage={perPage}
-          onPageChange={setPage}
-          onRowsPerPageChange={(rows) => {
-            setPerPage(rows);
-            setPage(1);
-          }}
-        />
-      )}
+  return (
+    <div className="flex flex-col">
+      <div className="mb-4">
+        {renderPathNavigation()}
+      </div>
+      <div className="flex gap-4">
+        {renderFileSearch && (
+            renderFileSearch()
+        )}
 
-      <ChunkModal
-        type="ADD"
-        modalState={addModal}
-        setModalState={setAddModal}
-        handleSubmit={handleAddChunk}
-      />
-      {editModal.chunk && (
-        <ChunkModal
-          type="EDIT"
-          modalState={editModal.state}
-          setModalState={(state) =>
-            setEditModal((prev) => ({ ...prev, state }))
-          }
-          handleSubmit={(title, text) => {
-            handleUpdateChunk(title, text, editModal.chunk as ChunkType);
-          }}
-          originalText={editModal.chunk?.text ?? ''}
-          originalTitle={editModal.chunk?.metadata?.title ?? ''}
-          handleDelete={() => {
-            handleDeleteChunk(editModal.chunk as ChunkType);
-          }}
-        />
-      )}
-    </div>
-  );
+        {/* Right side: Chunks content */}
+        <div className="flex-1">
+          <div className="mb-3 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+            <div className="flex-1 w-full flex items-center border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-md overflow-hidden h-[38px]">
+              <div className="px-4 flex items-center text-gray-700 dark:text-[#E0E0E0] font-medium whitespace-nowrap h-full">
+                {totalChunks > 999999
+                  ? `${(totalChunks / 1000000).toFixed(2)}M`
+                  : totalChunks > 999
+                    ? `${(totalChunks / 1000).toFixed(2)}K`
+                    : totalChunks} {t('settings.documents.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')}
+                  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]"
+                />
+              </div>
+            </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')}
+              onClick={() => setAddModal('ACTIVE')}
+            >
+              {t('settings.documents.addNew')}
+            </button>
+          </div>
+          {loading ? (
+            <div className="w-full mt-24 flex justify-center">
+              <Spinner />
+            </div>
+          ) : (
+            <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-4">
+              {filteredChunks.length === 0 ? (
+                <div className="col-span-full flex flex-col items-center justify-center mt-24 text-center text-gray-500 dark:text-gray-400">
+                  <img
+                    src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
+                    alt={t('settings.documents.noChunksAlt')}
+                    className="mx-auto mb-2 h-24 w-24"
+                  />
+                  {t('settings.documents.noChunks')}
+                </div>
+              ) : (
+                filteredChunks.map((chunk, index) => (
+                  <div
+                    key={index}
+                    className="relative flex h-[208px] flex-col justify-between rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden w-full"
+                  >
+                    <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() : '-'} tokens
+                        </div>
+                        <button
+                          aria-label={'edit'}
+                          onClick={() => {
+                            setEditModal({
+                              state: 'ACTIVE',
+                              chunk: chunk,
+                            });
+                          }}
+                          className="text-left"
+                        >
+                          <img src={EditIcon} alt="edit" className="h-4 w-4" />
+                        </button>
+                      </div>
+                      <div className="p-4">
+                        <p className="font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] dark:text-[#E0E0E0] line-clamp-7 font-normal">
+                          {chunk.text}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+
+          {!loading && filteredChunks.length > 0 && (
+            <Pagination
+              currentPage={page}
+              totalPages={Math.ceil(totalChunks / perPage)}
+              rowsPerPage={perPage}
+              onPageChange={setPage}
+              onRowsPerPageChange={(rows) => {
+                setPerPage(rows);
+                setPage(1);
+              }}
+            />
+          )}
+
+          <ChunkModal
+            type="ADD"
+            modalState={addModal}
+            setModalState={setAddModal}
+            handleSubmit={handleAddChunk}
+          />
+          {editModal.chunk && (
+            <ChunkModal
+              type="EDIT"
+              modalState={editModal.state}
+              setModalState={(state) =>
+                setEditModal((prev) => ({ ...prev, state }))
+              }
+              handleSubmit={(title, text) => {
+                handleUpdateChunk(title, text, editModal.chunk as ChunkType);
+              }}
+              originalText={editModal.chunk?.text ?? ''}
+              originalTitle={editModal.chunk?.metadata?.title ?? ''}
+              handleDelete={() => {
+                handleDeleteChunk(editModal.chunk as ChunkType);
+              }}
+            />
+          )}
+        </div>
+        </div>
+        </div>
+        );
 };
 
-export default DocumentChunks;
+        export default DocumentChunks;
diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index 64a8e4b1..8cdbb4f3 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -12,6 +12,7 @@ import EyeView from '../assets/eye-view.svg';
 import OutlineSource from '../assets/outline-source.svg';
 import Trash from '../assets/red-trash.svg';
 import SearchIcon from '../assets/search.svg';
+import { useOutsideAlerter } from '../hooks';
 
 interface FileNode {
   type?: string;
@@ -58,6 +59,17 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   } | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+  const searchDropdownRef = useRef<HTMLDivElement>(null);
+  
+  useOutsideAlerter(
+    searchDropdownRef,
+    () => {
+      setSearchQuery('');
+      setSearchResults([]);
+    },
+    [],
+    false
+  );
 
   const handleFileClick = (fileName: string) => {
     const fullPath = [...currentPath, fileName].join('/');
@@ -435,103 +447,115 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     setSearchQuery('');
     setSearchResults([]);
   };
+  const renderFileSearch = () => {
+    return (
+      <div className="w-[283px]" ref={searchDropdownRef}>
+        <div className="relative">
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+              if (directoryStructure) {
+                setSearchResults(searchFiles(e.target.value, directoryStructure));
+              }
+            }}
+            placeholder={t('settings.documents.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`}
+          />
 
+          <img
+            src={SearchIcon}
+            alt="Search"
+            className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 opacity-60"
+          />
+
+          {searchQuery && (
+            <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')}
+                </div>
+              ) : (
+                searchResults.map((result, index) => (
+                  <div
+                    key={index}
+                    onClick={() => handleSearchSelect(result)}
+                    title={result.path}
+                    className={`flex items-center px-3 py-2 cursor-pointer hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${
+                      index !== searchResults.length - 1 ? "border-b border-[#D1D9E0] dark:border-[#6A6A6A]" : ""
+                    }`}
+                  >
+                    <img
+                      src={result.isFile ? FileIcon : FolderIcon}
+                      alt={result.isFile ? "File" : "Folder"}
+                      className="flex-shrink-0 w-4 h-4 mr-2"
+                    />
+                    <span className="text-sm dark:text-[#E0E0E0]">
+                      {result.path.split('/').pop() || result.path}
+                    </span>
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
 
   return (
     <>
-      <div className="mb-4">{renderPathNavigation()}</div>
       {selectedFile ? (
         <div className="flex">
-          {/* Search Panel */}
-          <div className="w-[283px] min-w-[283px] pr-4">
-            <div className="relative">
-              <input
-                type="text"
-                value={searchQuery}
-                onChange={(e) => {
-                  setSearchQuery(e.target.value);
-                  if (directoryStructure) {
-                    setSearchResults(searchFiles(e.target.value, directoryStructure));
-                  }
-                }}
-                placeholder={t('settings.documents.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`}
-              />
-
-              <img
-                src={SearchIcon}
-                alt="Search"
-                className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 opacity-60"
-              />
-
-              {searchQuery && (
-                <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.map((result, index) => {
-                    const name = result.path.split('/').pop() || result.path;
-
-                    return (
-                      <div
-                        key={index}
-                        onClick={() => handleSearchSelect(result)}
-                        title={result.path}
-                        className={`flex items-center px-3 py-2 cursor-pointer hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${index !== searchResults.length - 1 ? "border-b border-[#D1D9E0] dark:border-[#6A6A6A]" : ""
-                          }`}
-                      >
-                        <img
-                          src={result.isFile ? FileIcon : FolderIcon}
-                          alt={result.isFile ? "File" : "Folder"}
-                          className="flex-shrink-0 w-4 h-4 mr-2"
-                        />
-                        <span className="text-sm dark:text-[#E0E0E0]">
-                          {name}
-                        </span>
-                      </div>
-                    );
-                  })}
-                  {searchResults.length === 0 && (
-                    <div className="text-sm text-gray-500 dark:text-gray-400 text-center py-2">
-                      {t('settings.documents.noResults')}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
           <div className="flex-1 pl-4 pt-0">
             <DocumentChunks
               documentId={docId}
               documentName={sourceName}
               handleGoBack={() => setSelectedFile(null)}
               path={selectedFile.id}
-              showHeader={false}
+              renderFileSearch={renderFileSearch}
             />
           </div>
         </div>
       ) : (
-        <div className="mt-8 flex flex-col">
-          <div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
-            <table className="min-w-full table-fixed bg-transparent">
-              <thead className="bg-gray-100 dark:bg-[#27282D]">
-                <tr className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]">
-                  <th className="w-3/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
-                    Name
-                  </th>
-                  <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
-                    Tokens
-                  </th>
-                  <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
-                    Size
-                  </th>
-                  <th className="w-[60px] px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
-                    <span className="sr-only">Actions</span>
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="[&>tr:last-child]:border-b-0">
-                {renderFileTree(currentDirectory)}
-              </tbody>
-            </table>
+        <div className="flex flex-col">
+          <div className="mb-4">
+            {renderPathNavigation()}
+          </div>
+
+          <div className="flex gap-4">
+            {/* Left side: Search dropdown */}
+            {renderFileSearch()}
+            
+            {/* Right side: File table */}
+            <div className="flex-1">
+              <div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
+                <table className="min-w-full table-fixed bg-transparent">
+                  <thead className="bg-gray-100 dark:bg-[#27282D]">
+                    <tr className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]">
+                      <th className="w-3/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
+                        Name
+                      </th>
+                      <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
+                        Tokens
+                      </th>
+                      <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
+                        Size
+                      </th>
+                      <th className="w-[60px] px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
+                        <span className="sr-only">Actions</span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="[&>tr:last-child]:border-b-0">
+                    {renderFileTree(currentDirectory)}
+                  </tbody>
+                </table>
+              </div>
+            </div>
           </div>
         </div>
       )}
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 9a8e4195..30f71f26 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -272,7 +272,6 @@ export default function Documents({
           documentId={documentToView.id || ''}
           documentName={documentToView.name}
           handleGoBack={() => setDocumentToView(undefined)}
-          showHeader={true}
         />
       )}
     </div>

From b00c4cc3b6efc9e25c3ed97fd133e2fa30cb6bea Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 23 Jul 2025 02:22:56 +0530
Subject: [PATCH 22/57] (feat:chunk) editing mode

---
 frontend/src/components/DocumentChunks.tsx | 347 +++++++++++++--------
 1 file changed, 211 insertions(+), 136 deletions(-)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index e4dbc4a8..d2c402a9 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -39,11 +39,10 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
   const [totalChunks, setTotalChunks] = useState(0);
   const [loading, setLoading] = useLoaderState(true);
   const [searchTerm, setSearchTerm] = useState<string>('');
-  const [addModal, setAddModal] = useState<ActiveState>('INACTIVE');
-  const [editModal, setEditModal] = useState<{
-    state: ActiveState;
-    chunk: ChunkType | null;
-  }>({ state: 'INACTIVE', chunk: null });
+  const [editingChunk, setEditingChunk] = useState<ChunkType | null>(null);
+  const [editingTitle, setEditingTitle] = useState('');
+  const [editingText, setEditingText] = useState('');
+  const [isAddingChunk, setIsAddingChunk] = useState(false);
 
 
 
@@ -132,7 +131,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
           if (!response.ok) {
             throw new Error('Failed to delete chunk');
           }
-          setEditModal({ state: 'INACTIVE', chunk: null });
+          setEditingChunk(null);
           fetchChunks();
         });
     } catch (e) {
@@ -153,36 +152,67 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
 
   const renderPathNavigation = () => {
     return (
-      <div className="flex items-center">
-        <button
-          className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] flex-shrink-0"
-          onClick={handleGoBack}
-        >
-          <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
-        </button>
+      <div className="flex items-center justify-between w-full">
+        <div className="flex items-center">
+          <button
+            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] flex-shrink-0"
+            onClick={editingChunk ? () => setEditingChunk(null) : handleGoBack}
+          >
+            <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
+          </button>
 
-        <div className="flex items-center overflow-hidden">
-          <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5 flex-shrink-0" />
-          <span className="text-[#7D54D1] font-semibold text-base leading-6 whitespace-nowrap">
-            {documentName}
-          </span>
+          <div className="flex items-center overflow-hidden">
+            <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5 flex-shrink-0" />
+            <span className="text-[#7D54D1] font-semibold text-base leading-6 whitespace-nowrap">
+              {documentName}
+            </span>
 
-          {pathParts.length > 0 && (
-            <>
-              <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
-              {pathParts.map((part, index) => (
-                <React.Fragment key={index}>
-                  <span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300 whitespace-nowrap">
-                    {part}
-                  </span>
-                  {index < pathParts.length - 1 && (
-                    <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
-                  )}
-                </React.Fragment>
-              ))}
-            </>
-          )}
+            {pathParts.length > 0 && (
+              <>
+                <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
+                {pathParts.map((part, index) => (
+                  <React.Fragment key={index}>
+                    <span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300 whitespace-nowrap">
+                      {part}
+                    </span>
+                    {index < pathParts.length - 1 && (
+                      <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
+                    )}
+                  </React.Fragment>
+                ))}
+              </>
+            )}
+          </div>
         </div>
+
+        {editingChunk && (
+          <div className="flex gap-2">
+            <button
+              className="rounded-full border border-solid border-red-500 px-3 py-1 text-sm text-nowrap text-red-500 hover:bg-red-500 hover:text-white"
+              onClick={() => {
+                handleDeleteChunk(editingChunk);
+                setEditingChunk(null);
+              }}
+            >
+              {t('modals.chunk.delete')}
+            </button>
+            <button
+              onClick={() => setEditingChunk(null)}
+              className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50"
+            >
+              {t('modals.chunk.cancel')}
+            </button>
+            <button
+              onClick={() => {
+                handleUpdateChunk(editingTitle, editingText, editingChunk);
+                setEditingChunk(null);
+              }}
+              className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-3 py-1 text-sm text-white transition-all"
+            >
+              {t('modals.chunk.update')}
+            </button>
+          </div>
+        )}
       </div>
     );
   };
@@ -193,92 +223,161 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
         {renderPathNavigation()}
       </div>
       <div className="flex gap-4">
-        {renderFileSearch && (
-            renderFileSearch()
-        )}
+        {renderFileSearch && renderFileSearch()}
 
         {/* Right side: Chunks content */}
         <div className="flex-1">
-          <div className="mb-3 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
-            <div className="flex-1 w-full flex items-center border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-md overflow-hidden h-[38px]">
-              <div className="px-4 flex items-center text-gray-700 dark:text-[#E0E0E0] font-medium whitespace-nowrap h-full">
-                {totalChunks > 999999
-                  ? `${(totalChunks / 1000000).toFixed(2)}M`
-                  : totalChunks > 999
-                    ? `${(totalChunks / 1000).toFixed(2)}K`
-                    : totalChunks} {t('settings.documents.chunks')}
+          {!editingChunk && !isAddingChunk ? (
+            <>
+              <div className="mb-3 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+                <div className="flex-1 w-full flex items-center border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-md overflow-hidden h-[38px]">
+                  <div className="px-4 flex items-center text-gray-700 dark:text-[#E0E0E0] font-medium whitespace-nowrap h-full">
+                    {totalChunks > 999999
+                      ? `${(totalChunks / 1000000).toFixed(2)}M`
+                      : totalChunks > 999
+                        ? `${(totalChunks / 1000).toFixed(2)}K`
+                        : totalChunks} {t('settings.documents.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')}
+                      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]"
+                    />
+                  </div>
+                </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')}
+                  onClick={() => {
+                    setIsAddingChunk(true);
+                    setEditingTitle('');
+                    setEditingText('');
+                  }}
+                >
+                  {t('settings.documents.addNew')}
+                </button>
               </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')}
-                  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]"
-                />
-              </div>
-            </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')}
-              onClick={() => setAddModal('ACTIVE')}
-            >
-              {t('settings.documents.addNew')}
-            </button>
-          </div>
-          {loading ? (
-            <div className="w-full mt-24 flex justify-center">
-              <Spinner />
-            </div>
-          ) : (
-            <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-4">
-              {filteredChunks.length === 0 ? (
-                <div className="col-span-full flex flex-col items-center justify-center mt-24 text-center text-gray-500 dark:text-gray-400">
-                  <img
-                    src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                    alt={t('settings.documents.noChunksAlt')}
-                    className="mx-auto mb-2 h-24 w-24"
-                  />
-                  {t('settings.documents.noChunks')}
+              {loading ? (
+                <div className="w-full mt-24 flex justify-center">
+                  <Spinner />
                 </div>
               ) : (
-                filteredChunks.map((chunk, index) => (
-                  <div
-                    key={index}
-                    className="relative flex h-[208px] flex-col justify-between rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden w-full"
-                  >
-                    <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() : '-'} tokens
-                        </div>
-                        <button
-                          aria-label={'edit'}
-                          onClick={() => {
-                            setEditModal({
-                              state: 'ACTIVE',
-                              chunk: chunk,
-                            });
-                          }}
-                          className="text-left"
-                        >
-                          <img src={EditIcon} alt="edit" className="h-4 w-4" />
-                        </button>
-                      </div>
-                      <div className="p-4">
-                        <p className="font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] dark:text-[#E0E0E0] line-clamp-7 font-normal">
-                          {chunk.text}
-                        </p>
-                      </div>
+                <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {filteredChunks.length === 0 ? (
+                    <div className="col-span-full flex flex-col items-center justify-center mt-24 text-center text-gray-500 dark:text-gray-400">
+                      <img
+                        src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
+                        alt={t('settings.documents.noChunksAlt')}
+                        className="mx-auto mb-2 h-24 w-24"
+                      />
+                      {t('settings.documents.noChunks')}
                     </div>
-                  </div>
-                ))
+                  ) : (
+                    filteredChunks.map((chunk, index) => (
+                      <div
+                        key={index}
+                        className="relative flex h-[208px] flex-col justify-between rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden w-full"
+                      >
+                        <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() : '-'} tokens
+                            </div>
+                            <button
+                              aria-label={'edit'}
+                              onClick={() => {
+                                setEditingChunk(chunk);
+                                setEditingTitle(chunk.metadata?.title || '');
+                                setEditingText(chunk.text || '');
+                              }}
+                              className="text-left"
+                            >
+                              <img src={EditIcon} alt="edit" className="h-4 w-4" />
+                            </button>
+                          </div>
+                          <div className="p-4">
+                            <p className="font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] dark:text-[#E0E0E0] line-clamp-7 font-normal">
+                              {chunk.text}
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    ))
+                  )}
+                </div>
               )}
+            </>
+          ) : isAddingChunk ? (
+            // Add new chunk view
+            <div className="w-full">
+              <div className="mb-3 flex items-center justify-between">
+                <div className="flex items-center">
+                  <button
+                    className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] flex-shrink-0"
+                    onClick={() => setIsAddingChunk(false)}
+                  >
+                    <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
+                  </button>
+                  <span className="text-gray-700 dark:text-gray-300 font-medium">
+                    {t('settings.documents.addNewChunk')}
+                  </span>
+                </div>
+              </div>
+
+              <div className="relative">
+                <div className="border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-lg pt-3 pb-1">
+                  <textarea
+                    className="h-60 max-h-60 w-full resize-none px-3 outline-hidden dark:bg-transparent dark:text-white"
+                    value={editingText}
+                    onChange={(e) => setEditingText(e.target.value)}
+                    aria-label={t('modals.chunk.promptText')}
+                  ></textarea>
+                </div>
+              </div>
+
+              <div className="mt-8 flex flex-row-reverse gap-1">
+                <button
+                  onClick={() => {
+                    handleAddChunk(editingTitle, editingText);
+                    setIsAddingChunk(false);
+                  }}
+                  className="bg-purple-30 hover:bg-violets-are-blue rounded-3xl px-5 py-2 text-sm text-white transition-all"
+                >
+                  {t('modals.chunk.add')}
+                </button>
+                <button
+                  onClick={() => setIsAddingChunk(false)}
+                  className="dark:text-light-gray cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50"
+                >
+                  {t('modals.chunk.close')}
+                </button>
+              </div>
+            </div>
+          ) : editingChunk && (
+            <div className="w-full">
+              <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() : '-'} tokens
+                  </div>
+                </div>
+                <div className="p-4">
+                  <textarea
+                    className="w-full h-[400px] resize-none bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] outline-none"
+                    value={editingText}
+                    onChange={(e) => setEditingText(e.target.value)}
+                    aria-label={t('modals.chunk.promptText')}
+                  ></textarea>
+                </div>
+              </div>
             </div>
           )}
 
-          {!loading && filteredChunks.length > 0 && (
+          {!loading && filteredChunks.length > 0 && !editingChunk && !isAddingChunk && (
             <Pagination
               currentPage={page}
               totalPages={Math.ceil(totalChunks / perPage)}
@@ -290,34 +389,10 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
               }}
             />
           )}
-
-          <ChunkModal
-            type="ADD"
-            modalState={addModal}
-            setModalState={setAddModal}
-            handleSubmit={handleAddChunk}
-          />
-          {editModal.chunk && (
-            <ChunkModal
-              type="EDIT"
-              modalState={editModal.state}
-              setModalState={(state) =>
-                setEditModal((prev) => ({ ...prev, state }))
-              }
-              handleSubmit={(title, text) => {
-                handleUpdateChunk(title, text, editModal.chunk as ChunkType);
-              }}
-              originalText={editModal.chunk?.text ?? ''}
-              originalTitle={editModal.chunk?.metadata?.title ?? ''}
-              handleDelete={() => {
-                handleDeleteChunk(editModal.chunk as ChunkType);
-              }}
-            />
-          )}
         </div>
-        </div>
-        </div>
-        );
+      </div>
+    </div>
+  );
 };
 
-        export default DocumentChunks;
+export default DocumentChunks;

From 4d6ea401b570f998ce1988635274ba0e47841a1c Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 23 Jul 2025 03:36:18 +0530
Subject: [PATCH 23/57] (feat:chunks) line numbered editor

---
 frontend/src/components/DocumentChunks.tsx | 143 ++++++++++++++-------
 1 file changed, 94 insertions(+), 49 deletions(-)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index d2c402a9..9f3f639f 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { selectToken } from '../preferences/preferenceSlice';
@@ -15,6 +15,67 @@ import { ChunkType } from '../settings/types';
 import EditIcon from '../assets/edit.svg';
 import Pagination from './DocumentPagination';
 
+interface LineNumberedTextareaProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  ariaLabel?: string;
+  className?: string;
+}
+
+const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
+  value,
+  onChange,
+  placeholder,
+  ariaLabel,
+  className = ''
+}) => {
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onChange(e.target.value);
+  };
+
+  const lineHeight = 19.93;
+  const contentLines = value.split('\n').length;
+  const minLinesForDisplay = Math.ceil((typeof window !== 'undefined' ? window.innerHeight - 300 : 600) / lineHeight);
+  const totalLines = Math.max(contentLines, minLinesForDisplay);
+
+  return (
+    <div className={`relative w-full ${className}`}>
+      <div
+        className="absolute left-0 top-0 w-12 text-right text-gray-500 dark:text-gray-400 text-sm font-mono leading-[19.93px] select-none pr-3 pointer-events-none"
+        style={{
+          height: `${totalLines * lineHeight}px`
+        }}
+      >
+        {Array.from({ length: totalLines }, (_, i) => (
+          <div
+            key={i + 1}
+            className="flex items-center justify-end"
+            style={{
+              height: `${lineHeight}px`,
+              lineHeight: `${lineHeight}px`
+            }}
+          >
+            {i + 1}
+          </div>
+        ))}
+      </div>
+      <textarea
+        className={`w-full resize-none bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] outline-none border-none pl-12 overflow-hidden`}
+        value={value}
+        onChange={handleChange}
+        placeholder={placeholder}
+        aria-label={ariaLabel}
+        rows={totalLines}
+        style={{
+          height: `${totalLines * lineHeight}px`,
+          minHeight: 'calc(100vh - 300px)'
+        }}
+      />
+    </div>
+  );
+};
+
 interface DocumentChunksProps {
   documentId: string;
   documentName?: string;
@@ -156,7 +217,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
         <div className="flex items-center">
           <button
             className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] flex-shrink-0"
-            onClick={editingChunk ? () => setEditingChunk(null) : handleGoBack}
+            onClick={editingChunk ? () => setEditingChunk(null) : isAddingChunk ? () => setIsAddingChunk(false) : handleGoBack}
           >
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
           </button>
@@ -213,6 +274,26 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
             </button>
           </div>
         )}
+
+        {isAddingChunk && (
+          <div className="flex gap-2">
+            <button
+              onClick={() => setIsAddingChunk(false)}
+              className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50"
+            >
+              {t('modals.chunk.close')}
+            </button>
+            <button
+              onClick={() => {
+                handleAddChunk(editingTitle, editingText);
+                setIsAddingChunk(false);
+              }}
+              className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-3 py-1 text-sm text-white transition-all"
+            >
+              {t('modals.chunk.add')}
+            </button>
+          </div>
+        )}
       </div>
     );
   };
@@ -314,47 +395,12 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
           ) : isAddingChunk ? (
             // Add new chunk view
             <div className="w-full">
-              <div className="mb-3 flex items-center justify-between">
-                <div className="flex items-center">
-                  <button
-                    className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] flex-shrink-0"
-                    onClick={() => setIsAddingChunk(false)}
-                  >
-                    <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
-                  </button>
-                  <span className="text-gray-700 dark:text-gray-300 font-medium">
-                    {t('settings.documents.addNewChunk')}
-                  </span>
-                </div>
-              </div>
-
-              <div className="relative">
-                <div className="border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-lg pt-3 pb-1">
-                  <textarea
-                    className="h-60 max-h-60 w-full resize-none px-3 outline-hidden dark:bg-transparent dark:text-white"
-                    value={editingText}
-                    onChange={(e) => setEditingText(e.target.value)}
-                    aria-label={t('modals.chunk.promptText')}
-                  ></textarea>
-                </div>
-              </div>
-
-              <div className="mt-8 flex flex-row-reverse gap-1">
-                <button
-                  onClick={() => {
-                    handleAddChunk(editingTitle, editingText);
-                    setIsAddingChunk(false);
-                  }}
-                  className="bg-purple-30 hover:bg-violets-are-blue rounded-3xl px-5 py-2 text-sm text-white transition-all"
-                >
-                  {t('modals.chunk.add')}
-                </button>
-                <button
-                  onClick={() => setIsAddingChunk(false)}
-                  className="dark:text-light-gray cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50"
-                >
-                  {t('modals.chunk.close')}
-                </button>
+              <div className="relative border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-lg overflow-hidden">
+                <LineNumberedTextarea
+                  value={editingText}
+                  onChange={setEditingText}
+                  ariaLabel={t('modals.chunk.promptText')}
+                />
               </div>
             </div>
           ) : editingChunk && (
@@ -365,13 +411,12 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                     {editingChunk.metadata.token_count ? editingChunk.metadata.token_count.toLocaleString() : '-'} tokens
                   </div>
                 </div>
-                <div className="p-4">
-                  <textarea
-                    className="w-full h-[400px] resize-none bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] outline-none"
+                <div className="p-4 overflow-hidden">
+                  <LineNumberedTextarea
                     value={editingText}
-                    onChange={(e) => setEditingText(e.target.value)}
-                    aria-label={t('modals.chunk.promptText')}
-                  ></textarea>
+                    onChange={setEditingText}
+                    ariaLabel={t('modals.chunk.promptText')}
+                  />
                 </div>
               </div>
             </div>

From ad2f0f89501796c0235e4166d1ad041a502db2a9 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 23 Jul 2025 20:47:36 +0530
Subject: [PATCH 24/57] (chore:chunks) i18n

---
 frontend/src/components/DocumentChunks.tsx    | 43 ++++++++++++++++---
 frontend/src/components/FileTreeComponent.tsx | 20 ++++-----
 frontend/src/locale/en.json                   | 14 +++++-
 frontend/src/locale/es.json                   | 14 +++++-
 frontend/src/locale/jp.json                   | 14 +++++-
 frontend/src/locale/ru.json                   | 14 +++++-
 frontend/src/locale/zh-TW.json                | 14 +++++-
 frontend/src/locale/zh.json                   | 14 +++++-
 8 files changed, 125 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index 9f3f639f..436e70ac 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -10,6 +10,7 @@ import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import OutlineSource from '../assets/outline-source.svg';
 import Spinner from '../components/Spinner';
 import ChunkModal from '../modals/ChunkModal';
+import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState } from '../models/misc';
 import { ChunkType } from '../settings/types';
 import EditIcon from '../assets/edit.svg';
@@ -104,6 +105,8 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
   const [editingTitle, setEditingTitle] = useState('');
   const [editingText, setEditingText] = useState('');
   const [isAddingChunk, setIsAddingChunk] = useState(false);
+  const [deleteModalState, setDeleteModalState] = useState<ActiveState>('INACTIVE');
+  const [chunkToDelete, setChunkToDelete] = useState<ChunkType | null>(null);
 
 
 
@@ -200,6 +203,24 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
     }
   };
 
+  const confirmDeleteChunk = (chunk: ChunkType) => {
+    setChunkToDelete(chunk);
+    setDeleteModalState('ACTIVE');
+  };
+
+  const handleConfirmedDelete = () => {
+    if (chunkToDelete) {
+      handleDeleteChunk(chunkToDelete);
+      setDeleteModalState('INACTIVE');
+      setChunkToDelete(null);
+    }
+  };
+
+  const handleCancelDelete = () => {
+    setDeleteModalState('INACTIVE');
+    setChunkToDelete(null);
+  };
+
   useEffect(() => {
     fetchChunks();
   }, [page, perPage, path]);
@@ -251,8 +272,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
             <button
               className="rounded-full border border-solid border-red-500 px-3 py-1 text-sm text-nowrap text-red-500 hover:bg-red-500 hover:text-white"
               onClick={() => {
-                handleDeleteChunk(editingChunk);
-                setEditingChunk(null);
+                confirmDeleteChunk(editingChunk);
               }}
             >
               {t('modals.chunk.delete')}
@@ -281,7 +301,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
               onClick={() => setIsAddingChunk(false)}
               className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50"
             >
-              {t('modals.chunk.close')}
+              {t('modals.chunk.cancel')}
             </button>
             <button
               onClick={() => {
@@ -366,10 +386,10 @@ 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() : '-'} tokens
+                              {chunk.metadata.token_count ? chunk.metadata.token_count.toLocaleString() : '-'} {t('settings.documents.tokensUnit')}
                             </div>
                             <button
-                              aria-label={'edit'}
+                              aria-label={t('settings.documents.editAlt')}
                               onClick={() => {
                                 setEditingChunk(chunk);
                                 setEditingTitle(chunk.metadata?.title || '');
@@ -408,7 +428,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() : '-'} tokens
+                    {editingChunk.metadata.token_count ? editingChunk.metadata.token_count.toLocaleString() : '-'} {t('settings.documents.tokensUnit')}
                   </div>
                 </div>
                 <div className="p-4 overflow-hidden">
@@ -436,6 +456,17 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
           )}
         </div>
       </div>
+
+      {/* Delete Confirmation Modal */}
+      <ConfirmationModal
+        message={t('modals.chunk.deleteConfirmation')}
+        modalState={deleteModalState}
+        setModalState={setDeleteModalState}
+        handleSubmit={handleConfirmedDelete}
+        handleCancel={handleCancelDelete}
+        submitLabel={t('modals.chunk.delete')}
+        variant="danger"
+      />
     </div>
   );
 };
diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index 8cdbb4f3..20d27e47 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -283,7 +283,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               <div className="flex items-center">
                 <img
                   src={FolderIcon}
-                  alt="Parent folder"
+                  alt={t('settings.documents.parentFolderAlt')}
                   className="mr-2 h-4 w-4"
                 />
                 <span className="text-sm dark:text-[#E0E0E0]">..</span>
@@ -312,7 +312,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           >
             <td className="px-4 py-2">
               <div className="flex items-center">
-                <img src={FolderIcon} alt="Folder" className="mr-2 h-4 w-4" />
+                <img src={FolderIcon} alt={t('settings.documents.folderAlt')} className="mr-2 h-4 w-4" />
                 <span className="text-sm dark:text-[#E0E0E0]">{name}</span>
               </div>
             </td>
@@ -333,7 +333,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                 >
                   <img
                     src={ThreeDots}
-                    alt="Menu"
+                    alt={t('settings.documents.menuAlt')}
                     className="opacity-60 hover:opacity-100"
                   />
                 </button>
@@ -364,7 +364,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           >
             <td className="px-4 py-2">
               <div className="flex items-center">
-                <img src={FileIcon} alt="File" className="mr-2 h-4 w-4" />
+                <img src={FileIcon} alt={t('settings.documents.fileAlt')} className="mr-2 h-4 w-4" />
                 <span className="text-sm dark:text-[#E0E0E0]">{name}</span>
               </div>
             </td>
@@ -383,7 +383,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                 >
                   <img
                     src={ThreeDots}
-                    alt="Menu"
+                    alt={t('settings.documents.menuAlt')}
                     className="opacity-60 hover:opacity-100"
                   />
                 </button>
@@ -490,7 +490,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                   >
                     <img
                       src={result.isFile ? FileIcon : FolderIcon}
-                      alt={result.isFile ? "File" : "Folder"}
+                      alt={result.isFile ? t('settings.documents.fileAlt') : t('settings.documents.folderAlt')}
                       className="flex-shrink-0 w-4 h-4 mr-2"
                     />
                     <span className="text-sm dark:text-[#E0E0E0]">
@@ -537,16 +537,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="w-3/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
-                        Name
+                        {t('settings.documents.fileName')}
                       </th>
                       <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
-                        Tokens
+                        {t('settings.documents.tokens')}
                       </th>
                       <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
-                        Size
+                        {t('settings.documents.size')}
                       </th>
                       <th className="w-[60px] px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
-                        <span className="sr-only">Actions</span>
+                        <span className="sr-only">{t('settings.documents.actions')}</span>
                       </th>
                     </tr>
                   </thead>
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index b538cdde..3c529fc5 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -79,7 +79,18 @@
       "noChunks": "No chunks found",
       "noChunksAlt": "No chunks found",
       "goToDocuments": "Go to Documents",
-      "uploadNew": "Upload new"
+      "uploadNew": "Upload new",
+      "searchFiles": "Search files...",
+      "noResults": "No results found",
+      "fileName": "Name",
+      "tokens": "Tokens",
+      "size": "Size",
+      "fileAlt": "File",
+      "folderAlt": "Folder",
+      "parentFolderAlt": "Parent folder",
+      "menuAlt": "Menu",
+      "tokensUnit": "tokens",
+      "editAlt": "Edit"
     },
     "apiKeys": {
       "label": "Chatbots",
@@ -257,6 +268,7 @@
       "promptText": "Prompt Text",
       "update": "Update",
       "close": "Close",
+      "cancel": "Cancel",
       "delete": "Delete",
       "deleteConfirmation": "Are you sure you want to delete this chunk?"
     }
diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
index bcdebfcb..0b54582b 100644
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -79,7 +79,18 @@
       "noChunks": "No se encontraron fragmentos",
       "noChunksAlt": "No se encontraron fragmentos",
       "goToDocuments": "Ir a Documentos",
-      "uploadNew": "Subir nuevo"
+      "uploadNew": "Subir nuevo",
+      "searchFiles": "Buscar archivos...",
+      "noResults": "No se encontraron resultados",
+      "fileName": "Nombre",
+      "tokens": "Tokens",
+      "size": "Tamaño",
+      "fileAlt": "Archivo",
+      "folderAlt": "Carpeta",
+      "parentFolderAlt": "Carpeta padre",
+      "menuAlt": "Menú",
+      "tokensUnit": "tokens",
+      "editAlt": "Editar"
     },
     "apiKeys": {
       "label": "Chatbots",
@@ -257,6 +268,7 @@
       "promptText": "Texto del prompt",
       "update": "Actualizar",
       "close": "Cerrar",
+      "cancel": "Cancelar",
       "delete": "Eliminar",
       "deleteConfirmation": "¿Estás seguro de que deseas eliminar este fragmento?"
     }
diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index d004e0dc..42d7bb93 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -79,7 +79,18 @@
       "noChunks": "チャンクが見つかりません",
       "noChunksAlt": "チャンクが見つかりません",
       "goToDocuments": "ドキュメントへ移動",
-      "uploadNew": "新規アップロード"
+      "uploadNew": "新規アップロード",
+      "searchFiles": "ファイルを検索...",
+      "noResults": "結果が見つかりません",
+      "fileName": "名前",
+      "tokens": "トークン",
+      "size": "サイズ",
+      "fileAlt": "ファイル",
+      "folderAlt": "フォルダ",
+      "parentFolderAlt": "親フォルダ",
+      "menuAlt": "メニュー",
+      "tokensUnit": "トークン",
+      "editAlt": "編集"
     },
     "apiKeys": {
       "label": "チャットボット",
@@ -257,6 +268,7 @@
       "promptText": "プロンプトテキスト",
       "update": "更新",
       "close": "閉じる",
+      "cancel": "キャンセル",
       "delete": "削除",
       "deleteConfirmation": "このチャンクを削除してもよろしいですか？"
     }
diff --git a/frontend/src/locale/ru.json b/frontend/src/locale/ru.json
index 95c7a228..13ae6829 100644
--- a/frontend/src/locale/ru.json
+++ b/frontend/src/locale/ru.json
@@ -79,7 +79,18 @@
       "noChunks": "Фрагменты не найдены",
       "noChunksAlt": "Фрагменты не найдены",
       "goToDocuments": "Перейти к документам",
-      "uploadNew": "Загрузить новый"
+      "uploadNew": "Загрузить новый",
+      "searchFiles": "Поиск файлов...",
+      "noResults": "Результаты не найдены",
+      "fileName": "Имя",
+      "tokens": "Токены",
+      "size": "Размер",
+      "fileAlt": "Файл",
+      "folderAlt": "Папка",
+      "parentFolderAlt": "Родительская папка",
+      "menuAlt": "Меню",
+      "tokensUnit": "токенов",
+      "editAlt": "Редактировать"
     },
     "apiKeys": {
       "label": "API ключи",
@@ -257,6 +268,7 @@
       "promptText": "Текст подсказки",
       "update": "Обновить",
       "close": "Закрыть",
+      "cancel": "Отмена",
       "delete": "Удалить",
       "deleteConfirmation": "Вы уверены, что хотите удалить этот фрагмент?"
     }
diff --git a/frontend/src/locale/zh-TW.json b/frontend/src/locale/zh-TW.json
index 36baa8b1..f590b63b 100644
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -79,7 +79,18 @@
       "noChunks": "未找到文本塊",
       "noChunksAlt": "未找到文本塊",
       "goToDocuments": "前往文件",
-      "uploadNew": "上傳新文件"
+      "uploadNew": "上傳新文件",
+      "searchFiles": "搜尋檔案...",
+      "noResults": "未找到結果",
+      "fileName": "名稱",
+      "tokens": "Token",
+      "size": "大小",
+      "fileAlt": "檔案",
+      "folderAlt": "資料夾",
+      "parentFolderAlt": "上層資料夾",
+      "menuAlt": "選單",
+      "tokensUnit": "Token",
+      "editAlt": "編輯"
     },
     "apiKeys": {
       "label": "聊天機器人",
@@ -257,6 +268,7 @@
       "promptText": "提示文字",
       "update": "更新",
       "close": "關閉",
+      "cancel": "取消",
       "delete": "刪除",
       "deleteConfirmation": "您確定要刪除此區塊嗎？"
     }
diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
index 804f5fb2..c1a6b4a0 100644
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -79,7 +79,18 @@
       "noChunks": "未找到文本块",
       "noChunksAlt": "未找到文本块",
       "goToDocuments": "前往文档",
-      "uploadNew": "上传新文档"
+      "uploadNew": "上传新文档",
+      "searchFiles": "搜索文件...",
+      "noResults": "未找到结果",
+      "fileName": "名称",
+      "tokens": "令牌",
+      "size": "大小",
+      "fileAlt": "文件",
+      "folderAlt": "文件夹",
+      "parentFolderAlt": "父文件夹",
+      "menuAlt": "菜单",
+      "tokensUnit": "令牌",
+      "editAlt": "编辑"
     },
     "apiKeys": {
       "label": "聊天机器人",
@@ -257,6 +268,7 @@
       "promptText": "提示文本",
       "update": "更新",
       "close": "关闭",
+      "cancel": "取消",
       "delete": "删除",
       "deleteConfirmation": "您确定要删除此块吗？"
     }

From 58465ece65069467b16bb20f72e2c856b40180be Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Fri, 25 Jul 2025 01:43:50 +0530
Subject: [PATCH 25/57] (feat:chunks) server-side filter on search

---
 application/api/user/routes.py             | 39 ++++++++++++++------
 frontend/src/api/endpoints.ts              |  5 ++-
 frontend/src/api/services/userService.ts   |  3 +-
 frontend/src/components/DocumentChunks.tsx | 42 ++++++++++++++++------
 4 files changed, 66 insertions(+), 23 deletions(-)

diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index 785b6b4c..604dff15 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -3265,12 +3265,13 @@ class DeleteTool(Resource):
 @user_ns.route("/api/get_chunks")
 class GetChunks(Resource):
     @api.doc(
-        description="Retrieves chunks from a document, optionally filtered by file path",
+        description="Retrieves chunks from a document, optionally filtered by file path and search term",
         params={
             "id": "The document ID",
             "page": "Page number for pagination",
             "per_page": "Number of chunks per page",
-            "path": "Optional: Filter chunks by relative file path"
+            "path": "Optional: Filter chunks by relative file path",
+            "search": "Optional: Search term to filter chunks by title or content"
         },
     )
     def get(self):
@@ -3282,6 +3283,7 @@ class GetChunks(Resource):
         page = int(request.args.get("page", 1))
         per_page = int(request.args.get("per_page", 10))
         path = request.args.get("path")
+        search_term = request.args.get("search", "").strip().lower()
 
         if not ObjectId.is_valid(doc_id):
             return make_response(jsonify({"error": "Invalid doc_id"}), 400)
@@ -3294,20 +3296,35 @@ class GetChunks(Resource):
             store = get_vector_store(doc_id)
             chunks = store.get_chunks()
             
-            if path:
-                filtered_chunks = []
-                for chunk in chunks:
-                    metadata = chunk.get("metadata", {})
+            filtered_chunks = []
+            for chunk in chunks:
+                metadata = chunk.get("metadata", {})
+                
+                if path:
                     source = metadata.get("source", "")
+                    path_match = False
                     
                     if isinstance(source, str) and source.endswith(path):
-                        filtered_chunks.append(chunk)
+                        path_match = True
                     elif isinstance(source, list):
                         for src in source:
                             if isinstance(src, str) and src.endswith(path):
-                                filtered_chunks.append(chunk)
+                                path_match = True
                                 break
-                chunks = filtered_chunks
+                    
+                    if not path_match:
+                        continue
+                
+                if search_term:
+                    text_match = search_term in chunk.get("text", "").lower()
+                    title_match = search_term in metadata.get("title", "").lower()
+                    
+                    if not (text_match or title_match):
+                        continue
+                    
+                filtered_chunks.append(chunk)
+            
+            chunks = filtered_chunks
             
             total_chunks = len(chunks)
             start = (page - 1) * per_page
@@ -3321,7 +3338,8 @@ class GetChunks(Resource):
                         "per_page": per_page,
                         "total": total_chunks,
                         "chunks": paginated_chunks,
-                        "path": path if path else None
+                        "path": path if path else None,
+                        "search": search_term if search_term else None
                     }
                 ),
                 200,
@@ -3330,7 +3348,6 @@ class GetChunks(Resource):
             current_app.logger.error(f"Error getting chunks: {e}", exc_info=True)
             return make_response(jsonify({"success": False}), 500)
 
-
 @user_ns.route("/api/add_chunk")
 class AddChunk(Resource):
     @api.expect(
diff --git a/frontend/src/api/endpoints.ts b/frontend/src/api/endpoints.ts
index 37c52c41..2980da46 100644
--- a/frontend/src/api/endpoints.ts
+++ b/frontend/src/api/endpoints.ts
@@ -43,8 +43,11 @@ const endpoints = {
       page: number,
       per_page: number,
       path?: string,
+      search?: string,
     ) =>
-      `/api/get_chunks?id=${docId}&page=${page}&per_page=${per_page}${path ? `&path=${encodeURIComponent(path)}` : ''}`,
+      `/api/get_chunks?id=${docId}&page=${page}&per_page=${per_page}${
+        path ? `&path=${encodeURIComponent(path)}` : ''
+      }${search ? `&search=${encodeURIComponent(search)}` : ''}`,
     ADD_CHUNK: '/api/add_chunk',
     DELETE_CHUNK: (docId: string, chunkId: string) =>
       `/api/delete_chunk?id=${docId}&chunk_id=${chunkId}`,
diff --git a/frontend/src/api/services/userService.ts b/frontend/src/api/services/userService.ts
index 43671657..a2968312 100644
--- a/frontend/src/api/services/userService.ts
+++ b/frontend/src/api/services/userService.ts
@@ -87,8 +87,9 @@ const userService = {
     perPage: number,
     token: string | null,
     path?: string,
+    search?: string,
   ): Promise<any> =>
-    apiClient.get(endpoints.USER.GET_CHUNKS(docId, page, perPage, path), token),
+    apiClient.get(endpoints.USER.GET_CHUNKS(docId, page, perPage, path, search), token),
   addChunk: (data: any, token: string | null): Promise<any> =>
     apiClient.post(endpoints.USER.ADD_CHUNK, data, token),
   deleteChunk: (
diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index 436e70ac..c11f3559 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -116,7 +116,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
     setLoading(true);
     try {
       userService
-        .getDocumentChunks(documentId, page, perPage, token, path)
+        .getDocumentChunks(documentId, page, perPage, token, path, searchTerm)
         .then((response) => {
           if (!response.ok) {
             setLoading(false);
@@ -131,10 +131,14 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
           setTotalChunks(data.total);
           setPaginatedChunks(data.chunks);
           setLoading(false);
+        })
+        .catch((error) => {
+          setLoading(false);
+          setPaginatedChunks([]);
         });
     } catch (e) {
-      console.log(e);
       setLoading(false);
+      setPaginatedChunks([]);
     }
   };
 
@@ -221,16 +225,34 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
     setChunkToDelete(null);
   };
 
+  useEffect(() => {
+    const delayDebounceFn = setTimeout(() => {
+      if (page !== 1) {
+        setPage(1);
+      } else {
+        fetchChunks();
+      }
+    }, 300);
+
+    return () => clearTimeout(delayDebounceFn);
+  }, [searchTerm]);
   useEffect(() => {
     fetchChunks();
   }, [page, perPage, path]);
+  useEffect(() => {
+    setSearchTerm('');
+    setPage(1);
+  }, [path]);
+  // Remove the client-side filtering
+  // const filteredChunks = paginatedChunks.filter((chunk) => {
+  //   if (!chunk.metadata?.title) return true;
+  //   return chunk.metadata.title
+  //     .toLowerCase()
+  //     .includes(searchTerm.toLowerCase());
+  // });
 
-  const filteredChunks = paginatedChunks.filter((chunk) => {
-    if (!chunk.metadata?.title) return true;
-    return chunk.metadata.title
-      .toLowerCase()
-      .includes(searchTerm.toLowerCase());
-  });
+  // Use the server-filtered chunks directly
+  const filteredChunks = paginatedChunks;
 
   const renderPathNavigation = () => {
     return (
@@ -367,7 +389,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                   <Spinner />
                 </div>
               ) : (
-                <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                   {filteredChunks.length === 0 ? (
                     <div className="col-span-full flex flex-col items-center justify-center mt-24 text-center text-gray-500 dark:text-gray-400">
                       <img
@@ -442,7 +464,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
             </div>
           )}
 
-          {!loading && filteredChunks.length > 0 && !editingChunk && !isAddingChunk && (
+          {!loading && totalChunks > perPage && !editingChunk && !isAddingChunk && (
             <Pagination
               currentPage={page}
               totalPages={Math.ceil(totalChunks / perPage)}

From 67423d51b99f9a01a9588e3405f7cf920d968362 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Fri, 25 Jul 2025 04:05:06 +0530
Subject: [PATCH 26/57] (feat:chunks) ask to edit, ui

---
 frontend/src/components/DocumentChunks.tsx | 125 ++++++++++++---------
 1 file changed, 74 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index c11f3559..ccdd5129 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -22,6 +22,7 @@ interface LineNumberedTextareaProps {
   placeholder?: string;
   ariaLabel?: string;
   className?: string;
+  editable?: boolean;
 }
 
 const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
@@ -29,7 +30,8 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
   onChange,
   placeholder,
   ariaLabel,
-  className = ''
+  className = '',
+  editable = true
 }) => {
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     onChange(e.target.value);
@@ -61,18 +63,29 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
           </div>
         ))}
       </div>
-      <textarea
-        className={`w-full resize-none bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] outline-none border-none pl-12 overflow-hidden`}
-        value={value}
-        onChange={handleChange}
-        placeholder={placeholder}
-        aria-label={ariaLabel}
-        rows={totalLines}
-        style={{
-          height: `${totalLines * lineHeight}px`,
-          minHeight: 'calc(100vh - 300px)'
-        }}
-      />
+      {editable ? (
+        <textarea
+          className={`w-full resize-none bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] outline-none border-none pl-12 overflow-hidden`}
+          value={value}
+          onChange={handleChange}
+          placeholder={placeholder}
+          aria-label={ariaLabel}
+          rows={totalLines}
+          style={{
+            height: `${totalLines * lineHeight}px`,
+            minHeight: 'calc(100vh - 300px)'
+          }}
+        />
+      ) : (
+        <div
+          className={`w-full bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] pl-12 whitespace-pre-wrap`}
+          style={{
+            minHeight: `${totalLines * lineHeight}px`
+          }}
+        >
+          {value}
+        </div>
+      )}
     </div>
   );
 };
@@ -107,8 +120,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
   const [isAddingChunk, setIsAddingChunk] = useState(false);
   const [deleteModalState, setDeleteModalState] = useState<ActiveState>('INACTIVE');
   const [chunkToDelete, setChunkToDelete] = useState<ChunkType | null>(null);
-
-
+  const [isEditing, setIsEditing] = useState(false);
 
   const pathParts = path ? path.split('/') : [];
 
@@ -291,29 +303,44 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
 
         {editingChunk && (
           <div className="flex gap-2">
-            <button
-              className="rounded-full border border-solid border-red-500 px-3 py-1 text-sm text-nowrap text-red-500 hover:bg-red-500 hover:text-white"
-              onClick={() => {
-                confirmDeleteChunk(editingChunk);
-              }}
-            >
-              {t('modals.chunk.delete')}
-            </button>
-            <button
-              onClick={() => setEditingChunk(null)}
-              className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50"
-            >
-              {t('modals.chunk.cancel')}
-            </button>
-            <button
-              onClick={() => {
-                handleUpdateChunk(editingTitle, editingText, editingChunk);
-                setEditingChunk(null);
-              }}
-              className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-3 py-1 text-sm text-white transition-all"
-            >
-              {t('modals.chunk.update')}
-            </button>
+            {!isEditing ? (
+              <button
+                className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-3 py-1 text-sm text-white transition-all"
+                onClick={() => setIsEditing(true)}
+              >
+                {t('modals.chunk.edit')}
+              </button>
+            ) : (
+              <>
+                <button
+                  className="rounded-full border border-solid border-red-500 px-3 py-1 text-sm text-nowrap text-red-500 hover:bg-red-500 hover:text-white"
+                  onClick={() => {
+                    confirmDeleteChunk(editingChunk);
+                  }}
+                >
+                  {t('modals.chunk.delete')}
+                </button>
+                <button
+                  onClick={() => {
+                    setIsEditing(false);
+                    setEditingChunk(null);
+                  }}
+                  className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50"
+                >
+                  {t('modals.chunk.cancel')}
+                </button>
+                <button
+                  onClick={() => {
+                    handleUpdateChunk(editingTitle, editingText, editingChunk);
+                    setIsEditing(false);
+                    setEditingChunk(null);
+                  }}
+                  className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-3 py-1 text-sm text-white transition-all"
+                >
+                  {t('modals.chunk.update')}
+                </button>
+              </>
+            )}
           </div>
         )}
 
@@ -403,24 +430,18 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                     filteredChunks.map((chunk, index) => (
                       <div
                         key={index}
-                        className="relative flex h-[208px] flex-col justify-between rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden w-full"
+                        className="transform transition-transform duration-200 hover:scale-105 relative flex h-[208px] flex-col justify-between rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden w-full"
+                        onClick={() => {
+                          setEditingChunk(chunk);
+                          setEditingTitle(chunk.metadata?.title || '');
+                          setEditingText(chunk.text || '');
+                        }}
                       >
                         <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')}
                             </div>
-                            <button
-                              aria-label={t('settings.documents.editAlt')}
-                              onClick={() => {
-                                setEditingChunk(chunk);
-                                setEditingTitle(chunk.metadata?.title || '');
-                                setEditingText(chunk.text || '');
-                              }}
-                              className="text-left"
-                            >
-                              <img src={EditIcon} alt="edit" className="h-4 w-4" />
-                            </button>
                           </div>
                           <div className="p-4">
                             <p className="font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] dark:text-[#E0E0E0] line-clamp-7 font-normal">
@@ -442,6 +463,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                   value={editingText}
                   onChange={setEditingText}
                   ariaLabel={t('modals.chunk.promptText')}
+                  editable={true}
                 />
               </div>
             </div>
@@ -455,9 +477,10 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                 </div>
                 <div className="p-4 overflow-hidden">
                   <LineNumberedTextarea
-                    value={editingText}
+                    value={isEditing ? editingText : editingChunk.text}
                     onChange={setEditingText}
                     ariaLabel={t('modals.chunk.promptText')}
+                    editable={isEditing}
                   />
                 </div>
               </div>

From 5e4748f9d91ada079dce56c61b5b59ba76408b05 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Sat, 26 Jul 2025 00:14:17 +0530
Subject: [PATCH 27/57] (fix:faiss) rely on storage abstrct

---
 application/vectorstore/faiss.py | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/application/vectorstore/faiss.py b/application/vectorstore/faiss.py
index 2c1fcb93..b9c63cc8 100644
--- a/application/vectorstore/faiss.py
+++ b/application/vectorstore/faiss.py
@@ -1,5 +1,6 @@
 import os
 import tempfile
+import io
 
 from langchain_community.vectorstores import FAISS
 
@@ -66,8 +67,26 @@ class FaissStore(BaseVectorStore):
     def add_texts(self, *args, **kwargs):
         return self.docsearch.add_texts(*args, **kwargs)
 
-    def save_local(self, *args, **kwargs):
-        return self.docsearch.save_local(*args, **kwargs)
+    def save_local(self, path):
+        """
+        Save the FAISS index to disk and upload to storage.
+        
+        Args:
+            path: Path where the index should be stored
+        """
+        with tempfile.TemporaryDirectory() as temp_dir:
+            self.docsearch.save_local(temp_dir)
+            
+            with open(os.path.join(temp_dir, "index.faiss"), "rb") as f_faiss:
+                faiss_data = f_faiss.read()
+            
+            with open(os.path.join(temp_dir, "index.pkl"), "rb") as f_pkl:
+                pkl_data = f_pkl.read()
+    
+            self.storage.save_file(io.BytesIO(faiss_data), f"{path}/index.faiss")
+            self.storage.save_file(io.BytesIO(pkl_data), f"{path}/index.pkl")
+        
+        return True
 
     def delete_index(self, *args, **kwargs):
         return self.docsearch.delete(*args, **kwargs)

From e90e80c289f844230de469c72162b59506096528 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Sat, 26 Jul 2025 00:16:45 +0530
Subject: [PATCH 28/57] (fix:chunks) also count tokens

---
 application/api/user/routes.py | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index 604dff15..403008bd 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -9,7 +9,6 @@ from functools import wraps
 from typing import Optional, Tuple
 import tempfile
 import zipfile
-
 from bson.binary import Binary, UuidRepresentation
 from bson.dbref import DBRef
 from bson.objectid import ObjectId
@@ -46,6 +45,7 @@ from application.utils import (
     validate_function_name,
     validate_required_fields,
 )
+from application.utils import num_tokens_from_string
 from application.vectorstore.vector_creator import VectorCreator
 
 storage = StorageCreator.get_storage()
@@ -3379,6 +3379,8 @@ class AddChunk(Resource):
         doc_id = data.get("id")
         text = data.get("text")
         metadata = data.get("metadata", {})
+        token_count = num_tokens_from_string(text)
+        metadata["token_count"] = token_count
 
         if not ObjectId.is_valid(doc_id):
             return make_response(jsonify({"error": "Invalid doc_id"}), 400)
@@ -3475,6 +3477,12 @@ class UpdateChunk(Resource):
         text = data.get("text")
         metadata = data.get("metadata")
 
+        if text is not None:
+            token_count = num_tokens_from_string(text)
+            if metadata is None:
+                metadata = {}
+            metadata["token_count"] = token_count
+
         if not ObjectId.is_valid(doc_id):
             return make_response(jsonify({"error": "Invalid doc_id"}), 400)
         doc = sources_collection.find_one({"_id": ObjectId(doc_id), "user": user})
@@ -3498,6 +3506,10 @@ class UpdateChunk(Resource):
                 metadata if metadata is not None else existing_chunk["metadata"]
             )
 
+            if text is not None and metadata is None:
+                token_count = num_tokens_from_string(new_text)
+                new_metadata["token_count"] = token_count
+
             new_chunk_id = store.add_chunk(new_text, new_metadata)
 
             return make_response(

From 2508d0fbb3793d80d50d98b8ac98ba588d4ba0ea Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Sat, 26 Jul 2025 00:27:39 +0530
Subject: [PATCH 29/57] (fix:chunks) preserve paths

---
 frontend/src/components/DocumentChunks.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index ccdd5129..c7ed739f 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -156,14 +156,18 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
 
   const handleAddChunk = (title: string, text: string) => {
     try {
+      const metadata = {
+        source: path || documentName,
+        source_id: documentId,
+        title: title,
+      };
+
       userService
         .addChunk(
           {
             id: documentId,
             text: text,
-            metadata: {
-              title: title,
-            },
+            metadata: metadata,
           },
           token,
         )

From 2d203d3c70a2c3f57a926a34a0aa2741d01ef2c2 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Mon, 28 Jul 2025 18:01:51 +0530
Subject: [PATCH 30/57] (fix:chunks)responsive

---
 frontend/src/components/DocumentChunks.tsx    | 47 +++++------
 frontend/src/components/FileTreeComponent.tsx | 78 ++++++++++---------
 2 files changed, 60 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index c7ed739f..b56e1514 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { selectToken } from '../preferences/preferenceSlice';
-import { useDarkTheme, useLoaderState } from '../hooks';
+import { useDarkTheme, useLoaderState, useMediaQuery } from '../hooks';
 import userService from '../api/services/userService';
 import ArrowLeft from '../assets/arrow-left.svg';
 import NoFilesIcon from '../assets/no-files.svg';
@@ -33,19 +33,23 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
   className = '',
   editable = true
 }) => {
+  const { isMobile } = useMediaQuery();
+
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     onChange(e.target.value);
   };
 
   const lineHeight = 19.93;
   const contentLines = value.split('\n').length;
-  const minLinesForDisplay = Math.ceil((typeof window !== 'undefined' ? window.innerHeight - 300 : 600) / lineHeight);
+  
+  const heightOffset = isMobile ? 200 : 300;
+  const minLinesForDisplay = Math.ceil((typeof window !== 'undefined' ? window.innerHeight - heightOffset : 600) / lineHeight);
   const totalLines = Math.max(contentLines, minLinesForDisplay);
 
   return (
     <div className={`relative w-full ${className}`}>
       <div
-        className="absolute left-0 top-0 w-12 text-right text-gray-500 dark:text-gray-400 text-sm font-mono leading-[19.93px] select-none pr-3 pointer-events-none"
+        className="absolute left-0 top-0 w-8 lg:w-12 text-right text-gray-500 dark:text-gray-400 text-xs lg:text-sm font-mono leading-[19.93px] select-none pr-2 lg:pr-3 pointer-events-none"
         style={{
           height: `${totalLines * lineHeight}px`
         }}
@@ -53,11 +57,7 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
         {Array.from({ length: totalLines }, (_, i) => (
           <div
             key={i + 1}
-            className="flex items-center justify-end"
-            style={{
-              height: `${lineHeight}px`,
-              lineHeight: `${lineHeight}px`
-            }}
+            className="flex items-center justify-end h-[19.93px] leading-[19.93px]"
           >
             {i + 1}
           </div>
@@ -65,20 +65,19 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
       </div>
       {editable ? (
         <textarea
-          className={`w-full resize-none bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] outline-none border-none pl-12 overflow-hidden`}
+          className={`w-full resize-none bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] outline-none border-none pl-8 lg:pl-12 overflow-hidden ${isMobile ? 'min-h-[calc(100vh-200px)]' : 'min-h-[calc(100vh-300px)]'}`}
           value={value}
           onChange={handleChange}
           placeholder={placeholder}
           aria-label={ariaLabel}
           rows={totalLines}
           style={{
-            height: `${totalLines * lineHeight}px`,
-            minHeight: 'calc(100vh - 300px)'
+            height: `${totalLines * lineHeight}px`
           }}
         />
       ) : (
         <div
-          className={`w-full bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] pl-12 whitespace-pre-wrap`}
+          className={`w-full bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] pl-8 lg:pl-12 whitespace-pre-wrap`}
           style={{
             minHeight: `${totalLines * lineHeight}px`
           }}
@@ -259,20 +258,12 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
     setSearchTerm('');
     setPage(1);
   }, [path]);
-  // Remove the client-side filtering
-  // const filteredChunks = paginatedChunks.filter((chunk) => {
-  //   if (!chunk.metadata?.title) return true;
-  //   return chunk.metadata.title
-  //     .toLowerCase()
-  //     .includes(searchTerm.toLowerCase());
-  // });
 
-  // Use the server-filtered chunks directly
   const filteredChunks = paginatedChunks;
 
   const renderPathNavigation = () => {
     return (
-      <div className="flex items-center justify-between w-full">
+      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between w-full gap-3">
         <div className="flex items-center">
           <button
             className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] flex-shrink-0"
@@ -281,9 +272,9 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
           </button>
 
-          <div className="flex items-center overflow-hidden">
+          <div className="flex items-center flex-wrap">
             <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5 flex-shrink-0" />
-            <span className="text-[#7D54D1] font-semibold text-base leading-6 whitespace-nowrap">
+            <span className="text-[#7D54D1] font-semibold text-base leading-6 break-words">
               {documentName}
             </span>
 
@@ -292,7 +283,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                 <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
                 {pathParts.map((part, index) => (
                   <React.Fragment key={index}>
-                    <span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300 whitespace-nowrap">
+                    <span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300 break-words">
                       {part}
                     </span>
                     {index < pathParts.length - 1 && (
@@ -306,7 +297,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
         </div>
 
         {editingChunk && (
-          <div className="flex gap-2">
+          <div className="flex flex-wrap gap-2 justify-end">
             {!isEditing ? (
               <button
                 className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-3 py-1 text-sm text-white transition-all"
@@ -349,7 +340,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
         )}
 
         {isAddingChunk && (
-          <div className="flex gap-2">
+          <div className="flex flex-wrap gap-2 justify-end">
             <button
               onClick={() => setIsAddingChunk(false)}
               className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50"
@@ -377,7 +368,9 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
         {renderPathNavigation()}
       </div>
       <div className="flex gap-4">
-        {renderFileSearch && renderFileSearch()}
+        <div className="hidden lg:block">
+          {renderFileSearch && renderFileSearch()}
+        </div>
 
         {/* Right side: Chunks content */}
         <div className="flex-1">
diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index 20d27e47..98d148c1 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -211,19 +211,19 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
         </button>
 
-        <div className="flex items-center">
-          <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5" />
-          <span className="text-purple-30 font-medium">{sourceName}</span>
+        <div className="flex items-center flex-wrap">
+          <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5 flex-shrink-0" />
+          <span className="text-purple-30 font-medium break-words">{sourceName}</span>
           {currentPath.length > 0 && (
             <>
-              <span className="mx-1 text-gray-500">/</span>
+              <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
               {currentPath.map((dir, index) => (
                 <React.Fragment key={index}>
-                  <span className="text-gray-700 dark:text-gray-300">
+                  <span className="text-gray-700 dark:text-gray-300 break-words">
                     {dir}
                   </span>
                   {index < currentPath.length - 1 && (
-                    <span className="mx-1 text-gray-500">/</span>
+                    <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
                   )}
                 </React.Fragment>
               ))}
@@ -231,8 +231,8 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           )}
           {selectedFile && (
             <>
-              <span className="mx-1 text-gray-500">/</span>
-              <span className="text-gray-700 dark:text-gray-300">
+              <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
+              <span className="text-gray-700 dark:text-gray-300 break-words">
                 {selectedFile.name}
               </span>
             </>
@@ -279,19 +279,19 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
             className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
             onClick={navigateUp}
           >
-            <td className="px-4 py-2">
+            <td className="px-2 lg:px-4 py-2">
               <div className="flex items-center">
                 <img
                   src={FolderIcon}
                   alt={t('settings.documents.parentFolderAlt')}
-                  className="mr-2 h-4 w-4"
+                  className="mr-2 h-4 w-4 flex-shrink-0"
                 />
-                <span className="text-sm dark:text-[#E0E0E0]">..</span>
+                <span className="text-sm dark:text-[#E0E0E0] truncate">..</span>
               </div>
             </td>
-            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
-            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
-            <td className="w-10 px-4 py-2 text-sm"></td>
+            <td className="px-2 lg:px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
+            <td className="px-2 lg:px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
+            <td className="w-10 px-2 lg:px-4 py-2 text-sm"></td>
           </tr>,
         ]
         : [];
@@ -310,21 +310,21 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
             className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
             onClick={() => navigateToDirectory(name)}
           >
-            <td className="px-4 py-2">
-              <div className="flex items-center">
-                <img src={FolderIcon} alt={t('settings.documents.folderAlt')} className="mr-2 h-4 w-4" />
-                <span className="text-sm dark:text-[#E0E0E0]">{name}</span>
+            <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" />
+                <span className="text-sm dark:text-[#E0E0E0] truncate">{name}</span>
               </div>
             </td>
-            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">
+            <td className="px-2 lg:px-4 py-2 text-sm dark:text-[#E0E0E0]">
               {dirStats.totalTokens > 0
                 ? dirStats.totalTokens.toLocaleString()
                 : '-'}
             </td>
-            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">
+            <td className="px-2 lg:px-4 py-2 text-sm dark:text-[#E0E0E0]">
               {dirStats.totalSize > 0 ? formatBytes(dirStats.totalSize) : '-'}
             </td>
-            <td className="w-10 px-4 py-2 text-sm">
+            <td className="w-10 px-2 lg:px-4 py-2 text-sm">
               <div ref={menuRef} className="relative">
                 <button
                   onClick={(e) => handleMenuClick(e, itemId)}
@@ -362,19 +362,19 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
             className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
             onClick={() => handleFileClick(name)}
           >
-            <td className="px-4 py-2">
-              <div className="flex items-center">
-                <img src={FileIcon} alt={t('settings.documents.fileAlt')} className="mr-2 h-4 w-4" />
-                <span className="text-sm dark:text-[#E0E0E0]">{name}</span>
+            <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" />
+                <span className="text-sm dark:text-[#E0E0E0] truncate">{name}</span>
               </div>
             </td>
-            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">
+            <td className="px-2 lg:px-4 py-2 text-sm dark:text-[#E0E0E0]">
               {node.token_count?.toLocaleString() || '-'}
             </td>
-            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">
+            <td className="px-2 md:px-4 py-2 text-sm dark:text-[#E0E0E0]">
               {node.size_bytes ? formatBytes(node.size_bytes) : '-'}
             </td>
-            <td className="w-10 px-4 py-2 text-sm">
+            <td className="w-10 px-2 lg:px-4 py-2 text-sm">
               <div ref={menuRef} className="relative">
                 <button
                   onClick={(e) => handleMenuClick(e, itemId)}
@@ -521,31 +521,33 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           </div>
         </div>
       ) : (
-        <div className="flex flex-col">
+        <div className="flex flex-col w-full max-w-full overflow-hidden">
           <div className="mb-4">
             {renderPathNavigation()}
           </div>
 
-          <div className="flex gap-4">
+          <div className="flex gap-4 min-w-0">
             {/* Left side: Search dropdown */}
-            {renderFileSearch()}
-            
+            <div className="hidden lg:block flex-shrink-0">
+              {renderFileSearch()}
+            </div>
+
             {/* Right side: File table */}
-            <div className="flex-1">
+            <div className="flex-1 min-w-0">
               <div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
-                <table className="min-w-full table-fixed bg-transparent">
+                <table className="w-full table-auto bg-transparent min-w-[600px]">
                   <thead className="bg-gray-100 dark:bg-[#27282D]">
                     <tr className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]">
-                      <th className="w-3/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
+                      <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')}
                       </th>
-                      <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
+                      <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')}
                       </th>
-                      <th className="w-1/5 px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
+                      <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')}
                       </th>
-                      <th className="w-[60px] px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-[#59636E]">
+                      <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>
                       </th>
                     </tr>

From a24652f9018b1a8ef8aa763fd029ca810c6fbc69 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Mon, 28 Jul 2025 19:35:41 +0530
Subject: [PATCH 31/57] (feat:chunks) update iff changed

---
 frontend/src/components/DocumentChunks.tsx | 49 ++++++++++++++++++----
 1 file changed, 42 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index b56e1514..f29941d2 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -154,6 +154,10 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
   };
 
   const handleAddChunk = (title: string, text: string) => {
+    if (!text.trim()) {
+      return;
+    }
+
     try {
       const metadata = {
         source: path || documentName,
@@ -182,6 +186,18 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
   };
 
   const handleUpdateChunk = (title: string, text: string, chunk: ChunkType) => {
+
+    if (!text.trim()) {
+      return;
+    }
+
+    const originalTitle = chunk.metadata?.title || '';
+    const originalText = chunk.text || '';
+
+    if (title === originalTitle && text === originalText) {
+      return;
+    }
+
     try {
       userService
         .updateChunk(
@@ -326,11 +342,23 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                 </button>
                 <button
                   onClick={() => {
-                    handleUpdateChunk(editingTitle, editingText, editingChunk);
-                    setIsEditing(false);
-                    setEditingChunk(null);
+                    if (editingText.trim()) {
+                      const hasChanges = editingTitle !== (editingChunk?.metadata?.title || '') ||
+                                       editingText !== (editingChunk?.text || '');
+
+                      if (hasChanges) {
+                        handleUpdateChunk(editingTitle, editingText, editingChunk);
+                      }
+                      setIsEditing(false);
+                      setEditingChunk(null);
+                    }
                   }}
-                  className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-3 py-1 text-sm text-white transition-all"
+                  disabled={!editingText.trim() || (editingTitle === (editingChunk?.metadata?.title || '') && editingText === (editingChunk?.text || ''))}
+                  className={`rounded-full px-3 py-1 text-sm text-white transition-all ${
+                    editingText.trim() && (editingTitle !== (editingChunk?.metadata?.title || '') || editingText !== (editingChunk?.text || ''))
+                      ? 'bg-purple-30 hover:bg-violets-are-blue cursor-pointer'
+                      : 'bg-gray-400 cursor-not-allowed'
+                  }`}
                 >
                   {t('modals.chunk.update')}
                 </button>
@@ -349,10 +377,17 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
             </button>
             <button
               onClick={() => {
-                handleAddChunk(editingTitle, editingText);
-                setIsAddingChunk(false);
+                if (editingText.trim()) {
+                  handleAddChunk(editingTitle, editingText);
+                  setIsAddingChunk(false);
+                }
               }}
-              className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-3 py-1 text-sm text-white transition-all"
+              disabled={!editingText.trim()}
+              className={`rounded-full px-3 py-1 text-sm text-white transition-all ${
+                editingText.trim()
+                  ? 'bg-purple-30 hover:bg-violets-are-blue cursor-pointer'
+                  : 'bg-gray-400 cursor-not-allowed'
+              }`}
             >
               {t('modals.chunk.add')}
             </button>

From 266d256a07eaf7c62d9ce97c388e8a22fed39929 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 30 Jul 2025 01:57:40 +0530
Subject: [PATCH 32/57] (feat:sources) management, simple re-ingest

---
 application/api/user/routes.py | 139 +++++++++++++++++++++++++++++++++
 application/api/user/tasks.py  |   7 ++
 application/worker.py          | 123 +++++++++++++++++++++++++++++
 3 files changed, 269 insertions(+)

diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index 403008bd..d00b0623 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -627,6 +627,145 @@ class UploadFile(Resource):
         return make_response(jsonify({"success": True, "task_id": task.id}), 200)
 
 
+@user_ns.route("/api/manage_source_files")
+class ManageSourceFiles(Resource):
+    @api.expect(
+        api.model(
+            "ManageSourceFilesModel",
+            {
+                "source_id": fields.String(required=True, description="Source ID to modify"),
+                "operation": fields.String(required=True, description="Operation: 'add' or 'remove'"),
+                "file_paths": fields.List(fields.String, required=False, description="File paths to remove (for remove operation)"),
+                "file": fields.Raw(required=False, description="Files to add (for add operation)"),
+                "parent_dir": fields.String(required=False, description="Parent directory path relative to source root"),
+            },
+        )
+    )
+    @api.doc(
+        description="Add or remove files from an existing source",
+    )
+    def post(self):
+        decoded_token = request.decoded_token
+        if not decoded_token:
+            return make_response(jsonify({"success": False, "message": "Unauthorized"}), 401)
+
+        user = decoded_token.get("sub")
+        source_id = request.form.get("source_id")
+        operation = request.form.get("operation")
+
+        if not source_id or not operation:
+            return make_response(
+                jsonify({"success": False, "message": "source_id and operation are required"}), 400
+            )
+
+        if operation not in ["add", "remove"]:
+            return make_response(
+                jsonify({"success": False, "message": "operation must be 'add' or 'remove'"}), 400
+            )
+
+        try:
+            ObjectId(source_id)
+        except Exception:
+            return make_response(
+                jsonify({"success": False, "message": "Invalid source ID format"}), 400
+            )
+
+        try:
+            source = sources_collection.find_one({"_id": ObjectId(source_id), "user": user})
+            if not source:
+                return make_response(
+                    jsonify({"success": False, "message": "Source not found or access denied"}), 404
+                )
+        except Exception as err:
+            current_app.logger.error(f"Error finding source: {err}", exc_info=True)
+            return make_response(jsonify({"success": False, "message": "Database error"}), 500)
+
+        try:
+            storage = StorageCreator.get_storage()
+            source_file_path = source.get("file_path", "")
+            parent_dir = request.form.get("parent_dir", "") 
+            
+            if parent_dir and (parent_dir.startswith("/") or ".." in parent_dir):
+                return make_response(
+                    jsonify({"success": False, "message": "Invalid parent directory path"}), 400
+                )
+
+            if operation == "add":
+                files = request.files.getlist("file")
+                if not files or all(file.filename == "" for file in files):
+                    return make_response(
+                        jsonify({"success": False, "message": "No files provided for add operation"}), 400
+                    )
+
+                added_files = []
+                
+                target_dir = source_file_path
+                if parent_dir:
+                    target_dir = f"{source_file_path}/{parent_dir}"
+
+                for file in files:
+                    if file.filename:
+                        safe_filename_str = safe_filename(file.filename)
+                        file_path = f"{target_dir}/{safe_filename_str}"
+
+                        # Save file to storage
+                        storage.save_file(file, file_path)
+                        added_files.append(safe_filename_str)
+
+                # Trigger re-ingestion pipeline
+                from application.api.user.tasks import reingest_source_task
+
+                task = reingest_source_task.delay(source_id=source_id, user=user)
+
+                return make_response(jsonify({
+                    "success": True,
+                    "message": f"Added {len(added_files)} files",
+                    "added_files": added_files,
+                    "parent_dir": parent_dir,
+                    "reingest_task_id": task.id
+                }), 200)
+
+            elif operation == "remove":
+                file_paths_str = request.form.get("file_paths")
+                if not file_paths_str:
+                    return make_response(
+                        jsonify({"success": False, "message": "file_paths required for remove operation"}), 400
+                    )
+
+                try:
+                    file_paths = json.loads(file_paths_str) if isinstance(file_paths_str, str) else file_paths_str
+                except:
+                    return make_response(
+                        jsonify({"success": False, "message": "Invalid file_paths format"}), 400
+                    )
+
+                # Remove files from storage and directory structure
+                removed_files = []
+                for file_path in file_paths:
+                    full_path = f"{source_file_path}/{file_path}"
+
+                    # Remove from storage
+                    if storage.file_exists(full_path):
+                        storage.delete_file(full_path)
+                        removed_files.append(file_path)
+
+                # Trigger re-ingestion pipeline
+                from application.api.user.tasks import reingest_source_task
+
+                task = reingest_source_task.delay(source_id=source_id, user=user)
+
+                return make_response(jsonify({
+                    "success": True,
+                    "message": f"Removed {len(removed_files)} files",
+                    "removed_files": removed_files,
+                    "reingest_task_id": task.id
+                }), 200)
+
+        except Exception as err:
+            current_app.logger.error(f"Error managing source files: {err}", exc_info=True)
+            return make_response(jsonify({"success": False, "message": "Operation failed"}), 500)
+
+
 @user_ns.route("/api/remote")
 class UploadRemote(Resource):
     @api.expect(
diff --git a/application/api/user/tasks.py b/application/api/user/tasks.py
index aa40f37b..28a78c0d 100644
--- a/application/api/user/tasks.py
+++ b/application/api/user/tasks.py
@@ -22,6 +22,13 @@ def ingest_remote(self, source_data, job_name, user, loader):
     return resp
 
 
+@celery.task(bind=True)
+def reingest_source_task(self, source_id, user):
+    from application.worker import reingest_source_worker
+    resp = reingest_source_worker(self, source_id, user)
+    return resp
+
+
 @celery.task(bind=True)
 def schedule_syncs(self, frequency):
     resp = sync_worker(self, frequency)
diff --git a/application/worker.py b/application/worker.py
index 6e3cb1ae..5e19a202 100755
--- a/application/worker.py
+++ b/application/worker.py
@@ -336,6 +336,129 @@ def ingest_worker(
     }
 
 
+def reingest_source_worker(self, source_id, user):
+    """
+    Re-ingestion worker that scans the source and determines what needs to be re-ingested.
+    This is decoupled from the file management operations.
+
+    Args:
+        self: Task instance
+        source_id: ID of the source to re-ingest
+        user: User identifier
+
+    Returns:
+        dict: Information about the re-ingestion task
+    """
+    try:
+        from application.vectorstore.vector_creator import VectorCreator
+        from application.utils import num_tokens_from_string
+
+        self.update_state(state="PROGRESS", meta={"current": 10, "status": "Initializing re-ingestion scan"})
+
+
+        source = sources_collection.find_one({"_id": ObjectId(source_id), "user": user})
+        if not source:
+            raise ValueError(f"Source {source_id} not found or access denied")
+
+        storage = StorageCreator.get_storage()
+        source_file_path = source.get("file_path", "")
+        job_name = source.get("name", "")
+
+        self.update_state(state="PROGRESS", meta={"current": 20, "status": "Scanning current files"})
+
+        with tempfile.TemporaryDirectory() as temp_dir:
+            # Download all files from storage to temp directory, preserving directory structure
+            if storage.is_directory(source_file_path):
+                files_list = storage.list_files(source_file_path)
+                
+                for storage_file_path in files_list:
+                    if storage.is_directory(storage_file_path):
+                        continue
+                        
+                
+                    rel_path = os.path.relpath(storage_file_path, source_file_path)
+                    local_file_path = os.path.join(temp_dir, rel_path)
+                    
+                    os.makedirs(os.path.dirname(local_file_path), exist_ok=True)
+                    
+                    # Download file
+                    try:
+                        file_data = storage.get_file(storage_file_path)
+                        with open(local_file_path, "wb") as f:
+                            f.write(file_data.read())
+                    except Exception as e:
+                        logging.error(f"Error downloading file {storage_file_path}: {e}")
+                        continue
+            
+            reader = SimpleDirectoryReader(
+                input_dir=temp_dir,
+                recursive=True,
+                required_exts=[
+                    ".rst", ".md", ".pdf", ".txt", ".docx", ".csv", ".epub",
+                    ".html", ".mdx", ".json", ".xlsx", ".pptx", ".png",
+                    ".jpg", ".jpeg",
+                ],
+                exclude_hidden=True,
+                file_metadata=metadata_from_filename,
+            )
+            
+            raw_docs = reader.load_data()
+            
+            directory_structure = getattr(reader, 'directory_structure', {})
+            logging.info(f"Directory structure from reader: {directory_structure}")
+            
+            total_tokens = 0
+            for doc in raw_docs:
+                if hasattr(doc, 'extra_info') and 'token_count' in doc.extra_info:
+                    total_tokens += doc.extra_info['token_count']
+                else:
+                    doc_text = str(doc.text) if hasattr(doc, 'text') else str(doc)
+                    total_tokens += num_tokens_from_string(doc_text)
+            
+            logging.info(f"Total tokens calculated: {total_tokens}")
+            
+            self.update_state(state="PROGRESS", meta={"current": 50, "status": "Processing documents"})
+            
+            temp_vector_dir = os.path.join(temp_dir, "vector_store")
+            os.makedirs(temp_vector_dir, exist_ok=True)
+            
+            chunker = Chunker(
+                chunking_strategy="classic_chunk",
+                max_tokens=MAX_TOKENS,
+                min_tokens=MIN_TOKENS,
+                duplicate_headers=False,
+            )
+            chunked_docs = chunker.chunk(documents=raw_docs)
+            
+            docs = [Document.to_langchain_format(doc) for doc in chunked_docs]
+            
+            embed_and_store_documents(docs, temp_vector_dir, ObjectId(source_id), self)
+            
+            file_data = {
+                "name": source.get("name", ""),
+                "file": source.get("name", ""),
+                "user": user,
+                "tokens": total_tokens,
+                "retriever": source.get("retriever", "classic"),
+                "id": source_id,
+                "type": source.get("type", "local"),
+                "file_path": source_file_path,
+                "directory_structure": json.dumps(directory_structure),
+            }
+            
+            upload_index(temp_vector_dir, file_data)
+            
+            return {
+                "source_id": source_id,
+                "user": user,
+                "tokens": total_tokens,
+                "status": "completed"
+            }
+            
+    except Exception as e:
+        logging.error(f"Error in reingest_source_worker: {e}", exc_info=True)
+        raise
+
 def remote_worker(
     self,
     source_data,

From 829abd1ad69cef72f641181ebf5187e40ef68824 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 30 Jul 2025 21:00:00 +0530
Subject: [PATCH 33/57] (fix:textarea) consistent line indxs

---
 frontend/src/components/DocumentChunks.tsx | 36 ++++++++--------------
 1 file changed, 13 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index f29941d2..44becf7c 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -41,7 +41,7 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
 
   const lineHeight = 19.93;
   const contentLines = value.split('\n').length;
-  
+
   const heightOffset = isMobile ? 200 : 300;
   const minLinesForDisplay = Math.ceil((typeof window !== 'undefined' ? window.innerHeight - heightOffset : 600) / lineHeight);
   const totalLines = Math.max(contentLines, minLinesForDisplay);
@@ -63,28 +63,18 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
           </div>
         ))}
       </div>
-      {editable ? (
-        <textarea
-          className={`w-full resize-none bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] outline-none border-none pl-8 lg:pl-12 overflow-hidden ${isMobile ? 'min-h-[calc(100vh-200px)]' : 'min-h-[calc(100vh-300px)]'}`}
-          value={value}
-          onChange={handleChange}
-          placeholder={placeholder}
-          aria-label={ariaLabel}
-          rows={totalLines}
-          style={{
-            height: `${totalLines * lineHeight}px`
-          }}
-        />
-      ) : (
-        <div
-          className={`w-full bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] pl-8 lg:pl-12 whitespace-pre-wrap`}
-          style={{
-            minHeight: `${totalLines * lineHeight}px`
-          }}
-        >
-          {value}
-        </div>
-      )}
+      <textarea
+        className={`w-full resize-none bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] outline-none border-none pl-8 lg:pl-12 overflow-hidden ${isMobile ? 'min-h-[calc(100vh-200px)]' : 'min-h-[calc(100vh-300px)]'}`}
+        value={value}
+        onChange={editable ? handleChange : undefined}
+        placeholder={placeholder}
+        aria-label={ariaLabel}
+        rows={totalLines}
+        readOnly={!editable}
+        style={{
+          height: `${totalLines * lineHeight}px`
+        }}
+      />
     </div>
   );
 };

From c92d77889485660a989a2524e0dea3cb9b257ba7 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 31 Jul 2025 02:13:55 +0530
Subject: [PATCH 34/57] (feat:chunker) do not combine text

---
 application/parser/chunking.py | 58 ++++------------------------------
 1 file changed, 6 insertions(+), 52 deletions(-)

diff --git a/application/parser/chunking.py b/application/parser/chunking.py
index f2a69dac..ea1afa22 100644
--- a/application/parser/chunking.py
+++ b/application/parser/chunking.py
@@ -32,38 +32,7 @@ class Chunker:
             header, body = "", text  # No header, treat entire text as body
         return header, body
 
-    def combine_documents(self, doc: Document, next_doc: Document) -> Document:
-        combined_text = doc.text + " " + next_doc.text
-        combined_token_count = len(self.encoding.encode(combined_text))
-        
-        combined_extra_info = {**(doc.extra_info or {}), "token_count": combined_token_count}
-        
-        sources = []
-        if doc.extra_info and 'source' in doc.extra_info:
-            sources.append(doc.extra_info['source'])
-        if next_doc.extra_info and 'source' in next_doc.extra_info:
-            sources.append(next_doc.extra_info['source'])
-        
-        if sources:
-            combined_extra_info['source'] = sources
-    
-        titles = []
-        if doc.extra_info and 'title' in doc.extra_info:
-            titles.append(doc.extra_info['title'])
-        if next_doc.extra_info and 'title' in next_doc.extra_info:
-            titles.append(next_doc.extra_info['title'])
-        
-        # Store combined title
-        if titles:
-            combined_extra_info['title'] = ", ".join(titles)
-        
-        new_doc = Document(
-            text=combined_text,
-            doc_id=doc.doc_id,
-            embedding=doc.embedding,
-            extra_info=combined_extra_info
-        )
-        return new_doc
+
     
     def split_document(self, doc: Document) -> List[Document]:
         split_docs = []
@@ -104,26 +73,11 @@ class Chunker:
                 processed_docs.append(doc)
                 i += 1
             elif token_count < self.min_tokens:
-                if i + 1 < len(documents):
-                    next_doc = documents[i + 1]
-                    next_tokens = self.encoding.encode(next_doc.text)
-                    if token_count + len(next_tokens) <= self.max_tokens:
-                        # Combine small documents
-                        combined_doc = self.combine_documents(doc, next_doc)
-                        processed_docs.append(combined_doc)
-                        i += 2
-                    else:
-                        # Keep the small document as is if adding next_doc would exceed max_tokens
-                        doc.extra_info = doc.extra_info or {}
-                        doc.extra_info["token_count"] = token_count
-                        processed_docs.append(doc)
-                        i += 1
-                else:
-                    # No next document to combine with; add the small document as is
-                    doc.extra_info = doc.extra_info or {}
-                    doc.extra_info["token_count"] = token_count
-                    processed_docs.append(doc)
-                    i += 1
+  
+                doc.extra_info = doc.extra_info or {}
+                doc.extra_info["token_count"] = token_count
+                processed_docs.append(doc)
+                i += 1
             else:
                 # Split large documents
                 processed_docs.extend(self.split_document(doc))

From d5ded3c9f47a1d23ac6a97f9c51b109d640e40e8 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Fri, 1 Aug 2025 01:14:48 +0530
Subject: [PATCH 35/57] (feat:reingest) eat and spit specific chunks

---
 application/api/user/routes.py |  16 +--
 application/worker.py          | 251 ++++++++++++++++++++++++---------
 2 files changed, 188 insertions(+), 79 deletions(-)

diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index d00b0623..9e7b8a6e 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -3438,21 +3438,7 @@ class GetChunks(Resource):
             filtered_chunks = []
             for chunk in chunks:
                 metadata = chunk.get("metadata", {})
-                
-                if path:
-                    source = metadata.get("source", "")
-                    path_match = False
-                    
-                    if isinstance(source, str) and source.endswith(path):
-                        path_match = True
-                    elif isinstance(source, list):
-                        for src in source:
-                            if isinstance(src, str) and src.endswith(path):
-                                path_match = True
-                                break
-                    
-                    if not path_match:
-                        continue
+            
                 
                 if search_term:
                     text_match = search_term in chunk.get("text", "").lower()
diff --git a/application/worker.py b/application/worker.py
index 5e19a202..12357c72 100755
--- a/application/worker.py
+++ b/application/worker.py
@@ -338,8 +338,9 @@ def ingest_worker(
 
 def reingest_source_worker(self, source_id, user):
     """
-    Re-ingestion worker that scans the source and determines what needs to be re-ingested.
-    This is decoupled from the file management operations.
+    Re-ingestion worker that handles incremental updates by:
+    1. Adding chunks from newly added files
+    2. Removing chunks from deleted files
 
     Args:
         self: Task instance
@@ -351,18 +352,15 @@ def reingest_source_worker(self, source_id, user):
     """
     try:
         from application.vectorstore.vector_creator import VectorCreator
-        from application.utils import num_tokens_from_string
 
         self.update_state(state="PROGRESS", meta={"current": 10, "status": "Initializing re-ingestion scan"})
 
-
         source = sources_collection.find_one({"_id": ObjectId(source_id), "user": user})
         if not source:
             raise ValueError(f"Source {source_id} not found or access denied")
 
         storage = StorageCreator.get_storage()
         source_file_path = source.get("file_path", "")
-        job_name = source.get("name", "")
 
         self.update_state(state="PROGRESS", meta={"current": 20, "status": "Scanning current files"})
 
@@ -370,17 +368,17 @@ def reingest_source_worker(self, source_id, user):
             # Download all files from storage to temp directory, preserving directory structure
             if storage.is_directory(source_file_path):
                 files_list = storage.list_files(source_file_path)
-                
+
                 for storage_file_path in files_list:
                     if storage.is_directory(storage_file_path):
                         continue
-                        
-                
+
+
                     rel_path = os.path.relpath(storage_file_path, source_file_path)
                     local_file_path = os.path.join(temp_dir, rel_path)
-                    
+
                     os.makedirs(os.path.dirname(local_file_path), exist_ok=True)
-                    
+
                     # Download file
                     try:
                         file_data = storage.get_file(storage_file_path)
@@ -389,7 +387,7 @@ def reingest_source_worker(self, source_id, user):
                     except Exception as e:
                         logging.error(f"Error downloading file {storage_file_path}: {e}")
                         continue
-            
+
             reader = SimpleDirectoryReader(
                 input_dir=temp_dir,
                 recursive=True,
@@ -401,60 +399,185 @@ def reingest_source_worker(self, source_id, user):
                 exclude_hidden=True,
                 file_metadata=metadata_from_filename,
             )
-            
-            raw_docs = reader.load_data()
-            
-            directory_structure = getattr(reader, 'directory_structure', {})
-            logging.info(f"Directory structure from reader: {directory_structure}")
-            
-            total_tokens = 0
-            for doc in raw_docs:
-                if hasattr(doc, 'extra_info') and 'token_count' in doc.extra_info:
-                    total_tokens += doc.extra_info['token_count']
+            reader.load_data()
+            directory_structure = reader.directory_structure
+            logging.info(f"Directory structure built with token counts: {directory_structure}")
+
+            try:
+                old_directory_structure = source.get("directory_structure") or {}
+                if isinstance(old_directory_structure, str):
+                    try:
+                        old_directory_structure = json.loads(old_directory_structure)
+                    except Exception:
+                        old_directory_structure = {}
+
+                def _flatten_directory_structure(struct, prefix=""):
+                    files = set()
+                    if isinstance(struct, dict):
+                        for name, meta in struct.items():
+                            current_path = os.path.join(prefix, name) if prefix else name
+                            if isinstance(meta, dict) and ("type" in meta and "size_bytes" in meta):
+                                files.add(current_path)
+                            elif isinstance(meta, dict):
+                                files |= _flatten_directory_structure(meta, current_path)
+                    return files
+
+                old_files = _flatten_directory_structure(old_directory_structure)
+                new_files = _flatten_directory_structure(directory_structure)
+
+                added_files = sorted(new_files - old_files)
+                removed_files = sorted(old_files - new_files)
+
+                if added_files:
+                    logging.info(f"Files added since last ingest: {added_files}")
                 else:
-                    doc_text = str(doc.text) if hasattr(doc, 'text') else str(doc)
-                    total_tokens += num_tokens_from_string(doc_text)
-            
-            logging.info(f"Total tokens calculated: {total_tokens}")
-            
-            self.update_state(state="PROGRESS", meta={"current": 50, "status": "Processing documents"})
-            
-            temp_vector_dir = os.path.join(temp_dir, "vector_store")
-            os.makedirs(temp_vector_dir, exist_ok=True)
-            
-            chunker = Chunker(
-                chunking_strategy="classic_chunk",
-                max_tokens=MAX_TOKENS,
-                min_tokens=MIN_TOKENS,
-                duplicate_headers=False,
-            )
-            chunked_docs = chunker.chunk(documents=raw_docs)
-            
-            docs = [Document.to_langchain_format(doc) for doc in chunked_docs]
-            
-            embed_and_store_documents(docs, temp_vector_dir, ObjectId(source_id), self)
-            
-            file_data = {
-                "name": source.get("name", ""),
-                "file": source.get("name", ""),
-                "user": user,
-                "tokens": total_tokens,
-                "retriever": source.get("retriever", "classic"),
-                "id": source_id,
-                "type": source.get("type", "local"),
-                "file_path": source_file_path,
-                "directory_structure": json.dumps(directory_structure),
-            }
-            
-            upload_index(temp_vector_dir, file_data)
-            
-            return {
-                "source_id": source_id,
-                "user": user,
-                "tokens": total_tokens,
-                "status": "completed"
-            }
-            
+                    logging.info("No files added since last ingest.")
+
+                if removed_files:
+                    logging.info(f"Files removed since last ingest: {removed_files}")
+                else:
+                    logging.info("No files removed since last ingest.")
+
+            except Exception as e:
+                logging.error(f"Error comparing directory structures: {e}", exc_info=True)
+                added_files = []
+                removed_files = []
+            try:
+                if not added_files and not removed_files:
+                    logging.info("No changes detected.")
+                    return {
+                        "source_id": source_id,
+                        "user": user,
+                        "status": "no_changes",
+                        "added_files": [],
+                        "removed_files": [],
+                    }
+
+                vector_store = VectorCreator.create_vectorstore(
+                    settings.VECTOR_STORE,
+                    source_id,
+                    settings.EMBEDDINGS_KEY,
+                )
+
+                self.update_state(state="PROGRESS", meta={"current": 40, "status": "Processing file changes"})
+
+                # 1) Delete chunks from removed files
+                deleted = 0
+                if removed_files:
+                    try:
+                        for ch in vector_store.get_chunks() or []:
+                            metadata = ch.get("metadata", {}) if isinstance(ch, dict) else getattr(ch, "metadata", {})
+                            raw_source = metadata.get("source")
+
+                            source_file = str(raw_source) if raw_source else ""
+
+                            if source_file in removed_files:
+                                cid = ch.get("doc_id")
+                                if cid:
+                                    try:
+                                        vector_store.delete_chunk(cid)
+                                        deleted += 1
+                                    except Exception as de:
+                                        logging.error(f"Failed deleting chunk {cid}: {de}")
+                        logging.info(f"Deleted {deleted} chunks from {len(removed_files)} removed files")
+                    except Exception as e:
+                        logging.error(f"Error during deletion of removed file chunks: {e}", exc_info=True)
+
+                # 2) Add chunks from new files
+                added = 0
+                if added_files:
+                    try:
+                        # Build list of local files for added files only
+                        added_local_files = []
+                        for rel_path in added_files:
+                            local_path = os.path.join(temp_dir, rel_path)
+                            if os.path.isfile(local_path):
+                                added_local_files.append(local_path)
+
+                        if added_local_files:
+                            reader_new = SimpleDirectoryReader(
+                                input_files=added_local_files,
+                                exclude_hidden=True,
+                                errors="ignore",
+                                file_metadata=metadata_from_filename,
+                            )
+                            raw_docs_new = reader_new.load_data()
+                            chunker_new = Chunker(
+                                chunking_strategy="classic_chunk",
+                                max_tokens=MAX_TOKENS,
+                                min_tokens=MIN_TOKENS,
+                                duplicate_headers=False,
+                            )
+                            chunked_new = chunker_new.chunk(documents=raw_docs_new)
+
+                            for file_path, token_count in reader_new.file_token_counts.items():
+                                try:
+                                    rel_path = os.path.relpath(file_path, start=temp_dir)
+                                    path_parts = rel_path.split(os.sep)
+                                    current_dir = directory_structure
+
+                                    for part in path_parts[:-1]:
+                                        if part in current_dir and isinstance(current_dir[part], dict):
+                                            current_dir = current_dir[part]
+                                        else:
+                                            break
+
+                                    filename = path_parts[-1]
+                                    if filename in current_dir and isinstance(current_dir[filename], dict):
+                                        current_dir[filename]["token_count"] = token_count
+                                        logging.info(f"Updated token count for {rel_path}: {token_count}")
+                                except Exception as e:
+                                    logging.warning(f"Could not update token count for {file_path}: {e}")
+
+                            for d in chunked_new:
+                                meta = dict(d.extra_info or {})
+                                try:
+                                    raw_src = meta.get("source")
+                                    if isinstance(raw_src, str) and os.path.isabs(raw_src):
+                                        meta["source"] = os.path.relpath(raw_src, start=temp_dir)
+                                except Exception:
+                                    pass
+
+                                vector_store.add_chunk(d.text, metadata=meta)
+                                added += 1
+                            logging.info(f"Added {added} chunks from {len(added_files)} new files")
+                    except Exception as e:
+                        logging.error(f"Error during ingestion of new files: {e}", exc_info=True)
+
+                # 3) Update source directory structure timestamp
+                try:
+                    total_tokens = sum(reader.file_token_counts.values())
+                    
+                    sources_collection.update_one(
+                        {"_id": ObjectId(source_id)},
+                        {
+                            "$set": {
+                                "directory_structure": json.dumps(directory_structure),
+                                "date": datetime.datetime.now(),
+                                "tokens": total_tokens
+                            }
+                        },
+                    )
+                except Exception as e:
+                    logging.error(f"Error updating directory_structure in DB: {e}", exc_info=True)
+
+                self.update_state(state="PROGRESS", meta={"current": 100, "status": "Re-ingestion completed"})
+
+                return {
+                    "source_id": source_id,
+                    "user": user,
+                    "status": "completed",
+                    "added_files": added_files,
+                    "removed_files": removed_files,
+                    "chunks_added": added,
+                    "chunks_deleted": deleted,
+                }
+            except Exception as e:
+                logging.error(f"Error while processing file changes: {e}", exc_info=True)
+                raise
+
+
+
     except Exception as e:
         logging.error(f"Error in reingest_source_worker: {e}", exc_info=True)
         raise

From 521276984866861caf79bc021a1cfd0f4c8b5e7a Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Fri, 1 Aug 2025 01:25:37 +0530
Subject: [PATCH 36/57] (feat:reingest) UI, polling

---
 frontend/src/api/endpoints.ts                 |   1 +
 frontend/src/api/services/userService.ts      |   2 +
 frontend/src/components/DocumentChunks.tsx    |   4 +-
 frontend/src/components/FileTreeComponent.tsx | 236 +++++++++++++++---
 4 files changed, 203 insertions(+), 40 deletions(-)

diff --git a/frontend/src/api/endpoints.ts b/frontend/src/api/endpoints.ts
index 2980da46..81d19c87 100644
--- a/frontend/src/api/endpoints.ts
+++ b/frontend/src/api/endpoints.ts
@@ -55,6 +55,7 @@ const endpoints = {
     STORE_ATTACHMENT: '/api/store_attachment',
     DIRECTORY_STRUCTURE: (docId: string) =>
       `/api/directory_structure?id=${docId}`,
+    MANAGE_SOURCE_FILES: '/api/manage_source_files',
   },
   CONVERSATION: {
     ANSWER: '/api/answer',
diff --git a/frontend/src/api/services/userService.ts b/frontend/src/api/services/userService.ts
index a2968312..af5e4f22 100644
--- a/frontend/src/api/services/userService.ts
+++ b/frontend/src/api/services/userService.ts
@@ -102,6 +102,8 @@ const userService = {
     apiClient.put(endpoints.USER.UPDATE_CHUNK, data, token),
   getDirectoryStructure: (docId: string, token: string | null): Promise<any> =>
     apiClient.get(endpoints.USER.DIRECTORY_STRUCTURE(docId), token),
+  manageSourceFiles: (data: FormData, token: string | null): Promise<any> =>
+    apiClient.postFormData(endpoints.USER.MANAGE_SOURCE_FILES, data, token),
 };
 
 export default userService;
diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index 44becf7c..3b2881ed 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -257,9 +257,11 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
 
     return () => clearTimeout(delayDebounceFn);
   }, [searchTerm]);
+
   useEffect(() => {
-    fetchChunks();
+    !loading && fetchChunks();
   }, [page, perPage, path]);
+  
   useEffect(() => {
     setSearchTerm('');
     setPage(1);
diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index 98d148c1..5e4282b1 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -13,6 +13,7 @@ import OutlineSource from '../assets/outline-source.svg';
 import Trash from '../assets/red-trash.svg';
 import SearchIcon from '../assets/search.svg';
 import { useOutsideAlerter } from '../hooks';
+import ConfirmationModal from '../modals/ConfirmationModal';
 
 interface FileNode {
   type?: string;
@@ -59,8 +60,12 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   } | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+  const [isUploading, setIsUploading] = useState(false);
   const searchDropdownRef = useRef<HTMLDivElement>(null);
   
+  const [deleteModalState, setDeleteModalState] = useState<'ACTIVE' | 'INACTIVE'>('INACTIVE');
+  const [itemToDelete, setItemToDelete] = useState<{ name: string; isFile: boolean } | null>(null);
+  
   useOutsideAlerter(
     searchDropdownRef,
     () => {
@@ -123,9 +128,23 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   const getCurrentDirectory = (): DirectoryStructure => {
     if (!directoryStructure) return {};
 
-    let current: any = directoryStructure;
+    let structure = directoryStructure;
+    if (typeof structure === 'string') {
+      try {
+        structure = JSON.parse(structure);
+      } catch (e) {
+        console.error('Error parsing directory structure in getCurrentDirectory:', e);
+        return {};
+      }
+    }
+
+    if (typeof structure !== 'object' || structure === null) {
+      return {};
+    }
+
+    let current: any = structure;
     for (const dir of currentPath) {
-      if (current[dir] && !current[dir].type) {
+      if (current[dir] && typeof current[dir] === 'object' && !current[dir].type) {
         current = current[dir];
       } else {
         return {};
@@ -190,8 +209,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
       label: t('convTile.delete'),
       onClick: (event: React.SyntheticEvent) => {
         event.stopPropagation();
-        console.log('Delete item:', name);
-        // Delete action will be implemented later
+        confirmDeleteItem(name, isFile);
       },
       iconWidth: 18,
       iconHeight: 18,
@@ -200,44 +218,175 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
 
     return options;
   };
+  
+  const confirmDeleteItem = (name: string, isFile: boolean) => {
+    setItemToDelete({ name, isFile });
+    setDeleteModalState('ACTIVE');
+    setActiveMenuId(null); 
+  };
+  
+  const handleConfirmedDelete = async () => {
+    if (itemToDelete) {
+      await handleDeleteFile(itemToDelete.name, itemToDelete.isFile);
+      setDeleteModalState('INACTIVE');
+      setItemToDelete(null);
+    }
+  };
+  
+  const handleCancelDelete = () => {
+    setDeleteModalState('INACTIVE');
+    setItemToDelete(null);
+  };
+  
+  const manageSource = async (operation: 'add' | 'remove', files?: FileList | null, filePath?: string) => {
+    setIsUploading(true);
+    
+    try {
+      const formData = new FormData();
+      formData.append('source_id', docId);
+      formData.append('operation', operation);
+      
+      if (operation === 'add' && files) {
+        formData.append('parent_dir', currentPath.join('/'));
+        
+        for (let i = 0; i < files.length; i++) {
+          formData.append('file', files[i]);
+        }
+      } else if (operation === 'remove' && filePath) {
+        const filePaths = JSON.stringify([filePath]);
+        formData.append('file_paths', filePaths);
+      }
+      
+      const response = await userService.manageSourceFiles(formData, token);
+      const result = await response.json();
+      
+      if (result.success && result.reingest_task_id) {
+        console.log(`Files ${operation === 'add' ? 'uploaded' : 'deleted'} successfully:`, 
+          operation === 'add' ? result.added_files : result.removed_files);
+        console.log('Reingest task started:', result.reingest_task_id);
+        
+        const maxAttempts = 30;
+        const pollInterval = 2000;
+        
+        for (let attempt = 0; attempt < maxAttempts; attempt++) {
+          try {
+            const statusResponse = await userService.getTaskStatus(result.reingest_task_id, token);
+            const statusData = await statusResponse.json();
+            
+            console.log(`Task status (attempt ${attempt + 1}):`, statusData.status);
+            
+            if (statusData.status === 'SUCCESS') {
+              console.log('Task completed successfully');
+              
+              const structureResponse = await userService.getDirectoryStructure(docId, token);
+              const structureData = await structureResponse.json();
+              
+              if (structureData && structureData.directory_structure) {
+                setDirectoryStructure(structureData.directory_structure);
+                setIsUploading(false);
+                return true;
+              }
+              break;
+            } else if (statusData.status === 'FAILURE') {
+              console.error('Task failed');
+              break;
+            }
+            
+            await new Promise(resolve => setTimeout(resolve, pollInterval));
+          } catch (error) {
+            console.error('Error polling task status:', error);
+            break;
+          }
+        }
+      } else {
+        throw new Error(`Failed to ${operation} file(s)`);
+      }
+    } catch (error) {
+      console.error(`Error ${operation === 'add' ? 'uploading' : 'deleting'} file(s):`, error);
+      setError(`Failed to ${operation === 'add' ? 'upload' : 'delete'} file(s)`);
+    } finally {
+      setIsUploading(false);
+    }
+    
+    return false;
+  };
+
+  const handleAddFile = () => {
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.multiple = true;
+    fileInput.accept = '.rst,.md,.pdf,.txt,.docx,.csv,.epub,.html,.mdx,.json,.xlsx,.pptx,.png,.jpg,.jpeg';
+    
+    fileInput.onchange = async (event) => {
+      const files = (event.target as HTMLInputElement).files;
+      if (!files || files.length === 0) return;
+      
+      await manageSource('add', files);
+    };
+    
+    fileInput.click();
+  };
+  
+  const handleDeleteFile = async (name: string, isFile: boolean) => {
+    // Construct the full path to the file
+    const filePath = [...currentPath, name].join('/');
+    await manageSource('remove', null, filePath);
+  };
 
   const renderPathNavigation = () => {
     return (
-      <div className="mb-4 flex items-center text-sm">
-        <button
-          className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
-          onClick={handleBackNavigation}
-        >
-          <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
-        </button>
+      <div className="mb-4 flex items-center justify-between text-sm">
+        <div className="flex items-center">
+          <button
+            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
+            onClick={handleBackNavigation}
+          >
+            <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
+          </button>
 
-        <div className="flex items-center flex-wrap">
-          <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5 flex-shrink-0" />
-          <span className="text-purple-30 font-medium break-words">{sourceName}</span>
-          {currentPath.length > 0 && (
-            <>
-              <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
-              {currentPath.map((dir, index) => (
-                <React.Fragment key={index}>
-                  <span className="text-gray-700 dark:text-gray-300 break-words">
-                    {dir}
-                  </span>
-                  {index < currentPath.length - 1 && (
-                    <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
-                  )}
-                </React.Fragment>
-              ))}
-            </>
-          )}
-          {selectedFile && (
-            <>
-              <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
-              <span className="text-gray-700 dark:text-gray-300 break-words">
-                {selectedFile.name}
-              </span>
-            </>
-          )}
+          <div className="flex items-center flex-wrap">
+            <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5 flex-shrink-0" />
+            <span className="text-purple-30 font-medium break-words">{sourceName}</span>
+            {currentPath.length > 0 && (
+              <>
+                <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
+                {currentPath.map((dir, index) => (
+                  <React.Fragment key={index}>
+                    <span className="text-gray-700 dark:text-gray-300 break-words">
+                      {dir}
+                    </span>
+                    {index < currentPath.length - 1 && (
+                      <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
+                    )}
+                  </React.Fragment>
+                ))}
+              </>
+            )}
+            {selectedFile && (
+              <>
+                <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
+                <span className="text-gray-700 dark:text-gray-300 break-words">
+                  {selectedFile.name}
+                </span>
+              </>
+            )}
+          </div>
         </div>
+
+        {!selectedFile && (
+          <button
+            onClick={handleAddFile}
+            disabled={isUploading}
+            className={`flex h-[32px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white ${
+              isUploading
+                ? 'bg-gray-400 cursor-not-allowed'
+                : 'bg-purple-30 hover:bg-violets-are-blue'
+            }`}
+            title={isUploading ? "Uploading files..." : "Add file"}
+          >
+            {isUploading ? 'Uploading...' : 'Add file'}
+          </button>
+        )}
       </div>
     );
   };
@@ -507,7 +656,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   };
 
   return (
-    <>
+    <div>
       {selectedFile ? (
         <div className="flex">
           <div className="flex-1 pl-4 pt-0">
@@ -561,7 +710,16 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           </div>
         </div>
       )}
-    </>
+      <ConfirmationModal
+        message={t('settings.documents.confirmDelete')}
+        modalState={deleteModalState}
+        setModalState={setDeleteModalState}
+        handleSubmit={handleConfirmedDelete}
+        handleCancel={handleCancelDelete}
+        submitLabel={t('convTile.delete')}
+        variant="danger"
+      />
+    </div>
   );
 };
 

From 53225bda4e7bffa46ee1b3eb196c719e567975a7 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Sat, 2 Aug 2025 00:49:15 +0530
Subject: [PATCH 37/57] (feat:reingestion) spit directories

---
 application/api/internal/routes.py |  9 ++-
 application/api/user/routes.py     | 96 +++++++++++++++++++++++++++---
 application/worker.py              | 22 +++++--
 3 files changed, 110 insertions(+), 17 deletions(-)

diff --git a/application/api/internal/routes.py b/application/api/internal/routes.py
index da87655b..89531703 100755
--- a/application/api/internal/routes.py
+++ b/application/api/internal/routes.py
@@ -77,10 +77,13 @@ def upload_index_files():
         file_pkl = request.files["file_pkl"]
         if file_pkl.filename == "":
             return {"status": "no file name"}
-        
+
         # Save index files to storage
-        storage.save_file(file_faiss, f"{index_base_path}/index.faiss")
-        storage.save_file(file_pkl, f"{index_base_path}/index.pkl")
+        faiss_storage_path = f"{index_base_path}/index.faiss"
+        pkl_storage_path = f"{index_base_path}/index.pkl"
+        storage.save_file(file_faiss, faiss_storage_path)
+        storage.save_file(file_pkl, pkl_storage_path)
+
 
     existing_entry = sources_collection.find_one({"_id": ObjectId(id)})
     if existing_entry:
diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index 9e7b8a6e..d8a19913 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -634,15 +634,16 @@ class ManageSourceFiles(Resource):
             "ManageSourceFilesModel",
             {
                 "source_id": fields.String(required=True, description="Source ID to modify"),
-                "operation": fields.String(required=True, description="Operation: 'add' or 'remove'"),
+                "operation": fields.String(required=True, description="Operation: 'add', 'remove', or 'remove_directory'"),
                 "file_paths": fields.List(fields.String, required=False, description="File paths to remove (for remove operation)"),
+                "directory_path": fields.String(required=False, description="Directory path to remove (for remove_directory operation)"),
                 "file": fields.Raw(required=False, description="Files to add (for add operation)"),
                 "parent_dir": fields.String(required=False, description="Parent directory path relative to source root"),
             },
         )
     )
     @api.doc(
-        description="Add or remove files from an existing source",
+        description="Add files, remove files, or remove directories from an existing source",
     )
     def post(self):
         decoded_token = request.decoded_token
@@ -658,9 +659,9 @@ class ManageSourceFiles(Resource):
                 jsonify({"success": False, "message": "source_id and operation are required"}), 400
             )
 
-        if operation not in ["add", "remove"]:
+        if operation not in ["add", "remove", "remove_directory"]:
             return make_response(
-                jsonify({"success": False, "message": "operation must be 'add' or 'remove'"}), 400
+                jsonify({"success": False, "message": "operation must be 'add', 'remove', or 'remove_directory'"}), 400
             )
 
         try:
@@ -761,8 +762,78 @@ class ManageSourceFiles(Resource):
                     "reingest_task_id": task.id
                 }), 200)
 
+            elif operation == "remove_directory":
+                directory_path = request.form.get("directory_path")
+                if not directory_path:
+                    return make_response(
+                        jsonify({"success": False, "message": "directory_path required for remove_directory operation"}), 400
+                    )
+
+                # Validate directory path (prevent path traversal)
+                if directory_path.startswith("/") or ".." in directory_path:
+                    current_app.logger.warning(
+                        f"Invalid directory path attempted for removal. "
+                        f"User: {user}, Source ID: {source_id}, Directory path: {directory_path}"
+                    )
+                    return make_response(
+                        jsonify({"success": False, "message": "Invalid directory path"}), 400
+                    )
+
+                full_directory_path = f"{source_file_path}/{directory_path}" if directory_path else source_file_path
+
+                if not storage.is_directory(full_directory_path):
+                    current_app.logger.warning(
+                        f"Directory not found or is not a directory for removal. "
+                        f"User: {user}, Source ID: {source_id}, Directory path: {directory_path}, "
+                        f"Full path: {full_directory_path}"
+                    )
+                    return make_response(
+                        jsonify({"success": False, "message": "Directory not found or is not a directory"}), 404
+                    )
+
+                success = storage.remove_directory(full_directory_path)
+
+                if not success:
+                    current_app.logger.error(
+                        f"Failed to remove directory from storage. "
+                        f"User: {user}, Source ID: {source_id}, Directory path: {directory_path}, "
+                        f"Full path: {full_directory_path}"
+                    )
+                    return make_response(
+                        jsonify({"success": False, "message": "Failed to remove directory"}), 500
+                    )
+
+                current_app.logger.info(
+                    f"Successfully removed directory. "
+                    f"User: {user}, Source ID: {source_id}, Directory path: {directory_path}, "
+                    f"Full path: {full_directory_path}"
+                )
+
+                # Trigger re-ingestion pipeline
+                from application.api.user.tasks import reingest_source_task
+
+                task = reingest_source_task.delay(source_id=source_id, user=user)
+
+                return make_response(jsonify({
+                    "success": True,
+                    "message": f"Successfully removed directory: {directory_path}",
+                    "removed_directory": directory_path,
+                    "reingest_task_id": task.id
+                }), 200)
+
         except Exception as err:
-            current_app.logger.error(f"Error managing source files: {err}", exc_info=True)
+            error_context = f"operation={operation}, user={user}, source_id={source_id}"
+            if operation == "remove_directory":
+                directory_path = request.form.get("directory_path", "")
+                error_context += f", directory_path={directory_path}"
+            elif operation == "remove":
+                file_paths_str = request.form.get("file_paths", "")
+                error_context += f", file_paths={file_paths_str}"
+            elif operation == "add":
+                parent_dir = request.form.get("parent_dir", "")
+                error_context += f", parent_dir={parent_dir}"
+
+            current_app.logger.error(f"Error managing source files: {err} ({error_context})", exc_info=True)
             return make_response(jsonify({"success": False, "message": "Operation failed"}), 500)
 
 
@@ -3438,15 +3509,22 @@ class GetChunks(Resource):
             filtered_chunks = []
             for chunk in chunks:
                 metadata = chunk.get("metadata", {})
-            
-                
+
+                # Filter by path if provided
+                if path:
+                    chunk_source = metadata.get("source", "")
+                    # Check if the chunk's source matches the requested path
+                    if not chunk_source or not chunk_source.endswith(path):
+                        continue
+
+                # Filter by search term if provided
                 if search_term:
                     text_match = search_term in chunk.get("text", "").lower()
                     title_match = search_term in metadata.get("title", "").lower()
-                    
+
                     if not (text_match or title_match):
                         continue
-                    
+
                 filtered_chunks.append(chunk)
             
             chunks = filtered_chunks
diff --git a/application/worker.py b/application/worker.py
index 12357c72..fe09bd9d 100755
--- a/application/worker.py
+++ b/application/worker.py
@@ -98,11 +98,23 @@ def download_file(url, params, dest_path):
 
 
 def upload_index(full_path, file_data):
+    files = None
     try:
         if settings.VECTOR_STORE == "faiss":
+            faiss_path = full_path + "/index.faiss"
+            pkl_path = full_path + "/index.pkl"
+
+            if not os.path.exists(faiss_path):
+                logging.error(f"FAISS index file not found: {faiss_path}")
+                raise FileNotFoundError(f"FAISS index file not found: {faiss_path}")
+
+            if not os.path.exists(pkl_path):
+                logging.error(f"FAISS pickle file not found: {pkl_path}")
+                raise FileNotFoundError(f"FAISS pickle file not found: {pkl_path}")
+
             files = {
-                "file_faiss": open(full_path + "/index.faiss", "rb"),
-                "file_pkl": open(full_path + "/index.pkl", "rb"),
+                "file_faiss": open(faiss_path, "rb"),
+                "file_pkl": open(pkl_path, "rb"),
             }
             response = requests.post(
                 urljoin(settings.API_URL, "/api/upload_index"),
@@ -114,11 +126,11 @@ def upload_index(full_path, file_data):
                 urljoin(settings.API_URL, "/api/upload_index"), data=file_data
             )
         response.raise_for_status()
-    except requests.RequestException as e:
+    except (requests.RequestException, FileNotFoundError) as e:
         logging.error(f"Error uploading index: {e}")
         raise
     finally:
-        if settings.VECTOR_STORE == "faiss":
+        if settings.VECTOR_STORE == "faiss" and files is not None:
             for file in files.values():
                 file.close()
 
@@ -552,7 +564,7 @@ def reingest_source_worker(self, source_id, user):
                         {"_id": ObjectId(source_id)},
                         {
                             "$set": {
-                                "directory_structure": json.dumps(directory_structure),
+                                "directory_structure": directory_structure,
                                 "date": datetime.datetime.now(),
                                 "tokens": total_tokens
                             }

From e1b1558fc9478c36922e7c8762e296e0dd2fd1f6 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Sat, 2 Aug 2025 00:54:09 +0530
Subject: [PATCH 38/57] (feat:storage) rm dir

---
 application/storage/local.py | 24 +++++++++++++++
 application/storage/s3.py    | 59 +++++++++++++++++++++++++++++++++---
 2 files changed, 78 insertions(+), 5 deletions(-)

diff --git a/application/storage/local.py b/application/storage/local.py
index b4530501..89b49bee 100644
--- a/application/storage/local.py
+++ b/application/storage/local.py
@@ -114,3 +114,27 @@ class LocalStorage(BaseStorage):
         """
         full_path = self._get_full_path(path)
         return os.path.isdir(full_path)
+
+    def remove_directory(self, directory: str) -> bool:
+        """
+        Remove a directory and all its contents from local storage.
+
+        Args:
+            directory: Directory path to remove
+
+        Returns:
+            bool: True if removal was successful, False otherwise
+        """
+        full_path = self._get_full_path(directory)
+
+        if not os.path.exists(full_path):
+            return False
+
+        if not os.path.isdir(full_path):
+            return False
+
+        try:
+            shutil.rmtree(full_path)
+            return True
+        except (OSError, PermissionError) as e:
+            return False
diff --git a/application/storage/s3.py b/application/storage/s3.py
index 36333f1c..31be844c 100644
--- a/application/storage/s3.py
+++ b/application/storage/s3.py
@@ -134,24 +134,73 @@ class S3Storage(BaseStorage):
     def is_directory(self, path: str) -> bool:
         """
         Check if a path is a directory in S3 storage.
-        
+
         In S3, directories are virtual concepts. A path is considered a directory
         if there are objects with the path as a prefix.
-        
+
         Args:
             path: Path to check
-        
+
         Returns:
             bool: True if the path is a directory, False otherwise
         """
         # Ensure path ends with a slash if not empty
         if path and not path.endswith('/'):
             path += '/'
-        
+
         response = self.s3.list_objects_v2(
             Bucket=self.bucket_name,
             Prefix=path,
             MaxKeys=1
         )
-        
+
         return 'Contents' in response
+
+    def remove_directory(self, directory: str) -> bool:
+        """
+        Remove a directory and all its contents from S3 storage.
+
+        In S3, this removes all objects with the directory path as a prefix.
+        Since S3 doesn't have actual directories, this effectively removes
+        all files within the virtual directory structure.
+
+        Args:
+            directory: Directory path to remove
+
+        Returns:
+            bool: True if removal was successful, False otherwise
+        """
+        # Ensure directory ends with a slash if not empty
+        if directory and not directory.endswith('/'):
+            directory += '/'
+
+        try:
+            # Get all objects with the directory prefix
+            objects_to_delete = []
+            paginator = self.s3.get_paginator('list_objects_v2')
+            pages = paginator.paginate(Bucket=self.bucket_name, Prefix=directory)
+
+            for page in pages:
+                if 'Contents' in page:
+                    for obj in page['Contents']:
+                        objects_to_delete.append({'Key': obj['Key']})
+
+            if not objects_to_delete:
+                return False
+
+            batch_size = 1000
+            for i in range(0, len(objects_to_delete), batch_size):
+                batch = objects_to_delete[i:i + batch_size]
+
+                response = self.s3.delete_objects(
+                    Bucket=self.bucket_name,
+                    Delete={'Objects': batch}
+                )
+
+                if 'Errors' in response and response['Errors']:
+                    return False
+
+            return True
+
+        except ClientError:
+            return False

From a61e44d175bdd828147536df39b9c8c50c67f5c9 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Sat, 2 Aug 2025 01:48:43 +0530
Subject: [PATCH 39/57] (feat:dir_tree) improvement

---
 application/parser/file/bulk.py | 53 ++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/application/parser/file/bulk.py b/application/parser/file/bulk.py
index 6f8d6cde..978ec87c 100644
--- a/application/parser/file/bulk.py
+++ b/application/parser/file/bulk.py
@@ -196,7 +196,7 @@ class SimpleDirectoryReader(BaseReader):
         
         # Build directory structure if input_dir is provided
         if hasattr(self, 'input_dir'):
-            self.directory_structure = self._build_directory_structure(self.input_dir)
+            self.directory_structure = self.build_directory_structure(self.input_dir)
             logging.info(f"Directory structure built successfully")
         else:
             self.directory_structure = {}
@@ -208,48 +208,47 @@ class SimpleDirectoryReader(BaseReader):
         else:
             return [Document(d) for d in data_list]
 
-    def _build_directory_structure(self, base_path):
+    def build_directory_structure(self, base_path):
         """Build a dictionary representing the directory structure.
-        
+
         Args:
             base_path: The base path to start building the structure from.
-            
+
         Returns:
             dict: A nested dictionary representing the directory structure.
         """
-        structure = {}
-        base_path = Path(base_path)
+        import mimetypes
         
-        def _build_tree(path, current_dict):
+        def build_tree(path):
+            """Helper function to recursively build the directory tree."""
+            result = {}
+            
             for item in path.iterdir():
+                if self.exclude_hidden and item.name.startswith('.'):
+                    continue
+                    
                 if item.is_dir():
-                    if self.exclude_hidden and item.name.startswith('.'):
-                        continue
-                    current_dict[item.name] = {}
-                    _build_tree(item, current_dict[item.name])
+                    subtree = build_tree(item)
+                    if subtree:
+                        result[item.name] = subtree
                 else:
-                    if self.exclude_hidden and item.name.startswith('.'):
-                        continue
                     if self.required_exts is not None and item.suffix not in self.required_exts:
                         continue
                     
                     full_path = str(item.resolve())
                     file_size_bytes = item.stat().st_size
-                    
-                    import mimetypes
                     mime_type = mimetypes.guess_type(item.name)[0] or "application/octet-stream"
                     
+                    file_info = {
+                        "type": mime_type,
+                        "size_bytes": file_size_bytes
+                    }
+                    
                     if hasattr(self, 'file_token_counts') and full_path in self.file_token_counts:
-                        current_dict[item.name] = {
-                            "type": mime_type,
-                            "token_count": self.file_token_counts[full_path],
-                            "size_bytes": file_size_bytes
-                        }
-                    else:
-                        current_dict[item.name] = {
-                            "type": mime_type,
-                            "size_bytes": file_size_bytes
-                        }
+                        file_info["token_count"] = self.file_token_counts[full_path]
+                        
+                    result[item.name] = file_info
+                    
+            return result
         
-        _build_tree(base_path, structure)
-        return structure
+        return build_tree(Path(base_path))
\ No newline at end of file

From 8b4f6553f36da60a44ce8d06a2d63b0e54bb9165 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Sat, 2 Aug 2025 02:08:35 +0530
Subject: [PATCH 40/57] (fix:menu) left and right

---
 frontend/src/components/ContextMenu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ContextMenu.tsx b/frontend/src/components/ContextMenu.tsx
index 6d83d8eb..d9482e3b 100644
--- a/frontend/src/components/ContextMenu.tsx
+++ b/frontend/src/components/ContextMenu.tsx
@@ -82,14 +82,14 @@ export default function ContextMenu({
     // Adjust position based on specified position
     switch (position) {
       case 'bottom-left':
-        left = rect.left + scrollX - offset.x;
+        left = rect.right + scrollX - menuWidth + offset.x;
         break;
       case 'top-right':
         top = rect.top + scrollY - offset.y - menuHeight;
         break;
       case 'top-left':
         top = rect.top + scrollY - offset.y - menuHeight;
-        left = rect.left + scrollX - offset.x;
+        left = rect.right + scrollX - menuWidth + offset.x;
         break;
       // bottom-right is default
     }

From 45745c2a4736db1ca98468fb16be37cce781d08c Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Mon, 4 Aug 2025 16:35:24 +0530
Subject: [PATCH 41/57] (feat:docs) skeleton loader

---
 frontend/src/components/DocumentChunks.tsx    | 87 +++++++++----------
 frontend/src/components/FileTreeComponent.tsx | 56 ++++++++----
 frontend/src/components/SkeletonLoader.tsx    | 52 ++++++++++-
 frontend/src/settings/Documents.tsx           | 44 +++++-----
 4 files changed, 154 insertions(+), 85 deletions(-)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index 3b2881ed..c96ea9d8 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -8,12 +8,10 @@ import ArrowLeft from '../assets/arrow-left.svg';
 import NoFilesIcon from '../assets/no-files.svg';
 import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import OutlineSource from '../assets/outline-source.svg';
-import Spinner from '../components/Spinner';
-import ChunkModal from '../modals/ChunkModal';
+import SkeletonLoader from './SkeletonLoader';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState } from '../models/misc';
 import { ChunkType } from '../settings/types';
-import EditIcon from '../assets/edit.svg';
 import Pagination from './DocumentPagination';
 
 interface LineNumberedTextareaProps {
@@ -271,10 +269,10 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
 
   const renderPathNavigation = () => {
     return (
-      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between w-full gap-3">
+      <div className="mb-4 flex items-center justify-between text-sm">
         <div className="flex items-center">
           <button
-            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] flex-shrink-0"
+            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
             onClick={editingChunk ? () => setEditingChunk(null) : isAddingChunk ? () => setIsAddingChunk(false) : handleGoBack}
           >
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
@@ -282,7 +280,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
 
           <div className="flex items-center flex-wrap">
             <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5 flex-shrink-0" />
-            <span className="text-[#7D54D1] font-semibold text-base leading-6 break-words">
+            <span className="text-purple-30 font-medium break-words">
               {documentName}
             </span>
 
@@ -291,7 +289,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                 <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
                 {pathParts.map((part, index) => (
                   <React.Fragment key={index}>
-                    <span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300 break-words">
+                    <span className="text-gray-700 dark:text-gray-300 break-words">
                       {part}
                     </span>
                     {index < pathParts.length - 1 && (
@@ -304,9 +302,9 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
           </div>
         </div>
 
-        {editingChunk && (
-          <div className="flex flex-wrap gap-2 justify-end">
-            {!isEditing ? (
+        <div className="flex flex-wrap items-center gap-2">
+          {editingChunk ? (
+            !isEditing ? (
               <button
                 className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-3 py-1 text-sm text-white transition-all"
                 onClick={() => setIsEditing(true)}
@@ -355,36 +353,34 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                   {t('modals.chunk.update')}
                 </button>
               </>
-            )}
-          </div>
-        )}
-
-        {isAddingChunk && (
-          <div className="flex flex-wrap gap-2 justify-end">
-            <button
-              onClick={() => setIsAddingChunk(false)}
-              className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50"
-            >
-              {t('modals.chunk.cancel')}
-            </button>
-            <button
-              onClick={() => {
-                if (editingText.trim()) {
-                  handleAddChunk(editingTitle, editingText);
-                  setIsAddingChunk(false);
-                }
-              }}
-              disabled={!editingText.trim()}
-              className={`rounded-full px-3 py-1 text-sm text-white transition-all ${
-                editingText.trim()
-                  ? 'bg-purple-30 hover:bg-violets-are-blue cursor-pointer'
-                  : 'bg-gray-400 cursor-not-allowed'
-              }`}
-            >
-              {t('modals.chunk.add')}
-            </button>
-          </div>
-        )}
+            )
+          ) : isAddingChunk ? (
+            <>
+              <button
+                onClick={() => setIsAddingChunk(false)}
+                className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50"
+              >
+                {t('modals.chunk.cancel')}
+              </button>
+              <button
+                onClick={() => {
+                  if (editingText.trim()) {
+                    handleAddChunk(editingTitle, editingText);
+                    setIsAddingChunk(false);
+                  }
+                }}
+                disabled={!editingText.trim()}
+                className={`rounded-full px-3 py-1 text-sm text-white transition-all ${
+                  editingText.trim()
+                    ? 'bg-purple-30 hover:bg-violets-are-blue cursor-pointer'
+                    : 'bg-gray-400 cursor-not-allowed'
+                }`}
+              >
+                {t('modals.chunk.add')}
+              </button>
+            </>
+          ) : null}
+        </div>
       </div>
     );
   };
@@ -436,11 +432,11 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                 </button>
               </div>
               {loading ? (
-                <div className="w-full mt-24 flex justify-center">
-                  <Spinner />
+                <div className="w-full grid grid-cols-1 sm:[grid-template-columns:repeat(auto-fit,minmax(400px,1fr))] gap-4 justify-items-start">
+                  <SkeletonLoader component="chunkCards" count={perPage} />
                 </div>
               ) : (
-                <div className="w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+                <div className="w-full grid grid-cols-1 sm:[grid-template-columns:repeat(auto-fit,minmax(400px,1fr))] gap-4 justify-items-start">
                   {filteredChunks.length === 0 ? (
                     <div className="col-span-full flex flex-col items-center justify-center mt-24 text-center text-gray-500 dark:text-gray-400">
                       <img
@@ -454,7 +450,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                     filteredChunks.map((chunk, index) => (
                       <div
                         key={index}
-                        className="transform transition-transform duration-200 hover:scale-105 relative flex h-[208px] flex-col justify-between rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden w-full"
+                        className="transform transition-transform duration-200 hover:scale-105 relative flex h-[197px] flex-col justify-between rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden cursor-pointer w-full max-w-[487px]"
                         onClick={() => {
                           setEditingChunk(chunk);
                           setEditingTitle(chunk.metadata?.title || '');
@@ -467,7 +463,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                               {chunk.metadata.token_count ? chunk.metadata.token_count.toLocaleString() : '-'} {t('settings.documents.tokensUnit')}
                             </div>
                           </div>
-                          <div className="p-4">
+                          <div className="px-4 pt-4 pb-6">
                             <p className="font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] dark:text-[#E0E0E0] line-clamp-7 font-normal">
                               {chunk.text}
                             </p>
@@ -480,7 +476,6 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
               )}
             </>
           ) : isAddingChunk ? (
-            // Add new chunk view
             <div className="w-full">
               <div className="relative border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-lg overflow-hidden">
                 <LineNumberedTextarea
diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index 5e4282b1..913210fc 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -238,31 +238,38 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     setItemToDelete(null);
   };
   
-  const manageSource = async (operation: 'add' | 'remove', files?: FileList | null, filePath?: string) => {
+  const manageSource = async (operation: 'add' | 'remove' | 'remove_directory', files?: FileList | null, filePath?: string, directoryPath?: string) => {
     setIsUploading(true);
-    
+
     try {
       const formData = new FormData();
       formData.append('source_id', docId);
       formData.append('operation', operation);
-      
+
       if (operation === 'add' && files) {
         formData.append('parent_dir', currentPath.join('/'));
-        
+
         for (let i = 0; i < files.length; i++) {
           formData.append('file', files[i]);
         }
       } else if (operation === 'remove' && filePath) {
         const filePaths = JSON.stringify([filePath]);
         formData.append('file_paths', filePaths);
+      } else if (operation === 'remove_directory' && directoryPath) {
+        formData.append('directory_path', directoryPath);
       }
       
       const response = await userService.manageSourceFiles(formData, token);
       const result = await response.json();
       
       if (result.success && result.reingest_task_id) {
-        console.log(`Files ${operation === 'add' ? 'uploaded' : 'deleted'} successfully:`, 
-          operation === 'add' ? result.added_files : result.removed_files);
+        if (operation === 'add') {
+          console.log('Files uploaded successfully:', result.added_files);
+        } else if (operation === 'remove') {
+          console.log('Files deleted successfully:', result.removed_files);
+        } else if (operation === 'remove_directory') {
+          console.log('Directory deleted successfully:', result.removed_directory);
+        }
         console.log('Reingest task started:', result.reingest_task_id);
         
         const maxAttempts = 30;
@@ -299,11 +306,13 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           }
         }
       } else {
-        throw new Error(`Failed to ${operation} file(s)`);
+        throw new Error(`Failed to ${operation} ${operation === 'remove_directory' ? 'directory' : 'file(s)'}`);
       }
     } catch (error) {
-      console.error(`Error ${operation === 'add' ? 'uploading' : 'deleting'} file(s):`, error);
-      setError(`Failed to ${operation === 'add' ? 'upload' : 'delete'} file(s)`);
+      const actionText = operation === 'add' ? 'uploading' : operation === 'remove_directory' ? 'deleting directory' : 'deleting file(s)';
+      const errorText = operation === 'add' ? 'upload' : operation === 'remove_directory' ? 'delete directory' : 'delete file(s)';
+      console.error(`Error ${actionText}:`, error);
+      setError(`Failed to ${errorText}`);
     } finally {
       setIsUploading(false);
     }
@@ -328,14 +337,21 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   };
   
   const handleDeleteFile = async (name: string, isFile: boolean) => {
-    // Construct the full path to the file
-    const filePath = [...currentPath, name].join('/');
-    await manageSource('remove', null, filePath);
+    // Construct the full path to the file or directory
+    const itemPath = [...currentPath, name].join('/');
+
+    if (isFile) {
+      // Delete individual file
+      await manageSource('remove', null, itemPath);
+    } else {
+      // Delete entire directory
+      await manageSource('remove_directory', null, undefined, itemPath);
+    }
   };
 
   const renderPathNavigation = () => {
     return (
-      <div className="mb-4 flex items-center justify-between text-sm">
+      <div className="mb-4 flex flex-col sm:flex-row items-center justify-between text-sm">
         <div className="flex items-center">
           <button
             className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
@@ -377,7 +393,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           <button
             onClick={handleAddFile}
             disabled={isUploading}
-            className={`flex h-[32px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white ${
+            className={`flex h-[32px] w-full m-2 sm:m-0 sm:w-auto min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white ${
               isUploading
                 ? 'bg-gray-400 cursor-not-allowed'
                 : 'bg-purple-30 hover:bg-violets-are-blue'
@@ -494,7 +510,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                   options={getActionOptions(name, false, itemId)}
                   anchorRef={menuRef}
                   position="bottom-left"
-                  offset={{ x: 0, y: 8 }}
+                  offset={{ x: -8, y: 8 }}
                 />
               </div>
             </td>
@@ -544,7 +560,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                   options={getActionOptions(name, true, itemId)}
                   anchorRef={menuRef}
                   position="bottom-left"
-                  offset={{ x: 0, y: 8 }}
+                  offset={{ x: -8, y: 8 }}
                 />
               </div>
             </td>
@@ -659,7 +675,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     <div>
       {selectedFile ? (
         <div className="flex">
-          <div className="flex-1 pl-4 pt-0">
+          <div className="flex-1">
             <DocumentChunks
               documentId={docId}
               documentName={sourceName}
@@ -711,7 +727,11 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
         </div>
       )}
       <ConfirmationModal
-        message={t('settings.documents.confirmDelete')}
+        message={
+          itemToDelete?.isFile
+            ? t('settings.documents.confirmDelete')
+            : `Are you sure you want to delete the directory "${itemToDelete?.name}" and all its contents? This action cannot be undone.`
+        }
         modalState={deleteModalState}
         setModalState={setDeleteModalState}
         handleSubmit={handleConfirmedDelete}
diff --git a/frontend/src/components/SkeletonLoader.tsx b/frontend/src/components/SkeletonLoader.tsx
index 78999c4f..6d083f8f 100644
--- a/frontend/src/components/SkeletonLoader.tsx
+++ b/frontend/src/components/SkeletonLoader.tsx
@@ -8,7 +8,9 @@ interface SkeletonLoaderProps {
     | 'logs'
     | 'table'
     | 'chatbot'
-    | 'dropdown';
+    | 'dropdown'
+    | 'chunkCards'
+    | 'sourceCards';
 }
 
 const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
@@ -182,6 +184,51 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
     </>
   );
 
+  const renderChunkCards = () => (
+    <>
+      {Array.from({ length: count }).map((_, index) => (
+        <div
+          key={`chunk-skel-${index}`}
+          className="relative flex h-[197px] flex-col rounded-[5.86px] border border-[#D1D9E0] dark:border-[#6A6A6A] overflow-hidden w-full max-w-[487px] animate-pulse"
+        >
+          <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="h-4 bg-gray-300 dark:bg-gray-600 rounded w-20"></div>
+            </div>
+            <div className="px-4 pt-4 pb-6 space-y-3">
+              <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-full"></div>
+              <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-11/12"></div>
+              <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-5/6"></div>
+              <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-4/5"></div>
+              <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
+              <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-2/3"></div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+
+  const renderSourceCards = () => (
+    <>
+      {Array.from({ length: count }).map((_, idx) => (
+        <div
+          key={`source-skel-${idx}`}
+          className="flex h-[123px] w-[308px] flex-col justify-between rounded-2xl bg-[#F9F9F9] p-3 dark:bg-[#383838] animate-pulse"
+        >
+          <div className="flex w-full items-center justify-between gap-2">
+            <div className="h-4 w-3/5 rounded bg-gray-300 dark:bg-gray-600"></div>
+            <div className="h-6 w-6 rounded bg-gray-300 dark:bg-gray-600"></div>
+          </div>
+          <div className="mt-auto flex items-center justify-between pt-3">
+            <div className="h-3 w-24 rounded bg-gray-300 dark:bg-gray-600"></div>
+            <div className="h-3 w-20 rounded bg-gray-300 dark:bg-gray-600"></div>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+
   const componentMap = {
     table: renderTable,
     chatbot: renderChatbot,
@@ -189,8 +236,11 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
     logs: renderLogs,
     default: renderDefault,
     analysis: renderAnalysis,
+    chunkCards: renderChunkCards,
+    sourceCards: renderSourceCards,
   };
 
+
   const render = componentMap[component] || componentMap.default;
 
   return <>{render()}</>;
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 30f71f26..899092af 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -315,7 +315,9 @@ export default function Documents({
         </div>
         <div className="relative w-full">
           {loading ? (
-            <SkeletonLoader />
+            <div className="w-full grid grid-cols-1 sm:[grid-template-columns:repeat(auto-fit,minmax(308px,1fr))] gap-6 justify-items-start">
+              <SkeletonLoader component="sourceCards" count={rowsPerPage} />
+            </div>
           ) : !currentDocuments?.length ? (
             <div className="flex flex-col items-center justify-center py-12">
               <img
@@ -376,7 +378,7 @@ export default function Documents({
                                 }}
                                 anchorRef={getMenuRef(docId)}
                                 position="bottom-left"
-                                offset={{ x: 24, y: -24 }}
+                                offset={{ x: -8, y: 8 }}
                                 className="min-w-[120px]"
                               />
                             )}
@@ -391,7 +393,7 @@ export default function Documents({
                             >
                               <img
                                 src={ThreeDots}
-                                alt={t('convTile.menu')}
+                                alt={t('Open menu')}
                                 className="opacity-60 hover:opacity-100"
                               />
                             </button>
@@ -423,7 +425,7 @@ export default function Documents({
                       options={getActionOptions(index, document)}
                       anchorRef={getMenuRef(docId)}
                       position="bottom-left"
-                      offset={{ x: 48, y: 0 }}
+                      offset={{ x: -8, y: 8 }}
                       className="z-50"
                     />
                   </div>
@@ -434,22 +436,24 @@ export default function Documents({
         </div>
       </div>
 
-      <div className="mt-auto pt-4">
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          rowsPerPage={rowsPerPage}
-          onPageChange={(page) => {
-            setCurrentPage(page);
-            refreshDocs(undefined, page, rowsPerPage);
-          }}
-          onRowsPerPageChange={(rows) => {
-            setRowsPerPage(rows);
-            setCurrentPage(1);
-            refreshDocs(undefined, 1, rows);
-          }}
-        />
-      </div>
+      {currentDocuments.length > 0 && totalPages > 1 && (
+        <div className="mt-auto pt-4">
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            rowsPerPage={rowsPerPage}
+            onPageChange={(page) => {
+              setCurrentPage(page);
+              refreshDocs(undefined, page, rowsPerPage);
+            }}
+            onRowsPerPageChange={(rows) => {
+              setRowsPerPage(rows);
+              setCurrentPage(1);
+              refreshDocs(undefined, 1, rows);
+            }}
+          />
+        </div>
+      )}
 
       {modalState === 'ACTIVE' && (
         <Upload

From 735fab7640751e00a45695e47f990a2a020e35ea Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Mon, 4 Aug 2025 16:36:38 +0530
Subject: [PATCH 42/57] (feat:storage) sync base

---
 application/storage/base.py | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/application/storage/base.py b/application/storage/base.py
index 50eaac7e..79bd7348 100644
--- a/application/storage/base.py
+++ b/application/storage/base.py
@@ -106,3 +106,19 @@ class BaseStorage(ABC):
             bool: True if the path is a directory
         """
         pass
+
+    @abstractmethod
+    def remove_directory(self, directory: str) -> bool:
+        """
+        Remove a directory and all its contents.
+
+        For local storage, this removes the directory and all files/subdirectories within it.
+        For S3 storage, this removes all objects with the directory path as a prefix.
+
+        Args:
+            directory: Directory path to remove
+
+        Returns:
+            bool: True if removal was successful, False otherwise
+        """
+        pass

From 888ea81a32ce4e4693eb20306aaeeabc4df4c2c7 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Mon, 4 Aug 2025 17:27:12 +0530
Subject: [PATCH 43/57] (feat:fil_management) serialising updates, queue

---
 frontend/src/components/FileTreeComponent.tsx | 114 ++++++++++++------
 1 file changed, 80 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index 913210fc..f82c3e5e 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -60,12 +60,23 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   } | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
-  const [isUploading, setIsUploading] = useState(false);
   const searchDropdownRef = useRef<HTMLDivElement>(null);
-  
+  const currentOpRef = useRef<null | 'add' | 'remove' | 'remove_directory'>(null);
+
   const [deleteModalState, setDeleteModalState] = useState<'ACTIVE' | 'INACTIVE'>('INACTIVE');
   const [itemToDelete, setItemToDelete] = useState<{ name: string; isFile: boolean } | null>(null);
-  
+
+  type QueuedOperation = {
+    operation: 'add' | 'remove' | 'remove_directory';
+    files?: File[];
+    filePath?: string;
+    directoryPath?: string;
+    parentDirPath?: string;
+  };
+  const opQueueRef = useRef<QueuedOperation[]>([]);
+  const processingRef = useRef(false);
+  const [queueLength, setQueueLength] = useState(0);
+
   useOutsideAlerter(
     searchDropdownRef,
     () => {
@@ -186,7 +197,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   const getActionOptions = (
     name: string,
     isFile: boolean,
-    itemId: string,
+    _itemId: string,
   ): MenuOption[] => {
     const options: MenuOption[] = [];
 
@@ -238,16 +249,22 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     setItemToDelete(null);
   };
   
-  const manageSource = async (operation: 'add' | 'remove' | 'remove_directory', files?: FileList | null, filePath?: string, directoryPath?: string) => {
-    setIsUploading(true);
+  const manageSource = async (
+    operation: 'add' | 'remove' | 'remove_directory',
+    files?: File[] | null,
+    filePath?: string,
+    directoryPath?: string,
+    parentDirPath?: string,
+  ) => {
+    currentOpRef.current = operation;
 
     try {
       const formData = new FormData();
       formData.append('source_id', docId);
       formData.append('operation', operation);
 
-      if (operation === 'add' && files) {
-        formData.append('parent_dir', currentPath.join('/'));
+      if (operation === 'add' && files && files.length) {
+        formData.append('parent_dir', parentDirPath ?? currentPath.join('/'));
 
         for (let i = 0; i < files.length; i++) {
           formData.append('file', files[i]);
@@ -290,7 +307,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               
               if (structureData && structureData.directory_structure) {
                 setDirectoryStructure(structureData.directory_structure);
-                setIsUploading(false);
+                currentOpRef.current = null;
                 return true;
               }
               break;
@@ -314,38 +331,64 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
       console.error(`Error ${actionText}:`, error);
       setError(`Failed to ${errorText}`);
     } finally {
-      setIsUploading(false);
+      currentOpRef.current = null;
     }
-    
+
     return false;
   };
 
+  const processQueue = async () => {
+    if (processingRef.current) return;
+    processingRef.current = true;
+    try {
+      while (opQueueRef.current.length > 0) {
+        const nextOp = opQueueRef.current.shift()!;
+        setQueueLength(opQueueRef.current.length);
+        await manageSource(
+          nextOp.operation,
+          nextOp.files,
+          nextOp.filePath,
+          nextOp.directoryPath,
+          nextOp.parentDirPath,
+        );
+      }
+    } finally {
+      processingRef.current = false;
+    }
+  };
+
+  const enqueueOperation = (op: QueuedOperation) => {
+    opQueueRef.current.push(op);
+    setQueueLength(opQueueRef.current.length);
+    if (!processingRef.current) {
+      void processQueue();
+    }
+  };
+
   const handleAddFile = () => {
     const fileInput = document.createElement('input');
     fileInput.type = 'file';
     fileInput.multiple = true;
     fileInput.accept = '.rst,.md,.pdf,.txt,.docx,.csv,.epub,.html,.mdx,.json,.xlsx,.pptx,.png,.jpg,.jpeg';
-    
+
     fileInput.onchange = async (event) => {
-      const files = (event.target as HTMLInputElement).files;
-      if (!files || files.length === 0) return;
-      
-      await manageSource('add', files);
+      const fileList = (event.target as HTMLInputElement).files;
+      if (!fileList || fileList.length === 0) return;
+      const files = Array.from(fileList);
+      enqueueOperation({ operation: 'add', files, parentDirPath: currentPath.join('/') });
     };
-    
+
     fileInput.click();
   };
-  
+
   const handleDeleteFile = async (name: string, isFile: boolean) => {
     // Construct the full path to the file or directory
     const itemPath = [...currentPath, name].join('/');
 
     if (isFile) {
-      // Delete individual file
-      await manageSource('remove', null, itemPath);
+      enqueueOperation({ operation: 'remove', filePath: itemPath });
     } else {
-      // Delete entire directory
-      await manageSource('remove_directory', null, undefined, itemPath);
+      enqueueOperation({ operation: 'remove_directory', directoryPath: itemPath });
     }
   };
 
@@ -390,18 +433,21 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
         </div>
 
         {!selectedFile && (
-          <button
-            onClick={handleAddFile}
-            disabled={isUploading}
-            className={`flex h-[32px] w-full m-2 sm:m-0 sm:w-auto min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white ${
-              isUploading
-                ? 'bg-gray-400 cursor-not-allowed'
-                : 'bg-purple-30 hover:bg-violets-are-blue'
-            }`}
-            title={isUploading ? "Uploading files..." : "Add file"}
-          >
-            {isUploading ? 'Uploading...' : 'Add file'}
-          </button>
+          <div className="flex items-center gap-2 m-2 sm:m-0">
+            {(processingRef.current || queueLength > 0) && (
+              <span className="text-xs text-gray-600 dark:text-gray-400">
+                {processingRef.current ? (currentOpRef.current === 'add' ? 'Uploading…' : 'Deleting…') : null}
+                {queueLength > 0 ? `${processingRef.current ? ' • ' : ''}Queued: ${queueLength}` : ''}
+              </span>
+            )}
+            <button
+              onClick={handleAddFile}
+              className="bg-purple-30 hover:bg-violets-are-blue flex h-[32px] w-full sm:w-auto min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white"
+              title={processingRef.current ? (currentOpRef.current === 'add' ? 'Uploading files...' : 'Deleting...') : 'Add file'}
+            >
+              Add file
+            </button>
+          </div>
         )}
       </div>
     );

From e218e88cf4a9939592afc0f67b471674b09d28e5 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Mon, 4 Aug 2025 19:28:15 +0530
Subject: [PATCH 44/57] (fix:chunks) alignment and ui

---
 frontend/src/components/DocumentChunks.tsx    | 2 +-
 frontend/src/components/FileTreeComponent.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index c96ea9d8..6e97062b 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -438,7 +438,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
               ) : (
                 <div className="w-full grid grid-cols-1 sm:[grid-template-columns:repeat(auto-fit,minmax(400px,1fr))] gap-4 justify-items-start">
                   {filteredChunks.length === 0 ? (
-                    <div className="col-span-full flex flex-col items-center justify-center mt-24 text-center text-gray-500 dark:text-gray-400">
+                    <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')}
diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index f82c3e5e..53d91082 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -394,8 +394,8 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
 
   const renderPathNavigation = () => {
     return (
-      <div className="mb-4 flex flex-col sm:flex-row items-center justify-between text-sm">
-        <div className="flex items-center">
+      <div className="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm gap-3">
+        <div className="flex items-center w-full sm:w-auto">
           <button
             className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
             onClick={handleBackNavigation}
@@ -433,7 +433,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
         </div>
 
         {!selectedFile && (
-          <div className="flex items-center gap-2 m-2 sm:m-0">
+          <div className="flex items-center gap-2 w-full sm:w-auto">
             {(processingRef.current || queueLength > 0) && (
               <span className="text-xs text-gray-600 dark:text-gray-400">
                 {processingRef.current ? (currentOpRef.current === 'add' ? 'Uploading…' : 'Deleting…') : null}

From 16fe92282ed3dab36def4912f9a60e7dd8a5b213 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 5 Aug 2025 03:04:37 +0530
Subject: [PATCH 45/57] (fix:chunks) responsive, editing controls

---
 frontend/src/components/DocumentChunks.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index 6e97062b..84919ea4 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -269,7 +269,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
 
   const renderPathNavigation = () => {
     return (
-      <div className="mb-4 flex items-center justify-between text-sm">
+      <div className="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm gap-2">
         <div className="flex items-center">
           <button
             className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
@@ -302,11 +302,11 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
           </div>
         </div>
 
-        <div className="flex flex-wrap items-center gap-2">
+        <div className="flex flex-row flex-nowrap items-center gap-2 w-full sm:w-auto justify-end mt-2 sm:mt-0 overflow-x-auto">
           {editingChunk ? (
             !isEditing ? (
               <button
-                className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-3 py-1 text-sm text-white transition-all"
+                className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-3 py-1 text-sm text-white transition-all text-nowrap"
                 onClick={() => setIsEditing(true)}
               >
                 {t('modals.chunk.edit')}
@@ -326,7 +326,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                     setIsEditing(false);
                     setEditingChunk(null);
                   }}
-                  className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50"
+                  className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50 text-nowrap"
                 >
                   {t('modals.chunk.cancel')}
                 </button>
@@ -344,7 +344,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                     }
                   }}
                   disabled={!editingText.trim() || (editingTitle === (editingChunk?.metadata?.title || '') && editingText === (editingChunk?.text || ''))}
-                  className={`rounded-full px-3 py-1 text-sm text-white transition-all ${
+                  className={`text-nowrap rounded-full px-3 py-1 text-sm text-white transition-all ${
                     editingText.trim() && (editingTitle !== (editingChunk?.metadata?.title || '') || editingText !== (editingChunk?.text || ''))
                       ? 'bg-purple-30 hover:bg-violets-are-blue cursor-pointer'
                       : 'bg-gray-400 cursor-not-allowed'
@@ -358,7 +358,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
             <>
               <button
                 onClick={() => setIsAddingChunk(false)}
-                className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50"
+                className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50 text-nowrap"
               >
                 {t('modals.chunk.cancel')}
               </button>
@@ -370,7 +370,7 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                   }
                 }}
                 disabled={!editingText.trim()}
-                className={`rounded-full px-3 py-1 text-sm text-white transition-all ${
+                className={`text-nowrap rounded-full px-3 py-1 text-sm text-white transition-all ${
                   editingText.trim()
                     ? 'bg-purple-30 hover:bg-violets-are-blue cursor-pointer'
                     : 'bg-gray-400 cursor-not-allowed'
@@ -463,8 +463,8 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
                               {chunk.metadata.token_count ? chunk.metadata.token_count.toLocaleString() : '-'} {t('settings.documents.tokensUnit')}
                             </div>
                           </div>
-                          <div className="px-4 pt-4 pb-6">
-                            <p className="font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] dark:text-[#E0E0E0] line-clamp-7 font-normal">
+                          <div className="px-4 pt-3 pb-6">
+                            <p className="font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] dark:text-[#E0E0E0] line-clamp-6 font-normal">
                               {chunk.text}
                             </p>
                           </div>

From b000b235a26c6bf766e7ac9961d8df24393905b0 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 5 Aug 2025 05:23:29 +0530
Subject: [PATCH 46/57] (feat:sources) renamed docs,fe

---
 .../{DocumentChunks.tsx => Chunks.tsx}        | 22 ++++----
 frontend/src/components/FileTreeComponent.tsx | 56 ++++++++++---------
 .../components/{DocumentHead.tsx => Head.tsx} |  6 +-
 frontend/src/components/SettingsBar.tsx       |  2 +-
 frontend/src/components/SourceDropdown.tsx    |  2 +-
 frontend/src/components/SourcesPopup.tsx      |  8 +--
 .../src/conversation/SharedConversation.tsx   |  2 +-
 frontend/src/locale/en.json                   | 16 +++---
 frontend/src/locale/es.json                   | 15 ++---
 frontend/src/locale/jp.json                   | 15 ++---
 frontend/src/locale/ru.json                   | 15 ++---
 frontend/src/locale/zh-TW.json                | 15 ++---
 frontend/src/locale/zh.json                   | 15 ++---
 .../settings/{Documents.tsx => Sources.tsx}   | 38 ++++++-------
 frontend/src/settings/index.tsx               | 14 ++---
 15 files changed, 125 insertions(+), 116 deletions(-)
 rename frontend/src/components/{DocumentChunks.tsx => Chunks.tsx} (96%)
 rename frontend/src/components/{DocumentHead.tsx => Head.tsx} (93%)
 rename frontend/src/settings/{Documents.tsx => Sources.tsx} (93%)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/Chunks.tsx
similarity index 96%
rename from frontend/src/components/DocumentChunks.tsx
rename to frontend/src/components/Chunks.tsx
index 84919ea4..0800cfa0 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/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;
diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index 53d91082..19cf006b 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/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}
diff --git a/frontend/src/components/DocumentHead.tsx b/frontend/src/components/Head.tsx
similarity index 93%
rename from frontend/src/components/DocumentHead.tsx
rename to frontend/src/components/Head.tsx
index b52b0f84..6f6e060e 100644
--- a/frontend/src/components/DocumentHead.tsx
+++ b/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>}
diff --git a/frontend/src/components/SettingsBar.tsx b/frontend/src/components/SettingsBar.tsx
index 5b94a708..0d370f87 100644
--- a/frontend/src/components/SettingsBar.tsx
+++ b/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'),
diff --git a/frontend/src/components/SourceDropdown.tsx b/frontend/src/components/SourceDropdown.tsx
index 8058e9ad..a1097e4f 100644
--- a/frontend/src/components/SourceDropdown.tsx
+++ b/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}
diff --git a/frontend/src/components/SourcesPopup.tsx b/frontend/src/components/SourcesPopup.tsx
index 3920cd2d..906f75cd 100644
--- a/frontend/src/components/SourcesPopup.tsx
+++ b/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>
diff --git a/frontend/src/conversation/SharedConversation.tsx b/frontend/src/conversation/SharedConversation.tsx
index 931f08b3..9f99db30 100644
--- a/frontend/src/conversation/SharedConversation.tsx
+++ b/frontend/src/conversation/SharedConversation.tsx
@@ -23,7 +23,7 @@ import {
   updateQuery,
 } from './sharedConversationSlice';
 import { selectCompletedAttachments } from '../upload/uploadSlice';
-import { DocumentHead } from '../components/DocumentHead';
+import { Head as DocumentHead } from '../components/Head';
 
 export const SharedConversation = () => {
   const navigate = useNavigate();
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 3c529fc5..5c2938cb 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -52,14 +52,14 @@
       "default": "Default",
       "add": "Add"
     },
-    "documents": {
-      "title": "This table contains all the documents that are available to you and those you have uploaded",
-      "label": "Documents",
-      "name": "Document Name",
+    "sources": {
+      "title": "Here you can manage all of the source file that are available to you and those you have uploaded.",
+      "label": "Sources",
+      "name": "Source Name",
       "date": "Vector Date",
       "type": "Type",
       "tokenUsage": "Token Usage",
-      "noData": "No existing Documents",
+      "noData": "No existing Sources",
       "searchPlaceholder": "Search...",
       "addNew": "Add New",
       "preLoaded": "Pre-loaded",
@@ -74,11 +74,12 @@
       "actions": "Actions",
       "view": "View",
       "deleteWarning": "Are you sure you want to delete \"{{name}}\"?",
-      "backToAll": "Back to all documents",
+      "confirmDelete": "Are you sure you want to delete this file? This action cannot be undone.",
+      "backToAll": "Back to all sources",
       "chunks": "Chunks",
       "noChunks": "No chunks found",
       "noChunksAlt": "No chunks found",
-      "goToDocuments": "Go to Documents",
+      "goToSources": "Go to Sources",
       "uploadNew": "Upload new",
       "searchFiles": "Search files...",
       "noResults": "No results found",
@@ -89,6 +90,7 @@
       "folderAlt": "Folder",
       "parentFolderAlt": "Parent folder",
       "menuAlt": "Menu",
+      "menuAlt": "Menu",
       "tokensUnit": "tokens",
       "editAlt": "Edit"
     },
diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
index 0b54582b..611f3b08 100644
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -52,14 +52,14 @@
       "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",
-      "label": "Documentos",
-      "name": "Nombre del Documento",
+    "sources": {
+      "title": "Aquí puedes gestionar todos los archivos fuente que están disponibles para ti y los que has subido.",
+      "label": "Fuentes",
+      "name": "Nombre de la Fuente",
       "date": "Fecha de Vector",
       "type": "Tipo",
       "tokenUsage": "Uso de Tokens",
-      "noData": "No hay documentos existentes",
+      "noData": "No hay fuentes existentes",
       "searchPlaceholder": "Buscar...",
       "addNew": "Agregar Nuevo",
       "preLoaded": "Precargado",
@@ -74,11 +74,12 @@
       "actions": "Acciones",
       "view": "Ver",
       "deleteWarning": "¿Estás seguro de que deseas eliminar \"{{name}}\"?",
-      "backToAll": "Volver a todos los documentos",
+      "confirmDelete": "¿Estás seguro de que deseas eliminar este archivo? Esta acción no se puede deshacer.",
+      "backToAll": "Volver a todas las fuentes",
       "chunks": "Fragmentos",
       "noChunks": "No se encontraron fragmentos",
       "noChunksAlt": "No se encontraron fragmentos",
-      "goToDocuments": "Ir a Documentos",
+      "goToSources": "Ir a Fuentes",
       "uploadNew": "Subir nuevo",
       "searchFiles": "Buscar archivos...",
       "noResults": "No se encontraron resultados",
diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index 42d7bb93..5a08cd2d 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -52,14 +52,14 @@
       "default": "デフォルト",
       "add": "追加"
     },
-    "documents": {
-      "title": "この表には、利用可能なすべてのドキュメントとアップロードしたドキュメントが含まれています",
-      "label": "ドキュメント",
-      "name": "ドキュメント名",
+    "sources": {
+      "title": "ここでは、利用可能なすべてのソースファイルとアップロードしたファイルを管理できます。",
+      "label": "ソース",
+      "name": "ソース名",
       "date": "ベクトル日付",
       "type": "タイプ",
       "tokenUsage": "トークン使用量",
-      "noData": "既存のドキュメントがありません",
+      "noData": "既存のソースがありません",
       "searchPlaceholder": "検索...",
       "addNew": "新規追加",
       "preLoaded": "プリロード済み",
@@ -74,11 +74,12 @@
       "actions": "アクション",
       "view": "表示",
       "deleteWarning": "\"{{name}}\"を削除してもよろしいですか？",
-      "backToAll": "すべてのドキュメントに戻る",
+      "confirmDelete": "このファイルを削除してもよろしいですか？この操作は元に戻せません。",
+      "backToAll": "すべてのソースに戻る",
       "chunks": "チャンク",
       "noChunks": "チャンクが見つかりません",
       "noChunksAlt": "チャンクが見つかりません",
-      "goToDocuments": "ドキュメントへ移動",
+      "goToSources": "ソースへ移動",
       "uploadNew": "新規アップロード",
       "searchFiles": "ファイルを検索...",
       "noResults": "結果が見つかりません",
diff --git a/frontend/src/locale/ru.json b/frontend/src/locale/ru.json
index 13ae6829..0fd7c845 100644
--- a/frontend/src/locale/ru.json
+++ b/frontend/src/locale/ru.json
@@ -52,14 +52,14 @@
       "default": "По умолчанию",
       "add": "Добавить"
     },
-    "documents": {
-      "title": "Эта таблица содержит все документы, которые доступны вам и те, которые вы загрузили",
-      "label": "Документы",
-      "name": "Название документа",
+    "sources": {
+      "title": "Здесь вы можете управлять всеми исходными файлами, которые доступны вам и которые вы загрузили.",
+      "label": "Источники",
+      "name": "Название источника",
       "date": "Дата вектора",
       "type": "Тип",
       "tokenUsage": "Использование токена",
-      "noData": "Нет существующих документов",
+      "noData": "Нет существующих источников",
       "searchPlaceholder": "Поиск...",
       "addNew": "добавить новый",
       "preLoaded": "Предзагруженный",
@@ -74,11 +74,12 @@
       "actions": "Действия",
       "view": "Просмотр",
       "deleteWarning": "Вы уверены, что хотите удалить \"{{name}}\"?",
-      "backToAll": "Вернуться ко всем документам",
+      "confirmDelete": "Вы уверены, что хотите удалить этот файл? Это действие нельзя отменить.",
+      "backToAll": "Вернуться ко всем источникам",
       "chunks": "Фрагменты",
       "noChunks": "Фрагменты не найдены",
       "noChunksAlt": "Фрагменты не найдены",
-      "goToDocuments": "Перейти к документам",
+      "goToSources": "Перейти к источникам",
       "uploadNew": "Загрузить новый",
       "searchFiles": "Поиск файлов...",
       "noResults": "Результаты не найдены",
diff --git a/frontend/src/locale/zh-TW.json b/frontend/src/locale/zh-TW.json
index f590b63b..d364d6fb 100644
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -52,14 +52,14 @@
       "default": "預設",
       "add": "添加"
     },
-    "documents": {
-      "title": "此表格包含所有可供您使用的文件以及您上傳的文件",
-      "label": "文件",
-      "name": "文件名稱",
+    "sources": {
+      "title": "在這裡您可以管理所有可用的來源檔案以及您上傳的檔案。",
+      "label": "來源",
+      "name": "來源名稱",
       "date": "向量日期",
       "type": "類型",
       "tokenUsage": "Token 使用量",
-      "noData": "沒有現有的文件",
+      "noData": "沒有現有的來源",
       "searchPlaceholder": "搜尋...",
       "addNew": "新增文件",
       "preLoaded": "預載入",
@@ -74,11 +74,12 @@
       "actions": "操作",
       "view": "查看",
       "deleteWarning": "您確定要刪除 \"{{name}}\" 嗎？",
-      "backToAll": "返回所有文件",
+      "confirmDelete": "您確定要刪除此檔案嗎？此操作無法復原。",
+      "backToAll": "返回所有來源",
       "chunks": "文本塊",
       "noChunks": "未找到文本塊",
       "noChunksAlt": "未找到文本塊",
-      "goToDocuments": "前往文件",
+      "goToSources": "前往來源",
       "uploadNew": "上傳新文件",
       "searchFiles": "搜尋檔案...",
       "noResults": "未找到結果",
diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
index c1a6b4a0..4c33a320 100644
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -52,14 +52,14 @@
       "default": "默认",
       "add": "添加"
     },
-    "documents": {
-      "title": "此表格包含所有可供您使用的文档以及您上传的文档",
-      "label": "文档",
-      "name": "文件名称",
+    "sources": {
+      "title": "在这里您可以管理所有可用的源文件以及您上传的文件。",
+      "label": "来源",
+      "name": "来源名称",
       "date": "向量日期",
       "type": "类型",
       "tokenUsage": "令牌使用",
-      "noData": "没有现有的文档",
+      "noData": "没有现有的来源",
       "searchPlaceholder": "搜索...",
       "addNew": "添加新文档",
       "preLoaded": "预加载",
@@ -74,11 +74,12 @@
       "actions": "操作",
       "view": "查看",
       "deleteWarning": "您确定要删除 \"{{name}}\" 吗？",
-      "backToAll": "返回所有文档",
+      "confirmDelete": "您确定要删除此文件吗？此操作无法撤销。",
+      "backToAll": "返回所有来源",
       "chunks": "文本块",
       "noChunks": "未找到文本块",
       "noChunksAlt": "未找到文本块",
-      "goToDocuments": "前往文档",
+      "goToSources": "前往来源",
       "uploadNew": "上传新文档",
       "searchFiles": "搜索文件...",
       "noResults": "未找到结果",
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Sources.tsx
similarity index 93%
rename from frontend/src/settings/Documents.tsx
rename to frontend/src/settings/Sources.tsx
index 899092af..eece44e3 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Sources.tsx
@@ -28,7 +28,7 @@ import {
 import Upload from '../upload/Upload';
 import { formatDate } from '../utils/dateTimeUtils';
 import FileTreeComponent from '../components/FileTreeComponent';
-import DocumentChunks from '../components/DocumentChunks';
+import Chunks from '../components/Chunks';
 
 const formatTokens = (tokens: number): string => {
   const roundToTwoDecimals = (num: number): string => {
@@ -46,7 +46,7 @@ const formatTokens = (tokens: number): string => {
   }
 };
 
-export default function Documents({
+export default function Sources({
   paginatedDocuments,
   handleDeleteDocument,
 }: DocumentsProps) {
@@ -97,10 +97,10 @@ export default function Documents({
 
   const currentDocuments = paginatedDocuments ?? [];
   const syncOptions = [
-    { label: t('settings.documents.syncFrequency.never'), value: 'never' },
-    { label: t('settings.documents.syncFrequency.daily'), value: 'daily' },
-    { label: t('settings.documents.syncFrequency.weekly'), value: 'weekly' },
-    { label: t('settings.documents.syncFrequency.monthly'), value: 'monthly' },
+    { label: t('settings.sources.syncFrequency.never'), value: 'never' },
+    { label: t('settings.sources.syncFrequency.daily'), value: 'daily' },
+    { label: t('settings.sources.syncFrequency.weekly'), value: 'weekly' },
+    { label: t('settings.sources.syncFrequency.monthly'), value: 'monthly' },
   ];
   const [documentToView, setDocumentToView] = useState<Doc>();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -215,7 +215,7 @@ export default function Documents({
     const actions: MenuOption[] = [
       {
         icon: EyeView,
-        label: t('settings.documents.view'),
+        label: t('settings.sources.view'),
         onClick: () => {
           setDocumentToView(document);
         },
@@ -228,7 +228,7 @@ export default function Documents({
     if (document.syncFrequency) {
       actions.push({
         icon: SyncIcon,
-        label: t('settings.documents.sync'),
+        label: t('settings.sources.sync'),
         onClick: () => {
           setSyncMenuState({
             isOpen: true,
@@ -268,7 +268,7 @@ export default function Documents({
           onBackToDocuments={() => setDocumentToView(undefined)}
         />
       ) : (
-        <DocumentChunks
+        <Chunks
           documentId={documentToView.id || ''}
           documentName={documentToView.name}
           handleGoBack={() => setDocumentToView(undefined)}
@@ -280,17 +280,17 @@ export default function Documents({
       <div className="relative flex grow flex-col">
         <div className="mb-6">
           <h2 className="text-sonic-silver text-base font-medium">
-            {t('settings.documents.title')}
+            {t('settings.sources.title')}
           </h2>
         </div>
         <div className="mb-6 flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
           <div className="w-full sm:w-auto">
             <label htmlFor="document-search-input" className="sr-only">
-              {t('settings.documents.searchPlaceholder')}
+              {t('settings.sources.searchPlaceholder')}
             </label>
             <Input
               maxLength={256}
-              placeholder={t('settings.documents.searchPlaceholder')}
+              placeholder={t('settings.sources.searchPlaceholder')}
               name="Document-search-input"
               type="text"
               id="document-search-input"
@@ -304,13 +304,13 @@ export default function Documents({
           </div>
           <button
             className="bg-purple-30 hover:bg-violets-are-blue flex h-[32px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white"
-            title={t('settings.documents.addNew')}
+            title={t('settings.sources.addNew')}
             onClick={() => {
               setIsOnboarding(false);
               setModalState('ACTIVE');
             }}
           >
-            {t('settings.documents.addNew')}
+            {t('settings.sources.addNew')}
           </button>
         </div>
         <div className="relative w-full">
@@ -322,11 +322,11 @@ export default function Documents({
             <div className="flex flex-col items-center justify-center py-12">
               <img
                 src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                alt={t('settings.documents.noData')}
+                alt={t('settings.sources.noData')}
                 className="mx-auto mb-6 h-32 w-32"
               />
               <p className="text-center text-lg text-gray-500 dark:text-gray-400">
-                {t('settings.documents.noData')}
+                {t('settings.sources.noData')}
               </p>
             </div>
           ) : (
@@ -357,7 +357,7 @@ export default function Documents({
                           >
                             {document.syncFrequency && (
                               <DropdownMenu
-                                name={t('settings.documents.sync')}
+                                name={t('settings.sources.sync')}
                                 options={syncOptions}
                                 onSelect={(value: string) => {
                                   handleManageSync(document, value);
@@ -407,7 +407,7 @@ export default function Documents({
                         </div>
                         <div className="font-inter text-[12px] leading-[18px]">
                           <span className="dark:text-bright-gray font-[400] text-[#18181B]">
-                            {t('settings.documents.tokenUsage')}:
+                            {t('settings.sources.tokenUsage')}:
                           </span>
                           <span className="ml-1 font-[400] text-[#848484] dark:text-[#848484]">
                             {document.tokens
@@ -470,7 +470,7 @@ export default function Documents({
 
       {deleteModalState === 'ACTIVE' && documentToDelete && (
         <ConfirmationModal
-          message={t('settings.documents.deleteWarning', {
+          message={t('settings.sources.deleteWarning', {
             name: documentToDelete.document.name,
           })}
           modalState={deleteModalState}
diff --git a/frontend/src/settings/index.tsx b/frontend/src/settings/index.tsx
index d96c60ea..9d51cb98 100644
--- a/frontend/src/settings/index.tsx
+++ b/frontend/src/settings/index.tsx
@@ -21,7 +21,7 @@ import {
   setSourceDocs,
 } from '../preferences/preferenceSlice';
 import Analytics from './Analytics';
-import Documents from './Documents';
+import Sources from './Sources';
 import General from './General';
 import Logs from './Logs';
 import Tools from './Tools';
@@ -38,8 +38,8 @@ export default function Settings() {
 
   const getActiveTabFromPath = () => {
     const path = location.pathname;
-    if (path.includes('/settings/documents'))
-      return t('settings.documents.label');
+    if (path.includes('/settings/sources'))
+      return t('settings.sources.label');
     if (path.includes('/settings/analytics'))
       return t('settings.analytics.label');
     if (path.includes('/settings/logs')) return t('settings.logs.label');
@@ -53,8 +53,8 @@ export default function Settings() {
   const handleTabChange = (tab: string) => {
     setActiveTab(tab);
     if (tab === t('settings.general.label')) navigate('/settings');
-    else if (tab === t('settings.documents.label'))
-      navigate('/settings/documents');
+    else if (tab === t('settings.sources.label'))
+      navigate('/settings/sources');
     else if (tab === t('settings.analytics.label'))
       navigate('/settings/analytics');
     else if (tab === t('settings.logs.label')) navigate('/settings/logs');
@@ -113,9 +113,9 @@ export default function Settings() {
       <Routes>
         <Route index element={<General />} />
         <Route
-          path="documents"
+          path="sources"
           element={
-            <Documents
+            <Sources
               paginatedDocuments={paginatedDocuments}
               handleDeleteDocument={handleDeleteClick}
             />

From e349eb28b060feb87f41a997620697fb4594d942 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 5 Aug 2025 06:31:00 +0530
Subject: [PATCH 47/57] (fix:update_chunk) data integrity, uplod back faiss

---
 application/api/user/routes.py   | 52 +++++++++++++++++++-------------
 application/vectorstore/faiss.py | 45 ++++++++++++++++++---------
 2 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index d8a19913..da7ebe07 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -3695,35 +3695,45 @@ class UpdateChunk(Resource):
             )
         try:
             store = get_vector_store(doc_id)
+
             chunks = store.get_chunks()
             existing_chunk = next((c for c in chunks if c["doc_id"] == chunk_id), None)
             if not existing_chunk:
                 return make_response(jsonify({"error": "Chunk not found"}), 404)
-            deleted = store.delete_chunk(chunk_id)
-            if not deleted:
-                return make_response(
-                    jsonify({"error": "Failed to delete existing chunk"}), 500
-                )
+
             new_text = text if text is not None else existing_chunk["text"]
-            new_metadata = (
-                metadata if metadata is not None else existing_chunk["metadata"]
-            )
 
-            if text is not None and metadata is None:
-                token_count = num_tokens_from_string(new_text)
-                new_metadata["token_count"] = token_count
+            if metadata is not None:
+                new_metadata = existing_chunk["metadata"].copy()
+                new_metadata.update(metadata)
+            else:
+                new_metadata = existing_chunk["metadata"].copy()
 
-            new_chunk_id = store.add_chunk(new_text, new_metadata)
+            if text is not None:
+                new_metadata["token_count"] = num_tokens_from_string(new_text)
 
-            return make_response(
-                jsonify(
-                    {
-                        "message": "Chunk updated successfully",
-                        "new_chunk_id": new_chunk_id,
-                    }
-                ),
-                200,
-            )
+            try:
+                new_chunk_id = store.add_chunk(new_text, new_metadata)
+
+                deleted = store.delete_chunk(chunk_id)
+                if not deleted:
+                    current_app.logger.warning(f"Failed to delete old chunk {chunk_id}, but new chunk {new_chunk_id} was created")
+
+                return make_response(
+                    jsonify(
+                        {
+                            "message": "Chunk updated successfully",
+                            "chunk_id": new_chunk_id,
+                            "original_chunk_id": chunk_id,
+                        }
+                    ),
+                    200,
+                )
+            except Exception as add_error:
+                current_app.logger.error(f"Failed to add updated chunk: {add_error}")
+                return make_response(
+                    jsonify({"error": "Failed to update chunk - addition failed"}), 500
+                )
         except Exception as e:
             current_app.logger.error(f"Error updating chunk: {e}", exc_info=True)
             return make_response(jsonify({"success": False}), 500)
diff --git a/application/vectorstore/faiss.py b/application/vectorstore/faiss.py
index b9c63cc8..3e86203b 100644
--- a/application/vectorstore/faiss.py
+++ b/application/vectorstore/faiss.py
@@ -67,25 +67,36 @@ class FaissStore(BaseVectorStore):
     def add_texts(self, *args, **kwargs):
         return self.docsearch.add_texts(*args, **kwargs)
 
-    def save_local(self, path):
+    def _save_to_storage(self):
         """
-        Save the FAISS index to disk and upload to storage.
-        
-        Args:
-            path: Path where the index should be stored
+        Save the FAISS index to storage using temporary directory pattern.
+        Works consistently for both local and S3 storage.
         """
         with tempfile.TemporaryDirectory() as temp_dir:
             self.docsearch.save_local(temp_dir)
-            
-            with open(os.path.join(temp_dir, "index.faiss"), "rb") as f_faiss:
+
+            faiss_path = os.path.join(temp_dir, "index.faiss")
+            pkl_path = os.path.join(temp_dir, "index.pkl")
+
+            with open(faiss_path, "rb") as f_faiss:
                 faiss_data = f_faiss.read()
-            
-            with open(os.path.join(temp_dir, "index.pkl"), "rb") as f_pkl:
+
+            with open(pkl_path, "rb") as f_pkl:
                 pkl_data = f_pkl.read()
-    
-            self.storage.save_file(io.BytesIO(faiss_data), f"{path}/index.faiss")
-            self.storage.save_file(io.BytesIO(pkl_data), f"{path}/index.pkl")
-        
+
+            storage_path = get_vectorstore(self.source_id)
+            self.storage.save_file(io.BytesIO(faiss_data), f"{storage_path}/index.faiss")
+            self.storage.save_file(io.BytesIO(pkl_data), f"{storage_path}/index.pkl")
+
+        return True
+
+    def save_local(self, path=None):
+        if path:
+            os.makedirs(path, exist_ok=True)
+            self.docsearch.save_local(path)
+
+        self._save_to_storage()
+
         return True
 
     def delete_index(self, *args, **kwargs):
@@ -122,13 +133,17 @@ class FaissStore(BaseVectorStore):
         return chunks
 
     def add_chunk(self, text, metadata=None):
+        """Add a new chunk and save to storage."""
         metadata = metadata or {}
         doc = Document(text=text, extra_info=metadata).to_langchain_format()
         doc_id = self.docsearch.add_documents([doc])
-        self.save_local(self.path)
+        self._save_to_storage()
         return doc_id
 
+
+
     def delete_chunk(self, chunk_id):
+        """Delete a chunk and save to storage."""
         self.delete_index([chunk_id])
-        self.save_local(self.path)
+        self._save_to_storage()
         return True

From 1356d71839f8dfab10dcf37cd44c481581b3e444 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 5 Aug 2025 15:37:39 +0530
Subject: [PATCH 48/57] (lint) ruff fix

---
 application/api/answer/routes/stream.py | 2 +-
 application/api/internal/routes.py      | 2 +-
 application/api/user/routes.py          | 3 +--
 application/parser/file/bulk.py         | 2 +-
 application/storage/local.py            | 2 +-
 5 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/application/api/answer/routes/stream.py b/application/api/answer/routes/stream.py
index ad74dfd6..3fee3f5b 100644
--- a/application/api/answer/routes/stream.py
+++ b/application/api/answer/routes/stream.py
@@ -1,7 +1,7 @@
 import logging
 import traceback
 
-from flask import make_response, request, Response
+from flask import request, Response
 from flask_restx import fields, Resource
 
 from application.api import api
diff --git a/application/api/internal/routes.py b/application/api/internal/routes.py
index 89531703..f0c2950e 100755
--- a/application/api/internal/routes.py
+++ b/application/api/internal/routes.py
@@ -55,7 +55,7 @@ def upload_index_files():
     if directory_structure:
         try:
             directory_structure = json.loads(directory_structure)
-        except:
+        except Exception:
             logger.error("Error parsing directory_structure")
             directory_structure = {}
     else:
diff --git a/application/api/user/routes.py b/application/api/user/routes.py
index 90857043..1566a98b 100644
--- a/application/api/user/routes.py
+++ b/application/api/user/routes.py
@@ -3,7 +3,6 @@ import json
 import math
 import os
 import secrets
-import shutil
 import uuid
 from functools import wraps
 from typing import Optional, Tuple
@@ -735,7 +734,7 @@ class ManageSourceFiles(Resource):
 
                 try:
                     file_paths = json.loads(file_paths_str) if isinstance(file_paths_str, str) else file_paths_str
-                except:
+                except Exception:
                     return make_response(
                         jsonify({"success": False, "message": "Invalid file_paths format"}), 400
                     )
diff --git a/application/parser/file/bulk.py b/application/parser/file/bulk.py
index 978ec87c..c8f2234a 100644
--- a/application/parser/file/bulk.py
+++ b/application/parser/file/bulk.py
@@ -197,7 +197,7 @@ class SimpleDirectoryReader(BaseReader):
         # Build directory structure if input_dir is provided
         if hasattr(self, 'input_dir'):
             self.directory_structure = self.build_directory_structure(self.input_dir)
-            logging.info(f"Directory structure built successfully")
+            logging.info("Directory structure built successfully")
         else:
             self.directory_structure = {}
 
diff --git a/application/storage/local.py b/application/storage/local.py
index 89b49bee..cf0ebcb8 100644
--- a/application/storage/local.py
+++ b/application/storage/local.py
@@ -136,5 +136,5 @@ class LocalStorage(BaseStorage):
         try:
             shutil.rmtree(full_path)
             return True
-        except (OSError, PermissionError) as e:
+        except (OSError, PermissionError):
             return False

From ba260e338213f66575dd600068b5ef8f89a90326 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 6 Aug 2025 02:53:39 +0530
Subject: [PATCH 49/57] (fix:faiss) not save tmp dir

---
 application/parser/embedding_pipeline.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/application/parser/embedding_pipeline.py b/application/parser/embedding_pipeline.py
index 87d9a8d5..38492c7c 100755
--- a/application/parser/embedding_pipeline.py
+++ b/application/parser/embedding_pipeline.py
@@ -46,7 +46,7 @@ def embed_and_store_documents(docs, folder_name, source_id, task_status):
         store = VectorCreator.create_vectorstore(
             settings.VECTOR_STORE,
             docs_init=docs_init,
-            source_id=folder_name,
+            source_id=source_id,
             embeddings_key=os.getenv("EMBEDDINGS_KEY"),
         )
     else:

From ae116b0d0d31d1e1eea4f2c408b79edc78222674 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 6 Aug 2025 02:55:39 +0530
Subject: [PATCH 50/57] (fix:agentPreview) build err

---
 frontend/src/agents/agentPreviewSlice.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/agents/agentPreviewSlice.ts b/frontend/src/agents/agentPreviewSlice.ts
index c6e628f6..c69e1219 100644
--- a/frontend/src/agents/agentPreviewSlice.ts
+++ b/frontend/src/agents/agentPreviewSlice.ts
@@ -57,12 +57,11 @@ export const fetchPreviewAnswer = createAsyncThunk<
           signal,
           state.preference.token,
           state.preference.selectedDocs!,
-          state.agentPreview.queries,
           null, // No conversation ID for previews
           state.preference.prompt.id,
           state.preference.chunks,
           state.preference.token_limit,
-          (event) => {
+          (event: MessageEvent) => {
             const data = JSON.parse(event.data);
             const targetIndex = indx ?? state.agentPreview.queries.length - 1;
 
@@ -118,7 +117,6 @@ export const fetchPreviewAnswer = createAsyncThunk<
           signal,
           state.preference.token,
           state.preference.selectedDocs!,
-          state.agentPreview.queries,
           null, // No conversation ID for previews
           state.preference.prompt.id,
           state.preference.chunks,

From 0a8cdbd7f1c3034c4c964094288edbf416190860 Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Wed, 6 Aug 2025 12:44:21 +0100
Subject: [PATCH 51/57] fix: update token selector in FileTreeComponent

---
 frontend/src/components/FileTreeComponent.tsx | 327 ++++++++++++------
 1 file changed, 215 insertions(+), 112 deletions(-)

diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index 19cf006b..e0f06663 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import { selectToken } from '../preferences/preferenceSlice';
 import Chunks from './Chunks';
 import ContextMenu, { MenuOption } from './ContextMenu';
 import userService from '../api/services/userService';
@@ -49,7 +50,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   const [directoryStructure, setDirectoryStructure] =
     useState<DirectoryStructure | null>(null);
   const [currentPath, setCurrentPath] = useState<string[]>([]);
-  const token = useSelector((state: any) => state.auth?.token);
+  const token = useSelector(selectToken);
   const [activeMenuId, setActiveMenuId] = useState<string | null>(null);
   const menuRefs = useRef<{
     [key: string]: React.RefObject<HTMLDivElement | null>;
@@ -61,10 +62,17 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
   const searchDropdownRef = useRef<HTMLDivElement>(null);
-  const currentOpRef = useRef<null | 'add' | 'remove' | 'remove_directory'>(null);
+  const currentOpRef = useRef<null | 'add' | 'remove' | 'remove_directory'>(
+    null,
+  );
 
-  const [deleteModalState, setDeleteModalState] = useState<'ACTIVE' | 'INACTIVE'>('INACTIVE');
-  const [itemToDelete, setItemToDelete] = useState<{ name: string; isFile: boolean } | null>(null);
+  const [deleteModalState, setDeleteModalState] = useState<
+    'ACTIVE' | 'INACTIVE'
+  >('INACTIVE');
+  const [itemToDelete, setItemToDelete] = useState<{
+    name: string;
+    isFile: boolean;
+  } | null>(null);
 
   type QueuedOperation = {
     operation: 'add' | 'remove' | 'remove_directory';
@@ -84,7 +92,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
       setSearchResults([]);
     },
     [],
-    false
+    false,
   );
 
   const handleFileClick = (fileName: string) => {
@@ -144,7 +152,10 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
       try {
         structure = JSON.parse(structure);
       } catch (e) {
-        console.error('Error parsing directory structure in getCurrentDirectory:', e);
+        console.error(
+          'Error parsing directory structure in getCurrentDirectory:',
+          e,
+        );
         return {};
       }
     }
@@ -155,7 +166,11 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
 
     let current: any = structure;
     for (const dir of currentPath) {
-      if (current[dir] && typeof current[dir] === 'object' && !current[dir].type) {
+      if (
+        current[dir] &&
+        typeof current[dir] === 'object' &&
+        !current[dir].type
+      ) {
         current = current[dir];
       } else {
         return {};
@@ -231,13 +246,13 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
 
     return options;
   };
-  
+
   const confirmDeleteItem = (name: string, isFile: boolean) => {
     setItemToDelete({ name, isFile });
     setDeleteModalState('ACTIVE');
-    setActiveMenuId(null); 
+    setActiveMenuId(null);
   };
-  
+
   const handleConfirmedDelete = async () => {
     if (itemToDelete) {
       await handleDeleteFile(itemToDelete.name, itemToDelete.isFile);
@@ -245,12 +260,12 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
       setItemToDelete(null);
     }
   };
-  
+
   const handleCancelDelete = () => {
     setDeleteModalState('INACTIVE');
     setItemToDelete(null);
   };
-  
+
   const manageSource = async (
     operation: 'add' | 'remove' | 'remove_directory',
     files?: File[] | null,
@@ -277,36 +292,48 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
       } else if (operation === 'remove_directory' && directoryPath) {
         formData.append('directory_path', directoryPath);
       }
-      
+
       const response = await userService.manageSourceFiles(formData, token);
       const result = await response.json();
-      
+
       if (result.success && result.reingest_task_id) {
         if (operation === 'add') {
           console.log('Files uploaded successfully:', result.added_files);
         } else if (operation === 'remove') {
           console.log('Files deleted successfully:', result.removed_files);
         } else if (operation === 'remove_directory') {
-          console.log('Directory deleted successfully:', result.removed_directory);
+          console.log(
+            'Directory deleted successfully:',
+            result.removed_directory,
+          );
         }
         console.log('Reingest task started:', result.reingest_task_id);
-        
+
         const maxAttempts = 30;
         const pollInterval = 2000;
-        
+
         for (let attempt = 0; attempt < maxAttempts; attempt++) {
           try {
-            const statusResponse = await userService.getTaskStatus(result.reingest_task_id, token);
+            const statusResponse = await userService.getTaskStatus(
+              result.reingest_task_id,
+              token,
+            );
             const statusData = await statusResponse.json();
-            
-            console.log(`Task status (attempt ${attempt + 1}):`, statusData.status);
-            
+
+            console.log(
+              `Task status (attempt ${attempt + 1}):`,
+              statusData.status,
+            );
+
             if (statusData.status === 'SUCCESS') {
               console.log('Task completed successfully');
-              
-              const structureResponse = await userService.getDirectoryStructure(docId, token);
+
+              const structureResponse = await userService.getDirectoryStructure(
+                docId,
+                token,
+              );
               const structureData = await structureResponse.json();
-              
+
               if (structureData && structureData.directory_structure) {
                 setDirectoryStructure(structureData.directory_structure);
                 currentOpRef.current = null;
@@ -317,19 +344,31 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               console.error('Task failed');
               break;
             }
-            
-            await new Promise(resolve => setTimeout(resolve, pollInterval));
+
+            await new Promise((resolve) => setTimeout(resolve, pollInterval));
           } catch (error) {
             console.error('Error polling task status:', error);
             break;
           }
         }
       } else {
-        throw new Error(`Failed to ${operation} ${operation === 'remove_directory' ? 'directory' : 'file(s)'}`);
+        throw new Error(
+          `Failed to ${operation} ${operation === 'remove_directory' ? 'directory' : 'file(s)'}`,
+        );
       }
     } catch (error) {
-      const actionText = operation === 'add' ? 'uploading' : operation === 'remove_directory' ? 'deleting directory' : 'deleting file(s)';
-      const errorText = operation === 'add' ? 'upload' : operation === 'remove_directory' ? 'delete directory' : 'delete file(s)';
+      const actionText =
+        operation === 'add'
+          ? 'uploading'
+          : operation === 'remove_directory'
+            ? 'deleting directory'
+            : 'deleting file(s)';
+      const errorText =
+        operation === 'add'
+          ? 'upload'
+          : operation === 'remove_directory'
+            ? 'delete directory'
+            : 'delete file(s)';
       console.error(`Error ${actionText}:`, error);
       setError(`Failed to ${errorText}`);
     } finally {
@@ -371,13 +410,18 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     const fileInput = document.createElement('input');
     fileInput.type = 'file';
     fileInput.multiple = true;
-    fileInput.accept = '.rst,.md,.pdf,.txt,.docx,.csv,.epub,.html,.mdx,.json,.xlsx,.pptx,.png,.jpg,.jpeg';
+    fileInput.accept =
+      '.rst,.md,.pdf,.txt,.docx,.csv,.epub,.html,.mdx,.json,.xlsx,.pptx,.png,.jpg,.jpeg';
 
     fileInput.onchange = async (event) => {
       const fileList = (event.target as HTMLInputElement).files;
       if (!fileList || fileList.length === 0) return;
       const files = Array.from(fileList);
-      enqueueOperation({ operation: 'add', files, parentDirPath: currentPath.join('/') });
+      enqueueOperation({
+        operation: 'add',
+        files,
+        parentDirPath: currentPath.join('/'),
+      });
     };
 
     fileInput.click();
@@ -390,14 +434,17 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     if (isFile) {
       enqueueOperation({ operation: 'remove', filePath: itemPath });
     } else {
-      enqueueOperation({ operation: 'remove_directory', directoryPath: itemPath });
+      enqueueOperation({
+        operation: 'remove_directory',
+        directoryPath: itemPath,
+      });
     }
   };
 
   const renderPathNavigation = () => {
     return (
-      <div className="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm gap-3">
-        <div className="flex items-center w-full sm:w-auto">
+      <div className="mb-4 flex flex-col gap-3 text-sm sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex w-full items-center sm:w-auto">
           <button
             className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
             onClick={handleBackNavigation}
@@ -405,19 +452,27 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
           </button>
 
-          <div className="flex items-center flex-wrap">
-            <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5 flex-shrink-0" />
-            <span className="text-purple-30 font-medium break-words">{sourceName}</span>
+          <div className="flex flex-wrap items-center">
+            <img
+              src={OutlineSource}
+              alt="source"
+              className="mr-2 h-5 w-5 flex-shrink-0"
+            />
+            <span className="text-purple-30 font-medium break-words">
+              {sourceName}
+            </span>
             {currentPath.length > 0 && (
               <>
-                <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
+                <span className="mx-1 flex-shrink-0 text-gray-500">/</span>
                 {currentPath.map((dir, index) => (
                   <React.Fragment key={index}>
-                    <span className="text-gray-700 dark:text-gray-300 break-words">
+                    <span className="break-words text-gray-700 dark:text-gray-300">
                       {dir}
                     </span>
                     {index < currentPath.length - 1 && (
-                      <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
+                      <span className="mx-1 flex-shrink-0 text-gray-500">
+                        /
+                      </span>
                     )}
                   </React.Fragment>
                 ))}
@@ -425,8 +480,8 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
             )}
             {selectedFile && (
               <>
-                <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
-                <span className="text-gray-700 dark:text-gray-300 break-words">
+                <span className="mx-1 flex-shrink-0 text-gray-500">/</span>
+                <span className="break-words text-gray-700 dark:text-gray-300">
                   {selectedFile.name}
                 </span>
               </>
@@ -435,17 +490,29 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
         </div>
 
         {!selectedFile && (
-          <div className="flex items-center gap-2 w-full sm:w-auto">
+          <div className="flex w-full items-center gap-2 sm:w-auto">
             {(processingRef.current || queueLength > 0) && (
               <span className="text-xs text-gray-600 dark:text-gray-400">
-                {processingRef.current ? (currentOpRef.current === 'add' ? 'Uploading…' : 'Deleting…') : null}
-                {queueLength > 0 ? `${processingRef.current ? ' • ' : ''}Queued: ${queueLength}` : ''}
+                {processingRef.current
+                  ? currentOpRef.current === 'add'
+                    ? 'Uploading…'
+                    : 'Deleting…'
+                  : null}
+                {queueLength > 0
+                  ? `${processingRef.current ? ' • ' : ''}Queued: ${queueLength}`
+                  : ''}
               </span>
             )}
             <button
               onClick={handleAddFile}
-              className="bg-purple-30 hover:bg-violets-are-blue flex h-[32px] w-full sm:w-auto min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white"
-              title={processingRef.current ? (currentOpRef.current === 'add' ? 'Uploading files...' : 'Deleting...') : 'Add file'}
+              className="bg-purple-30 hover:bg-violets-are-blue flex h-[32px] w-full min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white sm:w-auto"
+              title={
+                processingRef.current
+                  ? currentOpRef.current === 'add'
+                    ? 'Uploading files...'
+                    : 'Deleting...'
+                  : 'Add file'
+              }
             >
               Add file
             </button>
@@ -487,26 +554,32 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     const parentRow =
       currentPath.length > 0
         ? [
-          <tr
-            key="parent-dir"
-            className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
-            onClick={navigateUp}
-          >
-            <td className="px-2 lg:px-4 py-2">
-              <div className="flex items-center">
-                <img
-                  src={FolderIcon}
-                  alt={t('settings.sources.parentFolderAlt')}
-                  className="mr-2 h-4 w-4 flex-shrink-0"
-                />
-                <span className="text-sm dark:text-[#E0E0E0] truncate">..</span>
-              </div>
-            </td>
-            <td className="px-2 lg:px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
-            <td className="px-2 lg:px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
-            <td className="w-10 px-2 lg:px-4 py-2 text-sm"></td>
-          </tr>,
-        ]
+            <tr
+              key="parent-dir"
+              className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
+              onClick={navigateUp}
+            >
+              <td className="px-2 py-2 lg:px-4">
+                <div className="flex items-center">
+                  <img
+                    src={FolderIcon}
+                    alt={t('settings.sources.parentFolderAlt')}
+                    className="mr-2 h-4 w-4 flex-shrink-0"
+                  />
+                  <span className="truncate text-sm dark:text-[#E0E0E0]">
+                    ..
+                  </span>
+                </div>
+              </td>
+              <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
+                -
+              </td>
+              <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
+                -
+              </td>
+              <td className="w-10 px-2 py-2 text-sm lg:px-4"></td>
+            </tr>,
+          ]
         : [];
 
     // Render directories first, then files
@@ -523,21 +596,27 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
             className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
             onClick={() => navigateToDirectory(name)}
           >
-            <td className="px-2 lg:px-4 py-2">
-              <div className="flex items-center min-w-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>
+            <td className="px-2 py-2 lg:px-4">
+              <div className="flex min-w-0 items-center">
+                <img
+                  src={FolderIcon}
+                  alt={t('settings.sources.folderAlt')}
+                  className="mr-2 h-4 w-4 flex-shrink-0"
+                />
+                <span className="truncate text-sm dark:text-[#E0E0E0]">
+                  {name}
+                </span>
               </div>
             </td>
-            <td className="px-2 lg:px-4 py-2 text-sm dark:text-[#E0E0E0]">
+            <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
               {dirStats.totalTokens > 0
                 ? dirStats.totalTokens.toLocaleString()
                 : '-'}
             </td>
-            <td className="px-2 lg:px-4 py-2 text-sm dark:text-[#E0E0E0]">
+            <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
               {dirStats.totalSize > 0 ? formatBytes(dirStats.totalSize) : '-'}
             </td>
-            <td className="w-10 px-2 lg:px-4 py-2 text-sm">
+            <td className="w-10 px-2 py-2 text-sm lg:px-4">
               <div ref={menuRef} className="relative">
                 <button
                   onClick={(e) => handleMenuClick(e, itemId)}
@@ -575,19 +654,25 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
             className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
             onClick={() => handleFileClick(name)}
           >
-            <td className="px-2 lg:px-4 py-2">
-              <div className="flex items-center min-w-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>
+            <td className="px-2 py-2 lg:px-4">
+              <div className="flex min-w-0 items-center">
+                <img
+                  src={FileIcon}
+                  alt={t('settings.sources.fileAlt')}
+                  className="mr-2 h-4 w-4 flex-shrink-0"
+                />
+                <span className="truncate text-sm dark:text-[#E0E0E0]">
+                  {name}
+                </span>
               </div>
             </td>
-            <td className="px-2 lg:px-4 py-2 text-sm dark:text-[#E0E0E0]">
+            <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
               {node.token_count?.toLocaleString() || '-'}
             </td>
-            <td className="px-2 md:px-4 py-2 text-sm dark:text-[#E0E0E0]">
+            <td className="px-2 py-2 text-sm md:px-4 dark:text-[#E0E0E0]">
               {node.size_bytes ? formatBytes(node.size_bytes) : '-'}
             </td>
-            <td className="w-10 px-2 lg:px-4 py-2 text-sm">
+            <td className="w-10 px-2 py-2 text-sm lg:px-4">
               <div ref={menuRef} className="relative">
                 <button
                   onClick={(e) => handleMenuClick(e, itemId)}
@@ -619,7 +704,11 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   };
   const currentDirectory = getCurrentDirectory();
 
-  const searchFiles = (query: string, structure: DirectoryStructure, currentPath: string[] = []): SearchResult[] => {
+  const searchFiles = (
+    query: string,
+    structure: DirectoryStructure,
+    currentPath: string[] = [],
+  ): SearchResult[] => {
     let results: SearchResult[] = [];
 
     Object.entries(structure).forEach(([name, node]) => {
@@ -629,29 +718,34 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
         results.push({
           name,
           path: fullPath,
-          isFile: !!node.type
+          isFile: !!node.type,
         });
       }
 
       if (!node.type) {
         // If it's a directory, search recursively
-        results = [...results, ...searchFiles(query, node as DirectoryStructure, [...currentPath, name])];
+        results = [
+          ...results,
+          ...searchFiles(query, node as DirectoryStructure, [
+            ...currentPath,
+            name,
+          ]),
+        ];
       }
     });
 
     return results;
   };
 
-
   const handleSearchSelect = (result: SearchResult) => {
     if (result.isFile) {
       const pathParts = result.path.split('/');
       const fileName = pathParts.pop() || '';
       setCurrentPath(pathParts);
-      
+
       setSelectedFile({
         id: result.path,
-        name: fileName
+        name: fileName,
       });
     } else {
       setCurrentPath(result.path.split('/'));
@@ -670,25 +764,29 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
             onChange={(e) => {
               setSearchQuery(e.target.value);
               if (directoryStructure) {
-                setSearchResults(searchFiles(e.target.value, directoryStructure));
+                setSearchResults(
+                  searchFiles(e.target.value, directoryStructure),
+                );
               }
             }}
             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`}
+            className={`w-full border border-[#D1D9E0] px-4 py-2 pl-10 dark:border-[#6A6A6A] ${
+              searchQuery
+                ? 'rounded-t-md rounded-b-none border-b-0'
+                : 'rounded-md'
+            } bg-transparent focus:outline-none dark:text-[#E0E0E0]`}
           />
 
           <img
             src={SearchIcon}
             alt="Search"
-            className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 opacity-60"
+            className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform opacity-60"
           />
 
           {searchQuery && (
-            <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">
+            <div className="absolute z-10 max-h-[calc(100vh-200px)] w-full overflow-y-auto rounded-b-md border border-[#D1D9E0] bg-white shadow-lg dark:border-[#6A6A6A] dark:bg-[#1F2023]">
               {searchResults.length === 0 ? (
-                <div className="text-sm text-gray-500 dark:text-gray-400 text-center py-2">
+                <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
                   {t('settings.sources.noResults')}
                 </div>
               ) : (
@@ -697,14 +795,20 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                     key={index}
                     onClick={() => handleSearchSelect(result)}
                     title={result.path}
-                    className={`flex items-center px-3 py-2 cursor-pointer hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${
-                      index !== searchResults.length - 1 ? "border-b border-[#D1D9E0] dark:border-[#6A6A6A]" : ""
+                    className={`flex cursor-pointer items-center px-3 py-2 hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${
+                      index !== searchResults.length - 1
+                        ? 'border-b border-[#D1D9E0] dark:border-[#6A6A6A]'
+                        : ''
                     }`}
                   >
                     <img
                       src={result.isFile ? FileIcon : FolderIcon}
-                      alt={result.isFile ? t('settings.sources.fileAlt') : t('settings.sources.folderAlt')}
-                      className="flex-shrink-0 w-4 h-4 mr-2"
+                      alt={
+                        result.isFile
+                          ? t('settings.sources.fileAlt')
+                          : t('settings.sources.folderAlt')
+                      }
+                      className="mr-2 h-4 w-4 flex-shrink-0"
                     />
                     <span className="text-sm dark:text-[#E0E0E0]">
                       {result.path.split('/').pop() || result.path}
@@ -734,34 +838,34 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           </div>
         </div>
       ) : (
-        <div className="flex flex-col w-full max-w-full overflow-hidden">
-          <div className="mb-4">
-            {renderPathNavigation()}
-          </div>
+        <div className="flex w-full max-w-full flex-col overflow-hidden">
+          <div className="mb-4">{renderPathNavigation()}</div>
 
-          <div className="flex gap-4 min-w-0">
+          <div className="flex min-w-0 gap-4">
             {/* Left side: Search dropdown */}
-            <div className="hidden lg:block flex-shrink-0">
+            <div className="hidden flex-shrink-0 lg:block">
               {renderFileSearch()}
             </div>
 
             {/* Right side: File table */}
-            <div className="flex-1 min-w-0">
+            <div className="min-w-0 flex-1">
               <div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
-                <table className="w-full table-auto bg-transparent min-w-[600px]">
+                <table className="w-full min-w-[600px] table-auto bg-transparent">
                   <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]">
+                      <th className="min-w-[200px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
                         {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]">
+                      <th className="min-w-[80px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
                         {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]">
+                      <th className="min-w-[80px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
                         {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.sources.actions')}</span>
+                      <th className="w-[60px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
+                        <span className="sr-only">
+                          {t('settings.sources.actions')}
+                        </span>
                       </th>
                     </tr>
                   </thead>
@@ -792,4 +896,3 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
 };
 
 export default FileTreeComponent;
-

From fdae2357424275a017a2edf8ff8ca9a28370f087 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 7 Aug 2025 12:53:12 +0530
Subject: [PATCH 52/57] (feat:sources) i18n

---
 frontend/src/components/FileTreeComponent.tsx | 22 +++++++++----------
 frontend/src/locale/en.json                   | 11 ++++++++--
 frontend/src/locale/es.json                   | 10 ++++++++-
 frontend/src/locale/jp.json                   | 10 ++++++++-
 frontend/src/locale/ru.json                   | 10 ++++++++-
 frontend/src/locale/zh-TW.json                | 10 ++++++++-
 frontend/src/locale/zh.json                   | 10 ++++++++-
 frontend/src/settings/Sources.tsx             |  4 ++--
 8 files changed, 67 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index e0f06663..cbd78277 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -495,11 +495,11 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               <span className="text-xs text-gray-600 dark:text-gray-400">
                 {processingRef.current
                   ? currentOpRef.current === 'add'
-                    ? 'Uploading…'
-                    : 'Deleting…'
+                    ? t('settings.sources.uploading')
+                    : t('settings.sources.deleting')
                   : null}
                 {queueLength > 0
-                  ? `${processingRef.current ? ' • ' : ''}Queued: ${queueLength}`
+                  ? `${processingRef.current ? ' • ' : ''}${t('settings.sources.queued', { count: queueLength })}`
                   : ''}
               </span>
             )}
@@ -509,12 +509,12 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               title={
                 processingRef.current
                   ? currentOpRef.current === 'add'
-                    ? 'Uploading files...'
-                    : 'Deleting...'
-                  : 'Add file'
+                    ? t('settings.sources.uploadingFilesTitle')
+                    : t('settings.sources.deletingTitle')
+                  : t('settings.sources.addFile')
               }
             >
-              Add file
+              {t('settings.sources.addFile')}
             </button>
           </div>
         )}
@@ -621,7 +621,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                 <button
                   onClick={(e) => handleMenuClick(e, itemId)}
                   className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E]"
-                  aria-label="Open menu"
+                  aria-label={t('settings.sources.menuAlt')}
                 >
                   <img
                     src={ThreeDots}
@@ -677,7 +677,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                 <button
                   onClick={(e) => handleMenuClick(e, itemId)}
                   className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E]"
-                  aria-label="Open menu"
+                  aria-label={t('settings.sources.menuAlt')}
                 >
                   <img
                     src={ThreeDots}
@@ -779,7 +779,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
 
           <img
             src={SearchIcon}
-            alt="Search"
+            alt={t('settings.sources.searchAlt')}
             className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform opacity-60"
           />
 
@@ -882,7 +882,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
         message={
           itemToDelete?.isFile
             ? t('settings.sources.confirmDelete')
-            : `Are you sure you want to delete the directory "${itemToDelete?.name}" and all its contents? This action cannot be undone.`
+            : t('settings.sources.deleteDirectoryWarning', { name: itemToDelete?.name })
         }
         modalState={deleteModalState}
         setModalState={setDeleteModalState}
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 5c2938cb..1f606339 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -90,9 +90,16 @@
       "folderAlt": "Folder",
       "parentFolderAlt": "Parent folder",
       "menuAlt": "Menu",
-      "menuAlt": "Menu",
       "tokensUnit": "tokens",
-      "editAlt": "Edit"
+      "editAlt": "Edit",
+      "uploading": "Uploading…",
+      "deleting": "Deleting…",
+      "queued": "Queued: {{count}}",
+      "addFile": "Add file",
+      "uploadingFilesTitle": "Uploading files...",
+      "deletingTitle": "Deleting...",
+      "deleteDirectoryWarning": "Are you sure you want to delete the directory \"{{name}}\" and all its contents? This action cannot be undone.",
+      "searchAlt": "Search"
     },
     "apiKeys": {
       "label": "Chatbots",
diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
index 611f3b08..3fe05bc1 100644
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -91,7 +91,15 @@
       "parentFolderAlt": "Carpeta padre",
       "menuAlt": "Menú",
       "tokensUnit": "tokens",
-      "editAlt": "Editar"
+      "editAlt": "Editar",
+      "uploading": "Subiendo…",
+      "deleting": "Eliminando…",
+      "queued": "En cola: {{count}}",
+      "addFile": "Añadir archivo",
+      "uploadingFilesTitle": "Subiendo archivos...",
+      "deletingTitle": "Eliminando...",
+      "deleteDirectoryWarning": "¿Está seguro de que desea eliminar el directorio \"{{name}}\" y todo su contenido? Esta acción no se puede deshacer.",
+      "searchAlt": "Buscar"
     },
     "apiKeys": {
       "label": "Chatbots",
diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index 5a08cd2d..2092231b 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -91,7 +91,15 @@
       "parentFolderAlt": "親フォルダ",
       "menuAlt": "メニュー",
       "tokensUnit": "トークン",
-      "editAlt": "編集"
+      "editAlt": "編集",
+      "uploading": "アップロード中…",
+      "deleting": "削除中…",
+      "queued": "キュー: {{count}}",
+      "addFile": "ファイルを追加",
+      "uploadingFilesTitle": "ファイルをアップロード中...",
+      "deletingTitle": "削除中...",
+      "deleteDirectoryWarning": "ディレクトリ \"{{name}}\" とその内容をすべて削除してもよろしいですか？この操作は元に戻せません。",
+      "searchAlt": "検索"
     },
     "apiKeys": {
       "label": "チャットボット",
diff --git a/frontend/src/locale/ru.json b/frontend/src/locale/ru.json
index 0fd7c845..30d7a435 100644
--- a/frontend/src/locale/ru.json
+++ b/frontend/src/locale/ru.json
@@ -91,7 +91,15 @@
       "parentFolderAlt": "Родительская папка",
       "menuAlt": "Меню",
       "tokensUnit": "токенов",
-      "editAlt": "Редактировать"
+      "editAlt": "Редактировать",
+      "uploading": "Загрузка…",
+      "deleting": "Удаление…",
+      "queued": "В очереди: {{count}}",
+      "addFile": "Добавить файл",
+      "uploadingFilesTitle": "Загрузка файлов...",
+      "deletingTitle": "Удаление...",
+      "deleteDirectoryWarning": "Вы уверены, что хотите удалить каталог \"{{name}}\" и все его содержимое? Это действие нельзя отменить.",
+      "searchAlt": "Поиск"
     },
     "apiKeys": {
       "label": "API ключи",
diff --git a/frontend/src/locale/zh-TW.json b/frontend/src/locale/zh-TW.json
index d364d6fb..a893a716 100644
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -91,7 +91,15 @@
       "parentFolderAlt": "上層資料夾",
       "menuAlt": "選單",
       "tokensUnit": "Token",
-      "editAlt": "編輯"
+      "editAlt": "編輯",
+      "uploading": "正在上傳…",
+      "deleting": "正在刪除…",
+      "queued": "已排隊：{{count}}",
+      "addFile": "新增檔案",
+      "uploadingFilesTitle": "正在上傳檔案...",
+      "deletingTitle": "正在刪除...",
+      "deleteDirectoryWarning": "您確定要刪除目錄 \"{{name}}\" 及其所有內容嗎？此操作無法復原。",
+      "searchAlt": "搜尋"
     },
     "apiKeys": {
       "label": "聊天機器人",
diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
index 4c33a320..70a163fa 100644
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -91,7 +91,15 @@
       "parentFolderAlt": "父文件夹",
       "menuAlt": "菜单",
       "tokensUnit": "令牌",
-      "editAlt": "编辑"
+      "editAlt": "编辑",
+      "uploading": "正在上传…",
+      "deleting": "正在删除…",
+      "queued": "已排队：{{count}}",
+      "addFile": "添加文件",
+      "uploadingFilesTitle": "正在上传文件...",
+      "deletingTitle": "正在删除...",
+      "deleteDirectoryWarning": "确定要删除目录 \"{{name}}\" 及其所有内容吗？此操作无法撤销。",
+      "searchAlt": "搜索"
     },
     "apiKeys": {
       "label": "聊天机器人",
diff --git a/frontend/src/settings/Sources.tsx b/frontend/src/settings/Sources.tsx
index eece44e3..e2302a4e 100644
--- a/frontend/src/settings/Sources.tsx
+++ b/frontend/src/settings/Sources.tsx
@@ -388,12 +388,12 @@ export default function Sources({
                                 handleMenuClick(e, docId);
                               }}
                               className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E]"
-                              aria-label="Open menu"
+                              aria-label={t('settings.sources.menuAlt')}
                               data-testid={`menu-button-${docId}`}
                             >
                               <img
                                 src={ThreeDots}
-                                alt={t('Open menu')}
+                                alt={t('settings.sources.menuAlt')}
                                 className="opacity-60 hover:opacity-100"
                               />
                             </button>

From 9be128a963e24f47bc8216c2f2e2a02afc1b6cc9 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 12 Aug 2025 03:08:47 +0530
Subject: [PATCH 53/57] (feat:sources) closer to figma,ux

---
 frontend/src/components/Chunks.tsx            | 181 +++++++++++---
 frontend/src/components/FileTreeComponent.tsx | 233 +++++++++---------
 frontend/src/locale/en.json                   |   4 +-
 frontend/src/locale/es.json                   |   4 +-
 frontend/src/locale/jp.json                   |   4 +-
 frontend/src/locale/ru.json                   |   4 +-
 frontend/src/locale/zh-TW.json                |   4 +-
 frontend/src/locale/zh.json                   |   4 +-
 frontend/src/settings/Sources.tsx             |   2 +-
 9 files changed, 278 insertions(+), 162 deletions(-)

diff --git a/frontend/src/components/Chunks.tsx b/frontend/src/components/Chunks.tsx
index 0800cfa0..b7d97080 100644
--- a/frontend/src/components/Chunks.tsx
+++ b/frontend/src/components/Chunks.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { selectToken } from '../preferences/preferenceSlice';
-import { useDarkTheme, useLoaderState, useMediaQuery } from '../hooks';
+import { useDarkTheme, useLoaderState, useMediaQuery, useOutsideAlerter } from '../hooks';
 import userService from '../api/services/userService';
 import ArrowLeft from '../assets/arrow-left.svg';
 import NoFilesIcon from '../assets/no-files.svg';
@@ -13,7 +13,9 @@ import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState } from '../models/misc';
 import { ChunkType } from '../settings/types';
 import Pagination from './DocumentPagination';
-
+import FileIcon from '../assets/file.svg';
+import FolderIcon from '../assets/folder.svg';
+import SearchIcon from '../assets/search.svg';
 interface LineNumberedTextareaProps {
   value: string;
   onChange: (value: string) => void;
@@ -21,6 +23,7 @@ interface LineNumberedTextareaProps {
   ariaLabel?: string;
   className?: string;
   editable?: boolean;
+  onDoubleClick?: () => void;
 }
 
 const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
@@ -29,7 +32,8 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
   placeholder,
   ariaLabel,
   className = '',
-  editable = true
+  editable = true,
+  onDoubleClick
 }) => {
   const { isMobile } = useMediaQuery();
 
@@ -62,9 +66,10 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
         ))}
       </div>
       <textarea
-        className={`w-full resize-none bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] outline-none border-none pl-8 lg:pl-12 overflow-hidden ${isMobile ? 'min-h-[calc(100vh-200px)]' : 'min-h-[calc(100vh-300px)]'}`}
+        className={`w-full resize-none bg-transparent dark:text-white font-['Inter'] text-[13.68px] leading-[19.93px] text-[#18181B] outline-none border-none pl-8 lg:pl-12 overflow-hidden ${isMobile ? 'min-h-[calc(100vh-200px)]' : 'min-h-[calc(100vh-300px)]'} ${!editable ? 'select-none' : ''}`}
         value={value}
         onChange={editable ? handleChange : undefined}
+        onDoubleClick={onDoubleClick}
         placeholder={placeholder}
         aria-label={ariaLabel}
         rows={totalLines}
@@ -77,12 +82,18 @@ const LineNumberedTextarea: React.FC<LineNumberedTextareaProps> = ({
   );
 };
 
+interface SearchResult {
+  path: string;
+  isFile: boolean;
+}
+
 interface ChunksProps {
   documentId: string;
   documentName?: string;
   handleGoBack: () => void;
   path?: string;
-  renderFileSearch?: () => React.ReactNode;
+  onFileSearch?: (query: string) => SearchResult[];
+  onFileSelect?: (path: string) => void;
 }
 
 const Chunks: React.FC<ChunksProps> = ({
@@ -90,8 +101,12 @@ const Chunks: React.FC<ChunksProps> = ({
   documentName,
   handleGoBack,
   path,
-  renderFileSearch
+  onFileSearch,
+  onFileSelect,
 }) => {
+  const [fileSearchQuery, setFileSearchQuery] = useState('');
+  const [fileSearchResults, setFileSearchResults] = useState<SearchResult[]>([]);
+  const searchDropdownRef = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
   const token = useSelector(selectToken);
   const [isDarkTheme] = useDarkTheme();
@@ -269,18 +284,18 @@ const Chunks: React.FC<ChunksProps> = ({
 
   const renderPathNavigation = () => {
     return (
-      <div className="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm gap-2">
+      <div className="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between text-base gap-2">
         <div className="flex items-center">
           <button
-            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
+            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] transition-all duration-200 font-medium"
             onClick={editingChunk ? () => setEditingChunk(null) : isAddingChunk ? () => setIsAddingChunk(false) : handleGoBack}
           >
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
           </button>
 
           <div className="flex items-center flex-wrap">
-            <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5 flex-shrink-0" />
-            <span className="text-purple-30 font-medium break-words">
+            {/* Removed the directory icon */}
+            <span className="text-[#7D54D1] font-semibold break-words">
               {documentName}
             </span>
 
@@ -289,7 +304,11 @@ const Chunks: React.FC<ChunksProps> = ({
                 <span className="mx-1 text-gray-500 flex-shrink-0">/</span>
                 {pathParts.map((part, index) => (
                   <React.Fragment key={index}>
-                    <span className="text-gray-700 dark:text-gray-300 break-words">
+                    <span className={`break-words ${
+                      index < pathParts.length - 1 
+                        ? 'text-[#7D54D1] font-medium' 
+                        : 'text-gray-700 dark:text-gray-300'
+                    }`}>
                       {part}
                     </span>
                     {index < pathParts.length - 1 && (
@@ -305,28 +324,29 @@ const Chunks: React.FC<ChunksProps> = ({
         <div className="flex flex-row flex-nowrap items-center gap-2 w-full sm:w-auto justify-end mt-2 sm:mt-0 overflow-x-auto">
           {editingChunk ? (
             !isEditing ? (
-              <button
-                className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-3 py-1 text-sm text-white transition-all text-nowrap"
-                onClick={() => setIsEditing(true)}
-              >
-                {t('modals.chunk.edit')}
-              </button>
-            ) : (
               <>
                 <button
-                  className="rounded-full border border-solid border-red-500 px-3 py-1 text-sm text-nowrap text-red-500 hover:bg-red-500 hover:text-white"
+                  className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] whitespace-nowrap text-white font-medium"
+                  onClick={() => setIsEditing(true)}
+                >
+                  {t('modals.chunk.edit')}
+                </button>
+                <button
+                  className="rounded-full border border-solid border-red-500 px-4 py-1 text-[14px] text-nowrap text-red-500 hover:bg-red-500 hover:text-white h-[38px] min-w-[108px] flex items-center justify-center font-medium"
                   onClick={() => {
                     confirmDeleteChunk(editingChunk);
                   }}
                 >
                   {t('modals.chunk.delete')}
                 </button>
+              </>
+            ) : (
+              <>
                 <button
                   onClick={() => {
                     setIsEditing(false);
-                    setEditingChunk(null);
                   }}
-                  className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50 text-nowrap"
+                  className="dark:text-light-gray cursor-pointer rounded-full px-4 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50 text-nowrap h-[38px] min-w-[108px] flex items-center justify-center"
                 >
                   {t('modals.chunk.cancel')}
                 </button>
@@ -344,13 +364,13 @@ const Chunks: React.FC<ChunksProps> = ({
                     }
                   }}
                   disabled={!editingText.trim() || (editingTitle === (editingChunk?.metadata?.title || '') && editingText === (editingChunk?.text || ''))}
-                  className={`text-nowrap rounded-full px-3 py-1 text-sm text-white transition-all ${
+                  className={`text-nowrap rounded-full px-4 py-1 text-[14px] text-white transition-all flex items-center justify-center h-[38px] min-w-[108px] font-medium ${
                     editingText.trim() && (editingTitle !== (editingChunk?.metadata?.title || '') || editingText !== (editingChunk?.text || ''))
                       ? 'bg-purple-30 hover:bg-violets-are-blue cursor-pointer'
                       : 'bg-gray-400 cursor-not-allowed'
                   }`}
                 >
-                  {t('modals.chunk.update')}
+                  {t('modals.chunk.save')}
                 </button>
               </>
             )
@@ -358,7 +378,7 @@ const Chunks: React.FC<ChunksProps> = ({
             <>
               <button
                 onClick={() => setIsAddingChunk(false)}
-                className="dark:text-light-gray cursor-pointer rounded-full px-3 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50 text-nowrap"
+                className="dark:text-light-gray cursor-pointer rounded-full px-4 py-1 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:hover:bg-[#767183]/50 text-nowrap h-[38px] min-w-[108px] flex items-center justify-center"
               >
                 {t('modals.chunk.cancel')}
               </button>
@@ -370,7 +390,7 @@ const Chunks: React.FC<ChunksProps> = ({
                   }
                 }}
                 disabled={!editingText.trim()}
-                className={`text-nowrap rounded-full px-3 py-1 text-sm text-white transition-all ${
+                className={`text-nowrap rounded-full px-4 py-1 text-[14px] text-white transition-all flex items-center justify-center h-[38px] min-w-[108px] font-medium ${
                   editingText.trim()
                     ? 'bg-purple-30 hover:bg-violets-are-blue cursor-pointer'
                     : 'bg-gray-400 cursor-not-allowed'
@@ -385,15 +405,107 @@ const Chunks: React.FC<ChunksProps> = ({
     );
   };
 
+  // File search handling
+  const handleFileSearchChange = (query: string) => {
+    setFileSearchQuery(query);
+    if (query.trim() && onFileSearch) {
+      const results = onFileSearch(query);
+      setFileSearchResults(results);
+    } else {
+      setFileSearchResults([]);
+    }
+  };
+
+  const handleSearchResultClick = (result: SearchResult) => {
+    if (!onFileSelect) return;
+
+    if (result.isFile) {
+      onFileSelect(result.path);
+    } else {
+      // For directories, navigate to the directory and return to file tree
+      onFileSelect(result.path);
+      handleGoBack();
+    }
+    setFileSearchQuery('');
+    setFileSearchResults([]);
+  };
+
+  useOutsideAlerter(
+    searchDropdownRef,
+    () => {
+      setFileSearchQuery('');
+      setFileSearchResults([]);
+    },
+    [], // No additional dependencies
+    false // Don't handle escape key
+  );
+
+  const renderFileSearch = () => {
+    return (
+      <div className="relative" ref={searchDropdownRef}>
+        <div className="relative flex items-center">
+          <div className="absolute left-3 pointer-events-none">
+            <img src={SearchIcon} alt="Search" className="w-4 h-4" />
+          </div>
+          <input
+            type="text"
+            value={fileSearchQuery}
+            onChange={(e) => handleFileSearchChange(e.target.value)}
+            placeholder={t('settings.sources.searchFiles')}
+            className={`w-full h-[38px] border border-[#D1D9E0] pl-10 pr-4 py-2 dark:border-[#6A6A6A] 
+              ${fileSearchQuery 
+                ? 'rounded-t-[6px]' 
+                : 'rounded-[6px]'
+              } 
+              bg-transparent focus:outline-none dark:text-[#E0E0E0] transition-all duration-200`}
+          />
+        </div>
+
+        {fileSearchQuery && (
+          <div className="absolute z-10 max-h-[calc(100vh-200px)] w-full overflow-y-auto rounded-b-[6px] border border-t-0 border-[#D1D9E0] bg-white shadow-lg dark:border-[#6A6A6A] dark:bg-[#1F2023]">
+            {fileSearchResults.length === 0 ? (
+              <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
+                {t('settings.sources.noResults')}
+              </div>
+            ) : (
+              fileSearchResults.map((result, index) => (
+                <div
+                  key={index}
+                  onClick={() => handleSearchResultClick(result)}
+                  className={`flex cursor-pointer items-center px-3 py-2 hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${
+                    index !== fileSearchResults.length - 1
+                      ? 'border-b border-[#D1D9E0] dark:border-[#6A6A6A]'
+                      : ''
+                  }`}
+                >
+                  <img
+                    src={result.isFile ? FileIcon : FolderIcon}
+                    alt={result.isFile ? 'File' : 'Folder'}
+                    className="mr-2 h-4 w-4 flex-shrink-0"
+                  />
+                  <span className="text-sm dark:text-[#E0E0E0]">
+                    {result.path.split('/').pop() || result.path}
+                  </span>
+                </div>
+              ))
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
   return (
     <div className="flex flex-col">
-      <div className="mb-4">
+      <div className="mb-2">
         {renderPathNavigation()}
       </div>
       <div className="flex gap-4">
-        <div className="hidden lg:block">
-          {renderFileSearch && renderFileSearch()}
-        </div>
+        {onFileSearch && onFileSelect && (
+          <div className="hidden lg:block w-[198px]">
+            {renderFileSearch()}
+          </div>
+        )}
 
         {/* Right side: Chunks content */}
         <div className="flex-1">
@@ -420,7 +532,7 @@ const Chunks: React.FC<ChunksProps> = ({
                   </div>
                 </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"
+                  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-[14px] whitespace-normal text-white shrink-0 font-medium"
                   title={t('settings.sources.addNew')}
                   onClick={() => {
                     setIsAddingChunk(true);
@@ -500,6 +612,13 @@ const Chunks: React.FC<ChunksProps> = ({
                     onChange={setEditingText}
                     ariaLabel={t('modals.chunk.promptText')}
                     editable={isEditing}
+                    onDoubleClick={() => {
+                      if (!isEditing) {
+                        setIsEditing(true);
+                        setEditingTitle(editingChunk.metadata.title || '');
+                        setEditingText(editingChunk.text);
+                      }
+                    }}
                   />
                 </div>
               </div>
diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index cbd78277..714810c6 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -30,7 +30,7 @@ interface DirectoryStructure {
 interface FileTreeComponentProps {
   docId: string;
   sourceName: string;
-  onBackToDocuments?: () => void;
+  onBackToDocuments: () => void;
 }
 
 interface SearchResult {
@@ -444,14 +444,15 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   const renderPathNavigation = () => {
     return (
       <div className="mb-4 flex flex-col gap-3 text-sm sm:flex-row sm:items-center sm:justify-between">
+        {/* Left side with path navigation */}
         <div className="flex w-full items-center sm:w-auto">
           <button
-            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
+            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] font-medium"
             onClick={handleBackNavigation}
           >
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
           </button>
-
+  
           <div className="flex flex-wrap items-center">
             <img
               src={OutlineSource}
@@ -489,39 +490,36 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           </div>
         </div>
 
-        {!selectedFile && (
-          <div className="flex w-full items-center gap-2 sm:w-auto">
-            {(processingRef.current || queueLength > 0) && (
-              <span className="text-xs text-gray-600 dark:text-gray-400">
-                {processingRef.current
-                  ? currentOpRef.current === 'add'
-                    ? t('settings.sources.uploading')
-                    : t('settings.sources.deleting')
-                  : null}
-                {queueLength > 0
-                  ? `${processingRef.current ? ' • ' : ''}${t('settings.sources.queued', { count: queueLength })}`
-                  : ''}
-              </span>
-            )}
+        {/* Right side with search and add button */}
+        <div className="flex items-center space-x-4">
+          {/* Upload status indicator */}
+          {processingRef.current && (
+            <div className="text-sm text-gray-500">
+              {currentOpRef.current === 'add' 
+                ? t('settings.sources.uploadingFilesTitle') 
+                : t('settings.sources.deletingTitle')}
+            </div>
+          )}
+          
+          {/* Search element with fixed width matching Figma specs */}
+          <div className="w-[198px]">
+            {renderFileSearch()}
+          </div>
+          
+          {/* Add file button */}
+          {!processingRef.current && (
             <button
               onClick={handleAddFile}
-              className="bg-purple-30 hover:bg-violets-are-blue flex h-[32px] w-full min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white sm:w-auto"
-              title={
-                processingRef.current
-                  ? currentOpRef.current === 'add'
-                    ? t('settings.sources.uploadingFilesTitle')
-                    : t('settings.sources.deletingTitle')
-                  : t('settings.sources.addFile')
-              }
+              className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] whitespace-nowrap text-white font-medium"
+              title={t('settings.sources.addFile')}
             >
               {t('settings.sources.addFile')}
             </button>
-          </div>
-        )}
+          )}
+        </div>
       </div>
     );
   };
-
   const calculateDirectoryStats = (
     structure: DirectoryStructure,
   ): { totalSize: number; totalTokens: number } => {
@@ -620,7 +618,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               <div ref={menuRef} className="relative">
                 <button
                   onClick={(e) => handleMenuClick(e, itemId)}
-                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E]"
+                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E] font-medium"
                   aria-label={t('settings.sources.menuAlt')}
                 >
                   <img
@@ -637,7 +635,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                   options={getActionOptions(name, false, itemId)}
                   anchorRef={menuRef}
                   position="bottom-left"
-                  offset={{ x: -8, y: 8 }}
+                  offset={{ x: -4, y: 4 }}
                 />
               </div>
             </td>
@@ -676,7 +674,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               <div ref={menuRef} className="relative">
                 <button
                   onClick={(e) => handleMenuClick(e, itemId)}
-                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E]"
+                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md transition-colors hover:bg-[#EBEBEB] dark:hover:bg-[#26272E] font-medium"
                   aria-label={t('settings.sources.menuAlt')}
                 >
                   <img
@@ -693,7 +691,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
                   options={getActionOptions(name, true, itemId)}
                   anchorRef={menuRef}
                   position="bottom-left"
-                  offset={{ x: -8, y: 8 }}
+                  offset={{ x: -4, y: 4 }}
                 />
               </div>
             </td>
@@ -754,75 +752,81 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     setSearchQuery('');
     setSearchResults([]);
   };
+
   const renderFileSearch = () => {
     return (
-      <div className="w-[283px]" ref={searchDropdownRef}>
-        <div className="relative">
+      <div className="relative" ref={searchDropdownRef}>
           <input
             type="text"
             value={searchQuery}
             onChange={(e) => {
               setSearchQuery(e.target.value);
               if (directoryStructure) {
-                setSearchResults(
-                  searchFiles(e.target.value, directoryStructure),
-                );
+                setSearchResults(searchFiles(e.target.value, directoryStructure));
               }
             }}
             placeholder={t('settings.sources.searchFiles')}
-            className={`w-full border border-[#D1D9E0] px-4 py-2 pl-10 dark:border-[#6A6A6A] ${
-              searchQuery
-                ? 'rounded-t-md rounded-b-none border-b-0'
-                : 'rounded-md'
-            } bg-transparent focus:outline-none dark:text-[#E0E0E0]`}
+            className={`w-full h-[38px] border border-[#D1D9E0] px-4 py-2 dark:border-[#6A6A6A] 
+              ${searchQuery ? 'rounded-t-[24px]' : 'rounded-[24px]'} 
+              bg-transparent focus:outline-none dark:text-[#E0E0E0]`}
           />
 
-          <img
-            src={SearchIcon}
-            alt={t('settings.sources.searchAlt')}
-            className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform opacity-60"
-          />
-
-          {searchQuery && (
-            <div className="absolute z-10 max-h-[calc(100vh-200px)] w-full overflow-y-auto rounded-b-md border border-[#D1D9E0] bg-white shadow-lg dark:border-[#6A6A6A] dark:bg-[#1F2023]">
-              {searchResults.length === 0 ? (
-                <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
-                  {t('settings.sources.noResults')}
+        {searchQuery && (
+          <div className="absolute z-10 max-h-[calc(100vh-200px)] w-full overflow-y-auto rounded-b-[12px] border border-t-0 border-[#D1D9E0] bg-white shadow-lg dark:border-[#6A6A6A] dark:bg-[#1F2023] transition-all duration-200">
+            {searchResults.length === 0 ? (
+              <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
+                {t('settings.sources.noResults')}
+              </div>
+            ) : (
+              searchResults.map((result, index) => (
+                <div
+                  key={index}
+                  onClick={() => handleSearchSelect(result)}
+                  title={result.path}
+                  className={`flex cursor-pointer items-center px-3 py-2 hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${
+                    index !== searchResults.length - 1
+                      ? 'border-b border-[#D1D9E0] dark:border-[#6A6A6A]'
+                      : ''
+                  }`}
+                >
+                  <img
+                    src={result.isFile ? FileIcon : FolderIcon}
+                    alt={
+                      result.isFile
+                        ? t('settings.sources.fileAlt')
+                        : t('settings.sources.folderAlt')
+                    }
+                    className="mr-2 h-4 w-4 flex-shrink-0"
+                  />
+                  <span className="text-sm dark:text-[#E0E0E0]">
+                    {result.path.split('/').pop() || result.path}
+                  </span>
                 </div>
-              ) : (
-                searchResults.map((result, index) => (
-                  <div
-                    key={index}
-                    onClick={() => handleSearchSelect(result)}
-                    title={result.path}
-                    className={`flex cursor-pointer items-center px-3 py-2 hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${
-                      index !== searchResults.length - 1
-                        ? 'border-b border-[#D1D9E0] dark:border-[#6A6A6A]'
-                        : ''
-                    }`}
-                  >
-                    <img
-                      src={result.isFile ? FileIcon : FolderIcon}
-                      alt={
-                        result.isFile
-                          ? t('settings.sources.fileAlt')
-                          : t('settings.sources.folderAlt')
-                      }
-                      className="mr-2 h-4 w-4 flex-shrink-0"
-                    />
-                    <span className="text-sm dark:text-[#E0E0E0]">
-                      {result.path.split('/').pop() || result.path}
-                    </span>
-                  </div>
-                ))
-              )}
-            </div>
-          )}
-        </div>
+              ))
+            )}
+          </div>
+        )}
       </div>
     );
   };
 
+  const handleFileSearch = (searchQuery: string) => {
+    if (directoryStructure) {
+      return searchFiles(searchQuery, directoryStructure);
+    }
+    return [];
+  };
+
+  const handleFileSelect = (path: string) => {
+    const pathParts = path.split('/');
+      const fileName = pathParts.pop() || '';
+      setCurrentPath(pathParts);
+      setSelectedFile({
+        id: path,
+        name: fileName,
+      });
+  };
+
   return (
     <div>
       {selectedFile ? (
@@ -833,47 +837,40 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               documentName={sourceName}
               handleGoBack={() => setSelectedFile(null)}
               path={selectedFile.id}
-              renderFileSearch={renderFileSearch}
+              onFileSearch={handleFileSearch}
+              onFileSelect={handleFileSelect}
             />
           </div>
         </div>
       ) : (
         <div className="flex w-full max-w-full flex-col overflow-hidden">
-          <div className="mb-4">{renderPathNavigation()}</div>
+          <div className="mb-2">{renderPathNavigation()}</div>
 
-          <div className="flex min-w-0 gap-4">
-            {/* Left side: Search dropdown */}
-            <div className="hidden flex-shrink-0 lg:block">
-              {renderFileSearch()}
-            </div>
-
-            {/* Right side: File table */}
-            <div className="min-w-0 flex-1">
-              <div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
-                <table className="w-full min-w-[600px] table-auto bg-transparent">
-                  <thead className="bg-gray-100 dark:bg-[#27282D]">
-                    <tr className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]">
-                      <th className="min-w-[200px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
-                        {t('settings.sources.fileName')}
-                      </th>
-                      <th className="min-w-[80px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
-                        {t('settings.sources.tokens')}
-                      </th>
-                      <th className="min-w-[80px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
-                        {t('settings.sources.size')}
-                      </th>
-                      <th className="w-[60px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
-                        <span className="sr-only">
-                          {t('settings.sources.actions')}
-                        </span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody className="[&>tr:last-child]:border-b-0">
-                    {renderFileTree(currentDirectory)}
-                  </tbody>
-                </table>
-              </div>
+          <div className="w-full">
+            <div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
+              <table className="w-full min-w-[600px] table-auto bg-transparent">
+                <thead className="bg-gray-100 dark:bg-[#27282D]">
+                  <tr className="border-b border-[#D1D9E0] dark:border-[#6A6A6A]">
+                    <th className="min-w-[200px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
+                      {t('settings.sources.fileName')}
+                    </th>
+                    <th className="min-w-[80px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
+                      {t('settings.sources.tokens')}
+                    </th>
+                    <th className="min-w-[80px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
+                      {t('settings.sources.size')}
+                    </th>
+                    <th className="w-[60px] px-2 py-3 text-left text-sm font-medium text-gray-700 lg:px-4 dark:text-[#59636E]">
+                      <span className="sr-only">
+                        {t('settings.sources.actions')}
+                      </span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="[&>tr:last-child]:border-b-0">
+                  {renderFileTree(currentDirectory)}
+                </tbody>
+              </table>
             </div>
           </div>
         </div>
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 1f606339..2ded6ea4 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -270,12 +270,12 @@
     },
     "chunk": {
       "add": "Add Chunk",
-      "edit": "Edit Chunk",
+      "edit": "Edit",
       "title": "Title",
       "enterTitle": "Enter title",
       "bodyText": "Body text",
       "promptText": "Prompt Text",
-      "update": "Update",
+      "save": "Save",
       "close": "Close",
       "cancel": "Cancel",
       "delete": "Delete",
diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
index 3fe05bc1..f2a8b5ef 100644
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -270,12 +270,12 @@
     },
     "chunk": {
       "add": "Agregar Fragmento",
-      "edit": "Editar Fragmento",
+      "edit": "Editar",
       "title": "Título",
       "enterTitle": "Ingresar título",
       "bodyText": "Texto del cuerpo",
       "promptText": "Texto del prompt",
-      "update": "Actualizar",
+      "save": "Guardar",
       "close": "Cerrar",
       "cancel": "Cancelar",
       "delete": "Eliminar",
diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index 2092231b..dc70e704 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -270,12 +270,12 @@
     },
     "chunk": {
       "add": "チャンクを追加",
-      "edit": "チャンクを編集",
+      "edit": "編集",
       "title": "タイトル",
       "enterTitle": "タイトルを入力",
       "bodyText": "本文",
       "promptText": "プロンプトテキスト",
-      "update": "更新",
+      "save": "保存",
       "close": "閉じる",
       "cancel": "キャンセル",
       "delete": "削除",
diff --git a/frontend/src/locale/ru.json b/frontend/src/locale/ru.json
index 30d7a435..efd4140a 100644
--- a/frontend/src/locale/ru.json
+++ b/frontend/src/locale/ru.json
@@ -270,12 +270,12 @@
     },
     "chunk": {
       "add": "Добавить фрагмент",
-      "edit": "Редактировать фрагмент",
+      "edit": "Редактировать",
       "title": "Заголовок",
       "enterTitle": "Введите заголовок",
       "bodyText": "Текст",
       "promptText": "Текст подсказки",
-      "update": "Обновить",
+      "save": "Сохранить",
       "close": "Закрыть",
       "cancel": "Отмена",
       "delete": "Удалить",
diff --git a/frontend/src/locale/zh-TW.json b/frontend/src/locale/zh-TW.json
index a893a716..3a14df3f 100644
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -270,12 +270,12 @@
     },
     "chunk": {
       "add": "新增區塊",
-      "edit": "編輯區塊",
+      "edit": "編輯",
       "title": "標題",
       "enterTitle": "輸入標題",
       "bodyText": "內文",
       "promptText": "提示文字",
-      "update": "更新",
+      "save": "儲存",
       "close": "關閉",
       "cancel": "取消",
       "delete": "刪除",
diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
index 70a163fa..61d0e973 100644
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -270,12 +270,12 @@
     },
     "chunk": {
       "add": "添加块",
-      "edit": "编辑块",
+      "edit": "编辑",
       "title": "标题",
       "enterTitle": "输入标题",
       "bodyText": "正文",
       "promptText": "提示文本",
-      "update": "更新",
+      "save": "保存",
       "close": "关闭",
       "cancel": "取消",
       "delete": "删除",
diff --git a/frontend/src/settings/Sources.tsx b/frontend/src/settings/Sources.tsx
index e2302a4e..c1aa079a 100644
--- a/frontend/src/settings/Sources.tsx
+++ b/frontend/src/settings/Sources.tsx
@@ -303,7 +303,7 @@ export default function Sources({
             />
           </div>
           <button
-            className="bg-purple-30 hover:bg-violets-are-blue flex h-[32px] min-w-[108px] items-center justify-center rounded-full px-4 text-sm whitespace-normal text-white"
+            className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] whitespace-normal text-white"
             title={t('settings.sources.addNew')}
             onClick={() => {
               setIsOnboarding(false);

From 5c615d6f2d0a3c7e5ca4b89342d2fbfbbf7ceb35 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 12 Aug 2025 18:04:40 +0530
Subject: [PATCH 54/57] (feat:sources) card ui

---
 frontend/src/assets/calendar.svg   |  4 ++++
 frontend/src/assets/disc.svg       |  3 +++
 frontend/src/components/Chunks.tsx |  4 ++--
 frontend/src/locale/en.json        |  2 ++
 frontend/src/locale/es.json        |  2 ++
 frontend/src/locale/jp.json        |  2 ++
 frontend/src/locale/ru.json        |  2 ++
 frontend/src/locale/zh-TW.json     |  2 ++
 frontend/src/locale/zh.json        |  2 ++
 frontend/src/settings/Sources.tsx  | 35 ++++++++++++++++++++----------
 10 files changed, 44 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/assets/calendar.svg
 create mode 100644 frontend/src/assets/disc.svg

diff --git a/frontend/src/assets/calendar.svg b/frontend/src/assets/calendar.svg
new file mode 100644
index 00000000..d0f67173
--- /dev/null
+++ b/frontend/src/assets/calendar.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 7.5C6 7.36739 5.94732 7.24021 5.85355 7.14645C5.75979 7.05268 5.63261 7 5.5 7H4.5C4.36739 7 4.24021 7.05268 4.14645 7.14645C4.05268 7.24021 4 7.36739 4 7.5V8.5C4 8.63261 4.05268 8.75979 4.14645 8.85355C4.24021 8.94732 4.36739 9 4.5 9H5.5C5.63261 9 5.75979 8.94732 5.85355 8.85355C5.94732 8.75979 6 8.63261 6 8.5V7.5ZM6 10.5C6 10.3674 5.94732 10.2402 5.85355 10.1464C5.75979 10.0527 5.63261 10 5.5 10H4.5C4.36739 10 4.24021 10.0527 4.14645 10.1464C4.05268 10.2402 4 10.3674 4 10.5V11.5C4 11.6326 4.05268 11.7598 4.14645 11.8536C4.24021 11.9473 4.36739 12 4.5 12H5.5C5.63261 12 5.75979 11.9473 5.85355 11.8536C5.94732 11.7598 6 11.6326 6 11.5V10.5ZM7.5 7H8.5C8.63261 7 8.75979 7.05268 8.85355 7.14645C8.94732 7.24021 9 7.36739 9 7.5V8.5C9 8.63261 8.94732 8.75979 8.85355 8.85355C8.75979 8.94732 8.63261 9 8.5 9H7.5C7.36739 9 7.24021 8.94732 7.14645 8.85355C7.05268 8.75979 7 8.63261 7 8.5V7.5C7 7.36739 7.05268 7.24021 7.14645 7.14645C7.24021 7.05268 7.36739 7 7.5 7ZM8.5 10H7.5C7.36739 10 7.24021 10.0527 7.14645 10.1464C7.05268 10.2402 7 10.3674 7 10.5V11.5C7 11.6326 7.05268 11.7598 7.14645 11.8536C7.24021 11.9473 7.36739 12 7.5 12H8.5C8.63261 12 8.75979 11.9473 8.85355 11.8536C8.94732 11.7598 9 11.6326 9 11.5V10.5C9 10.3674 8.94732 10.2402 8.85355 10.1464C8.75979 10.0527 8.63261 10 8.5 10ZM10 7.5C10 7.36739 10.0527 7.24021 10.1464 7.14645C10.2402 7.05268 10.3674 7 10.5 7H11.5C11.6326 7 11.7598 7.05268 11.8536 7.14645C11.9473 7.24021 12 7.36739 12 7.5V8.5C12 8.63261 11.9473 8.75979 11.8536 8.85355C11.7598 8.94732 11.6326 9 11.5 9H10.5C10.3674 9 10.2402 8.94732 10.1464 8.85355C10.0527 8.75979 10 8.63261 10 8.5V7.5Z" fill="#848484"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 0C4.63261 0 4.75979 0.0526784 4.85355 0.146447C4.94732 0.240215 5 0.367392 5 0.5V1H11V0.5C11 0.367392 11.0527 0.240215 11.1464 0.146447C11.2402 0.0526784 11.3674 0 11.5 0C11.6326 0 11.7598 0.0526784 11.8536 0.146447C11.9473 0.240215 12 0.367392 12 0.5V1C13.66 1 15 2.34 15 4V12C15 13.66 13.66 15 12 15H4C2.34 15 1 13.66 1 12V4C1 2.34 2.34 1 4 1V0.5C4 0.367392 4.05268 0.240215 4.14645 0.146447C4.24021 0.0526784 4.36739 0 4.5 0ZM14 4V5H2V4C2 2.9 2.895 2 4 2V2.5C4 2.63261 4.05268 2.75979 4.14645 2.85355C4.24021 2.94732 4.36739 3 4.5 3C4.63261 3 4.75979 2.94732 4.85355 2.85355C4.94732 2.75979 5 2.63261 5 2.5V2H11V2.5C11 2.63261 11.0527 2.75979 11.1464 2.85355C11.2402 2.94732 11.3674 3 11.5 3C11.6326 3 11.7598 2.94732 11.8536 2.85355C11.9473 2.75979 12 2.63261 12 2.5V2C13.1 2 14 2.895 14 4ZM2 12V6H14V12C14 13.1 13.105 14 12 14H4C2.9 14 2 13.105 2 12Z" fill="#848484"/>
+</svg>
diff --git a/frontend/src/assets/disc.svg b/frontend/src/assets/disc.svg
new file mode 100644
index 00000000..3ea3d451
--- /dev/null
+++ b/frontend/src/assets/disc.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0C8.8144 0 10.4902 0.332143 11.739 0.898571C12.362 1.18143 12.9108 1.53643 13.3119 1.96714C13.7172 2.4 14 2.94429 14 3.57143V6.42857C14 7.05571 13.7172 7.59929 13.3119 8.03286C12.9108 8.46357 12.3627 8.81857 11.739 9.10143C10.4902 9.66786 8.8144 10 7 10C5.1856 10 3.5098 9.66786 2.261 9.10143C1.638 8.81857 1.0892 8.46357 0.6881 8.03286C0.2828 7.6 0 7.05571 0 6.42857V3.57143C0 2.94429 0.2828 2.40071 0.6881 1.96714C1.0892 1.53643 1.6373 1.18143 2.261 0.898571C3.5098 0.332143 5.1856 0 7 0ZM12.6 5.77143C12.3375 5.94714 12.047 6.10429 11.739 6.24429C10.4902 6.81071 8.8144 7.14286 7 7.14286C5.1856 7.14286 3.5098 6.81071 2.261 6.24429C1.96243 6.10966 1.67456 5.95157 1.4 5.77143V6.42857C1.4 6.59071 1.47 6.79857 1.7024 7.04857C1.9383 7.30143 2.3128 7.56214 2.8294 7.79643C3.8612 8.26429 5.3354 8.57143 7 8.57143C8.6646 8.57143 10.1388 8.26429 11.1706 7.79643C11.6872 7.56214 12.0617 7.30143 12.2976 7.04857C12.5307 6.79857 12.6 6.59071 12.6 6.42857V5.77143ZM7 1.42857C5.3347 1.42857 3.8612 1.73571 2.8294 2.20357C2.3128 2.43786 1.9383 2.69857 1.7024 2.95143C1.4693 3.20143 1.4 3.40929 1.4 3.57143C1.4 3.73357 1.47 3.94143 1.7024 4.19143C1.9383 4.44429 2.3128 4.705 2.8294 4.93929C3.8612 5.40714 5.3354 5.71429 7 5.71429C8.6646 5.71429 10.1388 5.40714 11.1706 4.93929C11.6872 4.705 12.0617 4.44429 12.2976 4.19143C12.5307 3.94143 12.6 3.73357 12.6 3.57143C12.6 3.40929 12.53 3.20143 12.2976 2.95143C12.0617 2.69857 11.6872 2.43786 11.1706 2.20357C10.1388 1.73643 8.6646 1.42857 7 1.42857Z" fill="#848484"/>
+</svg>
diff --git a/frontend/src/components/Chunks.tsx b/frontend/src/components/Chunks.tsx
index b7d97080..e464b9d0 100644
--- a/frontend/src/components/Chunks.tsx
+++ b/frontend/src/components/Chunks.tsx
@@ -533,14 +533,14 @@ const Chunks: React.FC<ChunksProps> = ({
                 </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-[14px] whitespace-normal text-white shrink-0 font-medium"
-                  title={t('settings.sources.addNew')}
+                  title={t('settings.sources.addChunk')}
                   onClick={() => {
                     setIsAddingChunk(true);
                     setEditingTitle('');
                     setEditingText('');
                   }}
                 >
-                  {t('settings.sources.addNew')}
+                  {t('settings.sources.addChunk')}
                 </button>
               </div>
               {loading ? (
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 2ded6ea4..d0d1b4b3 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -62,6 +62,8 @@
       "noData": "No existing Sources",
       "searchPlaceholder": "Search...",
       "addNew": "Add New",
+      "addSource": "Add Source",
+      "addChunk": "Add Chunk",
       "preLoaded": "Pre-loaded",
       "private": "Private",
       "sync": "Sync",
diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
index f2a8b5ef..64e204dd 100644
--- a/frontend/src/locale/es.json
+++ b/frontend/src/locale/es.json
@@ -62,6 +62,8 @@
       "noData": "No hay fuentes existentes",
       "searchPlaceholder": "Buscar...",
       "addNew": "Agregar Nuevo",
+      "addSource": "Agregar Fuente",
+      "addChunk": "Agregar Fragmento",
       "preLoaded": "Precargado",
       "private": "Privado",
       "sync": "Sincronizar",
diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
index dc70e704..5b93d182 100644
--- a/frontend/src/locale/jp.json
+++ b/frontend/src/locale/jp.json
@@ -62,6 +62,8 @@
       "noData": "既存のソースがありません",
       "searchPlaceholder": "検索...",
       "addNew": "新規追加",
+      "addSource": "ソースを追加",
+      "addChunk": "チャンクを追加",
       "preLoaded": "プリロード済み",
       "private": "プライベート",
       "sync": "同期",
diff --git a/frontend/src/locale/ru.json b/frontend/src/locale/ru.json
index efd4140a..6a83f9a3 100644
--- a/frontend/src/locale/ru.json
+++ b/frontend/src/locale/ru.json
@@ -62,6 +62,8 @@
       "noData": "Нет существующих источников",
       "searchPlaceholder": "Поиск...",
       "addNew": "добавить новый",
+      "addSource": "Добавить источник",
+      "addChunk": "Добавить фрагмент",
       "preLoaded": "Предзагруженный",
       "private": "Частный",
       "sync": "Синхронизация",
diff --git a/frontend/src/locale/zh-TW.json b/frontend/src/locale/zh-TW.json
index 3a14df3f..8c734ff3 100644
--- a/frontend/src/locale/zh-TW.json
+++ b/frontend/src/locale/zh-TW.json
@@ -62,6 +62,8 @@
       "noData": "沒有現有的來源",
       "searchPlaceholder": "搜尋...",
       "addNew": "新增文件",
+      "addSource": "新增來源",
+      "addChunk": "新增區塊",
       "preLoaded": "預載入",
       "private": "私人",
       "sync": "同步",
diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
index 61d0e973..eb216c86 100644
--- a/frontend/src/locale/zh.json
+++ b/frontend/src/locale/zh.json
@@ -62,6 +62,8 @@
       "noData": "没有现有的来源",
       "searchPlaceholder": "搜索...",
       "addNew": "添加新文档",
+      "addSource": "添加来源",
+      "addChunk": "添加块",
       "preLoaded": "预加载",
       "private": "私有",
       "sync": "同步",
diff --git a/frontend/src/settings/Sources.tsx b/frontend/src/settings/Sources.tsx
index c1aa079a..3f867966 100644
--- a/frontend/src/settings/Sources.tsx
+++ b/frontend/src/settings/Sources.tsx
@@ -11,6 +11,8 @@ import NoFilesDarkIcon from '../assets/no-files-dark.svg';
 import Trash from '../assets/red-trash.svg';
 import SyncIcon from '../assets/sync.svg';
 import ThreeDots from '../assets/three-dots.svg';
+import CalendarIcon from '../assets/calendar.svg';
+import DiscIcon from '../assets/disc.svg';
 import ContextMenu, { MenuOption } from '../components/ContextMenu';
 import Pagination from '../components/DocumentPagination';
 import DropdownMenu from '../components/DropdownMenu';
@@ -304,13 +306,13 @@ export default function Sources({
           </div>
           <button
             className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] whitespace-normal text-white"
-            title={t('settings.sources.addNew')}
+            title={t('settings.sources.addSource')}
             onClick={() => {
               setIsOnboarding(false);
               setModalState('ACTIVE');
             }}
           >
-            {t('settings.sources.addNew')}
+            {t('settings.sources.addSource')}
           </button>
         </div>
         <div className="relative w-full">
@@ -337,13 +339,13 @@ export default function Sources({
               return (
                 <div key={docId} className="relative">
                   <div
-                    className={`flex h-[123px] w-[308px] flex-col justify-between rounded-2xl bg-[#F9F9F9] p-3 transition-all duration-200 dark:bg-[#383838] ${
+                    className={`flex h-[123px] w-[308px] flex-col rounded-2xl bg-[#F9F9F9] p-3 transition-all duration-200 dark:bg-[#383838] ${
                       activeMenuId === docId || syncMenuState.docId === docId
                         ? 'scale-[1.02]'
                         : 'hover:scale-[1.02]'
                     }`}
                   >
-                      <div className="w-full">
+                      <div className="w-full flex-1">
                         <div className="flex w-full items-center justify-between gap-2">
                           <h3
                             className="font-inter dark:text-bright-gray line-clamp-3 text-[13px] leading-[18px] font-semibold break-words text-[#18181B]"
@@ -401,15 +403,24 @@ export default function Sources({
                         </div>
                       </div>
 
-                      <div className="mt-auto flex items-center justify-between pt-3">
-                        <div className="font-inter text-[12px] leading-[18px] font-[500] text-[#848484] dark:text-[#848484]">
-                          {document.date ? formatDate(document.date) : ''}
-                        </div>
-                        <div className="font-inter text-[12px] leading-[18px]">
-                          <span className="dark:text-bright-gray font-[400] text-[#18181B]">
-                            {t('settings.sources.tokenUsage')}:
+                      <div className="flex flex-col items-start justify-start gap-1">
+                        <div className="flex items-center gap-2">
+                          <img
+                            src={CalendarIcon}
+                            alt=""
+                            className="w-[14px] h-[14px]"
+                          />
+                          <span className="font-inter text-[12px] leading-[18px] font-[500] text-[#848484] dark:text-[#848484]">
+                            {document.date ? formatDate(document.date) : ''}
                           </span>
-                          <span className="ml-1 font-[400] text-[#848484] dark:text-[#848484]">
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <img
+                            src={DiscIcon}
+                            alt=""
+                            className="w-[14px] h-[14px]"
+                          />
+                          <span className="font-inter text-[12px] leading-[18px] font-[500] text-[#848484] dark:text-[#848484]">
                             {document.tokens
                               ? formatTokens(+document.tokens)
                               : ''}

From ec95dafe1e341be0a2dab7c8e0f5b8a64af3f784 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 13 Aug 2025 01:35:23 +0530
Subject: [PATCH 55/57] (feat:sources) matching the figma

---
 frontend/src/components/SkeletonLoader.tsx | 25 +++++++---
 frontend/src/settings/Sources.tsx          | 54 +++++++++++++---------
 frontend/src/utils/dateTimeUtils.ts        |  1 -
 3 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/SkeletonLoader.tsx b/frontend/src/components/SkeletonLoader.tsx
index 6d083f8f..e2fc37cf 100644
--- a/frontend/src/components/SkeletonLoader.tsx
+++ b/frontend/src/components/SkeletonLoader.tsx
@@ -214,15 +214,26 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
       {Array.from({ length: count }).map((_, idx) => (
         <div
           key={`source-skel-${idx}`}
-          className="flex h-[123px] w-[308px] flex-col justify-between rounded-2xl bg-[#F9F9F9] p-3 dark:bg-[#383838] animate-pulse"
+          className="flex h-[130px] w-full flex-col rounded-2xl bg-[#F9F9F9] dark:bg-[#383838] p-3 animate-pulse"
         >
-          <div className="flex w-full items-center justify-between gap-2">
-            <div className="h-4 w-3/5 rounded bg-gray-300 dark:bg-gray-600"></div>
-            <div className="h-6 w-6 rounded bg-gray-300 dark:bg-gray-600"></div>
+          <div className="w-full flex-1">
+            <div className="flex w-full items-center justify-between gap-2">
+              <div className="flex-1">
+                <div className="h-[13px] w-full rounded bg-gray-200 dark:bg-gray-700"></div>
+              </div>
+              <div className="w-6 h-6 rounded bg-gray-200 dark:bg-gray-700"></div>
+            </div>
           </div>
-          <div className="mt-auto flex items-center justify-between pt-3">
-            <div className="h-3 w-24 rounded bg-gray-300 dark:bg-gray-600"></div>
-            <div className="h-3 w-20 rounded bg-gray-300 dark:bg-gray-600"></div>
+
+          <div className="flex flex-col items-start justify-start gap-1 pt-3">
+            <div className="flex items-center gap-2 mb-1">
+              <div className="w-3 h-3 rounded bg-gray-200 dark:bg-gray-700"></div>
+              <div className="h-[12px] w-20 rounded bg-gray-200 dark:bg-gray-700"></div>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded bg-gray-200 dark:bg-gray-700"></div>
+              <div className="h-[12px] w-16 rounded bg-gray-200 dark:bg-gray-700"></div>
+            </div>
           </div>
         </div>
       ))}
diff --git a/frontend/src/settings/Sources.tsx b/frontend/src/settings/Sources.tsx
index 3f867966..e0473bb8 100644
--- a/frontend/src/settings/Sources.tsx
+++ b/frontend/src/settings/Sources.tsx
@@ -16,7 +16,6 @@ import DiscIcon from '../assets/disc.svg';
 import ContextMenu, { MenuOption } from '../components/ContextMenu';
 import Pagination from '../components/DocumentPagination';
 import DropdownMenu from '../components/DropdownMenu';
-import Input from '../components/Input';
 import SkeletonLoader from '../components/SkeletonLoader';
 import { useDarkTheme, useLoaderState } from '../hooks';
 import ConfirmationModal from '../modals/ConfirmationModal';
@@ -58,6 +57,7 @@ export default function Sources({
   const token = useSelector(selectToken);
 
   const [searchTerm, setSearchTerm] = useState<string>('');
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState<string>('');
   const [modalState, setModalState] = useState<ActiveState>('INACTIVE');
   const [isOnboarding, setIsOnboarding] = useState<boolean>(false);
   const [loading, setLoading] = useLoaderState(false);
@@ -116,6 +116,14 @@ export default function Sources({
     document: null,
   });
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [searchTerm]);
+
   const refreshDocs = useCallback(
     (
       field: 'date' | 'tokens' | undefined,
@@ -148,7 +156,7 @@ export default function Sources({
         newSortOrder,
         page,
         rowsPerPg,
-        searchTerm,
+        debouncedSearchTerm,
         token,
       )
         .then((data) => {
@@ -160,7 +168,7 @@ export default function Sources({
           setLoading(false);
         });
     },
-    [currentPage, rowsPerPage, sortField, sortOrder, searchTerm],
+    [currentPage, rowsPerPage, sortField, sortOrder, debouncedSearchTerm],
   );
 
   const handleManageSync = (doc: Doc, sync_frequency: string) => {
@@ -259,7 +267,7 @@ export default function Sources({
   };
   useEffect(() => {
     refreshDocs(undefined, 1, rowsPerPage);
-  }, [searchTerm]);
+  }, [debouncedSearchTerm]);
 
   return documentToView ? (
     <div className="mt-8 flex flex-col">
@@ -290,19 +298,21 @@ export default function Sources({
             <label htmlFor="document-search-input" className="sr-only">
               {t('settings.sources.searchPlaceholder')}
             </label>
-            <Input
-              maxLength={256}
-              placeholder={t('settings.sources.searchPlaceholder')}
-              name="Document-search-input"
-              type="text"
-              id="document-search-input"
-              value={searchTerm}
-              onChange={(e) => {
-                setSearchTerm(e.target.value);
-                setCurrentPage(1);
-              }}
-              borderVariant="thin"
-            />
+            <div className="relative w-[280px]">
+              <input
+                maxLength={256}
+                placeholder={t('settings.sources.searchPlaceholder')}
+                name="Document-search-input"
+                type="text"
+                id="document-search-input"
+                value={searchTerm}
+                onChange={(e) => {
+                  setSearchTerm(e.target.value);
+                  setCurrentPage(1);
+                }}
+                className="w-full h-[32px] rounded-full border border-silver dark:border-silver/40 bg-transparent px-3 text-sm text-jet dark:text-bright-gray placeholder:text-gray-400 dark:placeholder:text-gray-500 outline-none focus:border-silver dark:focus:border-silver/60"
+              />
+            </div>
           </div>
           <button
             className="bg-purple-30 hover:bg-violets-are-blue flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] whitespace-normal text-white"
@@ -317,7 +327,7 @@ export default function Sources({
         </div>
         <div className="relative w-full">
           {loading ? (
-            <div className="w-full grid grid-cols-1 sm:[grid-template-columns:repeat(auto-fit,minmax(308px,1fr))] gap-6 justify-items-start">
+            <div className="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 px-2 py-4">
               <SkeletonLoader component="sourceCards" count={rowsPerPage} />
             </div>
           ) : !currentDocuments?.length ? (
@@ -332,17 +342,17 @@ export default function Sources({
               </p>
             </div>
           ) : (
-            <div className="flex flex-wrap justify-center md:justify-start gap-6 mx-1">
+            <div className="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 px-2 py-4">
             {currentDocuments.map((document, index) => {
               const docId = document.id ? document.id.toString() : '';
 
               return (
                 <div key={docId} className="relative">
                   <div
-                    className={`flex h-[123px] w-[308px] flex-col rounded-2xl bg-[#F9F9F9] p-3 transition-all duration-200 dark:bg-[#383838] ${
+                    className={`flex h-[130px] w-full flex-col rounded-2xl bg-[#F9F9F9] p-3 transition-all duration-200  dark:bg-[#383838] ${
                       activeMenuId === docId || syncMenuState.docId === docId
-                        ? 'scale-[1.02]'
-                        : 'hover:scale-[1.02]'
+                        ? 'scale-[1.05]'
+                        : 'hover:scale-[1.05]'
                     }`}
                   >
                       <div className="w-full flex-1">
diff --git a/frontend/src/utils/dateTimeUtils.ts b/frontend/src/utils/dateTimeUtils.ts
index acb998a9..b2fb65e8 100644
--- a/frontend/src/utils/dateTimeUtils.ts
+++ b/frontend/src/utils/dateTimeUtils.ts
@@ -42,7 +42,6 @@ export function formatDate(dateString: string): string {
     // Format: "Fri, 08 Jul 2025 06:00:00 GMT"
     const dateTime = new Date(dateString);
     return dateTime.toLocaleDateString('en-US', {
-      weekday: 'short',
       month: 'short',
       day: 'numeric',
       year: 'numeric',

From 2f48a3d7d5ade5d8f09e1b3d12e8c79a7eb3ab5f Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 13 Aug 2025 02:53:32 +0530
Subject: [PATCH 56/57] (feat:chunks) consistent path header

---
 frontend/src/components/Chunks.tsx            |  4 ++--
 frontend/src/components/FileTreeComponent.tsx | 13 ++++---------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Chunks.tsx b/frontend/src/components/Chunks.tsx
index e464b9d0..5c9c25b8 100644
--- a/frontend/src/components/Chunks.tsx
+++ b/frontend/src/components/Chunks.tsx
@@ -284,8 +284,8 @@ const Chunks: React.FC<ChunksProps> = ({
 
   const renderPathNavigation = () => {
     return (
-      <div className="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between text-base gap-2">
-        <div className="flex items-center">
+      <div className="mb-0 min-h-[38px] flex flex-col sm:flex-row sm:items-center sm:justify-between text-base gap-2">
+        <div className="flex w-full items-center sm:w-auto">
           <button
             className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34] transition-all duration-200 font-medium"
             onClick={editingChunk ? () => setEditingChunk(null) : isAddingChunk ? () => setIsAddingChunk(false) : handleGoBack}
diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index 714810c6..1aecc773 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -443,7 +443,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
 
   const renderPathNavigation = () => {
     return (
-      <div className="mb-4 flex flex-col gap-3 text-sm sm:flex-row sm:items-center sm:justify-between">
+      <div className="mb-0 min-h-[38px] flex flex-col gap-2 text-base sm:flex-row sm:items-center sm:justify-between">
         {/* Left side with path navigation */}
         <div className="flex w-full items-center sm:w-auto">
           <button
@@ -454,12 +454,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           </button>
   
           <div className="flex flex-wrap items-center">
-            <img
-              src={OutlineSource}
-              alt="source"
-              className="mr-2 h-5 w-5 flex-shrink-0"
-            />
-            <span className="text-purple-30 font-medium break-words">
+            <span className="text-[#7D54D1] font-semibold break-words">
               {sourceName}
             </span>
             {currentPath.length > 0 && (
@@ -491,7 +486,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
         </div>
 
         {/* Right side with search and add button */}
-        <div className="flex items-center space-x-4">
+        <div className="flex flex-row flex-nowrap items-center gap-2 w-full sm:w-auto justify-end mt-2 sm:mt-0 overflow-x-auto">
           {/* Upload status indicator */}
           {processingRef.current && (
             <div className="text-sm text-gray-500">
@@ -502,7 +497,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           )}
           
           {/* Search element with fixed width matching Figma specs */}
-          <div className="w-[198px]">
+          <div className="hidden lg:block w-[198px]">
             {renderFileSearch()}
           </div>
           

From 1db80d140f4ba54f5dcc753360c3e074e4759e47 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 13 Aug 2025 17:39:39 +0530
Subject: [PATCH 57/57] (fix) search dropdowns

---
 frontend/src/components/Chunks.tsx            |  55 +++---
 frontend/src/components/FileTreeComponent.tsx | 171 +++++++++---------
 2 files changed, 113 insertions(+), 113 deletions(-)

diff --git a/frontend/src/components/Chunks.tsx b/frontend/src/components/Chunks.tsx
index 5c9c25b8..bdec3cf6 100644
--- a/frontend/src/components/Chunks.tsx
+++ b/frontend/src/components/Chunks.tsx
@@ -462,33 +462,36 @@ const Chunks: React.FC<ChunksProps> = ({
         </div>
 
         {fileSearchQuery && (
-          <div className="absolute z-10 max-h-[calc(100vh-200px)] w-full overflow-y-auto rounded-b-[6px] border border-t-0 border-[#D1D9E0] bg-white shadow-lg dark:border-[#6A6A6A] dark:bg-[#1F2023]">
-            {fileSearchResults.length === 0 ? (
-              <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
-                {t('settings.sources.noResults')}
-              </div>
-            ) : (
-              fileSearchResults.map((result, index) => (
-                <div
-                  key={index}
-                  onClick={() => handleSearchResultClick(result)}
-                  className={`flex cursor-pointer items-center px-3 py-2 hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${
-                    index !== fileSearchResults.length - 1
-                      ? 'border-b border-[#D1D9E0] dark:border-[#6A6A6A]'
-                      : ''
-                  }`}
-                >
-                  <img
-                    src={result.isFile ? FileIcon : FolderIcon}
-                    alt={result.isFile ? 'File' : 'Folder'}
-                    className="mr-2 h-4 w-4 flex-shrink-0"
-                  />
-                  <span className="text-sm dark:text-[#E0E0E0]">
-                    {result.path.split('/').pop() || result.path}
-                  </span>
+          <div className="absolute z-10 max-h-[calc(100vh-200px)] w-full overflow-hidden rounded-b-[6px] border border-t-0 border-[#D1D9E0] bg-white shadow-lg dark:border-[#6A6A6A] dark:bg-[#1F2023]">
+            <div className="max-h-[calc(100vh-200px)] overflow-y-auto overflow-x-hidden">
+              {fileSearchResults.length === 0 ? (
+                <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
+                  {t('settings.sources.noResults')}
                 </div>
-              ))
-            )}
+              ) : (
+                fileSearchResults.map((result, index) => (
+                  <div
+                    key={index}
+                    title={result.path}
+                    onClick={() => handleSearchResultClick(result)}
+                    className={`flex cursor-pointer items-center px-3 py-2 hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${
+                      index !== fileSearchResults.length - 1
+                        ? 'border-b border-[#D1D9E0] dark:border-[#6A6A6A]'
+                        : ''
+                    }`}
+                  >
+                    <img
+                      src={result.isFile ? FileIcon : FolderIcon}
+                      alt={result.isFile ? 'File' : 'Folder'}
+                      className="mr-2 h-4 w-4 flex-shrink-0"
+                    />
+                    <span className="text-sm dark:text-[#E0E0E0] truncate">
+                      {result.path.split('/').pop() || result.path}
+                    </span>
+                  </div>
+                ))
+              )}
+            </div>
           </div>
         )}
       </div>
diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index 1aecc773..ad714869 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -452,7 +452,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           >
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
           </button>
-  
+
           <div className="flex flex-wrap items-center">
             <span className="text-[#7D54D1] font-semibold break-words">
               {sourceName}
@@ -485,22 +485,18 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
           </div>
         </div>
 
-        {/* Right side with search and add button */}
-        <div className="flex flex-row flex-nowrap items-center gap-2 w-full sm:w-auto justify-end mt-2 sm:mt-0 overflow-x-auto">
-          {/* Upload status indicator */}
+        <div className="flex relative flex-row flex-nowrap items-center gap-2 w-full sm:w-auto justify-end mt-2 sm:mt-0">
+
           {processingRef.current && (
             <div className="text-sm text-gray-500">
-              {currentOpRef.current === 'add' 
-                ? t('settings.sources.uploadingFilesTitle') 
+              {currentOpRef.current === 'add'
+                ? t('settings.sources.uploadingFilesTitle')
                 : t('settings.sources.deletingTitle')}
             </div>
           )}
-          
-          {/* Search element with fixed width matching Figma specs */}
-          <div className="hidden lg:block w-[198px]">
+
             {renderFileSearch()}
-          </div>
-          
+
           {/* Add file button */}
           {!processingRef.current && (
             <button
@@ -547,32 +543,32 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     const parentRow =
       currentPath.length > 0
         ? [
-            <tr
-              key="parent-dir"
-              className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
-              onClick={navigateUp}
-            >
-              <td className="px-2 py-2 lg:px-4">
-                <div className="flex items-center">
-                  <img
-                    src={FolderIcon}
-                    alt={t('settings.sources.parentFolderAlt')}
-                    className="mr-2 h-4 w-4 flex-shrink-0"
-                  />
-                  <span className="truncate text-sm dark:text-[#E0E0E0]">
-                    ..
-                  </span>
-                </div>
-              </td>
-              <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
-                -
-              </td>
-              <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
-                -
-              </td>
-              <td className="w-10 px-2 py-2 text-sm lg:px-4"></td>
-            </tr>,
-          ]
+          <tr
+            key="parent-dir"
+            className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
+            onClick={navigateUp}
+          >
+            <td className="px-2 py-2 lg:px-4">
+              <div className="flex items-center">
+                <img
+                  src={FolderIcon}
+                  alt={t('settings.sources.parentFolderAlt')}
+                  className="mr-2 h-4 w-4 flex-shrink-0"
+                />
+                <span className="truncate text-sm dark:text-[#E0E0E0]">
+                  ..
+                </span>
+              </div>
+            </td>
+            <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
+              -
+            </td>
+            <td className="px-2 py-2 text-sm lg:px-4 dark:text-[#E0E0E0]">
+              -
+            </td>
+            <td className="w-10 px-2 py-2 text-sm lg:px-4"></td>
+          </tr>,
+        ]
         : [];
 
     // Render directories first, then files
@@ -750,55 +746,56 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
 
   const renderFileSearch = () => {
     return (
-      <div className="relative" ref={searchDropdownRef}>
-          <input
-            type="text"
-            value={searchQuery}
-            onChange={(e) => {
-              setSearchQuery(e.target.value);
-              if (directoryStructure) {
-                setSearchResults(searchFiles(e.target.value, directoryStructure));
-              }
-            }}
-            placeholder={t('settings.sources.searchFiles')}
-            className={`w-full h-[38px] border border-[#D1D9E0] px-4 py-2 dark:border-[#6A6A6A] 
+      <div className="relative w-52" ref={searchDropdownRef}>
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => {
+            setSearchQuery(e.target.value);
+            if (directoryStructure) {
+              setSearchResults(searchFiles(e.target.value, directoryStructure));
+            }
+          }}
+          placeholder={t('settings.sources.searchFiles')}
+          className={`w-full h-[38px] border border-[#D1D9E0] px-4 py-2 dark:border-[#6A6A6A] 
               ${searchQuery ? 'rounded-t-[24px]' : 'rounded-[24px]'} 
               bg-transparent focus:outline-none dark:text-[#E0E0E0]`}
-          />
+        />
 
         {searchQuery && (
-          <div className="absolute z-10 max-h-[calc(100vh-200px)] w-full overflow-y-auto rounded-b-[12px] border border-t-0 border-[#D1D9E0] bg-white shadow-lg dark:border-[#6A6A6A] dark:bg-[#1F2023] transition-all duration-200">
-            {searchResults.length === 0 ? (
-              <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
-                {t('settings.sources.noResults')}
-              </div>
-            ) : (
-              searchResults.map((result, index) => (
-                <div
-                  key={index}
-                  onClick={() => handleSearchSelect(result)}
-                  title={result.path}
-                  className={`flex cursor-pointer items-center px-3 py-2 hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${
-                    index !== searchResults.length - 1
-                      ? 'border-b border-[#D1D9E0] dark:border-[#6A6A6A]'
-                      : ''
-                  }`}
-                >
-                  <img
-                    src={result.isFile ? FileIcon : FolderIcon}
-                    alt={
-                      result.isFile
-                        ? t('settings.sources.fileAlt')
-                        : t('settings.sources.folderAlt')
-                    }
-                    className="mr-2 h-4 w-4 flex-shrink-0"
-                  />
-                  <span className="text-sm dark:text-[#E0E0E0]">
-                    {result.path.split('/').pop() || result.path}
-                  </span>
+          <div className="absolute top-full left-0 right-0 z-10 max-h-[calc(100vh-200px)] w-full overflow-hidden rounded-b-[12px] border border-t-0 border-[#D1D9E0] bg-white shadow-lg dark:border-[#6A6A6A] dark:bg-[#1F2023] transition-all duration-200">
+            <div className="max-h-[calc(100vh-200px)] overflow-y-auto overflow-x-hidden overscroll-contain">
+              {searchResults.length === 0 ? (
+                <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
+                  {t('settings.sources.noResults')}
                 </div>
-              ))
-            )}
+              ) : (
+                searchResults.map((result, index) => (
+                  <div
+                    key={index}
+                    onClick={() => handleSearchSelect(result)}
+                    title={result.path}
+                    className={`flex min-w-0 cursor-pointer items-center px-3 py-2 hover:bg-[#ECEEEF] dark:hover:bg-[#27282D] ${index !== searchResults.length - 1
+                        ? 'border-b border-[#D1D9E0] dark:border-[#6A6A6A]'
+                        : ''
+                      }`}
+                  >
+                    <img
+                      src={result.isFile ? FileIcon : FolderIcon}
+                      alt={
+                        result.isFile
+                          ? t('settings.sources.fileAlt')
+                          : t('settings.sources.folderAlt')
+                      }
+                      className="mr-2 h-4 w-4 flex-shrink-0"
+                    />
+                    <span className="text-sm dark:text-[#E0E0E0] truncate flex-1">
+                      {result.path.split('/').pop() || result.path}
+                    </span>
+                  </div>
+                ))
+              )}
+            </div>
           </div>
         )}
       </div>
@@ -814,12 +811,12 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
 
   const handleFileSelect = (path: string) => {
     const pathParts = path.split('/');
-      const fileName = pathParts.pop() || '';
-      setCurrentPath(pathParts);
-      setSelectedFile({
-        id: path,
-        name: fileName,
-      });
+    const fileName = pathParts.pop() || '';
+    setCurrentPath(pathParts);
+    setSelectedFile({
+      id: path,
+      name: fileName,
+    });
   };
 
   return (