answer endpoint attachments

fix: s3 storage class for image upload

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

README.md

@@ -52,8 +52,11 @@
 - [x] Chatbots menu re-design to handle tools, agent types, and more (April 2025)
 - [x] New input box in the conversation menu (April 2025)
 - [x] Add triggerable actions / tools (webhook) (April 2025)
-- [ ] Anthropic Tool compatibility (May 2025)
-- [ ] Add OAuth 2.0 authentication for tools and sources
+- [x] Agent optimisations (May 2025)
+- [ ] Filesystem sources update (July 2025)
+- [ ] Anthropic Tool compatibility (July 2025)
+- [ ] MCP support (July 2025)
+- [ ] Add OAuth 2.0 authentication for tools and sources (August 2025)
 - [ ] Agent scheduling
 
 You can find our full roadmap [here](https://github.com/orgs/arc53/projects/2). Please don't hesitate to contribute or create issues, it helps us improve DocsGPT!

application/agents/base.py

@@ -91,8 +91,8 @@ class BaseAgent(ABC):
         user_tools_collection = db["user_tools"]
         user_tools = user_tools_collection.find({"user": user, "status": True})
         user_tools = list(user_tools)
-        tools_by_id = {str(tool["_id"]): tool for tool in user_tools}
-        return tools_by_id
+
+        return {str(i): tool for i, tool in enumerate(user_tools)}
 
     def _build_tool_parameters(self, action):
         params = {"type": "object", "properties": {}, "required": []}
@@ -313,7 +313,6 @@ class BaseAgent(ABC):
         if hasattr(response, "message") and getattr(response.message, "content", None):
             yield {"answer": response.message.content}
             return
-
         processed_response_gen = self._llm_handler(
             response, tools_dict, messages, log_context, self.attachments
         )

application/agents/classic_agent.py

@@ -8,7 +8,7 @@ logger = logging.getLogger(__name__)
 
 
 class ClassicAgent(BaseAgent):
-    """A simplified classic agent with clear execution flow.
+    """A simplified agent with clear execution flow.
 
     Usage:
     1. Processes a query through retrieval

application/agents/tools/brave.py

@@ -25,27 +25,35 @@ class BraveSearchTool(Tool):
         else:
             raise ValueError(f"Unknown action: {action_name}")
 
-    def _web_search(self, query, country="ALL", search_lang="en", count=10, 
-                   offset=0, safesearch="off", freshness=None, 
-                   result_filter=None, extra_snippets=False, summary=False):
+    def _web_search(
+        self,
+        query,
+        country="ALL",
+        search_lang="en",
+        count=10,
+        offset=0,
+        safesearch="off",
+        freshness=None,
+        result_filter=None,
+        extra_snippets=False,
+        summary=False,
+    ):
         """
         Performs a web search using the Brave Search API.
         """
         print(f"Performing Brave web search for: {query}")
-        
+
         url = f"{self.base_url}/web/search"
-        
-        # Build query parameters
+
         params = {
             "q": query,
             "country": country,
             "search_lang": search_lang,
             "count": min(count, 20),
             "offset": min(offset, 9),
-            "safesearch": safesearch
+            "safesearch": safesearch,
         }
-        
-        # Add optional parameters only if they have values
+
         if freshness:
             params["freshness"] = freshness
         if result_filter:
@@ -54,68 +62,69 @@ class BraveSearchTool(Tool):
             params["extra_snippets"] = 1
         if summary:
             params["summary"] = 1
-        
-        # Set up headers
         headers = {
             "Accept": "application/json",
             "Accept-Encoding": "gzip",
-            "X-Subscription-Token": self.token
+            "X-Subscription-Token": self.token,
         }
-        
-        # Make the request
+
         response = requests.get(url, params=params, headers=headers)
-        
+
         if response.status_code == 200:
             return {
                 "status_code": response.status_code,
                 "results": response.json(),
-                "message": "Search completed successfully."
+                "message": "Search completed successfully.",
             }
         else:
             return {
                 "status_code": response.status_code,
-                "message": f"Search failed with status code: {response.status_code}."
+                "message": f"Search failed with status code: {response.status_code}.",
             }
-    
-    def _image_search(self, query, country="ALL", search_lang="en", count=5, 
-                     safesearch="off", spellcheck=False):
+
+    def _image_search(
+        self,
+        query,
+        country="ALL",
+        search_lang="en",
+        count=5,
+        safesearch="off",
+        spellcheck=False,
+    ):
         """
         Performs an image search using the Brave Search API.
         """
         print(f"Performing Brave image search for: {query}")
-        
+
         url = f"{self.base_url}/images/search"
-        
-        # Build query parameters
+
         params = {
             "q": query,
             "country": country,
             "search_lang": search_lang,
             "count": min(count, 100),  # API max is 100
             "safesearch": safesearch,
-            "spellcheck": 1 if spellcheck else 0
+            "spellcheck": 1 if spellcheck else 0,
         }
-        
-        # Set up headers
+
         headers = {
             "Accept": "application/json",
             "Accept-Encoding": "gzip",
-            "X-Subscription-Token": self.token
+            "X-Subscription-Token": self.token,
         }
-        
-        # Make the request
+
         response = requests.get(url, params=params, headers=headers)
-        
+
         if response.status_code == 200:
             return {
                 "status_code": response.status_code,
                 "results": response.json(),
-                "message": "Image search completed successfully."
+                "message": "Image search completed successfully.",
             }
         else:
             return {
                 "status_code": response.status_code,
-                "message": f"Image search failed with status code: {response.status_code}."
+                "message": f"Image search failed with status code: {response.status_code}.",
             }
 
     def get_actions_metadata(self):
@@ -130,42 +139,14 @@ class BraveSearchTool(Tool):
                             "type": "string",
                             "description": "The search query (max 400 characters, 50 words)",
                         },
-                        # "country": {
-                        #     "type": "string",
-                        #     "description": "The 2-character country code (default: US)",
-                        # },
                         "search_lang": {
                             "type": "string",
                             "description": "The search language preference (default: en)",
                         },
-                        # "count": {
-                        #     "type": "integer",
-                        #     "description": "Number of results to return (max 20, default: 10)",
-                        # },
-                        # "offset": {
-                        #     "type": "integer",
-                        #     "description": "Pagination offset (max 9, default: 0)",
-                        # },
-                        # "safesearch": {
-                        #     "type": "string",
-                        #     "description": "Filter level for adult content (off, moderate, strict)",
-                        # },
                         "freshness": {
                             "type": "string",
                             "description": "Time filter for results (pd: last 24h, pw: last week, pm: last month, py: last year)",
                         },
-                        # "result_filter": {
-                        #     "type": "string",
-                        #     "description": "Comma-delimited list of result types to include",
-                        # },
-                        # "extra_snippets": {
-                        #     "type": "boolean",
-                        #     "description": "Get additional excerpts from result pages",
-                        # },
-                        # "summary": {
-                        #     "type": "boolean",
-                        #     "description": "Enable summary generation in search results",
-                        # }
                     },
                     "required": ["query"],
                     "additionalProperties": False,
@@ -181,37 +162,21 @@ class BraveSearchTool(Tool):
                             "type": "string",
                             "description": "The search query (max 400 characters, 50 words)",
                         },
-                        # "country": {
-                        #     "type": "string",
-                        #     "description": "The 2-character country code (default: US)",
-                        # },
-                        # "search_lang": {
-                        #     "type": "string",
-                        #     "description": "The search language preference (default: en)",
-                        # },
                         "count": {
                             "type": "integer",
                             "description": "Number of results to return (max 100, default: 5)",
                         },
-                        # "safesearch": {
-                        #     "type": "string",
-                        #     "description": "Filter level for adult content (off, strict). Default: strict",
-                        # },
-                        # "spellcheck": {
-                        #     "type": "boolean",
-                        #     "description": "Whether to spellcheck provided query (default: true)",
-                        # }
                     },
                     "required": ["query"],
                     "additionalProperties": False,
                 },
-            }
+            },
         ]
 
     def get_config_requirements(self):
         return {
             "token": {
-                "type": "string", 
-                "description": "Brave Search API key for authentication"
+                "type": "string",
+                "description": "Brave Search API key for authentication",
             },
-        }
+        }

application/agents/tools/duckduckgo.py

@@ -0,0 +1,114 @@
+from application.agents.tools.base import Tool
+from duckduckgo_search import DDGS
+
+
+class DuckDuckGoSearchTool(Tool):
+    """
+    DuckDuckGo Search
+    A tool for performing web and image searches using DuckDuckGo.
+    """
+
+    def __init__(self, config):
+        self.config = config
+
+    def execute_action(self, action_name, **kwargs):
+        actions = {
+            "ddg_web_search": self._web_search,
+            "ddg_image_search": self._image_search,
+        }
+
+        if action_name in actions:
+            return actions[action_name](**kwargs)
+        else:
+            raise ValueError(f"Unknown action: {action_name}")
+
+    def _web_search(
+        self,
+        query,
+        max_results=5,
+    ):
+        print(f"Performing DuckDuckGo web search for: {query}")
+
+        try:
+            results = DDGS().text(
+                query,
+                max_results=max_results,
+            )
+
+            return {
+                "status_code": 200,
+                "results": results,
+                "message": "Web search completed successfully.",
+            }
+        except Exception as e:
+            return {
+                "status_code": 500,
+                "message": f"Web search failed: {str(e)}",
+            }
+
+    def _image_search(
+        self,
+        query,
+        max_results=5,
+    ):
+        print(f"Performing DuckDuckGo image search for: {query}")
+
+        try:
+            results = DDGS().images(
+                keywords=query,
+                max_results=max_results,
+            )
+
+            return {
+                "status_code": 200,
+                "results": results,
+                "message": "Image search completed successfully.",
+            }
+        except Exception as e:
+            return {
+                "status_code": 500,
+                "message": f"Image search failed: {str(e)}",
+            }
+
+    def get_actions_metadata(self):
+        return [
+            {
+                "name": "ddg_web_search",
+                "description": "Perform a web search using DuckDuckGo.",
+                "parameters": {
+                    "type": "object",
+                    "properties": {
+                        "query": {
+                            "type": "string",
+                            "description": "Search query",
+                        },
+                        "max_results": {
+                            "type": "integer",
+                            "description": "Number of results to return (default: 5)",
+                        },
+                    },
+                    "required": ["query"],
+                },
+            },
+            {
+                "name": "ddg_image_search",
+                "description": "Perform an image search using DuckDuckGo.",
+                "parameters": {
+                    "type": "object",
+                    "properties": {
+                        "query": {
+                            "type": "string",
+                            "description": "Search query",
+                        },
+                        "max_results": {
+                            "type": "integer",
+                            "description": "Number of results to return (default: 5, max: 50)",
+                        },
+                    },
+                    "required": ["query"],
+                },
+            },
+        ]
+
+    def get_config_requirements(self):
+        return {}

application/api/answer/routes.py

@@ -599,6 +599,9 @@ class Answer(Resource):
             "isNoneDoc": fields.Boolean(
                 required=False, description="Flag indicating if no document is used"
             ),
+            "attachments": fields.List(
+                fields.String, required=False, description="List of attachment IDs"
+            ),
         },
     )
 
@@ -614,10 +617,11 @@ class Answer(Resource):
         try:
             question = data["question"]
             history = limit_chat_history(
-                json.loads(data.get("history", [])), gpt_model=gpt_model
+                json.loads(data.get("history", "[]")), gpt_model=gpt_model
             )
             conversation_id = data.get("conversation_id")
             prompt_id = data.get("prompt_id", "default")
+            attachment_ids = data.get("attachments", []) 
             chunks = int(data.get("chunks", 2))
             token_limit = data.get("token_limit", settings.DEFAULT_MAX_HISTORY)
             retriever_name = data.get("retriever", "classic")
@@ -647,10 +651,14 @@ class Answer(Resource):
             if not decoded_token:
                 return make_response({"error": "Unauthorized"}, 401)
 
+            attachments = get_attachments_content(
+                attachment_ids, decoded_token.get("sub")
+            )
+
             prompt = get_prompt(prompt_id)
 
             logger.info(
-                f"/api/answer - request_data: {data}, source: {source}",
+                f"/api/answer - request_data: {data}, source: {source}, attachments: {len(attachments)}",
                 extra={"data": json.dumps({"request_data": data, "source": source})},
             )
 
@@ -664,6 +672,7 @@ class Answer(Resource):
                 prompt=prompt,
                 chat_history=history,
                 decoded_token=decoded_token,
+                attachments=attachments,
             )
 
             retriever = RetrieverCreator.create_retriever(
@@ -694,6 +703,7 @@ class Answer(Resource):
                 isNoneDoc=data.get("isNoneDoc"),
                 index=None,
                 should_save_conversation=False,
+                attachment_ids=attachment_ids,
             ):
                 try:
                     event_data = line.replace("data: ", "").strip()
@@ -744,6 +754,7 @@ class Answer(Resource):
                     llm,
                     decoded_token,
                     api_key=user_api_key,
+                    attachment_ids=attachment_ids,
                 )
             )
 

application/api/internal/routes.py

@@ -37,16 +37,18 @@ def upload_index_files():
     """Upload two files(index.faiss, index.pkl) to the user's folder."""
     if "user" not in request.form:
         return {"status": "no user"}
-    user = secure_filename(request.form["user"])
+    user = request.form["user"] 
     if "name" not in request.form:
         return {"status": "no name"}
-    job_name = secure_filename(request.form["name"])
-    tokens = secure_filename(request.form["tokens"])
-    retriever = secure_filename(request.form["retriever"])
-    id = secure_filename(request.form["id"])
-    type = secure_filename(request.form["type"])
+    job_name = request.form["name"]
+    tokens = request.form["tokens"]
+    retriever = request.form["retriever"]
+    id = request.form["id"]
+    type = request.form["type"]
     remote_data = request.form["remote_data"] if "remote_data" in request.form else None
-    sync_frequency = secure_filename(request.form["sync_frequency"]) if "sync_frequency" 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")
 
     storage = StorageCreator.get_storage()
     index_base_path = f"indexes/{id}"
@@ -85,6 +87,7 @@ def upload_index_files():
                     "retriever": retriever,
                     "remote_data": remote_data,
                     "sync_frequency": sync_frequency,
+                    "file_path": original_file_path,
                 }
             },
         )
@@ -102,6 +105,7 @@ def upload_index_files():
                 "retriever": retriever,
                 "remote_data": remote_data,
                 "sync_frequency": sync_frequency,
+                "file_path": original_file_path,
             }
         )
     return {"status": "ok"}

application/api/user/routes.py

@@ -6,16 +6,25 @@ import secrets
 import shutil
 import uuid
 from functools import wraps
+from typing import Optional, Tuple
 
 from bson.binary import Binary, UuidRepresentation
 from bson.dbref import DBRef
 from bson.objectid import ObjectId
-from flask import Blueprint, current_app, jsonify, make_response, redirect, request
+from flask import (
+    Blueprint,
+    current_app,
+    jsonify,
+    make_response,
+    redirect,
+    request,
+    Response,
+)
 from flask_restx import fields, inputs, Namespace, Resource
+from pymongo import ReturnDocument
 from werkzeug.utils import secure_filename
 
 from application.agents.tools.tool_manager import ToolManager
-from pymongo import ReturnDocument
 
 from application.api.user.tasks import (
     ingest,
@@ -28,7 +37,12 @@ from application.core.settings import settings
 from application.extensions import api
 from application.storage.storage_creator import StorageCreator
 from application.tts.google_tts import GoogleTTS
-from application.utils import check_required_fields, validate_function_name
+from application.utils import (
+    check_required_fields,
+    generate_image_url,
+    safe_filename,
+    validate_function_name,
+)
 from application.vectorstore.vector_creator import VectorCreator
 
 storage = StorageCreator.get_storage()
@@ -143,6 +157,29 @@ def get_vector_store(source_id):
     return store
 
 
+def handle_image_upload(
+    request, existing_url: str, user: str, storage, base_path: str = "attachments/"
+) -> Tuple[str, Optional[Response]]:
+    image_url = existing_url
+
+    if "image" in request.files:
+        file = request.files["image"]
+        if file.filename != "":
+            filename = secure_filename(file.filename)
+            upload_path = f"{settings.UPLOAD_FOLDER.rstrip('/')}/{user}/{base_path.rstrip('/')}/{uuid.uuid4()}_{filename}"
+            try:
+                storage.save_file(file, upload_path, storage_class="STANDARD")
+                image_url = upload_path
+            except Exception as e:
+                current_app.logger.error(f"Error uploading image: {e}")
+                return None, make_response(
+                    jsonify({"success": False, "message": "Image upload failed"}),
+                    400,
+                )
+
+    return image_url, None
+
+
 @user_ns.route("/api/delete_conversation")
 class DeleteConversation(Resource):
     @api.doc(
@@ -253,7 +290,7 @@ class GetSingleConversation(Resource):
             )
             if not conversation:
                 return make_response(jsonify({"status": "not found"}), 404)
-            
+
             # Process queries to include attachment names
             queries = conversation["queries"]
             for query in queries:
@@ -265,13 +302,18 @@ class GetSingleConversation(Resource):
                                 {"_id": ObjectId(attachment_id)}
                             )
                             if attachment:
-                                attachment_details.append({
-                                    "id": str(attachment["_id"]),
-                                    "fileName": attachment.get("filename", "Unknown file")
-                                })
+                                attachment_details.append(
+                                    {
+                                        "id": str(attachment["_id"]),
+                                        "fileName": attachment.get(
+                                            "filename", "Unknown file"
+                                        ),
+                                    }
+                                )
                         except Exception as e:
                             current_app.logger.error(
-                                f"Error retrieving attachment {attachment_id}: {e}", exc_info=True
+                                f"Error retrieving attachment {attachment_id}: {e}",
+                                exc_info=True,
                             )
                     query["attachments"] = attachment_details
         except Exception as err:
@@ -497,29 +539,30 @@ class UploadFile(Resource):
                 ),
                 400,
             )
-        user = secure_filename(decoded_token.get("sub"))
-        job_name = secure_filename(request.form["name"])
+        user = decoded_token.get("sub")
+        job_name = request.form["name"]
+
+        # Create safe versions for filesystem operations
+        safe_user = safe_filename(user)
+        dir_name = safe_filename(job_name)
 
         try:
-            from application.storage.storage_creator import StorageCreator
-
             storage = StorageCreator.get_storage()
-
-            base_path = f"{settings.UPLOAD_FOLDER}/{user}/{job_name}"
+            base_path = f"{settings.UPLOAD_FOLDER}/{safe_user}/{dir_name}"
 
             if len(files) > 1:
                 temp_files = []
                 for file in files:
-                    filename = secure_filename(file.filename)
+                    filename = safe_filename(file.filename)
                     temp_path = f"{base_path}/temp/{filename}"
                     storage.save_file(file, temp_path)
                     temp_files.append(temp_path)
                     print(f"Saved file: {filename}")
-                zip_filename = f"{job_name}.zip"
+                zip_filename = f"{dir_name}.zip"
                 zip_path = f"{base_path}/{zip_filename}"
                 zip_temp_path = None
 
-                def create_zip_archive(temp_paths, job_name, storage):
+                def create_zip_archive(temp_paths, dir_name, storage):
                     import tempfile
 
                     with tempfile.NamedTemporaryFile(
@@ -559,7 +602,7 @@ class UploadFile(Resource):
                     return zip_output_path
 
                 try:
-                    zip_temp_path = create_zip_archive(temp_files, job_name, storage)
+                    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(
@@ -584,6 +627,8 @@ class UploadFile(Resource):
                         job_name,
                         zip_filename,
                         user,
+                        dir_name,
+                        safe_user,
                     )
                 finally:
                     # Clean up temporary files
@@ -604,7 +649,7 @@ class UploadFile(Resource):
                 # For single file
 
                 file = files[0]
-                filename = secure_filename(file.filename)
+                filename = safe_filename(file.filename)
                 file_path = f"{base_path}/{filename}"
 
                 storage.save_file(file, file_path)
@@ -631,6 +676,8 @@ class UploadFile(Resource):
                     job_name,
                     filename,  # Corrected variable for single-file case
                     user,
+                    dir_name,
+                    safe_user,
                 )
         except Exception as err:
             current_app.logger.error(f"Error uploading file: {err}", exc_info=True)
@@ -832,29 +879,6 @@ class CombinedJson(Resource):
                         "syncFrequency": index.get("sync_frequency", ""),
                     }
                 )
-            if "duckduck_search" in settings.RETRIEVERS_ENABLED:
-                data.append(
-                    {
-                        "name": "DuckDuckGo Search",
-                        "date": "duckduck_search",
-                        "model": settings.EMBEDDINGS_NAME,
-                        "location": "custom",
-                        "tokens": "",
-                        "retriever": "duckduck_search",
-                    }
-                )
-            if "brave_search" in settings.RETRIEVERS_ENABLED:
-                data.append(
-                    {
-                        "name": "Brave Search",
-                        "language": "en",
-                        "date": "brave_search",
-                        "model": settings.EMBEDDINGS_NAME,
-                        "location": "custom",
-                        "tokens": "",
-                        "retriever": "brave_search",
-                    }
-                )
         except Exception as err:
             current_app.logger.error(f"Error retrieving sources: {err}", exc_info=True)
             return make_response(jsonify({"success": False}), 400)
@@ -1064,27 +1088,28 @@ class UpdatePrompt(Resource):
 
 @user_ns.route("/api/get_agent")
 class GetAgent(Resource):
-    @api.doc(params={"id": "ID of the agent"}, description="Get a single agent by ID")
+    @api.doc(params={"id": "Agent ID"}, description="Get agent by 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")
-        agent_id = request.args.get("id")
-        if not agent_id:
-            return make_response(
-                jsonify({"success": False, "message": "ID is required"}), 400
-            )
+        if not (decoded_token := request.decoded_token):
+            return {"success": False}, 401
+
+        if not (agent_id := request.args.get("id")):
+            return {"success": False, "message": "ID required"}, 400
+
         try:
             agent = agents_collection.find_one(
-                {"_id": ObjectId(agent_id), "user": user}
+                {"_id": ObjectId(agent_id), "user": decoded_token["sub"]}
             )
             if not agent:
-                return make_response(jsonify({"status": "Not found"}), 404)
+                return {"status": "Not found"}, 404
+
             data = {
                 "id": str(agent["_id"]),
                 "name": agent["name"],
                 "description": agent.get("description", ""),
+                "image": (
+                    generate_image_url(agent["image"]) if agent.get("image") else ""
+                ),
                 "source": (
                     str(source_doc["_id"])
                     if isinstance(agent.get("source"), DBRef)
@@ -1111,19 +1136,20 @@ class GetAgent(Resource):
                 "shared_metadata": agent.get("shared_metadata", {}),
                 "shared_token": agent.get("shared_token", ""),
             }
-        except Exception as err:
-            current_app.logger.error(f"Error retrieving agent: {err}", exc_info=True)
-            return make_response(jsonify({"success": False}), 400)
-        return make_response(jsonify(data), 200)
+            return make_response(jsonify(data), 200)
+
+        except Exception as e:
+            current_app.logger.error(f"Agent fetch error: {e}", exc_info=True)
+            return {"success": False}, 400
 
 
 @user_ns.route("/api/get_agents")
 class GetAgents(Resource):
     @api.doc(description="Retrieve agents for the user")
     def get(self):
-        decoded_token = request.decoded_token
-        if not decoded_token:
-            return make_response(jsonify({"success": False}), 401)
+        if not (decoded_token := request.decoded_token):
+            return {"success": False}, 401
+
         user = decoded_token.get("sub")
         try:
             user_doc = ensure_user_doc(user)
@@ -1135,6 +1161,9 @@ class GetAgents(Resource):
                     "id": str(agent["_id"]),
                     "name": agent["name"],
                     "description": agent.get("description", ""),
+                    "image": (
+                        generate_image_url(agent["image"]) if agent.get("image") else ""
+                    ),
                     "source": (
                         str(source_doc["_id"])
                         if isinstance(agent.get("source"), DBRef)
@@ -1179,8 +1208,8 @@ class CreateAgent(Resource):
             "description": fields.String(
                 required=True, description="Description of the agent"
             ),
-            "image": fields.String(
-                required=False, description="Image URL or identifier"
+            "image": fields.Raw(
+                required=False, description="Image file upload", type="file"
             ),
             "source": fields.String(required=True, description="Source ID"),
             "chunks": fields.Integer(required=True, description="Chunks count"),
@@ -1199,12 +1228,20 @@ class CreateAgent(Resource):
     @api.expect(create_agent_model)
     @api.doc(description="Create a new agent")
     def post(self):
-        decoded_token = request.decoded_token
-        if not decoded_token:
-            return make_response(jsonify({"success": False}), 401)
+        if not (decoded_token := request.decoded_token):
+            return {"success": False}, 401
         user = decoded_token.get("sub")
-        data = request.get_json()
-
+        if request.content_type == "application/json":
+            data = request.get_json()
+        else:
+            print(request.form)
+            data = request.form.to_dict()
+            if "tools" in data:
+                try:
+                    data["tools"] = json.loads(data["tools"])
+                except json.JSONDecodeError:
+                    data["tools"] = []
+        print(f"Received data: {data}")
         if data.get("status") not in ["draft", "published"]:
             return make_response(
                 jsonify({"success": False, "message": "Invalid status"}), 400
@@ -1225,13 +1262,20 @@ class CreateAgent(Resource):
         missing_fields = check_required_fields(data, required_fields)
         if missing_fields:
             return missing_fields
+
+        image_url, error = handle_image_upload(request, "", user, storage)
+        if error:
+            return make_response(
+                jsonify({"success": False, "message": "Image upload failed"}), 400
+            )
+
         try:
             key = str(uuid.uuid4())
             new_agent = {
                 "user": user,
                 "name": data.get("name"),
                 "description": data.get("description", ""),
-                "image": data.get("image", ""),
+                "image": image_url,
                 "source": (
                     DBRef("sources", ObjectId(data.get("source")))
                     if ObjectId.is_valid(data.get("source"))
@@ -1289,11 +1333,18 @@ class UpdateAgent(Resource):
     @api.expect(update_agent_model)
     @api.doc(description="Update an existing agent")
     def put(self, agent_id):
-        decoded_token = request.decoded_token
-        if not decoded_token:
-            return make_response(jsonify({"success": False}), 401)
+        if not (decoded_token := request.decoded_token):
+            return {"success": False}, 401
         user = decoded_token.get("sub")
-        data = request.get_json()
+        if request.content_type == "application/json":
+            data = request.get_json()
+        else:
+            data = request.form.to_dict()
+            if "tools" in data:
+                try:
+                    data["tools"] = json.loads(data["tools"])
+                except json.JSONDecodeError:
+                    data["tools"] = []
 
         if not ObjectId.is_valid(agent_id):
             return make_response(
@@ -1318,6 +1369,15 @@ class UpdateAgent(Resource):
                 ),
                 404,
             )
+
+        image_url, error = handle_image_upload(
+            request, existing_agent.get("image", ""), user, storage
+        )
+        if error:
+            return make_response(
+                jsonify({"success": False, "message": "Image upload failed"}), 400
+            )
+
         update_fields = {}
         allowed_fields = [
             "name",
@@ -1389,6 +1449,8 @@ class UpdateAgent(Resource):
                             )
                 else:
                     update_fields[field] = data[field]
+        if image_url:
+            update_fields["image"] = image_url
         if not update_fields:
             return make_response(
                 jsonify({"success": False, "message": "No update data provided"}), 400
@@ -1537,6 +1599,9 @@ class PinnedAgents(Resource):
                     "id": str(agent["_id"]),
                     "name": agent.get("name", ""),
                     "description": agent.get("description", ""),
+                    "image": (
+                        generate_image_url(agent["image"]) if agent.get("image") else ""
+                    ),
                     "source": (
                         str(db.dereference(agent["source"])["_id"])
                         if "source" in agent
@@ -1697,6 +1762,11 @@ class SharedAgent(Resource):
                 "id": agent_id,
                 "user": shared_agent.get("user", ""),
                 "name": shared_agent.get("name", ""),
+                "image": (
+                    generate_image_url(shared_agent["image"])
+                    if shared_agent.get("image")
+                    else ""
+                ),
                 "description": shared_agent.get("description", ""),
                 "tools": shared_agent.get("tools", []),
                 "tool_details": resolve_tool_details(shared_agent.get("tools", [])),
@@ -1772,6 +1842,9 @@ class SharedAgents(Resource):
                     "id": str(agent["_id"]),
                     "name": agent.get("name", ""),
                     "description": agent.get("description", ""),
+                    "image": (
+                        generate_image_url(agent["image"]) if agent.get("image") else ""
+                    ),
                     "tools": agent.get("tools", []),
                     "tool_details": resolve_tool_details(agent.get("tools", [])),
                     "agent_type": agent.get("agent_type", ""),
@@ -2236,7 +2309,7 @@ class GetPubliclySharedConversations(Resource):
                 conversation_queries = conversation["queries"][
                     : (shared["first_n_queries"])
                 ]
-                
+
                 for query in conversation_queries:
                     if "attachments" in query and query["attachments"]:
                         attachment_details = []
@@ -2246,13 +2319,18 @@ class GetPubliclySharedConversations(Resource):
                                     {"_id": ObjectId(attachment_id)}
                                 )
                                 if attachment:
-                                    attachment_details.append({
-                                        "id": str(attachment["_id"]),
-                                        "fileName": attachment.get("filename", "Unknown file")
-                                    })
+                                    attachment_details.append(
+                                        {
+                                            "id": str(attachment["_id"]),
+                                            "fileName": attachment.get(
+                                                "filename", "Unknown file"
+                                            ),
+                                        }
+                                    )
                             except Exception as e:
                                 current_app.logger.error(
-                                    f"Error retrieving attachment {attachment_id}: {e}", exc_info=True
+                                    f"Error retrieving attachment {attachment_id}: {e}",
+                                    exc_info=True,
                                 )
                         query["attachments"] = attachment_details
             else:
@@ -3457,7 +3535,7 @@ class StoreAttachment(Resource):
                 jsonify({"status": "error", "message": "Missing file"}),
                 400,
             )
-        user = secure_filename(decoded_token.get("sub"))
+        user = safe_filename(decoded_token.get("sub"))
 
         try:
             attachment_id = ObjectId()
@@ -3488,3 +3566,30 @@ class StoreAttachment(Resource):
         except Exception as err:
             current_app.logger.error(f"Error storing attachment: {err}", exc_info=True)
             return make_response(jsonify({"success": False, "error": str(err)}), 400)
+
+
+@user_ns.route("/api/images/<path:image_path>")
+class ServeImage(Resource):
+    @api.doc(description="Serve an image from storage")
+    def get(self, image_path):
+        try:
+            file_obj = storage.get_file(image_path)
+            extension = image_path.split(".")[-1].lower()
+            content_type = f"image/{extension}"
+            if extension == "jpg":
+                content_type = "image/jpeg"
+
+            response = make_response(file_obj.read())
+            response.headers.set("Content-Type", content_type)
+            response.headers.set("Cache-Control", "max-age=86400")
+
+            return response
+        except FileNotFoundError:
+            return make_response(
+                jsonify({"success": False, "message": "Image not found"}), 404
+            )
+        except Exception as e:
+            current_app.logger.error(f"Error serving image: {e}")
+            return make_response(
+                jsonify({"success": False, "message": "Error retrieving image"}), 500
+            )

application/api/user/tasks.py

@@ -11,8 +11,8 @@ from application.worker import (
 
 
 @celery.task(bind=True)
-def ingest(self, directory, formats, name_job, filename, user):
-    resp = ingest_worker(self, directory, formats, name_job, filename, user)
+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)
     return resp
 
 

application/core/settings.py

@@ -33,7 +33,7 @@ class Settings(BaseSettings):
     VECTOR_STORE: str = (
         "faiss"  #  "faiss" or "elasticsearch" or "qdrant" or "milvus" or "lancedb"
     )
-    RETRIEVERS_ENABLED: list = ["classic_rag", "duckduck_search"]  # also brave_search
+    RETRIEVERS_ENABLED: list = ["classic_rag"]
     AGENT_NAME: str = "classic"
     FALLBACK_LLM_PROVIDER: Optional[str] = None  # provider for fallback llm
     FALLBACK_LLM_NAME: Optional[str] = None  # model name for fallback llm
@@ -99,10 +99,10 @@ class Settings(BaseSettings):
     LANCEDB_TABLE_NAME: Optional[str] = (
         "docsgpts"  # Name of the table to use for storing vectors
     )
-    BRAVE_SEARCH_API_KEY: Optional[str] = None
 
     FLASK_DEBUG_MODE: bool = False
     STORAGE_TYPE: str = "local"  # local or s3
+    URL_STRATEGY: str = "backend"  # backend or s3
 
     JWT_SECRET_KEY: str = ""
 

application/llm/handlers/handler_creator.py

@@ -14,5 +14,5 @@ class LLMHandlerCreator:
     def create_handler(cls, llm_type: str, *args, **kwargs) -> LLMHandler:
         handler_class = cls.handlers.get(llm_type.lower())
         if not handler_class:
-            raise ValueError(f"No LLM handler class found for type {llm_type}")
+            handler_class = OpenAILLMHandler
         return handler_class(*args, **kwargs)

application/retriever/brave_search.py

@@ -1,112 +0,0 @@
-import json
-
-from langchain_community.tools import BraveSearch
-
-from application.core.settings import settings
-from application.llm.llm_creator import LLMCreator
-from application.retriever.base import BaseRetriever
-
-
-class BraveRetSearch(BaseRetriever):
-
-    def __init__(
-        self,
-        source,
-        chat_history,
-        prompt,
-        chunks=2,
-        token_limit=150,
-        gpt_model="docsgpt",
-        user_api_key=None,
-        decoded_token=None,
-    ):
-        self.question = ""
-        self.source = source
-        self.chat_history = chat_history
-        self.prompt = prompt
-        self.chunks = chunks
-        self.gpt_model = gpt_model
-        self.token_limit = (
-            token_limit
-            if token_limit
-            < settings.LLM_TOKEN_LIMITS.get(
-                self.gpt_model, settings.DEFAULT_MAX_HISTORY
-            )
-            else settings.LLM_TOKEN_LIMITS.get(
-                self.gpt_model, settings.DEFAULT_MAX_HISTORY
-            )
-        )
-        self.user_api_key = user_api_key
-        self.decoded_token = decoded_token
-
-    def _get_data(self):
-        if self.chunks == 0:
-            docs = []
-        else:
-            search = BraveSearch.from_api_key(
-                api_key=settings.BRAVE_SEARCH_API_KEY,
-                search_kwargs={"count": int(self.chunks)},
-            )
-            results = search.run(self.question)
-            results = json.loads(results)
-
-            docs = []
-            for i in results:
-                try:
-                    title = i["title"]
-                    link = i["link"]
-                    snippet = i["snippet"]
-                    docs.append({"text": snippet, "title": title, "link": link})
-                except IndexError:
-                    pass
-        if settings.LLM_PROVIDER == "llama.cpp":
-            docs = [docs[0]]
-
-        return docs
-
-    def gen(self):
-        docs = self._get_data()
-
-        # join all page_content together with a newline
-        docs_together = "\n".join([doc["text"] for doc in docs])
-        p_chat_combine = self.prompt.replace("{summaries}", docs_together)
-        messages_combine = [{"role": "system", "content": p_chat_combine}]
-        for doc in docs:
-            yield {"source": doc}
-
-        if len(self.chat_history) > 0:
-            for i in self.chat_history:
-                if "prompt" in i and "response" in i:
-                    messages_combine.append({"role": "user", "content": i["prompt"]})
-                    messages_combine.append(
-                        {"role": "assistant", "content": i["response"]}
-                    )
-        messages_combine.append({"role": "user", "content": self.question})
-
-        llm = LLMCreator.create_llm(
-            settings.LLM_PROVIDER,
-            api_key=settings.API_KEY,
-            user_api_key=self.user_api_key,
-            decoded_token=self.decoded_token,
-        )
-
-        completion = llm.gen_stream(model=self.gpt_model, messages=messages_combine)
-        for line in completion:
-            yield {"answer": str(line)}
-
-    def search(self, query: str = ""):
-        if query:
-            self.question = query
-        return self._get_data()
-
-    def get_params(self):
-        return {
-            "question": self.question,
-            "source": self.source,
-            "chat_history": self.chat_history,
-            "prompt": self.prompt,
-            "chunks": self.chunks,
-            "token_limit": self.token_limit,
-            "gpt_model": self.gpt_model,
-            "user_api_key": self.user_api_key,
-        }

application/retriever/duckduck_search.py

@@ -1,111 +0,0 @@
-from langchain_community.tools import DuckDuckGoSearchResults
-from langchain_community.utilities import DuckDuckGoSearchAPIWrapper
-
-from application.core.settings import settings
-from application.llm.llm_creator import LLMCreator
-from application.retriever.base import BaseRetriever
-
-
-class DuckDuckSearch(BaseRetriever):
-
-    def __init__(
-        self,
-        source,
-        chat_history,
-        prompt,
-        chunks=2,
-        token_limit=150,
-        gpt_model="docsgpt",
-        user_api_key=None,
-        decoded_token=None,
-    ):
-        self.question = ""
-        self.source = source
-        self.chat_history = chat_history
-        self.prompt = prompt
-        self.chunks = chunks
-        self.gpt_model = gpt_model
-        self.token_limit = (
-            token_limit
-            if token_limit
-            < settings.LLM_TOKEN_LIMITS.get(
-                self.gpt_model, settings.DEFAULT_MAX_HISTORY
-            )
-            else settings.LLM_TOKEN_LIMITS.get(
-                self.gpt_model, settings.DEFAULT_MAX_HISTORY
-            )
-        )
-        self.user_api_key = user_api_key
-        self.decoded_token = decoded_token
-
-    def _get_data(self):
-        if self.chunks == 0:
-            docs = []
-        else:
-            wrapper = DuckDuckGoSearchAPIWrapper(max_results=self.chunks)
-            search = DuckDuckGoSearchResults(api_wrapper=wrapper, output_format="list")
-            results = search.run(self.question)
-
-            docs = []
-            for i in results:
-                try:
-                    docs.append(
-                        {
-                            "text": i.get("snippet", "").strip(),
-                            "title": i.get("title", "").strip(),
-                            "link": i.get("link", "").strip(),
-                        }
-                    )
-                except IndexError:
-                    pass
-        if settings.LLM_PROVIDER == "llama.cpp":
-            docs = [docs[0]]
-
-        return docs
-
-    def gen(self):
-        docs = self._get_data()
-
-        # join all page_content together with a newline
-        docs_together = "\n".join([doc["text"] for doc in docs])
-        p_chat_combine = self.prompt.replace("{summaries}", docs_together)
-        messages_combine = [{"role": "system", "content": p_chat_combine}]
-        for doc in docs:
-            yield {"source": doc}
-
-        if len(self.chat_history) > 0:
-            for i in self.chat_history:
-                if "prompt" in i and "response" in i:
-                    messages_combine.append({"role": "user", "content": i["prompt"]})
-                    messages_combine.append(
-                        {"role": "assistant", "content": i["response"]}
-                    )
-        messages_combine.append({"role": "user", "content": self.question})
-
-        llm = LLMCreator.create_llm(
-            settings.LLM_PROVIDER,
-            api_key=settings.API_KEY,
-            user_api_key=self.user_api_key,
-            decoded_token=self.decoded_token,
-        )
-
-        completion = llm.gen_stream(model=self.gpt_model, messages=messages_combine)
-        for line in completion:
-            yield {"answer": str(line)}
-
-    def search(self, query: str = ""):
-        if query:
-            self.question = query
-        return self._get_data()
-
-    def get_params(self):
-        return {
-            "question": self.question,
-            "source": self.source,
-            "chat_history": self.chat_history,
-            "prompt": self.prompt,
-            "chunks": self.chunks,
-            "token_limit": self.token_limit,
-            "gpt_model": self.gpt_model,
-            "user_api_key": self.user_api_key,
-        }

application/retriever/retriever_creator.py

@@ -1,13 +1,9 @@
 from application.retriever.classic_rag import ClassicRAG
-from application.retriever.duckduck_search import DuckDuckSearch
-from application.retriever.brave_search import BraveRetSearch
 
 
 class RetrieverCreator:
     retrievers = {
         "classic": ClassicRAG,
-        "duckduck_search": DuckDuckSearch,
-        "brave_search": BraveRetSearch,
         "default": ClassicRAG,
     }
 

application/storage/base.py

@@ -1,4 +1,5 @@
 """Base storage class for file system abstraction."""
+
 from abc import ABC, abstractmethod
 from typing import BinaryIO, List, Callable
 
@@ -7,7 +8,7 @@ class BaseStorage(ABC):
     """Abstract base class for storage implementations."""
 
     @abstractmethod
-    def save_file(self, file_data: BinaryIO, path: str) -> dict:
+    def save_file(self, file_data: BinaryIO, path: str, **kwargs) -> dict:
         """
         Save a file to storage.
 

application/storage/s3.py

@@ -1,13 +1,14 @@
 """S3 storage implementation."""
+
 import io
-from typing import BinaryIO, List, Callable
 import os
+from typing import BinaryIO, Callable, List
 
 import boto3
-from botocore.exceptions import ClientError
+from application.core.settings import settings
 
 from application.storage.base import BaseStorage
-from application.core.settings import settings
+from botocore.exceptions import ClientError
 
 
 class S3Storage(BaseStorage):
@@ -20,38 +21,48 @@ class S3Storage(BaseStorage):
         Args:
             bucket_name: S3 bucket name (optional, defaults to settings)
         """
-        self.bucket_name = bucket_name or getattr(settings, "S3_BUCKET_NAME", "docsgpt-test-bucket")
+        self.bucket_name = bucket_name or getattr(
+            settings, "S3_BUCKET_NAME", "docsgpt-test-bucket"
+        )
 
         # Get credentials from settings
+
         aws_access_key_id = getattr(settings, "SAGEMAKER_ACCESS_KEY", None)
         aws_secret_access_key = getattr(settings, "SAGEMAKER_SECRET_KEY", None)
         region_name = getattr(settings, "SAGEMAKER_REGION", None)
 
         self.s3 = boto3.client(
-            's3',
+            "s3",
             aws_access_key_id=aws_access_key_id,
             aws_secret_access_key=aws_secret_access_key,
-            region_name=region_name
+            region_name=region_name,
         )
 
-    def save_file(self, file_data: BinaryIO, path: str) -> dict:
+    def save_file(
+        self,
+        file_data: BinaryIO,
+        path: str,
+        storage_class: str = "INTELLIGENT_TIERING",
+        **kwargs,
+    ) -> dict:
         """Save a file to S3 storage."""
-        self.s3.upload_fileobj(file_data, self.bucket_name, path)
+        self.s3.upload_fileobj(
+            file_data, self.bucket_name, path, ExtraArgs={"StorageClass": storage_class}
+        )
 
         region = getattr(settings, "SAGEMAKER_REGION", None)
 
         return {
-            'storage_type': 's3',
-            'bucket_name': self.bucket_name,
-            'uri': f's3://{self.bucket_name}/{path}',
-            'region': region
+            "storage_type": "s3",
+            "bucket_name": self.bucket_name,
+            "uri": f"s3://{self.bucket_name}/{path}",
+            "region": region,
         }
 
     def get_file(self, path: str) -> BinaryIO:
         """Get a file from S3 storage."""
         if not self.file_exists(path):
             raise FileNotFoundError(f"File not found: {path}")
-
         file_obj = io.BytesIO()
         self.s3.download_fileobj(self.bucket_name, path, file_obj)
         file_obj.seek(0)
@@ -76,18 +87,17 @@ class S3Storage(BaseStorage):
     def list_files(self, directory: str) -> List[str]:
         """List all files in a directory in S3 storage."""
         # Ensure directory ends with a slash if it's not empty
-        if directory and not directory.endswith('/'):
-            directory += '/'
 
+        if directory and not directory.endswith("/"):
+            directory += "/"
         result = []
-        paginator = self.s3.get_paginator('list_objects_v2')
+        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']:
-                    result.append(obj['Key'])
-
+            if "Contents" in page:
+                for obj in page["Contents"]:
+                    result.append(obj["Key"])
         return result
 
     def process_file(self, path: str, processor_func: Callable, **kwargs):
@@ -98,22 +108,24 @@ class S3Storage(BaseStorage):
             path: Path to the file
             processor_func: Function that processes the file
             **kwargs: Additional arguments to pass to the processor function
-        
+
         Returns:
             The result of the processor function
         """
-        import tempfile
         import logging
-        
+        import tempfile
+
         if not self.file_exists(path):
             raise FileNotFoundError(f"File not found in S3: {path}")
-        
-        with tempfile.NamedTemporaryFile(suffix=os.path.splitext(path)[1], delete=True) as temp_file:
+        with tempfile.NamedTemporaryFile(
+            suffix=os.path.splitext(path)[1], delete=True
+        ) as temp_file:
             try:
                 # Download the file from S3 to the temporary file
+
                 self.s3.download_fileobj(self.bucket_name, path, temp_file)
                 temp_file.flush()
-                
+
                 return processor_func(local_path=temp_file.name, **kwargs)
             except Exception as e:
                 logging.error(f"Error processing S3 file {path}: {e}", exc_info=True)

application/utils.py

@@ -1,8 +1,12 @@
 import hashlib
+import os
 import re
+import uuid
 
 import tiktoken
 from flask import jsonify, make_response
+from werkzeug.utils import secure_filename
+from application.core.settings import settings
 
 
 _encoding = None
@@ -15,6 +19,31 @@ def get_encoding():
     return _encoding
 
 
+def safe_filename(filename):
+    """
+    Creates a safe filename that preserves the original extension.
+    Uses secure_filename, but ensures a proper filename is returned even with non-Latin characters.
+
+    Args:
+        filename (str): The original filename
+
+    Returns:
+        str: A safe filename that can be used for storage
+    """
+    if not filename:
+        return str(uuid.uuid4())
+
+    _, extension = os.path.splitext(filename)
+
+    safe_name = secure_filename(filename)
+
+    # If secure_filename returns just the extension or an empty string
+    if not safe_name or safe_name == extension.lstrip("."):
+        return f"{str(uuid.uuid4())}{extension}"
+
+    return safe_name
+
+
 def num_tokens_from_string(string: str) -> int:
     encoding = get_encoding()
     if isinstance(string, str):
@@ -109,3 +138,14 @@ def validate_function_name(function_name):
     if not re.match(r"^[a-zA-Z0-9_-]+$", function_name):
         return False
     return True
+
+
+def generate_image_url(image_path):
+    strategy = getattr(settings, "URL_STRATEGY", "backend")
+    if strategy == "s3":
+        bucket_name = getattr(settings, "S3_BUCKET_NAME", "docsgpt-test-bucket")
+        region_name = getattr(settings, "SAGEMAKER_REGION", "eu-central-1")
+        return f"https://{bucket_name}.s3.{region_name}.amazonaws.com/{image_path}"
+    else:
+        base_url = getattr(settings, "API_URL", "http://localhost:7091")
+        return f"{base_url}/api/images/{image_path}"

application/worker.py

@@ -194,7 +194,7 @@ def run_agent_logic(agent_config, input_data):
 
 # Define the main function for ingesting and processing documents.
 def ingest_worker(
-    self, directory, formats, name_job, filename, user, retriever="classic"
+    self, directory, formats, job_name, filename, user, dir_name=None, user_dir=None, retriever="classic"
 ):
     """
     Ingest and process documents.
@@ -203,9 +203,11 @@ def ingest_worker(
         self: Reference to the instance of the task.
         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"]).
-        name_job (str): Name of the job for this ingestion task.
+        job_name (str): Name of the job for this ingestion task (original, unsanitized).
         filename (str): Name of the file to be ingested.
-        user (str): Identifier for the user initiating the ingestion.
+        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:
@@ -216,13 +218,13 @@ def ingest_worker(
     limit = None
     exclude = True
     sample = False
-
+    
     storage = StorageCreator.get_storage()
 
-    full_path = os.path.join(directory, user, name_job)
+    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": name_job})
+    logging.info(f"Ingest file: {full_path}", extra={"user": user, "job": job_name})
 
     # Create temporary working directory
     with tempfile.TemporaryDirectory() as temp_dir:
@@ -283,13 +285,14 @@ def ingest_worker(
                 for i in range(min(5, len(raw_docs))):
                     logging.info(f"Sample document {i}: {raw_docs[i]}")
             file_data = {
-                "name": name_job,
+                "name": job_name,  # Use original job_name
                 "file": filename,
-                "user": user,
+                "user": user,  # Use original user
                 "tokens": tokens,
                 "retriever": retriever,
                 "id": str(id),
                 "type": "local",
+                "original_file_path": source_file_path,
             }
 
             upload_index(vector_store_path, file_data)
@@ -301,9 +304,9 @@ def ingest_worker(
     return {
         "directory": directory,
         "formats": formats,
-        "name_job": name_job,
+        "name_job": job_name,  # Use original job_name
         "filename": filename,
-        "user": user,
+        "user": user,  # Use original user
         "limited": False,
     }
 

deployment/docker-compose.yaml

@@ -28,9 +28,9 @@ services:
     ports:
       - "7091:7091"
     volumes:
-      - ../application/indexes:/app/application/indexes
+      - ../application/indexes:/app/indexes
       - ../application/inputs:/app/inputs
-      - ../application/vectors:/app/application/vectors
+      - ../application/vectors:/app/vectors
     depends_on:
       - redis
       - mongo
@@ -50,9 +50,9 @@ services:
       - API_URL=http://backend:7091
       - CACHE_REDIS_URL=redis://redis:6379/2
     volumes:
-      - ../application/indexes:/app/application/indexes
+      - ../application/indexes:/app/indexes
       - ../application/inputs:/app/inputs
-      - ../application/vectors:/app/application/vectors
+      - ../application/vectors:/app/vectors
     depends_on:
       - redis
       - mongo

docs/pages/Agents/_meta.json

@@ -2,5 +2,13 @@
   "basics": {
     "title": "🤖 Agent Basics",
     "href": "/Agents/basics"
+  },
+  "api": {
+    "title": "🔌 Agent API",
+    "href": "/Agents/api"
+  },
+  "webhooks": {
+    "title": "🪝 Agent Webhooks",
+    "href": "/Agents/webhooks"
   }
-}
+}

docs/pages/Agents/api.mdx

@@ -0,0 +1,227 @@
+---
+title: Interacting with Agents via API
+description: Learn how to programmatically interact with DocsGPT Agents using the streaming and non-streaming API endpoints.
+---
+
+import { Callout, Tabs } from 'nextra/components';
+
+# Interacting with Agents via API
+
+DocsGPT Agents can be accessed programmatically through a dedicated API, allowing you to integrate their specialized capabilities into your own applications, scripts, and workflows. This guide covers the two primary methods for interacting with an agent: the streaming API for real-time responses and the non-streaming API for a single, consolidated answer.
+
+When you use an API key generated for a specific agent, you do not need to pass `prompt`, `tools` etc. The agent's configuration (including its prompt, selected tools, and knowledge sources) is already associated with its unique API key. 
+
+### API Endpoints
+
+- **Non-Streaming:** `http://localhost:7091/api/answer`
+- **Streaming:** `http://localhost:7091/stream`
+
+<Callout type="info">
+For DocsGPT Cloud, use `https://gptcloud.arc53.com/` as the base URL.
+</Callout>
+
+For more technical details, you can explore the API swagger documentation available for the cloud version or your local instance.
+
+---
+
+## Non-Streaming API (`/api/answer`)
+
+This is a standard synchronous endpoint. It waits for the agent to fully process the request and returns a single JSON object with the complete answer. This is the simplest method and is ideal for backend processes where a real-time feed is not required.
+
+### Request
+
+-   **Endpoint:** `/api/answer`
+-   **Method:** `POST`
+-   **Payload:**
+    -   `question` (string, required): The user's query or input for the agent.
+    -   `api_key` (string, required): The unique API key for the agent you wish to interact with.
+    -   `history` (string, optional): A JSON string representing the conversation history, e.g., `[{\"prompt\": \"first question\", \"answer\": \"first answer\"}]`.
+
+### Response
+
+A single JSON object containing:
+-   `answer`: The complete, final answer from the agent.
+-   `sources`: A list of sources the agent consulted.
+-   `conversation_id`: The unique ID for the interaction.
+
+### Examples
+
+<Tabs items={['cURL', 'Python', 'JavaScript']}>
+  <Tabs.Tab>
+    ```bash
+    curl -X POST http://localhost:7091/api/answer \
+    -H "Content-Type: application/json" \
+    -d '{
+        "question": "your question here",
+        "api_key": "your_agent_api_key"
+    }'
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```python
+    import requests
+
+    API_URL = "http://localhost:7091/api/answer"
+    API_KEY = "your_agent_api_key"
+    QUESTION = "your question here"
+
+    response = requests.post(
+        API_URL,
+        json={"question": QUESTION, "api_key": API_KEY}
+    )
+
+    if response.status_code == 200:
+        print(response.json())
+    else:
+        print(f"Error: {response.status_code}")
+        print(response.text)
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```javascript
+    const apiUrl = 'http://localhost:7091/api/answer';
+    const apiKey = 'your_agent_api_key';
+    const question = 'your question here';
+
+    async function getAnswer() {
+    try {
+        const response = await fetch(apiUrl, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ question, api_key: apiKey }),
+        });
+
+        if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        console.log(data);
+    } catch (error) {
+        console.error("Failed to fetch answer:", error);
+    }
+    }
+
+    getAnswer();
+    ```
+  </Tabs.Tab>
+</Tabs>
+
+---
+
+## Streaming API (`/stream`)
+
+The `/stream` endpoint uses Server-Sent Events (SSE) to push data in real-time. This is ideal for applications where you want to display the response as it's being generated, such as in a live chatbot interface.
+
+### Request
+
+-   **Endpoint:** `/stream`
+-   **Method:** `POST`
+-   **Payload:** Same as the non-streaming API.
+
+### Response (SSE Stream)
+
+The stream consists of multiple `data:` events, each containing a JSON object. Your client should listen for these events and process them based on their `type`.
+
+**Event Types:**
+-   `answer`: A chunk of the agent's final answer.
+-   `source`: A document or source used by the agent.
+-   `thought`: A reasoning step from the agent (for ReAct agents).
+-   `id`: The unique `conversation_id` for the interaction.
+-   `error`: An error message.
+-   `end`: A final message indicating the stream has concluded.
+
+### Examples
+
+<Tabs items={['cURL', 'Python', 'JavaScript']}>
+  <Tabs.Tab>
+    ```bash
+    curl -X POST http://localhost:7091/stream \
+    -H "Content-Type: application/json" \
+    -H "Accept: text/event-stream" \
+    -d '{
+        "question": "your question here",
+        "api_key": "your_agent_api_key"
+    }'
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```python
+    import requests
+    import json
+
+    API_URL = "http://localhost:7091/stream"
+    payload = {
+        "question": "your question here",
+        "api_key": "your_agent_api_key"
+    }
+
+    with requests.post(API_URL, json=payload, stream=True) as r:
+        for line in r.iter_lines():
+            if line:
+                decoded_line = line.decode('utf-8')
+                if decoded_line.startswith('data: '):
+                    try:
+                        data = json.loads(decoded_line[6:])
+                        print(data)
+                    except json.JSONDecodeError:
+                        pass
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```javascript
+    const apiUrl = 'http://localhost:7091/stream';
+    const apiKey = 'your_agent_api_key';
+    const question = 'your question here';
+
+    async function getStream() {
+    try {
+        const response = await fetch(apiUrl, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'text/event-stream'
+        },
+        // Corrected line: 'apiKey' is changed to 'api_key'
+        body: JSON.stringify({ question, api_key: apiKey }),
+        });
+
+        if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+
+        while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        // Note: This parsing method assumes each chunk contains whole lines.
+        // For a more robust production implementation, buffer the chunks
+        // and process them line by line.
+        const lines = chunk.split('\n');
+        
+        for (const line of lines) {
+            if (line.startsWith('data: ')) {
+            try {
+                const data = JSON.parse(line.substring(6));
+                console.log(data);
+            } catch (e) {
+                console.error("Failed to parse JSON from SSE event:", e);
+            }
+            }
+        }
+        }
+    } catch (error) {
+        console.error("Failed to fetch stream:", error);
+    }
+    }
+
+    getStream();
+    ```
+  </Tabs.Tab>
+</Tabs>

docs/pages/Agents/webhooks.mdx

@@ -0,0 +1,152 @@
+---
+title: Triggering Agents with Webhooks
+description: Learn how to automate and integrate DocsGPT Agents using webhooks for asynchronous task execution.
+---
+
+import { Callout, Tabs } from 'nextra/components';
+
+# Triggering Agents with Webhooks
+
+Agent Webhooks provide a powerful mechanism to trigger an agent's execution from external systems. Unlike the direct API which provides an immediate response, webhooks are designed for **asynchronous** operations. When you call a webhook, DocsGPT enqueues the agent's task for background processing and immediately returns a `task_id`. You then use this ID to poll for the result.
+
+This workflow is ideal for integrating with services that expect a quick initial response (e.g., form submissions) or for triggering long-running tasks without tying up a client connection.
+
+Each agent has its own unique webhook URL, which can be generated from the agent's edit page in the DocsGPT UI. This URL includes a secure token for authentication.
+
+### API Endpoints
+
+- **Webhook URL:** `http://localhost:7091/api/webhooks/agents/{AGENT_WEBHOOK_TOKEN}`
+- **Task Status URL:** `http://localhost:7091/api/task_status`
+
+<Callout type="info">
+For DocsGPT Cloud, use `https://gptcloud.arc53.com/` as the base URL.
+</Callout>
+
+For more technical details, you can explore the API swagger documentation available for the cloud version or your local instance.
+
+---
+
+## The Webhook Workflow
+
+The process involves two main steps: triggering the task and polling for the result.
+
+### Step 1: Trigger the Webhook
+
+Send an HTTP `POST` request to the agent's unique webhook URL with the required payload. The structure of this payload should match what the agent's prompt and tools are designed to handle.
+
+-   **Method:** `POST`
+-   **Response:** A JSON object with a `task_id`. `{"task_id": "a1b2c3d4-e5f6-..."}`
+
+<Tabs items={['cURL', 'Python', 'JavaScript']}>
+  <Tabs.Tab>
+    ```bash
+    curl -X POST \
+      http://localhost:7091/api/webhooks/agents/your_webhook_token \
+      -H "Content-Type: application/json" \
+      -d '{"question": "Your message to agent"}'
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```python
+    import requests
+
+    WEBHOOK_URL = "http://localhost:7091/api/webhooks/agents/your_webhook_token"
+    payload = {"question": "Your message to agent"}
+
+    try:
+        response = requests.post(WEBHOOK_URL, json=payload)
+        response.raise_for_status()
+        task_id = response.json().get("task_id")
+        print(f"Task successfully created with ID: {task_id}")
+    except requests.exceptions.RequestException as e:
+        print(f"Error triggering webhook: {e}")
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```javascript
+    const webhookUrl = 'http://localhost:7091/api/webhooks/agents/your_webhook_token';
+    const payload = { question: 'Your message to agent' };
+
+    async function triggerWebhook() {
+      try {
+        const response = await fetch(webhookUrl, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        });
+        if (!response.ok) throw new Error(`HTTP error! ${response.status}`);
+        const data = await response.json();
+        console.log(`Task successfully created with ID: ${data.task_id}`);
+        return data.task_id;
+      } catch (error) {
+        console.error('Error triggering webhook:', error);
+      }
+    }
+    
+    triggerWebhook();
+    ```
+  </Tabs.Tab>
+</Tabs>
+
+### Step 2: Poll for the Result
+
+Once you have the `task_id`, periodically send a `GET` request to the `/api/task_status` endpoint until the task `status` is `SUCCESS` or `FAILURE`.
+
+- **`status`**: The current state of the task (`PENDING`, `STARTED`, `SUCCESS`, `FAILURE`).
+- **`result`**: The final output from the agent, available when the status is `SUCCESS` or `FAILURE`.
+
+<Tabs items={['cURL', 'Python', 'JavaScript']}>
+  <Tabs.Tab>
+    ```bash
+    # Replace the task_id with the one you received
+    curl http://localhost:7091/api/task_status?task_id=YOUR_TASK_ID
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```python
+    import requests
+    import time
+
+    STATUS_URL = "http://localhost:7091/api/task_status"
+    task_id = "YOUR_TASK_ID"
+
+    while True:
+        response = requests.get(STATUS_URL, params={"task_id": task_id})
+        data = response.json()
+        status = data.get("status")
+        print(f"Current task status: {status}")
+
+        if status in ["SUCCESS", "FAILURE"]:
+            print("Final Result:")
+            print(data.get("result"))
+            break
+        
+        time.sleep(2)
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```javascript
+    const statusUrl = 'http://localhost:7091/api/task_status';
+    const taskId = 'YOUR_TASK_ID';
+
+    const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+    async function pollForResult() {
+      while (true) {
+        const response = await fetch(`${statusUrl}?task_id=${taskId}`);
+        const data = await response.json();
+        const status = data.status;
+        console.log(`Current task status: ${status}`);
+
+        if (status === 'SUCCESS' || status === 'FAILURE') {
+          console.log('Final Result:', data.result);
+          break;
+        }
+        await sleep(2000);
+      }
+    }
+
+    pollForResult();
+    ```
+  </Tabs.Tab>
+</Tabs>

frontend/package.json

@@ -19,19 +19,18 @@
     ]
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^2.5.1",
+    "@reduxjs/toolkit": "^2.8.2",
     "chart.js": "^4.4.4",
     "clsx": "^2.1.1",
+    "copy-to-clipboard": "^3.3.3",
     "i18next": "^24.2.0",
     "i18next-browser-languagedetector": "^8.0.2",
     "mermaid": "^11.6.0",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
+    "react": "^19.1.0",
     "react-chartjs-2": "^5.3.0",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^18.3.1",
-    "react-dropzone": "^14.3.5",
-    "react-helmet": "^6.1.0",
+    "react-dom": "^19.0.0",
+    "react-dropzone": "^14.3.8",
     "react-i18next": "^15.4.0",
     "react-markdown": "^9.0.1",
     "react-redux": "^9.2.0",
@@ -39,18 +38,18 @@
     "react-syntax-highlighter": "^15.6.1",
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.0",
-    "remark-math": "^6.0.0"
+    "remark-math": "^6.0.0",
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.10",
     "@types/mermaid": "^9.1.0",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-helmet": "^6.1.11",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.0.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "^10.4.13",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.1.5",
     "eslint-config-standard-with-typescript": "^34.0.0",
@@ -64,8 +63,8 @@
     "lint-staged": "^15.3.0",
     "postcss": "^8.4.49",
     "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^3.4.17",
+    "prettier-plugin-tailwindcss": "^0.6.13",
+    "tailwindcss": "^4.1.10",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.3.0"

frontend/postcss.config.cjs

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

frontend/public/toolIcons/tool_duckduckgo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88"><defs><style>.a{fill:#d53;}.b{fill:#fff;}.c{fill:#ddd;}.d{fill:#fc0;}.e{fill:#6b5;}.f{fill:#4a4;}.g{fill:#148;}</style></defs><title>duckduckgo</title><path class="a" d="M122.88,61.44a61.44,61.44,0,1,0-61.44,61.44,61.44,61.44,0,0,0,61.44-61.44Z"/><path class="b" d="M114.37,61.44a52.92,52.92,0,1,0-15.5,37.43,52.76,52.76,0,0,0,15.5-37.43Zm-13.12-39.8A56.29,56.29,0,1,1,61.44,5.15a56.12,56.12,0,0,1,39.81,16.49Z"/><path class="c" d="M43.24,30.15C26.17,34.13,32.43,58,32.43,58l10.81,52.9,4,1.71-4-82.49Zm-4-10.24H34.7L41,22.19s-6.26,0-6.26,4C48.36,25.6,54.61,29,54.61,29l-15.36-9.1Zm0,0Z"/><path class="b" d="M75.66,115.48S62,93.87,62,79.64c0-26.73,17.63-4,17.63-25S62,28.44,62,28.44c-8.53-10.8-25-8.53-25-8.53l4,2.28s-4,1.13-5.12,2.27,10.81-1.7,15.93,2.85C30.72,29,34.13,46.08,34.13,46.08l11.95,68.27,29.58,1.13Zm0,0Z"/><path class="d" d="M75.66,60.87l21.62-5.69C116.62,58,80.78,68.84,78.51,68.27c-17.07-2.85-12,11.37,8.53,6.82s5.12,11.38-13.65,5.12c-26.74-7.39-12.52-20.48,2.27-19.34Z"/><path class="e" d="M70,105.81l1.14-1.7c12.52,4.55,13.09,6.25,12.52-5.12s0-11.38-13.09-1.71c0-2.84-7.39-1.71-8.53,0-11.95-5.12-13.09-6.83-12.52,1.14,1.14,16.5.57,13.65,11.95,8l8.53-.57Zm0,0Z"/><path class="f" d="M60.87,99.56v6.82c.57,1.14,9.67,1.14,9.67-1.14s-4.55,1.71-7.39.57S62,98.42,62,98.42l-1.14,1.14Zm0,0Z"/><path class="g" d="M48.36,43.24c-2.85-3.42-10.24-.57-8.54,4,.57-2.28,4.55-5.69,8.54-4Zm18.2,0c.57-3.42,6.26-4,8-.57a8,8,0,0,0-8,.57Zm-18.77,9.1a1.14,1.14,0,1,1,0,.57v-.57Zm-4.55,2.27a4,4,0,1,0,0-.57v.57Zm29.58-4a1.14,1.14,0,1,1,0,.57v-.57ZM69.4,52.91a3.42,3.42,0,1,0,0-.57v.57Zm0,0Z"/></svg>

frontend/src/Hero.tsx

@@ -19,9 +19,9 @@ export default function Hero({
   }>;
 
   return (
-    <div className="flex h-full w-full flex-col items-center justify-between text-black-1000 dark:text-bright-gray">
+    <div className="text-black-1000 dark:text-bright-gray flex h-full w-full flex-col items-center justify-between">
       {/* Header Section */}
-      <div className="flex flex-grow flex-col items-center justify-center pt-8 md:pt-0">
+      <div className="flex grow flex-col items-center justify-center pt-8 md:pt-0">
         <div className="mb-4 flex items-center">
           <span className="text-4xl font-semibold">DocsGPT</span>
           <img className="mb-1 inline w-14" src={DocsGPT3} alt="docsgpt" />
@@ -38,9 +38,9 @@ export default function Hero({
                 <button
                   key={key}
                   onClick={() => handleQuestion({ question: demo.query })}
-                  className={`w-full rounded-[66px] border border-dark-gray bg-transparent px-6 py-[14px] text-left text-just-black transition-colors hover:bg-cultured dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green ${key >= 2 ? 'hidden md:block' : ''} // Show only 2 buttons on mobile`}
+                  className={`border-dark-gray text-just-black hover:bg-cultured dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green w-full rounded-[66px] border bg-transparent px-6 py-[14px] text-left transition-colors ${key >= 2 ? 'hidden md:block' : ''} // Show only 2 buttons on mobile`}
                 >
-                  <p className="mb-2 font-semibold text-black-1000 dark:text-bright-gray">
+                  <p className="text-black-1000 dark:text-bright-gray mb-2 font-semibold">
                     {demo.header}
                   </p>
                   <span className="line-clamp-2 text-gray-700 opacity-60 dark:text-gray-300">

frontend/src/Navigation.tsx

@@ -81,8 +81,27 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
     useState<ActiveState>('INACTIVE');
   const [recentAgents, setRecentAgents] = useState<Agent[]>([]);
 
-  const navRef = useRef(null);
+  const navRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        navRef.current &&
+        !navRef.current.contains(event.target as Node) &&
+        (isMobile || isTablet) &&
+        navOpen
+      ) {
+        setNavOpen(false);
+      }
+    }
 
+    //event listener only for mobile/tablet when nav is open
+    if ((isMobile || isTablet) && navOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [navOpen, isMobile, isTablet, setNavOpen]);
   async function fetchRecentAgents() {
     try {
       const response = await userService.getPinnedAgents(token);
@@ -274,7 +293,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   return (
     <>
       {!navOpen && (
-        <div className="duration-25 absolute left-3 top-3 z-20 hidden transition-all lg:block">
+        <div className="absolute top-3 left-3 z-20 hidden transition-all duration-25 lg:block">
           <div className="flex items-center gap-3">
             <button
               onClick={() => {
@@ -302,7 +321,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 />
               </button>
             )}
-            <div className="text-[20px] font-medium text-[#949494]">
+            <div className="text-gray-4000 text-[20px] font-medium">
               DocsGPT
             </div>
           </div>
@@ -311,8 +330,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
       <div
         ref={navRef}
         className={`${
-          !navOpen && '-ml-96 md:-ml-[18rem]'
-        } duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-b-0 border-r-[1px] bg-lotion transition-all dark:border-r-purple-taupe dark:bg-chinese-black dark:text-white`}
+          !navOpen && '-ml-96 md:-ml-72'
+        } bg-lotion dark:border-r-purple-taupe dark:bg-chinese-black fixed top-0 z-20 flex h-full w-72 flex-col border-r border-b-0 transition-all duration-20 dark:text-white`}
       >
         <div
           className={'visible mt-2 flex h-[6vh] w-full justify-between md:h-12'}
@@ -356,7 +375,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           className={({ isActive }) =>
             `${
               isActive ? 'bg-transparent' : ''
-            } group sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray hover:bg-transparent dark:border-purple-taupe dark:text-white`
+            } group border-silver hover:border-rainy-gray dark:border-purple-taupe sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border p-3 hover:bg-transparent dark:text-white`
           }
         >
           <img
@@ -364,16 +383,16 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             alt="Create new chat"
             className="opacity-80 group-hover:opacity-100"
           />
-          <p className="text-sm text-dove-gray group-hover:text-neutral-600 dark:text-chinese-silver dark:group-hover:text-bright-gray">
+          <p className="text-dove-gray dark:text-chinese-silver dark:group-hover:text-bright-gray text-sm group-hover:text-neutral-600">
             {t('newChat')}
           </p>
         </NavLink>
         <div
           id="conversationsMainDiv"
-          className="mb-auto h-[78vh] overflow-y-auto overflow-x-hidden dark:text-white"
+          className="mb-auto h-[78vh] overflow-x-hidden overflow-y-auto dark:text-white"
         >
           {conversations?.loading && !isDeletingConversation && (
-            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
               <img
                 src={isDarkTheme ? SpinnerDark : Spinner}
                 className="animate-spin cursor-pointer bg-transparent"
@@ -384,14 +403,14 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           {recentAgents?.length > 0 ? (
             <div>
               <div className="mx-4 my-auto mt-2 flex h-6 items-center">
-                <p className="ml-4 mt-1 text-sm font-semibold">Agents</p>
+                <p className="mt-1 ml-4 text-sm font-semibold">Agents</p>
               </div>
               <div className="agents-container">
                 <div>
                   {recentAgents.map((agent, idx) => (
                     <div
                       key={idx}
-                      className={`group mx-4 my-auto mt-4 flex h-9 cursor-pointer items-center justify-between rounded-3xl pl-4 hover:bg-bright-gray dark:hover:bg-dark-charcoal ${
+                      className={`group hover:bg-bright-gray dark:hover:bg-dark-charcoal mx-4 my-auto mt-4 flex h-9 cursor-pointer items-center justify-between rounded-3xl pl-4 ${
                         agent.id === selectedAgent?.id && !conversationId
                           ? 'bg-bright-gray dark:bg-dark-charcoal'
                           : ''
@@ -401,12 +420,16 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                       <div className="flex items-center gap-2">
                         <div className="flex w-6 justify-center">
                           <img
-                            src={agent.image ?? Robot}
+                            src={
+                              agent.image && agent.image.trim() !== ''
+                                ? agent.image
+                                : Robot
+                            }
                             alt="agent-logo"
-                            className="h-6 w-6"
+                            className="h-6 w-6 rounded-full object-contain"
                           />
                         </div>
-                        <p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-sm leading-6 text-eerie-black dark:text-bright-gray">
+                        <p className="text-eerie-black dark:text-bright-gray overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
                           {agent.name}
                         </p>
                       </div>
@@ -430,7 +453,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                   ))}
                 </div>
                 <div
-                  className="mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
+                  className="hover:bg-bright-gray dark:hover:bg-dark-charcoal mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4"
                   onClick={() => {
                     dispatch(setSelectedAgent(null));
                     if (isMobile || isTablet) {
@@ -446,7 +469,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                       className="h-[18px] w-[18px]"
                     />
                   </div>
-                  <p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-sm leading-6 text-eerie-black dark:text-bright-gray">
+                  <p className="text-eerie-black dark:text-bright-gray overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
                     {t('manageAgents')}
                   </p>
                 </div>
@@ -454,7 +477,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             </div>
           ) : (
             <div
-              className="mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4 hover:bg-bright-gray dark:hover:bg-dark-charcoal"
+              className="hover:bg-bright-gray dark:hover:bg-dark-charcoal mx-4 my-auto mt-2 flex h-9 cursor-pointer items-center gap-2 rounded-3xl pl-4"
               onClick={() => {
                 if (isMobile || isTablet) {
                   setNavOpen(false);
@@ -470,7 +493,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                   className="h-[18px] w-[18px]"
                 />
               </div>
-              <p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-sm leading-6 text-eerie-black dark:text-bright-gray">
+              <p className="text-eerie-black dark:text-bright-gray overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
                 {t('manageAgents')}
               </p>
             </div>
@@ -478,7 +501,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           {conversations?.data && conversations.data.length > 0 ? (
             <div className="mt-7">
               <div className="mx-4 my-auto mt-2 flex h-6 items-center justify-between gap-4 rounded-3xl">
-                <p className="ml-4 mt-1 text-sm font-semibold">{t('chats')}</p>
+                <p className="mt-1 ml-4 text-sm font-semibold">{t('chats')}</p>
               </div>
               <div className="conversations-container">
                 {conversations.data?.map((conversation) => (
@@ -503,8 +526,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             <></>
           )}
         </div>
-        <div className="flex h-auto flex-col justify-end text-eerie-black dark:text-white">
-          <div className="flex flex-col gap-2 border-b-[1px] py-2 dark:border-b-purple-taupe">
+        <div className="text-eerie-black flex h-auto flex-col justify-end dark:text-white">
+          <div className="dark:border-b-purple-taupe flex flex-col gap-2 border-b py-2">
             <NavLink
               onClick={() => {
                 if (isMobile || isTablet) {
@@ -514,7 +537,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               }}
               to="/settings"
               className={({ isActive }) =>
-                `mx-4 my-auto flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
+                `mx-4 my-auto flex h-9 cursor-pointer items-center gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
                   isActive ? 'bg-gray-3000 dark:bg-transparent' : ''
                 }`
               }
@@ -522,14 +545,16 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               <img
                 src={SettingGear}
                 alt="Settings"
-                className="w- ml-2 filter dark:invert"
+                width={21}
+                height={21}
+                className="my-auto ml-2 filter dark:invert"
               />
-              <p className="my-auto text-sm text-eerie-black dark:text-white">
+              <p className="text-eerie-black text-sm dark:text-white">
                 {t('settings.label')}
               </p>
             </NavLink>
           </div>
-          <div className="flex flex-col justify-end text-eerie-black dark:text-white">
+          <div className="text-eerie-black flex flex-col justify-end dark:text-white">
             <div className="flex items-center justify-between py-1">
               <Help />
 
@@ -578,7 +603,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           </div>
         </div>
       </div>
-      <div className="sticky z-10 h-16 w-full border-b-2 bg-gray-50 dark:border-b-purple-taupe dark:bg-chinese-black lg:hidden">
+      <div className="dark:border-b-purple-taupe dark:bg-chinese-black sticky z-10 h-16 w-full border-b-2 bg-gray-50 lg:hidden">
         <div className="ml-6 flex h-full items-center gap-6">
           <button
             className="h-6 w-6 lg:hidden"
@@ -590,7 +615,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               className="w-7 filter dark:invert"
             />
           </button>
-          <div className="text-[20px] font-medium text-[#949494]">DocsGPT</div>
+          <div className="text-gray-4000 text-[20px] font-medium">DocsGPT</div>
         </div>
       </div>
       <DeleteConvModal

frontend/src/agents/AgentCard.tsx

@@ -54,7 +54,7 @@ export default function AgentCard({
 
   return (
     <div
-      className={`relative flex h-44 w-48 flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] dark:bg-[#383838] hover:dark:bg-[#383838]/80 ${
+      className={`relative flex h-44 w-48 flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] dark:bg-[#383838] dark:hover:bg-[#383838]/80 ${
         agent.status === 'published' ? 'cursor-pointer' : ''
       }`}
       onClick={handleCardClick}
@@ -65,7 +65,7 @@ export default function AgentCard({
           e.stopPropagation();
           setIsMenuOpen(true);
         }}
-        className="absolute right-4 top-4 z-10 cursor-pointer"
+        className="absolute top-4 right-4 z-10 cursor-pointer"
       >
         <img src={ThreeDots} alt="options" className="h-[19px] w-[19px]" />
         {menuOptions && (
@@ -83,9 +83,9 @@ export default function AgentCard({
       <div className="w-full">
         <div className="flex w-full items-center gap-1 px-1">
           <img
-            src={agent.image ?? Robot}
+            src={agent.image && agent.image.trim() !== '' ? agent.image : Robot}
             alt={`${agent.name}`}
-            className="h-7 w-7 rounded-full"
+            className="h-7 w-7 rounded-full object-contain"
           />
           {agent.status === 'draft' && (
             <p className="text-xs text-black opacity-50 dark:text-[#E0E0E0]">
@@ -96,11 +96,11 @@ export default function AgentCard({
         <div className="mt-2">
           <p
             title={agent.name}
-            className="truncate px-1 text-[13px] font-semibold capitalize leading-relaxed text-[#020617] dark:text-[#E0E0E0]"
+            className="truncate px-1 text-[13px] leading-relaxed font-semibold text-[#020617] capitalize dark:text-[#E0E0E0]"
           >
             {agent.name}
           </p>
-          <p className="mt-1 h-20 overflow-auto px-1 text-[12px] leading-relaxed text-[#64748B] dark:text-sonic-silver-light">
+          <p className="dark:text-sonic-silver-light mt-1 h-20 overflow-auto px-1 text-[12px] leading-relaxed text-[#64748B]">
             {agent.description}
           </p>
         </div>

frontend/src/agents/AgentLogs.tsx

@@ -44,12 +44,12 @@ export default function AgentLogs() {
         >
           <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
         </button>
-        <p className="mt-px text-sm font-semibold text-eerie-black dark:text-bright-gray">
+        <p className="text-eerie-black dark:text-bright-gray mt-px text-sm font-semibold">
           Back to all agents
         </p>
       </div>
       <div className="mt-5 flex w-full flex-wrap items-center justify-between gap-2 px-4">
-        <h1 className="m-0 text-[40px] font-bold text-[#212121] dark:text-white">
+        <h1 className="text-eerie-black m-0 text-[40px] font-bold dark:text-white">
           Agent Logs
         </h1>
       </div>

frontend/src/agents/AgentPreview.tsx

@@ -6,24 +6,23 @@ import ConversationMessages from '../conversation/ConversationMessages';
 import { Query } from '../conversation/conversationModels';
 import {
   addQuery,
-  fetchAnswer,
-  handleAbort,
+  fetchPreviewAnswer,
+  handlePreviewAbort,
   resendQuery,
-  resetConversation,
-  selectQueries,
-  selectStatus,
-} from '../conversation/conversationSlice';
+  resetPreview,
+  selectPreviewQueries,
+  selectPreviewStatus,
+} from './agentPreviewSlice';
 import { selectSelectedAgent } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
 
 export default function AgentPreview() {
   const dispatch = useDispatch<AppDispatch>();
 
-  const queries = useSelector(selectQueries);
-  const status = useSelector(selectStatus);
+  const queries = useSelector(selectPreviewQueries);
+  const status = useSelector(selectPreviewStatus);
   const selectedAgent = useSelector(selectSelectedAgent);
 
-  const [input, setInput] = useState('');
   const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
 
   const fetchStream = useRef<any>(null);
@@ -31,7 +30,7 @@ export default function AgentPreview() {
   const handleFetchAnswer = useCallback(
     ({ question, index }: { question: string; index?: number }) => {
       fetchStream.current = dispatch(
-        fetchAnswer({ question, indx: index, isPreview: true }),
+        fetchPreviewAnswer({ question, indx: index }),
       );
     },
     [dispatch],
@@ -95,11 +94,11 @@ export default function AgentPreview() {
   };
 
   useEffect(() => {
-    dispatch(resetConversation());
+    dispatch(resetPreview());
     return () => {
       if (fetchStream.current) fetchStream.current.abort();
-      handleAbort();
-      dispatch(resetConversation());
+      handlePreviewAbort();
+      dispatch(resetPreview());
     };
   }, [dispatch]);
 

frontend/src/agents/NewAgent.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -6,6 +6,7 @@ import userService from '../api/services/userService';
 import ArrowLeft from '../assets/arrow-left.svg';
 import SourceIcon from '../assets/source.svg';
 import Dropdown from '../components/Dropdown';
+import { FileUpload } from '../components/FileUpload';
 import MultiSelectPopup, { OptionType } from '../components/MultiSelectPopup';
 import AgentDetailsModal from '../modals/AgentDetailsModal';
 import ConfirmationModal from '../modals/ConfirmationModal';
@@ -48,6 +49,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
     agent_type: '',
     status: '',
   });
+  const [imageFile, setImageFile] = useState<File | null>(null);
   const [prompts, setPrompts] = useState<
     { name: string; id: string; type: string }[]
   >([]);
@@ -106,6 +108,13 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
     );
   };
 
+  const handleUpload = useCallback((files: File[]) => {
+    if (files && files.length > 0) {
+      const file = files[0];
+      setImageFile(file);
+    }
+  }, []);
+
   const handleCancel = () => {
     if (selectedAgent) dispatch(setSelectedAgent(null));
     navigate('/agents');
@@ -118,42 +127,80 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
   };
 
   const handleSaveDraft = async () => {
-    const response =
-      effectiveMode === 'new'
-        ? await userService.createAgent({ ...agent, status: 'draft' }, token)
-        : await userService.updateAgent(
-            agent.id || '',
-            { ...agent, status: 'draft' },
-            token,
-          );
-    if (!response.ok) throw new Error('Failed to create agent draft');
-    const data = await response.json();
-    if (effectiveMode === 'new') {
-      setEffectiveMode('draft');
-      setAgent((prev) => ({ ...prev, id: data.id }));
+    const formData = new FormData();
+    formData.append('name', agent.name);
+    formData.append('description', agent.description);
+    formData.append('source', agent.source);
+    formData.append('chunks', agent.chunks);
+    formData.append('retriever', agent.retriever);
+    formData.append('prompt_id', agent.prompt_id);
+    formData.append('agent_type', agent.agent_type);
+    formData.append('status', 'draft');
+
+    if (imageFile) formData.append('image', imageFile);
+
+    if (agent.tools && agent.tools.length > 0)
+      formData.append('tools', JSON.stringify(agent.tools));
+    else formData.append('tools', '[]');
+
+    try {
+      const response =
+        effectiveMode === 'new'
+          ? await userService.createAgent(formData, token)
+          : await userService.updateAgent(agent.id || '', formData, token);
+      if (!response.ok) throw new Error('Failed to create agent draft');
+      const data = await response.json();
+      if (effectiveMode === 'new') {
+        setEffectiveMode('draft');
+        setAgent((prev) => ({
+          ...prev,
+          id: data.id,
+          image: data.image || prev.image,
+        }));
+      }
+    } catch (error) {
+      console.error('Error saving draft:', error);
+      throw new Error('Failed to save draft');
     }
   };
 
   const handlePublish = async () => {
-    const response =
-      effectiveMode === 'new'
-        ? await userService.createAgent(
-            { ...agent, status: 'published' },
-            token,
-          )
-        : await userService.updateAgent(
-            agent.id || '',
-            { ...agent, status: 'published' },
-            token,
-          );
-    if (!response.ok) throw new Error('Failed to publish agent');
-    const data = await response.json();
-    if (data.id) setAgent((prev) => ({ ...prev, id: data.id }));
-    if (data.key) setAgent((prev) => ({ ...prev, key: data.key }));
-    if (effectiveMode === 'new' || effectiveMode === 'draft') {
-      setEffectiveMode('edit');
-      setAgent((prev) => ({ ...prev, status: 'published' }));
-      setAgentDetails('ACTIVE');
+    const formData = new FormData();
+    formData.append('name', agent.name);
+    formData.append('description', agent.description);
+    formData.append('source', agent.source);
+    formData.append('chunks', agent.chunks);
+    formData.append('retriever', agent.retriever);
+    formData.append('prompt_id', agent.prompt_id);
+    formData.append('agent_type', agent.agent_type);
+    formData.append('status', 'published');
+
+    if (imageFile) formData.append('image', imageFile);
+    if (agent.tools && agent.tools.length > 0)
+      formData.append('tools', JSON.stringify(agent.tools));
+    else formData.append('tools', '[]');
+
+    try {
+      const response =
+        effectiveMode === 'new'
+          ? await userService.createAgent(formData, token)
+          : await userService.updateAgent(agent.id || '', formData, token);
+      if (!response.ok) throw new Error('Failed to publish agent');
+      const data = await response.json();
+      if (data.id) setAgent((prev) => ({ ...prev, id: data.id }));
+      if (data.key) setAgent((prev) => ({ ...prev, key: data.key }));
+      if (effectiveMode === 'new' || effectiveMode === 'draft') {
+        setEffectiveMode('edit');
+        setAgent((prev) => ({
+          ...prev,
+          status: 'published',
+          image: data.image || prev.image,
+        }));
+        setAgentDetails('ACTIVE');
+      }
+    } catch (error) {
+      console.error('Error publishing agent:', error);
+      throw new Error('Failed to publish agent');
     }
   };
 
@@ -248,24 +295,24 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
         >
           <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
         </button>
-        <p className="mt-px text-sm font-semibold text-eerie-black dark:text-bright-gray">
+        <p className="text-eerie-black dark:text-bright-gray mt-px text-sm font-semibold">
           Back to all agents
         </p>
       </div>
       <div className="mt-5 flex w-full flex-wrap items-center justify-between gap-2 px-4">
-        <h1 className="m-0 text-[40px] font-bold text-[#212121] dark:text-white">
+        <h1 className="text-eerie-black m-0 text-[40px] font-bold dark:text-white">
           {modeConfig[effectiveMode].heading}
         </h1>
         <div className="flex flex-wrap items-center gap-1">
           <button
-            className="mr-4 rounded-3xl py-2 text-sm font-medium text-purple-30 dark:bg-transparent dark:text-light-gray"
+            className="text-purple-30 dark:text-light-gray mr-4 rounded-3xl py-2 text-sm font-medium dark:bg-transparent"
             onClick={handleCancel}
           >
             Cancel
           </button>
           {modeConfig[effectiveMode].showDelete && agent.id && (
             <button
-              className="group flex items-center gap-2 rounded-3xl border border-solid border-red-2000 px-5 py-2 text-sm font-medium text-red-2000 transition-colors hover:bg-red-2000 hover:text-white"
+              className="group border-red-2000 text-red-2000 hover:bg-red-2000 flex items-center gap-2 rounded-3xl border border-solid px-5 py-2 text-sm font-medium transition-colors hover:text-white"
               onClick={() => setDeleteConfirmation('ACTIVE')}
             >
               <span className="block h-4 w-4 bg-[url('/src/assets/red-trash.svg')] bg-contain bg-center bg-no-repeat transition-all group-hover:bg-[url('/src/assets/white-trash.svg')]" />
@@ -274,7 +321,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           )}
           {modeConfig[effectiveMode].showSaveDraft && (
             <button
-              className="hover:bg-vi</button>olets-are-blue rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
+              className="hover:bg-vi</button>olets-are-blue border-violets-are-blue text-violets-are-blue hover:bg-violets-are-blue rounded-3xl border border-solid px-5 py-2 text-sm font-medium transition-colors hover:text-white"
               onClick={handleSaveDraft}
             >
               Save Draft
@@ -282,7 +329,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           )}
           {modeConfig[effectiveMode].showAccessDetails && (
             <button
-              className="group flex items-center gap-2 rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
+              className="group border-violets-are-blue text-violets-are-blue hover:bg-violets-are-blue flex items-center gap-2 rounded-3xl border border-solid px-5 py-2 text-sm font-medium transition-colors hover:text-white"
               onClick={() => navigate(`/agents/logs/${agent.id}`)}
             >
               <span className="block h-5 w-5 bg-[url('/src/assets/monitoring-purple.svg')] bg-contain bg-center bg-no-repeat transition-all group-hover:bg-[url('/src/assets/monitoring-white.svg')]" />
@@ -291,7 +338,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           )}
           {modeConfig[effectiveMode].showAccessDetails && (
             <button
-              className="hover:bg-vi</button>olets-are-blue rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
+              className="hover:bg-vi</button>olets-are-blue border-violets-are-blue text-violets-are-blue hover:bg-violets-are-blue rounded-3xl border border-solid px-5 py-2 text-sm font-medium transition-colors hover:text-white"
               onClick={() => setAgentDetails('ACTIVE')}
             >
               Access Details
@@ -299,7 +346,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           )}
           <button
             disabled={!isPublishable()}
-            className={`${!isPublishable() && 'cursor-not-allowed opacity-30'} rounded-3xl bg-purple-30 px-5 py-2 text-sm font-medium text-white hover:bg-violets-are-blue`}
+            className={`${!isPublishable() && 'cursor-not-allowed opacity-30'} bg-purple-30 hover:bg-violets-are-blue rounded-3xl px-5 py-2 text-sm font-medium text-white`}
             onClick={handlePublish}
           >
             Publish
@@ -311,20 +358,35 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           <div className="rounded-[30px] bg-[#F6F6F6] px-6 py-3 dark:bg-[#383838] dark:text-[#E0E0E0]">
             <h2 className="text-lg font-semibold">Meta</h2>
             <input
-              className="mt-3 w-full rounded-3xl border border-silver bg-white px-5 py-3 text-sm text-jet outline-none placeholder:text-gray-400 dark:border-[#7E7E7E] dark:bg-[#222327] dark:text-bright-gray placeholder:dark:text-silver"
+              className="border-silver text-jet dark:bg-raisin-black dark:text-bright-gray dark:placeholder:text-silver mt-3 w-full rounded-3xl border bg-white px-5 py-3 text-sm outline-hidden placeholder:text-gray-400 dark:border-[#7E7E7E]"
               type="text"
               value={agent.name}
               placeholder="Agent name"
               onChange={(e) => setAgent({ ...agent, name: e.target.value })}
             />
             <textarea
-              className="mt-3 h-32 w-full rounded-3xl border border-silver bg-white px-5 py-4 text-sm text-jet outline-none placeholder:text-gray-400 dark:border-[#7E7E7E] dark:bg-[#222327] dark:text-bright-gray placeholder:dark:text-silver"
+              className="border-silver text-jet dark:bg-raisin-black dark:text-bright-gray dark:placeholder:text-silver mt-3 h-32 w-full rounded-3xl border bg-white px-5 py-4 text-sm outline-hidden placeholder:text-gray-400 dark:border-[#7E7E7E]"
               placeholder="Describe your agent"
               value={agent.description}
               onChange={(e) =>
                 setAgent({ ...agent, description: e.target.value })
               }
             />
+            <div className="mt-3">
+              <FileUpload
+                showPreview
+                className="dark:bg-raisin-black"
+                onUpload={handleUpload}
+                onRemove={() => setImageFile(null)}
+                uploadText={[
+                  { text: 'Click to upload', colorClass: 'text-[#7D54D1]' },
+                  {
+                    text: ' or drag and drop',
+                    colorClass: 'text-[#525252]',
+                  },
+                ]}
+              />
+            </div>
           </div>
           <div className="rounded-[30px] bg-[#F6F6F6] px-6 py-3 dark:bg-[#383838] dark:text-[#E0E0E0]">
             <h2 className="text-lg font-semibold">Source</h2>
@@ -333,7 +395,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                 <button
                   ref={sourceAnchorButtonRef}
                   onClick={() => setIsSourcePopupOpen(!isSourcePopupOpen)}
-                  className="w-full truncate rounded-3xl border border-silver bg-white px-5 py-3 text-left text-sm text-gray-400 dark:border-[#7E7E7E] dark:bg-[#222327] dark:text-silver"
+                  className={`border-silver dark:bg-raisin-black w-full truncate rounded-3xl border bg-white px-5 py-3 text-left text-sm dark:border-[#7E7E7E] ${
+                    selectedSourceIds.size > 0
+                      ? 'text-jet dark:text-bright-gray'
+                      : 'dark:text-silver text-gray-400'
+                  }`}
                 >
                   {selectedSourceIds.size > 0
                     ? Array.from(selectedSourceIds)
@@ -381,12 +447,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                   }
                   size="w-full"
                   rounded="3xl"
-                  buttonDarkBackgroundColor="[#222327]"
                   border="border"
-                  darkBorderColor="[#7E7E7E]"
+                  buttonClassName="bg-white dark:bg-[#222327] border-silver dark:border-[#7E7E7E]"
+                  optionsClassName="bg-white dark:bg-[#383838] border-silver dark:border-[#7E7E7E]"
                   placeholder="Chunks per query"
-                  placeholderTextColor="gray-400"
-                  darkPlaceholderTextColor="silver"
+                  placeholderClassName="text-gray-400 dark:text-silver"
                   contentSize="text-sm"
                 />
               </div>
@@ -395,7 +460,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           <div className="rounded-[30px] bg-[#F6F6F6] px-6 py-3 dark:bg-[#383838] dark:text-[#E0E0E0]">
             <h2 className="text-lg font-semibold">Prompt</h2>
             <div className="mt-3 flex flex-wrap items-center gap-1">
-              <div className="min-w-20 flex-grow basis-full sm:basis-0">
+              <div className="min-w-20 grow basis-full sm:basis-0">
                 <Dropdown
                   options={prompts.map((prompt) => ({
                     label: prompt.name,
@@ -413,17 +478,16 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                   }
                   size="w-full"
                   rounded="3xl"
-                  buttonDarkBackgroundColor="[#222327]"
                   border="border"
-                  darkBorderColor="[#7E7E7E]"
+                  buttonClassName="bg-white dark:bg-[#222327] border-silver dark:border-[#7E7E7E]"
+                  optionsClassName="bg-white dark:bg-[#383838] border-silver dark:border-[#7E7E7E] dark:border-[#7E7E7E] dark:bg-dark-charcoal"
+                  placeholderClassName="text-gray-400 dark:text-silver"
                   placeholder="Select a prompt"
-                  placeholderTextColor="gray-400"
-                  darkPlaceholderTextColor="silver"
                   contentSize="text-sm"
                 />
               </div>
               <button
-                className="w-20 flex-shrink-0 basis-full rounded-3xl border-2 border-solid border-violets-are-blue px-5 py-[11px] text-sm text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white sm:basis-auto"
+                className="border-violets-are-blue text-violets-are-blue hover:bg-violets-are-blue w-20 shrink-0 basis-full rounded-3xl border-2 border-solid px-5 py-[11px] text-sm transition-colors hover:text-white sm:basis-auto"
                 onClick={() => setAddPromptModal('ACTIVE')}
               >
                 Add
@@ -436,7 +500,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
               <button
                 ref={toolAnchorButtonRef}
                 onClick={() => setIsToolsPopupOpen(!isToolsPopupOpen)}
-                className="w-full truncate rounded-3xl border border-silver bg-white px-5 py-3 text-left text-sm text-gray-400 dark:border-[#7E7E7E] dark:bg-[#222327] dark:text-silver"
+                className={`border-silver dark:bg-raisin-black w-full truncate rounded-3xl border bg-white px-5 py-3 text-left text-sm dark:border-[#7E7E7E] ${
+                  selectedToolIds.size > 0
+                    ? 'text-jet dark:text-bright-gray'
+                    : 'dark:text-silver text-gray-400'
+                }`}
               >
                 {selectedToolIds.size > 0
                   ? Array.from(selectedToolIds)
@@ -478,12 +546,11 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                 }
                 size="w-full"
                 rounded="3xl"
-                buttonDarkBackgroundColor="[#222327]"
                 border="border"
-                darkBorderColor="[#7E7E7E]"
+                buttonClassName="bg-white dark:bg-[#222327] border-silver dark:border-[#7E7E7E]"
+                optionsClassName="bg-white dark:bg-[#383838] border-silver dark:border-[#7E7E7E]"
                 placeholder="Select type"
-                placeholderTextColor="gray-400"
-                darkPlaceholderTextColor="silver"
+                placeholderClassName="text-gray-400 dark:text-silver"
                 contentSize="text-sm"
               />
             </div>
@@ -528,7 +595,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
 function AgentPreviewArea() {
   const selectedAgent = useSelector(selectSelectedAgent);
   return (
-    <div className="h-full w-full rounded-[30px] border border-[#F6F6F6] bg-white dark:border-[#7E7E7E] dark:bg-[#222327] max-[1180px]:h-[48rem]">
+    <div className="dark:bg-raisin-black h-full w-full rounded-[30px] border border-[#F6F6F6] bg-white max-[1180px]:h-192 dark:border-[#7E7E7E]">
       {selectedAgent?.status === 'published' ? (
         <div className="flex h-full w-full flex-col justify-end overflow-auto rounded-[30px]">
           <AgentPreview />
@@ -536,7 +603,7 @@ function AgentPreviewArea() {
       ) : (
         <div className="flex h-full w-full flex-col items-center justify-center gap-2">
           <span className="block h-12 w-12 bg-[url('/src/assets/science-spark.svg')] bg-contain bg-center bg-no-repeat transition-all dark:bg-[url('/src/assets/science-spark-dark.svg')]" />{' '}
-          <p className="text-xs text-[#18181B] dark:text-[#949494]">
+          <p className="dark:text-gray-4000 text-xs text-[#18181B]">
             Published agents can be previewed here
           </p>
         </div>

frontend/src/agents/SharedAgent.tsx

@@ -57,9 +57,7 @@ export default function SharedAgent() {
 
   const handleFetchAnswer = useCallback(
     ({ question, index }: { question: string; index?: number }) => {
-      fetchStream.current = dispatch(
-        fetchAnswer({ question, indx: index, isPreview: false }),
-      );
+      fetchStream.current = dispatch(fetchAnswer({ question, indx: index }));
     },
     [dispatch],
   );
@@ -145,7 +143,7 @@ export default function SharedAgent() {
             alt="No agent found"
             className="mx-auto mb-6 h-32 w-32"
           />
-          <p className="text-center text-lg text-[#71717A] dark:text-[#949494]">
+          <p className="dark:text-gray-4000 text-center text-lg text-[#71717A]">
             No agent found. Please ensure the agent is shared.
           </p>
         </div>
@@ -153,13 +151,17 @@ export default function SharedAgent() {
     );
   return (
     <div className="relative h-full w-full">
-      <div className="absolute left-4 top-5 hidden items-center gap-3 sm:flex">
+      <div className="absolute top-5 left-4 hidden items-center gap-3 sm:flex">
         <img
-          src={sharedAgent.image ?? Robot}
+          src={
+            sharedAgent.image && sharedAgent.image.trim() !== ''
+              ? sharedAgent.image
+              : Robot
+          }
           alt="agent-logo"
-          className="h-6 w-6"
+          className="h-6 w-6 rounded-full object-contain"
         />
-        <h2 className="text-lg font-semibold text-[#212121] dark:text-[#E0E0E0]">
+        <h2 className="text-eerie-black text-lg font-semibold dark:text-[#E0E0E0]">
           {sharedAgent.name}
         </h2>
       </div>
@@ -186,7 +188,7 @@ export default function SharedAgent() {
             showToolButton={sharedAgent ? false : true}
             autoFocus={false}
           />
-          <p className="hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs text-gray-4000 dark:text-sonic-silver md:inline md:w-full">
+          <p className="text-gray-4000 dark:text-sonic-silver hidden w-screen self-center bg-transparent py-2 text-center text-xs md:inline md:w-full">
             {t('tagline')}
           </p>
         </div>

frontend/src/agents/SharedAgentCard.tsx

@@ -3,16 +3,19 @@ import { Agent } from './types';
 
 export default function SharedAgentCard({ agent }: { agent: Agent }) {
   return (
-    <div className="flex w-full max-w-[720px] flex-col rounded-3xl border border-dark-gray p-6 shadow-sm dark:border-grey sm:w-fit sm:min-w-[480px]">
+    <div className="border-dark-gray dark:border-grey flex w-full max-w-[720px] flex-col rounded-3xl border p-6 shadow-xs sm:w-fit sm:min-w-[480px]">
       <div className="flex items-center gap-3">
         <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full p-1">
-          <img src={Robot} className="h-full w-full object-contain" />
+          <img
+            src={agent.image && agent.image.trim() !== '' ? agent.image : Robot}
+            className="h-full w-full rounded-full object-contain"
+          />
         </div>
         <div className="flex max-h-[92px] w-[80%] flex-col gap-px">
-          <h2 className="text-base font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-lg">
+          <h2 className="text-eerie-black text-base font-semibold sm:text-lg dark:text-[#E0E0E0]">
             {agent.name}
           </h2>
-          <p className="overflow-y-auto text-wrap break-all text-xs text-[#71717A] dark:text-[#949494] sm:text-sm">
+          <p className="dark:text-gray-4000 overflow-y-auto text-xs text-wrap break-all text-[#71717A] sm:text-sm">
             {agent.description}
           </p>
         </div>
@@ -20,12 +23,12 @@ export default function SharedAgentCard({ agent }: { agent: Agent }) {
       {agent.shared_metadata && (
         <div className="mt-4 flex items-center gap-8">
           {agent.shared_metadata?.shared_by && (
-            <p className="text-xs font-light text-[#212121] dark:text-[#E0E0E0] sm:text-sm">
+            <p className="text-eerie-black text-xs font-light sm:text-sm dark:text-[#E0E0E0]">
               by {agent.shared_metadata.shared_by}
             </p>
           )}
           {agent.shared_metadata?.shared_at && (
-            <p className="text-xs font-light text-[#71717A] dark:text-[#949494] sm:text-sm">
+            <p className="dark:text-gray-4000 text-xs font-light text-[#71717A] sm:text-sm">
               Shared on{' '}
               {new Date(agent.shared_metadata.shared_at).toLocaleString(
                 'en-US',
@@ -44,14 +47,14 @@ export default function SharedAgentCard({ agent }: { agent: Agent }) {
       )}
       {agent.tool_details && agent.tool_details.length > 0 && (
         <div className="mt-8">
-          <p className="text-sm font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-base">
+          <p className="text-eerie-black text-sm font-semibold sm:text-base dark:text-[#E0E0E0]">
             Connected Tools
           </p>
           <div className="mt-2 flex flex-wrap gap-2">
             {agent.tool_details.map((tool, index) => (
               <span
                 key={index}
-                className="flex items-center gap-1 rounded-full bg-bright-gray px-3 py-1 text-xs font-light text-[#212121] dark:bg-dark-charcoal dark:text-[#E0E0E0]"
+                className="bg-bright-gray text-eerie-black dark:bg-dark-charcoal flex items-center gap-1 rounded-full px-3 py-1 text-xs font-light dark:text-[#E0E0E0]"
               >
                 <img
                   src={`/toolIcons/tool_${tool.name}.svg`}

frontend/src/agents/agentPreviewSlice.ts

@@ -0,0 +1,319 @@
+import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import {
+  Answer,
+  ConversationState,
+  Query,
+  Status,
+} from '../conversation/conversationModels';
+import {
+  handleFetchAnswer,
+  handleFetchAnswerSteaming,
+} from '../conversation/conversationHandlers';
+import {
+  selectCompletedAttachments,
+  clearAttachments,
+} from '../upload/uploadSlice';
+import store from '../store';
+
+const initialState: ConversationState = {
+  queries: [],
+  status: 'idle',
+  conversationId: null,
+};
+
+const API_STREAMING = import.meta.env.VITE_API_STREAMING === 'true';
+
+let abortController: AbortController | null = null;
+export function handlePreviewAbort() {
+  if (abortController) {
+    abortController.abort();
+    abortController = null;
+  }
+}
+
+export const fetchPreviewAnswer = createAsyncThunk<
+  Answer,
+  { question: string; indx?: number }
+>(
+  'agentPreview/fetchAnswer',
+  async ({ question, indx }, { dispatch, getState }) => {
+    if (abortController) abortController.abort();
+    abortController = new AbortController();
+    const { signal } = abortController;
+
+    const state = getState() as RootState;
+    const attachmentIds = selectCompletedAttachments(state)
+      .filter((a) => a.id)
+      .map((a) => a.id) as string[];
+
+    if (attachmentIds.length > 0) {
+      dispatch(clearAttachments());
+    }
+
+    if (state.preference) {
+      if (API_STREAMING) {
+        await handleFetchAnswerSteaming(
+          question,
+          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) => {
+            const data = JSON.parse(event.data);
+            const targetIndex = indx ?? state.agentPreview.queries.length - 1;
+
+            if (data.type === 'end') {
+              dispatch(agentPreviewSlice.actions.setStatus('idle'));
+            } else if (data.type === 'thought') {
+              dispatch(
+                updateThought({
+                  index: targetIndex,
+                  query: { thought: data.thought },
+                }),
+              );
+            } else if (data.type === 'source') {
+              dispatch(
+                updateStreamingSource({
+                  index: targetIndex,
+                  query: { sources: data.source ?? [] },
+                }),
+              );
+            } else if (data.type === 'tool_call') {
+              dispatch(
+                updateToolCall({
+                  index: targetIndex,
+                  tool_call: data.data,
+                }),
+              );
+            } else if (data.type === 'error') {
+              dispatch(agentPreviewSlice.actions.setStatus('failed'));
+              dispatch(
+                agentPreviewSlice.actions.raiseError({
+                  index: targetIndex,
+                  message: data.error,
+                }),
+              );
+            } else {
+              dispatch(
+                updateStreamingQuery({
+                  index: targetIndex,
+                  query: { response: data.answer },
+                }),
+              );
+            }
+          },
+          indx,
+          state.preference.selectedAgent?.id,
+          attachmentIds,
+          false, // Don't save preview conversations
+        );
+      } else {
+        // Non-streaming implementation
+        const answer = await handleFetchAnswer(
+          question,
+          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,
+          state.preference.selectedAgent?.id,
+          attachmentIds,
+          false, // Don't save preview conversations
+        );
+
+        if (answer) {
+          const sourcesPrepped = answer.sources.map(
+            (source: { title: string }) => {
+              if (source && source.title) {
+                const titleParts = source.title.split('/');
+                return {
+                  ...source,
+                  title: titleParts[titleParts.length - 1],
+                };
+              }
+              return source;
+            },
+          );
+
+          const targetIndex = indx ?? state.agentPreview.queries.length - 1;
+
+          dispatch(
+            updateQuery({
+              index: targetIndex,
+              query: {
+                response: answer.answer,
+                thought: answer.thought,
+                sources: sourcesPrepped,
+                tool_calls: answer.toolCalls,
+              },
+            }),
+          );
+          dispatch(agentPreviewSlice.actions.setStatus('idle'));
+        }
+      }
+    }
+
+    return {
+      conversationId: null,
+      title: null,
+      answer: '',
+      query: question,
+      result: '',
+      thought: '',
+      sources: [],
+      tool_calls: [],
+    };
+  },
+);
+
+export const agentPreviewSlice = createSlice({
+  name: 'agentPreview',
+  initialState,
+  reducers: {
+    addQuery(state, action: PayloadAction<Query>) {
+      state.queries.push(action.payload);
+    },
+    resendQuery(
+      state,
+      action: PayloadAction<{ index: number; prompt: string; query?: Query }>,
+    ) {
+      state.queries = [
+        ...state.queries.splice(0, action.payload.index),
+        action.payload,
+      ];
+    },
+    updateStreamingQuery(
+      state,
+      action: PayloadAction<{
+        index: number;
+        query: Partial<Query>;
+      }>,
+    ) {
+      const { index, query } = action.payload;
+      if (state.status === 'idle') return;
+
+      if (query.response != undefined) {
+        state.queries[index].response =
+          (state.queries[index].response || '') + query.response;
+      }
+    },
+    updateThought(
+      state,
+      action: PayloadAction<{
+        index: number;
+        query: Partial<Query>;
+      }>,
+    ) {
+      const { index, query } = action.payload;
+      if (query.thought != undefined) {
+        state.queries[index].thought =
+          (state.queries[index].thought || '') + query.thought;
+      }
+    },
+    updateStreamingSource(
+      state,
+      action: PayloadAction<{
+        index: number;
+        query: Partial<Query>;
+      }>,
+    ) {
+      const { index, query } = action.payload;
+      if (!state.queries[index].sources) {
+        state.queries[index].sources = query?.sources;
+      } else if (query.sources) {
+        state.queries[index].sources!.push(...query.sources);
+      }
+    },
+    updateToolCall(state, action) {
+      const { index, tool_call } = action.payload;
+
+      if (!state.queries[index].tool_calls) {
+        state.queries[index].tool_calls = [];
+      }
+
+      const existingIndex = state.queries[index].tool_calls.findIndex(
+        (call) => call.call_id === tool_call.call_id,
+      );
+
+      if (existingIndex !== -1) {
+        const existingCall = state.queries[index].tool_calls[existingIndex];
+        state.queries[index].tool_calls[existingIndex] = {
+          ...existingCall,
+          ...tool_call,
+        };
+      } else state.queries[index].tool_calls.push(tool_call);
+    },
+    updateQuery(
+      state,
+      action: PayloadAction<{ index: number; query: Partial<Query> }>,
+    ) {
+      const { index, query } = action.payload;
+      state.queries[index] = {
+        ...state.queries[index],
+        ...query,
+      };
+    },
+    setStatus(state, action: PayloadAction<Status>) {
+      state.status = action.payload;
+    },
+    raiseError(
+      state,
+      action: PayloadAction<{
+        index: number;
+        message: string;
+      }>,
+    ) {
+      const { index, message } = action.payload;
+      state.queries[index].error = message;
+    },
+    resetPreview: (state) => {
+      state.queries = initialState.queries;
+      state.status = initialState.status;
+      state.conversationId = initialState.conversationId;
+      handlePreviewAbort();
+    },
+  },
+  extraReducers(builder) {
+    builder
+      .addCase(fetchPreviewAnswer.pending, (state) => {
+        state.status = 'loading';
+      })
+      .addCase(fetchPreviewAnswer.rejected, (state, action) => {
+        if (action.meta.aborted) {
+          state.status = 'idle';
+          return state;
+        }
+        state.status = 'failed';
+        state.queries[state.queries.length - 1].error = 'Something went wrong';
+      });
+  },
+});
+
+type RootState = ReturnType<typeof store.getState>;
+
+export const selectPreviewQueries = (state: RootState) =>
+  state.agentPreview.queries;
+export const selectPreviewStatus = (state: RootState) =>
+  state.agentPreview.status;
+
+export const {
+  addQuery,
+  updateQuery,
+  resendQuery,
+  updateStreamingQuery,
+  updateThought,
+  updateStreamingSource,
+  updateToolCall,
+  setStatus,
+  raiseError,
+  resetPreview,
+} = agentPreviewSlice.actions;
+
+export default agentPreviewSlice.reducer;

frontend/src/agents/index.tsx

@@ -111,10 +111,10 @@ function AgentsList() {
   }, [token]);
   return (
     <div className="p-4 md:p-12">
-      <h1 className="mb-0 text-[40px] font-bold text-[#212121] dark:text-[#E0E0E0]">
+      <h1 className="text-eerie-black mb-0 text-[40px] font-bold dark:text-[#E0E0E0]">
         Agents
       </h1>
-      <p className="mt-5 text-[15px] text-[#71717A] dark:text-[#949494]">
+      <p className="dark:text-gray-4000 mt-5 text-[15px] text-[#71717A]">
         Discover and create custom versions of DocsGPT that combine
         instructions, extra knowledge, and any combination of skills
       </p>
@@ -206,7 +206,7 @@ function AgentSection({
         </div>
         {sectionConfig[section].showNewAgentButton && (
           <button
-            className="rounded-full bg-purple-30 px-4 py-2 text-sm text-white hover:bg-violets-are-blue"
+            className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-4 py-2 text-sm text-white"
             onClick={() => navigate('/agents/new')}
           >
             New Agent
@@ -235,7 +235,7 @@ function AgentSection({
             <p>{sectionConfig[section].emptyStateDescription}</p>
             {sectionConfig[section].showNewAgentButton && (
               <button
-                className="ml-2 rounded-full bg-purple-30 px-4 py-2 text-sm text-white hover:bg-violets-are-blue"
+                className="bg-purple-30 hover:bg-violets-are-blue ml-2 rounded-full px-4 py-2 text-sm text-white"
                 onClick={() => navigate('/agents/new')}
               >
                 New Agent
@@ -324,17 +324,21 @@ function AgentCard({
         iconWidth: 14,
         iconHeight: 14,
       },
-      {
-        icon: agent.pinned ? UnPin : Pin,
-        label: agent.pinned ? 'Unpin' : 'Pin agent',
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          togglePin();
-        },
-        variant: 'primary',
-        iconWidth: 18,
-        iconHeight: 18,
-      },
+      ...(agent.status === 'published'
+        ? [
+            {
+              icon: agent.pinned ? UnPin : Pin,
+              label: agent.pinned ? 'Unpin' : 'Pin agent',
+              onClick: (e: SyntheticEvent) => {
+                e.stopPropagation();
+                togglePin();
+              },
+              variant: 'primary' as const,
+              iconWidth: 18,
+              iconHeight: 18,
+            },
+          ]
+        : []),
       {
         icon: Trash,
         label: 'Delete',
@@ -406,7 +410,7 @@ function AgentCard({
   };
   return (
     <div
-      className={`relative flex h-44 w-full flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] dark:bg-[#383838] hover:dark:bg-[#383838]/80 md:w-48 ${agent.status === 'published' && 'cursor-pointer'}`}
+      className={`relative flex h-44 w-full flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] md:w-48 dark:bg-[#383838] dark:hover:bg-[#383838]/80 ${agent.status === 'published' && 'cursor-pointer'}`}
       onClick={(e) => {
         e.stopPropagation();
         handleClick();
@@ -418,7 +422,7 @@ function AgentCard({
           e.stopPropagation();
           setIsMenuOpen(true);
         }}
-        className="absolute right-4 top-4 z-10 cursor-pointer"
+        className="absolute top-4 right-4 z-10 cursor-pointer"
       >
         <img src={ThreeDots} alt={'use-agent'} className="h-[19px] w-[19px]" />
         <ContextMenu
@@ -426,16 +430,16 @@ function AgentCard({
           setIsOpen={setIsMenuOpen}
           options={menuOptions}
           anchorRef={menuRef}
-          position="top-right"
+          position="bottom-right"
           offset={{ x: 0, y: 0 }}
         />
       </div>
       <div className="w-full">
         <div className="flex w-full items-center gap-1 px-1">
           <img
-            src={agent.image ?? Robot}
+            src={agent.image && agent.image.trim() !== '' ? agent.image : Robot}
             alt={`${agent.name}`}
-            className="h-7 w-7 rounded-full"
+            className="h-7 w-7 rounded-full object-contain"
           />
           {agent.status === 'draft' && (
             <p className="text-xs text-black opacity-50 dark:text-[#E0E0E0]">{`(Draft)`}</p>
@@ -444,11 +448,11 @@ function AgentCard({
         <div className="mt-2">
           <p
             title={agent.name}
-            className="truncate px-1 text-[13px] font-semibold capitalize leading-relaxed text-[#020617] dark:text-[#E0E0E0]"
+            className="truncate px-1 text-[13px] leading-relaxed font-semibold text-[#020617] capitalize dark:text-[#E0E0E0]"
           >
             {agent.name}
           </p>
-          <p className="mt-1 h-20 overflow-auto px-1 text-[12px] leading-relaxed text-[#64748B] dark:text-sonic-silver-light">
+          <p className="dark:text-sonic-silver-light mt-1 h-20 overflow-auto px-1 text-[12px] leading-relaxed text-[#64748B]">
             {agent.description}
           </p>
         </div>

frontend/src/api/client.ts

@@ -1,16 +1,21 @@
 export const baseURL =
   import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
 
-const defaultHeaders = {
-  'Content-Type': 'application/json',
-};
-
-const getHeaders = (token: string | null, customHeaders = {}): HeadersInit => {
-  return {
-    ...defaultHeaders,
+const getHeaders = (
+  token: string | null,
+  customHeaders = {},
+  isFormData = false,
+): HeadersInit => {
+  const headers: HeadersInit = {
     ...(token ? { Authorization: `Bearer ${token}` } : {}),
     ...customHeaders,
   };
+
+  if (!isFormData) {
+    headers['Content-Type'] = 'application/json';
+  }
+
+  return headers;
 };
 
 const apiClient = {
@@ -44,6 +49,21 @@ const apiClient = {
       return response;
     }),
 
+  postFormData: (
+    url: string,
+    formData: FormData,
+    token: string | null,
+    headers = {},
+    signal?: AbortSignal,
+  ): Promise<Response> => {
+    return fetch(`${baseURL}${url}`, {
+      method: 'POST',
+      headers: getHeaders(token, headers, true),
+      body: formData,
+      signal,
+    });
+  },
+
   put: (
     url: string,
     data: any,
@@ -60,6 +80,21 @@ const apiClient = {
       return response;
     }),
 
+  putFormData: (
+    url: string,
+    formData: FormData,
+    token: string | null,
+    headers = {},
+    signal?: AbortSignal,
+  ): Promise<Response> => {
+    return fetch(`${baseURL}${url}`, {
+      method: 'PUT',
+      headers: getHeaders(token, headers, true),
+      body: formData,
+      signal,
+    });
+  },
+
   delete: (
     url: string,
     token: string | null,

frontend/src/api/services/userService.ts

@@ -22,13 +22,13 @@ const userService = {
   getAgents: (token: string | null): Promise<any> =>
     apiClient.get(endpoints.USER.AGENTS, token),
   createAgent: (data: any, token: string | null): Promise<any> =>
-    apiClient.post(endpoints.USER.CREATE_AGENT, data, token),
+    apiClient.postFormData(endpoints.USER.CREATE_AGENT, data, token),
   updateAgent: (
     agent_id: string,
     data: any,
     token: string | null,
   ): Promise<any> =>
-    apiClient.put(endpoints.USER.UPDATE_AGENT(agent_id), data, token),
+    apiClient.putFormData(endpoints.USER.UPDATE_AGENT(agent_id), data, token),
   deleteAgent: (id: string, token: string | null): Promise<any> =>
     apiClient.delete(endpoints.USER.DELETE_AGENT(id), token),
   getPinnedAgents: (token: string | null): Promise<any> =>

frontend/src/assets/cross.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>

frontend/src/assets/external-link.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4028 7.35671V12.6427C12.4043 12.844 12.3655 13.0436 12.2889 13.2298C12.2122 13.4159 12.0991 13.5849 11.9564 13.7269C11.8136 13.8688 11.6439 13.9808 11.4573 14.0563C11.2706 14.1318 11.0708 14.1694 10.8695 14.1667H3.36483C3.16278 14.1693 2.96226 14.1314 2.77509 14.0553C2.58792 13.9791 2.41789 13.8663 2.27504 13.7234C2.13219 13.5804 2.01941 13.4104 1.94335 13.2232C1.86728 13.036 1.82948 12.8354 1.83217 12.6334V5.12871C1.82975 4.92668 1.86776 4.7262 1.94396 4.53908C2.02017 4.35196 2.13302 4.18196 2.27589 4.0391C2.41875 3.89623 2.58875 3.78338 2.77587 3.70717C2.963 3.63097 3.16347 3.59296 3.3655 3.59537H8.65083M14.1648 1.83337L7.1175 8.88071M14.1648 1.83337H10.6408M14.1648 1.83337V5.35737" stroke="#7D54D1" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/src/assets/images.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="39" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9477 3.02295H33.8827C35.898 3.02295 37.5388 4.6819 37.5388 6.71923V22.9819C37.5388 25.0193 35.898 26.6782 33.8827 26.6782H11.9477C9.9328 26.6782 8.29192 25.0193 8.29192 22.9819V6.71923C8.29192 4.6819 9.9328 3.02295 11.9477 3.02295ZM33.8827 5.97992H11.9477C11.5442 5.97992 11.2167 6.31098 11.2167 6.71916V20.6741L15.2527 16.595C16.2515 15.5839 17.8791 15.5839 18.8792 16.595L20.6486 18.3795L26.0799 11.7888C26.5653 11.2003 27.276 10.8603 28.0335 10.856C28.7953 10.8735 29.5046 11.1841 29.9946 11.765L34.614 17.2147V6.71923C34.614 6.31104 34.2866 5.97992 33.8827 5.97992ZM6.40446 25.1242C7.16068 27.3803 9.243 28.8957 11.584 28.8957H32.8128L31.4954 33.1312C31.1223 34.5715 29.7916 35.5487 28.3352 35.5487C28.051 35.5485 27.768 35.5117 27.4929 35.4393L4.88059 29.3169C3.13614 28.8305 2.09642 27.0048 2.55267 25.2438L6.10025 13.2714V23.3516C6.10025 23.8543 6.17497 24.3567 6.35333 24.9542L6.40446 25.1242ZM18.53 10.4151C18.53 12.0459 17.2186 13.3721 15.6055 13.3721C13.9926 13.3721 12.6808 12.0458 12.6808 10.4151C12.6808 8.78445 13.9925 7.45815 15.6055 7.45815C17.2186 7.45815 18.53 8.78438 18.53 10.4151Z" fill="#A3A3A3"/>
+</svg>

frontend/src/assets/robot.svg

@@ -1,19 +1,19 @@
-<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.394 1.001H7.982C7.32776 1.00074 6.67989 1.12939 6.07539 1.3796C5.47089 1.62982 4.92162 1.99669 4.45896 2.45926C3.9963 2.92182 3.62932 3.47102 3.37898 4.07547C3.12865 4.67992 2.99987 5.32776 3 5.982V11.394C2.99974 12.0483 3.12842 12.6963 3.3787 13.3008C3.62897 13.9054 3.99593 14.4547 4.45861 14.9174C4.92128 15.3801 5.4706 15.747 6.07516 15.9973C6.67972 16.2476 7.32768 16.3763 7.982 16.376H13.394C14.0483 16.3763 14.6963 16.2476 15.3008 15.9973C15.9054 15.747 16.4547 15.3801 16.9174 14.9174C17.3801 14.4547 17.747 13.9054 17.9973 13.3008C18.2476 12.6963 18.3763 12.0483 18.376 11.394V5.982C18.3763 5.32768 18.2476 4.67972 17.9973 4.07516C17.747 3.4706 17.3801 2.92128 16.9174 2.45861C16.4547 1.99593 15.9054 1.62897 15.3008 1.3787C14.6963 1.12842 14.0483 0.999738 13.394 1V1.001Z" stroke="url(#paint0_linear_8958_15228)" stroke-width="1.5"/>
-<path d="M18.606 12.5881H20.225C20.4968 12.5881 20.7576 12.4801 20.9498 12.2879C21.142 12.0956 21.25 11.8349 21.25 11.5631V6.43809C21.25 6.16624 21.142 5.90553 20.9498 5.7133C20.7576 5.52108 20.4968 5.41309 20.225 5.41309H18.605M3.395 12.5881H1.775C1.6404 12.5881 1.50711 12.5616 1.38275 12.5101C1.25839 12.4586 1.1454 12.3831 1.05022 12.2879C0.955035 12.1927 0.879535 12.0797 0.828023 11.9553C0.776512 11.831 0.75 11.6977 0.75 11.5631V6.43809C0.75 6.16624 0.857991 5.90553 1.05022 5.7133C1.24244 5.52108 1.50315 5.41309 1.775 5.41309H3.395" stroke="url(#paint1_linear_8958_15228)" stroke-width="1.5"/>
-<path d="M1.76562 5.41323V1.31323M20.2256 5.41323L20.2156 1.31323M7.91562 5.76323V8.46123M14.0656 5.76323V8.46123M8.94062 12.5882H13.0406" stroke="url(#paint2_linear_8958_15228)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.394 4.001H8.982C8.32776 4.00074 7.67989 4.12939 7.07539 4.3796C6.47089 4.62982 5.92162 4.99669 5.45896 5.45926C4.9963 5.92182 4.62932 6.47102 4.37898 7.07547C4.12865 7.67992 3.99987 8.32776 4 8.982V14.394C3.99974 15.0483 4.12842 15.6963 4.3787 16.3008C4.62897 16.9054 4.99593 17.4547 5.45861 17.9174C5.92128 18.3801 6.4706 18.747 7.07516 18.9973C7.67972 19.2476 8.32768 19.3763 8.982 19.376H14.394C15.0483 19.3763 15.6963 19.2476 16.3008 18.9973C16.9054 18.747 17.4547 18.3801 17.9174 17.9174C18.3801 17.4547 18.747 16.9054 18.9973 16.3008C19.2476 15.6963 19.3763 15.0483 19.376 14.394V8.982C19.3763 8.32768 19.2476 7.67972 18.9973 7.07516C18.747 6.4706 18.3801 5.92128 17.9174 5.45861C17.4547 4.99593 16.9054 4.62897 16.3008 4.3787C15.6963 4.12842 15.0483 3.99974 14.394 4V4.001Z" stroke="url(#paint0_linear_9044_3689)" stroke-width="1.5"/>
+<path d="M19.606 15.5881H21.225C21.4968 15.5881 21.7576 15.4801 21.9498 15.2879C22.142 15.0956 22.25 14.8349 22.25 14.5631V9.43809C22.25 9.16624 22.142 8.90553 21.9498 8.7133C21.7576 8.52108 21.4968 8.41309 21.225 8.41309H19.605M4.395 15.5881H2.775C2.6404 15.5881 2.50711 15.5616 2.38275 15.5101C2.25839 15.4586 2.1454 15.3831 2.05022 15.2879C1.95504 15.1927 1.87953 15.0797 1.82802 14.9553C1.77651 14.831 1.75 14.6977 1.75 14.5631V9.43809C1.75 9.16624 1.85799 8.90553 2.05022 8.7133C2.24244 8.52108 2.50315 8.41309 2.775 8.41309H4.395" stroke="url(#paint1_linear_9044_3689)" stroke-width="1.5"/>
+<path d="M2.76562 8.41323V4.31323M21.2256 8.41323L21.2156 4.31323M8.91562 8.76323V11.4612M15.0656 8.76323V11.4612M9.94062 15.5882H14.0406" stroke="url(#paint2_linear_9044_3689)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <defs>
-<linearGradient id="paint0_linear_8958_15228" x1="10.688" y1="1" x2="10.688" y2="16.376" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint0_linear_9044_3689" x1="11.688" y1="4" x2="11.688" y2="19.376" gradientUnits="userSpaceOnUse">
 <stop stop-color="#58E2E1"/>
 <stop offset="0.524038" stop-color="#657797"/>
 <stop offset="1" stop-color="#CC7871"/>
 </linearGradient>
-<linearGradient id="paint1_linear_8958_15228" x1="11" y1="5.41309" x2="11" y2="12.5881" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint1_linear_9044_3689" x1="12" y1="8.41309" x2="12" y2="15.5881" gradientUnits="userSpaceOnUse">
 <stop stop-color="#58E2E1"/>
 <stop offset="0.524038" stop-color="#657797"/>
 <stop offset="1" stop-color="#CC7871"/>
 </linearGradient>
-<linearGradient id="paint2_linear_8958_15228" x1="10.9956" y1="1.31323" x2="10.9956" y2="12.5882" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint2_linear_9044_3689" x1="11.9956" y1="4.31323" x2="11.9956" y2="15.5882" gradientUnits="userSpaceOnUse">
 <stop stop-color="#58E2E1"/>
 <stop offset="0.524038" stop-color="#657797"/>
 <stop offset="1" stop-color="#CC7871"/>

frontend/src/components/Accordion.tsx

@@ -32,9 +32,9 @@ export default function Accordion({
     setIsOpen(!isOpen);
   };
   return (
-    <div className={`overflow-hidden shadow-sm ${className}`}>
+    <div className={`overflow-hidden shadow-xs ${className}`}>
       <button
-        className={`flex w-full items-center justify-between focus:outline-none ${titleClassName}`}
+        className={`flex w-full items-center justify-between focus:outline-hidden ${titleClassName}`}
         onClick={toggleAccordion}
       >
         <p className="break-words">{title}</p>

frontend/src/components/Avatar.tsx

@@ -9,5 +9,5 @@ export default function Avatar({
   size?: 'SMALL' | 'MEDIUM' | 'LARGE';
   className: string;
 }) {
-  return <div className={`${className} flex-shrink-0`}>{avatar}</div>;
+  return <div className={`${className} shrink-0`}>{avatar}</div>;
 }

frontend/src/components/ContextMenu.tsx

@@ -14,10 +14,10 @@ interface ContextMenuProps {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   options: MenuOption[];
-  anchorRef: React.RefObject<HTMLElement>;
-  className?: string;
-  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  anchorRef: React.RefObject<HTMLDivElement | null>;
+  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
   offset?: { x: number; y: number };
+  className?: string;
 }
 
 export default function ContextMenu({
@@ -125,7 +125,7 @@ export default function ContextMenu({
       onClick={(e) => e.stopPropagation()}
     >
       <div
-        className="flex flex-col rounded-xl bg-lotion text-sm shadow-xl dark:bg-charleston-green-2"
+        className="bg-lotion dark:bg-charleston-green-2 flex flex-col rounded-xl text-sm shadow-xl"
         style={{ minWidth: '144px' }}
       >
         {options.map((option, index) => (
@@ -144,7 +144,7 @@ export default function ContextMenu({
             } `}
           >
             {option.icon && (
-              <div className="flex w-4 min-w-4 flex-shrink-0 justify-center">
+              <div className="flex w-4 min-w-4 shrink-0 justify-center">
                 <img
                   width={option.iconWidth || 16}
                   height={option.iconHeight || 16}
@@ -154,7 +154,7 @@ export default function ContextMenu({
                 />
               </div>
             )}
-            <span className="hyphens-auto break-words">{option.label}</span>
+            <span className="break-words hyphens-auto">{option.label}</span>
           </button>
         ))}
       </div>

frontend/src/components/CopyButton.tsx

@@ -61,7 +61,7 @@ export default function CopyButton({
 
   const rootButtonClasses = clsx(
     'flex items-center gap-2 group',
-    'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 rounded-full',
+    'focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 rounded-full',
     className,
   );
 

frontend/src/components/DocumentHead.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+interface DocumentHeadProps {
+  title?: string;
+  description?: string;
+  keywords?: string;
+  ogTitle?: string;
+  ogDescription?: string;
+  ogImage?: string;
+  twitterCard?: string;
+  twitterTitle?: string;
+  twitterDescription?: string;
+  children?: React.ReactNode;
+}
+
+export function DocumentHead({
+  title,
+  description,
+  keywords,
+  ogTitle,
+  ogDescription,
+  ogImage,
+  twitterCard,
+  twitterTitle,
+  twitterDescription,
+  children,
+}: DocumentHeadProps) {
+  return (
+    <>
+      {title && <title>{title}</title>}
+      {description && <meta name="description" content={description} />}
+      {keywords && <meta name="keywords" content={keywords} />}
+
+      {/* Open Graph */}
+      {ogTitle && <meta property="og:title" content={ogTitle} />}
+      {ogDescription && (
+        <meta property="og:description" content={ogDescription} />
+      )}
+      {ogImage && <meta property="og:image" content={ogImage} />}
+
+      {/* Twitter */}
+      {twitterCard && <meta name="twitter:card" content={twitterCard} />}
+      {twitterTitle && <meta name="twitter:title" content={twitterTitle} />}
+      {twitterDescription && (
+        <meta name="twitter:description" content={twitterDescription} />
+      )}
+
+      {/* Additional elements */}
+      {children}
+    </>
+  );
+}

frontend/src/components/Dropdown.tsx

@@ -10,20 +10,15 @@ function Dropdown({
   onSelect,
   size = 'w-32',
   rounded = 'xl',
-  buttonBackgroundColor = 'white',
-  buttonDarkBackgroundColor = 'transparent',
-  optionsBackgroundColor = 'white',
-  optionsDarkBackgroundColor = 'dark-charcoal',
+  buttonClassName = 'border-silver bg-white dark:bg-transparent dark:border-dim-gray',
+  optionsClassName = 'border-silver bg-white dark:border-dim-gray dark:bg-dark-charcoal',
   border = 'border-2',
-  borderColor = 'silver',
-  darkBorderColor = 'dim-gray',
   showEdit,
   onEdit,
   showDelete,
   onDelete,
   placeholder,
-  placeholderTextColor = 'gray-500',
-  darkPlaceholderTextColor = 'gray-400',
+  placeholderClassName = 'text-gray-500 dark:text-gray-400',
   contentSize = 'text-base',
 }: {
   options:
@@ -44,20 +39,15 @@ function Dropdown({
     | ((value: { value: number; description: string }) => void);
   size?: string;
   rounded?: 'xl' | '3xl';
-  buttonBackgroundColor?: string;
-  buttonDarkBackgroundColor?: string;
-  optionsBackgroundColor?: string;
-  optionsDarkBackgroundColor?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
   border?: 'border' | 'border-2';
-  borderColor?: string;
-  darkBorderColor?: string;
   showEdit?: boolean;
   onEdit?: (value: { name: string; id: string; type: string }) => void;
-  showDelete?: boolean;
+  showDelete?: boolean | ((option: any) => boolean);
   onDelete?: (value: string) => void;
   placeholder?: string;
-  placeholderTextColor?: string;
-  darkPlaceholderTextColor?: string;
+  placeholderClassName?: string;
   contentSize?: string;
 }) {
   const dropdownRef = React.useRef<HTMLDivElement>(null);
@@ -80,6 +70,7 @@ function Dropdown({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
+
   return (
     <div
       className={[
@@ -92,19 +83,18 @@ function Dropdown({
     >
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className={`flex w-full cursor-pointer items-center justify-between ${border} border-${borderColor} bg-${buttonBackgroundColor} px-5 py-3 dark:border-${darkBorderColor} dark:bg-${buttonDarkBackgroundColor} ${
+        className={`flex w-full cursor-pointer items-center justify-between ${border} ${buttonClassName} px-5 py-3 ${
           isOpen ? `${borderTopRadius}` : `${borderRadius}`
         }`}
       >
         {typeof selectedValue === 'string' ? (
-          <span className="truncate dark:text-bright-gray">
+          <span className="dark:text-bright-gray truncate">
             {selectedValue}
           </span>
         ) : (
           <span
             className={`truncate ${selectedValue && `dark:text-bright-gray`} ${
-              !selectedValue &&
-              `text-${placeholderTextColor} dark:text-${darkPlaceholderTextColor}`
+              !selectedValue && ` ${placeholderClassName}`
             } ${contentSize}`}
           >
             {selectedValue && 'label' in selectedValue
@@ -130,7 +120,7 @@ function Dropdown({
       </button>
       {isOpen && (
         <div
-          className={`absolute left-0 right-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl ${border} border-${borderColor} bg-${optionsBackgroundColor} shadow-lg dark:border-${darkBorderColor} dark:bg-${optionsDarkBackgroundColor}`}
+          className={`absolute right-0 left-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl ${border} ${optionsClassName} shadow-lg`}
         >
           {options.map((option: any, index) => (
             <div
@@ -142,7 +132,7 @@ function Dropdown({
                   onSelect(option);
                   setIsOpen(false);
                 }}
-                className={`ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray ${contentSize}`}
+                className={`dark:text-light-gray ml-5 flex-1 overflow-hidden py-3 text-ellipsis whitespace-nowrap ${contentSize}`}
               >
                 {typeof option === 'string'
                   ? option
@@ -173,8 +163,15 @@ function Dropdown({
               )}
               {showDelete && onDelete && (
                 <button
-                  onClick={() => onDelete(option.id)}
-                  disabled={option.type === 'public'}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete?.(typeof option === 'string' ? option : option.id);
+                  }}
+                  className={`${
+                    typeof showDelete === 'function' && !showDelete(option)
+                      ? 'hidden'
+                      : ''
+                  } mr-2 h-4 w-4 cursor-pointer hover:opacity-50`}
                 >
                   <img
                     src={Trash}

frontend/src/components/DropdownMenu.tsx

@@ -7,12 +7,12 @@ type DropdownMenuProps = {
   onSelect: (value: string) => void;
   defaultValue?: string;
   icon?: string;
-  isOpen?: boolean;
-  onOpenChange?: (isOpen: boolean) => void;
-  anchorRef?: React.RefObject<HTMLElement>;
-  className?: string;
-  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  anchorRef: React.RefObject<HTMLElement | null>;
+  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
   offset?: { x: number; y: number };
+  className?: string;
 };
 
 export default function DropdownMenu({

frontend/src/components/FileUpload.tsx

@@ -0,0 +1,229 @@
+import React, { useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { twMerge } from 'tailwind-merge';
+
+import Cross from '../assets/cross.svg';
+import ImagesIcon from '../assets/images.svg';
+
+interface FileUploadProps {
+  onUpload: (files: File[]) => void;
+  onRemove?: (file: File) => void;
+  multiple?: boolean;
+  maxFiles?: number;
+  maxSize?: number; // in bytes
+  accept?: Record<string, string[]>; // e.g. { 'image/*': ['.png', '.jpg'] }
+  showPreview?: boolean;
+  previewSize?: number;
+
+  children?: React.ReactNode;
+  className?: string;
+  activeClassName?: string;
+  acceptClassName?: string;
+  rejectClassName?: string;
+
+  uploadText?: string | { text: string; colorClass?: string }[];
+  dragActiveText?: string;
+  fileTypeText?: string;
+  sizeLimitText?: string;
+
+  disabled?: boolean;
+  validator?: (file: File) => { isValid: boolean; error?: string };
+}
+
+export const FileUpload = ({
+  onUpload,
+  onRemove,
+  multiple = false,
+  maxFiles = 1,
+  maxSize = 5 * 1024 * 1024,
+  accept = { 'image/*': ['.jpeg', '.png', '.jpg'] },
+  showPreview = false,
+  previewSize = 80,
+  children,
+  className = 'border-2 border-dashed rounded-3xl p-6 text-center cursor-pointer transition-colors border-silver dark:border-[#7E7E7E]',
+  activeClassName = 'border-blue-500 bg-blue-50',
+  acceptClassName = 'border-green-500 dark:border-green-500 bg-green-50 dark:bg-green-50/10',
+  rejectClassName = 'border-red-500 bg-red-50 dark:bg-red-500/10 dark:border-red-500',
+  uploadText = 'Click to upload or drag and drop',
+  dragActiveText = 'Drop the files here',
+  fileTypeText = 'PNG, JPG, JPEG up to',
+  sizeLimitText = 'MB',
+  disabled = false,
+  validator,
+}: FileUploadProps) => {
+  const [errors, setErrors] = useState<string[]>([]);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [currentFile, setCurrentFile] = useState<File | null>(null);
+
+  const validateFile = (file: File) => {
+    const defaultValidation = {
+      isValid: true,
+      error: '',
+    };
+
+    if (validator) {
+      const customValidation = validator(file);
+      if (!customValidation.isValid) {
+        return customValidation;
+      }
+    }
+
+    if (file.size > maxSize) {
+      return {
+        isValid: false,
+        error: `File exceeds ${maxSize / 1024 / 1024}MB limit`,
+      };
+    }
+
+    return defaultValidation;
+  };
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[], fileRejections: any[]) => {
+      setErrors([]);
+
+      if (fileRejections.length > 0) {
+        const newErrors = fileRejections
+          .map(({ errors }) => errors.map((e: any) => e.message))
+          .flat();
+        setErrors(newErrors);
+        return;
+      }
+
+      const validationResults = acceptedFiles.map(validateFile);
+      const invalidFiles = validationResults.filter((r) => !r.isValid);
+
+      if (invalidFiles.length > 0) {
+        setErrors(invalidFiles.map((f) => f.error!));
+        return;
+      }
+
+      const filesToUpload = multiple ? acceptedFiles : [acceptedFiles[0]];
+      onUpload(filesToUpload);
+
+      const file = multiple ? acceptedFiles[0] : acceptedFiles[0];
+      setCurrentFile(file);
+
+      if (showPreview && file.type.startsWith('image/')) {
+        const reader = new FileReader();
+        reader.onload = () => setPreview(reader.result as string);
+        reader.readAsDataURL(file);
+      }
+    },
+    [onUpload, multiple, maxSize, validator],
+  );
+
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragAccept,
+    isDragReject,
+  } = useDropzone({
+    onDrop,
+    multiple,
+    maxFiles,
+    maxSize,
+    accept,
+    disabled,
+  });
+
+  const currentClassName = twMerge(
+    'border-2 border-dashed rounded-3xl p-8 text-center cursor-pointer transition-colors border-silver dark:border-[#7E7E7E]',
+    className,
+    isDragActive && activeClassName,
+    isDragAccept && acceptClassName,
+    isDragReject && rejectClassName,
+    disabled && 'opacity-50 cursor-not-allowed',
+  );
+
+  const handleRemove = () => {
+    setPreview(null);
+    setCurrentFile(null);
+    if (onRemove && currentFile) onRemove(currentFile);
+  };
+
+  const renderPreview = () => (
+    <div
+      className="relative"
+      style={{ width: previewSize, height: previewSize }}
+    >
+      <img
+        src={preview ?? undefined}
+        alt="preview"
+        className="h-full w-full rounded-md object-cover"
+      />
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          handleRemove();
+        }}
+        className="absolute -right-2 -top-2 rounded-full bg-[#7D54D1] p-1 transition-colors hover:bg-[#714cbc]"
+      >
+        <img src={Cross} alt="remove" className="h-3 w-3" />
+      </button>
+    </div>
+  );
+
+  const renderUploadText = () => {
+    if (Array.isArray(uploadText)) {
+      return (
+        <p className="text-sm font-semibold">
+          {uploadText.map((segment, i) => (
+            <span key={i} className={segment.colorClass || ''}>
+              {segment.text}
+            </span>
+          ))}
+        </p>
+      );
+    }
+    return <p className="text-sm font-semibold">{uploadText}</p>;
+  };
+
+  const defaultContent = (
+    <div className="flex flex-col items-center gap-2">
+      {showPreview && preview ? (
+        renderPreview()
+      ) : (
+        <div
+          style={{ width: previewSize, height: previewSize }}
+          className="flex items-center justify-center"
+        >
+          <img src={ImagesIcon} className="h-10 w-10" />
+        </div>
+      )}
+      <div className="text-center">
+        <div className="text-sm font-medium">
+          {isDragActive ? (
+            <p className="text-sm font-semibold">{dragActiveText}</p>
+          ) : (
+            renderUploadText()
+          )}
+        </div>
+        <p className="mt-1 text-xs text-[#A3A3A3]">
+          {fileTypeText} {maxSize / 1024 / 1024}
+          {sizeLimitText}
+        </p>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="relative">
+      <div {...getRootProps({ className: currentClassName })}>
+        <input {...getInputProps()} />
+        {children || defaultContent}
+        {errors.length > 0 && (
+          <div className="absolute left-0 right-0 mt-[2px] px-4 text-xs text-red-600">
+            {errors.map((error, i) => (
+              <p key={i} className="truncate">
+                {error}
+              </p>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

frontend/src/components/Help.tsx

@@ -43,13 +43,13 @@ const Help = () => {
       </button>
       {isOpen && (
         <div
-          className={`absolute z-10 w-48 -translate-y-28 translate-x-4 rounded-xl bg-white shadow-lg dark:bg-[#444654]`}
+          className={`dark:bg-outer-space absolute z-10 w-48 translate-x-4 -translate-y-28 rounded-xl bg-white shadow-lg`}
         >
           <a
             href="https://docs.docsgpt.cloud/"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-start gap-4 rounded-t-xl px-4 py-2 text-black hover:bg-bright-gray dark:text-white dark:hover:bg-[#545561]"
+            className="hover:bg-bright-gray flex items-start gap-4 rounded-t-xl px-4 py-2 text-black dark:text-white dark:hover:bg-[#545561]"
           >
             <img
               src={PageIcon}
@@ -61,7 +61,7 @@ const Help = () => {
           </a>
           <a
             href="mailto:support@docsgpt.cloud"
-            className="flex items-start gap-4 rounded-b-xl px-4 py-2 text-black hover:bg-bright-gray dark:text-white dark:hover:bg-[#545561]"
+            className="hover:bg-bright-gray flex items-start gap-4 rounded-b-xl px-4 py-2 text-black dark:text-white dark:hover:bg-[#545561]"
           >
             <img
               src={EmailIcon}

frontend/src/components/Input.tsx

@@ -42,7 +42,7 @@ const Input = ({
     <div className={`relative ${className}`}>
       <input
         ref={inputRef}
-        className={`peer h-[42px] w-full rounded-full bg-transparent px-3 py-1 text-jet placeholder-transparent outline-none dark:text-bright-gray ${colorStyles[colorVariant]} ${borderStyles[borderVariant]} ${textSizeStyles[textSize]} [&:-webkit-autofill]:appearance-none [&:-webkit-autofill]:bg-transparent [&:-webkit-autofill_selected]:bg-transparent`}
+        className={`peer text-jet dark:text-bright-gray h-[42px] w-full rounded-full bg-transparent px-3 py-1 placeholder-transparent outline-hidden ${colorStyles[colorVariant]} ${borderStyles[borderVariant]} ${textSizeStyles[textSize]} [&:-webkit-autofill]:appearance-none [&:-webkit-autofill]:bg-transparent [&:-webkit-autofill_selected]:bg-transparent`}
         type={type}
         id={id}
         name={name}
@@ -62,9 +62,9 @@ const Input = ({
           htmlFor={id}
           className={`absolute select-none ${
             hasValue ? '-top-2.5 left-3 text-xs' : ''
-          } px-2 transition-all peer-placeholder-shown:left-3 peer-placeholder-shown:top-2.5 peer-placeholder-shown:${
+          } px-2 transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:left-3 peer-placeholder-shown:${
             textSizeStyles[textSize]
-          } pointer-events-none cursor-none text-gray-4000 peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs dark:text-gray-400 ${labelBgClassName} max-w-[calc(100%-24px)] overflow-hidden text-ellipsis whitespace-nowrap`}
+          } text-gray-4000 pointer-events-none cursor-none peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs dark:text-gray-400 ${labelBgClassName} max-w-[calc(100%-24px)] overflow-hidden text-ellipsis whitespace-nowrap`}
         >
           {placeholder}
           {required && (

frontend/src/components/MermaidRenderer.tsx

@@ -258,9 +258,9 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
   const errorRender = !isCurrentlyLoading && error;
 
   return (
-    <div className="w-inherit group relative rounded-lg border border-light-silver bg-white dark:border-raisin-black dark:bg-eerie-black">
-      <div className="flex items-center justify-between bg-platinum px-2 py-1 dark:bg-eerie-black-2">
-        <span className="text-xs font-medium text-just-black dark:text-chinese-white">
+    <div className="w-inherit group border-light-silver dark:border-raisin-black dark:bg-eerie-black relative rounded-lg border bg-white">
+      <div className="bg-platinum dark:bg-eerie-black-2 flex items-center justify-between px-2 py-1">
+        <span className="text-just-black dark:text-chinese-white text-xs font-medium">
           mermaid
         </span>
         <div className="flex items-center gap-2">
@@ -270,13 +270,13 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
             <div className="relative" ref={downloadMenuRef}>
               <button
                 onClick={() => setShowDownloadMenu(!showDownloadMenu)}
-                className="flex h-full items-center rounded bg-gray-100 px-2 py-1 text-xs dark:bg-gray-700"
+                className="flex h-full items-center rounded-sm bg-gray-100 px-2 py-1 text-xs dark:bg-gray-700"
                 title="Download options"
               >
                 Download <span className="ml-1">▼</span>
               </button>
               {showDownloadMenu && (
-                <div className="absolute right-0 z-10 mt-1 w-40 rounded border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
+                <div className="absolute right-0 z-10 mt-1 w-40 rounded-sm border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
                   <ul>
                     {downloadOptions.map((option, index) => (
                       <li key={index}>
@@ -314,14 +314,14 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
       </div>
 
       {isCurrentlyLoading ? (
-        <div className="flex items-center justify-center bg-white p-4 dark:bg-eerie-black">
+        <div className="dark:bg-eerie-black flex items-center justify-center bg-white p-4">
           <div className="text-sm text-gray-500 dark:text-gray-400">
             Loading diagram...
           </div>
         </div>
       ) : errorRender ? (
-        <div className="m-2 rounded border-2 border-red-400 dark:border-red-700">
-          <div className="overflow-auto whitespace-normal break-words bg-red-100 px-4 py-2 text-sm text-red-800 dark:bg-red-900/30 dark:text-red-300">
+        <div className="m-2 rounded-sm border-2 border-red-400 dark:border-red-700">
+          <div className="overflow-auto bg-red-100 px-4 py-2 text-sm break-words whitespace-normal text-red-800 dark:bg-red-900/30 dark:text-red-300">
             {error}
           </div>
         </div>
@@ -329,7 +329,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
         <>
           <div
             ref={containerRef}
-            className="no-scrollbar relative block w-full bg-white p-4 dark:bg-eerie-black"
+            className="no-scrollbar dark:bg-eerie-black relative block w-full bg-white p-4"
             style={{
               overflow: 'auto',
               scrollbarWidth: 'none',
@@ -345,7 +345,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
           >
             {isHovering && (
               <>
-                <div className="absolute right-2 top-2 z-10 flex items-center gap-2 rounded bg-black/70 px-2 py-1 text-xs text-white">
+                <div className="absolute top-2 right-2 z-10 flex items-center gap-2 rounded-sm bg-black/70 px-2 py-1 text-xs text-white">
                   <button
                     onClick={() =>
                       setZoomFactor((prev) => Math.max(1, prev - 0.5))
@@ -395,9 +395,9 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
           </div>
 
           {showCode && (
-            <div className="border-t border-light-silver dark:border-raisin-black">
-              <div className="bg-platinum p-2 dark:bg-eerie-black-2">
-                <span className="text-xs font-medium text-just-black dark:text-chinese-white">
+            <div className="border-light-silver dark:border-raisin-black border-t">
+              <div className="bg-platinum dark:bg-eerie-black-2 p-2">
+                <span className="text-just-black dark:text-chinese-white text-xs font-medium">
                   Mermaid Code
                 </span>
               </div>

frontend/src/components/MessageInput.tsx

@@ -258,17 +258,17 @@ export default function MessageInput({
   };
   return (
     <div className="mx-2 flex w-full flex-col">
-      <div className="relative flex w-full flex-col rounded-[23px] border border-dark-gray bg-lotion dark:border-grey dark:bg-transparent">
-        <div className="flex flex-wrap gap-1.5 px-4 pb-0 pt-3 sm:gap-2 sm:px-6">
+      <div className="border-dark-gray bg-lotion dark:border-grey relative flex w-full flex-col rounded-[23px] border dark:bg-transparent">
+        <div className="flex flex-wrap gap-1.5 px-4 pt-3 pb-0 sm:gap-2 sm:px-6">
           {attachments.map((attachment, index) => (
             <div
               key={index}
-              className={`group relative flex items-center rounded-xl bg-[#EFF3F4] px-2 py-1 text-[12px] text-[#5D5D5D] dark:bg-[#393B3D] dark:text-bright-gray sm:px-3 sm:py-1.5 sm:text-[14px] ${
+              className={`group dark:text-bright-gray relative flex items-center rounded-xl bg-[#EFF3F4] px-2 py-1 text-[12px] text-[#5D5D5D] sm:px-3 sm:py-1.5 sm:text-[14px] dark:bg-[#393B3D] ${
                 attachment.status !== 'completed' ? 'opacity-70' : 'opacity-100'
               }`}
               title={attachment.fileName}
             >
-              <div className="mr-2 items-center justify-center rounded-lg bg-purple-30 p-[5.5px]">
+              <div className="bg-purple-30 mr-2 items-center justify-center rounded-lg p-[5.5px]">
                 {attachment.status === 'completed' && (
                   <img
                     src={DocumentationDark}
@@ -353,7 +353,7 @@ export default function MessageInput({
             onChange={handleChange}
             tabIndex={1}
             placeholder={t('inputPlaceholder')}
-            className="inputbox-style no-scrollbar w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-t-[23px] bg-lotion px-4 py-3 text-base leading-tight opacity-100 focus:outline-none dark:bg-transparent dark:text-bright-gray dark:placeholder-bright-gray dark:placeholder-opacity-50 sm:px-6 sm:py-5"
+            className="inputbox-style no-scrollbar bg-lotion dark:text-bright-gray dark:placeholder:text-bright-gray/50 w-full overflow-x-hidden overflow-y-auto rounded-t-[23px] px-4 py-3 text-base leading-tight whitespace-pre-wrap opacity-100 placeholder:text-gray-500 focus:outline-hidden sm:px-6 sm:py-5 dark:bg-transparent"
             onInput={handleInput}
             onKeyDown={handleKeyDown}
             aria-label={t('inputPlaceholder')}
@@ -361,11 +361,11 @@ export default function MessageInput({
         </div>
 
         <div className="flex items-center px-3 py-1.5 sm:px-4 sm:py-2">
-          <div className="flex flex-grow flex-wrap gap-1 sm:gap-2">
+          <div className="flex grow flex-wrap gap-1 sm:gap-2">
             {showSourceButton && (
               <button
                 ref={sourceButtonRef}
-                className="xs:px-3 xs:py-1.5 flex max-w-[130px] items-center rounded-[32px] border border-[#AAAAAA] px-2 py-1 transition-colors hover:bg-gray-100 dark:border-purple-taupe dark:hover:bg-[#2C2E3C] sm:max-w-[150px]"
+                className="xs:px-3 xs:py-1.5 dark:border-purple-taupe flex max-w-[130px] items-center rounded-[32px] border border-[#AAAAAA] px-2 py-1 transition-colors hover:bg-gray-100 sm:max-w-[150px] dark:hover:bg-[#2C2E3C]"
                 onClick={() => setIsSourcesPopupOpen(!isSourcesPopupOpen)}
                 title={
                   selectedDocs
@@ -376,15 +376,15 @@ export default function MessageInput({
                 <img
                   src={SourceIcon}
                   alt="Sources"
-                  className="mr-1 h-3.5 w-3.5 flex-shrink-0 sm:mr-1.5 sm:h-4"
+                  className="mr-1 h-3.5 w-3.5 shrink-0 sm:mr-1.5 sm:h-4"
                 />
-                <span className="xs:text-[12px] overflow-hidden truncate text-[10px] font-medium text-[#5D5D5D] dark:text-bright-gray sm:text-[14px]">
+                <span className="xs:text-[12px] dark:text-bright-gray truncate overflow-hidden text-[10px] font-medium text-[#5D5D5D] sm:text-[14px]">
                   {selectedDocs
                     ? selectedDocs.name
                     : t('conversation.sources.title')}
                 </span>
                 {!isTouch && (
-                  <span className="ml-1 hidden text-[10px] text-gray-500 dark:text-gray-400 sm:inline-block">
+                  <span className="ml-1 hidden text-[10px] text-gray-500 sm:inline-block dark:text-gray-400">
                     {browserOS === 'mac' ? '(⌘K)' : '(ctrl+K)'}
                   </span>
                 )}
@@ -394,26 +394,26 @@ export default function MessageInput({
             {showToolButton && (
               <button
                 ref={toolButtonRef}
-                className="xs:px-3 xs:py-1.5 xs:max-w-[150px] flex max-w-[130px] items-center rounded-[32px] border border-[#AAAAAA] px-2 py-1 transition-colors hover:bg-gray-100 dark:border-purple-taupe dark:hover:bg-[#2C2E3C]"
+                className="xs:px-3 xs:py-1.5 xs:max-w-[150px] dark:border-purple-taupe flex max-w-[130px] items-center rounded-[32px] border border-[#AAAAAA] px-2 py-1 transition-colors hover:bg-gray-100 dark:hover:bg-[#2C2E3C]"
                 onClick={() => setIsToolsPopupOpen(!isToolsPopupOpen)}
               >
                 <img
                   src={ToolIcon}
                   alt="Tools"
-                  className="mr-1 h-3.5 w-3.5 flex-shrink-0 sm:mr-1.5 sm:h-4 sm:w-4"
+                  className="mr-1 h-3.5 w-3.5 shrink-0 sm:mr-1.5 sm:h-4 sm:w-4"
                 />
-                <span className="xs:text-[12px] overflow-hidden truncate text-[10px] font-medium text-[#5D5D5D] dark:text-bright-gray sm:text-[14px]">
+                <span className="xs:text-[12px] dark:text-bright-gray truncate overflow-hidden text-[10px] font-medium text-[#5D5D5D] sm:text-[14px]">
                   {t('settings.tools.label')}
                 </span>
               </button>
             )}
-            <label className="xs:px-3 xs:py-1.5 flex cursor-pointer items-center rounded-[32px] border border-[#AAAAAA] px-2 py-1 transition-colors hover:bg-gray-100 dark:border-purple-taupe dark:hover:bg-[#2C2E3C]">
+            <label className="xs:px-3 xs:py-1.5 dark:border-purple-taupe flex cursor-pointer items-center rounded-[32px] border border-[#AAAAAA] px-2 py-1 transition-colors hover:bg-gray-100 dark:hover:bg-[#2C2E3C]">
               <img
                 src={ClipIcon}
                 alt="Attach"
                 className="mr-1 h-3.5 w-3.5 sm:mr-1.5 sm:h-4 sm:w-4"
               />
-              <span className="xs:text-[12px] text-[10px] font-medium text-[#5D5D5D] dark:text-bright-gray sm:text-[14px]">
+              <span className="xs:text-[12px] dark:text-bright-gray text-[10px] font-medium text-[#5D5D5D] sm:text-[14px]">
                 {t('conversation.attachments.attach')}
               </span>
               <input
@@ -428,7 +428,7 @@ export default function MessageInput({
           <button
             onClick={loading ? undefined : handleSubmit}
             aria-label={loading ? t('loading') : t('send')}
-            className={`flex items-center justify-center rounded-full p-2 sm:p-2.5 ${loading ? 'bg-gray-300 dark:bg-gray-600' : 'bg-black dark:bg-white'} ml-auto flex-shrink-0`}
+            className={`flex items-center justify-center rounded-full p-2 sm:p-2.5 ${loading ? 'bg-gray-300 dark:bg-gray-600' : 'bg-black dark:bg-white'} ml-auto shrink-0`}
             disabled={loading}
           >
             {loading ? (

frontend/src/components/MultiSelectPopup.tsx

@@ -17,7 +17,7 @@ export type OptionType = {
 type MultiSelectPopupProps = {
   isOpen: boolean;
   onClose: () => void;
-  anchorRef: React.RefObject<HTMLElement>;
+  anchorRef: React.RefObject<HTMLElement | null>;
   options: OptionType[];
   selectedIds: Set<string | number>;
   onSelectionChange: (newSelectedIds: Set<string | number>) => void;
@@ -79,18 +79,18 @@ export default function MultiSelectPopup({
           <img
             src={icon}
             alt=""
-            className="mr-3 h-5 w-5 flex-shrink-0"
+            className="mr-3 h-5 w-5 shrink-0"
             aria-hidden="true"
           />
         );
       }
       return (
-        <span className="mr-3 h-5 w-5 flex-shrink-0" aria-hidden="true">
+        <span className="mr-3 h-5 w-5 shrink-0" aria-hidden="true">
           {icon}
         </span>
       );
     }
-    return <span className="mr-3 flex-shrink-0">{icon}</span>;
+    return <span className="mr-3 shrink-0">{icon}</span>;
   };
 
   useLayoutEffect(() => {
@@ -168,7 +168,7 @@ export default function MultiSelectPopup({
   return (
     <div
       ref={popupRef}
-      className="fixed z-[9999] flex flex-col rounded-lg border border-light-silver bg-lotion shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033] dark:border-dim-gray dark:bg-charleston-green-2"
+      className="border-light-silver bg-lotion dark:border-dim-gray dark:bg-charleston-green-2 fixed z-9999 flex flex-col rounded-lg border shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
       style={{
         top: popupPosition.showAbove ? undefined : popupPosition.top,
         bottom: popupPosition.showAbove
@@ -181,7 +181,7 @@ export default function MultiSelectPopup({
       }}
     >
       {(title || showSearch) && (
-        <div className="flex-shrink-0 p-4">
+        <div className="shrink-0 p-4">
           {title && (
             <h3 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
               {title}
@@ -206,13 +206,13 @@ export default function MultiSelectPopup({
           )}
         </div>
       )}
-      <div className="mx-4 mb-4 flex-grow overflow-auto rounded-md border border-[#D9D9D9] dark:border-dim-gray">
+      <div className="dark:border-dim-gray mx-4 mb-4 grow overflow-auto rounded-md border border-[#D9D9D9]">
         {loading ? (
           <div className="flex h-full items-center justify-center py-4">
             <div className="h-6 w-6 animate-spin rounded-full border-b-2 border-gray-900 dark:border-white"></div>
           </div>
         ) : (
-          <div className="h-full overflow-y-auto [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-400 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600 [&::-webkit-scrollbar-track]:bg-gray-200 dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C] [&::-webkit-scrollbar]:w-2">
+          <div className="h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-400 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600 [&::-webkit-scrollbar-track]:bg-gray-200 dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
             {filteredOptions.length === 0 ? (
               <div className="flex h-full flex-col items-center justify-center px-4 py-8 text-center">
                 <img
@@ -233,22 +233,22 @@ export default function MultiSelectPopup({
                   <div
                     key={option.id}
                     onClick={() => handleOptionClick(option.id)}
-                    className="flex cursor-pointer items-center justify-between border-b border-[#D9D9D9] p-3 last:border-b-0 hover:bg-gray-100 dark:border-dim-gray dark:hover:bg-charleston-green-3"
+                    className="dark:border-dim-gray dark:hover:bg-charleston-green-3 flex cursor-pointer items-center justify-between border-b border-[#D9D9D9] p-3 last:border-b-0 hover:bg-gray-100"
                     role="option"
                     aria-selected={isSelected}
                   >
-                    <div className="mr-3 flex flex-grow items-center overflow-hidden">
+                    <div className="mr-3 flex grow items-center overflow-hidden">
                       {option.icon && renderIcon(option.icon)}
                       <p
-                        className="overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white"
+                        className="overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-gray-900 dark:text-white"
                         title={option.label}
                       >
                         {option.label}
                       </p>
                     </div>
-                    <div className="flex-shrink-0">
+                    <div className="shrink-0">
                       <div
-                        className={`flex h-4 w-4 items-center justify-center rounded-sm border border-[#C6C6C6] bg-white dark:border-[#757783] dark:bg-charleston-green-2`}
+                        className={`dark:bg-charleston-green-2 flex h-4 w-4 items-center justify-center rounded-xs border border-[#C6C6C6] bg-white dark:border-[#757783]`}
                         aria-hidden="true"
                       >
                         {isSelected && (
@@ -269,7 +269,7 @@ export default function MultiSelectPopup({
         )}
       </div>
       {footerContent && (
-        <div className="flex-shrink-0 border-t border-light-silver p-4 dark:border-dim-gray">
+        <div className="border-light-silver dark:border-dim-gray shrink-0 border-t p-4">
           {footerContent}
         </div>
       )}

frontend/src/components/SettingsBar.tsx

@@ -50,10 +50,10 @@ const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
   return (
     <div className="relative mt-6 flex flex-row items-center space-x-1 overflow-auto md:space-x-0">
       <div
-        className={`${hiddenGradient === 'left' ? 'hidden' : ''} pointer-events-none absolute inset-y-0 left-6 w-14 bg-gradient-to-r from-white dark:from-raisin-black md:hidden`}
+        className={`${hiddenGradient === 'left' ? 'hidden' : ''} dark:from-raisin-black pointer-events-none absolute inset-y-0 left-6 w-14 bg-linear-to-r from-white md:hidden`}
       ></div>
       <div
-        className={`${hiddenGradient === 'right' ? 'hidden' : ''} pointer-events-none absolute inset-y-0 right-6 w-14 bg-gradient-to-l from-white dark:from-raisin-black md:hidden`}
+        className={`${hiddenGradient === 'right' ? 'hidden' : ''} dark:from-raisin-black pointer-events-none absolute inset-y-0 right-6 w-14 bg-linear-to-l from-white md:hidden`}
       ></div>
 
       <div className="z-10 md:hidden">
@@ -77,7 +77,7 @@ const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
             onClick={() => setActiveTab(tab)}
             className={`h-9 snap-start rounded-3xl px-4 font-bold transition-colors ${
               activeTab === tab
-                ? 'bg-[#F4F4F5] text-neutral-900 dark:bg-dark-charcoal dark:text-white'
+                ? 'dark:bg-dark-charcoal bg-[#F4F4F5] text-neutral-900 dark:text-white'
                 : 'text-neutral-700 hover:text-neutral-900 dark:text-neutral-300 dark:hover:text-white'
             }`}
             role="tab"

frontend/src/components/Sidebar.tsx

@@ -33,13 +33,13 @@ export default function Sidebar({
   return (
     <div ref={sidebarRef} className="h-vh relative">
       <div
-        className={`fixed right-0 top-0 z-50 h-full w-72 transform bg-white shadow-xl transition-all duration-300 dark:bg-chinese-black sm:w-96 ${
+        className={`dark:bg-chinese-black fixed top-0 right-0 z-50 h-full w-72 transform bg-white shadow-xl transition-all duration-300 sm:w-96 ${
           isOpen ? 'translate-x-[10px]' : 'translate-x-full'
         } border-l border-[#9ca3af]/10`}
       >
         <div className="flex w-full flex-row items-end justify-end px-4 pt-3">
           <button
-            className="w-7 rounded-full p-2 hover:bg-gray-1000 hover:dark:bg-gun-metal"
+            className="hover:bg-gray-1000 dark:hover:bg-gun-metal w-7 rounded-full p-2"
             onClick={() => toggleState(!isOpen)}
           >
             <img className="filter dark:invert" src={Exit} />

frontend/src/components/SkeletonLoader.tsx

@@ -43,16 +43,16 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
       {[...Array(4)].map((_, idx) => (
         <tr key={idx} className="animate-pulse">
           <td className="w-[45%] px-4 py-4">
-            <div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
+            <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
           </td>
           <td className="w-[20%] px-4 py-4">
-            <div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
+            <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
           </td>
           <td className="w-[25%] px-4 py-4">
-            <div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
+            <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
           </td>
           <td className="w-[10%] px-4 py-4">
-            <div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
+            <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
           </td>
         </tr>
       ))}
@@ -64,16 +64,16 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
       {[...Array(4)].map((_, idx) => (
         <tr key={idx} className="animate-pulse">
           <td className="p-2">
-            <div className="mx-auto h-4 w-3/4 rounded bg-gray-300 dark:bg-gray-600"></div>
+            <div className="mx-auto h-4 w-3/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
           </td>
           <td className="p-2">
-            <div className="mx-auto h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
+            <div className="mx-auto h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
           </td>
           <td className="p-2">
-            <div className="mx-auto h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
+            <div className="mx-auto h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
           </td>
           <td className="p-2">
-            <div className="mx-auto h-4 w-8 rounded bg-gray-300 dark:bg-gray-600"></div>
+            <div className="mx-auto h-4 w-8 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
           </td>
         </tr>
       ))}
@@ -82,10 +82,10 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
 
   const renderDropdown = () => (
     <div className="animate-pulse">
-      <div className="mb-2 h-4 w-24 rounded bg-gray-300 dark:bg-gray-600"></div>
+      <div className="mb-2 h-4 w-24 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
       <div className="flex h-14 w-[360px] items-center justify-between rounded-3xl bg-gray-300 px-4 dark:bg-gray-600">
-        <div className="h-3 w-24 rounded bg-gray-400 dark:bg-gray-700"></div>
-        <div className="h-3 w-3 rounded bg-gray-400 dark:bg-gray-700"></div>
+        <div className="h-3 w-24 rounded-sm bg-gray-400 dark:bg-gray-700"></div>
+        <div className="h-3 w-3 rounded-sm bg-gray-400 dark:bg-gray-700"></div>
       </div>
     </div>
   );
@@ -95,14 +95,14 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
       {[...Array(8)].map((_, idx) => (
         <div
           key={idx}
-          className="flex w-full items-start p-2 hover:bg-[#F9F9F9] hover:dark:bg-dark-charcoal"
+          className="dark:hover:bg-dark-charcoal flex w-full items-start p-2 hover:bg-[#F9F9F9]"
         >
           <div className="flex w-full items-center gap-2">
             <div className="h-3 w-3 rounded-lg bg-gray-300 dark:bg-gray-600"></div>
             <div className="flex w-full flex-row items-center gap-2">
-              <div className="h-3 w-[30%] rounded-lg bg-gray-300 dark:bg-gray-600 lg:w-52"></div>
-              <div className="h-3 w-[16%] rounded-lg bg-gray-300 dark:bg-gray-600 lg:w-28"></div>
-              <div className="h-3 w-[40%] rounded-lg bg-gray-300 dark:bg-gray-600 lg:w-64"></div>
+              <div className="h-3 w-[30%] rounded-lg bg-gray-300 lg:w-52 dark:bg-gray-600"></div>
+              <div className="h-3 w-[16%] rounded-lg bg-gray-300 lg:w-28 dark:bg-gray-600"></div>
+              <div className="h-3 w-[40%] rounded-lg bg-gray-300 lg:w-64 dark:bg-gray-600"></div>
             </div>
           </div>
         </div>
@@ -117,32 +117,32 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
           key={idx}
           className={`p-6 ${
             skeletonCount === 1 ? 'w-full' : 'w-60'
-          } animate-pulse rounded-3xl dark:bg-raisin-black`}
+          } dark:bg-raisin-black animate-pulse rounded-3xl`}
         >
           <div className="space-y-4">
             <div>
-              <div className="mb-2 h-4 w-3/4 rounded bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-5/6 rounded bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-1/2 rounded bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-3/4 rounded bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-3/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-5/6 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-1/2 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-3/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
             </div>
             <div className="my-4 border-t border-gray-400 dark:border-gray-700"></div>
             <div>
-              <div className="mb-2 h-4 w-2/3 rounded bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-1/4 rounded bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-2/3 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-1/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
             </div>
             <div className="my-4 border-t border-gray-400 dark:border-gray-700"></div>
             <div>
-              <div className="mb-2 h-4 w-5/6 rounded bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-1/3 rounded bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-2/3 rounded bg-gray-300 dark:bg-gray-600"></div>
-              <div className="mb-2 h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-5/6 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-1/3 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-2/3 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-2 h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
             </div>
             <div className="my-4 border-t border-gray-400 dark:border-gray-700"></div>
-            <div className="mb-2 h-4 w-3/4 rounded bg-gray-300 dark:bg-gray-600"></div>
-            <div className="mb-2 h-4 w-5/6 rounded bg-gray-300 dark:bg-gray-600"></div>
+            <div className="mb-2 h-4 w-3/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+            <div className="mb-2 h-4 w-5/6 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
           </div>
         </div>
       ))}
@@ -154,27 +154,27 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
       {[...Array(skeletonCount)].map((_, idx) => (
         <div
           key={idx}
-          className="w-full animate-pulse rounded-3xl p-6 dark:bg-raisin-black"
+          className="dark:bg-raisin-black w-full animate-pulse rounded-3xl p-6"
         >
           <div className="space-y-6">
             <div className="space-y-2">
-              <div className="mb-4 h-4 w-1/3 rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-4 h-4 w-1/3 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
               <div className="grid grid-cols-6 items-end gap-2">
-                <div className="h-32 rounded bg-gray-300 dark:bg-gray-600"></div>
-                <div className="h-24 rounded bg-gray-300 dark:bg-gray-600"></div>
-                <div className="h-40 rounded bg-gray-300 dark:bg-gray-600"></div>
-                <div className="h-28 rounded bg-gray-300 dark:bg-gray-600"></div>
-                <div className="h-36 rounded bg-gray-300 dark:bg-gray-600"></div>
-                <div className="h-20 rounded bg-gray-300 dark:bg-gray-600"></div>
+                <div className="h-32 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+                <div className="h-24 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+                <div className="h-40 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+                <div className="h-28 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+                <div className="h-36 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+                <div className="h-20 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
               </div>
             </div>
             <div className="space-y-2">
-              <div className="mb-4 h-4 w-1/4 rounded bg-gray-300 dark:bg-gray-600"></div>
-              <div className="h-32 rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="mb-4 h-4 w-1/4 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="h-32 rounded-sm bg-gray-300 dark:bg-gray-600"></div>
             </div>
             <div className="grid grid-cols-2 gap-4">
-              <div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
-              <div className="h-4 w-full rounded bg-gray-300 dark:bg-gray-600"></div>
+              <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+              <div className="h-4 w-full rounded-sm bg-gray-300 dark:bg-gray-600"></div>
             </div>
           </div>
         </div>

frontend/src/components/SourceDropdown.tsx

@@ -79,13 +79,13 @@ function SourceDropdown({
     <div className="relative w-5/6 rounded-3xl" ref={dropdownRef}>
       <button
         onClick={() => setIsDocsListOpen(!isDocsListOpen)}
-        className={`flex w-full cursor-pointer items-center border border-silver bg-white p-[11px] dark:bg-transparent ${
+        className={`border-silver flex w-full cursor-pointer items-center border bg-white p-[11px] dark:bg-transparent ${
           isDocsListOpen
-            ? 'rounded-t-3xl dark:border-silver/40'
-            : 'rounded-3xl dark:border-purple-taupe'
+            ? 'dark:border-silver/40 rounded-t-3xl'
+            : 'dark:border-purple-taupe rounded-3xl'
         }`}
       >
-        <span className="ml-1 mr-2 flex-1 overflow-hidden text-ellipsis text-left dark:text-bright-gray">
+        <span className="dark:text-bright-gray mr-2 ml-1 flex-1 overflow-hidden text-left text-ellipsis">
           <div className="flex flex-row gap-2">
             <p className="max-w-3/4 truncate whitespace-nowrap">
               {selectedDocs?.name || 'None'}
@@ -101,14 +101,14 @@ function SourceDropdown({
         />
       </button>
       {isDocsListOpen && (
-        <div className="absolute left-0 right-0 z-20 -mt-1 max-h-28 overflow-y-auto rounded-b-xl border border-silver bg-white shadow-lg dark:border-silver/40 dark:bg-dark-charcoal">
+        <div className="border-silver dark:border-silver/40 dark:bg-dark-charcoal absolute right-0 left-0 z-20 -mt-1 max-h-28 overflow-y-auto rounded-b-xl border bg-white shadow-lg">
           {options ? (
             options.map((option: any, index: number) => {
               if (option.model === embeddingsName) {
                 return (
                   <div
                     key={index}
-                    className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-[#545561]"
+                    className="dark:text-bright-gray flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-[#545561]"
                     onClick={() => {
                       dispatch(setSelectedDocs(option));
                       setIsDocsListOpen(false);
@@ -119,7 +119,7 @@ function SourceDropdown({
                       onClick={() => {
                         setIsDocsListOpen(false);
                       }}
-                      className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3"
+                      className="ml-4 flex-1 overflow-hidden py-3 text-ellipsis whitespace-nowrap"
                     >
                       {option.name}
                     </span>
@@ -143,11 +143,11 @@ function SourceDropdown({
             <></>
           )}
           <div
-            className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-purple-taupe"
+            className="dark:text-bright-gray dark:hover:bg-purple-taupe flex cursor-pointer items-center justify-between hover:bg-gray-100"
             onClick={handleEmptyDocumentSelect}
           >
             <span
-              className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3"
+              className="ml-4 flex-1 overflow-hidden py-3 text-ellipsis whitespace-nowrap"
               onClick={() => {
                 handlePostDocumentSelect(null);
               }}

frontend/src/components/SourcesPopup.tsx

@@ -16,7 +16,7 @@ import { ActiveState } from '../models/misc';
 type SourcesPopupProps = {
   isOpen: boolean;
   onClose: () => void;
-  anchorRef: React.RefObject<HTMLButtonElement>;
+  anchorRef: React.RefObject<HTMLButtonElement | null>;
   handlePostDocumentSelect: (doc: Doc | null) => void;
   setUploadModalState: React.Dispatch<React.SetStateAction<ActiveState>>;
 };
@@ -110,7 +110,7 @@ export default function SourcesPopup({
   return (
     <div
       ref={popupRef}
-      className="fixed z-50 flex flex-col rounded-xl bg-lotion shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033] dark:bg-charleston-green-2"
+      className="bg-lotion dark:bg-charleston-green-2 fixed z-50 flex flex-col rounded-xl shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
       style={{
         top: popupPosition.showAbove ? popupPosition.top : undefined,
         bottom: popupPosition.showAbove
@@ -124,8 +124,8 @@ export default function SourcesPopup({
       }}
     >
       <div className="flex h-full flex-col">
-        <div className="flex-shrink-0 px-4 py-4 md:px-6">
-          <h2 className="mb-4 text-lg font-bold text-[#141414] dark:text-[20px] dark:text-bright-gray">
+        <div className="shrink-0 px-4 py-4 md:px-6">
+          <h2 className="dark:text-bright-gray mb-4 text-lg font-bold text-[#141414] dark:text-[20px]">
             {t('conversation.sources.text')}
           </h2>
 
@@ -142,7 +142,7 @@ export default function SourcesPopup({
           />
         </div>
 
-        <div className="mx-4 flex-grow overflow-y-auto rounded-md border border-[#D9D9D9] dark:border-dim-gray [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
+        <div className="dark:border-dim-gray mx-4 grow overflow-y-auto rounded-md border border-[#D9D9D9] [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
           {options ? (
             <>
               {filteredOptions?.map((option: any, index: number) => {
@@ -156,7 +156,7 @@ export default function SourcesPopup({
                   return (
                     <div
                       key={index}
-                      className="flex cursor-pointer items-center border-b border-[#D9D9D9] border-opacity-80 p-3 transition-colors hover:bg-gray-100 dark:border-dim-gray dark:text-[14px] dark:hover:bg-[#2C2E3C]"
+                      className="border-opacity-80 dark:border-dim-gray flex cursor-pointer items-center border-b border-[#D9D9D9] p-3 transition-colors hover:bg-gray-100 dark:text-[14px] dark:hover:bg-[#2C2E3C]"
                       onClick={() => {
                         if (isSelected) {
                           dispatch(setSelectedDocs(null));
@@ -172,13 +172,13 @@ export default function SourcesPopup({
                         alt="Source"
                         width={14}
                         height={14}
-                        className="mr-3 flex-shrink-0"
+                        className="mr-3 shrink-0"
                       />
-                      <span className="mr-3 flex-grow overflow-hidden overflow-ellipsis whitespace-nowrap font-medium text-[#5D5D5D] dark:text-bright-gray">
+                      <span className="dark:text-bright-gray mr-3 grow overflow-hidden font-medium text-ellipsis whitespace-nowrap text-[#5D5D5D]">
                         {option.name}
                       </span>
                       <div
-                        className={`flex h-4 w-4 flex-shrink-0 items-center justify-center border border-[#C6C6C6] p-[0.5px] dark:border-[#757783]`}
+                        className={`flex h-4 w-4 shrink-0 items-center justify-center border border-[#C6C6C6] p-[0.5px] dark:border-[#757783]`}
                       >
                         {isSelected && (
                           <img
@@ -195,16 +195,16 @@ export default function SourcesPopup({
               })}
             </>
           ) : (
-            <div className="p-4 text-center text-gray-500 dark:text-[14px] dark:text-bright-gray">
+            <div className="dark:text-bright-gray p-4 text-center text-gray-500 dark:text-[14px]">
               {t('noSourcesAvailable')}
             </div>
           )}
         </div>
 
-        <div className="flex-shrink-0 px-4 py-4 opacity-75 transition-opacity duration-200 hover:opacity-100 md:px-6">
+        <div className="shrink-0 px-4 py-4 opacity-75 transition-opacity duration-200 hover:opacity-100 md:px-6">
           <a
             href="/settings/documents"
-            className="inline-flex items-center gap-2 text-base font-medium text-violets-are-blue"
+            className="text-violets-are-blue inline-flex items-center gap-2 text-base font-medium"
             onClick={onClose}
           >
             {t('settings.documents.goToDocuments')}
@@ -212,10 +212,10 @@ export default function SourcesPopup({
           </a>
         </div>
 
-        <div className="flex flex-shrink-0 justify-start px-4 py-3 md:px-6">
+        <div className="flex shrink-0 justify-start px-4 py-3 md:px-6">
           <button
             onClick={handleUploadClick}
-            className="w-auto rounded-full border border-violets-are-blue px-4 py-2 text-[14px] font-medium text-violets-are-blue transition-colors duration-200 hover:bg-violets-are-blue hover:text-white"
+            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')}
           </button>

frontend/src/components/ToolsPopup.tsx

@@ -14,7 +14,7 @@ import { useDarkTheme } from '../hooks';
 interface ToolsPopupProps {
   isOpen: boolean;
   onClose: () => void;
-  anchorRef: React.RefObject<HTMLButtonElement>;
+  anchorRef: React.RefObject<HTMLButtonElement | null>;
 }
 
 export default function ToolsPopup({
@@ -136,7 +136,7 @@ export default function ToolsPopup({
   return (
     <div
       ref={popupRef}
-      className="fixed z-[9999] rounded-lg border border-light-silver bg-lotion shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033] dark:border-dim-gray dark:bg-charleston-green-2"
+      className="border-light-silver bg-lotion dark:border-dim-gray dark:bg-charleston-green-2 fixed z-9999 rounded-lg border shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
       style={{
         top: popupPosition.showAbove ? popupPosition.top : undefined,
         bottom: popupPosition.showAbove
@@ -150,7 +150,7 @@ export default function ToolsPopup({
       }}
     >
       <div className="flex h-full flex-col">
-        <div className="flex-shrink-0 p-4">
+        <div className="shrink-0 p-4">
           <h3 className="mb-4 text-lg font-medium text-gray-900 dark:text-white">
             {t('settings.tools.label')}
           </h3>
@@ -169,11 +169,11 @@ export default function ToolsPopup({
         </div>
 
         {loading ? (
-          <div className="flex flex-grow justify-center py-4">
+          <div className="flex grow justify-center py-4">
             <div className="h-6 w-6 animate-spin rounded-full border-b-2 border-gray-900 dark:border-white"></div>
           </div>
         ) : (
-          <div className="mx-4 flex-grow overflow-hidden rounded-md border border-[#D9D9D9] dark:border-dim-gray">
+          <div className="dark:border-dim-gray mx-4 grow overflow-hidden rounded-md border border-[#D9D9D9]">
             <div className="h-full overflow-y-auto [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
               {filteredTools.length === 0 ? (
                 <div className="flex h-full flex-col items-center justify-center py-8">
@@ -191,21 +191,21 @@ export default function ToolsPopup({
                   <div
                     key={tool.id}
                     onClick={() => updateToolStatus(tool.id, !tool.status)}
-                    className="flex items-center justify-between border-b border-[#D9D9D9] p-3 hover:bg-gray-100 dark:border-dim-gray dark:hover:bg-charleston-green-3"
+                    className="dark:border-dim-gray dark:hover:bg-charleston-green-3 flex items-center justify-between border-b border-[#D9D9D9] p-3 hover:bg-gray-100"
                   >
-                    <div className="mr-3 flex flex-grow items-center">
+                    <div className="mr-3 flex grow items-center">
                       <img
                         src={`/toolIcons/tool_${tool.name}.svg`}
                         alt={`${tool.displayName} icon`}
-                        className="mr-4 h-5 w-5 flex-shrink-0"
+                        className="mr-4 h-5 w-5 shrink-0"
                       />
                       <div className="overflow-hidden">
-                        <p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-xs font-medium text-gray-900 dark:text-white">
+                        <p className="overflow-hidden text-xs font-medium text-ellipsis whitespace-nowrap text-gray-900 dark:text-white">
                           {tool.customName || tool.displayName}
                         </p>
                       </div>
                     </div>
-                    <div className="flex flex-shrink-0 items-center">
+                    <div className="flex shrink-0 items-center">
                       <div
                         className={`flex h-4 w-4 items-center justify-center border border-[#C6C6C6] p-[0.5px] dark:border-[#757783]`}
                       >
@@ -226,10 +226,10 @@ export default function ToolsPopup({
           </div>
         )}
 
-        <div className="flex-shrink-0 p-4 opacity-75 transition-opacity duration-200 hover:opacity-100">
+        <div className="shrink-0 p-4 opacity-75 transition-opacity duration-200 hover:opacity-100">
           <a
             href="/settings/tools"
-            className="inline-flex items-center text-base font-medium text-purple-30"
+            className="text-purple-30 inline-flex items-center text-base font-medium"
           >
             {t('settings.tools.manageTools')}
             <img

frontend/src/conversation/Conversation.tsx

@@ -220,7 +220,7 @@ export default function Conversation() {
         }
       />
 
-      <div className="z-3 flex h-auto w-full max-w-[1300px] flex-col items-end self-center rounded-2xl bg-opacity-0 py-1 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
+      <div className="bg-opacity-0 z-3 flex h-auto w-full max-w-[1300px] flex-col items-end self-center rounded-2xl py-1 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
         <div
           {...getRootProps()}
           className="flex w-full items-center rounded-[40px]"
@@ -239,17 +239,17 @@ export default function Conversation() {
           />
         </div>
 
-        <p className="hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs text-gray-4000 dark:text-sonic-silver md:inline md:w-full">
+        <p className="text-gray-4000 dark:text-sonic-silver hidden w-screen self-center bg-transparent py-2 text-center text-xs md:inline md:w-full">
           {t('tagline')}
         </p>
       </div>
       {handleDragActive && (
-        <div className="pointer-events-none fixed left-0 top-0 z-30 flex size-full flex-col items-center justify-center bg-white bg-opacity-50 dark:bg-gray-alpha">
+        <div className="bg-opacity-50 dark:bg-gray-alpha pointer-events-none fixed top-0 left-0 z-30 flex size-full flex-col items-center justify-center bg-white">
           <img className="filter dark:invert" src={DragFileUpload} />
-          <span className="px-2 text-2xl font-bold text-outer-space dark:text-silver">
+          <span className="text-outer-space dark:text-silver px-2 text-2xl font-bold">
             {t('modals.uploadDoc.drag.title')}
           </span>
-          <span className="text-s w-48 p-2 text-center text-outer-space dark:text-silver">
+          <span className="text-s text-outer-space dark:text-silver w-48 p-2 text-center">
             {t('modals.uploadDoc.drag.description')}
           </span>
         </div>

frontend/src/conversation/ConversationBubble.tsx

@@ -1,6 +1,6 @@
 import 'katex/dist/katex.min.css';
 
-import { forwardRef, Fragment, useRef, useState } from 'react';
+import { forwardRef, Fragment, useRef, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import { useSelector } from 'react-redux';
@@ -90,14 +90,24 @@ const ConversationBubble = forwardRef<
   const [isDislikeHovered, setIsDislikeHovered] = useState(false);
   const [isQuestionHovered, setIsQuestionHovered] = useState(false);
   const [editInputBox, setEditInputBox] = useState<string>('');
-
+  const messageRef = useRef<HTMLDivElement>(null);
+  const [shouldShowToggle, setShouldShowToggle] = useState(false);
   const [isLikeClicked, setIsLikeClicked] = useState(false);
   const [isDislikeClicked, setIsDislikeClicked] = useState(false);
   const [activeTooltip, setActiveTooltip] = useState<number | null>(null);
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
-  const editableQueryRef = useRef<HTMLDivElement | null>(null);
+  const editableQueryRef = useRef<HTMLDivElement>(null);
+  const [isQuestionCollapsed, setIsQuestionCollapsed] = useState(true);
 
   useOutsideAlerter(editableQueryRef, () => setIsEditClicked(false), [], true);
+
+  useEffect(() => {
+    if (messageRef.current) {
+      const height = messageRef.current.scrollHeight;
+      setShouldShowToggle(height > 84);
+    }
+  }, [message]);
+
   const handleEditClick = () => {
     setIsEditClicked(false);
     handleUpdatedQuestionSubmission?.(editInputBox, true, questionNumber);
@@ -112,14 +122,14 @@ const ConversationBubble = forwardRef<
       >
         <div className="flex flex-col items-end">
           {filesAttached && filesAttached.length > 0 && (
-            <div className="mb-4 mr-12 flex flex-wrap justify-end gap-2">
+            <div className="mr-12 mb-4 flex flex-wrap justify-end gap-2">
               {filesAttached.map((file, index) => (
                 <div
                   key={index}
                   title={file.fileName}
-                  className="flex items-center rounded-xl bg-[#EFF3F4] p-2 text-[14px] text-[#5D5D5D] dark:bg-[#393B3D] dark:text-bright-gray"
+                  className="dark:text-bright-gray flex items-center rounded-xl bg-[#EFF3F4] p-2 text-[14px] text-[#5D5D5D] dark:bg-[#393B3D]"
                 >
-                  <div className="mr-2 items-center justify-center rounded-lg bg-purple-30 p-[5.5px]">
+                  <div className="bg-purple-30 mr-2 items-center justify-center rounded-lg p-[5.5px]">
                     <img
                       src={DocumentationDark}
                       alt="Attachment"
@@ -139,21 +149,38 @@ const ConversationBubble = forwardRef<
           >
             <Avatar
               size="SMALL"
-              className="mt-2 flex-shrink-0 text-2xl"
+              className="mt-2 shrink-0 text-2xl"
               avatar={
                 <img className="mr-1 rounded-full" width={30} src={UserIcon} />
               }
             />
             {!isEditClicked && (
               <>
-                <div className="mr-2 flex flex-col">
-                  <div
-                    style={{
-                      wordBreak: 'break-word',
-                    }}
-                    className="ml-2 mr-2 flex max-w-full items-center whitespace-pre-wrap rounded-[28px] bg-gradient-to-b from-medium-purple to-slate-blue px-[19px] py-[14px] text-sm leading-normal text-white sm:text-base"
-                  >
-                    {message}
+                <div className="relative mr-2 flex w-full flex-col">
+                  <div className="from-medium-purple to-slate-blue mr-2 ml-2 flex max-w-full items-start gap-2 rounded-[28px] bg-linear-to-b px-5 py-4 text-sm leading-normal break-words whitespace-pre-wrap text-white sm:text-base">
+                    <div
+                      ref={messageRef}
+                      className={`${isQuestionCollapsed ? 'line-clamp-4' : ''} w-full`}
+                    >
+                      {message}
+                    </div>
+                    {shouldShowToggle && (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setIsQuestionCollapsed(!isQuestionCollapsed);
+                        }}
+                        className="ml-1 rounded-full p-2 hover:bg-[#D9D9D933]"
+                      >
+                        <img
+                          src={ChevronDown}
+                          alt="Toggle"
+                          width={24}
+                          height={24}
+                          className={`transform invert transition-transform duration-200 ${isQuestionCollapsed ? '' : 'rotate-180'}`}
+                        />
+                      </button>
+                    )}
                   </div>
                 </div>
                 <button
@@ -161,7 +188,7 @@ const ConversationBubble = forwardRef<
                     setIsEditClicked(true);
                     setEditInputBox(message ?? '');
                   }}
-                  className={`mt-3 flex h-fit flex-shrink-0 cursor-pointer items-center rounded-full p-2 hover:bg-light-silver dark:hover:bg-[#35363B] ${isQuestionHovered || isEditClicked ? 'visible' : 'invisible'}`}
+                  className={`hover:bg-light-silver mt-3 flex h-fit shrink-0 cursor-pointer items-center rounded-full p-2 dark:hover:bg-[#35363B] ${isQuestionHovered || isEditClicked ? 'visible' : 'invisible'}`}
                 >
                   <img src={Edit} alt="Edit" className="cursor-pointer" />
                 </button>
@@ -186,17 +213,17 @@ const ConversationBubble = forwardRef<
                 }}
                 rows={5}
                 value={editInputBox}
-                className="w-full resize-none rounded-3xl border border-silver px-4 py-3 text-base leading-relaxed text-carbon focus:outline-none dark:border-philippine-grey dark:bg-raisin-black dark:text-chinese-white"
+                className="border-silver text-carbon dark:border-philippine-grey dark:bg-raisin-black dark:text-chinese-white w-full resize-none rounded-3xl border px-4 py-3 text-base leading-relaxed focus:outline-hidden"
               />
               <div className="flex items-center justify-end gap-2">
                 <button
-                  className="rounded-full px-4 py-2 text-sm font-semibold text-purple-30 transition-colors hover:bg-gainsboro hover:text-chinese-black-2 dark:hover:bg-onyx-2 dark:hover:text-[#B9BCBE]"
+                  className="text-purple-30 hover:bg-gainsboro hover:text-chinese-black-2 dark:hover:bg-onyx-2 rounded-full px-4 py-2 text-sm font-semibold transition-colors dark:hover:text-[#B9BCBE]"
                   onClick={() => setIsEditClicked(false)}
                 >
                   {t('conversation.edit.cancel')}
                 </button>
                 <button
-                  className="rounded-full bg-purple-30 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-violets-are-blue dark:hover:bg-royal-purple"
+                  className="bg-purple-30 hover:bg-violets-are-blue dark:hover:bg-royal-purple rounded-full px-4 py-2 text-sm font-medium text-white transition-colors"
                   onClick={handleEditClick}
                 >
                   {t('conversation.edit.update')}
@@ -256,141 +283,106 @@ const ConversationBubble = forwardRef<
     bubble = (
       <div
         ref={ref}
-        className={`flex flex-wrap self-start ${className} group flex-col dark:text-bright-gray`}
+        className={`flex flex-wrap self-start ${className} group dark:text-bright-gray flex-col`}
       >
         {DisableSourceFE ||
         type === 'ERROR' ||
         sources?.length === 0 ||
-        sources?.some((source) => source.link === 'None') ? null : !sources &&
-          chunks !== '0' &&
-          selectedDocs ? (
-          <div className="mb-4 flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
-            <div className="my-2 flex flex-row items-center justify-center gap-3">
-              <Avatar
-                className="h-[26px] w-[30px] text-xl"
-                avatar={
-                  <img
-                    src={Sources}
-                    alt={t('conversation.sources.title')}
-                    className="h-full w-full object-fill"
+        sources?.some((source) => source.link === 'None')
+          ? null
+          : sources && (
+              <div className="mb-4 flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
+                <div className="my-2 flex flex-row items-center justify-center gap-3">
+                  <Avatar
+                    className="h-[26px] w-[30px] text-xl"
+                    avatar={
+                      <img
+                        src={Sources}
+                        alt={t('conversation.sources.title')}
+                        className="h-full w-full object-fill"
+                      />
+                    }
                   />
-                }
-              />
-              <p className="text-base font-semibold">
-                {t('conversation.sources.title')}
-              </p>
-            </div>
-            <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
-              {Array.from({ length: 4 }).map((_, index) => (
-                <div
-                  key={index}
-                  className="flex h-28 cursor-pointer flex-col items-start gap-1 rounded-[20px] bg-gray-1000 p-4 text-purple-30 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:bg-gun-metal dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
-                >
-                  <span className="h-px w-10 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
-                  <span className="h-px w-24 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
-                  <span className="h-px w-16 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
-                  <span className="h-px w-32 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
-                  <span className="h-px w-24 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
-                  <span className="h-px w-20 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
+                  <p className="text-base font-semibold">
+                    {t('conversation.sources.title')}
+                  </p>
                 </div>
-              ))}
-            </div>
-          </div>
-        ) : (
-          sources && (
-            <div className="mb-4 flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
-              <div className="my-2 flex flex-row items-center justify-center gap-3">
-                <Avatar
-                  className="h-[26px] w-[30px] text-xl"
-                  avatar={
-                    <img
-                      src={Sources}
-                      alt={t('conversation.sources.title')}
-                      className="h-full w-full object-fill"
-                    />
-                  }
-                />
-                <p className="text-base font-semibold">
-                  {t('conversation.sources.title')}
-                </p>
-              </div>
-              <div className="fade-in ml-3 mr-5 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
-                <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
-                  {sources?.slice(0, 3)?.map((source, index) => (
-                    <div key={index} className="relative">
-                      <div
-                        className="h-28 cursor-pointer rounded-[20px] bg-gray-1000 p-4 hover:bg-[#F1F1F1] dark:bg-gun-metal dark:hover:bg-[#2C2E3C]"
-                        onMouseOver={() => setActiveTooltip(index)}
-                        onMouseOut={() => setActiveTooltip(null)}
-                      >
-                        <p className="ellipsis-text h-12 break-words text-xs">
-                          {source.text}
-                        </p>
+                <div className="fade-in mr-5 ml-3 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
+                  <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
+                    {sources?.slice(0, 3)?.map((source, index) => (
+                      <div key={index} className="relative">
                         <div
-                          className={`mt-[14px] flex flex-row items-center gap-[6px] underline-offset-2 ${
-                            source.link && source.link !== 'local'
-                              ? 'hover:text-[#007DFF] hover:underline dark:hover:text-[#48A0FF]'
-                              : ''
-                          }`}
-                          onClick={() =>
-                            source.link && source.link !== 'local'
-                              ? window.open(
-                                  source.link,
-                                  '_blank',
-                                  'noopener, noreferrer',
-                                )
-                              : null
-                          }
-                        >
-                          <img
-                            src={Document}
-                            alt="Document"
-                            className="h-[17px] w-[17px] object-fill"
-                          />
-                          <p
-                            className="mt-[2px] truncate text-xs"
-                            title={
-                              source.link && source.link !== 'local'
-                                ? source.link
-                                : source.title
-                            }
-                          >
-                            {source.link && source.link !== 'local'
-                              ? source.link
-                              : source.title}
-                          </p>
-                        </div>
-                      </div>
-                      {activeTooltip === index && (
-                        <div
-                          className={`absolute left-1/2 z-50 max-h-48 w-40 translate-x-[-50%] translate-y-[3px] rounded-xl bg-[#FBFBFB] p-4 text-black shadow-xl dark:bg-chinese-black dark:text-chinese-silver sm:w-56`}
+                          className="bg-gray-1000 dark:bg-gun-metal h-28 cursor-pointer rounded-[20px] p-4 hover:bg-[#F1F1F1] dark:hover:bg-[#2C2E3C]"
                           onMouseOver={() => setActiveTooltip(index)}
                           onMouseOut={() => setActiveTooltip(null)}
                         >
-                          <p className="line-clamp-6 max-h-[164px] overflow-hidden text-ellipsis break-words rounded-md text-sm">
+                          <p className="ellipsis-text h-12 text-xs break-words">
                             {source.text}
                           </p>
+                          <div
+                            className={`mt-[14px] flex flex-row items-center gap-[6px] underline-offset-2 ${
+                              source.link && source.link !== 'local'
+                                ? 'hover:text-[#007DFF] hover:underline dark:hover:text-[#48A0FF]'
+                                : ''
+                            }`}
+                            onClick={() =>
+                              source.link && source.link !== 'local'
+                                ? window.open(
+                                    source.link,
+                                    '_blank',
+                                    'noopener, noreferrer',
+                                  )
+                                : null
+                            }
+                          >
+                            <img
+                              src={Document}
+                              alt="Document"
+                              className="h-[17px] w-[17px] object-fill"
+                            />
+                            <p
+                              className="mt-[2px] truncate text-xs"
+                              title={
+                                source.link && source.link !== 'local'
+                                  ? source.link
+                                  : source.title
+                              }
+                            >
+                              {source.link && source.link !== 'local'
+                                ? source.link
+                                : source.title}
+                            </p>
+                          </div>
                         </div>
-                      )}
-                    </div>
-                  ))}
-                  {(sources?.length ?? 0) > 3 && (
-                    <div
-                      className="flex h-28 cursor-pointer flex-col-reverse rounded-[20px] bg-gray-1000 p-4 text-purple-30 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:bg-gun-metal dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
-                      onClick={() => setIsSidebarOpen(true)}
-                    >
-                      <p className="ellipsis-text h-22 text-xs">
-                        {t('conversation.sources.view_more', {
-                          count: sources?.length ? sources.length - 3 : 0,
-                        })}
-                      </p>
-                    </div>
-                  )}
+                        {activeTooltip === index && (
+                          <div
+                            className={`dark:bg-chinese-black dark:text-chinese-silver absolute left-1/2 z-50 max-h-48 w-40 translate-x-[-50%] translate-y-[3px] rounded-xl bg-[#FBFBFB] p-4 text-black shadow-xl sm:w-56`}
+                            onMouseOver={() => setActiveTooltip(index)}
+                            onMouseOut={() => setActiveTooltip(null)}
+                          >
+                            <p className="line-clamp-6 max-h-[164px] overflow-hidden rounded-md text-sm break-words text-ellipsis">
+                              {source.text}
+                            </p>
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                    {(sources?.length ?? 0) > 3 && (
+                      <div
+                        className="bg-gray-1000 text-purple-30 dark:bg-gun-metal flex h-28 cursor-pointer flex-col-reverse rounded-[20px] p-4 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
+                        onClick={() => setIsSidebarOpen(true)}
+                      >
+                        <p className="ellipsis-text h-22 text-xs">
+                          {t('conversation.sources.view_more', {
+                            count: sources?.length ? sources.length - 3 : 0,
+                          })}
+                        </p>
+                      </div>
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
-          )
-        )}
+            )}
         {toolCalls && toolCalls.length > 0 && (
           <ToolCalls toolCalls={toolCalls} />
         )}
@@ -415,9 +407,9 @@ const ConversationBubble = forwardRef<
               </p>
             </div>
             <div
-              className={`fade-in-bubble mr-5 flex max-w-full rounded-[28px] bg-gray-1000 px-7 py-[18px] dark:bg-gun-metal ${
+              className={`fade-in-bubble bg-gray-1000 dark:bg-gun-metal mr-5 flex max-w-full rounded-[28px] px-7 py-[18px] ${
                 type === 'ERROR'
-                  ? 'relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000 dark:border-red-2000 dark:text-white'
+                  ? 'text-red-3000 dark:border-red-2000 relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal dark:text-white'
                   : 'flex-col rounded-3xl'
               }`}
             >
@@ -429,7 +421,7 @@ const ConversationBubble = forwardRef<
                       <Fragment key={index}>
                         {segment.type === 'text' ? (
                           <ReactMarkdown
-                            className="fade-in whitespace-pre-wrap break-words leading-normal"
+                            className="fade-in leading-normal break-words whitespace-pre-wrap"
                             remarkPlugins={[remarkGfm, remarkMath]}
                             rehypePlugins={[rehypeKatex]}
                             components={{
@@ -447,9 +439,9 @@ const ConversationBubble = forwardRef<
                                 const language = match ? match[1] : '';
 
                                 return match ? (
-                                  <div className="group relative overflow-hidden rounded-[14px] border border-light-silver dark:border-raisin-black">
-                                    <div className="flex items-center justify-between bg-platinum px-2 py-1 dark:bg-eerie-black-2">
-                                      <span className="text-xs font-medium text-just-black dark:text-chinese-white">
+                                  <div className="group border-light-silver dark:border-raisin-black relative overflow-hidden rounded-[14px] border">
+                                    <div className="bg-platinum dark:bg-eerie-black-2 flex items-center justify-between px-2 py-1">
+                                      <span className="text-just-black dark:text-chinese-white text-xs font-medium">
                                         {language}
                                       </span>
                                       <CopyButton
@@ -466,7 +458,7 @@ const ConversationBubble = forwardRef<
                                       style={
                                         isDarkTheme ? vscDarkPlus : oneLight
                                       }
-                                      className="!mt-0"
+                                      className="mt-0!"
                                       customStyle={{
                                         margin: 0,
                                         borderRadius: 0,
@@ -477,7 +469,7 @@ const ConversationBubble = forwardRef<
                                     </SyntaxHighlighter>
                                   </div>
                                 ) : (
-                                  <code className="whitespace-pre-line rounded-[6px] bg-gray-200 px-[8px] py-[4px] text-xs font-normal dark:bg-independence dark:text-bright-gray">
+                                  <code className="dark:bg-independence dark:text-bright-gray rounded-[6px] bg-gray-200 px-[8px] py-[4px] text-xs font-normal whitespace-pre-line">
                                     {children}
                                   </code>
                                 );
@@ -485,7 +477,7 @@ const ConversationBubble = forwardRef<
                               ul({ children }) {
                                 return (
                                   <ul
-                                    className={`list-inside list-disc whitespace-normal pl-4 ${classes.list}`}
+                                    className={`list-inside list-disc pl-4 whitespace-normal ${classes.list}`}
                                   >
                                     {children}
                                   </ul>
@@ -494,7 +486,7 @@ const ConversationBubble = forwardRef<
                               ol({ children }) {
                                 return (
                                   <ol
-                                    className={`list-inside list-decimal whitespace-normal pl-4 ${classes.list}`}
+                                    className={`list-inside list-decimal pl-4 whitespace-normal ${classes.list}`}
                                   >
                                     {children}
                                   </ol>
@@ -502,8 +494,8 @@ const ConversationBubble = forwardRef<
                               },
                               table({ children }) {
                                 return (
-                                  <div className="relative overflow-x-auto rounded-lg border border-silver/40 dark:border-silver/40">
-                                    <table className="w-full text-left text-gray-700 dark:text-bright-gray">
+                                  <div className="border-silver/40 dark:border-silver/40 relative overflow-x-auto rounded-lg border">
+                                    <table className="dark:text-bright-gray w-full text-left text-gray-700">
                                       {children}
                                     </table>
                                   </div>
@@ -511,14 +503,14 @@ const ConversationBubble = forwardRef<
                               },
                               thead({ children }) {
                                 return (
-                                  <thead className="bg-gray-50 text-xs uppercase text-gray-900 dark:bg-[#26272E]/50 dark:text-bright-gray">
+                                  <thead className="dark:text-bright-gray bg-gray-50 text-xs text-gray-900 uppercase dark:bg-[#26272E]/50">
                                     {children}
                                   </thead>
                                 );
                               },
                               tr({ children }) {
                                 return (
-                                  <tr className="border-b border-gray-200 odd:bg-white even:bg-gray-50 dark:border-silver/40 dark:odd:bg-[#26272E] dark:even:bg-[#26272E]/50">
+                                  <tr className="dark:border-silver/40 border-b border-gray-200 odd:bg-white even:bg-gray-50 dark:odd:bg-[#26272E] dark:even:bg-[#26272E]/50">
                                     {children}
                                   </tr>
                                 );
@@ -559,14 +551,14 @@ const ConversationBubble = forwardRef<
         {message && (
           <div className="my-2 ml-2 flex justify-start">
             <div
-              className={`relative mr-2 block items-center justify-center lg:invisible ${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
+              className={`relative mr-2 block items-center justify-center lg:invisible ${type !== 'ERROR' ? 'lg:group-hover:visible' : 'hidden'}`}
             >
               <div>
                 <CopyButton textToCopy={message} />
               </div>
             </div>
             <div
-              className={`relative mr-2 block items-center justify-center lg:invisible ${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
+              className={`relative mr-2 block items-center justify-center lg:invisible ${type !== 'ERROR' ? 'lg:group-hover:visible' : 'hidden'}`}
             >
               <div>
                 <SpeakButton text={message} />
@@ -584,21 +576,21 @@ const ConversationBubble = forwardRef<
                     feedback === 'LIKE' || isLikeClicked
                       ? 'visible'
                       : 'lg:invisible'
-                  } ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''} ${feedback === 'DISLIKE' && type !== 'ERROR' ? 'hidden' : ''}`}
+                  } ${type !== 'ERROR' ? 'lg:group-hover:visible' : ''} ${feedback === 'DISLIKE' && type !== 'ERROR' ? 'hidden' : ''}`}
                 >
                   <div>
                     <div
                       className={`flex items-center justify-center rounded-full p-2 ${
                         isLikeHovered
-                          ? 'bg-[#EEEEEE] dark:bg-purple-taupe'
-                          : 'bg-[#ffffff] dark:bg-transparent'
+                          ? 'dark:bg-purple-taupe bg-[#EEEEEE]'
+                          : 'bg-white-3000 dark:bg-transparent'
                       }`}
                     >
                       <Like
                         className={`cursor-pointer ${
                           isLikeClicked || feedback === 'LIKE'
                             ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
-                            : 'fill-none stroke-gray-4000'
+                            : 'stroke-gray-4000 fill-none'
                         }`}
                         onClick={() => {
                           if (feedback === undefined || feedback === null) {
@@ -623,21 +615,21 @@ const ConversationBubble = forwardRef<
                     feedback === 'DISLIKE' || isLikeClicked
                       ? 'visible'
                       : 'lg:invisible'
-                  } ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''} ${feedback === 'LIKE' && type !== 'ERROR' ? 'hidden' : ''}`}
+                  } ${type !== 'ERROR' ? 'lg:group-hover:visible' : ''} ${feedback === 'LIKE' && type !== 'ERROR' ? 'hidden' : ''}`}
                 >
                   <div>
                     <div
                       className={`flex items-center justify-center rounded-full p-2 ${
                         isDislikeHovered
-                          ? 'bg-[#EEEEEE] dark:bg-purple-taupe'
-                          : 'bg-[#ffffff] dark:bg-transparent'
+                          ? 'dark:bg-purple-taupe bg-[#EEEEEE]'
+                          : 'bg-white-3000 dark:bg-transparent'
                       }`}
                     >
                       <Dislike
                         className={`cursor-pointer ${
                           isDislikeClicked || feedback === 'DISLIKE'
                             ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent'
-                            : 'fill-none stroke-gray-4000'
+                            : 'stroke-gray-4000 fill-none'
                         }`}
                         onClick={() => {
                           if (feedback === undefined || feedback === null) {
@@ -701,7 +693,7 @@ function AllSources(sources: AllSourcesProps) {
           return (
             <div
               key={index}
-              className={`group/card relative w-full rounded-[20px] bg-gray-1000 p-4 transition-colors hover:bg-[#F1F1F1] dark:bg-[#28292E] dark:hover:bg-[#2C2E3C] ${
+              className={`group/card bg-gray-1000 relative w-full rounded-[20px] p-4 transition-colors hover:bg-[#F1F1F1] dark:bg-[#28292E] dark:hover:bg-[#2C2E3C] ${
                 isExternalSource ? 'cursor-pointer' : ''
               }`}
               onClick={() =>
@@ -710,7 +702,7 @@ function AllSources(sources: AllSourcesProps) {
             >
               <p
                 title={source.title}
-                className={`ellipsis-text break-words text-left text-sm font-semibold ${
+                className={`ellipsis-text text-left text-sm font-semibold break-words ${
                   isExternalSource
                     ? 'group-hover/card:text-purple-30 dark:group-hover/card:text-[#8C67D7]'
                     : ''
@@ -723,13 +715,13 @@ function AllSources(sources: AllSourcesProps) {
                     alt="External Link"
                     className={`ml-1 inline h-3 w-3 object-fill dark:invert ${
                       isExternalSource
-                        ? 'group-hover/card:contrast-[50%] group-hover/card:hue-rotate-[235deg] group-hover/card:invert-[31%] group-hover/card:saturate-[752%] group-hover/card:sepia-[80%] group-hover/card:filter'
+                        ? 'group-hover/card:contrast-50 group-hover/card:hue-rotate-235 group-hover/card:invert-31 group-hover/card:saturate-752 group-hover/card:sepia-80 group-hover/card:filter'
                         : ''
                     }`}
                   />
                 )}
               </p>
-              <p className="mt-3 line-clamp-4 break-words rounded-md text-left text-xs text-black dark:text-chinese-silver">
+              <p className="dark:text-chinese-silver mt-3 line-clamp-4 rounded-md text-left text-xs break-words text-black">
                 {source.text}
               </p>
             </div>
@@ -769,18 +761,18 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
         </button>
       </div>
       {isToolCallsOpen && (
-        <div className="fade-in ml-3 mr-5 w-[90vw] md:w-[70vw] lg:w-full">
+        <div className="fade-in mr-5 ml-3 w-[90vw] md:w-[70vw] lg:w-full">
           <div className="grid grid-cols-1 gap-2">
             {toolCalls.map((toolCall, index) => (
               <Accordion
                 key={`tool-call-${index}`}
                 title={`${toolCall.tool_name}  -  ${toolCall.action_name.substring(0, toolCall.action_name.lastIndexOf('_'))}`}
-                className="w-full rounded-[20px] bg-gray-1000 hover:bg-[#F1F1F1] dark:bg-gun-metal dark:hover:bg-[#2C2E3C]"
+                className="bg-gray-1000 dark:bg-gun-metal w-full rounded-[20px] hover:bg-[#F1F1F1] dark:hover:bg-[#2C2E3C]"
                 titleClassName="px-6 py-2 text-sm font-semibold"
               >
                 <div className="flex flex-col gap-1">
-                  <div className="flex flex-col rounded-2xl border border-silver dark:border-silver/20">
-                    <p className="flex flex-row items-center justify-between break-words rounded-t-2xl bg-black/10 px-2 py-1 text-sm font-semibold dark:bg-[#191919]">
+                  <div className="border-silver dark:border-silver/20 flex flex-col rounded-2xl border">
+                    <p className="dark:bg-eerie-black-2 flex flex-row items-center justify-between rounded-t-2xl bg-black/10 px-2 py-1 text-sm font-semibold break-words">
                       <span style={{ fontFamily: 'IBMPlexMono-Medium' }}>
                         Arguments
                       </span>{' '}
@@ -788,7 +780,7 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
                         textToCopy={JSON.stringify(toolCall.arguments, null, 2)}
                       />
                     </p>
-                    <p className="dark:tex break-words rounded-b-2xl p-2 font-mono text-sm dark:bg-[#222327]">
+                    <p className="dark:tex dark:bg-raisin-black rounded-b-2xl p-2 font-mono text-sm break-words">
                       <span
                         className="leading-[23px] text-black dark:text-gray-400"
                         style={{ fontFamily: 'IBMPlexMono-Medium' }}
@@ -797,8 +789,8 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
                       </span>
                     </p>
                   </div>
-                  <div className="flex flex-col rounded-2xl border border-silver dark:border-silver/20">
-                    <p className="flex flex-row items-center justify-between break-words rounded-t-2xl bg-black/10 px-2 py-1 text-sm font-semibold dark:bg-[#191919]">
+                  <div className="border-silver dark:border-silver/20 flex flex-col rounded-2xl border">
+                    <p className="dark:bg-eerie-black-2 flex flex-row items-center justify-between rounded-t-2xl bg-black/10 px-2 py-1 text-sm font-semibold break-words">
                       <span style={{ fontFamily: 'IBMPlexMono-Medium' }}>
                         Response
                       </span>{' '}
@@ -807,12 +799,12 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
                       />
                     </p>
                     {toolCall.status === 'pending' && (
-                      <span className="flex w-full items-center justify-center rounded-b-2xl p-2 dark:bg-[#222327]">
+                      <span className="dark:bg-raisin-black flex w-full items-center justify-center rounded-b-2xl p-2">
                         <Spinner size="small" />
                       </span>
                     )}
                     {toolCall.status === 'completed' && (
-                      <p className="break-words rounded-b-2xl p-2 font-mono text-sm dark:bg-[#222327]">
+                      <p className="dark:bg-raisin-black rounded-b-2xl p-2 font-mono text-sm break-words">
                         <span
                           className="leading-[23px] text-black dark:text-gray-400"
                           style={{ fontFamily: 'IBMPlexMono-Medium' }}
@@ -868,10 +860,10 @@ function Thought({
         </button>
       </div>
       {isThoughtOpen && (
-        <div className="fade-in ml-2 mr-5 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
-          <div className="rounded-[28px] bg-gray-1000 px-7 py-[18px] dark:bg-gun-metal">
+        <div className="fade-in mr-5 ml-2 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
+          <div className="bg-gray-1000 dark:bg-gun-metal rounded-[28px] px-7 py-[18px]">
             <ReactMarkdown
-              className="fade-in whitespace-pre-wrap break-words leading-normal"
+              className="fade-in leading-normal break-words whitespace-pre-wrap"
               remarkPlugins={[remarkGfm, remarkMath]}
               rehypePlugins={[rehypeKatex]}
               components={{
@@ -881,9 +873,9 @@ function Thought({
                   const language = match ? match[1] : '';
 
                   return match ? (
-                    <div className="group relative overflow-hidden rounded-[14px] border border-light-silver dark:border-raisin-black">
-                      <div className="flex items-center justify-between bg-platinum px-2 py-1 dark:bg-eerie-black-2">
-                        <span className="text-xs font-medium text-just-black dark:text-chinese-white">
+                    <div className="group border-light-silver dark:border-raisin-black relative overflow-hidden rounded-[14px] border">
+                      <div className="bg-platinum dark:bg-eerie-black-2 flex items-center justify-between px-2 py-1">
+                        <span className="text-just-black dark:text-chinese-white text-xs font-medium">
                           {language}
                         </span>
                         <CopyButton
@@ -895,7 +887,7 @@ function Thought({
                         PreTag="div"
                         language={language}
                         style={isDarkTheme ? vscDarkPlus : oneLight}
-                        className="!mt-0"
+                        className="mt-0!"
                         customStyle={{
                           margin: 0,
                           borderRadius: 0,
@@ -906,29 +898,29 @@ function Thought({
                       </SyntaxHighlighter>
                     </div>
                   ) : (
-                    <code className="whitespace-pre-line rounded-[6px] bg-gray-200 px-[8px] py-[4px] text-xs font-normal dark:bg-independence dark:text-bright-gray">
+                    <code className="dark:bg-independence dark:text-bright-gray rounded-[6px] bg-gray-200 px-[8px] py-[4px] text-xs font-normal whitespace-pre-line">
                       {children}
                     </code>
                   );
                 },
                 ul({ children }) {
                   return (
-                    <ul className="list-inside list-disc whitespace-normal pl-4">
+                    <ul className="list-inside list-disc pl-4 whitespace-normal">
                       {children}
                     </ul>
                   );
                 },
                 ol({ children }) {
                   return (
-                    <ol className="list-inside list-decimal whitespace-normal pl-4">
+                    <ol className="list-inside list-decimal pl-4 whitespace-normal">
                       {children}
                     </ol>
                   );
                 },
                 table({ children }) {
                   return (
-                    <div className="relative overflow-x-auto rounded-lg border border-silver/40 dark:border-silver/40">
-                      <table className="w-full text-left text-gray-700 dark:text-bright-gray">
+                    <div className="border-silver/40 dark:border-silver/40 relative overflow-x-auto rounded-lg border">
+                      <table className="dark:text-bright-gray w-full text-left text-gray-700">
                         {children}
                       </table>
                     </div>
@@ -936,14 +928,14 @@ function Thought({
                 },
                 thead({ children }) {
                   return (
-                    <thead className="bg-gray-50 text-xs uppercase text-gray-900 dark:bg-[#26272E]/50 dark:text-bright-gray">
+                    <thead className="dark:text-bright-gray bg-gray-50 text-xs text-gray-900 uppercase dark:bg-[#26272E]/50">
                       {children}
                     </thead>
                   );
                 },
                 tr({ children }) {
                   return (
-                    <tr className="border-b border-gray-200 odd:bg-white even:bg-gray-50 dark:border-silver/40 dark:odd:bg-[#26272E] dark:even:bg-[#26272E]/50">
+                    <tr className="dark:border-silver/40 border-b border-gray-200 odd:bg-white even:bg-gray-50 dark:odd:bg-[#26272E] dark:even:bg-[#26272E]/50">
                       {children}
                     </tr>
                   );

frontend/src/conversation/ConversationTile.tsx

@@ -192,7 +192,7 @@ export default function ConversationTile({
           conversationId !== conversation.id &&
             selectConversation(conversation.id);
         }}
-        className={`mx-4 my-auto mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl pl-4 hover:bg-bright-gray dark:hover:bg-dark-charcoal ${
+        className={`hover:bg-bright-gray dark:hover:bg-dark-charcoal mx-4 my-auto mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl pl-4 ${
           conversationId === conversation.id || isOpen || isHovered || isEdit
             ? 'bg-bright-gray dark:bg-dark-charcoal'
             : ''
@@ -203,19 +203,19 @@ export default function ConversationTile({
             <input
               autoFocus
               type="text"
-              className="h-6 w-full bg-transparent px-1 text-sm font-normal leading-6 focus:outline-[#0075FF]"
+              className="h-6 w-full bg-transparent px-1 text-sm leading-6 font-normal focus:outline-[#0075FF]"
               value={conversationName}
               onChange={(e) => setConversationsName(e.target.value)}
               onKeyDown={handleRenameKeyDown}
             />
           ) : (
-            <p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black dark:text-bright-gray">
+            <p className="text-eerie-black dark:text-bright-gray my-auto overflow-hidden text-sm leading-6 font-normal text-ellipsis whitespace-nowrap">
               {conversationName}
             </p>
           )}
         </div>
         {(conversationId === conversation.id || isHovered || isOpen) && (
-          <div className="flex text-white dark:text-sonic-silver" ref={menuRef}>
+          <div className="dark:text-sonic-silver flex text-white" ref={menuRef}>
             {isEdit ? (
               <div className="flex gap-1">
                 <img
@@ -234,7 +234,7 @@ export default function ConversationTile({
                 <img
                   src={Exit}
                   alt="Exit"
-                  className={`mr-4 mt-px h-3 w-3 cursor-pointer filter hover:opacity-50 dark:invert`}
+                  className={`mt-px mr-4 h-3 w-3 cursor-pointer filter hover:opacity-50 dark:invert`}
                   id={`img-${conversation.id}`}
                   onClick={(event: SyntheticEvent) => {
                     event.stopPropagation();
@@ -250,7 +250,7 @@ export default function ConversationTile({
                 }}
                 className="mr-2 flex w-4 justify-center"
               >
-                <img src={threeDots} width={8} />
+                <img src={threeDots} width={8} alt="menu" />
               </button>
             )}
             <ContextMenu

frontend/src/conversation/SharedConversation.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -24,6 +23,7 @@ import {
   updateQuery,
 } from './sharedConversationSlice';
 import { selectCompletedAttachments } from '../upload/uploadSlice';
+import { DocumentHead } from '../components/DocumentHead';
 
 export const SharedConversation = () => {
   const navigate = useNavigate();
@@ -129,33 +129,27 @@ export const SharedConversation = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{`DocsGPT | ${title}`}</title>
-        <meta name="description" content="Shared conversations with DocsGPT" />
-        <meta property="og:title" content={title} />
-        <meta
-          property="og:description"
-          content="Shared conversations with DocsGPT"
-        />
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content={title} />
-        <meta
-          name="twitter:description"
-          content="Shared conversations with DocsGPT"
-        />
-      </Helmet>
-      <div className="flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden dark:bg-raisin-black">
-        <div className="w-full max-w-[1200px] border-b p-2 dark:border-b-silver md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
-          <h1 className="font-semi-bold text-4xl text-chinese-black dark:text-chinese-silver">
+      <DocumentHead
+        title={`DocsGPT | ${title}`}
+        description="Shared conversations with DocsGPT"
+        ogTitle={title}
+        ogDescription="Shared conversations with DocsGPT"
+        twitterCard="summary_large_image"
+        twitterTitle={title}
+        twitterDescription="Shared conversations with DocsGPT"
+      />
+      <div className="dark:bg-raisin-black flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden">
+        <div className="dark:border-b-silver w-full max-w-[1200px] border-b p-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
+          <h1 className="font-semi-bold text-chinese-black dark:text-chinese-silver text-4xl">
             {title}
           </h1>
-          <h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
+          <h2 className="font-semi-bold text-chinese-black dark:text-chinese-silver text-base">
             {t('sharedConv.subtitle')}{' '}
             <a href="/" className="text-[#007DFF]">
               DocsGPT
             </a>
           </h2>
-          <h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
+          <h2 className="font-semi-bold text-chinese-black dark:text-chinese-silver text-base">
             {date}
           </h2>
         </div>
@@ -178,13 +172,13 @@ export const SharedConversation = () => {
           ) : (
             <button
               onClick={() => navigate('/')}
-              className="mb-14 w-fit rounded-full bg-purple-30 px-5 py-3 text-white shadow-xl transition-colors duration-200 hover:bg-violets-are-blue sm:mb-0"
+              className="bg-purple-30 hover:bg-violets-are-blue mb-14 w-fit rounded-full px-5 py-3 text-white shadow-xl transition-colors duration-200 sm:mb-0"
             >
               {t('sharedConv.button')}
             </button>
           )}
 
-          <p className="hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs text-gray-4000 dark:text-sonic-silver md:inline md:w-full">
+          <p className="text-gray-4000 dark:text-sonic-silver hidden w-screen self-center bg-transparent py-2 text-center text-xs md:inline md:w-full">
             {t('sharedConv.meta')}
           </p>
         </div>

frontend/src/conversation/conversationSlice.ts

@@ -11,13 +11,7 @@ import {
   handleFetchAnswer,
   handleFetchAnswerSteaming,
 } from './conversationHandlers';
-import {
-  Answer,
-  Attachment,
-  ConversationState,
-  Query,
-  Status,
-} from './conversationModels';
+import { Answer, ConversationState, Query, Status } from './conversationModels';
 import { ToolCallsType } from './types';
 
 const initialState: ConversationState = {
@@ -38,65 +32,64 @@ export function handleAbort() {
 
 export const fetchAnswer = createAsyncThunk<
   Answer,
-  { question: string; indx?: number; isPreview?: boolean }
->(
-  'fetchAnswer',
-  async ({ question, indx, isPreview = false }, { dispatch, getState }) => {
-    if (abortController) abortController.abort();
-    abortController = new AbortController();
-    const { signal } = abortController;
+  { question: string; indx?: number }
+>('fetchAnswer', async ({ question, indx }, { dispatch, getState }) => {
+  if (abortController) abortController.abort();
+  abortController = new AbortController();
+  const { signal } = abortController;
 
-    let isSourceUpdated = false;
-    const state = getState() as RootState;
-    const attachmentIds = selectCompletedAttachments(state)
-      .filter((a) => a.id)
-      .map((a) => a.id) as string[];
+  let isSourceUpdated = false;
+  const state = getState() as RootState;
+  const attachmentIds = selectCompletedAttachments(state)
+    .filter((a) => a.id)
+    .map((a) => a.id) as string[];
 
-    if (attachmentIds.length > 0) {
-      dispatch(clearAttachments());
-    }
+  if (attachmentIds.length > 0) {
+    dispatch(clearAttachments());
+  }
 
-    const currentConversationId = state.conversation.conversationId;
-    const conversationIdToSend = isPreview ? null : currentConversationId;
-    const save_conversation = isPreview ? false : true;
+  const currentConversationId = state.conversation.conversationId;
 
-    if (state.preference) {
-      if (API_STREAMING) {
-        await handleFetchAnswerSteaming(
-          question,
-          signal,
-          state.preference.token,
-          state.preference.selectedDocs!,
-          state.conversation.queries,
-          conversationIdToSend,
-          state.preference.prompt.id,
-          state.preference.chunks,
-          state.preference.token_limit,
-          (event) => {
-            const data = JSON.parse(event.data);
-            const targetIndex = indx ?? state.conversation.queries.length - 1;
+  if (state.preference) {
+    if (API_STREAMING) {
+      await handleFetchAnswerSteaming(
+        question,
+        signal,
+        state.preference.token,
+        state.preference.selectedDocs!,
+        state.conversation.queries,
+        currentConversationId,
+        state.preference.prompt.id,
+        state.preference.chunks,
+        state.preference.token_limit,
+        (event) => {
+          const data = JSON.parse(event.data);
+          const targetIndex = indx ?? state.conversation.queries.length - 1;
 
+          // Only process events if they match the current conversation
+          if (currentConversationId === state.conversation.conversationId) {
             if (data.type === 'end') {
               dispatch(conversationSlice.actions.setStatus('idle'));
-              if (!isPreview) {
-                getConversations(state.preference.token)
-                  .then((fetchedConversations) => {
-                    dispatch(setConversations(fetchedConversations));
-                  })
-                  .catch((error) => {
-                    console.error('Failed to fetch conversations: ', error);
-                  });
-              }
+              getConversations(state.preference.token)
+                .then((fetchedConversations) => {
+                  dispatch(setConversations(fetchedConversations));
+                })
+                .catch((error) => {
+                  console.error('Failed to fetch conversations: ', error);
+                });
               if (!isSourceUpdated) {
                 dispatch(
                   updateStreamingSource({
+                    conversationId: currentConversationId,
                     index: targetIndex,
                     query: { sources: [] },
                   }),
                 );
               }
             } else if (data.type === 'id') {
-              if (!isPreview) {
+              // Only update the conversationId if it's currently null
+              const currentState = getState() as RootState;
+              if (currentState.conversation.conversationId === null) {
                 dispatch(
                   updateConversationId({
                     query: { conversationId: data.id },
@@ -107,6 +100,7 @@ export const fetchAnswer = createAsyncThunk<
               const result = data.thought;
               dispatch(
                 updateThought({
+                  conversationId: currentConversationId,
                   index: targetIndex,
                   query: { thought: result },
                 }),
@@ -115,6 +109,7 @@ export const fetchAnswer = createAsyncThunk<
               isSourceUpdated = true;
               dispatch(
                 updateStreamingSource({
+                  conversationId: currentConversationId,
                   index: targetIndex,
                   query: { sources: data.source ?? [] },
                 }),
@@ -131,6 +126,7 @@ export const fetchAnswer = createAsyncThunk<
               dispatch(conversationSlice.actions.setStatus('failed'));
               dispatch(
                 conversationSlice.actions.raiseError({
+                  conversationId: currentConversationId,
                   index: targetIndex,
                   message: data.error,
                 }),
@@ -138,88 +134,87 @@ export const fetchAnswer = createAsyncThunk<
             } else {
               dispatch(
                 updateStreamingQuery({
+                  conversationId: currentConversationId,
                   index: targetIndex,
                   query: { response: data.answer },
                 }),
               );
             }
-          },
-          indx,
-          state.preference.selectedAgent?.id,
-          attachmentIds,
-          save_conversation,
-        );
-      } else {
-        const answer = await handleFetchAnswer(
-          question,
-          signal,
-          state.preference.token,
-          state.preference.selectedDocs!,
-          state.conversation.queries,
-          state.conversation.conversationId,
-          state.preference.prompt.id,
-          state.preference.chunks,
-          state.preference.token_limit,
-          state.preference.selectedAgent?.id,
-          attachmentIds,
-          save_conversation,
-        );
-        if (answer) {
-          let sourcesPrepped = [];
-          sourcesPrepped = answer.sources.map((source: { title: string }) => {
-            if (source && source.title) {
-              const titleParts = source.title.split('/');
-              return {
-                ...source,
-                title: titleParts[titleParts.length - 1],
-              };
-            }
-            return source;
-          });
-
-          const targetIndex = indx ?? state.conversation.queries.length - 1;
-
-          dispatch(
-            updateQuery({
-              index: targetIndex,
-              query: {
-                response: answer.answer,
-                thought: answer.thought,
-                sources: sourcesPrepped,
-                tool_calls: answer.toolCalls,
-              },
-            }),
-          );
-          if (!isPreview) {
-            dispatch(
-              updateConversationId({
-                query: { conversationId: answer.conversationId },
-              }),
-            );
-            getConversations(state.preference.token)
-              .then((fetchedConversations) => {
-                dispatch(setConversations(fetchedConversations));
-              })
-              .catch((error) => {
-                console.error('Failed to fetch conversations: ', error);
-              });
           }
-          dispatch(conversationSlice.actions.setStatus('idle'));
-        }
+        },
+        indx,
+        state.preference.selectedAgent?.id,
+        attachmentIds,
+        true, // Always save conversation
+      );
+    } else {
+      const answer = await handleFetchAnswer(
+        question,
+        signal,
+        state.preference.token,
+        state.preference.selectedDocs!,
+        state.conversation.queries,
+        state.conversation.conversationId,
+        state.preference.prompt.id,
+        state.preference.chunks,
+        state.preference.token_limit,
+        state.preference.selectedAgent?.id,
+        attachmentIds,
+        true, // Always save conversation
+      );
+      if (answer) {
+        let sourcesPrepped = [];
+        sourcesPrepped = answer.sources.map((source: { title: string }) => {
+          if (source && source.title) {
+            const titleParts = source.title.split('/');
+            return {
+              ...source,
+              title: titleParts[titleParts.length - 1],
+            };
+          }
+          return source;
+        });
+
+        const targetIndex = indx ?? state.conversation.queries.length - 1;
+
+        dispatch(
+          updateQuery({
+            index: targetIndex,
+            query: {
+              response: answer.answer,
+              thought: answer.thought,
+              sources: sourcesPrepped,
+              tool_calls: answer.toolCalls,
+            },
+          }),
+        );
+        dispatch(
+          updateConversationId({
+            query: { conversationId: answer.conversationId },
+          }),
+        );
+        getConversations(state.preference.token)
+          .then((fetchedConversations) => {
+            dispatch(setConversations(fetchedConversations));
+          })
+          .catch((error) => {
+            console.error('Failed to fetch conversations: ', error);
+          });
+        dispatch(conversationSlice.actions.setStatus('idle'));
       }
     }
-    return {
-      conversationId: null,
-      title: null,
-      answer: '',
-      query: question,
-      result: '',
-      thought: '',
-      sources: [],
-      tool_calls: [],
-    };
-  },
-);
+  }
+  return {
+    conversationId: null,
+    title: null,
+    answer: '',
+    query: question,
+    result: '',
+    thought: '',
+    sources: [],
+    tool_calls: [],
+  };
+});
 
 export const conversationSlice = createSlice({
   name: 'conversation',
@@ -242,18 +237,20 @@ export const conversationSlice = createSlice({
     },
     updateStreamingQuery(
       state,
-      action: PayloadAction<{ index: number; query: Partial<Query> }>,
+      action: PayloadAction<{
+        conversationId: string | null;
+        index: number;
+        query: Partial<Query>;
+      }>,
     ) {
-      if (state.status === 'idle') return;
-      const { index, query } = action.payload;
+      const { conversationId, index, query } = action.payload;
+      // Only update if this update is for the current conversation
+      if (state.status === 'idle' || state.conversationId !== conversationId)
+        return;
+
       if (query.response != undefined) {
         state.queries[index].response =
           (state.queries[index].response || '') + query.response;
-      } else {
-        state.queries[index] = {
-          ...state.queries[index],
-          ...query,
-        };
       }
     },
     updateConversationId(
@@ -265,29 +262,31 @@ export const conversationSlice = createSlice({
     },
     updateThought(
       state,
-      action: PayloadAction<{ index: number; query: Partial<Query> }>,
+      action: PayloadAction<{
+        conversationId: string | null;
+        index: number;
+        query: Partial<Query>;
+      }>,
     ) {
-      const { index, query } = action.payload;
+      const { conversationId, index, query } = action.payload;
+      if (state.conversationId !== conversationId) return;
+
       if (query.thought != undefined) {
         state.queries[index].thought =
           (state.queries[index].thought || '') + query.thought;
-      } else {
-        state.queries[index] = {
-          ...state.queries[index],
-          ...query,
-        };
       }
     },
     updateStreamingSource(
       state,
-      action: PayloadAction<{ index: number; query: Partial<Query> }>,
+      action: PayloadAction<{
+        conversationId: string | null;
+        index: number;
+        query: Partial<Query>;
+      }>,
     ) {
       const { index, query } = action.payload;
-      if (!state.queries[index].sources) {
-        state.queries[index].sources = query?.sources;
-      } else {
-        state.queries[index].sources!.push(query.sources![0]);
-      }
+      if (query.sources !== undefined)
+        state.queries[index].sources = query.sources;
     },
     updateToolCall(state, action) {
       const { index, tool_call } = action.payload;
@@ -323,9 +322,15 @@ export const conversationSlice = createSlice({
     },
     raiseError(
       state,
-      action: PayloadAction<{ index: number; message: string }>,
+      action: PayloadAction<{
+        conversationId: string | null;
+        index: number;
+        message: string;
+      }>,
     ) {
-      const { index, message } = action.payload;
+      const { conversationId, index, message } = action.payload;
+      if (state.conversationId !== conversationId) return;
+
       state.queries[index].error = message;
     },
 

frontend/src/hooks/index.ts

@@ -1,7 +1,7 @@
 import { useEffect, RefObject, useState } from 'react';
 
 export function useOutsideAlerter<T extends HTMLElement>(
-  ref: RefObject<T>,
+  ref: RefObject<T | null>,
   handler: () => void,
   additionalDeps: unknown[],
   handleEscapeKey?: boolean,
@@ -30,7 +30,7 @@ export function useOutsideAlerter<T extends HTMLElement>(
         document.removeEventListener('keydown', handleEscape);
       }
     };
-  }, [ref, ...additionalDeps]);
+  }, [ref, handler, handleEscapeKey, ...additionalDeps]);
 }
 
 export function useMediaQuery() {

frontend/src/index.css

@@ -1,105 +1,169 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap')
+layer(base);
 
-:root {
-  --viewport-height: 100vh;
-  font-synthesis: none !important;
+@import 'tailwindcss';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --font-roboto: Roboto, sans-serif;
+
+  --color-eerie-black: #212121;
+  --color-black-1000: #343541;
+  --color-jet: #343541;
+  --color-gray-alpha: rgba(0, 0, 0, 0.64);
+  --color-gray-1000: #f6f6f6;
+  --color-gray-2000: rgba(0, 0, 0, 0.5);
+  --color-gray-3000: rgba(243, 243, 243, 1);
+  --color-gray-4000: #949494;
+  --color-gray-5000: #bbbbbb;
+  --color-gray-6000: #757575;
+  --color-red-1000: rgb(254, 202, 202);
+  --color-red-2000: #f44336;
+  --color-red-3000: #621b16;
+  --color-blue-1000: #7d54d1;
+  --color-blue-2000: #002b49;
+  --color-blue-3000: #4b02e2;
+  --color-purple-30: #7d54d1;
+  --color-purple-3000: rgb(230, 222, 247);
+  --color-blue-4000: rgba(0, 125, 255, 0.36);
+  --color-blue-5000: rgba(0, 125, 255);
+  --color-green-2000: #0fff50;
+  --color-light-gray: #edeef0;
+  --color-white-3000: #ffffff;
+  --color-just-black: #00000;
+  --color-purple-taupe: #464152;
+  --color-dove-gray: #6c6c6c;
+  --color-silver: #c4c4c4;
+  --color-rainy-gray: #a4a4a4;
+  --color-raisin-black: #222327;
+  --color-chinese-black: #161616;
+  --color-chinese-silver: #cdcdcd;
+  --color-dark-charcoal: #2f3036;
+  --color-bright-gray: #ebebeb;
+  --color-outer-space: #444654;
+  --color-gun-metal: #2e303e;
+  --color-sonic-silver: #747474;
+  --color-soap: #d8ccf1;
+  --color-independence: #54546d;
+  --color-philippine-yellow: #ffc700;
+  --color-chinese-white: #e0e0e0;
+  --color-dark-gray: #aaaaaa;
+  --color-dim-gray: #6a6a6a;
+  --color-cultured: #f4f4f4;
+  --color-charleston-green: #2b2c31;
+  --color-charleston-green-2: #26272e;
+  --color-charleston-green-3: #26272a;
+  --color-grey: #7e7e7e;
+  --color-lotion: #fbfbfb;
+  --color-platinum: #e6e6e6;
+  --color-eerie-black-2: #191919;
+  --color-light-silver: #d9d9d9;
+  --color-carbon: #2e2e2e;
+  --color-onyx: #35363b;
+  --color-royal-purple: #6c4ab0;
+  --color-chinese-black-2: #0f1419;
+  --color-gainsboro: #d9dcde;
+  --color-onyx-2: #35383c;
+  --color-philippine-grey: #929292;
+  --color-charcoal-grey: #53545d;
+  --color-rosso-corsa: #d30000;
+  --color-north-texas-green: #0c9d35;
+  --color-medium-purple: #8d66dd;
+  --color-slate-blue: #6f5fca;
+  --color-old-silver: #848484;
+  --color-arsenic: #4d4e58;
+  --color-light-gainsboro: #d7d7d7;
+  --color-raisin-black-light: #18181b;
+  --color-gunmetal: #32333b;
+  --color-sonic-silver-light: #7f7f82;
+  --color-violets-are-blue: #976af3;
 }
 
-@supports (height: 100dvh) {
-  :root {
-    --viewport-height: 100dvh; /* Use dvh where supported */
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
   }
 }
 
-body.dark {
-  background-color: #202124; /* raisin-black */
-}
-::-webkit-scrollbar {
-  width: 8px;
-}
-::-webkit-scrollbar-track {
-  background: #f1f1f1;
-}
-.dark ::-webkit-scrollbar-track {
-  background: #2f3036;
-}
-::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 40px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-.dark ::-webkit-scrollbar-thumb:hover {
-  background: #b1afaf;
-}
-
-@layer utilities {
+@utility no-scrollbar {
   /* Chrome, Safari and Opera */
-  .no-scrollbar::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     display: none;
   }
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
 
-  .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-
+@utility scrollbar-thin {
   /* Thin scrollbar utility */
-  .scrollbar-thin::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 6px;
     height: 6px;
   }
 
-  .scrollbar-thin::-webkit-scrollbar-track {
+  &::-webkit-scrollbar-track {
     background: transparent;
   }
 
-  .scrollbar-thin::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     background: rgba(156, 163, 175, 0.5);
     border-radius: 3px;
   }
 
-  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  &::-webkit-scrollbar-thumb:hover {
     background: rgba(156, 163, 175, 0.7);
   }
 
   /* For Firefox */
-  .scrollbar-thin {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
-  }
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
 }
 
-@layer components {
-  .table-default {
-    @apply block w-full table-auto justify-center overflow-auto rounded-xl border border-silver text-center dark:border-silver/40 dark:text-bright-gray;
-  }
+@utility table-default {
+  @apply block w-full table-auto justify-center overflow-auto rounded-xl border border-silver text-center dark:border-silver/40 dark:text-bright-gray;
 
-  .table-default th {
+  & th {
     @apply text-nowrap p-4 font-normal text-gray-400;
   }
 
-  .table-default th {
+  & th {
     flex: 1;
   }
 
-  .table-default th:last-child {
+  & th:last-child {
     flex: 0;
   }
 
-  .table-default td {
+  & td {
     @apply w-full border-t border-silver px-4 py-2 dark:border-silver/40;
   }
 
-  .table-default td:last-child {
+  & td:last-child {
     @apply border-r-0;
   }
 
-  .table-default th,
-  .table-default td {
+  & th {
+    min-width: 150px;
+    max-width: 320px;
+    overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: grey transparent;
+  }
+
+  & td {
     min-width: 150px;
     max-width: 320px;
     overflow: auto;
@@ -108,7 +172,44 @@ body.dark {
   }
 }
 
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+@layer utilities {
+  :root {
+    --viewport-height: 100vh;
+    font-synthesis: none !important;
+  }
+
+  @supports (height: 100dvh) {
+    :root {
+      --viewport-height: 100dvh; /* Use dvh where supported */
+    }
+  }
+
+  body.dark {
+    background-color: #202124; /* raisin-black */
+  }
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+  .dark ::-webkit-scrollbar-track {
+    background: #2f3036;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 40px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+  .dark ::-webkit-scrollbar-thumb:hover {
+    background: #b1afaf;
+  }
+}
+
+@layer base{
+  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Document
    ========================================================================== */
@@ -324,6 +425,7 @@ button,
 [type='reset'],
 [type='submit'] {
   -webkit-appearance: button;
+  cursor: pointer;
 }
 
 /**
@@ -584,3 +686,5 @@ input:-webkit-autofill:active {
     transform: translateY(0);
   }
 }
+
+}

frontend/src/modals/AddToolModal.tsx

@@ -104,7 +104,7 @@ export default function AddToolModal({
         >
           <div className="flex h-full flex-col">
             <div>
-              <h2 className="px-3 text-xl font-semibold text-jet dark:text-bright-gray">
+              <h2 className="text-jet dark:text-bright-gray px-3 text-xl font-semibold">
                 {t('settings.tools.selectToolSetup')}
               </h2>
               <div className="mt-5 h-[73vh] overflow-auto px-3 py-px">
@@ -119,7 +119,7 @@ export default function AddToolModal({
                         role="button"
                         tabIndex={0}
                         key={index}
-                        className="flex h-52 w-full cursor-pointer flex-col justify-between rounded-2xl border border-light-gainsboro bg-white-3000 p-6 hover:border-[#9d9d9d] dark:border-arsenic dark:bg-gunmetal hover:dark:border-[#717179]"
+                        className="border-light-gainsboro bg-white-3000 dark:border-arsenic dark:bg-gunmetal flex h-52 w-full cursor-pointer flex-col justify-between rounded-2xl border p-6 hover:border-[#9d9d9d] dark:hover:border-[#717179]"
                         onClick={() => {
                           setSelectedTool(tool);
                           handleAddTool(tool);
@@ -142,11 +142,11 @@ export default function AddToolModal({
                           <div className="mt-[9px]">
                             <p
                               title={tool.displayName}
-                              className="truncate px-1 text-[13px] font-semibold capitalize leading-relaxed text-raisin-black-light dark:text-bright-gray"
+                              className="text-raisin-black-light dark:text-bright-gray truncate px-1 text-[13px] leading-relaxed font-semibold capitalize"
                             >
                               {tool.displayName}
                             </p>
-                            <p className="mt-1 h-24 overflow-auto px-1 text-[12px] leading-relaxed text-old-silver dark:text-sonic-silver-light">
+                            <p className="text-old-silver dark:text-sonic-silver-light mt-1 h-24 overflow-auto px-1 text-[12px] leading-relaxed">
                               {tool.description}
                             </p>
                           </div>

frontend/src/modals/AgentDetailsModal.tsx

@@ -94,24 +94,40 @@ export default function AgentDetailsModal({
               <h2 className="text-base font-semibold text-jet dark:text-bright-gray">
                 Public Link
               </h2>
-              {sharedToken && (
-                <div className="mb-1">
+            </div>
+            {sharedToken ? (
+              <div className="flex flex-col gap-2">
+                <p className="inline break-all font-roboto text-[14px] font-medium leading-normal text-gray-700 dark:text-[#ECECF1]">
+                  <a
+                    href={`${baseURL}/shared/agent/${sharedToken}`}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {`${baseURL}/shared/agent/${sharedToken}`}
+                  </a>
                   <CopyButton
                     textToCopy={`${baseURL}/shared/agent/${sharedToken}`}
                     padding="p-1"
+                    className="absolute -mt-0.5 ml-1 inline-flex"
                   />
-                </div>
-              )}
-            </div>
-            {sharedToken ? (
-              <div className="flex flex-col flex-wrap items-start gap-2">
-                <p className="f break-all font-mono text-sm text-gray-700 dark:text-[#ECECF1]">
-                  {`${baseURL}/shared/agent/${sharedToken}`}
                 </p>
+                <a
+                  href="https://docs.docsgpt.cloud/Agents/basics#core-components-of-an-agent"
+                  className="flex w-fit items-center gap-1 text-purple-30 hover:underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span className="text-sm">Learn more</span>
+                  <img
+                    src="/src/assets/external-link.svg"
+                    alt="External link"
+                    className="h-3 w-3"
+                  />
+                </a>
               </div>
             ) : (
               <button
-                className="hover:bg-vi</button>olets-are-blue flex w-28 items-center justify-center rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
+                className="flex w-28 items-center justify-center rounded-3xl border border-solid border-purple-30 px-5 py-2 text-sm font-medium text-purple-30 transition-colors hover:bg-purple-30 hover:text-white"
                 onClick={handleGeneratePublicLink}
               >
                 {loadingStates.publicLink ? (
@@ -127,11 +143,37 @@ export default function AgentDetailsModal({
               API Key
             </h2>
             {apiKey ? (
-              <span className="font-mono text-sm text-gray-700 dark:text-[#ECECF1]">
-                {apiKey}
-              </span>
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center gap-2">
+                  <div className="break-all font-roboto text-[14px] font-medium leading-normal text-gray-700 dark:text-[#ECECF1]">
+                    {apiKey}
+                    {!apiKey.includes('...') && (
+                      <CopyButton
+                        textToCopy={apiKey}
+                        padding="p-1"
+                        className="absolute -mt-0.5 ml-1 inline-flex"
+                      />
+                    )}
+                  </div>
+                  {!apiKey.includes('...') && (
+                    <a
+                      href={`https://widget.docsgpt.cloud/?api-key=${apiKey}`}
+                      className="group ml-8 flex w-[101px] items-center justify-center gap-1 rounded-[62px] border border-purple-30 py-1.5 text-sm font-medium text-purple-30 transition-colors hover:bg-purple-30 hover:text-white"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Test
+                      <img
+                        src="/src/assets/external-link.svg"
+                        alt="External link"
+                        className="h-3 w-3 group-hover:brightness-0 group-hover:invert"
+                      />
+                    </a>
+                  )}
+                </div>
+              </div>
             ) : (
-              <button className="hover:bg-vi</button>olets-are-blue w-28 rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white">
+              <button className="w-28 rounded-3xl border border-solid border-purple-30 px-5 py-2 text-sm font-medium text-purple-30 transition-colors hover:bg-purple-30 hover:text-white">
                 Generate
               </button>
             )}
@@ -141,21 +183,36 @@ export default function AgentDetailsModal({
               <h2 className="text-base font-semibold text-jet dark:text-bright-gray">
                 Webhook URL
               </h2>
-              {webhookUrl && (
-                <div className="mb-1">
-                  <CopyButton textToCopy={webhookUrl} padding="p-1" />
-                </div>
-              )}
             </div>
             {webhookUrl ? (
-              <div className="flex flex-col flex-wrap items-start gap-2">
-                <p className="f break-all font-mono text-sm text-gray-700 dark:text-[#ECECF1]">
-                  {webhookUrl}
+              <div className="flex flex-col gap-2">
+                <p className="break-all font-roboto text-[14px] font-medium leading-normal text-gray-700 dark:text-[#ECECF1]">
+                  <a href={webhookUrl} target="_blank" rel="noreferrer">
+                    {webhookUrl}
+                  </a>
+                  <CopyButton
+                    textToCopy={webhookUrl}
+                    padding="p-1"
+                    className="absolute -mt-0.5 ml-1 inline-flex"
+                  />
                 </p>
+                <a
+                  href="https://docs.docsgpt.cloud/Agents/basics#core-components-of-an-agent"
+                  className="flex w-fit items-center gap-1 text-purple-30 hover:underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span className="text-sm">Learn more</span>
+                  <img
+                    src="/src/assets/external-link.svg"
+                    alt="External link"
+                    className="h-3 w-3"
+                  />
+                </a>
               </div>
             ) : (
               <button
-                className="hover:bg-vi</button>olets-are-blue flex w-28 items-center justify-center rounded-3xl border border-solid border-violets-are-blue px-5 py-2 text-sm font-medium text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
+                className="flex w-28 items-center justify-center rounded-3xl border border-solid border-purple-30 px-5 py-2 text-sm font-medium text-purple-30 transition-colors hover:bg-purple-30 hover:text-white"
                 onClick={handleGenerateWebhook}
               >
                 {loadingStates.webhook ? (

frontend/src/modals/ChunkModal.tsx

@@ -33,11 +33,24 @@ export default function ChunkModal({
     setChunkText(originalText || '');
   }, [originalTitle, originalText]);
 
+  const resetForm = () => {
+    setTitle('');
+    setChunkText('');
+  };
+
+  const handleDeleteConfirmed = () => {
+    if (handleDelete) {
+      handleDelete();
+    }
+    setDeleteModal('INACTIVE');
+    setModalState('INACTIVE');
+  };
+
   if (modalState !== 'ACTIVE') return null;
 
   const content = (
     <div>
-      <h2 className="px-3 text-xl font-semibold text-jet dark:text-bright-gray">
+      <h2 className="text-jet dark:text-bright-gray px-3 text-xl font-semibold">
         {t(`modals.chunk.${type === 'ADD' ? 'add' : 'edit'}`)}
       </h2>
       <div className="relative mt-6 px-3">
@@ -51,13 +64,13 @@ export default function ChunkModal({
         />
       </div>
       <div className="relative mt-6 px-3">
-        <div className="rounded-lg border border-silver pb-1 pt-3 dark:border-silver/40">
-          <span className="absolute -top-2 left-5 rounded-lg bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
+        <div className="border-silver dark:border-silver/40 rounded-lg border pt-3 pb-1">
+          <span className="text-gray-4000 dark:text-silver absolute -top-2 left-5 rounded-lg bg-white px-2 text-xs dark:bg-[#26272E]">
             {t('modals.chunk.bodyText')}
           </span>
           <textarea
             id="chunk-body-text"
-            className="h-60 max-h-60 w-full resize-none px-3 outline-none dark:bg-transparent dark:text-white"
+            className="h-60 max-h-60 w-full resize-none px-3 outline-hidden dark:bg-transparent dark:text-white"
             value={chunkText}
             onChange={(e) => setChunkText(e.target.value)}
             aria-label={t('modals.chunk.promptText')}
@@ -71,16 +84,18 @@ export default function ChunkModal({
             onClick={() => {
               handleSubmit(title, chunkText);
               setModalState('INACTIVE');
+              resetForm();
             }}
-            className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-violets-are-blue"
+            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={() => {
               setModalState('INACTIVE');
+              resetForm();
             }}
-            className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
+            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>
@@ -88,7 +103,7 @@ export default function ChunkModal({
       ) : (
         <div className="mt-8 flex w-full items-center justify-between px-3">
           <button
-            className="text-nowrap rounded-full border border-solid border-red-500 px-5 py-2 text-sm text-red-500 hover:bg-red-500 hover:text-white"
+            className="rounded-full border border-solid border-red-500 px-5 py-2 text-sm text-nowrap text-red-500 hover:bg-red-500 hover:text-white"
             onClick={() => {
               setDeleteModal('ACTIVE');
             }}
@@ -101,7 +116,7 @@ export default function ChunkModal({
                 handleSubmit(title, chunkText);
                 setModalState('INACTIVE');
               }}
-              className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-violets-are-blue"
+              className="bg-purple-30 hover:bg-violets-are-blue rounded-3xl px-5 py-2 text-sm text-white transition-all"
             >
               {t('modals.chunk.update')}
             </button>
@@ -109,7 +124,7 @@ export default function ChunkModal({
               onClick={() => {
                 setModalState('INACTIVE');
               }}
-              className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
+              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>
@@ -124,6 +139,7 @@ export default function ChunkModal({
       <WrapperModal
         close={() => setModalState('INACTIVE')}
         className="sm:w-[620px]"
+        isPerformingTask={true}
       >
         {content}
       </WrapperModal>
@@ -133,13 +149,7 @@ export default function ChunkModal({
           message={t('modals.chunk.deleteConfirmation')}
           modalState={deleteModal}
           setModalState={setDeleteModal}
-          handleSubmit={
-            handleDelete
-              ? handleDelete
-              : () => {
-                  /* no-op */
-                }
-          }
+          handleSubmit={handleDeleteConfirmed}
           submitLabel={t('modals.chunk.delete')}
         />
       )}

frontend/src/modals/ConfirmationModal.tsx

@@ -29,33 +29,40 @@ export default function ConfirmationModal({
       ? 'rounded-3xl bg-rosso-corsa px-5 py-2 text-sm text-lotion transition-all hover:bg-red-2000 hover:font-bold tracking-[0.019em] hover:tracking-normal'
       : 'rounded-3xl bg-purple-30 px-5 py-2 text-sm text-lotion transition-all hover:bg-violets-are-blue';
 
+  const handleSubmitClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    handleSubmit();
+    setModalState('INACTIVE');
+  };
+
+  const handleCancelClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setModalState('INACTIVE');
+    handleCancel?.();
+  };
+
   return (
     <>
       {modalState === 'ACTIVE' && (
         <WrapperModal close={() => setModalState('INACTIVE')}>
           <div className="relative">
             <div>
-              <p className="font-base mb-1 w-[90%] break-words text-lg text-jet dark:text-bright-gray">
+              <p className="font-base text-jet dark:text-bright-gray mb-1 w-[90%] text-lg break-words">
                 {message}
               </p>
               <div>
                 <div className="mt-6 flex flex-row-reverse gap-1">
                   <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleSubmit();
-                    }}
+                    onClick={handleSubmitClick}
                     className={submitButtonClasses}
                   >
                     {submitLabel}
                   </button>
                   <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setModalState('INACTIVE');
-                      handleCancel && handleCancel();
-                    }}
-                    className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
+                    onClick={handleCancelClick}
+                    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"
                   >
                     {cancelLabel ? cancelLabel : t('cancel')}
                   </button>

frontend/src/modals/WrapperModal.tsx

@@ -3,38 +3,33 @@ import { createPortal } from 'react-dom';
 
 import Exit from '../assets/exit.svg';
 
-interface WrapperModalPropsType {
+type WrapperModalPropsType = {
   children: React.ReactNode;
   close: () => void;
   isPerformingTask?: boolean;
   className?: string;
   contentClassName?: string;
-}
+};
 
 export default function WrapperModal({
   children,
   close,
   isPerformingTask = false,
-  className = '', // Default width, but can be overridden
-  contentClassName = '', // Default padding, but can be overridden
+  className = '',
+  contentClassName = '',
 }: WrapperModalPropsType) {
   const modalRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (isPerformingTask) return;
+
     const handleClickOutside = (event: MouseEvent) => {
-      if (
-        modalRef.current &&
-        !modalRef.current.contains(event.target as Node)
-      ) {
+      if (modalRef.current && !modalRef.current.contains(event.target as Node))
         close();
-      }
     };
 
     const handleEscapePress = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        close();
-      }
+      if (event.key === 'Escape') close();
     };
 
     document.addEventListener('mousedown', handleClickOutside);
@@ -44,17 +39,17 @@ export default function WrapperModal({
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('keydown', handleEscapePress);
     };
-  }, [close]);
+  }, [close, isPerformingTask]);
 
   const modalContent = (
-    <div className="fixed left-0 top-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
+    <div className="bg-gray-alpha bg-opacity-50 fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center">
       <div
         ref={modalRef}
-        className={`relative w-11/12 rounded-2xl bg-white p-8 dark:bg-[#26272E] sm:w-[512px] ${className}`}
+        className={`relative w-11/12 rounded-2xl bg-white p-8 sm:w-[512px] dark:bg-[#26272E] ${className}`}
       >
         {!isPerformingTask && (
           <button
-            className="absolute right-4 top-3 z-50 m-2 w-3"
+            className="absolute top-3 right-4 z-50 m-2 w-3"
             onClick={close}
           >
             <img className="filter dark:invert" src={Exit} alt="Close" />

frontend/src/preferences/PromptsModal.tsx

@@ -25,10 +25,10 @@ function AddPrompt({
 
   return (
     <div>
-      <p className="mb-1 text-xl text-jet dark:text-bright-gray">
+      <p className="text-jet dark:text-bright-gray mb-1 text-xl">
         {t('modals.prompts.addPrompt')}
       </p>
-      <p className="mb-7 text-xs text-[#747474] dark:text-[#7F7F82]">
+      <p className="text-sonic-silver mb-7 text-xs dark:text-[#7F7F82]">
         {t('modals.prompts.addDescription')}
       </p>
       <div>
@@ -41,8 +41,8 @@ function AddPrompt({
           labelBgClassName="bg-white dark:bg-[#26272E]"
           borderVariant="thin"
         />
-        <div className="relative left-3 top-[7px]">
-          <span className="bg-white px-1 text-xs text-silver dark:bg-[#26272E] dark:text-silver">
+        <div className="relative top-[7px] left-3">
+          <span className="text-silver dark:text-silver bg-white px-1 text-xs dark:bg-[#26272E]">
             {t('modals.prompts.promptText')}
           </span>
         </div>
@@ -51,7 +51,7 @@ function AddPrompt({
         </label>
         <textarea
           id="new-prompt-content"
-          className="h-56 w-full resize-none rounded-lg border-2 border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
+          className="border-silver dark:border-silver/40 h-56 w-full resize-none rounded-lg border-2 px-3 py-2 outline-hidden dark:bg-transparent dark:text-white"
           value={newPromptContent}
           onChange={(e) => setNewPromptContent(e.target.value)}
           aria-label="Prompt Text"
@@ -60,7 +60,7 @@ function AddPrompt({
       <div className="mt-6 flex flex-row-reverse">
         <button
           onClick={handleAddPrompt}
-          className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-violets-are-blue disabled:hover:bg-purple-30"
+          className="bg-purple-30 hover:bg-violets-are-blue disabled:hover:bg-purple-30 rounded-3xl px-5 py-2 text-sm text-white transition-all"
           disabled={disableSave}
           title={
             disableSave && newPromptName ? t('modals.prompts.nameExists') : ''
@@ -97,10 +97,10 @@ function EditPrompt({
   return (
     <div>
       <div className="">
-        <p className="mb-1 text-xl text-jet dark:text-bright-gray">
+        <p className="text-jet dark:text-bright-gray mb-1 text-xl">
           {t('modals.prompts.editPrompt')}
         </p>
-        <p className="mb-7 text-xs text-[#747474] dark:text-[#7F7F82]">
+        <p className="text-sonic-silver mb-7 text-xs dark:text-[#7F7F82]">
           {t('modals.prompts.editDescription')}
         </p>
         <div>
@@ -113,8 +113,8 @@ function EditPrompt({
             labelBgClassName="bg-white dark:bg-charleston-green-2"
             borderVariant="thin"
           />
-          <div className="relative left-3 top-[7px]">
-            <span className="bg-white px-1 text-xs text-silver dark:bg-charleston-green-2 dark:text-silver">
+          <div className="relative top-[7px] left-3">
+            <span className="text-silver dark:bg-charleston-green-2 dark:text-silver bg-white px-1 text-xs">
               {t('modals.prompts.promptText')}
             </span>
           </div>
@@ -123,7 +123,7 @@ function EditPrompt({
           </label>
           <textarea
             id="edit-prompt-content"
-            className="h-56 w-full resize-none rounded-lg border-2 border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
+            className="border-silver dark:border-silver/40 h-56 w-full resize-none rounded-lg border-2 px-3 py-2 outline-hidden dark:bg-transparent dark:text-white"
             value={editPromptContent}
             onChange={(e) => setEditPromptContent(e.target.value)}
             aria-label="Prompt Text"
@@ -131,7 +131,7 @@ function EditPrompt({
         </div>
         <div className="mt-6 flex flex-row-reverse gap-4">
           <button
-            className={`rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-violets-are-blue disabled:hover:bg-purple-30 ${
+            className={`bg-purple-30 hover:bg-violets-are-blue disabled:hover:bg-purple-30 rounded-3xl px-5 py-2 text-sm text-white transition-all ${
               currentPromptEdit.type === 'public'
                 ? 'cursor-not-allowed opacity-50'
                 : ''

frontend/src/settings/APIKeys.tsx

@@ -102,9 +102,9 @@ export default function APIKeys() {
 
   return (
     <div className="mt-8 flex w-full max-w-full flex-col overflow-hidden">
-      <div className="relative flex flex-grow flex-col">
+      <div className="relative flex grow flex-col">
         <div className="mb-6">
-          <h2 className="text-base font-medium text-sonic-silver">
+          <h2 className="text-sonic-silver text-base font-medium">
             {t('settings.apiKeys.description')}
           </h2>
         </div>
@@ -112,7 +112,7 @@ export default function APIKeys() {
         <div className="mb-6 flex flex-col items-start justify-end gap-3 sm:flex-row sm:items-center">
           <button
             onClick={() => setCreateModal(true)}
-            className="flex h-[30px] w-[108px] items-center justify-center rounded-full bg-purple-30 text-sm text-white hover:bg-violets-are-blue"
+            className="bg-purple-30 hover:bg-violets-are-blue flex h-[30px] w-[108px] items-center justify-center rounded-full text-sm text-white"
             title={t('settings.apiKeys.createNew')}
           >
             {t('settings.apiKeys.createNew')}
@@ -120,18 +120,18 @@ export default function APIKeys() {
         </div>
 
         <div className="relative w-full">
-          <div className="overflow-hidden rounded-md border border-gray-300 dark:border-silver/40">
+          <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="border-b border-gray-300 dark:border-silver/40">
-                    <th className="w-[35%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
+                  <tr className="dark:border-silver/40 border-b border-gray-300">
+                    <th className="text-sonic-silver w-[35%] px-4 py-3 text-left text-xs font-medium">
                       {t('settings.apiKeys.name')}
                     </th>
-                    <th className="w-[35%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
+                    <th className="text-sonic-silver w-[35%] px-4 py-3 text-left text-xs font-medium">
                       {t('settings.apiKeys.sourceDoc')}
                     </th>
-                    <th className="w-[25%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
+                    <th className="text-sonic-silver w-[25%] px-4 py-3 text-left text-xs font-medium">
                       <span className="hidden sm:inline">
                         {t('settings.apiKeys.key')}
                       </span>
@@ -144,7 +144,7 @@ export default function APIKeys() {
                     </th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-gray-300 dark:divide-silver/40">
+                <tbody className="dark:divide-silver/40 divide-y divide-gray-300">
                   {loading ? (
                     <SkeletonLoader component="table" />
                   ) : !apiKeys?.length ? (
@@ -163,12 +163,12 @@ export default function APIKeys() {
                         key={element.id}
                         className="group transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50"
                       >
-                        <td className="w-[35%] min-w-48 max-w-0 px-4 py-4 text-sm font-semibold text-gray-700 dark:text-[#E0E0E0]">
+                        <td className="w-[35%] max-w-0 min-w-48 px-4 py-4 text-sm font-semibold text-gray-700 dark:text-[#E0E0E0]">
                           <div className="truncate" title={element.name}>
                             {element.name}
                           </div>
                         </td>
-                        <td className="w-[35%] min-w-48 max-w-0 px-4 py-4 text-sm text-gray-700 dark:text-[#E0E0E0]">
+                        <td className="w-[35%] max-w-0 min-w-48 px-4 py-4 text-sm text-gray-700 dark:text-[#E0E0E0]">
                           <div className="truncate" title={element.source}>
                             {element.source}
                           </div>
@@ -187,7 +187,7 @@ export default function APIKeys() {
                                   name: element.name,
                                 })
                               }
-                              className="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
+                              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"
                             >
                               <img
                                 src={Trash}

frontend/src/settings/Documents.tsx

@@ -9,8 +9,10 @@ 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 SyncIcon from '../assets/sync.svg';
 import Trash from '../assets/red-trash.svg';
+import SyncIcon from '../assets/sync.svg';
+import ThreeDots from '../assets/three-dots.svg';
+import ContextMenu, { MenuOption } from '../components/ContextMenu';
 import Pagination from '../components/DocumentPagination';
 import DropdownMenu from '../components/DropdownMenu';
 import Input from '../components/Input';
@@ -29,8 +31,6 @@ import {
 import Upload from '../upload/Upload';
 import { formatDate } from '../utils/dateTimeUtils';
 import { ChunkType } from './types';
-import ContextMenu, { MenuOption } from '../components/ContextMenu';
-import ThreeDots from '../assets/three-dots.svg';
 
 const formatTokens = (tokens: number): string => {
   const roundToTwoDecimals = (num: number): string => {
@@ -68,9 +68,9 @@ export default function Documents({
   const [totalPages, setTotalPages] = useState<number>(1);
 
   const [activeMenuId, setActiveMenuId] = useState<string | null>(null);
-  const menuRefs = useRef<{ [key: string]: React.RefObject<HTMLDivElement> }>(
-    {},
-  );
+  const menuRefs = useRef<{
+    [key: string]: React.RefObject<HTMLDivElement | null>;
+  }>({});
 
   // Create or get a ref for each document wrapper div (not the td)
   const getMenuRef = (docId: string) => {
@@ -286,9 +286,9 @@ export default function Documents({
     />
   ) : (
     <div className="mt-8 flex w-full max-w-full flex-col overflow-hidden">
-      <div className="relative flex flex-grow flex-col">
+      <div className="relative flex grow flex-col">
         <div className="mb-6">
-          <h2 className="text-base font-medium text-sonic-silver">
+          <h2 className="text-sonic-silver text-base font-medium">
             {t('settings.documents.title')}
           </h2>
         </div>
@@ -312,7 +312,7 @@ export default function Documents({
             />
           </div>
           <button
-            className="flex h-[32px] min-w-[108px] items-center justify-center whitespace-normal rounded-full bg-purple-30 px-4 text-sm text-white hover:bg-violets-are-blue"
+            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={() => {
               setIsOnboarding(false);
@@ -323,15 +323,15 @@ export default function Documents({
           </button>
         </div>
         <div className="relative w-full">
-          <div className="overflow-hidden rounded-md border border-gray-300 dark:border-silver/40">
+          <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="border-b border-gray-300 dark:border-silver/40">
-                    <th className="w-[45%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
+                  <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="w-[30%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
+                    <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
@@ -342,7 +342,7 @@ export default function Documents({
                         />
                       </div>
                     </th>
-                    <th className="w-[15%] px-4 py-3 text-left text-xs font-medium text-sonic-silver">
+                    <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')}
@@ -363,7 +363,7 @@ export default function Documents({
                     </th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-gray-300 dark:divide-silver/40">
+                <tbody className="dark:divide-silver/40 divide-y divide-gray-300">
                   {loading ? (
                     <SkeletonLoader component="table" />
                   ) : !currentDocuments?.length ? (
@@ -382,15 +382,15 @@ export default function Documents({
                       return (
                         <tr key={docId} className="group transition-colors">
                           <td
-                            className="min-w-48 max-w-0 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"
+                            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"
                             title={document.name}
                           >
                             {document.name}
                           </td>
-                          <td className="whitespace-nowrap px-4 py-4 text-sm text-gray-700 group-hover:bg-gray-50 dark:text-[#E0E0E0] dark:group-hover:bg-gray-800/50">
+                          <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="whitespace-nowrap px-4 py-4 text-sm text-gray-700 group-hover:bg-gray-50 dark:text-[#E0E0E0] dark:group-hover:bg-gray-800/50">
+                          <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.tokens
                               ? formatTokens(+document.tokens)
                               : ''}
@@ -432,7 +432,7 @@ export default function Documents({
                               )}
                               <button
                                 onClick={(e) => handleMenuClick(e, docId)}
-                                className="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
+                                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}`}
                               >
@@ -634,7 +634,7 @@ function DocumentChunks({
   }, [page, perPage]);
   return (
     <div className="mt-8 flex flex-col">
-      <div className="mb-3 flex items-center gap-3 text-sm text-eerie-black dark:text-bright-gray">
+      <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}
@@ -644,7 +644,7 @@ function DocumentChunks({
         <p className="mt-px">{t('settings.documents.backToAll')}</p>
       </div>
       <div className="my-3 flex items-center justify-between gap-1">
-        <div className="flex w-full items-center gap-2 text-eerie-black dark:text-bright-gray sm:w-auto">
+        <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')}
@@ -663,7 +663,7 @@ function DocumentChunks({
           />
         </div>
         <button
-          className="flex h-[32px] min-w-[108px] items-center justify-center whitespace-normal rounded-full bg-purple-30 px-4 text-sm text-white hover:bg-violets-are-blue"
+          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')}
         >
@@ -684,7 +684,7 @@ function DocumentChunks({
               .toLowerCase()
               .includes(searchTerm.toLowerCase());
           }).length === 0 ? (
-            <div className="col-span-2 mt-24 text-center text-gray-500 dark:text-gray-400 lg:col-span-3">
+            <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')}
@@ -703,7 +703,7 @@ function DocumentChunks({
               .map((chunk, index) => (
                 <div
                   key={index}
-                  className="relative flex h-56 w-full flex-col justify-between rounded-2xl border border-silver p-6 dark:border-silver/40"
+                  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">
@@ -715,7 +715,7 @@ function DocumentChunks({
                             chunk: chunk,
                           });
                         }}
-                        className="absolute right-3 top-3 h-4 w-4 cursor-pointer"
+                        className="absolute top-3 right-3 h-4 w-4 cursor-pointer"
                       >
                         <img
                           alt={'edit'}
@@ -725,10 +725,10 @@ function DocumentChunks({
                       </button>
                     </div>
                     <div className="mt-[9px]">
-                      <p className="ellipsis-text h-12 break-words text-sm font-semibold leading-relaxed text-eerie-black dark:text-[#EEEEEE]">
+                      <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 break-words pr-1 text-[13px] leading-relaxed text-gray-600 dark:text-gray-400">
+                      <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>
@@ -766,19 +766,23 @@ function DocumentChunks({
         setModalState={setAddModal}
         handleSubmit={handleAddChunk}
       />
-      <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);
-        }}
-      />
+      {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>
   );
 }

frontend/src/settings/Logs.tsx

@@ -113,13 +113,13 @@ function LogsTable({ logs, setPage, loading, tableHeader }: LogsTableProps) {
   }, []);
 
   return (
-    <div className="logs-table h-[55vh] w-full overflow-hidden rounded-xl border border-light-silver bg-white dark:border-transparent dark:bg-black">
-      <div className="flex h-8 flex-col items-start justify-center bg-black/10 dark:bg-[#191919]">
-        <p className="px-3 text-xs dark:text-gray-6000">
+    <div className="logs-table border-light-silver h-[55vh] w-full overflow-hidden rounded-xl border bg-white dark:border-transparent dark:bg-black">
+      <div className="dark:bg-eerie-black-2 flex h-8 flex-col items-start justify-center bg-black/10">
+        <p className="dark:text-gray-6000 px-3 text-xs">
           {tableHeader ? tableHeader : t('settings.logs.tableHeader')}
         </p>
       </div>
-      <div className="relative flex h-[51vh] flex-grow flex-col items-start gap-2 overflow-y-auto overscroll-contain bg-transparent p-4">
+      <div className="relative flex h-[51vh] grow flex-col items-start gap-2 overflow-y-auto overscroll-contain bg-transparent p-4">
         {logs?.map((log, index) => {
           if (index === logs.length - 1) {
             return (
@@ -164,7 +164,7 @@ function Log({
   const { id, action, timestamp, ...filteredLog } = log;
 
   return (
-    <div className="group w-full rounded-xl bg-transparent hover:bg-[#F9F9F9] hover:dark:bg-dark-charcoal">
+    <div className="group dark:hover:bg-dark-charcoal w-full rounded-xl bg-transparent hover:bg-[#F9F9F9]">
       <div
         onClick={() => onToggle(log.id)}
         className={`flex cursor-pointer flex-row items-start gap-2 p-2 px-4 py-3 text-gray-900 ${
@@ -177,7 +177,7 @@ function Log({
           className={`mt-[3px] h-3 w-3 transition duration-300 ${isOpen ? 'rotate-90' : ''}`}
         />
         <span className="flex flex-row gap-2">
-          <h2 className="text-xs text-black/60 dark:text-bright-gray">{`${log.timestamp}`}</h2>
+          <h2 className="dark:text-bright-gray text-xs text-black/60">{`${log.timestamp}`}</h2>
           <h2 className="text-xs text-[#913400] dark:text-[#DF5200]">{`[${log.action}]`}</h2>
           <h2
             className={`max-w-72 text-xs ${logLevelColor[log.level]} break-words`}
@@ -191,7 +191,7 @@ function Log({
       {isOpen && (
         <div className="rounded-b-xl bg-[#F1F1F1] px-4 py-3 dark:bg-[#1B1B1B]">
           <div className="scrollbar-thin overflow-y-auto">
-            <pre className="whitespace-pre-wrap break-words px-2 font-mono text-xs leading-relaxed text-gray-700 dark:text-gray-400">
+            <pre className="px-2 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap text-gray-700 dark:text-gray-400">
               {JSON.stringify(filteredLog, null, 2)}
             </pre>
           </div>

frontend/src/settings/Prompts.tsx

@@ -177,7 +177,7 @@ export default function Prompts({
               rounded="3xl"
               border="border"
               showEdit
-              showDelete
+              showDelete={(prompt) => prompt.type !== 'public'}
               onEdit={({
                 id,
                 name,

frontend/src/settings/ToolConfig.tsx

@@ -162,7 +162,7 @@ export default function ToolConfig({
   return (
     <div className="scrollbar-thin mt-8 flex flex-col gap-4">
       <div className="mb-4 flex items-center justify-between">
-        <div className="flex items-center gap-3 text-sm text-eerie-black dark:text-bright-gray">
+        <div className="text-eerie-black dark:text-bright-gray 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={handleBackClick}
@@ -172,7 +172,7 @@ export default function ToolConfig({
           <p className="mt-px">{t('settings.tools.backToAllTools')}</p>
         </div>
         <button
-          className="text-nowrap rounded-full bg-purple-30 px-3 py-2 text-xs text-white hover:bg-violets-are-blue sm:px-4 sm:py-2"
+          className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-3 py-2 text-xs text-nowrap text-white sm:px-4 sm:py-2"
           onClick={handleSaveChanges}
         >
           {t('settings.tools.save')}
@@ -180,7 +180,7 @@ export default function ToolConfig({
       </div>
       {/* Custom name section */}
       <div className="mt-1">
-        <p className="text-sm font-semibold text-eerie-black dark:text-bright-gray">
+        <p className="text-eerie-black dark:text-bright-gray text-sm font-semibold">
           {t('settings.tools.customName')}
         </p>
         <div className="relative mt-4 w-full max-w-96">
@@ -195,7 +195,7 @@ export default function ToolConfig({
       </div>
       <div className="mt-1">
         {Object.keys(tool?.config).length !== 0 && tool.name !== 'api_tool' && (
-          <p className="text-sm font-semibold text-eerie-black dark:text-bright-gray">
+          <p className="text-eerie-black dark:text-bright-gray text-sm font-semibold">
             {t('settings.tools.authentication')}
           </p>
         )}
@@ -217,7 +217,7 @@ export default function ToolConfig({
       <div className="flex flex-col gap-4">
         <div className="mx-0 my-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40"></div>
         <div className="flex w-full flex-row items-center justify-between gap-2">
-          <p className="text-base font-semibold text-eerie-black dark:text-bright-gray">
+          <p className="text-eerie-black dark:text-bright-gray text-base font-semibold">
             {t('settings.tools.actions')}
           </p>
           {tool.name === 'api_tool' &&
@@ -225,7 +225,7 @@ export default function ToolConfig({
               Object.keys(tool.config.actions).length === 0) && (
               <button
                 onClick={() => setActionModalState('ACTIVE')}
-                className="rounded-full border border-solid border-violets-are-blue px-5 py-1 text-sm text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
+                className="border-violets-are-blue text-violets-are-blue hover:bg-violets-are-blue rounded-full border border-solid px-5 py-1 text-sm transition-colors hover:text-white"
               >
                 {t('settings.tools.addAction')}
               </button>
@@ -255,10 +255,10 @@ export default function ToolConfig({
               tool.actions.map((action, actionIndex) => (
                 <div
                   key={actionIndex}
-                  className="w-full rounded-xl border border-silver dark:border-silver/40"
+                  className="border-silver dark:border-silver/40 w-full rounded-xl border"
                 >
-                  <div className="flex h-10 flex-wrap items-center justify-between rounded-t-xl border-b border-silver bg-[#F9F9F9] px-5 dark:border-silver/40 dark:bg-[#28292D]">
-                    <p className="font-semibold text-eerie-black dark:text-bright-gray">
+                  <div className="border-silver dark:border-silver/40 flex h-10 flex-wrap items-center justify-between rounded-t-xl border-b bg-[#F9F9F9] px-5 dark:bg-[#28292D]">
+                    <p className="text-eerie-black dark:text-bright-gray font-semibold">
                       {action.name}
                     </p>
                     <ToggleSwitch
@@ -319,7 +319,7 @@ export default function ToolConfig({
                             return (
                               <tr
                                 key={index}
-                                className="text-nowrap font-normal"
+                                className="font-normal text-nowrap"
                               >
                                 <td>{param[0]}</td>
                                 <td>{param[1].type}</td>
@@ -334,7 +334,7 @@ export default function ToolConfig({
                                         checked={param[1].filled_by_llm}
                                         id={uniqueKey}
                                         type="checkbox"
-                                        className="size-4 rounded border-gray-300 bg-transparent"
+                                        className="size-4 rounded-sm border-gray-300 bg-transparent"
                                         onChange={() =>
                                           handleCheckboxChange(
                                             actionIndex,
@@ -349,7 +349,7 @@ export default function ToolConfig({
                                   <input
                                     key={uniqueKey}
                                     value={param[1].description}
-                                    className="rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40"
+                                    className="border-silver dark:border-silver/40 rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
                                     onChange={(e) => {
                                       setTool({
                                         ...tool,
@@ -385,7 +385,7 @@ export default function ToolConfig({
                                     value={param[1].value}
                                     key={uniqueKey}
                                     disabled={param[1].filled_by_llm}
-                                    className={`rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40 ${param[1].filled_by_llm ? 'opacity-50' : ''}`}
+                                    className={`border-silver dark:border-silver/40 rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden ${param[1].filled_by_llm ? 'opacity-50' : ''}`}
                                     onChange={(e) => {
                                       setTool({
                                         ...tool,
@@ -563,10 +563,10 @@ function APIToolConfig({
           ([actionName, action], actionIndex) => (
             <div
               key={actionIndex}
-              className="w-full rounded-xl border border-silver dark:border-silver/40"
+              className="border-silver dark:border-silver/40 w-full rounded-xl border"
             >
-              <div className="flex h-10 flex-wrap items-center justify-between rounded-t-xl border-b border-silver bg-[#F9F9F9] px-5 dark:border-silver/40 dark:bg-[#28292D]">
-                <p className="font-semibold text-eerie-black dark:text-bright-gray">
+              <div className="border-silver dark:border-silver/40 flex h-10 flex-wrap items-center justify-between rounded-t-xl border-b bg-[#F9F9F9] px-5 dark:bg-[#28292D]">
+                <p className="text-eerie-black dark:text-bright-gray font-semibold">
                   {action.name}
                 </p>
                 <div className="flex items-center gap-2">
@@ -618,7 +618,7 @@ function APIToolConfig({
               </div>
               <div className="mt-4 px-5 py-2">
                 <div className="relative w-full">
-                  <span className="absolute -top-2 left-5 z-10 bg-white px-2 text-xs text-gray-4000 dark:bg-raisin-black dark:text-silver">
+                  <span className="text-gray-4000 dark:bg-raisin-black dark:text-silver absolute -top-2 left-5 z-10 bg-white px-2 text-xs">
                     {t('settings.tools.method')}
                   </span>
                   <Dropdown
@@ -867,14 +867,14 @@ function APIActionTable({
       <>
         {Object.entries(action[section].properties).map(
           ([key, param], index) => (
-            <tr key={index} className="text-nowrap font-normal">
+            <tr key={index} className="font-normal text-nowrap">
               <td className="relative">
                 {editingPropertyKey.section === section &&
                 editingPropertyKey.oldKey === key ? (
                   <div className="flex flex-row items-center justify-between gap-2">
                     <input
                       value={newPropertyKey}
-                      className="flex w-full min-w-[130.5px] items-start rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40"
+                      className="border-silver dark:border-silver/40 flex w-full min-w-[130.5px] items-start rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
                       onChange={(e) => setNewPropertyKey(e.target.value)}
                       onKeyDown={(e) => {
                         if (e.key === 'Enter') {
@@ -904,7 +904,7 @@ function APIActionTable({
                 ) : (
                   <input
                     value={key}
-                    className="flex w-full min-w-[175.5px] items-start rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40"
+                    className="border-silver dark:border-silver/40 flex w-full min-w-[175.5px] items-start rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
                     onFocus={() => handleRenamePropertyStart(section, key)}
                     readOnly
                   />
@@ -917,7 +917,7 @@ function APIActionTable({
                     <input
                       checked={param.filled_by_llm}
                       type="checkbox"
-                      className="size-4 rounded border-gray-300 bg-transparent"
+                      className="size-4 rounded-sm border-gray-300 bg-transparent"
                       onChange={(e) =>
                         handlePropertyChange(
                           section,
@@ -933,7 +933,7 @@ function APIActionTable({
               <td className="w-10">
                 <input
                   value={param.description}
-                  className="rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40"
+                  className="border-silver dark:border-silver/40 rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
                   onChange={(e) =>
                     handlePropertyChange(
                       section,
@@ -951,7 +951,7 @@ function APIActionTable({
                   onChange={(e) =>
                     handlePropertyChange(section, key, 'value', e.target.value)
                   }
-                  className={`rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40 ${param.filled_by_llm ? 'opacity-50' : ''}`}
+                  className={`border-silver dark:border-silver/40 rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden ${param.filled_by_llm ? 'opacity-50' : ''}`}
                 ></input>
               </td>
               <td
@@ -961,7 +961,7 @@ function APIActionTable({
                   maxWidth: '50px',
                   padding: '0',
                 }}
-                className="border-b border-silver dark:border-silver/40"
+                className="border-silver dark:border-silver/40 border-b"
               >
                 <button
                   onClick={() => handlePorpertyDelete(section, key)}
@@ -985,13 +985,13 @@ function APIActionTable({
                   }
                 }}
                 placeholder={t('settings.tools.propertyName')}
-                className="flex w-full min-w-[130.5px] items-start rounded-lg border border-silver bg-transparent px-2 py-1 text-sm outline-none dark:border-silver/40"
+                className="border-silver dark:border-silver/40 flex w-full min-w-[130.5px] items-start rounded-lg border bg-transparent px-2 py-1 text-sm outline-hidden"
               />
             </td>
             <td colSpan={4} className="text-right">
               <button
                 onClick={handleAddProperty}
-                className="mr-1 rounded-full bg-purple-30 px-5 py-[4px] text-sm text-white hover:bg-violets-are-blue"
+                className="bg-purple-30 hover:bg-violets-are-blue mr-1 rounded-full px-5 py-[4px] text-sm text-white"
               >
                 {t('settings.tools.add')}
               </button>
@@ -1016,7 +1016,7 @@ function APIActionTable({
             <td colSpan={5}>
               <button
                 onClick={() => handleAddPropertyStart(section)}
-                className="flex items-start text-nowrap rounded-full border border-solid border-violets-are-blue px-5 py-[4px] text-sm text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
+                className="border-violets-are-blue text-violets-are-blue hover:bg-violets-are-blue flex items-start rounded-full border border-solid px-5 py-[4px] text-sm text-nowrap transition-colors hover:text-white"
               >
                 {t('settings.tools.addNew')}
               </button>
@@ -1037,25 +1037,25 @@ function APIActionTable({
   return (
     <div className="scrollbar-thin flex flex-col gap-6">
       <div>
-        <h3 className="mb-1 text-base font-normal text-eerie-black dark:text-bright-gray">
+        <h3 className="text-eerie-black dark:text-bright-gray mb-1 text-base font-normal">
           {t('settings.tools.headers')}
         </h3>
         <table className="table-default">
           <thead>
             <tr>
-              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+              <th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.name')}
               </th>
-              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+              <th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.type')}
               </th>
-              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+              <th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.filledByLLM')}
               </th>
-              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+              <th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.description')}
               </th>
-              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+              <th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.value')}
               </th>
               <th
@@ -1072,25 +1072,25 @@ function APIActionTable({
         </table>
       </div>
       <div>
-        <h3 className="mb-1 text-base font-normal text-eerie-black dark:text-bright-gray">
+        <h3 className="text-eerie-black dark:text-bright-gray mb-1 text-base font-normal">
           {t('settings.tools.queryParameters')}
         </h3>
         <table className="table-default">
           <thead>
             <tr>
-              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+              <th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.name')}
               </th>
-              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+              <th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.type')}
               </th>
-              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+              <th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.filledByLLM')}
               </th>
-              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+              <th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.description')}
               </th>
-              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+              <th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.value')}
               </th>
               <th
@@ -1107,25 +1107,25 @@ function APIActionTable({
         </table>
       </div>
       <div className="mb-6">
-        <h3 className="mb-1 text-base font-normal text-eerie-black dark:text-bright-gray">
+        <h3 className="text-eerie-black dark:text-bright-gray mb-1 text-base font-normal">
           {t('settings.tools.body')}
         </h3>
         <table className="table-default">
           <thead>
             <tr>
-              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+              <th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.name')}
               </th>
-              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+              <th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.type')}
               </th>
-              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+              <th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.filledByLLM')}
               </th>
-              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+              <th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.description')}
               </th>
-              <th className="px-2 py-1 text-left text-sm font-normal text-eerie-black dark:text-bright-gray">
+              <th className="text-eerie-black dark:text-bright-gray px-2 py-1 text-left text-sm font-normal">
                 {t('settings.tools.value')}
               </th>
               <th

frontend/src/settings/Tools.tsx

@@ -35,7 +35,7 @@ export default function Tools() {
   const [loading, setLoading] = React.useState(false);
   const [activeMenuId, setActiveMenuId] = React.useState<string | null>(null);
   const menuRefs = React.useRef<{
-    [key: string]: React.RefObject<HTMLDivElement>;
+    [key: string]: React.RefObject<HTMLDivElement | null>;
   }>({});
   const [deleteModalState, setDeleteModalState] =
     React.useState<ActiveState>('INACTIVE');
@@ -46,7 +46,7 @@ export default function Tools() {
   React.useEffect(() => {
     userTools.forEach((tool) => {
       if (!menuRefs.current[tool.id]) {
-        menuRefs.current[tool.id] = React.createRef();
+        menuRefs.current[tool.id] = React.createRef<HTMLDivElement>();
       }
     });
   }, [userTools]);

frontend/src/store.ts

@@ -8,6 +8,7 @@ import {
   prefSlice,
 } from './preferences/preferenceSlice';
 import uploadReducer from './upload/uploadSlice';
+import agentPreviewReducer from './agents/agentPreviewSlice';
 
 const key = localStorage.getItem('DocsGPTApiKey');
 const prompt = localStorage.getItem('DocsGPTPrompt');
@@ -54,6 +55,7 @@ const store = configureStore({
     conversation: conversationSlice.reducer,
     sharedConversation: sharedConversationSlice.reducer,
     upload: uploadReducer,
+    agentPreview: agentPreviewReducer,
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware().concat(prefListenerMiddleware.middleware),

frontend/src/upload/Upload.tsx

@@ -70,7 +70,7 @@ function Upload({
             }`}
           >
             <div className="flex flex-col gap-4 overflow-hidden">
-              <hr className="my-4 border-[1px] border-[#C4C4C4]/40" />
+              <hr className="my-4 border border-[#C4C4C4]/40" />
               <div className="flex flex-col gap-4">
                 {advancedFields.map((field: FormField) => renderField(field))}
               </div>
@@ -150,7 +150,10 @@ function Upload({
             rounded="3xl"
             placeholder={field.label}
             border="border"
-            borderColor="gray-5000"
+            buttonClassName="border-silver bg-white dark:border-dim-gray dark:bg-[#222327]"
+            optionsClassName="border-silver bg-white dark:border-dim-gray dark:bg-[#383838]"
+            placeholderClassName="text-gray-400 dark:text-silver"
+            contentSize="text-sm"
           />
         );
       case 'boolean':
@@ -194,7 +197,7 @@ function Upload({
   }>();
 
   const { t } = useTranslation();
-  const setTimeoutRef = useRef<number | null>();
+  const setTimeoutRef = useRef<number | null>(null);
 
   const urlOptions: { label: string; value: IngestorType }[] = [
     { label: 'Crawler', value: 'crawler' },
@@ -216,7 +219,7 @@ function Upload({
         <div className="relative h-32 w-32 rounded-full">
           <div className="absolute inset-0 rounded-full shadow-[0_0_10px_2px_rgba(0,0,0,0.3)_inset] dark:shadow-[0_0_10px_2px_rgba(0,0,0,0.3)_inset]"></div>
           <div
-            className={`absolute inset-0 rounded-full ${progressPercent === 100 ? 'bg-gradient-to-r from-white to-gray-400 shadow-xl shadow-lime-300/50 dark:bg-gradient-to-br dark:from-gray-500 dark:to-gray-300 dark:shadow-lime-300/50' : 'shadow-[0_4px_0_#7D54D1] dark:shadow-[0_4px_0_#7D54D1]'}`}
+            className={`absolute inset-0 rounded-full ${progressPercent === 100 ? 'bg-linear-to-r from-white to-gray-400 shadow-xl shadow-lime-300/50 dark:bg-linear-to-br dark:from-gray-500 dark:to-gray-300 dark:shadow-lime-300/50' : 'shadow-[0_4px_0_#7D54D1] dark:shadow-[0_4px_0_#7D54D1]'}`}
             style={{
               animation: `${progressPercent === 100 ? 'none' : 'rotate 2s linear infinite'}`,
             }}
@@ -247,7 +250,7 @@ function Upload({
     isTraining?: boolean;
   }) {
     return (
-      <div className="mt-5 flex flex-col items-center gap-2 text-gray-2000 dark:text-bright-gray">
+      <div className="text-gray-2000 dark:text-bright-gray mt-5 flex flex-col items-center gap-2">
         <p className="text-gra text-xl tracking-[0.15px]">
           {isTraining &&
             (progress?.percentage === 100
@@ -571,18 +574,18 @@ function Upload({
   } else {
     view = (
       <div className="flex w-full flex-col gap-4">
-        <p className="text-center text-2xl font-semibold text-jet dark:text-bright-gray">
+        <p className="text-jet dark:text-bright-gray text-center text-2xl font-semibold">
           {t('modals.uploadDoc.label')}
         </p>
         {!activeTab && (
           <div>
-            <p className="dark text-center text-sm font-medium text-gray-6000 dark:text-bright-gray">
+            <p className="dark text-gray-6000 dark:text-bright-gray text-center text-sm font-medium">
               {t('modals.uploadDoc.select')}
             </p>
             <div className="flex h-full w-full flex-col items-center justify-center gap-4 p-4 md:flex-row md:gap-4">
               <button
                 onClick={() => setActiveTab('file')}
-                className="flex h-40 w-40 flex-col items-center justify-center gap-4 rounded-3xl border border-[#D7D7D7] bg-transparent p-8 text-sm font-medium text-[#777777] opacity-85 hover:border-purple-30 hover:opacity-100 hover:shadow-lg hover:shadow-purple-30/30 dark:bg-transparent dark:text-[#c3c3c3] md:h-52 md:w-52"
+                className="hover:border-purple-30 hover:shadow-purple-30/30 flex h-40 w-40 flex-col items-center justify-center gap-4 rounded-3xl border border-[#D7D7D7] bg-transparent p-8 text-sm font-medium text-[#777777] opacity-85 hover:opacity-100 hover:shadow-lg md:h-52 md:w-52 dark:bg-transparent dark:text-[#c3c3c3]"
               >
                 <img
                   src={FileUpload}
@@ -592,7 +595,7 @@ function Upload({
               </button>
               <button
                 onClick={() => setActiveTab('remote')}
-                className="flex h-40 w-40 flex-col items-center justify-center gap-4 rounded-3xl border border-[#D7D7D7] bg-transparent p-8 text-sm font-medium text-[#777777] opacity-85 hover:border-purple-30 hover:opacity-100 hover:shadow-lg hover:shadow-purple-30/30 dark:bg-transparent dark:text-[#c3c3c3] md:h-52 md:w-52"
+                className="hover:border-purple-30 hover:shadow-purple-30/30 flex h-40 w-40 flex-col items-center justify-center gap-4 rounded-3xl border border-[#D7D7D7] bg-transparent p-8 text-sm font-medium text-[#777777] opacity-85 hover:opacity-100 hover:shadow-lg md:h-52 md:w-52 dark:bg-transparent dark:text-[#c3c3c3]"
               >
                 <img
                   src={WebsiteCollect}
@@ -617,30 +620,30 @@ function Upload({
               required={true}
             />
             <div className="my-2" {...getRootProps()}>
-              <span className="rounded-3xl border border-[#7F7F82] bg-transparent px-4 py-2 font-medium text-purple-30 hover:cursor-pointer dark:text-silver">
+              <span className="text-purple-30 dark:text-silver rounded-3xl border border-[#7F7F82] bg-transparent px-4 py-2 font-medium hover:cursor-pointer">
                 <input type="button" {...getInputProps()} />
                 {t('modals.uploadDoc.choose')}
               </span>
             </div>
-            <p className="mb-0 text-xs italic text-gray-4000">
+            <p className="text-gray-4000 mb-0 text-xs italic">
               {t('modals.uploadDoc.info')}
             </p>
             <div className="mt-0 max-w-full">
-              <p className="mb-[14px] text-[14px] font-medium text-eerie-black dark:text-light-gray">
+              <p className="text-eerie-black dark:text-light-gray mb-[14px] text-[14px] font-medium">
                 {t('modals.uploadDoc.uploadedFiles')}
               </p>
               <div className="max-w-full overflow-hidden">
                 {files.map((file) => (
                   <p
                     key={file.name}
-                    className="overflow-hidden truncate text-ellipsis text-gray-6000"
+                    className="text-gray-6000 truncate overflow-hidden text-ellipsis"
                     title={file.name}
                   >
                     {file.name}
                   </p>
                 ))}
                 {files.length === 0 && (
-                  <p className="text-[14px] text-gray-6000 dark:text-light-gray">
+                  <p className="text-gray-6000 dark:text-light-gray text-[14px]">
                     {t('none')}
                   </p>
                 )}
@@ -651,7 +654,6 @@ function Upload({
         {activeTab === 'remote' && (
           <>
             <Dropdown
-              border="border"
               options={urlOptions}
               selectedValue={
                 urlOptions.find((opt) => opt.value === ingestor.type) || null
@@ -660,8 +662,10 @@ function Upload({
                 handleIngestorTypeChange(selected.value as IngestorType)
               }
               size="w-full"
-              darkBorderColor="dim-gray"
               rounded="3xl"
+              border="border"
+              placeholder="Select ingestor type"
+              placeholderClassName="text-gray-400 dark:text-silver"
             />
             {/* Dynamically render form fields based on schema */}
 
@@ -681,7 +685,7 @@ function Upload({
             ) && (
               <button
                 onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
-                className="bg-transparent py-2 pl-0 text-left text-sm font-normal text-purple-30 hover:cursor-pointer"
+                className="text-purple-30 bg-transparent py-2 pl-0 text-left text-sm font-normal hover:cursor-pointer"
               >
                 {showAdvancedOptions
                   ? t('modals.uploadDoc.hideAdvanced')
@@ -694,7 +698,7 @@ function Upload({
           {activeTab && (
             <button
               onClick={() => setActiveTab(null)}
-              className="rounded-3xl bg-transparent px-4 py-2 text-[14px] font-medium text-purple-30 hover:cursor-pointer dark:text-silver"
+              className="text-purple-30 dark:text-silver rounded-3xl bg-transparent px-4 py-2 text-[14px] font-medium hover:cursor-pointer"
             >
               {t('modals.uploadDoc.back')}
             </button>
@@ -712,7 +716,7 @@ function Upload({
               className={`rounded-3xl px-4 py-2 text-[14px] font-medium ${
                 isUploadDisabled()
                   ? 'cursor-not-allowed bg-gray-300 text-gray-500'
-                  : 'cursor-pointer bg-purple-30 text-white hover:bg-violets-are-blue'
+                  : 'bg-purple-30 hover:bg-violets-are-blue cursor-pointer text-white'
               }`}
             >
               {t('modals.uploadDoc.train')}

frontend/tailwind.config.cjs

@@ -1,87 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      spacing: {
-        112: '28rem',
-        128: '32rem',
-      },
-      colors: {
-        'eerie-black': '#212121',
-        'black-1000': '#343541',
-        'jet': '#343541',
-        'gray-alpha': 'rgba(0,0,0, .64)',
-        'gray-1000': '#F6F6F6',
-        'gray-2000': 'rgba(0, 0, 0, 0.5)',
-        'gray-3000': 'rgba(243, 243, 243, 1)',
-        'gray-4000': '#949494',
-        'gray-5000': '#BBBBBB',
-        'gray-6000': '#757575',
-        'red-1000': 'rgb(254, 202, 202)',
-        'red-2000': '#F44336',
-        'red-3000': '#621B16',
-        'blue-1000': '#7D54D1',
-        'blue-2000': '#002B49',
-        'blue-3000': '#4B02E2',
-        'purple-30': '#7D54D1',
-        'purple-3000': 'rgb(230,222,247)',
-        'blue-4000': 'rgba(0, 125, 255, 0.36)',
-        'blue-5000': 'rgba(0, 125, 255)',
-        'green-2000': '#0FFF50',
-        'light-gray': '#edeef0',
-        'white-3000': '#ffffff',
-        'just-black': '#00000',
-        'purple-taupe': '#464152',
-        'dove-gray': '#6c6c6c',
-        'silver': '#c4c4c4',
-        'rainy-gray': '#a4a4a4',
-        'raisin-black': '#222327',
-        'chinese-black': '#161616',
-        'chinese-silver': '#CDCDCD',
-        'dark-charcoal': '#2F3036',
-        'bright-gray': '#ECECF1',
-        'outer-space': '#444654',
-        'gun-metal': '#2E303E',
-        'sonic-silver': '#747474',
-        'soap': '#D8CCF1',
-        'independence': '#54546D',
-        'philippine-yellow': '#FFC700',
-        'bright-gray': '#EBEBEB',
-        'chinese-white': '#e0e0e0',
-        'dark-gray': '#aaaaaa',
-        'dim-gray': '#6A6A6A',
-        'cultured': '#f4f4f4',
-        'charleston-green': '#2b2c31',
-        'charleston-green-2' : '#26272e',
-        'charleston-green-3':'#26272A',
-        'grey': '#7e7e7e',
-        'lotion': '#FBFBFB',
-        'platinum': '#e6e6e6',
-        'eerie-black-2': '#191919',
-        'light-silver': '#D9D9D9',
-        'carbon': '#2E2E2E',
-        'onyx':'#35363B',
-        'royal-purple': '#6C4AB0',
-        'chinese-black-2': '#0F1419',
-        'gainsboro': '#D9DCDE',
-        'onyx-2': '#35383C',
-        'philippine-grey': '#929292',
-        'charcoal-grey':'#53545D',
-        'rosso-corsa': '#D30000',
-        'north-texas-green': '#0C9D35',
-        'medium-purple': '#8d66dd',
-        'slate-blue': '#6f5fca',
-        'old-silver': '#848484',
-        'arsenic': '#4D4E58',
-        'light-gainsboro': '#d7D7D7',
-        'raisin-black-light': '#18181B',
-        'gunmetal': '#32333B',
-        'sonic-silver-light': '#7f7f82',
-        'violets-are-blue':'#976AF3'
-      },
-    },
-  },
-  plugins: [],
-};