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

@@ -2,16 +2,18 @@ import uuid
 from abc import ABC, abstractmethod
 from typing import Dict, Generator, List, Optional
 
-from application.agents.llm_handler import get_llm_handler
+from bson.objectid import ObjectId
+
 from application.agents.tools.tool_action_parser import ToolActionParser
 from application.agents.tools.tool_manager import ToolManager
 
 from application.core.mongo_db import MongoDB
+from application.core.settings import settings
+
+from application.llm.handlers.handler_creator import LLMHandlerCreator
 from application.llm.llm_creator import LLMCreator
 from application.logging import build_stack_data, log_activity, LogContext
 from application.retriever.base import BaseRetriever
-from application.core.settings import settings
-from bson.objectid import ObjectId
 
 
 class BaseAgent(ABC):
@@ -45,7 +47,9 @@ class BaseAgent(ABC):
             user_api_key=user_api_key,
             decoded_token=decoded_token,
         )
-        self.llm_handler = get_llm_handler(llm_name)
+        self.llm_handler = LLMHandlerCreator.create_handler(
+            llm_name if llm_name else "default"
+        )
         self.attachments = attachments or []
 
     @log_activity()
@@ -87,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": []}
@@ -132,6 +136,15 @@ class BaseAgent(ABC):
         parser = ToolActionParser(self.llm.__class__.__name__)
         tool_id, action_name, call_args = parser.parse_args(call)
 
+        call_id = getattr(call, "id", None) or str(uuid.uuid4())
+        tool_call_data = {
+            "tool_name": tools_dict[tool_id]["name"],
+            "call_id": call_id,
+            "action_name": f"{action_name}_{tool_id}",
+            "arguments": call_args,
+        }
+        yield {"type": "tool_call", "data": {**tool_call_data, "status": "pending"}}
+
         tool_data = tools_dict[tool_id]
         action_data = (
             tool_data["config"]["actions"][action_name]
@@ -184,19 +197,29 @@ class BaseAgent(ABC):
         else:
             print(f"Executing tool: {action_name} with args: {call_args}")
             result = tool.execute_action(action_name, **parameters)
-        call_id = getattr(call, "id", None)
+        tool_call_data["result"] = (
+            f"{str(result)[:50]}..." if len(str(result)) > 50 else result
+        )
 
-        tool_call_data = {
-            "tool_name": tool_data["name"],
-            "call_id": call_id if call_id is not None else "None",
-            "action_name": f"{action_name}_{tool_id}",
-            "arguments": call_args,
-            "result": result,
-        }
+        yield {"type": "tool_call", "data": {**tool_call_data, "status": "completed"}}
         self.tool_calls.append(tool_call_data)
 
         return result, call_id
 
+    def _get_truncated_tool_calls(self):
+        return [
+            {
+                **tool_call,
+                "result": (
+                    f"{str(tool_call['result'])[:50]}..."
+                    if len(str(tool_call["result"])) > 50
+                    else tool_call["result"]
+                ),
+                "status": "completed",
+            }
+            for tool_call in self.tool_calls
+        ]
+
     def _build_messages(
         self,
         system_prompt: str,
@@ -252,9 +275,16 @@ class BaseAgent(ABC):
         return retrieved_data
 
     def _llm_gen(self, messages: List[Dict], log_context: Optional[LogContext] = None):
-        resp = self.llm.gen_stream(
-            model=self.gpt_model, messages=messages, tools=self.tools
-        )
+        gen_kwargs = {"model": self.gpt_model, "messages": messages}
+
+        if (
+            hasattr(self.llm, "_supports_tools")
+            and self.llm._supports_tools
+            and self.tools
+        ):
+            gen_kwargs["tools"] = self.tools
+        resp = self.llm.gen_stream(**gen_kwargs)
+
         if log_context:
             data = build_stack_data(self.llm, exclude_attributes=["client"])
             log_context.stacks.append({"component": "llm", "data": data})
@@ -268,10 +298,29 @@ class BaseAgent(ABC):
         log_context: Optional[LogContext] = None,
         attachments: Optional[List[Dict]] = None,
     ):
-        resp = self.llm_handler.handle_response(
-            self, resp, tools_dict, messages, attachments
+        resp = self.llm_handler.process_message_flow(
+            self, resp, tools_dict, messages, attachments, True
         )
         if log_context:
             data = build_stack_data(self.llm_handler, exclude_attributes=["tool_calls"])
             log_context.stacks.append({"component": "llm_handler", "data": data})
         return resp
+
+    def _handle_response(self, response, tools_dict, messages, log_context):
+        if isinstance(response, str):
+            yield {"answer": response}
+            return
+        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
+        )
+
+        for event in processed_response_gen:
+            if isinstance(event, str):
+                yield {"answer": event}
+            elif hasattr(event, "message") and getattr(event.message, "content", None):
+                yield {"answer": event.message.content}
+            elif isinstance(event, dict) and "type" in event:
+                yield event

application/agents/classic_agent.py

@@ -1,8 +1,6 @@
 from typing import Dict, Generator
-
 from application.agents.base import BaseAgent
 from application.logging import LogContext
-
 from application.retriever.base import BaseRetriever
 import logging
 
@@ -10,55 +8,46 @@ logger = logging.getLogger(__name__)
 
 
 class ClassicAgent(BaseAgent):
+    """A simplified agent with clear execution flow.
+
+    Usage:
+    1. Processes a query through retrieval
+    2. Sets up available tools
+    3. Generates responses using LLM
+    4. Handles tool interactions if needed
+    5. Returns standardized outputs
+
+    Easy to extend by overriding specific steps.
+    """
+
     def _gen_inner(
         self, query: str, retriever: BaseRetriever, log_context: LogContext
     ) -> Generator[Dict, None, None]:
+        # Step 1: Retrieve relevant data
         retrieved_data = self._retriever_search(retriever, query, log_context)
-        if self.user_api_key:
-            tools_dict = self._get_tools(self.user_api_key)
-        else:
-            tools_dict = self._get_user_tools(self.user)
+
+        # Step 2: Prepare tools
+        tools_dict = (
+            self._get_user_tools(self.user)
+            if not self.user_api_key
+            else self._get_tools(self.user_api_key)
+        )
         self._prepare_tools(tools_dict)
 
+        # Step 3: Build and process messages
         messages = self._build_messages(self.prompt, query, retrieved_data)
+        llm_response = self._llm_gen(messages, log_context)
 
-        resp = self._llm_gen(messages, log_context)
+        # Step 4: Handle the response
+        yield from self._handle_response(
+            llm_response, tools_dict, messages, log_context
+        )
 
-        attachments = self.attachments
-
-        if isinstance(resp, str):
-            yield {"answer": resp}
-            return
-        if (
-            hasattr(resp, "message")
-            and hasattr(resp.message, "content")
-            and resp.message.content is not None
-        ):
-            yield {"answer": resp.message.content}
-            return
-
-        resp = self._llm_handler(resp, tools_dict, messages, log_context, attachments)
-
-        if isinstance(resp, str):
-            yield {"answer": resp}
-        elif (
-            hasattr(resp, "message")
-            and hasattr(resp.message, "content")
-            and resp.message.content is not None
-        ):
-            yield {"answer": resp.message.content}
-        else:
-            for line in resp:
-                if isinstance(line, str):
-                    yield {"answer": line}
+        # Step 5: Return metadata
+        yield {"sources": retrieved_data}
+        yield {"tool_calls": self._get_truncated_tool_calls()}
 
+        # Log tool calls for debugging
         log_context.stacks.append(
             {"component": "agent", "data": {"tool_calls": self.tool_calls.copy()}}
         )
-
-        yield {"sources": retrieved_data}
-        # clean tool_call_data only send first 50 characters of tool_call['result']
-        for tool_call in self.tool_calls:
-            if len(str(tool_call["result"])) > 50:
-                tool_call["result"] = str(tool_call["result"])[:50] + "..."
-        yield {"tool_calls": self.tool_calls.copy()}

application/agents/llm_handler.py

@@ -1,351 +0,0 @@
-import json
-import logging
-from abc import ABC, abstractmethod
-
-from application.logging import build_stack_data
-
-logger = logging.getLogger(__name__)
-
-
-class LLMHandler(ABC):
-    def __init__(self):
-        self.llm_calls = []
-        self.tool_calls = []
-
-    @abstractmethod
-    def handle_response(self, agent, resp, tools_dict, messages, attachments=None, **kwargs):
-        pass
-
-    def prepare_messages_with_attachments(self, agent, messages, attachments=None):
-        """
-        Prepare messages with attachment content if available.
-
-        Args:
-            agent: The current agent instance.
-            messages (list): List of message dictionaries.
-            attachments (list): List of attachment dictionaries with content.
-
-        Returns:
-            list: Messages with attachment context added to the system prompt.
-        """
-        if not attachments:
-            return messages
-
-        logger.info(f"Preparing messages with {len(attachments)} attachments")
-
-        supported_types = agent.llm.get_supported_attachment_types()
-
-        supported_attachments = []
-        unsupported_attachments = []
-
-        for attachment in attachments:
-            mime_type = attachment.get('mime_type')
-            if mime_type in supported_types:
-                supported_attachments.append(attachment)
-            else:
-                unsupported_attachments.append(attachment)
-
-        # Process supported attachments with the LLM's custom method
-        prepared_messages = messages
-        if supported_attachments:
-            logger.info(f"Processing {len(supported_attachments)} supported attachments with {agent.llm.__class__.__name__}'s method")
-            prepared_messages = agent.llm.prepare_messages_with_attachments(messages, supported_attachments)
-
-        # Process unsupported attachments with the default method
-        if unsupported_attachments:
-            logger.info(f"Processing {len(unsupported_attachments)} unsupported attachments with default method")
-            prepared_messages = self._append_attachment_content_to_system(prepared_messages, unsupported_attachments)
-
-        return prepared_messages
-
-    def _append_attachment_content_to_system(self, messages, attachments):
-        """
-        Default method to append attachment content to the system prompt.
-
-        Args:
-            messages (list): List of message dictionaries.
-            attachments (list): List of attachment dictionaries with content.
-
-        Returns:
-            list: Messages with attachment context added to the system prompt.
-        """
-        prepared_messages = messages.copy()
-
-        attachment_texts = []
-        for attachment in attachments:
-            logger.info(f"Adding attachment {attachment.get('id')} to context")
-            if 'content' in attachment:
-                attachment_texts.append(f"Attached file content:\n\n{attachment['content']}")
-
-        if attachment_texts:
-            combined_attachment_text = "\n\n".join(attachment_texts)
-
-            system_found = False
-            for i in range(len(prepared_messages)):
-                if prepared_messages[i].get("role") == "system":
-                    prepared_messages[i]["content"] += f"\n\n{combined_attachment_text}"
-                    system_found = True
-                    break
-
-            if not system_found:
-                prepared_messages.insert(0, {"role": "system", "content": combined_attachment_text})
-
-        return prepared_messages
-
-class OpenAILLMHandler(LLMHandler):
-    def handle_response(self, agent, resp, tools_dict, messages, attachments=None, stream: bool = True):
-
-        messages = self.prepare_messages_with_attachments(agent, messages, attachments)
-        logger.info(f"Messages with attachments: {messages}")
-        if not stream:
-            while hasattr(resp, "finish_reason") and resp.finish_reason == "tool_calls":
-                message = json.loads(resp.model_dump_json())["message"]
-                keys_to_remove = {"audio", "function_call", "refusal"}
-                filtered_data = {
-                    k: v for k, v in message.items() if k not in keys_to_remove
-                }
-                messages.append(filtered_data)
-
-                tool_calls = resp.message.tool_calls
-                for call in tool_calls:
-                    try:
-                        self.tool_calls.append(call)
-                        tool_response, call_id = agent._execute_tool_action(
-                            tools_dict, call
-                        )
-                        function_call_dict = {
-                            "function_call": {
-                                "name": call.function.name,
-                                "args": call.function.arguments,
-                                "call_id": call_id,
-                            }
-                        }
-                        function_response_dict = {
-                            "function_response": {
-                                "name": call.function.name,
-                                "response": {"result": tool_response},
-                                "call_id": call_id,
-                            }
-                        }
-
-                        messages.append(
-                            {"role": "assistant", "content": [function_call_dict]}
-                        )
-                        messages.append(
-                            {"role": "tool", "content": [function_response_dict]}
-                        )
-
-                        messages = self.prepare_messages_with_attachments(agent, messages, attachments)
-                    except Exception as e:
-                        logging.error(f"Error executing tool: {str(e)}", exc_info=True)
-                        messages.append(
-                            {
-                                "role": "tool",
-                                "content": f"Error executing tool: {str(e)}",
-                                "tool_call_id": call_id,
-                            }
-                        )
-                resp = agent.llm.gen_stream(
-                    model=agent.gpt_model, messages=messages, tools=agent.tools
-                )
-                self.llm_calls.append(build_stack_data(agent.llm))
-            return resp
-
-        else:
-            text_buffer = ""
-            while True:
-                tool_calls = {}
-                for chunk in resp:
-                    if isinstance(chunk, str) and len(chunk) > 0:
-                        yield chunk
-                        continue
-                    elif hasattr(chunk, "delta"):
-                        chunk_delta = chunk.delta
-
-                        if (
-                            hasattr(chunk_delta, "tool_calls")
-                            and chunk_delta.tool_calls is not None
-                        ):
-                            for tool_call in chunk_delta.tool_calls:
-                                index = tool_call.index
-                                if index not in tool_calls:
-                                    tool_calls[index] = {
-                                        "id": "",
-                                        "function": {"name": "", "arguments": ""},
-                                    }
-
-                                current = tool_calls[index]
-                                if tool_call.id:
-                                    current["id"] = tool_call.id
-                                if tool_call.function.name:
-                                    current["function"][
-                                        "name"
-                                    ] = tool_call.function.name
-                                if tool_call.function.arguments:
-                                    current["function"][
-                                        "arguments"
-                                    ] += tool_call.function.arguments
-                                tool_calls[index] = current
-
-                        if (
-                            hasattr(chunk, "finish_reason")
-                            and chunk.finish_reason == "tool_calls"
-                        ):
-                            for index in sorted(tool_calls.keys()):
-                                call = tool_calls[index]
-                                try:
-                                    self.tool_calls.append(call)
-                                    tool_response, call_id = agent._execute_tool_action(
-                                        tools_dict, call
-                                    )
-                                    if isinstance(call["function"]["arguments"], str):
-                                        call["function"]["arguments"] = json.loads(call["function"]["arguments"])
-
-                                    function_call_dict = {
-                                        "function_call": {
-                                            "name": call["function"]["name"],
-                                            "args": call["function"]["arguments"],
-                                            "call_id": call["id"],
-                                        }
-                                    }
-                                    function_response_dict = {
-                                        "function_response": {
-                                            "name": call["function"]["name"],
-                                            "response": {"result": tool_response},
-                                            "call_id": call["id"],
-                                        }
-                                    }
-
-                                    messages.append(
-                                        {
-                                            "role": "assistant",
-                                            "content": [function_call_dict],
-                                        }
-                                    )
-                                    messages.append(
-                                        {
-                                            "role": "tool",
-                                            "content": [function_response_dict],
-                                        }
-                                    )
-
-                                except Exception as e:
-                                    logging.error(f"Error executing tool: {str(e)}", exc_info=True)
-                                    messages.append(
-                                        {
-                                            "role": "assistant",
-                                            "content": f"Error executing tool: {str(e)}",
-                                        }
-                                    )
-                            tool_calls = {}
-                        if hasattr(chunk_delta, "content") and chunk_delta.content:
-                            # Add to buffer or yield immediately based on your preference
-                            text_buffer += chunk_delta.content
-                            yield text_buffer
-                            text_buffer = ""
-
-                        if (
-                            hasattr(chunk, "finish_reason")
-                            and chunk.finish_reason == "stop"
-                        ):
-                            return resp
-                    elif isinstance(chunk, str) and len(chunk) == 0:
-                            continue
-
-                logger.info(f"Regenerating with messages: {messages}")
-                resp = agent.llm.gen_stream(
-                    model=agent.gpt_model, messages=messages, tools=agent.tools
-                )
-                self.llm_calls.append(build_stack_data(agent.llm))
-
-
-class GoogleLLMHandler(LLMHandler):
-    def handle_response(self, agent, resp, tools_dict, messages, attachments=None, stream: bool = True):
-        from google.genai import types
-
-        messages = self.prepare_messages_with_attachments(agent, messages, attachments)
-
-        while True:
-            if not stream:
-                response = agent.llm.gen(
-                    model=agent.gpt_model, messages=messages, tools=agent.tools
-                )
-                self.llm_calls.append(build_stack_data(agent.llm))
-                if response.candidates and response.candidates[0].content.parts:
-                    tool_call_found = False
-                    for part in response.candidates[0].content.parts:
-                        if part.function_call:
-                            tool_call_found = True
-                            self.tool_calls.append(part.function_call)
-                            tool_response, call_id = agent._execute_tool_action(
-                                tools_dict, part.function_call
-                            )
-                            function_response_part = types.Part.from_function_response(
-                                name=part.function_call.name,
-                                response={"result": tool_response},
-                            )
-
-                            messages.append(
-                                {"role": "model", "content": [part.to_json_dict()]}
-                            )
-                            messages.append(
-                                {
-                                    "role": "tool",
-                                    "content": [function_response_part.to_json_dict()],
-                                }
-                            )
-
-                    if (
-                        not tool_call_found
-                        and response.candidates[0].content.parts
-                        and response.candidates[0].content.parts[0].text
-                    ):
-                        return response.candidates[0].content.parts[0].text
-                    elif not tool_call_found:
-                        return response.candidates[0].content.parts
-
-                else:
-                    return response
-
-            else:
-                response = agent.llm.gen_stream(
-                    model=agent.gpt_model, messages=messages, tools=agent.tools
-                )
-                self.llm_calls.append(build_stack_data(agent.llm))
-
-                tool_call_found = False
-                for result in response:
-                    if hasattr(result, "function_call"):
-                        tool_call_found = True
-                        self.tool_calls.append(result.function_call)
-                        tool_response, call_id = agent._execute_tool_action(
-                            tools_dict, result.function_call
-                        )
-                        function_response_part = types.Part.from_function_response(
-                            name=result.function_call.name,
-                            response={"result": tool_response},
-                        )
-
-                        messages.append(
-                            {"role": "model", "content": [result.to_json_dict()]}
-                        )
-                        messages.append(
-                            {
-                                "role": "tool",
-                                "content": [function_response_part.to_json_dict()],
-                            }
-                        )
-                    else:
-                        tool_call_found = False
-                        yield result
-
-                if not tool_call_found:
-                    return response
-
-
-def get_llm_handler(llm_type):
-    handlers = {
-        "openai": OpenAILLMHandler(),
-        "google": GoogleLLMHandler(),
-    }
-    return handlers.get(llm_type, OpenAILLMHandler())

application/agents/react_agent.py

@@ -1,33 +1,95 @@
 import os
-from typing import Dict, Generator, List
+from typing import Dict, Generator, List, Any
+import logging
 
 from application.agents.base import BaseAgent
 from application.logging import build_stack_data, LogContext
 from application.retriever.base import BaseRetriever
 
+logger = logging.getLogger(__name__)
+
 current_dir = os.path.dirname(
     os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 )
 with open(
     os.path.join(current_dir, "application/prompts", "react_planning_prompt.txt"), "r"
 ) as f:
-    planning_prompt = f.read()
+    planning_prompt_template = f.read()
 with open(
     os.path.join(current_dir, "application/prompts", "react_final_prompt.txt"),
     "r",
 ) as f:
-    final_prompt = f.read()
-
+    final_prompt_template = f.read()
+    
+MAX_ITERATIONS_REASONING = 10
 
 class ReActAgent(BaseAgent):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-        self.plan = ""
+        self.plan: str = ""
         self.observations: List[str] = []
 
+    def _extract_content_from_llm_response(self, resp: Any) -> str:
+        """
+        Helper to extract string content from various LLM response types.
+        Handles strings, message objects (OpenAI-like), and streams.
+        Adapt stream handling for your specific LLM client if not OpenAI.
+        """
+        collected_content = []
+        if isinstance(resp, str):
+            collected_content.append(resp)
+        elif ( # OpenAI non-streaming or Anthropic non-streaming (older SDK style)
+            hasattr(resp, "message")
+            and hasattr(resp.message, "content")
+            and resp.message.content is not None
+        ):
+            collected_content.append(resp.message.content)
+        elif ( # OpenAI non-streaming (Pydantic model), Anthropic new SDK non-streaming
+            hasattr(resp, "choices") and resp.choices and
+            hasattr(resp.choices[0], "message") and
+            hasattr(resp.choices[0].message, "content") and
+            resp.choices[0].message.content is not None
+        ):
+            collected_content.append(resp.choices[0].message.content) # OpenAI
+        elif ( # Anthropic new SDK non-streaming content block
+             hasattr(resp, "content") and isinstance(resp.content, list) and resp.content and
+             hasattr(resp.content[0], "text")
+        ):
+            collected_content.append(resp.content[0].text) # Anthropic
+        else:
+            # Assume resp is a stream if not a recognized object
+            try:
+                for chunk in resp: # This will fail if resp is not iterable (e.g. a non-streaming response object)
+                    content_piece = ""
+                    # OpenAI-like stream
+                    if hasattr(chunk, 'choices') and len(chunk.choices) > 0 and \
+                       hasattr(chunk.choices[0], 'delta') and \
+                       hasattr(chunk.choices[0].delta, 'content') and \
+                       chunk.choices[0].delta.content is not None:
+                        content_piece = chunk.choices[0].delta.content
+                    # Anthropic-like stream (ContentBlockDelta)
+                    elif hasattr(chunk, 'type') and chunk.type == 'content_block_delta' and \
+                         hasattr(chunk, 'delta') and hasattr(chunk.delta, 'text'):
+                        content_piece = chunk.delta.text
+                    elif isinstance(chunk, str): # Simplest case: stream of strings
+                        content_piece = chunk
+
+                    if content_piece:
+                        collected_content.append(content_piece)
+            except TypeError: # If resp is not iterable (e.g. a final response object that wasn't caught above)
+                logger.debug(f"Response type {type(resp)} could not be iterated as a stream. It might be a non-streaming object not handled by specific checks.")
+            except Exception as e:
+                logger.error(f"Error processing potential stream chunk: {e}, chunk was: {getattr(chunk, '__dict__', chunk)}")
+
+
+        return "".join(collected_content)
+
     def _gen_inner(
         self, query: str, retriever: BaseRetriever, log_context: LogContext
     ) -> Generator[Dict, None, None]:
+        # Reset state for this generation call
+        self.plan = ""
+        self.observations = []
         retrieved_data = self._retriever_search(retriever, query, log_context)
 
         if self.user_api_key:
@@ -37,96 +99,131 @@ class ReActAgent(BaseAgent):
         self._prepare_tools(tools_dict)
 
         docs_together = "\n".join([doc["text"] for doc in retrieved_data])
-        plan = self._create_plan(query, docs_together, log_context)
-        for line in plan:
-            if isinstance(line, str):
-                self.plan += line
-                yield {"thought": line}
+        iterating_reasoning = 0
+        while iterating_reasoning < MAX_ITERATIONS_REASONING:
+            iterating_reasoning += 1
+            # 1. Create Plan
+            logger.info("ReActAgent: Creating plan...")
+            plan_stream = self._create_plan(query, docs_together, log_context)
+            current_plan_parts = []
+            yield {"thought": f"Reasoning... (iteration {iterating_reasoning})\n\n"}
+            for line_chunk in plan_stream:
+                current_plan_parts.append(line_chunk)
+                yield {"thought": line_chunk}
+            self.plan = "".join(current_plan_parts)
+            if self.plan:
+                self.observations.append(f"Plan: {self.plan} Iteration: {iterating_reasoning}")
 
-        prompt = self.prompt + f"\nFollow this plan: {self.plan}"
-        messages = self._build_messages(prompt, query, retrieved_data)
 
-        resp = self._llm_gen(messages, log_context)
-
-        if isinstance(resp, str):
-            self.observations.append(resp)
-        if (
-            hasattr(resp, "message")
-            and hasattr(resp.message, "content")
-            and resp.message.content is not None
-        ):
-            self.observations.append(resp.message.content)
-
-        resp = self._llm_handler(resp, tools_dict, messages, log_context)
-
-        for tool_call in self.tool_calls:
-            observation = (
-                f"Action '{tool_call['action_name']}' of tool '{tool_call['tool_name']}' "
-                f"with arguments '{tool_call['arguments']}' returned: '{tool_call['result']}'"
+            max_obs_len = 20000
+            obs_str = "\n".join(self.observations)
+            if len(obs_str) > max_obs_len:
+                obs_str = obs_str[:max_obs_len] + "\n...[observations truncated]"
+            execution_prompt_str = (
+                (self.prompt or "")
+                + f"\n\nFollow this plan:\n{self.plan}"
+                + f"\n\nObservations:\n{obs_str}"
+                + f"\n\nIf there is enough data to complete user query '{query}', Respond with 'SATISFIED' only. Otherwise, continue. Dont Menstion 'SATISFIED' in your response if you are not ready. "
             )
-            self.observations.append(observation)
+            
+            messages = self._build_messages(execution_prompt_str, query, retrieved_data)
 
-        if isinstance(resp, str):
-            self.observations.append(resp)
-        elif (
-            hasattr(resp, "message")
-            and hasattr(resp.message, "content")
-            and resp.message.content is not None
-        ):
-            self.observations.append(resp.message.content)
-        else:
-            completion = self.llm.gen_stream(
-                model=self.gpt_model, messages=messages, tools=self.tools
-            )
-            for line in completion:
-                if isinstance(line, str):
-                    self.observations.append(line)
+            resp_from_llm_gen = self._llm_gen(messages, log_context)
 
-        log_context.stacks.append(
-            {"component": "agent", "data": {"tool_calls": self.tool_calls.copy()}}
-        )
+            initial_llm_thought_content = self._extract_content_from_llm_response(resp_from_llm_gen)
+            if initial_llm_thought_content:
+                self.observations.append(f"Initial thought/response: {initial_llm_thought_content}")
+            else:
+                logger.info("ReActAgent: Initial LLM response (before handler) had no textual content (might be only tool calls).")
+            resp_after_handler = self._llm_handler(resp_from_llm_gen, tools_dict, messages, log_context)
+            
+            for tool_call_info in self.tool_calls: # Iterate over self.tool_calls populated by _llm_handler
+                observation_string = (
+                    f"Executed Action: Tool '{tool_call_info.get('tool_name', 'N/A')}' "
+                    f"with arguments '{tool_call_info.get('arguments', '{}')}'. Result: '{str(tool_call_info.get('result', ''))[:200]}...'"
+                )
+                self.observations.append(observation_string)
 
-        yield {"sources": retrieved_data}
-        # clean tool_call_data only send first 50 characters of tool_call['result']
-        for tool_call in self.tool_calls:
-            if len(str(tool_call["result"])) > 50:
-                tool_call["result"] = str(tool_call["result"])[:50] + "..."
-        yield {"tool_calls": self.tool_calls.copy()}
+            content_after_handler = self._extract_content_from_llm_response(resp_after_handler)
+            if content_after_handler:
+                self.observations.append(f"Response after tool execution: {content_after_handler}")
+            else:
+                logger.info("ReActAgent: LLM response after handler had no textual content.")
 
-        final_answer = self._create_final_answer(query, self.observations, log_context)
-        for line in final_answer:
-            if isinstance(line, str):
-                yield {"answer": line}
+            if log_context:
+                log_context.stacks.append(
+                    {"component": "agent_tool_calls", "data": {"tool_calls": self.tool_calls.copy()}}
+                )
+
+            yield {"sources": retrieved_data}
+
+            display_tool_calls = []
+            for tc in self.tool_calls:
+                cleaned_tc = tc.copy()
+                if len(str(cleaned_tc.get("result", ""))) > 50:
+                    cleaned_tc["result"] = str(cleaned_tc["result"])[:50] + "..."
+                display_tool_calls.append(cleaned_tc)
+            if display_tool_calls:
+                yield {"tool_calls": display_tool_calls}
+            
+            if "SATISFIED" in content_after_handler:
+                logger.info("ReActAgent: LLM satisfied with the plan and data. Stopping reasoning.")
+                break
+
+        # 3. Create Final Answer based on all observations
+        final_answer_stream = self._create_final_answer(query, self.observations, log_context)
+        for answer_chunk in final_answer_stream:
+            yield {"answer": answer_chunk}
+        logger.info("ReActAgent: Finished generating final answer.")
 
     def _create_plan(
         self, query: str, docs_data: str, log_context: LogContext = None
     ) -> Generator[str, None, None]:
-        plan_prompt = planning_prompt.replace("{query}", query)
-        if "{summaries}" in planning_prompt:
-            summaries = docs_data
-            plan_prompt = plan_prompt.replace("{summaries}", summaries)
+        plan_prompt_filled = planning_prompt_template.replace("{query}", query)
+        if "{summaries}" in plan_prompt_filled:
+            summaries = docs_data if docs_data else "No documents retrieved."
+            plan_prompt_filled = plan_prompt_filled.replace("{summaries}", summaries)
+        plan_prompt_filled = plan_prompt_filled.replace("{prompt}", self.prompt or "")
+        plan_prompt_filled = plan_prompt_filled.replace("{observations}", "\n".join(self.observations))
 
-        messages = [{"role": "user", "content": plan_prompt}]
-        print(self.tools)
-        plan = self.llm.gen_stream(
-            model=self.gpt_model, messages=messages, tools=self.tools
+        messages = [{"role": "user", "content": plan_prompt_filled}]
+
+        plan_stream_from_llm = self.llm.gen_stream(
+            model=self.gpt_model, messages=messages, tools=getattr(self, 'tools', None) # Use self.tools
         )
         if log_context:
             data = build_stack_data(self.llm)
             log_context.stacks.append({"component": "planning_llm", "data": data})
-        return plan
+
+        for chunk in plan_stream_from_llm:
+            content_piece = self._extract_content_from_llm_response(chunk)
+            if content_piece:
+                yield content_piece
 
     def _create_final_answer(
         self, query: str, observations: List[str], log_context: LogContext = None
-    ) -> str:
+    ) -> Generator[str, None, None]:
         observation_string = "\n".join(observations)
-        final_answer_prompt = final_prompt.format(
+        max_obs_len = 10000
+        if len(observation_string) > max_obs_len:
+            observation_string = observation_string[:max_obs_len] + "\n...[observations truncated]"
+            logger.warning("ReActAgent: Truncated observations for final answer prompt due to length.")
+
+        final_answer_prompt_filled = final_prompt_template.format(
             query=query, observations=observation_string
         )
 
-        messages = [{"role": "user", "content": final_answer_prompt}]
-        final_answer = self.llm.gen_stream(model=self.gpt_model, messages=messages)
+        messages = [{"role": "user", "content": final_answer_prompt_filled}]
+
+        # Final answer should synthesize, not call tools.
+        final_answer_stream_from_llm = self.llm.gen_stream(
+            model=self.gpt_model, messages=messages, tools=None
+        )
         if log_context:
             data = build_stack_data(self.llm)
             log_context.stacks.append({"component": "final_answer_llm", "data": data})
-        return final_answer
+
+        for chunk in final_answer_stream_from_llm:
+            content_piece = self._extract_content_from_llm_response(chunk)
+            if content_piece:
+                yield content_piece

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/agents/tools/tool_action_parser.py

@@ -17,26 +17,21 @@ class ToolActionParser:
         return parser(call)
 
     def _parse_openai_llm(self, call):
-        if isinstance(call, dict):
-            try:
-                call_args = json.loads(call["function"]["arguments"])
-                tool_id = call["function"]["name"].split("_")[-1]
-                action_name = call["function"]["name"].rsplit("_", 1)[0]
-            except (KeyError, TypeError) as e:
-                logger.error(f"Error parsing OpenAI LLM call: {e}")
-                return None, None, None
-        else:
-            try:
-                call_args = json.loads(call.function.arguments)
-                tool_id = call.function.name.split("_")[-1]
-                action_name = call.function.name.rsplit("_", 1)[0]
-            except (AttributeError, TypeError) as e:
-                logger.error(f"Error parsing OpenAI LLM call: {e}")
-                return None, None, None
+        try:
+            call_args = json.loads(call.arguments)
+            tool_id = call.name.split("_")[-1]
+            action_name = call.name.rsplit("_", 1)[0]
+        except (AttributeError, TypeError) as e:
+            logger.error(f"Error parsing OpenAI LLM call: {e}")
+            return None, None, None
         return tool_id, action_name, call_args
 
     def _parse_google_llm(self, call):
-        call_args = call.args
-        tool_id = call.name.split("_")[-1]
-        action_name = call.name.rsplit("_", 1)[0]
+        try:
+            call_args = call.arguments
+            tool_id = call.name.split("_")[-1]
+            action_name = call.name.rsplit("_", 1)[0]
+        except (AttributeError, TypeError) as e:
+            logger.error(f"Error parsing Google LLM call: {e}")
+            return None, None, None
         return tool_id, action_name, call_args

application/api/answer/routes.py

@@ -37,17 +37,17 @@ api.add_namespace(answer_ns)
 
 gpt_model = ""
 # to have some kind of default behaviour
-if settings.LLM_NAME == "openai":
+if settings.LLM_PROVIDER == "openai":
     gpt_model = "gpt-4o-mini"
-elif settings.LLM_NAME == "anthropic":
+elif settings.LLM_PROVIDER == "anthropic":
     gpt_model = "claude-2"
-elif settings.LLM_NAME == "groq":
+elif settings.LLM_PROVIDER == "groq":
     gpt_model = "llama3-8b-8192"
-elif settings.LLM_NAME == "novita":
+elif settings.LLM_PROVIDER == "novita":
     gpt_model = "deepseek/deepseek-r1"
 
-if settings.MODEL_NAME:  # in case there is particular model name configured
-    gpt_model = settings.MODEL_NAME
+if settings.LLM_NAME:  # in case there is particular model name configured
+    gpt_model = settings.LLM_NAME
 
 # load the prompts
 current_dir = os.path.dirname(
@@ -164,6 +164,7 @@ def save_conversation(
     agent_id=None,
     is_shared_usage=False,
     shared_token=None,
+    attachment_ids=None,
 ):
     current_time = datetime.datetime.now(datetime.timezone.utc)
     if conversation_id is not None and index is not None:
@@ -177,6 +178,7 @@ def save_conversation(
                     f"queries.{index}.sources": source_log_docs,
                     f"queries.{index}.tool_calls": tool_calls,
                     f"queries.{index}.timestamp": current_time,
+                    f"queries.{index}.attachments": attachment_ids,
                 }
             },
         )
@@ -197,6 +199,7 @@ def save_conversation(
                         "sources": source_log_docs,
                         "tool_calls": tool_calls,
                         "timestamp": current_time,
+                        "attachments": attachment_ids,
                     }
                 }
             },
@@ -233,6 +236,7 @@ def save_conversation(
                     "sources": source_log_docs,
                     "tool_calls": tool_calls,
                     "timestamp": current_time,
+                    "attachments": attachment_ids,
                 }
             ],
         }
@@ -273,20 +277,13 @@ def complete_stream(
     isNoneDoc=False,
     index=None,
     should_save_conversation=True,
-    attachments=None,
+    attachment_ids=None,
     agent_id=None,
     is_shared_usage=False,
     shared_token=None,
 ):
     try:
         response_full, thought, source_log_docs, tool_calls = "", "", [], []
-        attachment_ids = []
-
-        if attachments:
-            attachment_ids = [attachment["id"] for attachment in attachments]
-            logger.info(
-                f"Processing request with {len(attachments)} attachments: {attachment_ids}"
-            )
 
         answer = agent.gen(query=question, retriever=retriever)
 
@@ -310,19 +307,20 @@ def complete_stream(
                     yield f"data: {data}\n\n"
             elif "tool_calls" in line:
                 tool_calls = line["tool_calls"]
-                data = json.dumps({"type": "tool_calls", "tool_calls": tool_calls})
-                yield f"data: {data}\n\n"
             elif "thought" in line:
                 thought += line["thought"]
                 data = json.dumps({"type": "thought", "thought": line["thought"]})
                 yield f"data: {data}\n\n"
+            elif "type" in line:
+                data = json.dumps(line)
+                yield f"data: {data}\n\n"
 
         if isNoneDoc:
             for doc in source_log_docs:
                 doc["source"] = "None"
 
         llm = LLMCreator.create_llm(
-            settings.LLM_NAME,
+            settings.LLM_PROVIDER,
             api_key=settings.API_KEY,
             user_api_key=user_api_key,
             decoded_token=decoded_token,
@@ -340,6 +338,7 @@ def complete_stream(
                 decoded_token,
                 index,
                 api_key=user_api_key,
+                attachment_ids=attachment_ids,
                 agent_id=agent_id,
                 is_shared_usage=is_shared_usage,
                 shared_token=shared_token,
@@ -439,7 +438,7 @@ class Stream(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")
@@ -451,9 +450,9 @@ class Stream(Resource):
             retriever_name = data.get("retriever", "classic")
             agent_id = data.get("agent_id", None)
             agent_type = settings.AGENT_NAME
-            agent_key, is_shared_usage, shared_token = get_agent_key(
-                agent_id, request.decoded_token.get("sub")
-            )
+            decoded_token = getattr(request, "decoded_token", None)
+            user_sub = decoded_token.get("sub") if decoded_token else None
+            agent_key, is_shared_usage, shared_token = get_agent_key(agent_id, user_sub)
 
             if agent_key:
                 data.update({"api_key": agent_key})
@@ -504,7 +503,7 @@ class Stream(Resource):
             agent = AgentCreator.create_agent(
                 agent_type,
                 endpoint="stream",
-                llm_name=settings.LLM_NAME,
+                llm_name=settings.LLM_PROVIDER,
                 gpt_model=gpt_model,
                 api_key=settings.API_KEY,
                 user_api_key=user_api_key,
@@ -525,8 +524,7 @@ class Stream(Resource):
                 user_api_key=user_api_key,
                 decoded_token=decoded_token,
             )
-            is_shared_usage_val = data.get("is_shared_usage", False)
-            is_shared_token_val = data.get("shared_token", None)
+
             return Response(
                 complete_stream(
                     question=question,
@@ -538,9 +536,10 @@ class Stream(Resource):
                     isNoneDoc=data.get("isNoneDoc"),
                     index=index,
                     should_save_conversation=save_conv,
+                    attachment_ids=attachment_ids,
                     agent_id=agent_id,
-                    is_shared_usage=is_shared_usage_val,
-                    shared_token=is_shared_token_val,
+                    is_shared_usage=is_shared_usage,
+                    shared_token=shared_token,
                 ),
                 mimetype="text/event-stream",
             )
@@ -600,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"
+            ),
         },
     )
 
@@ -615,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")
@@ -648,23 +651,28 @@ 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})},
             )
 
             agent = AgentCreator.create_agent(
                 agent_type,
                 endpoint="api/answer",
-                llm_name=settings.LLM_NAME,
+                llm_name=settings.LLM_PROVIDER,
                 gpt_model=gpt_model,
                 api_key=settings.API_KEY,
                 user_api_key=user_api_key,
                 prompt=prompt,
                 chat_history=history,
                 decoded_token=decoded_token,
+                attachments=attachments,
             )
 
             retriever = RetrieverCreator.create_retriever(
@@ -695,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()
@@ -727,7 +736,7 @@ class Answer(Resource):
                     doc["source"] = "None"
 
             llm = LLMCreator.create_llm(
-                settings.LLM_NAME,
+                settings.LLM_PROVIDER,
                 api_key=settings.API_KEY,
                 user_api_key=user_api_key,
                 decoded_token=decoded_token,
@@ -745,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/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

@@ -11,18 +11,18 @@ current_dir = os.path.dirname(
 
 class Settings(BaseSettings):
     AUTH_TYPE: Optional[str] = None
-    LLM_NAME: str = "docsgpt"
-    MODEL_NAME: Optional[str] = (
-        None  # if LLM_NAME is openai, MODEL_NAME can be gpt-4 or gpt-3.5-turbo
+    LLM_PROVIDER: str = "docsgpt"
+    LLM_NAME: Optional[str] = (
+        None  # if LLM_PROVIDER is openai, LLM_NAME can be gpt-4 or gpt-3.5-turbo
     )
     EMBEDDINGS_NAME: str = "huggingface_sentence-transformers/all-mpnet-base-v2"
     CELERY_BROKER_URL: str = "redis://localhost:6379/0"
     CELERY_RESULT_BACKEND: str = "redis://localhost:6379/1"
     MONGO_URI: str = "mongodb://localhost:27017/docsgpt"
     MONGO_DB_NAME: str = "docsgpt"
-    MODEL_PATH: str = os.path.join(current_dir, "models/docsgpt-7b-f16.gguf")
+    LLM_PATH: str = os.path.join(current_dir, "models/docsgpt-7b-f16.gguf")
     DEFAULT_MAX_HISTORY: int = 150
-    MODEL_TOKEN_LIMITS: dict = {
+    LLM_TOKEN_LIMITS: dict = {
         "gpt-4o-mini": 128000,
         "gpt-3.5-turbo": 4096,
         "claude-2": 1e5,
@@ -33,8 +33,11 @@ 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
+    FALLBACK_LLM_API_KEY: Optional[str] = None  # api key for fallback llm
 
     # LLM Cache
     CACHE_REDIS_URL: str = "redis://localhost:6379/2"
@@ -96,11 +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 
-
+    STORAGE_TYPE: str = "local"  # local or s3
+    URL_STRATEGY: str = "backend"  # backend or s3
 
     JWT_SECRET_KEY: str = ""
 

application/llm/base.py

@@ -1,53 +1,117 @@
+import logging
 from abc import ABC, abstractmethod
 
 from application.cache import gen_cache, stream_cache
+
+from application.core.settings import settings
 from application.usage import gen_token_usage, stream_token_usage
 
+logger = logging.getLogger(__name__)
+
 
 class BaseLLM(ABC):
-    def __init__(self, decoded_token=None):
+    def __init__(
+        self,
+        decoded_token=None,
+    ):
         self.decoded_token = decoded_token
         self.token_usage = {"prompt_tokens": 0, "generated_tokens": 0}
+        self.fallback_provider = settings.FALLBACK_LLM_PROVIDER
+        self.fallback_model_name = settings.FALLBACK_LLM_NAME
+        self.fallback_llm_api_key = settings.FALLBACK_LLM_API_KEY
+        self._fallback_llm = None
 
-    def _apply_decorator(self, method, decorators, *args, **kwargs):
-        for decorator in decorators:
-            method = decorator(method)
-        return method(self, *args, **kwargs)
+    @property
+    def fallback_llm(self):
+        """Lazy-loaded fallback LLM instance."""
+        if (
+            self._fallback_llm is None
+            and self.fallback_provider
+            and self.fallback_model_name
+        ):
+            try:
+                from application.llm.llm_creator import LLMCreator
+
+                self._fallback_llm = LLMCreator.create_llm(
+                    self.fallback_provider,
+                    self.fallback_llm_api_key,
+                    None,
+                    self.decoded_token,
+                )
+            except Exception as e:
+                logger.error(
+                    f"Failed to initialize fallback LLM: {str(e)}", exc_info=True
+                )
+        return self._fallback_llm
+
+    def _execute_with_fallback(
+        self, method_name: str, decorators: list, *args, **kwargs
+    ):
+        """
+        Unified method execution with fallback support.
+
+        Args:
+            method_name: Name of the raw method ('_raw_gen' or '_raw_gen_stream')
+            decorators: List of decorators to apply
+            *args: Positional arguments
+            **kwargs: Keyword arguments
+        """
+
+        def decorated_method():
+            method = getattr(self, method_name)
+            for decorator in decorators:
+                method = decorator(method)
+            return method(self, *args, **kwargs)
+
+        try:
+            return decorated_method()
+        except Exception as e:
+            if not self.fallback_llm:
+                logger.error(f"Primary LLM failed and no fallback available: {str(e)}")
+                raise
+            logger.warning(
+                f"Falling back to {self.fallback_provider}/{self.fallback_model_name}. Error: {str(e)}"
+            )
+
+            fallback_method = getattr(
+                self.fallback_llm, method_name.replace("_raw_", "")
+            )
+            return fallback_method(*args, **kwargs)
+
+    def gen(self, model, messages, stream=False, tools=None, *args, **kwargs):
+        decorators = [gen_token_usage, gen_cache]
+        return self._execute_with_fallback(
+            "_raw_gen",
+            decorators,
+            model=model,
+            messages=messages,
+            stream=stream,
+            tools=tools,
+            *args,
+            **kwargs,
+        )
+
+    def gen_stream(self, model, messages, stream=True, tools=None, *args, **kwargs):
+        decorators = [stream_cache, stream_token_usage]
+        return self._execute_with_fallback(
+            "_raw_gen_stream",
+            decorators,
+            model=model,
+            messages=messages,
+            stream=stream,
+            tools=tools,
+            *args,
+            **kwargs,
+        )
 
     @abstractmethod
     def _raw_gen(self, model, messages, stream, tools, *args, **kwargs):
         pass
 
-    def gen(self, model, messages, stream=False, tools=None, *args, **kwargs):
-        decorators = [gen_token_usage, gen_cache]
-        return self._apply_decorator(
-            self._raw_gen,
-            decorators=decorators,
-            model=model,
-            messages=messages,
-            stream=stream,
-            tools=tools,
-            *args,
-            **kwargs
-        )
-
     @abstractmethod
     def _raw_gen_stream(self, model, messages, stream, *args, **kwargs):
         pass
 
-    def gen_stream(self, model, messages, stream=True, tools=None, *args, **kwargs):
-        decorators = [stream_cache, stream_token_usage]
-        return self._apply_decorator(
-            self._raw_gen_stream,
-            decorators=decorators,
-            model=model,
-            messages=messages,
-            stream=stream,
-            tools=tools,
-            *args,
-            **kwargs
-        )
-
     def supports_tools(self):
         return hasattr(self, "_supports_tools") and callable(
             getattr(self, "_supports_tools")
@@ -55,11 +119,11 @@ class BaseLLM(ABC):
 
     def _supports_tools(self):
         raise NotImplementedError("Subclass must implement _supports_tools method")
-        
+
     def get_supported_attachment_types(self):
         """
         Return a list of MIME types supported by this LLM for file uploads.
-        
+
         Returns:
             list: List of supported MIME types
         """

application/llm/handlers/base.py

@@ -0,0 +1,335 @@
+import logging
+from abc import ABC, abstractmethod
+from dataclasses import dataclass
+from typing import Any, Dict, Generator, List, Optional, Union
+
+from application.logging import build_stack_data
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass
+class ToolCall:
+    """Represents a tool/function call from the LLM."""
+
+    id: str
+    name: str
+    arguments: Union[str, Dict]
+    index: Optional[int] = None
+
+    @classmethod
+    def from_dict(cls, data: Dict) -> "ToolCall":
+        """Create ToolCall from dictionary."""
+        return cls(
+            id=data.get("id", ""),
+            name=data.get("name", ""),
+            arguments=data.get("arguments", {}),
+            index=data.get("index"),
+        )
+
+
+@dataclass
+class LLMResponse:
+    """Represents a response from the LLM."""
+
+    content: str
+    tool_calls: List[ToolCall]
+    finish_reason: str
+    raw_response: Any
+
+    @property
+    def requires_tool_call(self) -> bool:
+        """Check if the response requires tool calls."""
+        return bool(self.tool_calls) and self.finish_reason == "tool_calls"
+
+
+class LLMHandler(ABC):
+    """Abstract base class for LLM handlers."""
+
+    def __init__(self):
+        self.llm_calls = []
+        self.tool_calls = []
+
+    @abstractmethod
+    def parse_response(self, response: Any) -> LLMResponse:
+        """Parse raw LLM response into standardized format."""
+        pass
+
+    @abstractmethod
+    def create_tool_message(self, tool_call: ToolCall, result: Any) -> Dict:
+        """Create a tool result message for the conversation history."""
+        pass
+
+    @abstractmethod
+    def _iterate_stream(self, response: Any) -> Generator:
+        """Iterate through streaming response chunks."""
+        pass
+
+    def process_message_flow(
+        self,
+        agent,
+        initial_response,
+        tools_dict: Dict,
+        messages: List[Dict],
+        attachments: Optional[List] = None,
+        stream: bool = False,
+    ) -> Union[str, Generator]:
+        """
+        Main orchestration method for processing LLM message flow.
+
+        Args:
+            agent: The agent instance
+            initial_response: Initial LLM response
+            tools_dict: Dictionary of available tools
+            messages: Conversation history
+            attachments: Optional attachments
+            stream: Whether to use streaming
+
+        Returns:
+            Final response or generator for streaming
+        """
+        messages = self.prepare_messages(agent, messages, attachments)
+
+        if stream:
+            return self.handle_streaming(agent, initial_response, tools_dict, messages)
+        else:
+            return self.handle_non_streaming(
+                agent, initial_response, tools_dict, messages
+            )
+
+    def prepare_messages(
+        self, agent, messages: List[Dict], attachments: Optional[List] = None
+    ) -> List[Dict]:
+        """
+        Prepare messages with attachments and provider-specific formatting.
+
+        Args:
+            agent: The agent instance
+            messages: Original messages
+            attachments: List of attachments
+
+        Returns:
+            Prepared messages list
+        """
+        if not attachments:
+            return messages
+        logger.info(f"Preparing messages with {len(attachments)} attachments")
+        supported_types = agent.llm.get_supported_attachment_types()
+
+        supported_attachments = [
+            a for a in attachments if a.get("mime_type") in supported_types
+        ]
+        unsupported_attachments = [
+            a for a in attachments if a.get("mime_type") not in supported_types
+        ]
+
+        # Process supported attachments with the LLM's custom method
+
+        if supported_attachments:
+            logger.info(
+                f"Processing {len(supported_attachments)} supported attachments"
+            )
+            messages = agent.llm.prepare_messages_with_attachments(
+                messages, supported_attachments
+            )
+        # Process unsupported attachments with default method
+
+        if unsupported_attachments:
+            logger.info(
+                f"Processing {len(unsupported_attachments)} unsupported attachments"
+            )
+            messages = self._append_unsupported_attachments(
+                messages, unsupported_attachments
+            )
+        return messages
+
+    def _append_unsupported_attachments(
+        self, messages: List[Dict], attachments: List[Dict]
+    ) -> List[Dict]:
+        """
+        Default method to append unsupported attachment content to system prompt.
+
+        Args:
+            messages: Current messages
+            attachments: List of unsupported attachments
+
+        Returns:
+            Updated messages list
+        """
+        prepared_messages = messages.copy()
+        attachment_texts = []
+
+        for attachment in attachments:
+            logger.info(f"Adding attachment {attachment.get('id')} to context")
+            if "content" in attachment:
+                attachment_texts.append(
+                    f"Attached file content:\n\n{attachment['content']}"
+                )
+        if attachment_texts:
+            combined_text = "\n\n".join(attachment_texts)
+
+            system_msg = next(
+                (msg for msg in prepared_messages if msg.get("role") == "system"),
+                {"role": "system", "content": ""},
+            )
+
+            if system_msg not in prepared_messages:
+                prepared_messages.insert(0, system_msg)
+            system_msg["content"] += f"\n\n{combined_text}"
+        return prepared_messages
+
+    def handle_tool_calls(
+        self, agent, tool_calls: List[ToolCall], tools_dict: Dict, messages: List[Dict]
+    ) -> Generator:
+        """
+        Execute tool calls and update conversation history.
+
+        Args:
+            agent: The agent instance
+            tool_calls: List of tool calls to execute
+            tools_dict: Available tools dictionary
+            messages: Current conversation history
+
+        Returns:
+            Updated messages list
+        """
+        updated_messages = messages.copy()
+
+        for call in tool_calls:
+            try:
+                self.tool_calls.append(call)
+                tool_executor_gen = agent._execute_tool_action(tools_dict, call)
+                while True:
+                    try:
+                        yield next(tool_executor_gen)
+                    except StopIteration as e:
+                        tool_response, call_id = e.value
+                        break
+
+                updated_messages.append(
+                    {
+                        "role": "assistant",
+                        "content": [
+                            {
+                                "function_call": {
+                                    "name": call.name,
+                                    "args": call.arguments,
+                                    "call_id": call_id,
+                                }
+                            }
+                        ],
+                    }
+                )
+
+                updated_messages.append(self.create_tool_message(call, tool_response))
+
+            except Exception as e:
+                logger.error(f"Error executing tool: {str(e)}", exc_info=True)
+                updated_messages.append(
+                    {
+                        "role": "tool",
+                        "content": f"Error executing tool: {str(e)}",
+                        "tool_call_id": call.id,
+                    }
+                )
+
+        return updated_messages
+
+    def handle_non_streaming(
+        self, agent, response: Any, tools_dict: Dict, messages: List[Dict]
+    ) -> Generator:
+        """
+        Handle non-streaming response flow.
+
+        Args:
+            agent: The agent instance
+            response: Current LLM response
+            tools_dict: Available tools dictionary
+            messages: Conversation history
+
+        Returns:
+            Final response after processing all tool calls
+        """
+        parsed = self.parse_response(response)
+        self.llm_calls.append(build_stack_data(agent.llm))
+
+        while parsed.requires_tool_call:
+            tool_handler_gen = self.handle_tool_calls(
+                agent, parsed.tool_calls, tools_dict, messages
+            )
+            while True:
+                try:
+                    yield next(tool_handler_gen)
+                except StopIteration as e:
+                    messages = e.value
+                    break
+
+            response = agent.llm.gen(
+                model=agent.gpt_model, messages=messages, tools=agent.tools
+            )
+            parsed = self.parse_response(response)
+            self.llm_calls.append(build_stack_data(agent.llm))
+
+        return parsed.content
+
+    def handle_streaming(
+        self, agent, response: Any, tools_dict: Dict, messages: List[Dict]
+    ) -> Generator:
+        """
+        Handle streaming response flow.
+
+        Args:
+            agent: The agent instance
+            response: Current LLM response
+            tools_dict: Available tools dictionary
+            messages: Conversation history
+
+        Yields:
+            Streaming response chunks
+        """
+        buffer = ""
+        tool_calls = {}
+
+        for chunk in self._iterate_stream(response):
+            if isinstance(chunk, str):
+                yield chunk
+                continue
+            parsed = self.parse_response(chunk)
+
+            if parsed.tool_calls:
+                for call in parsed.tool_calls:
+                    if call.index not in tool_calls:
+                        tool_calls[call.index] = call
+                    else:
+                        existing = tool_calls[call.index]
+                        if call.id:
+                            existing.id = call.id
+                        if call.name:
+                            existing.name = call.name
+                        if call.arguments:
+                            existing.arguments += call.arguments
+            if parsed.finish_reason == "tool_calls":
+                tool_handler_gen = self.handle_tool_calls(
+                    agent, list(tool_calls.values()), tools_dict, messages
+                )
+                while True:
+                    try:
+                        yield next(tool_handler_gen)
+                    except StopIteration as e:
+                        messages = e.value
+                        break
+                tool_calls = {}
+
+                response = agent.llm.gen_stream(
+                    model=agent.gpt_model, messages=messages, tools=agent.tools
+                )
+                self.llm_calls.append(build_stack_data(agent.llm))
+
+                yield from self.handle_streaming(agent, response, tools_dict, messages)
+                return
+            if parsed.content:
+                buffer += parsed.content
+                yield buffer
+                buffer = ""
+            if parsed.finish_reason == "stop":
+                return

application/llm/handlers/google.py

@@ -0,0 +1,78 @@
+import uuid
+from typing import Any, Dict, Generator
+
+from application.llm.handlers.base import LLMHandler, LLMResponse, ToolCall
+
+
+class GoogleLLMHandler(LLMHandler):
+    """Handler for Google's GenAI API."""
+
+    def parse_response(self, response: Any) -> LLMResponse:
+        """Parse Google response into standardized format."""
+
+        if isinstance(response, str):
+            return LLMResponse(
+                content=response,
+                tool_calls=[],
+                finish_reason="stop",
+                raw_response=response,
+            )
+
+        if hasattr(response, "candidates"):
+            parts = response.candidates[0].content.parts if response.candidates else []
+            tool_calls = [
+                ToolCall(
+                    id=str(uuid.uuid4()),
+                    name=part.function_call.name,
+                    arguments=part.function_call.args,
+                )
+                for part in parts
+                if hasattr(part, "function_call") and part.function_call is not None
+            ]
+
+            content = " ".join(
+                part.text
+                for part in parts
+                if hasattr(part, "text") and part.text is not None
+            )
+            return LLMResponse(
+                content=content,
+                tool_calls=tool_calls,
+                finish_reason="tool_calls" if tool_calls else "stop",
+                raw_response=response,
+            )
+
+        else:
+            tool_calls = []
+            if hasattr(response, "function_call"):
+                tool_calls.append(
+                    ToolCall(
+                        id=str(uuid.uuid4()),
+                        name=response.function_call.name,
+                        arguments=response.function_call.args,
+                    )
+                )
+            return LLMResponse(
+                content=response.text if hasattr(response, "text") else "",
+                tool_calls=tool_calls,
+                finish_reason="tool_calls" if tool_calls else "stop",
+                raw_response=response,
+            )
+
+    def create_tool_message(self, tool_call: ToolCall, result: Any) -> Dict:
+        """Create Google-style tool message."""
+        from google.genai import types
+
+        return {
+            "role": "tool",
+            "content": [
+                types.Part.from_function_response(
+                    name=tool_call.name, response={"result": result}
+                ).to_json_dict()
+            ],
+        }
+
+    def _iterate_stream(self, response: Any) -> Generator:
+        """Iterate through Google streaming response."""
+        for chunk in response:
+            yield chunk

application/llm/handlers/handler_creator.py

@@ -0,0 +1,18 @@
+from application.llm.handlers.base import LLMHandler
+from application.llm.handlers.google import GoogleLLMHandler
+from application.llm.handlers.openai import OpenAILLMHandler
+
+
+class LLMHandlerCreator:
+    handlers = {
+        "openai": OpenAILLMHandler,
+        "google": GoogleLLMHandler,
+        "default": OpenAILLMHandler,
+    }
+
+    @classmethod
+    def create_handler(cls, llm_type: str, *args, **kwargs) -> LLMHandler:
+        handler_class = cls.handlers.get(llm_type.lower())
+        if not handler_class:
+            handler_class = OpenAILLMHandler
+        return handler_class(*args, **kwargs)

application/llm/handlers/openai.py

@@ -0,0 +1,57 @@
+from typing import Any, Dict, Generator
+
+from application.llm.handlers.base import LLMHandler, LLMResponse, ToolCall
+
+
+class OpenAILLMHandler(LLMHandler):
+    """Handler for OpenAI API."""
+
+    def parse_response(self, response: Any) -> LLMResponse:
+        """Parse OpenAI response into standardized format."""
+        if isinstance(response, str):
+            return LLMResponse(
+                content=response,
+                tool_calls=[],
+                finish_reason="stop",
+                raw_response=response,
+            )
+
+        message = getattr(response, "message", None) or getattr(response, "delta", None)
+
+        tool_calls = []
+        if hasattr(message, "tool_calls"):
+            tool_calls = [
+                ToolCall(
+                    id=getattr(tc, "id", ""),
+                    name=getattr(tc.function, "name", ""),
+                    arguments=getattr(tc.function, "arguments", ""),
+                    index=getattr(tc, "index", None),
+                )
+                for tc in message.tool_calls or []
+            ]
+        return LLMResponse(
+            content=getattr(message, "content", ""),
+            tool_calls=tool_calls,
+            finish_reason=getattr(response, "finish_reason", ""),
+            raw_response=response,
+        )
+
+    def create_tool_message(self, tool_call: ToolCall, result: Any) -> Dict:
+        """Create OpenAI-style tool message."""
+        return {
+            "role": "tool",
+            "content": [
+                {
+                    "function_response": {
+                        "name": tool_call.name,
+                        "response": {"result": result},
+                        "call_id": tool_call.id,
+                    }
+                }
+            ],
+        }
+
+    def _iterate_stream(self, response: Any) -> Generator:
+        """Iterate through OpenAI streaming response."""
+        for chunk in response:
+            yield chunk

application/llm/llama_cpp.py

@@ -2,6 +2,7 @@ from application.llm.base import BaseLLM
 from application.core.settings import settings
 import threading
 
+
 class LlamaSingleton:
     _instances = {}
     _lock = threading.Lock()  # Add a lock for thread synchronization
@@ -29,7 +30,7 @@ class LlamaCpp(BaseLLM):
         self,
         api_key=None,
         user_api_key=None,
-        llm_name=settings.MODEL_PATH,
+        llm_name=settings.LLM_PATH,
         *args,
         **kwargs,
     ):
@@ -42,14 +43,18 @@ class LlamaCpp(BaseLLM):
         context = messages[0]["content"]
         user_question = messages[-1]["content"]
         prompt = f"### Instruction \n {user_question} \n ### Context \n {context} \n ### Answer \n"
-        result = LlamaSingleton.query_model(self.llama, prompt, max_tokens=150, echo=False)
+        result = LlamaSingleton.query_model(
+            self.llama, prompt, max_tokens=150, echo=False
+        )
         return result["choices"][0]["text"].split("### Answer \n")[-1]
 
     def _raw_gen_stream(self, baseself, model, messages, stream=True, **kwargs):
         context = messages[0]["content"]
         user_question = messages[-1]["content"]
         prompt = f"### Instruction \n {user_question} \n ### Context \n {context} \n ### Answer \n"
-        result = LlamaSingleton.query_model(self.llama, prompt, max_tokens=150, echo=False, stream=stream)
+        result = LlamaSingleton.query_model(
+            self.llama, prompt, max_tokens=150, echo=False, stream=stream
+        )
         for item in result:
             for choice in item["choices"]:
-                yield choice["text"]
+                yield choice["text"]

application/prompts/react_planning_prompt.txt

@@ -1,10 +1,13 @@
 You are an AI assistant and talk like you're thinking out loud. Given the following query, outline a concise thought process that includes key steps and considerations necessary for effective analysis and response. Avoid pointwise formatting. The goal is to break down the query into manageable components without excessive detail, focusing on clarity and logical progression.
 
-Include the following elements in your thought process:
+Include the following elements in your thought and execution process:
 1. Identify the main objective of the query.
 2. Determine any relevant context or background information needed to understand the query.
 3. List potential approaches or methods to address the query.
 4. Highlight any critical factors or constraints that may influence the outcome.
+5. Plan with available tools to help you with the analysis but dont execute them. Tools will be executed by another AI.
 
 Query: {query}  
-Summaries: {summaries}
+Summaries: {summaries}
+Prompt: {prompt}
+Observations(potentially previous tool calls): {observations}

application/requirements.txt

@@ -46,7 +46,7 @@ pandas==2.2.3
 openpyxl==3.1.5
 pathable==0.4.4
 pillow==11.1.0
-portalocker==3.1.1
+portalocker>=2.7.0,<3.0.0
 prance==23.6.21.0
 prompt-toolkit==3.0.51
 protobuf==5.29.3
@@ -62,7 +62,7 @@ python-dotenv==1.0.1
 python-jose==3.4.0
 python-pptx==1.0.2
 redis==5.2.1
-referencing==0.36.2
+referencing>=0.28.0,<0.31.0
 regex==2024.11.6
 requests==2.32.3
 retry==0.9.2

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.MODEL_TOKEN_LIMITS.get(
-                self.gpt_model, settings.DEFAULT_MAX_HISTORY
-            )
-            else settings.MODEL_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_NAME == "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_NAME,
-            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/classic_rag.py

@@ -16,7 +16,7 @@ class ClassicRAG(BaseRetriever):
         token_limit=150,
         gpt_model="docsgpt",
         user_api_key=None,
-        llm_name=settings.LLM_NAME,
+        llm_name=settings.LLM_PROVIDER,
         api_key=settings.API_KEY,
         decoded_token=None,
     ):
@@ -28,10 +28,10 @@ class ClassicRAG(BaseRetriever):
         self.token_limit = (
             token_limit
             if token_limit
-            < settings.MODEL_TOKEN_LIMITS.get(
+            < settings.LLM_TOKEN_LIMITS.get(
                 self.gpt_model, settings.DEFAULT_MAX_HISTORY
             )
-            else settings.MODEL_TOKEN_LIMITS.get(
+            else settings.LLM_TOKEN_LIMITS.get(
                 self.gpt_model, settings.DEFAULT_MAX_HISTORY
             )
         )
@@ -44,8 +44,8 @@ class ClassicRAG(BaseRetriever):
             user_api_key=self.user_api_key,
             decoded_token=decoded_token,
         )
-        self.question = self._rephrase_query()
         self.vectorstore = source["active_docs"] if "active_docs" in source else None
+        self.question = self._rephrase_query()
         self.decoded_token = decoded_token
 
     def _rephrase_query(self):
@@ -53,6 +53,8 @@ class ClassicRAG(BaseRetriever):
             not self.original_question
             or not self.chat_history
             or self.chat_history == []
+            or self.chunks == 0
+            or self.vectorstore is None
         ):
             return self.original_question
 
@@ -77,7 +79,7 @@ class ClassicRAG(BaseRetriever):
             return self.original_question
 
     def _get_data(self):
-        if self.chunks == 0:
+        if self.chunks == 0 or self.vectorstore is None:
             docs = []
         else:
             docsearch = VectorCreator.create_vectorstore(

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.MODEL_TOKEN_LIMITS.get(
-                self.gpt_model, settings.DEFAULT_MAX_HISTORY
-            )
-            else settings.MODEL_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_NAME == "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_NAME,
-            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,20 +1,16 @@
 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
+        "classic": ClassicRAG,
+        "default": ClassicRAG,
     }
 
     @classmethod
     def create_retriever(cls, type, *args, **kwargs):
-        retiever_class = cls.retrievers.get(type.lower())
+        retriever_type = (type or "default").lower()
+        retiever_class = cls.retrievers.get(retriever_type)
         if not retiever_class:
             raise ValueError(f"No retievers class found for type {type}")
-        return retiever_class(*args, **kwargs)
+        return retiever_class(*args, **kwargs)

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):
@@ -74,8 +103,8 @@ def limit_chat_history(history, max_token_limit=None, gpt_model="docsgpt"):
         max_token_limit
         if max_token_limit
         and max_token_limit
-        < settings.MODEL_TOKEN_LIMITS.get(gpt_model, settings.DEFAULT_MAX_HISTORY)
-        else settings.MODEL_TOKEN_LIMITS.get(gpt_model, settings.DEFAULT_MAX_HISTORY)
+        < settings.LLM_TOKEN_LIMITS.get(gpt_model, settings.DEFAULT_MAX_HISTORY)
+        else settings.LLM_TOKEN_LIMITS.get(gpt_model, settings.DEFAULT_MAX_HISTORY)
     )
 
     if not history:
@@ -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/vectorstore/faiss.py

@@ -32,22 +32,26 @@ class FaissStore(BaseVectorStore):
                 with tempfile.TemporaryDirectory() as temp_dir:
                     faiss_path = f"{self.path}/index.faiss"
                     pkl_path = f"{self.path}/index.pkl"
-                    
-                    if not self.storage.file_exists(faiss_path) or not self.storage.file_exists(pkl_path):
-                        raise FileNotFoundError(f"Index files not found in storage at {self.path}")
-                    
+
+                    if not self.storage.file_exists(
+                        faiss_path
+                    ) or not self.storage.file_exists(pkl_path):
+                        raise FileNotFoundError(
+                            f"Index files not found in storage at {self.path}"
+                        )
+
                     faiss_file = self.storage.get_file(faiss_path)
                     pkl_file = self.storage.get_file(pkl_path)
-                    
+
                     local_faiss_path = os.path.join(temp_dir, "index.faiss")
                     local_pkl_path = os.path.join(temp_dir, "index.pkl")
-                    
-                    with open(local_faiss_path, 'wb') as f:
+
+                    with open(local_faiss_path, "wb") as f:
                         f.write(faiss_file.read())
-                    
-                    with open(local_pkl_path, 'wb') as f:
+
+                    with open(local_pkl_path, "wb") as f:
                         f.write(pkl_file.read())
-                    
+
                     self.docsearch = FAISS.load_local(
                         temp_dir, self.embeddings, allow_dangerous_deserialization=True
                     )

application/worker.py

@@ -143,8 +143,8 @@ def run_agent_logic(agent_config, input_data):
         agent = AgentCreator.create_agent(
             agent_type,
             endpoint="webhook",
-            llm_name=settings.LLM_NAME,
-            gpt_model=settings.MODEL_NAME,
+            llm_name=settings.LLM_PROVIDER,
+            gpt_model=settings.LLM_NAME,
             api_key=settings.API_KEY,
             user_api_key=user_api_key,
             prompt=prompt,
@@ -159,7 +159,7 @@ def run_agent_logic(agent_config, input_data):
             prompt=prompt,
             chunks=chunks,
             token_limit=settings.DEFAULT_MAX_HISTORY,
-            gpt_model=settings.MODEL_NAME,
+            gpt_model=settings.LLM_NAME,
             user_api_key=user_api_key,
             decoded_token=decoded_token,
         )
@@ -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,
     }
 
@@ -449,7 +452,7 @@ def attachment_worker(self, file_info, user):
     try:
         self.update_state(state="PROGRESS", meta={"current": 10})
         storage = StorageCreator.get_storage()
-        
+
         self.update_state(
             state="PROGRESS", meta={"current": 30, "status": "Processing content"}
         )
@@ -458,9 +461,11 @@ def attachment_worker(self, file_info, user):
             relative_path,
             lambda local_path, **kwargs: SimpleDirectoryReader(
                 input_files=[local_path], exclude_hidden=True, errors="ignore"
-            ).load_data()[0].text
+            )
+            .load_data()[0]
+            .text,
         )
-            
+
         token_count = num_tokens_from_string(content)
 
         self.update_state(
@@ -475,6 +480,7 @@ def attachment_worker(self, file_info, user):
                 "_id": doc_id,
                 "user": user,
                 "path": relative_path,
+                "filename": filename,
                 "content": content,
                 "token_count": token_count,
                 "mime_type": mime_type,
@@ -487,9 +493,7 @@ def attachment_worker(self, file_info, user):
             f"Stored attachment with ID: {attachment_id}", extra={"user": user}
         )
 
-        self.update_state(
-            state="PROGRESS", meta={"current": 100, "status": "Complete"}
-        )
+        self.update_state(state="PROGRESS", meta={"current": 100, "status": "Complete"})
 
         return {
             "filename": filename,

deployment/docker-compose-dev.yaml

@@ -1,3 +1,4 @@
+name: docsgpt-oss
 services:
 
   redis:

deployment/docker-compose.yaml

@@ -1,3 +1,4 @@
+name: docsgpt-oss
 services:
   frontend:
     build: ../frontend
@@ -17,19 +18,19 @@ services:
     environment:
       - API_KEY=$API_KEY
       - EMBEDDINGS_KEY=$API_KEY
+      - LLM_PROVIDER=$LLM_PROVIDER
       - LLM_NAME=$LLM_NAME
       - CELERY_BROKER_URL=redis://redis:6379/0
       - CELERY_RESULT_BACKEND=redis://redis:6379/1
       - MONGO_URI=mongodb://mongo:27017/docsgpt
       - CACHE_REDIS_URL=redis://redis:6379/2
       - OPENAI_BASE_URL=$OPENAI_BASE_URL
-      - MODEL_NAME=$MODEL_NAME
     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
@@ -41,6 +42,7 @@ services:
     environment:
       - API_KEY=$API_KEY
       - EMBEDDINGS_KEY=$API_KEY
+      - LLM_PROVIDER=$LLM_PROVIDER
       - LLM_NAME=$LLM_NAME
       - CELERY_BROKER_URL=redis://redis:6379/0
       - CELERY_RESULT_BACKEND=redis://redis:6379/1
@@ -48,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

deployment/k8s/docsgpt-secrets.yaml

@@ -4,7 +4,7 @@ metadata:
   name: docsgpt-secrets
 type: Opaque
 data:
-  LLM_NAME: ZG9jc2dwdA==
+  LLM_PROVIDER: ZG9jc2dwdA==
   INTERNAL_KEY: aW50ZXJuYWw=
   CELERY_BROKER_URL: cmVkaXM6Ly9yZWRpcy1zZXJ2aWNlOjYzNzkvMA==
   CELERY_RESULT_BACKEND: cmVkaXM6Ly9yZWRpcy1zZXJ2aWNlOjYzNzkvMA==

docs/components/ToolCards.jsx

@@ -0,0 +1,117 @@
+import Image from 'next/image';
+
+const iconMap = {
+    'API Tool': '/toolIcons/tool_api_tool.svg',
+    'Brave Search Tool': '/toolIcons/tool_brave.svg',
+    'Cryptoprice Tool': '/toolIcons/tool_cryptoprice.svg',
+    'Ntfy Tool': '/toolIcons/tool_ntfy.svg',
+    'PostgreSQL Tool': '/toolIcons/tool_postgres.svg',
+    'Read Webpage Tool': '/toolIcons/tool_read_webpage.svg',
+    'Telegram Tool': '/toolIcons/tool_telegram.svg'
+};
+
+
+export function ToolCards({ items }) {
+    return (
+        <>
+            <div className="tool-cards">
+                {items.map(({ title, link, description }) => {
+                    const isExternal = link.startsWith('https://');
+                    const iconSrc = iconMap[title] || '/default-icon.png'; // Default icon if not found
+
+                    return (
+                        <div
+                            key={title}
+                            className={`card${isExternal ? ' external' : ''}`}
+                        >
+                            <a href={link} target={isExternal ? '_blank' : undefined} rel="noopener noreferrer" className="card-link-wrapper">
+                                <div className="card-icon-container">
+                                    {iconSrc && <div className="card-icon"><Image src={iconSrc} alt={title} width={32} height={32} /></div>} {/* Reduced icon size */}
+                                </div>
+                                <h3 className="card-title">{title}</h3>
+                                {description && <p className="card-description">{description}</p>}
+                                {/* Card URL element removed from here */}
+                            </a>
+                        </div>
+                    );
+                })}
+            </div>
+
+            <style jsx>{`
+               .tool-cards {
+                    margin-top: 24px;
+                    display: grid;
+                    grid-template-columns: 1fr;
+                    gap: 16px;
+                }
+                @media (min-width: 768px) {
+                    .tool-cards {
+                        grid-template-columns: 1fr 1fr; /* Keeps two columns on wider screens */
+                    }
+                }
+                .card {
+                    background-color: #222222;
+                    border-radius: 8px;
+                    padding: 16px; /* Existing padding */
+                    transition: background-color 0.3s;
+                    position: relative;
+                    color: #ffffff;
+                    display: flex; /* Using flex to help with alignment */
+                    flex-direction: column;
+                    /* align-items: center; // Alignment for items inside card-link-wrapper is better */
+                    /* justify-content: center; // We want content to flow from top */
+                    height: 100%; /* Fill the height of the grid cell, ensures cards in a row are same height */
+                }
+                .card:hover {
+                    background-color: #333333;
+                }
+                .card.external::after {
+                    content: "↗";
+                    position: absolute;
+                    top: 12px;
+                    right: 12px;
+                    color: #ffffff;
+                    font-size: 0.7em;
+                    opacity: 0.8;
+                }
+                .card-link-wrapper {
+                    display: flex;
+                    flex-direction: column;
+                    align-items:center; /* Centers icon, title, description horizontally */
+                    text-align: center; /* Ensures text within p and h3 is centered */
+                    color: inherit;
+                    text-decoration: none;
+                    width:100%;
+                    height: 100%; /* Make the link wrapper take full card height */
+                    justify-content: flex-start; /* Align content to the top */
+                }
+               .card-icon-container{
+                    display:flex;
+                    justify-content:center;
+                    width: 100%;
+                    margin-top: 8px; /* Added some margin at the top if needed */
+                    margin-bottom: 12px; /* Increased space between icon and title */
+               }
+                .card-icon {
+                   display: block;
+                   /* margin: 0 auto; // Center handled by card-icon-container */
+                }
+                .card-title {
+                    font-weight: 600;
+                    margin-bottom: 8px; /* Increased space below title */
+                    font-size: 16px; /* Consider increasing slightly if descriptions are longer e.g. 17px or 18px */
+                    color: #f0f0f0;
+                }
+                .card-description {
+                    /* margin-bottom: 0; // Original value */
+                    font-size: 14px; /* Slightly increased font size for better readability */
+                    color: #aaaaaa;
+                    line-height: 1.5; /* Slightly increased line height */
+                    flex-grow: 1; /* Allows description to take available space */
+                    overflow-y: auto; /* Adds scroll if description is too long, though ideally content fits */
+                    padding-bottom: 8px; /* Add some padding at the bottom of the description area */
+                }
+            `}</style>
+        </>
+    );
+}

docs/package.json

@@ -7,8 +7,8 @@
   "license": "MIT",
   "dependencies": {
     "@vercel/analytics": "^1.1.1",
-    "docsgpt-react": "^0.5.0",
-    "next": "^14.2.26",
+    "docsgpt-react": "^0.5.1",
+    "next": "^15.3.3",
     "nextra": "^2.13.2",
     "nextra-theme-docs": "^2.13.2",
     "react": "^18.2.0",

docs/pages/Agents/_meta.json

@@ -0,0 +1,14 @@
+{
+  "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/basics.mdx

@@ -0,0 +1,109 @@
+---
+title: Understanding DocsGPT Agents
+description: Learn about DocsGPT Agents, their types, how to create and manage them, and how they can enhance your interaction with documents and tools.
+---
+
+import { Callout } from 'nextra/components';
+import Image from 'next/image'; // Assuming you might want to embed images later, like the ones you uploaded.
+
+# Understanding DocsGPT Agents 🤖
+
+DocsGPT Agents are advanced, configurable AI entities designed to go beyond simple question-answering. They act as specialized assistants or workers that combine instructions (prompts), knowledge (document sources), and capabilities (tools) to perform a wide range of tasks, automate workflows, and provide tailored interactions.
+
+Think of an Agent as a pre-configured version of DocsGPT, fine-tuned for a specific purpose, such as classifying documents, responding to new form submissions, or validating emails.
+
+## Why Use Agents?
+
+* **Personalization:** Create AI assistants that behave and respond according to specific roles or personas.
+* **Task Specialization:** Design agents focused on particular tasks, like customer support, data extraction, or content generation.
+* **Knowledge Integration:** Equip agents with specific document sources, making them experts in particular domains.
+* **Tool Utilization:** Grant agents access to various tools, allowing them to interact with external services, fetch live data, or perform actions.
+* **Automation:** Automate repetitive tasks by defining an agent's behavior and integrating it via webhooks or other means.
+* **Shareability:** Share your custom-configured agents with others or use agents shared with you.
+
+Agents provide a more structured and powerful way to leverage LLMs compared to a standard chat interface, as they come with a pre-defined context, instruction set, and set of capabilities.
+
+## Core Components of an Agent
+
+When you create or configure an agent, you'll work with these key components:  
+
+**Meta:**
+    * **Agent Name:** A user-friendly name to identify the agent (e.g., "Support Ticket Classifier," "Product Spec Expert").
+    * **Describe your agent:** A brief description for you or users to understand the agent's purpose.
+
+**Source:**
+    * **Select source:** The knowledge base for the agent. You can select from previously uploaded documents or data sources. This is what the agent will "know."
+    * **Chunks per query:** A numerical value determining how many relevant text chunks from the selected source are sent to the LLM with each query. This helps manage context length and relevance.
+
+**Prompt:**
+The main set of instructions or system [prompt](/Guides/Customising-prompts) that defines the agent's persona, objectives, constraints, and how it should behave or respond.
+
+**Tools:** A selection of available [DocsGPT Tools](/Tools/basics) that the agent can use to perform actions or access external information.
+
+**Agent type:** The underlying operational logic or architecture the agent uses. DocsGPT supports different types of agents, each suited for different kinds of tasks.
+
+## Understanding Agent Types
+
+DocsGPT allows for different "types" of agents, each with a distinct way of processing information and generating responses. The code for these agent types can be found in the `application/agents/` directory.
+
+### 1. Classic Agent (`classic_agent.py`)
+
+**How it works:** The Classic Agent follows a traditional Retrieval Augmented Generation (RAG) approach.
+    1.  **Retrieve:** When a query is made, it first searches the selected Source documents for relevant information.
+    2.  **Augment:** This retrieved data is then added to the context, along with the main Prompt and the user's query.
+    3.  **Generate:** The LLM generates a response based on this augmented context. It can also utilize any configured tools if the LLM decides they are necessary.
+
+**Best for:**
+    * Direct question-answering over a specific set of documents.
+    * Tasks where the primary goal is to extract and synthesize information from the provided sources.
+    * Simpler tool integrations where the decision to use a tool is straightforward.
+
+### 2. ReAct Agent (`react_agent.py`)
+
+**How it works:** The ReAct Agent employs a more sophisticated "Reason and Act" framework. This involves a multi-step process:
+    1.  **Plan (Thought):** Based on the query, its prompt, and available tools/sources, the LLM first generates a plan or a sequence of thoughts on how to approach the problem. You might see this output as a "thought" process during generation.
+    2.  **Act:** The agent then executes actions based on this plan. This might involve querying its sources, using a tool, or performing internal reasoning.
+    3.  **Observe:** It gathers observations from the results of its actions (e.g., data from a tool, snippets from documents).
+    4.  **Repeat (if necessary):** Steps 2 and 3 can be repeated as the agent refines its approach or gathers more information.
+    5.  **Conclude:** Finally, it generates the final answer based on the initial query and all accumulated observations.
+
+**Best for:**
+    * More complex tasks that require multi-step reasoning or problem-solving.
+    * Scenarios where the agent needs to dynamically decide which tools to use and in what order, based on intermediate results.
+    * Interactive tasks where the agent needs to "think" through a problem.
+
+<Callout type="info">
+Developers looking to introduce new agent architectures can explore the `application/agents/` directory. `classic_agent.py` and `react_agent.py` serve as excellent starting points, demonstrating how to inherit from `BaseAgent` and structure agent logic.
+</Callout>
+
+## Navigating and Managing Agents in DocsGPT
+
+You can easily access and manage your agents through the DocsGPT user interface. Recently used agents appear at the top of the left sidebar for quick access. Below these, the "Manage Agents" button will take you to the main Agents page.
+
+### Creating a New Agent
+
+1.  Navigate to the "Agents" page.
+2.  Click the **"New Agent"** button.
+3.  You will be presented with the "New Agent" configuration screen:
+
+<Image
+  src="/new-agent.png"
+  alt="API Tool configuration example for phone validation"
+  width={800}
+  height={450}
+  style={{ margin: '1em auto', display: 'block', borderRadius: '8px' }}
+/>
+
+4.  Fill in the fields as described in the "Core Components of an Agent" section.
+5.  Once configured, you can **"Save Draft"** to continue editing later or **"Publish"** to make the agent active.
+
+## Interacting with and Editing Agents
+
+Once an agent is created, you can:
+
+* **Chat with it:** Select the agent to start an interaction.
+* **View Logs:** Access usage statistics, monitor token consumption per interaction, and review user message feedbacks. This is crucial for understanding how your agent is being used and performing.
+* **Edit an Agent:**
+    * Modify any of its configuration settings (name, description, source, prompt, tools, type).
+    * **Generate a Public Link:** From the edit screen, you can create a shareable public link that allows others to import and use your agent.
+    * **Get a Webhook URL:** You can also obtain a Webhook URL for the agent. This allows external applications or services to trigger the agent and receive responses programmatically, enabling powerful integrations and automations.

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>

docs/pages/Deploying/Docker-Deploying.mdx

@@ -37,7 +37,7 @@ The fastest way to try out DocsGPT is by using the public API endpoint. This req
     Open the `.env` file and add the following lines:
 
     ```
-    LLM_NAME=docsgpt
+    LLM_PROVIDER=docsgpt
     VITE_API_STREAMING=true
     ```
 
@@ -93,16 +93,16 @@ There are two Ollama optional files:
 
 3.  **Pull the Ollama Model:**
 
-    **Crucially, after launching with Ollama, you need to pull the desired model into the Ollama container.**  Find the `MODEL_NAME` you configured in your `.env` file (e.g., `llama3.2:1b`). Then execute the following command to pull the model *inside* the running Ollama container:
+    **Crucially, after launching with Ollama, you need to pull the desired model into the Ollama container.**  Find the `LLM_NAME` you configured in your `.env` file (e.g., `llama3.2:1b`). Then execute the following command to pull the model *inside* the running Ollama container:
 
     ```bash
-    docker compose -f deployment/docker-compose.yaml -f deployment/optional/docker-compose.optional.ollama-cpu.yaml exec -it ollama ollama pull <MODEL_NAME>
+    docker compose -f deployment/docker-compose.yaml -f deployment/optional/docker-compose.optional.ollama-cpu.yaml exec -it ollama ollama pull <LLM_NAME>
     ```
     or (for GPU):
      ```bash
-    docker compose -f deployment/docker-compose.yaml -f deployment/optional/docker-compose.optional.ollama-gpu.yaml exec -it ollama ollama pull <MODEL_NAME>
+    docker compose -f deployment/docker-compose.yaml -f deployment/optional/docker-compose.optional.ollama-gpu.yaml exec -it ollama ollama pull <LLM_NAME>
     ```
-    Replace `<MODEL_NAME>` with the actual model name from your `.env` file.
+    Replace `<LLM_NAME>` with the actual model name from your `.env` file.
 
 4.  **Access DocsGPT in your browser:**
 

docs/pages/Deploying/DocsGPT-Settings.mdx

@@ -20,9 +20,9 @@ The easiest and recommended way to configure basic settings is by using a `.env`
 **Example `.env` file structure:**
 
 ```
-LLM_NAME=openai
+LLM_PROVIDER=openai
 API_KEY=YOUR_OPENAI_API_KEY
-MODEL_NAME=gpt-4o
+LLM_NAME=gpt-4o
 ```
 
 ### 2. Configuration via `settings.py` file (Advanced)
@@ -37,7 +37,7 @@ While modifying `settings.py` offers more flexibility, it's generally recommende
 
 Here are some of the most fundamental settings you'll likely want to configure:
 
-- **`LLM_NAME`**: This setting determines which Large Language Model (LLM) provider DocsGPT will use.  It tells DocsGPT which API to interact with.
+- **`LLM_PROVIDER`**: This setting determines which Large Language Model (LLM) provider DocsGPT will use.  It tells DocsGPT which API to interact with.
 
     - **Common values:**
         - `docsgpt`:  Use the DocsGPT Public API Endpoint (simple and free, as offered in `setup.sh` option 1).
@@ -49,11 +49,11 @@ Here are some of the most fundamental settings you'll likely want to configure:
         - `azure_openai`: Use Azure OpenAI Service.
         - `openai` (when using local inference engines like Ollama, Llama.cpp, TGI, etc.):  This signals DocsGPT to use an OpenAI-compatible API format, even if the actual LLM is running locally.
 
-- **`MODEL_NAME`**:  Specifies the specific model to use from the chosen LLM provider. The available models depend on the `LLM_NAME` you've selected.
+- **`LLM_NAME`**:  Specifies the specific model to use from the chosen LLM provider. The available models depend on the `LLM_PROVIDER` you've selected.
 
     - **Examples:**
-        - For `LLM_NAME=openai`: `gpt-4o`
-        - For `LLM_NAME=google`: `gemini-2.0-flash`
+        - For `LLM_PROVIDER=openai`: `gpt-4o`
+        - For `LLM_PROVIDER=google`: `gemini-2.0-flash`
         - For local models (e.g., Ollama): `llama3.2:1b` (or any model name available in your setup).
 
 - **`EMBEDDINGS_NAME`**:  This setting defines which embedding model DocsGPT will use to generate vector embeddings for your documents. Embeddings are numerical representations of text that allow DocsGPT to understand the semantic meaning of your documents for efficient search and retrieval.
@@ -63,7 +63,7 @@ Here are some of the most fundamental settings you'll likely want to configure:
 
 - **`API_KEY`**:  Required for most cloud-based LLM providers.  This is your authentication key to access the LLM provider's API. You'll need to obtain this key from your chosen provider's platform.
 
-- **`OPENAI_BASE_URL`**:  Specifically used when `LLM_NAME` is set to `openai` but you are connecting to a local inference engine (like Ollama, Llama.cpp, etc.) that exposes an OpenAI-compatible API.  This setting tells DocsGPT where to find your local LLM server.
+- **`OPENAI_BASE_URL`**:  Specifically used when `LLM_PROVIDER` is set to `openai` but you are connecting to a local inference engine (like Ollama, Llama.cpp, etc.) that exposes an OpenAI-compatible API.  This setting tells DocsGPT where to find your local LLM server.
 
 ## Configuration Examples
 
@@ -74,9 +74,9 @@ Let's look at some concrete examples of how to configure these settings in your
 To use OpenAI's `gpt-4o` model, you would configure your `.env` file like this:
 
 ```
-LLM_NAME=openai
+LLM_PROVIDER=openai
 API_KEY=YOUR_OPENAI_API_KEY  # Replace with your actual OpenAI API key
-MODEL_NAME=gpt-4o
+LLM_NAME=gpt-4o
 ```
 
 Make sure to replace `YOUR_OPENAI_API_KEY` with your actual OpenAI API key.
@@ -86,14 +86,57 @@ Make sure to replace `YOUR_OPENAI_API_KEY` with your actual OpenAI API key.
 To use a local Ollama server with the `llama3.2:1b` model, you would configure your `.env` file like this:
 
 ```
-LLM_NAME=openai # Using OpenAI compatible API format for local models
+LLM_PROVIDER=openai # Using OpenAI compatible API format for local models
 API_KEY=None      # API Key is not needed for local Ollama
-MODEL_NAME=llama3.2:1b
+LLM_NAME=llama3.2:1b
 OPENAI_BASE_URL=http://host.docker.internal:11434/v1 # Default Ollama API URL within Docker
 EMBEDDINGS_NAME=huggingface_sentence-transformers/all-mpnet-base-v2 # You can also run embeddings locally if needed
 ```
 
-In this case, even though you are using Ollama locally, `LLM_NAME` is set to `openai` because Ollama (and many other local inference engines) are designed to be API-compatible with OpenAI.  `OPENAI_BASE_URL` points DocsGPT to the local Ollama server.
+In this case, even though you are using Ollama locally, `LLM_PROVIDER` is set to `openai` because Ollama (and many other local inference engines) are designed to be API-compatible with OpenAI.  `OPENAI_BASE_URL` points DocsGPT to the local Ollama server.
+
+## Authentication Settings
+
+DocsGPT includes a JWT (JSON Web Token) based authentication feature for managing sessions or securing local deployments while allowing access.
+
+- **`AUTH_TYPE`**: This setting in your `.env` file or `settings.py` determines the authentication method.
+    
+    - **Possible values:**
+        - `None` (or not set): No authentication is used.
+        - `simple_jwt`: A single, long-lived JWT token is generated and used for all authenticated requests. This is useful for securing a local deployment with a shared secret.
+        - `session_jwt`: Unique JWT tokens are generated for sessions, typically for individual users or temporary access.
+    - If `AUTH_TYPE` is set to `simple_jwt` or `session_jwt`, then a `JWT_SECRET_KEY` is required.
+- **`JWT_SECRET_KEY`**: This is a crucial secret key used to sign and verify JWTs.
+    
+    - It can be set directly in your `.env` file or `settings.py`.
+    - **Automatic Key Generation**: If `AUTH_TYPE` is `simple_jwt` or `session_jwt` and `JWT_SECRET_KEY` is _not_ set in your environment variables or `settings.py`, DocsGPT will attempt to:
+        1. Read the key from a file named `.jwt_secret_key` in the project's root directory.
+        2. If the file doesn't exist, it will generate a new 32-byte random key, save it to `.jwt_secret_key`, and use it for the session. This ensures that the key persists across application restarts.
+    - **Security Note**: It's vital to keep this key secure. If you set it manually, choose a strong, random string.
+
+**How it works:**
+
+- When `AUTH_TYPE` is set to `simple_jwt`, a token is generated at startup (if not already present or configured) and printed to the console. This token should be included in the `Authorization` header of your API requests as a Bearer token (e.g., `Authorization: Bearer YOUR_SIMPLE_JWT_TOKEN`).
+- When `AUTH_TYPE` is set to `session_jwt`:
+    - Clients can request a new token from the `/api/generate_token` endpoint.
+    - This token should then be included in the `Authorization` header for subsequent requests.
+- The backend verifies the JWT token provided in the `Authorization` header for protected routes.
+- The `/api/config` endpoint can be used to check the current `auth_type` and whether authentication is required.
+
+**Frontend Token Input for `simple_jwt`:**
+
+<img 
+  src="/jwt-input.png" 
+  alt="Frontend prompt for JWT Token" 
+  style={{ 
+    width: '500px', 
+    maxWidth: '100%', 
+    display: 'block', 
+    margin: '1em auto' 
+  }} 
+/>
+
+If you have configured `AUTH_TYPE=simple_jwt`, the DocsGPT frontend will prompt you to enter the JWT token if it's not already set or is invalid. You'll need to paste the `SIMPLE_JWT_TOKEN` (which is printed to your console when the backend starts) into this field to access the application.
 
 ## Exploring More Settings
 

docs/pages/Guides/How-to-use-different-LLM.mdx

@@ -32,9 +32,9 @@ Choose the LLM of your choice.
 ### For Open source llm change:
 <Steps>
 ### Step 1
-For open source version please edit `LLM_NAME`, `MODEL_NAME` and others in the .env file. Refer to [⚙️ App Configuration](/Deploying/DocsGPT-Settings) for more information.
+For open source version please edit `LLM_PROVIDER`, `LLM_NAME` and others in the .env file. Refer to [⚙️ App Configuration](/Deploying/DocsGPT-Settings) for more information.
 ### Step 2
-Visit [☁️ Cloud Providers](/Models/cloud-providers) for the updated list of online models. Make sure you have the right API_KEY and correct LLM_NAME.
+Visit [☁️ Cloud Providers](/Models/cloud-providers) for the updated list of online models. Make sure you have the right API_KEY and correct LLM_PROVIDER.
 For self-hosted please visit [🖥️ Local Inference](/Models/local-inference). 
 </Steps>
 

docs/pages/Models/cloud-providers.mdx

@@ -13,15 +13,15 @@ The primary method for configuring your LLM provider in DocsGPT is through the `
 
 To connect to a cloud LLM provider, you will typically need to configure the following basic settings in your `.env` file:
 
-*   **`LLM_NAME`**:  This setting is essential and identifies the specific cloud provider you wish to use (e.g., `openai`, `google`, `anthropic`).
-*   **`MODEL_NAME`**:  Specifies the exact model you want to utilize from your chosen provider (e.g., `gpt-4o`, `gemini-2.0-flash`, `claude-3-5-sonnet-latest`).  Refer to your provider's documentation for a list of available models.
+*   **`LLM_PROVIDER`**:  This setting is essential and identifies the specific cloud provider you wish to use (e.g., `openai`, `google`, `anthropic`).
+*   **`LLM_NAME`**:  Specifies the exact model you want to utilize from your chosen provider (e.g., `gpt-4o`, `gemini-2.0-flash`, `claude-3-5-sonnet-latest`).  Refer to your provider's documentation for a list of available models.
 *   **`API_KEY`**:  Almost all cloud LLM providers require an API key for authentication. Obtain your API key from your chosen provider's platform and securely store it in your `.env` file.
 
 ## Explicitly Supported Cloud Providers
 
-DocsGPT offers direct, streamlined support for the following cloud LLM providers, making configuration straightforward.  The table below outlines the `LLM_NAME` and example `MODEL_NAME` values to use for each provider in your `.env` file.
+DocsGPT offers direct, streamlined support for the following cloud LLM providers, making configuration straightforward.  The table below outlines the `LLM_PROVIDER` and example `LLM_NAME` values to use for each provider in your `.env` file.
 
-| Provider                     | `LLM_NAME`     | Example `MODEL_NAME`        |
+| Provider                     | `LLM_PROVIDER` | Example `LLM_NAME`          |
 | :--------------------------- | :------------- | :-------------------------- |
 | DocsGPT Public API           | `docsgpt`      | `None`                      |
 | OpenAI                       | `openai`       | `gpt-4o`                    |
@@ -35,16 +35,16 @@ DocsGPT offers direct, streamlined support for the following cloud LLM providers
 
 DocsGPT's flexible architecture allows you to connect to any cloud provider that offers an API compatible with the OpenAI API standard. This opens up a vast ecosystem of LLM services.
 
-To connect to an OpenAI-compatible cloud provider, you will still use `LLM_NAME=openai` in your `.env` file.  However, you will also need to specify the API endpoint of your chosen provider using the `OPENAI_BASE_URL` setting.  You will also likely need to provide an `API_KEY` and `MODEL_NAME` as required by that provider.
+To connect to an OpenAI-compatible cloud provider, you will still use `LLM_PROVIDER=openai` in your `.env` file.  However, you will also need to specify the API endpoint of your chosen provider using the `OPENAI_BASE_URL` setting.  You will also likely need to provide an `API_KEY` and `LLM_NAME` as required by that provider.
 
 **Example for DeepSeek (OpenAI-Compatible API):**
 
 To connect to DeepSeek, which offers an OpenAI-compatible API, your `.env` file could be configured as follows:
 
 ```
-LLM_NAME=openai
+LLM_PROVIDER=openai
 API_KEY=YOUR_API_KEY # Your DeepSeek API key
-MODEL_NAME=deepseek-chat # Or your desired DeepSeek model name
+LLM_NAME=deepseek-chat # Or your desired DeepSeek model name
 OPENAI_BASE_URL=https://api.deepseek.com/v1 # DeepSeek's OpenAI API URL
 ```
 

docs/pages/Models/embeddings.md

@@ -60,7 +60,7 @@ To use OpenAI's `text-embedding-ada-002` embedding model, you need to set `EMBED
 **Example `.env` configuration for OpenAI Embeddings:**
 
 ```
-LLM_NAME=openai
+LLM_PROVIDER=openai
 API_KEY=YOUR_OPENAI_API_KEY # Your OpenAI API Key
 EMBEDDINGS_NAME=openai_text-embedding-ada-002
 ```

docs/pages/Models/local-inference.mdx

@@ -15,8 +15,8 @@ Setting up a local inference engine with DocsGPT is configured through environme
 
 To connect to a local inference engine, you will generally need to configure these settings in your `.env` file:
 
-*   **`LLM_NAME`**:  Crucially set this to `openai`. This tells DocsGPT to use the OpenAI-compatible API format for communication, even though the LLM is local.
-*   **`MODEL_NAME`**:  Specify the model name as recognized by your local inference engine. This might be a model identifier or left as `None` if the engine doesn't require explicit model naming in the API request.
+*   **`LLM_PROVIDER`**:  Crucially set this to `openai`. This tells DocsGPT to use the OpenAI-compatible API format for communication, even though the LLM is local.
+*   **`LLM_NAME`**:  Specify the model name as recognized by your local inference engine. This might be a model identifier or left as `None` if the engine doesn't require explicit model naming in the API request.
 *   **`OPENAI_BASE_URL`**:  This is essential. Set this to the base URL of your local inference engine's API endpoint. This tells DocsGPT where to find your local LLM server.
 *   **`API_KEY`**:  Generally, for local inference engines, you can set `API_KEY=None` as authentication is usually not required in local setups.
 
@@ -24,16 +24,16 @@ To connect to a local inference engine, you will generally need to configure the
 
 DocsGPT is readily configurable to work with the following local inference engines, all communicating via the OpenAI API format. Here are example `OPENAI_BASE_URL` values for each, based on default setups:
 
-| Inference Engine              | `LLM_NAME` | `OPENAI_BASE_URL`          |
-| :---------------------------- | :--------- | :------------------------- |
-| LLaMa.cpp                     | `openai`   | `http://localhost:8000/v1`   |
-| Ollama                        | `openai`   | `http://localhost:11434/v1`  |
-| Text Generation Inference (TGI)| `openai`   | `http://localhost:8080/v1`   |
-| SGLang                        | `openai`   | `http://localhost:30000/v1`  |
-| vLLM                          | `openai`   | `http://localhost:8000/v1`   |
-| Aphrodite                     | `openai`   | `http://localhost:2242/v1`   |
-| FriendliAI                    | `openai`   | `http://localhost:8997/v1`   |
-| LMDeploy                      | `openai`   | `http://localhost:23333/v1` |
+| Inference Engine              | `LLM_PROVIDER` | `OPENAI_BASE_URL`          |
+| :---------------------------- | :------------- | :------------------------- |
+| LLaMa.cpp                     | `openai`       | `http://localhost:8000/v1`   |
+| Ollama                        | `openai`       | `http://localhost:11434/v1`  |
+| Text Generation Inference (TGI)| `openai`      | `http://localhost:8080/v1`   |
+| SGLang                        | `openai`       | `http://localhost:30000/v1`  |
+| vLLM                          | `openai`       | `http://localhost:8000/v1`   |
+| Aphrodite                     | `openai`       | `http://localhost:2242/v1`   |
+| FriendliAI                    | `openai`       | `http://localhost:8997/v1`   |
+| LMDeploy                      | `openai`       | `http://localhost:23333/v1` |
 
 **Important Note on `localhost` vs `host.docker.internal`:**
 

docs/pages/Tools/_meta.json

@@ -0,0 +1,14 @@
+{
+  "basics": {
+    "title": "🔧 Tools Basics",
+    "href": "/Tools/basics"
+  },
+  "api-tool": {
+    "title": "🗝️ API Tool",
+    "href": "/Tools/api-tool"
+  },
+  "creating-a-tool": {
+    "title": "🛠️ Creating a Custom Tool",
+    "href": "/Tools/creating-a-tool"
+  }
+}

docs/pages/Tools/api-tool.mdx

@@ -0,0 +1,153 @@
+---
+title: 🗝️ Generic API Tool
+description: Learn how to configure and use the API Tool in DocsGPT to connect with any RESTful API without writing custom code.
+---
+
+import { Callout } from 'nextra/components';
+import Image from 'next/image';
+
+# Using the Generic API Tool
+
+The API Tool provides a no-code/low-code solution to make DocsGPT interact with third-party or internal RESTful APIs. It acts as a bridge, allowing the Large Language Model (LLM) to leverage external services based on your chat interactions.
+ This guide will walk you through its capabilities, configuration, and best practices.
+
+## Introduction to the Generic API Tool
+
+**When to Use It:**
+    * Ideal for quickly integrating existing APIs where the interaction involves standard HTTP requests (GET, POST, PUT, DELETE).
+    * Suitable for fetching data to enrich answers (e.g., current weather, stock prices, product details).
+    * Useful for triggering simple actions in other systems (e.g., sending a notification, creating a basic task).
+
+**Contrast with Custom Python Tools:**
+    * **API Tool:** Best for straightforward API calls. Configuration is done through the DocsGPT UI.
+    * **Custom Python Tools:** Preferable when you need complex logic before or after the API call, handle non-standard authentication (like complex OAuth flows), manage multi-step API interactions, or require intricate data processing not easily managed by the LLM alone. See [Creating a Custom Tool](/Tools/creating-a-tool) for more.
+
+## Capabilities of the API Tool
+
+**Supported HTTP Methods:** You can configure actions using standard HTTP methods such as:
+    * `GET`: To retrieve data.
+    * `POST`: To submit data to create a new resource.
+    * `PUT`: To update an existing resource.
+    * `DELETE`: To remove a resource.
+
+**Request Configuration:**
+    * **Headers:** Define static or dynamic HTTP headers for authentication (e.g., API keys), content type specification, etc.
+    * **Query Parameters:** Specify URL query parameters, which can be static or dynamically filled by the LLM based on user input.
+    * **Request Body:** Define the structure of the request body (e.g., JSON), with fields that can be static or dynamically populated by the LLM.
+
+**Response Handling:**
+    * The API Tool executes the request and receives the raw response from the API (typically JSON or plain text).
+    * This raw response is then passed back to the LLM.
+    * The LLM uses this response, along with the context of your query and the description of the API tool action, to formulate an answer or decide on follow-up actions. The API tool itself doesn't deeply parse or transform the response beyond basic content type detection (e.g., loading JSON into a parsable object).
+
+## Configuring an API as a Tool
+
+You can configure the API Tool through the DocsGPT user interface, found in **Settings -> Tools**. When you add or modify an API Tool, you'll define specific actions that DocsGPT can perform.
+
+<Callout type="info">
+  The configuration involves defining how DocsGPT should call an API endpoint. Each configured API call essentially becomes a distinct "action" the LLM can choose to use.
+</Callout>
+
+Below is an example of how you might configure an API action, inspired by setting up a phone number validation service:
+
+<Image
+  src="/toolIcons/api-tool-example.png"
+  alt="API Tool configuration example for phone validation"
+  width={800}
+  height={450}
+  style={{ margin: '1em auto', display: 'block', borderRadius: '8px' }}
+/>
+_Figure 1: Example configuration for an API Tool action to validate phone numbers._
+
+**Defining an API Endpoint/Action:**
+
+When you configure a new API action, you'll fill in the following fields:
+
+-   **`Name`:** A user-friendly name for this specific API action (e.g., "Phone-check" as in the image, or more specific like "ValidateUSPhoneNumber"). This helps in managing your tools.
+-   **`Description`:** This is a **critical field**. Provide a clear and concise description of what the API action does, what kind of input it expects (implicitly), and what kind of output it provides. The LLM uses this description to understand when and how to use this action.
+-   **`URL`:** The full endpoint URL for the API request.
+-   **`HTTP Method`:** Select the appropriate HTTP method (e.g., GET, POST) from a dropdown.
+-   **`Headers`:** You can add custom HTTP headers as key-value pairs (Name, Value). Indicate if the value should be `Filled by LLM` or is static. If filled by LLM, provide a `Description` for the LLM.
+
+-   **`Query Parameters`:** For `GET` requests or when parameters are sent in the URL.
+    * **`Name`:** The name of the query parameter (e.g., `api_key`, `phone`).
+    * **`Type`:** The data type of the parameter (e.g., `string`).
+    * **`Filled by LLM` (Checkbox):**
+        - **Unchecked (Static):** The `Value` you provide will be used for every call (e.g., for an `api_key` that doesn't change).
+        - **Checked (Dynamic):** The LLM will extract the appropriate value from the user's chat query based on the `Description` you provide for this parameter. The `Value` field is typically left empty or contains a placeholder if `Filled by LLM` is checked.
+    * `Description`: Context for the LLM if the parameter is to be filled dynamically, or for your own reference if static.
+    * `Value`: The static value if not filled by LLM.
+
+-   **`Request Body`:** Used to send data (commonly JSON) to the API. Similar to Query Parameters, you define fields with `Name`, `Type`, whether it's `Filled by LLM`, a `Description` for dynamic fields, and a static `Value` if applicable.
+
+**Response Handling Guidance for the LLM:**
+
+While the API Tool configuration UI doesn't have explicit fields for defining response parsing rules (like JSONPath extractors), you significantly influence how the LLM handles the response through:
+    * **Tool Action `Description`:** Clearly state what kind of information the API returns (e.g., "This API returns a JSON object with 'status' and 'location' fields for the phone number."). This helps the LLM know what to look for in the API's output.
+    * **Prompt Engineering:** For more complex scenarios, you might need to adjust your global or agent-specific prompts to guide DocsGPT on how to interpret and present information from API tool responses. See [Customising Prompts](/Guides/Customising-prompts).
+
+## Using the Configured API Tool in Chat
+
+Once an API action is configured and enabled, DocsGPT's LLM can decide to use it based on your natural language queries.
+
+**Example (based on the phone validation tool in Figure 1):**
+
+1.  **User Query:** "Hey DocsGPT, can you check if +14155555555 is a valid phone number?"
+
+2.  **DocsGPT (LLM Orchestration):**
+    * The LLM analyzes the query.
+    * It matches the intent ("check if ... is a valid phone number") with the description of the "Phone-check" API action.
+    * It identifies `+14155555555` as the value for the `phone` parameter (which was marked as `Filled by LLM` with the description "Phone number to check").
+    * DocsGPT constructs the GET API request.
+3.  **API Tool Execution:**
+    * The API Tool makes the HTTP GET request.
+    * The external API (AbstractAPI) processes the request and returns a JSON response, e.g.:
+        ```json
+        {
+          "phone": "+14155555555",
+          "valid": true,
+          "format": {
+            "international": "+1 415-555-5555",
+            "national": "(415) 555-5555"
+          },
+          "country": {
+            "code": "US",
+            "name": "United States",
+            "prefix": "+1"
+          },
+          "location": "California",
+          "type": "Landline"
+        }
+        ```
+
+4.  **DocsGPT Response Formulation:**
+    * The API Tool passes this JSON response back to the LLM.
+    * The LLM, guided by the tool's description and the user's original query, extracts relevant information and formulates a user-friendly answer.
+    * **DocsGPT Chat Response:** "Yes, +14155555555 appears to be a valid landline phone number in California, United States."
+
+## Advanced Tips and Best Practices
+
+**Clear Description is the Key:** The LLM relies heavily on the `Description` field of the API action and its parameters. Make them unambiguous and action-oriented. Clearly state what the tool does and what kind of input it expects (even if implicitly through parameter descriptions). 
+
+**Iterative Testing:** After configuring an API tool, test it with various phrasings of user queries to ensure the LLM triggers it correctly and interprets the response as expected.
+  
+**Error Handling:**
+    * If an API call fails, the API Tool will return an error message and status code from the `requests` library or the API itself. The LLM may relay this error or try to explain it.
+    * Check DocsGPT's backend logs for more detailed error information if you encounter issues.
+  
+**Security Considerations:**
+    * **API Keys:** Be mindful of API keys and other sensitive credentials. The example image shows an API key directly in the configuration. For production or shared environments avoid exposing configurations with sensitive keys.
+    * **Rate Limits:** Be aware of the rate limits of the APIs you are integrating. Frequent calls from DocsGPT could exceed these limits.
+    * **Data Privacy:** Consider the data privacy implications of sending user query data to third-party APIs.
+-   **Idempotency:** For tools that modify data (POST, PUT, DELETE), be aware of whether the API operations are idempotent to avoid unintended consequences from repeated calls if the LLM retries an action.
+
+## Limitations
+
+While powerful, the Generic API Tool has some limitations:
+
+-   **Complex Authentication:** Advanced authentication flows like OAuth 2.0 (especially 3-legged OAuth requiring user redirection) or custom signature-based authentication often require custom Python tools.
+-   **Multi-Step API Interactions:** If a task requires multiple API calls that depend on each other (e.g., fetch a list, then for each item, fetch details), this kind of complex chaining and logic is better handled by a custom Python tool.
+-   **Complex Data Transformations:** If the API response needs significant transformation or processing before being useful to the LLM, a custom Python tool offers more flexibility.
+-   **Real-time Streaming (SSE, WebSockets):** The tool is designed for request-response interactions, not for maintaining persistent streaming connections.
+
+For scenarios that exceed these limitations, developing a [Custom Python Tool](/Tools/creating-a-tool) is the recommended approach.

docs/pages/Tools/basics.mdx

@@ -0,0 +1,92 @@
+---
+title: Tools Basics - Enhancing DocsGPT Capabilities
+description: Understand what DocsGPT Tools are, how they work, and explore the built-in tools available to extend DocsGPT's functionality.
+---
+
+import { Callout } from 'nextra/components';
+import Image from 'next/image';
+import { ToolCards } from '../../components/ToolCards';
+
+# Understanding DocsGPT Tools
+
+DocsGPT Tools are powerful extensions that significantly enhance the capabilities of your DocsGPT application. 
+They allow DocsGPT to move beyond its core function of retrieving information from your documents and enable it to perform actions, 
+interact with external data sources, and integrate with other services. You can find and configure available tools within 
+the "Tools" section of the DocsGPT application settings in the user interface.
+
+## What are Tools?
+
+-   **Purpose:** The primary purpose of Tools is to bridge the gap between understanding a user's request (natural language processing by the LLM) and executing a tangible action. This could involve fetching live data from the web, sending notifications, running code snippets, querying databases, or interacting with third-party APIs.
+
+-   **LLM as an Orchestrator:** The Large Language Model (LLM) at the heart of DocsGPT is designed to act as an intelligent orchestrator. Based on your query and the declared capabilities of the available tools (defined in their metadata), the LLM decides if a tool is needed, which tool to use, and what parameters to pass to it.
+
+-   **Action-Oriented Interactions:** Tools enable more dynamic and action-oriented interactions. For example:
+    * *"What's the latest news on renewable energy?"* - This might trigger a web search tool to fetch current articles.
+    * *"Fetch the order status for customer ID 12345 from our database."* - This could use a database tool.
+    * *"Summarize the content of this webpage and send the summary to the #general channel on Telegram."* - This might involve a web scraping tool followed by a Telegram notification tool.
+
+## Overview of Built-in Tools
+
+DocsGPT includes a suite of pre-built tools designed to expand its capabilities out-of-the-box. Below is an overview of the currently available tools. 
+
+<ToolCards
+  items={[
+    {
+      title: 'API Tool',
+      link: '/Tools/api-tool',
+      description: 'A highly flexible tool that allows DocsGPT to interact with virtually any API without needing to write custom Python code.'
+    },
+    {
+      title: 'Brave Search Tool',
+      link: 'https://github.com/arc53/DocsGPT/blob/main/application/agents/tools/brave.py',
+      description: 'Enables DocsGPT to perform real-time web and image searches using the Brave Search API for up-to-date information.'
+    },
+    {
+      title: 'Cryptoprice Tool',
+      link: 'https://github.com/arc53/DocsGPT/blob/main/application/agents/tools/cryptoprice.py',
+      description: 'Fetches the current price of specified cryptocurrencies.'
+    },
+    {
+      title: 'Ntfy Tool',
+      link: 'https://github.com/arc53/DocsGPT/blob/main/application/agents/tools/ntfy.py',
+      description: 'Allows DocsGPT to send push notifications to Ntfy.sh channels, ideal for alerts and updates.'
+    },
+    {
+      title: 'PostgreSQL Tool',
+      link: 'https://github.com/arc53/DocsGPT/blob/main/application/agents/tools/postgres.py',
+      description: 'Provides capabilities to connect to a PostgreSQL database, execute SQL queries, and retrieve schema information.'
+    },
+    {
+      title: 'Read Webpage Tool', // Renamed from Scraper Tool
+      link: 'https://github.com/arc53/DocsGPT/blob/main/application/agents/tools/read_webpage.py',
+      description: 'Enables DocsGPT to fetch and extract (scrape) textual content from specified web page URLs.'
+    },
+    {
+      title: 'Telegram Tool',
+      link: 'https://github.com/arc53/DocsGPT/blob/main/application/agents/tools/telegram.py',
+      description: 'Allows DocsGPT to send messages or images to Telegram chats via a Telegram Bot.'
+    }
+  ]}
+/>
+
+## Using Tools in DocsGPT (User Perspective)
+
+Interacting with tools in DocsGPT is designed to be intuitive:
+
+1.  **Natural Language Interaction:** As a user, you typically interact with DocsGPT using natural language queries or commands. The LLM within DocsGPT analyzes your input to determine if a specific task can or should be handled by one of the available and configured tools.
+
+2.  **Configuration in UI:**
+    * Tools are generally managed and configured within the DocsGPT application's settings, found under a "Tools" section in the GUI.
+    * For tools that interact with external services (like Brave Search, Telegram, or any service via the API Tool), you might need to provide authentication credentials (e.g., API keys, tokens) or specific endpoint information during the tool's setup in the UI.
+
+3.  **Prompt Engineering for Tools:** While the LLM aims to intelligently use tools, for more complex or reliable agent-like behaviors, you might need to customize the system prompts. Modifying the prompt can guide the LLM on when and how to prioritize or chain tools to achieve specific outcomes, especially if you're building an agent designed to perform a certain sequence of actions every time. For more on this, see [Customising Prompts](/Guides/Customising-prompts).
+
+## Advancing with Tools
+
+Understanding the basics of DocsGPT Tools opens up many possibilities:
+
+* **Leverage the API Tool:** For quick integrations with numerous external services, explore the [API Tool Detailed Guide](/Tools/api-tool).
+* **Develop Custom Tools:** If you have specific needs not covered by built-in tools or the generic API tool, you can develop your own. See our guide on `[Developing Custom Tools](/Tools/creating-a-tool)` (placeholder for now).
+* **Build AI Agents:** Tools are the fundamental building blocks for creating sophisticated AI agents within DocsGPT. Explore how these can be combined by looking into the `[Agents section/tab concept - link to be added once available]`.
+
+By harnessing the power of Tools, you can transform DocsGPT into a more versatile and proactive assistant tailored to your unique workflows.

docs/pages/Tools/creating-a-tool.mdx

@@ -0,0 +1,186 @@
+---
+title: 🛠️ Creating a Custom Tool
+description: Learn how to create custom Python tools to extend DocsGPT's functionality and integrate with various services or perform specific actions.
+---
+
+import { Callout } from 'nextra/components';
+import { Steps } from 'nextra/components';
+
+# 🛠️ Creating a Custom Python Tool
+
+This guide provides developers with a comprehensive, step-by-step approach to creating their own custom tools for DocsGPT. By developing custom tools, you can significantly extend DocsGPT's capabilities, enabling it to interact with new data sources, services, and perform specialized actions tailored to your unique needs.
+
+## Introduction to Custom Tool Development
+
+### Why Create Custom Tools?
+
+While DocsGPT offers a range of built-in tools and a versatile API Tool, there are many scenarios where a custom Python tool is the best solution:
+
+* **Integrating with Proprietary Systems:** Connect to internal APIs, databases, or services that are not publicly accessible or require complex authentication.
+* **Adding Domain-Specific Functionalities:** Implement logic specific to your industry or use case that isn't covered by general-purpose tools.
+* **Automating Unique Workflows:** Create tools that orchestrate multiple steps or interact with systems in a way unique to your operational needs.
+* **Connecting to Any System with an Accessible Interface:** If you can interact with a system programmatically using Python (e.g., through libraries, SDKs, or direct HTTP requests), you can likely build a DocsGPT tool for it.
+* **Complex Logic or Data Transformation:** When API interactions require intricate logic before sending a request or after receiving a response, or when data needs significant transformation that is difficult for an LLM to handle directly.
+
+### Prerequisites
+
+Before you begin, ensure you have:
+
+* A solid understanding of Python programming.
+* Familiarity with the DocsGPT project structure, particularly the `application/agents/tools/` directory where custom tools reside.
+* Basic knowledge of how APIs work, as many tools involve interacting with external or internal APIs.
+* Your DocsGPT development environment set up. If not, please refer to the [Setting Up a Development Environment](/Deploying/Development-Environment) guide.
+
+## The Anatomy of a DocsGPT Tool
+
+Custom tools in DocsGPT are Python classes that inherit from a base `Tool` class and implement specific methods to define their behavior, capabilities, and configuration needs.
+
+The **foundation** for all custom tools is the abstract base class, located in `application/agents/tools/base.py`. Your custom tool class **must** inherit from this class.
+
+### Essential Methods to Implement
+
+Your custom tool class needs to implement the following methods:
+
+1. **`__init__(self, config: dict)`**
+    
+    - **Purpose:** The constructor for your tool. It's called when DocsGPT initializes the tool.
+    - **Usage:** This method is typically used to receive and store tool-specific configurations passed via the `config` dictionary. This dictionary is populated based on the tool's settings, often configured through the DocsGPT UI or environment variables. For example, you would store API keys, base URLs, or database connection strings here.
+    - **Example** (`brave.py`)**:**
+        ``` python
+        class BraveSearchTool(Tool):
+            def __init__(self, config):
+                self.config = config
+                self.token = config.get("token", "") # API Key for Brave Search
+                self.base_url = "https://api.search.brave.com/res/v1"
+        ```
+
+2. **`execute_action(self, action_name: str, **kwargs) -> dict`**
+    
+    - **Purpose:** This is the workhorse of your tool. The LLM, acting as an agent, calls this method when it decides to use one of the actions your tool provides.
+    - **Parameters:**
+        - `action_name` (str): A string specifying which of the tool's actions to run (e.g., "brave_web_search").
+        - `**kwargs` (dict): A dictionary containing the parameters for that specific action. These parameters are defined in the tool's metadata (`get_actions_metadata()`) and are extracted or inferred by the LLM from the user's query.
+    - **Return Value:** A dictionary containing the result of the action. It's good practice to include keys like:
+        - `status_code` (int): An HTTP-like status code (e.g., 200 for success, 500 for error).
+        - `message` (str): A human-readable message describing the outcome.
+        - `data` (any): The actual data payload returned by the action (if applicable).
+        - `error` (str): An error message if the action failed.
+    - **Example (`read_webpage.py`):**
+        
+        ``` python
+        def execute_action(self, action_name: str, **kwargs) -> str:
+            if action_name != "read_webpage":
+                return f"Error: Unknown action '{action_name}'. This tool only supports 'read_webpage'."
+        
+            url = kwargs.get("url")
+            if not url:
+                return "Error: URL parameter is missing."
+            # ... (logic to fetch and parse webpage) ...
+            try:
+                # ...
+                return markdown_content 
+            except Exception as e:
+                return f"Error processing URL {url}: {e}"
+        ```
+        
+        A more structured return:
+        
+        ``` python
+        # ... inside execute_action
+        try:
+            # ... logic ...
+            return {"status_code": 200, "message": "Webpage read successfully", "data": markdown_content}
+        except Exception as e:
+            return {"status_code": 500, "message": f"Error processing URL {url}", "error": str(e)}
+        ```
+        
+3. **`get_actions_metadata(self) -> list`**
+    
+    - **Purpose:** This method is **critical** for the LLM to understand what your tool can do, when to use it, and what parameters it needs. It effectively advertises your tool's capabilities.
+    - **Return Value:** A list of dictionaries. Each dictionary describes one distinct action the tool can perform and must follow a specific JSON schema structure.
+        - `name` (str): A unique and descriptive name for the action (e.g., `mytool_get_user_details`). It's a common convention to prefix with the tool name to avoid collisions.
+        - `description` (str): A clear, concise, and unambiguous description of what the action does. **Write this for the LLM.** The LLM uses this description to decide if this action is appropriate for a given user query.
+        - `parameters` (dict): A JSON Schema object defining the parameters that the action expects. This schema tells the LLM what arguments are needed, their types, and which are required.
+            - `type`: Should always be `"object"`.
+            - `properties`: A dictionary where each key is a parameter name, and the value is an object defining its `type` (e.g., "string", "integer", "boolean") and `description`.
+            - `required`: A list of strings, where each string is the name of a parameter that is mandatory for the action.
+    - **Example (`postgres.py` - partial):**
+        
+        ``` python
+        def get_actions_metadata(self):
+            return [
+                {
+                    "name": "postgres_execute_sql",
+                    "description": "Execute an SQL query against the PostgreSQL database...",
+                    "parameters": {
+                        "type": "object",
+                        "properties": {
+                            "sql_query": {
+                                "type": "string",
+                                "description": "The SQL query to execute.",
+                            },
+                        },
+                        "required": ["sql_query"],
+                        "additionalProperties": False, # Good practice to prevent unexpected params
+                    },
+                },
+                # ... other actions like postgres_get_schema
+            ]
+        ```
+        
+4. **`get_config_requirements(self) -> dict`**
+    
+    - **Purpose:** Defines the configuration parameters that your tool needs to function (e.g., API keys, specific base URLs, connection strings, default settings). This information can be used by the DocsGPT UI to dynamically render configuration fields for your tool or for validation.
+    - **Return Value:** A dictionary where keys are the configuration item names (which will be keys in the `config` dict passed to `__init__`) and values are dictionaries describing each requirement:
+        - `type` (str): The expected data type of the config value (e.g., "string", "boolean", "integer").
+        - `description` (str): A human-readable description of what this configuration item is for.
+        - `secret` (bool, optional): Set to `True` if the value is sensitive (e.g., an API key) and should be masked or handled specially in UIs. Defaults to `False`.
+    - **Example (`brave.py`):**
+        
+        ``` python
+        def get_config_requirements(self):
+            return {
+                "token": { # This 'token' will be a key in the config dict for __init__
+                    "type": "string",
+                    "description": "Brave Search API key for authentication",
+                    "secret": True
+                },
+            }
+        ```    
+
+## Tool Registration and Discovery
+
+DocsGPT's ToolManager (located in application/agents/tools/tool_manager.py) automatically discovers and loads tools.
+
+As long as your custom tool:
+
+1. Is placed in a Python file within the `application/agents/tools/` directory (and the filename is not `base.py` or starts with `__`).
+2. Correctly inherits from the `Tool` base class.
+3. Implements all the abstract methods (`execute_action`, `get_actions_metadata`, `get_config_requirements`).
+
+The `ToolManager` should be able to load it when DocsGPT starts. 
+
+## Configuration & Secrets Management
+
+- **Configuration Source:** The `config` dictionary passed to your tool's `__init__` method is typically populated from settings defined in the DocsGPT UI (if available for the tool) or from environment variables/configuration files that DocsGPT loads (see [⚙️ App Configuration](/Deploying/DocsGPT-Settings)). The keys in this dictionary should match the names you define in `get_config_requirements()`.
+- **Secrets:** Never hardcode secrets (like API keys or passwords) directly into your tool's Python code. Instead, define them as configuration requirements (using `secret: True` in `get_config_requirements()`) and let DocsGPT's configuration system inject them via the `config` dictionary at runtime. This ensures that secrets are managed securely and are not exposed in your codebase.
+
+## Best Practices for Tool Development
+
+- **Atomicity:** Design tool actions to be as atomic (single, well-defined purpose) as possible. This makes them easier for the LLM to understand and combine.
+- **Clarity in Metadata:** Ensure action names and descriptions in `get_actions_metadata()` are extremely clear, specific, and unambiguous. This is the primary way the LLM understands your tool.
+- **Robust Error Handling:** Implement comprehensive error handling within your `execute_action` logic (and the private methods it calls). Return informative error messages in the result dictionary so the LLM or user can understand what went wrong.
+- **Security:**
+    - Be mindful of the security implications of your tool, especially if it interacts with sensitive systems or can execute arbitrary code/queries.
+    - Validate and sanitize any inputs, especially if they are used to construct database queries or shell commands, to prevent injection attacks.
+- **Performance:** Consider the performance implications of your tool's actions. If an action is slow, it will impact the user experience. Optimize where possible.
+
+## (Optional) Contributing Your Tool
+
+If you develop a custom tool that you believe could be valuable to the broader DocsGPT community and is general-purpose:
+
+1. Ensure it's well-documented (both in code and with clear metadata).
+2. Make sure it adheres to the best practices outlined above.
+3. Consider opening a Pull Request to the [DocsGPT GitHub repository](https://github.com/arc53/DocsGPT) with your new tool, including any necessary documentation updates.
+
+By following this guide, you can create powerful custom tools that extend DocsGPT's capabilities to your specific operational environment.

docs/pages/_meta.json

@@ -4,6 +4,8 @@
   "quickstart": "Quickstart",
   "Deploying": "Deploying",
   "Models": "Models",
+  "Tools": "Tools",
+  "Agents": "Agents",
   "Extensions": "Extensions",
   "https://gptcloud.arc53.com/": {
     "title": "API",

docs/public/toolIcons/tool_api_tool.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="1 6 38 28" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3,33.5c-0.827,0-1.5-0.673-1.5-1.5V8c0-0.827,0.673-1.5,1.5-1.5h34c0.827,0,1.5,0.673,1.5,1.5v24 c0,0.827-0.673,1.5-1.5,1.5H3z" style="fill: rgb(7, 106, 255);"/>
+  <path d="M37,7c0.551,0,1,0.449,1,1v24c0,0.551-0.449,1-1,1H3c-0.551,0-1-0.449-1-1V8c0-0.551,0.449-1,1-1 H37 M37,6H3C1.895,6,1,6.895,1,8v24c0,1.105,0.895,2,2,2h34c1.105,0,2-0.895,2-2V8C39,6.895,38.105,6,37,6L37,6z" style="fill: rgb(7, 106, 255);"/>
+  <path d="M 19.296 13.226 C 20.066 13.06 21.108 12.955 22.147 12.955 C 23.772 12.955 25.153 13.185 26.047 14.038 C 26.88 14.766 27.255 15.931 27.255 17.118 C 27.255 18.638 26.798 19.718 26.07 20.489 C 25.196 21.426 23.801 21.842 22.656 21.842 C 22.47 21.842 22.302 21.842 22.115 21.821 L 22.115 27.045 L 19.297 27.045 L 19.297 13.226 L 19.296 13.226 Z M 22.114 19.616 C 22.259 19.637 22.405 19.637 22.571 19.637 C 23.945 19.637 24.55 18.657 24.55 17.347 C 24.55 16.119 24.049 15.162 22.78 15.162 C 22.532 15.162 22.281 15.203 22.114 15.266 L 22.114 19.616 Z M 29.158 12.955 L 31.976 12.955 L 31.976 27.045 L 29.158 27.045 L 29.158 12.955 Z M 15.001 27.045 L 17.887 27.045 L 14.91 12.955 L 11.342 12.955 L 8.024 27.045 L 10.91 27.045 L 11.524 24.227 L 14.408 24.227 L 15.001 27.045 Z M 13 15.547 L 13.068 15.547 C 13.205 16.467 13.409 17.888 13.568 18.745 L 14.021 21.409 L 11.942 21.409 L 12.457 18.746 C 12.614 17.93 12.841 16.488 13 15.547 Z" style="fill: rgb(255, 255, 255);"/>
+</svg>

docs/public/toolIcons/tool_brave.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 194.18 227.53"><defs><style>.cls-1{fill-rule:evenodd;fill:url(#linear-gradient);}.cls-2{fill:#fff;}</style><linearGradient id="linear-gradient" y1="116.23" x2="194.18" y2="116.23" gradientTransform="matrix(1, 0, 0, -1, 0, 230)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff5601"/><stop offset="0.5" stop-color="#ff4000"/><stop offset="1" stop-color="#ff1f01"/></linearGradient></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M187.39,54.58l5.34-13.1s-6.8-7.27-15-15.52S152,22.56,152,22.56L132,0H62.14L42.23,22.56S24.76,17.71,16.51,26s-15,15.52-15,15.52L6.8,54.58,0,74s20,75.65,22.33,84.89c4.61,18.19,7.77,25.22,20.88,34.44S80.1,218.55,84,221s8.74,6.56,13.11,6.56,9.22-4.13,13.11-6.56,27.67-18.43,40.78-27.65,16.26-16.25,20.87-34.44C174.19,149.64,194.18,74,194.18,74Z"/><path class="cls-2" d="M121.85,41c2.91,0,24.51-4.12,24.51-4.12S172,67.8,172,74.41c0,5.47-2.21,7.6-4.8,10.12-.54.53-1.1,1.08-1.66,1.67l-19.2,20.37-.63.64c-1.91,1.92-4.73,4.76-2.74,9.47l.41,1c2.18,5.1,4.87,11.39,1.44,17.78-3.64,6.78-9.89,11.31-13.9,10.56s-13.41-5.66-16.87-7.9S99.6,126.8,99.6,123.35c0-2.89,7.88-7.68,11.71-10,.77-.47,1.37-.83,1.71-1.07l1.88-1.18c3.49-2.17,9.8-6.09,10-7.83.2-2.14.12-2.77-2.69-8.06-.6-1.13-1.3-2.33-2-3.58-2.68-4.61-5.69-9.78-5-13.48.75-4.18,7.3-6.57,12.85-8.6l2-.75,5.78-2.17c5.54-2.07,11.69-4.37,12.71-4.84,1.4-.65,1-1.27-3.22-1.67l-2.06-.21c-5.27-.56-15-1.59-19.71-.28l-3.06.84c-5.31,1.43-11.81,3.19-12.44,4.21-.11.18-.22.33-.32.47-.6.85-1,1.41-.32,5,.19,1.08.6,3.19,1.1,5.81,1.46,7.65,3.75,19.58,4,22.26,0,.38.08.74.13,1.09.36,3,.61,5-2.87,5.77l-.91.21c-3.92.9-9.67,2.22-11.75,2.22s-7.83-1.32-11.76-2.22l-.9-.21c-3.48-.79-3.23-2.78-2.87-5.77,0-.35.09-.71.13-1.09.29-2.68,2.58-14.65,4-22.3.5-2.59.9-4.7,1.1-5.77.66-3.6.27-4.16-.33-5-.1-.14-.21-.29-.32-.47-.62-1-7.13-2.78-12.43-4.21l-3.07-.84C66,58.31,56.25,59.34,51,59.9l-2.06.21c-4.26.4-4.62,1-3.22,1.67,1,.47,7.17,2.77,12.71,4.84l5.78,2.17,2,.75c5.55,2,12.1,4.42,12.85,8.6.67,3.7-2.34,8.87-5,13.48-.72,1.25-1.43,2.45-2,3.58-2.82,5.29-2.9,5.92-2.7,8.06.16,1.74,6.47,5.66,10,7.83.82.5,1.48.92,1.88,1.18s.94.6,1.71,1.06c3.83,2.33,11.71,7.13,11.71,10,0,3.45-11,12.49-14.42,14.73S67.3,145.24,63.29,146,53,142.2,49.39,135.42c-3.43-6.38-.74-12.68,1.44-17.78l.41-1c2-4.71-.83-7.55-2.74-9.47l-.63-.64L28.67,86.2c-.56-.59-1.12-1.14-1.66-1.67-2.59-2.52-4.79-4.65-4.79-10.12,0-6.61,25.6-37.53,25.6-37.53S69.42,41,72.33,41c2.33,0,6.82-1.55,11.49-3.16l3.56-1.21a34.33,34.33,0,0,1,9.71-2,34.33,34.33,0,0,1,9.71,2c1.18.39,2.37.81,3.56,1.21C115,39.45,119.52,41,121.85,41Z"/><path class="cls-2" d="M118.14,150.39c4.57,2.35,7.81,4,9,4.78,1.59,1,.62,2.86-.82,3.88s-20.85,16-22.73,17.69l-.76.68c-1.82,1.64-4.13,3.72-5.77,3.72s-4-2.08-5.77-3.72l-.76-.68c-1.88-1.66-21.28-16.67-22.73-17.69s-2.41-2.89-.82-3.88c1.23-.77,4.47-2.44,9-4.79l4.34-2.24c6.84-3.54,15.37-6.54,16.7-6.54s9.86,3,16.7,6.54Z"/></g></g></svg>

docs/public/toolIcons/tool_cryptoprice.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88"><path d="M17.89 0h88.9c8.85 0 16.1 7.24 16.1 16.1v90.68c0 8.85-7.24 16.1-16.1 16.1H16.1c-8.85 0-16.1-7.24-16.1-16.1v-88.9C0 8.05 8.05 0 17.89 0zm57.04 66.96l16.46 4.96c-1.1 4.61-2.84 8.47-5.23 11.56-2.38 3.1-5.32 5.43-8.85 7-3.52 1.57-8.01 2.36-13.45 2.36-6.62 0-12.01-.96-16.21-2.87-4.19-1.92-7.79-5.3-10.83-10.13-3.04-4.82-4.57-11.02-4.57-18.54 0-10.04 2.67-17.76 8.02-23.17 5.36-5.39 12.93-8.09 22.71-8.09 7.65 0 13.68 1.54 18.06 4.64 4.37 3.1 7.64 7.85 9.76 14.27l-16.55 3.66c-.58-1.84-1.19-3.18-1.82-4.03-1.06-1.43-2.35-2.53-3.86-3.3-1.53-.78-3.22-1.16-5.11-1.16-4.27 0-7.54 1.71-9.8 5.12-1.71 2.53-2.57 6.52-2.57 11.94 0 6.73 1.02 11.33 3.07 13.83 2.05 2.49 4.92 3.73 8.63 3.73 3.59 0 6.31-1 8.15-3.03 1.83-1.99 3.16-4.92 3.99-8.75z" fill-rule="evenodd" clip-rule="evenodd"/></svg>

docs/public/toolIcons/tool_postgres.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-8.78 0 70 70" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg">
+    <metadata>
+        <rdf:RDF>
+            <cc:Work>
+                <dc:subject>
+                    Data
+                </dc:subject>
+                <dc:identifier>
+                    sql-database-generic
+                </dc:identifier>
+                <dc:title>
+                    SQL Database (Generic)
+                </dc:title>
+                <dc:format>
+                    image/svg+xml
+                </dc:format>
+                <dc:publisher>
+                    Amido Limited
+                </dc:publisher>
+                <dc:creator>
+                    Richard Slater
+                </dc:creator>
+                <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+            </cc:Work>
+        </rdf:RDF>
+    </metadata>
+    <path d="m 852.97077,1013.9363 c -6.55238,-0.4723 -13.02857,-2.1216 -17.00034,-4.3296 -2.26232,-1.2576 -3.98589,-2.8032 -4.66223,-4.1807 l -0.4024,-0.8196 0,-25.70807 0,-25.7081 0.31843,-0.6465 c 1.42297,-2.889 5.96432,-5.4935 12.30378,-7.0562 2.15195,-0.5305 5.2586,-1.0588 7.79304,-1.3252 2.58797,-0.2721 9.44765,-0.2307 12.02919,0.073 6.86123,0.8061 12.69967,2.6108 16.29768,5.0377 1.38756,0.9359 2.81137,2.4334 3.29371,3.4642 l 0.41358,0.8838 -0.0354,25.6303 -0.0354,25.63047 -0.33195,0.6744 c -0.18257,0.3709 -0.73406,1.1007 -1.22553,1.6216 -2.99181,3.1715 -9.40919,5.5176 -17.8267,6.5172 -1.71567,0.2038 -9.16916,0.3686 -10.92937,0.2417 z m 12.07501,-22.02839 c -0.0252,-0.0657 -1.00472,-0.93831 -2.17671,-1.93922 -1.17199,-1.00091 -2.18138,-1.86687 -2.24309,-1.92436 -0.0617,-0.0575 0.15481,-0.26106 0.48117,-0.45237 0.32635,-0.19131 0.95163,-0.7235 1.3895,-1.18265 1.2805,-1.34272 1.88466,-3.00131 1.88466,-5.17388 0,-2.1388 -0.65162,-3.8645 -1.95671,-5.1818 -1.31533,-1.3278 -2.82554,-1.8983 -5.02486,-1.8983 -3.39007,0 -5.99368,1.9781 -6.82468,5.1851 -0.28586,1.1031 -0.28432,3.33211 0.003,4.31023 0.74941,2.55136 2.79044,4.40434 5.33062,4.83946 0.8596,0.14724 0.97605,0.21071 1.5621,0.85144 0.34829,0.38078 1.06301,1.14085 1.58827,1.68904 l 0.95501,0.9967 2.53878,0 c 1.39633,0 2.51816,-0.0537 2.49296,-0.11939 z m -8.70653,-7.10848 c -0.61119,-0.31868 -0.84225,-0.56599 -1.19079,-1.27453 -0.26919,-0.54724 -0.31522,-0.85851 -0.31824,-2.15197 -0.003,-1.3143 0.0388,-1.5983 0.31987,-2.169 0.45985,-0.9339 1.09355,-1.376 2.07384,-1.4469 1.36454,-0.099 2.15217,0.5707 2.56498,2.1801 0.50612,1.97321 -0.0504,4.07107 -1.26471,4.76729 -0.63707,0.36527 -1.58737,0.40659 -2.18495,0.095 z m -11.25315,3.66269 c 2.66179,-0.5048 4.1728,-2.0528 4.1728,-4.27495 0,-1.97137 -0.97548,-3.12004 -3.6716,-4.32364 -1.54338,-0.689 -2.10241,-1.1215 -2.10241,-1.6268 0,-0.4188 0.53052,-0.8777 1.14813,-0.993 0.60302,-0.1126 2.20237,0.1652 3.14683,0.5467 l 0.79167,0.3198 0,-1.7524 0,-1.7525 -0.85923,-0.1906 c -0.53103,-0.1178 -1.64689,-0.1885 -2.92137,-0.1849 -1.80528,0 -2.15881,0.044 -2.83818,0.3138 -1.98445,0.7878 -2.92613,2.1298 -2.91107,4.1485 0.0141,1.8898 1.01108,3.06864 3.49227,4.12912 1.46399,0.62572 2.05076,1.10218 2.05076,1.66522 0,1.1965 -1.99362,1.34375 -4.10437,0.30315 -0.57805,-0.28498 -1.09739,-0.54137 -1.1541,-0.56976 -0.0567,-0.0284 -0.10311,0.79023 -0.10311,1.81917 0,1.86239 0.002,1.87137 0.33919,1.99974 1.26979,0.48278 4.07626,0.69787 5.52379,0.42335 z m 30.4308,-1.72766 0,-1.58098 -2.40584,0 -2.40583,0 0,-5.43035 0,-5.4303 -2.13089,0 -2.13088,0 0,7.0113 0,7.01131 4.53672,0 4.53672,0 0,-1.58098 z m -14.84745,-27.70503 c 4.23447,-0.2937 7.4086,-0.8482 10.20178,-1.7821 2.78264,-0.9304 4.42643,-2.0562 4.79413,-3.2834 0.14166,-0.4729 0.13146,-0.6523 -0.0665,-1.1708 -0.88775,-2.3245 -5.84694,-4.1104 -13.42493,-4.8345 -3.24154,-0.3098 -9.13671,-0.2094 -12.22745,0.2081 -4.71604,0.6372 -8.54333,1.8208 -10.2451,3.1683 -3.44251,2.726 0.19793,5.7242 8.66397,7.1354 3.67084,0.6119 8.42674,0.828 12.30414,0.559 z" fill="#00bcf2" transform="translate(-830.906 -943.981)"/>
+</svg>

docs/public/toolIcons/tool_read_webpage.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Zm0-82q26-36 45-75t31-83H404q12 44 31 83t45 75Zm-104-16q-18-33-31.5-68.5T322-320H204q29 50 72.5 87t99.5 55Zm208 0q56-18 99.5-55t72.5-87H638q-9 38-22.5 73.5T584-178ZM170-400h136q-3-20-4.5-39.5T300-480q0-21 1.5-40.5T306-560H170q-5 20-7.5 39.5T160-480q0 21 2.5 40.5T170-400Zm216 0h188q3-20 4.5-39.5T580-480q0-21-1.5-40.5T574-560H386q-3 20-4.5 39.5T380-480q0 21 1.5 40.5T386-400Zm268 0h136q5-20 7.5-39.5T800-480q0-21-2.5-40.5T790-560H654q3 20 4.5 39.5T660-480q0 21-1.5 40.5T654-400Zm-16-240h118q-29-50-72.5-87T584-782q18 33 31.5 68.5T638-640Zm-234 0h152q-12-44-31-83t-45-75q-26 36-45 75t-31 83Zm-200 0h118q9-38 22.5-73.5T376-782q-56 18-99.5 55T204-640Z"/></svg>

docs/public/toolIcons/tool_telegram.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 0.5C8.81812 0.5 5.76375 1.76506 3.51562 4.01469C1.2652 6.26522 0.000643966 9.31734 0 12.5C0 15.6813 1.26562 18.7357 3.51562 20.9853C5.76375 23.2349 8.81812 24.5 12 24.5C15.1819 24.5 18.2362 23.2349 20.4844 20.9853C22.7344 18.7357 24 15.6813 24 12.5C24 9.31869 22.7344 6.26431 20.4844 4.01469C18.2362 1.76506 15.1819 0.5 12 0.5Z" fill="url(#paint0_linear_5586_9958)"/>
+<path d="M5.43282 12.373C8.93157 10.849 11.2641 9.8443 12.4303 9.3588C15.7641 7.97261 16.4559 7.73186 16.9078 7.7237C17.0072 7.72211 17.2284 7.74667 17.3728 7.86339C17.4928 7.96183 17.5266 8.09495 17.5434 8.18842C17.5584 8.2818 17.5791 8.49461 17.5622 8.66074C17.3822 10.5582 16.6003 15.1629 16.2028 17.2882C16.0359 18.1874 15.7041 18.4889 15.3834 18.5184C14.6859 18.5825 14.1572 18.0579 13.4822 17.6155C12.4266 16.9231 11.8303 16.4922 10.8047 15.8167C9.6197 15.0359 10.3884 14.6067 11.0634 13.9055C11.2397 13.7219 14.3109 10.9291 14.3691 10.6758C14.3766 10.6441 14.3841 10.526 14.3128 10.4637C14.2434 10.4013 14.1403 10.4227 14.0653 10.4395C13.9584 10.4635 12.2728 11.5788 9.00282 13.7851C8.52469 14.114 8.09157 14.2743 7.70157 14.2659C7.27407 14.2567 6.44907 14.0236 5.83595 13.8245C5.08595 13.5802 4.48782 13.451 4.54032 13.036C4.56657 12.82 4.8647 12.599 5.43282 12.373Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_5586_9958" x1="1200" y1="0.5" x2="1200" y2="2400.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2AABEE"/>
+<stop offset="1" stop-color="#229ED9"/>
+</linearGradient>
+</defs>
+</svg>

extensions/react-widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsgpt",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "private": false,
   "description": "DocsGPT 🦖 is an innovative open-source tool designed to simplify the retrieval of information from project documentation using advanced GPT models 🤖.",
   "source": "./src/index.html",

extensions/react-widget/src/components/SearchBar.tsx

@@ -4,19 +4,19 @@ import { WidgetCore } from './DocsGPTWidget';
 import { SearchBarProps } from '@/types';
 import { getSearchResults } from '../requests/searchAPI';
 import { Result } from '@/types';
-import MarkdownIt from 'markdown-it';
 import { getOS, processMarkdownString } from '../utils/helper';
 import DOMPurify from 'dompurify';
-import { 
-    CodeIcon, 
+import {
+    CodeIcon,
     TextAlignLeftIcon,
     HeadingIcon,
-    ReaderIcon, 
-    ListBulletIcon, 
-    QuoteIcon 
+    ReaderIcon,
+    ListBulletIcon,
+    QuoteIcon
 } from '@radix-ui/react-icons';
 const themes = {
     dark: {
+        name: 'dark',
         bg: '#202124',
         text: '#EDEDED',
         primary: {
@@ -29,6 +29,7 @@ const themes = {
         }
     },
     light: {
+        name: 'light',
         bg: '#EAEAEA',
         text: '#171717',
         primary: {
@@ -44,15 +45,16 @@ const themes = {
 
 const GlobalStyle = createGlobalStyle`
   .highlight {
-    color:#007EE6;
+    color: ${props => props.theme.name === 'dark' ? '#4B9EFF' : '#0066CC'};
+    font-weight: 500;
   }
 `;
 
 const loadGeistFont = () => {
-  const link = document.createElement('link');
-  link.href = 'https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap'; 
-  link.rel = 'stylesheet';
-  document.head.appendChild(link);
+    const link = document.createElement('link');
+    link.href = 'https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap';
+    link.rel = 'stylesheet';
+    document.head.appendChild(link);
 };
 
 const Main = styled.div`
@@ -81,12 +83,27 @@ const Container = styled.div`
     position: relative;
     display: inline-block;
 `
+const SearchOverlay = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #0000001A;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    z-index: 99;
+`;
+
+
 const SearchResults = styled.div`
     position: fixed;
     display: flex;
     flex-direction: column;
-    background-color: ${props => props.theme.primary.bg};
-    border: 1px solid ${props => props.theme.bg};
+    background-color: ${props => props.theme.name === 'dark' ? 
+        'rgba(0, 0, 0, 0.15)' : 
+        'rgba(255, 255, 255, 0.4)'};
+    border: 1px solid rgba(255, 255, 255, 0.18);
     border-radius: 15px;
     padding: 8px 0px 8px 0px;
     width: 792px;
@@ -97,8 +114,12 @@ const SearchResults = styled.div`
     top: 50%;
     transform: translate(-50%, -50%);
     color: ${props => props.theme.primary.text};
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(16px);
+    
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    backdrop-filter: blur(82px);
+    -webkit-backdrop-filter: blur(82px);
+    border-radius: 10px;
+    
     box-sizing: border-box;
 
     @media only screen and (max-width: 768px) {
@@ -142,6 +163,33 @@ const ContentWrapper = styled.div`
     flex-direction: column;
     gap: 12px; 
 `;
+
+
+
+const ResultWrapper = styled.div`
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 8px 16px;
+    cursor: pointer;
+    background-color: transparent;
+    font-family: 'Geist', sans-serif;
+    border-radius: 8px;
+
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+    }
+`;
+
 const Content = styled.div`
     display: flex;
     margin-left: 8px;
@@ -151,9 +199,10 @@ const Content = styled.div`
     font-size: 15px;
     color: ${props => props.theme.primary.text};
     line-height: 1.6;
-    border-left: 2px solid #585858;
+    border-left: 2px solid ${props => props.theme.primary.text}CC;
     overflow: hidden;
-`
+    
+`;
 const ContentSegment = styled.div`
     display: flex;
     align-items: flex-start;
@@ -165,80 +214,6 @@ const ContentSegment = styled.div`
     text-overflow: ellipsis;
 `
 
-const ResultWrapper = styled.div`
-    display: flex;
-    align-items: flex-start;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 8px 16px;
-    cursor: pointer;
-    background-color: ${props => props.theme.primary.bg};
-    font-family: 'Geist', sans-serif;
-    transition: background-color 0.2s;
-    border-radius: 8px;
-
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    word-break: break-word;
-    white-space: normal;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &:hover {
-        background-color: ${props => props.theme.bg};
-    }
-`
-const Markdown = styled.div`
-line-height:18px;
-font-size: 11px;
-white-space: pre-wrap;
- pre {
-      padding: 8px;
-      width: 90%;
-      font-size: 11px;
-      border-radius: 6px;
-      overflow-x: auto;
-      background-color: #1B1C1F;
-      color: #fff ;
-    }
-
-    h1,h2 {
-      font-size: 14px;
-      font-weight: 600;
-      color: ${(props) => props.theme.text};
-      opacity: 0.8;
-    }
-
-
-    h3 {
-      font-size: 12px;
-    }
-
-    p {
-      margin: 0px;
-      line-height: 1.35rem;
-      font-size: 11px;
-    }
-
-    code:not(pre code) {
-      border-radius: 6px;
-      padding: 2px 2px;
-      margin: 2px;
-      font-size: 9px;
-      display: inline;
-      background-color: #646464;
-      color: #fff ;
-    }
-    img{
-        max-width: 50%;
-    }
-    code {
-      overflow-x: auto;
-    }
-    a{
-        color: #007ee6;
-    }
-`
 const Toolkit = styled.kbd`
     position: absolute;
     right: 4px;
@@ -259,8 +234,8 @@ const Toolkit = styled.kbd`
 `
 const Loader = styled.div`
   margin: 2rem auto;
-  border: 4px solid ${props => props.theme.secondary.text};
-  border-top: 4px solid ${props => props.theme.primary.bg};
+  border: 4px solid ${props => props.theme.name === 'dark' ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.1)'};
+  border-top: 4px solid ${props => props.theme.name === 'dark' ? '#FFFFFF' : props.theme.primary.bg};
   border-radius: 50%;
   width: 12px;
   height: 12px;
@@ -280,7 +255,8 @@ const NoResults = styled.div`
   margin-top: 2rem;
   text-align: center;
   font-size: 14px;
-  color: #888;
+  color: ${props => props.theme.name === 'dark' ? '#E0E0E0' : '#505050'};
+  font-weight: 500;
 `;
 const AskAIButton = styled.button`
     display: flex;
@@ -293,25 +269,35 @@ const AskAIButton = styled.button`
     height: 50px;
     padding: 8px 24px;
     border: none;
-    border-radius: 6px;
-    background-color: ${props => props.theme.bg};
+    border-radius: 8px;
     color: ${props => props.theme.text}; 
     cursor: pointer;
-    transition: background-color 0.2s, box-shadow 0.2s;
     font-size: 16px;
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    background-color: ${props => props.theme.name === 'dark' ? 
+        'rgba(255, 255, 255, 0.05)' : 
+        'rgba(0, 0, 0, 0.03)'};
 
     &:hover {
-        opacity: 0.8;
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        background-color: ${props => props.theme.name === 'dark' ? 
+            'rgba(255, 255, 255, 0.1)' : 
+            'rgba(0, 0, 0, 0.06)'}; 
     }
-`
+`;
+
 const SearchHeader = styled.div`
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 12px;
     padding-bottom: 12px;
-    border-bottom: 1px solid ${props => props.theme.bg};
-`
+    border-bottom: 1px solid ${props => props.theme.name === 'dark' ? '#FFFFFF24' : 'rgba(0, 0, 0, 0.14)'};
+`;
+
+
 
 const TextField = styled.input`
     width: calc(100% - 32px);
@@ -327,8 +313,16 @@ const TextField = styled.input`
     &:focus {
         border-color: none;
     }
+
+    &::placeholder {
+        color: ${props => props.theme.name === 'dark' ? 'rgba(255, 255, 255, 0.6)' : 'rgba(0, 0, 0, 0.5)'} !important;
+        opacity: 100%; /* Force opacity to ensure placeholder is visible */
+        font-weight: 500;
+    }
 `
 
+
+
 const EscapeInstruction = styled.kbd`
     display: flex;
     align-items: center;
@@ -337,17 +331,21 @@ const EscapeInstruction = styled.kbd`
     padding: 4px 8px;
     border-radius: 4px;
     background-color: transparent;
-    border: 1px solid ${props => props.theme.secondary.text};
-    color: ${props => props.theme.text};
+    border: 1px solid ${props => props.theme.name === 'dark' ? 
+        'rgba(237, 237, 237, 0.6)' : 
+        'rgba(23, 23, 23, 0.6)'};
+    color: ${props => props.theme.name === 'dark' ? '#EDEDED' : '#171717'};
     font-size: 12px;
     font-family: 'Geist', sans-serif;
     white-space: nowrap;
     cursor: pointer;
     width: fit-content;
-    &:hover {
-        background-color: rgba(255, 255, 255, 0.1);
-    }
-`
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+`;
+
+
 export const SearchBar = ({
     apiKey = "74039c6d-bff7-44ce-ae55-2973cbf13837",
     apiHost = "https://gptcloud.arc53.com",
@@ -367,7 +365,7 @@ export const SearchBar = ({
     const abortControllerRef = React.useRef<AbortController | null>(null);
     const browserOS = getOS();
     const isTouch = 'ontouchstart' in window;
-    
+
     const getKeyboardInstruction = () => {
         if (isResultVisible) return "Enter";
         return browserOS === 'mac' ? '⌘ + K' : 'Ctrl + K';
@@ -394,7 +392,7 @@ export const SearchBar = ({
             }
         };
 
-     
+
         document.addEventListener('mousedown', handleClickOutside);
         document.addEventListener('keydown', handleKeyDown);
         return () => {
@@ -404,33 +402,34 @@ export const SearchBar = ({
     }, []);
 
     React.useEffect(() => {
-        if (!input) {
-            setResults([]);
-            return;
-        }
-        setLoading(true);
-        if (debounceTimeout.current) {
-            clearTimeout(debounceTimeout.current);
-        }
+    if (!input) {
+        setResults([]);
+        setLoading(false);
+        return;
+    }
+    setLoading(true);
+    if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current);
+    }
 
-        if (abortControllerRef.current) {
-            abortControllerRef.current.abort();
-        }
-        const abortController = new AbortController();
-        abortControllerRef.current = abortController;
+    if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+    }
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
 
-        debounceTimeout.current = setTimeout(() => {
-            getSearchResults(input, apiKey, apiHost, abortController.signal)
-                .then((data) => setResults(data))
-                .catch((err) => !abortController.signal.aborted && console.log(err))
-                .finally(() => setLoading(false));
-        }, 500);
+    debounceTimeout.current = setTimeout(() => {
+        getSearchResults(input, apiKey, apiHost, abortController.signal)
+            .then((data) => setResults(data))
+            .catch((err) => !abortController.signal.aborted && console.log(err))
+            .finally(() => setLoading(false));
+    }, 500);
 
-        return () => {
-            abortController.abort();
-            clearTimeout(debounceTimeout.current ?? undefined);
-        };
-    }, [input])
+    return () => {
+        abortController.abort();
+        clearTimeout(debounceTimeout.current ?? undefined);
+    };
+}, [input])
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
         if (event.key === 'Enter') {
@@ -462,6 +461,8 @@ export const SearchBar = ({
                     </SearchButton>
                     {
                         isResultVisible && (
+                            <>
+                            <SearchOverlay onClick={() => setIsResultVisible(false)} />
                             <SearchResults>
                                 <SearchHeader>
                                     <TextField
@@ -477,8 +478,8 @@ export const SearchBar = ({
                                     </EscapeInstruction>
                                 </SearchHeader>
                                 <AskAIButton onClick={openWidget}>
-                                    <img 
-                                        src="https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png" 
+                                    <img
+                                        src="https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png"
                                         alt="DocsGPT"
                                         width={24}
                                         height={24}
@@ -539,6 +540,7 @@ export const SearchBar = ({
                                     )}
                                 </SearchResultsScroll>
                             </SearchResults>
+                            </>
                         )
                     }
                     {

frontend/package.json

@@ -19,55 +19,54 @@
     ]
   },
   "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": "^8.0.5",
-    "react-router-dom": "^7.1.1",
-    "react-syntax-highlighter": "^15.5.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.6.1",
+    "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": "^9.1.0",
+    "eslint-config-prettier": "^10.1.5",
     "eslint-config-standard-with-typescript": "^34.0.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-n": "^15.7.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-promise": "^6.6.0",
-    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-unused-imports": "^4.1.4",
     "husky": "^8.0.0",
     "lint-staged": "^15.3.0",
     "postcss": "^8.4.49",
     "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5.7.2",
-    "vite": "^5.4.14",
-    "vite-plugin-svgr": "^4.2.0"
+    "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/About.tsx

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

frontend/src/App.tsx

@@ -3,7 +3,9 @@ import './locale/i18n';
 import { useState } from 'react';
 import { Outlet, Route, Routes } from 'react-router-dom';
 
-import About from './About';
+import Agents from './agents';
+import SharedAgentGate from './agents/SharedAgentGate';
+import ActionButtons from './components/ActionButtons';
 import Spinner from './components/Spinner';
 import Conversation from './conversation/Conversation';
 import { SharedConversation } from './conversation/SharedConversation';
@@ -12,7 +14,6 @@ import useTokenAuth from './hooks/useTokenAuth';
 import Navigation from './Navigation';
 import PageNotFound from './PageNotFound';
 import Setting from './settings';
-import Agents from './agents';
 
 function AuthWrapper({ children }: { children: React.ReactNode }) {
   const { isAuthLoading } = useTokenAuth();
@@ -28,17 +29,18 @@ function AuthWrapper({ children }: { children: React.ReactNode }) {
 }
 
 function MainLayout() {
-  const { isMobile } = useMediaQuery();
-  const [navOpen, setNavOpen] = useState(!isMobile);
+  const { isMobile, isTablet } = useMediaQuery();
+  const [navOpen, setNavOpen] = useState(!(isMobile || isTablet));
 
   return (
-    <div className="relative h-screen overflow-auto dark:bg-raisin-black">
+    <div className="relative h-screen overflow-hidden dark:bg-raisin-black">
       <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
+      <ActionButtons showNewChat={true} showShare={true} />
       <div
-        className={`h-[calc(100dvh-64px)] md:h-screen ${
-          !isMobile
-            ? `ml-0 ${!navOpen ? 'md:mx-auto lg:mx-auto' : 'md:ml-72'}`
-            : 'ml-0 md:ml-16'
+        className={`h-[calc(100dvh-64px)] overflow-auto lg:h-screen ${
+          !(isMobile || isTablet)
+            ? `ml-0 ${!navOpen ? 'lg:mx-auto' : 'lg:ml-72'}`
+            : 'ml-0 lg:ml-16'
         }`}
       >
         <Outlet />
@@ -46,14 +48,13 @@ function MainLayout() {
     </div>
   );
 }
-
 export default function App() {
   const [, , componentMounted] = useDarkTheme();
   if (!componentMounted) {
     return <div />;
   }
   return (
-    <div className="relative h-full overflow-auto">
+    <div className="relative h-full overflow-hidden">
       <Routes>
         <Route
           element={
@@ -63,11 +64,11 @@ export default function App() {
           }
         >
           <Route index element={<Conversation />} />
-          <Route path="/about" element={<About />} />
           <Route path="/settings/*" element={<Setting />} />
           <Route path="/agents/*" element={<Agents />} />
         </Route>
         <Route path="/share/:identifier" element={<SharedConversation />} />
+        <Route path="/shared/agent/:agentId" element={<SharedAgentGate />} />
         <Route path="/*" element={<PageNotFound />} />
       </Routes>
     </div>

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

@@ -42,11 +42,13 @@ import {
   selectConversations,
   selectModalStateDeleteConv,
   selectSelectedAgent,
+  selectSharedAgents,
   selectToken,
   setAgents,
   setConversations,
   setModalStateDeleteConv,
   setSelectedAgent,
+  setSharedAgents,
 } from './preferences/preferenceSlice';
 import Upload from './upload/Upload';
 
@@ -67,9 +69,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const conversationId = useSelector(selectConversationId);
   const modalStateDeleteConv = useSelector(selectModalStateDeleteConv);
   const agents = useSelector(selectAgents);
+  const sharedAgents = useSelector(selectSharedAgents);
   const selectedAgent = useSelector(selectSelectedAgent);
 
-  const { isMobile } = useMediaQuery();
+  const { isMobile, isTablet } = useMediaQuery();
   const [isDarkTheme] = useDarkTheme();
   const { showTokenModal, handleTokenSubmit } = useTokenAuth();
 
@@ -78,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);
@@ -129,7 +151,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
 
   useEffect(() => {
     fetchRecentAgents();
-  }, [agents, token, dispatch]);
+  }, [agents, sharedAgents, token, dispatch]);
 
   useEffect(() => {
     if (!conversations?.data) fetchConversations();
@@ -160,59 +182,72 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const handleAgentClick = (agent: Agent) => {
     resetConversation();
     dispatch(setSelectedAgent(agent));
-    if (isMobile) setNavOpen(!navOpen);
+    if (isMobile || isTablet) setNavOpen(!navOpen);
     navigate('/');
   };
 
   const handleTogglePin = (agent: Agent) => {
     userService.togglePinAgent(agent.id ?? '', token).then((response) => {
       if (response.ok) {
-        const updatedAgents = agents?.map((a) =>
-          a.id === agent.id ? { ...a, pinned: !a.pinned } : a,
-        );
-        dispatch(setAgents(updatedAgents));
+        const updatePinnedStatus = (a: Agent) =>
+          a.id === agent.id ? { ...a, pinned: !a.pinned } : a;
+        dispatch(setAgents(agents?.map(updatePinnedStatus)));
+        dispatch(setSharedAgents(sharedAgents?.map(updatePinnedStatus)));
       }
     });
   };
 
-  const handleConversationClick = (index: string) => {
-    dispatch(setSelectedAgent(null));
-    conversationService
-      .getConversation(index, token)
-      .then((response) => response.json())
-      .then((data) => {
-        dispatch(setConversation(data.queries));
-        dispatch(
-          updateConversationId({
-            query: { conversationId: index },
-          }),
+  const handleConversationClick = async (index: string) => {
+    try {
+      dispatch(setSelectedAgent(null));
+
+      const response = await conversationService.getConversation(index, token);
+      if (!response.ok) {
+        navigate('/');
+        return;
+      }
+
+      const data = await response.json();
+      if (!data) return;
+
+      dispatch(setConversation(data.queries));
+      dispatch(updateConversationId({ query: { conversationId: index } }));
+
+      if (!data.agent_id) {
+        navigate('/');
+        return;
+      }
+
+      let agent: Agent;
+      if (data.is_shared_usage) {
+        const sharedResponse = await userService.getSharedAgent(
+          data.shared_token,
+          token,
         );
-        if (data.agent_id) {
-          if (data.is_shared_usage) {
-            userService
-              .getSharedAgent(data.shared_token, token)
-              .then((response) => {
-                if (response.ok) {
-                  response.json().then((agent: Agent) => {
-                    navigate(`/agents/shared/${agent.shared_token}`);
-                  });
-                }
-              });
-          } else {
-            userService.getAgent(data.agent_id, token).then((response) => {
-              if (response.ok) {
-                response.json().then((agent: Agent) => {
-                  navigate('/');
-                  dispatch(setSelectedAgent(agent));
-                });
-              }
-            });
-          }
-        } else {
+        if (!sharedResponse.ok) {
           navigate('/');
-          dispatch(setSelectedAgent(null));
+          return;
         }
-      });
+        agent = await sharedResponse.json();
+        navigate(`/agents/shared/${agent.shared_token}`);
+      } else {
+        const agentResponse = await userService.getAgent(data.agent_id, token);
+        if (!agentResponse.ok) {
+          navigate('/');
+          return;
+        }
+        agent = await agentResponse.json();
+        if (agent.shared_token) {
+          navigate(`/agents/shared/${agent.shared_token}`);
+        } else {
+          await Promise.resolve(dispatch(setSelectedAgent(agent)));
+          navigate('/');
+        }
+      }
+    } catch (error) {
+      console.error('Error handling conversation click:', error);
+      navigate('/');
+    }
   };
 
   const resetConversation = () => {
@@ -251,14 +286,14 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   }
 
   useEffect(() => {
-    setNavOpen(!isMobile);
-  }, [isMobile]);
+    setNavOpen(!(isMobile || isTablet));
+  }, [isMobile, isTablet]);
 
   useDefaultDocument();
   return (
     <>
       {!navOpen && (
-        <div className="duration-25 absolute left-3 top-3 z-20 hidden transition-all md: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={() => {
@@ -286,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>
@@ -295,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'}
@@ -332,7 +367,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         <NavLink
           to={'/'}
           onClick={() => {
-            if (isMobile) {
+            if (isMobile || isTablet) {
               setNavOpen(!navOpen);
             }
             resetConversation();
@@ -340,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
@@ -348,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"
@@ -368,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'
                           : ''
@@ -385,17 +420,21 @@ 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>
                       <div
-                        className={`${isMobile ? 'flex' : 'invisible flex group-hover:visible'} items-center px-3`}
+                        className={`${isMobile || isTablet ? 'flex' : 'invisible flex group-hover:visible'} items-center px-3`}
                       >
                         <button
                           className="rounded-full hover:opacity-75"
@@ -414,9 +453,12 @@ 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) {
+                      setNavOpen(false);
+                    }
                     navigate('/agents');
                   }}
                 >
@@ -427,16 +469,22 @@ 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">
-                    Manage Agents
+                  <p className="text-eerie-black dark:text-bright-gray overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
+                    {t('manageAgents')}
                   </p>
                 </div>
               </div>
             </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"
-              onClick={() => navigate('/agents')}
+              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);
+                }
+                dispatch(setSelectedAgent(null));
+                navigate('/agents');
+              }}
             >
               <div className="flex w-6 justify-center">
                 <img
@@ -445,15 +493,15 @@ 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">
-                Manage Agents
+              <p className="text-eerie-black dark:text-bright-gray overflow-hidden text-sm leading-6 text-ellipsis whitespace-nowrap">
+                {t('manageAgents')}
               </p>
             </div>
           )}
           {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) => (
@@ -478,18 +526,18 @@ 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) {
-                  setNavOpen(!navOpen);
+                if (isMobile || isTablet) {
+                  setNavOpen(false);
                 }
                 resetConversation();
               }}
               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' : ''
                 }`
               }
@@ -497,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 />
 
@@ -553,10 +603,10 @@ 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 md: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 md:hidden"
+            className="h-6 w-6 lg:hidden"
             onClick={() => setNavOpen(true)}
           >
             <img
@@ -565,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],
@@ -65,22 +64,18 @@ export default function AgentPreview() {
   );
 
   const handleQuestionSubmission = (
-    updatedQuestion?: string,
+    question?: string,
     updated?: boolean,
     indx?: number,
   ) => {
-    if (
-      updated === true &&
-      updatedQuestion !== undefined &&
-      indx !== undefined
-    ) {
+    if (updated === true && question !== undefined && indx !== undefined) {
       handleQuestion({
-        question: updatedQuestion,
+        question,
         index: indx,
         isRetry: false,
       });
-    } else if (input.trim() && status !== 'loading') {
-      const currentInput = input.trim();
+    } else if (question && status !== 'loading') {
+      const currentInput = question.trim();
       if (lastQueryReturnedErr && queries.length > 0) {
         const lastQueryIndex = queries.length - 1;
         handleQuestion({
@@ -95,23 +90,15 @@ export default function AgentPreview() {
           index: undefined,
         });
       }
-      setInput('');
-    }
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.key === 'Enter' && !event.shiftKey) {
-      event.preventDefault();
-      handleQuestionSubmission();
     }
   };
 
   useEffect(() => {
-    dispatch(resetConversation());
+    dispatch(resetPreview());
     return () => {
       if (fetchStream.current) fetchStream.current.abort();
-      handleAbort();
-      dispatch(resetConversation());
+      handlePreviewAbort();
+      dispatch(resetPreview());
     };
   }, [dispatch]);
 
@@ -135,9 +122,7 @@ export default function AgentPreview() {
         </div>
         <div className="flex w-[95%] max-w-[1500px] flex-col items-center gap-4 pb-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
           <MessageInput
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onSubmit={() => handleQuestionSubmission()}
+            onSubmit={(text) => handleQuestionSubmission(text)}
             loading={status === 'loading'}
             showSourceButton={selectedAgent ? false : true}
             showToolButton={selectedAgent ? false : true}

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

@@ -21,6 +21,7 @@ import {
 import { useDarkTheme } from '../hooks';
 import { selectToken, setSelectedAgent } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
+import SharedAgentCard from './SharedAgentCard';
 import { Agent } from './types';
 
 export default function SharedAgent() {
@@ -56,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],
   );
@@ -91,22 +90,18 @@ export default function SharedAgent() {
   );
 
   const handleQuestionSubmission = (
-    updatedQuestion?: string,
+    question?: string,
     updated?: boolean,
     indx?: number,
   ) => {
-    if (
-      updated === true &&
-      updatedQuestion !== undefined &&
-      indx !== undefined
-    ) {
+    if (updated === true && question !== undefined && indx !== undefined) {
       handleQuestion({
-        question: updatedQuestion,
+        question,
         index: indx,
         isRetry: false,
       });
-    } else if (input.trim() && status !== 'loading') {
-      const currentInput = input.trim();
+    } else if (question && status !== 'loading') {
+      const currentInput = question.trim();
       if (lastQueryReturnedErr && queries.length > 0) {
         const lastQueryIndex = queries.length - 1;
         handleQuestion({
@@ -148,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>
@@ -156,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>
@@ -181,17 +180,15 @@ export default function SharedAgent() {
             }
           />
         </div>
-        <div className="flex w-[95%] max-w-[1500px] flex-col items-center gap-4 pb-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
+        <div className="flex w-[95%] max-w-[1500px] flex-col items-center pb-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
           <MessageInput
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onSubmit={() => handleQuestionSubmission()}
+            onSubmit={(text) => handleQuestionSubmission(text)}
             loading={status === 'loading'}
             showSourceButton={sharedAgent ? false : true}
             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>
@@ -199,65 +196,3 @@ export default function SharedAgent() {
     </div>
   );
 }
-
-function SharedAgentCard({ agent }: { agent: Agent }) {
-  return (
-    <div className="flex w-full max-w-[720px] flex-col rounded-3xl border border-dark-gray p-6 shadow-sm dark:border-grey sm:w-fit sm:min-w-[480px]">
-      <div className="flex items-center gap-3">
-        <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full p-1">
-          <img src={Robot} className="h-full w-full object-contain" />
-        </div>
-        <div className="flex max-h-[92px] w-[80%] flex-col gap-px">
-          <h2 className="text-base font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-lg">
-            {agent.name}
-          </h2>
-          <p className="overflow-y-auto text-wrap break-all text-xs text-[#71717A] dark:text-[#949494] sm:text-sm">
-            {agent.description}
-          </p>
-        </div>
-      </div>
-      <div className="mt-4 flex items-center gap-8">
-        {agent.shared_metadata?.shared_by && (
-          <p className="text-xs font-light text-[#212121] dark:text-[#E0E0E0] sm:text-sm">
-            by {agent.shared_metadata.shared_by}
-          </p>
-        )}
-        {agent.shared_metadata?.shared_at && (
-          <p className="text-xs font-light text-[#71717A] dark:text-[#949494] sm:text-sm">
-            Shared on{' '}
-            {new Date(agent.shared_metadata.shared_at).toLocaleString('en-US', {
-              month: 'long',
-              day: 'numeric',
-              year: 'numeric',
-              hour: '2-digit',
-              minute: '2-digit',
-              hour12: true,
-            })}
-          </p>
-        )}
-      </div>
-      {agent.tools.length > 0 && (
-        <div className="mt-8">
-          <p className="text-sm font-semibold text-[#212121] dark:text-[#E0E0E0] sm:text-base">
-            Connected Tools
-          </p>
-          <div className="mt-2 flex flex-wrap gap-2">
-            {agent.tools.map((tool, index) => (
-              <span
-                key={index}
-                className="flex items-center gap-1 rounded-full bg-bright-gray px-3 py-1 text-xs font-light text-[#212121] dark:bg-dark-charcoal dark:text-[#E0E0E0]"
-              >
-                <img
-                  src={`/toolIcons/tool_${tool}.svg`}
-                  alt={`${tool} icon`}
-                  className="h-3 w-3"
-                />{' '}
-                {tool}
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

frontend/src/agents/SharedAgentCard.tsx

@@ -0,0 +1,72 @@
+import Robot from '../assets/robot.svg';
+import { Agent } from './types';
+
+export default function SharedAgentCard({ agent }: { agent: Agent }) {
+  return (
+    <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={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-eerie-black text-base font-semibold sm:text-lg dark:text-[#E0E0E0]">
+            {agent.name}
+          </h2>
+          <p className="dark:text-gray-4000 overflow-y-auto text-xs text-wrap break-all text-[#71717A] sm:text-sm">
+            {agent.description}
+          </p>
+        </div>
+      </div>
+      {agent.shared_metadata && (
+        <div className="mt-4 flex items-center gap-8">
+          {agent.shared_metadata?.shared_by && (
+            <p className="text-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="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',
+                {
+                  month: 'long',
+                  day: 'numeric',
+                  year: 'numeric',
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  hour12: true,
+                },
+              )}
+            </p>
+          )}
+        </div>
+      )}
+      {agent.tool_details && agent.tool_details.length > 0 && (
+        <div className="mt-8">
+          <p className="text-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="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`}
+                  alt={`${tool.name} icon`}
+                  className="h-3 w-3"
+                />{' '}
+                {tool.name}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/agents/SharedAgentGate.tsx

@@ -0,0 +1,7 @@
+import { Navigate, useParams } from 'react-router-dom';
+
+export default function SharedAgentGate() {
+  const { agentId } = useParams();
+
+  return <Navigate to={`/agents/shared/${agentId}`} replace />;
+}

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

@@ -4,11 +4,11 @@ import { Route, Routes, useNavigate } from 'react-router-dom';
 
 import userService from '../api/services/userService';
 import Edit from '../assets/edit.svg';
+import Link from '../assets/link-gray.svg';
 import Monitoring from '../assets/monitoring.svg';
 import Pin from '../assets/pin.svg';
 import Trash from '../assets/red-trash.svg';
 import Robot from '../assets/robot.svg';
-import Link from '../assets/link-gray.svg';
 import ThreeDots from '../assets/three-dots.svg';
 import UnPin from '../assets/unpin.svg';
 import ContextMenu, { MenuOption } from '../components/ContextMenu';
@@ -22,9 +22,11 @@ import { ActiveState } from '../models/misc';
 import {
   selectAgents,
   selectSelectedAgent,
+  selectSharedAgents,
   selectToken,
   setAgents,
   setSelectedAgent,
+  setSharedAgents,
 } from '../preferences/preferenceSlice';
 import AgentLogs from './AgentLogs';
 import NewAgent from './NewAgent';
@@ -59,13 +61,12 @@ const sectionConfig = {
 };
 
 function AgentsList() {
-  const navigate = useNavigate();
   const dispatch = useDispatch();
   const token = useSelector(selectToken);
   const agents = useSelector(selectAgents);
+  const sharedAgents = useSelector(selectSharedAgents);
   const selectedAgent = useSelector(selectSelectedAgent);
 
-  const [sharedAgents, setSharedAgents] = useState<Agent[]>([]);
   const [loadingUserAgents, setLoadingUserAgents] = useState<boolean>(true);
   const [loadingSharedAgents, setLoadingSharedAgents] = useState<boolean>(true);
 
@@ -89,7 +90,7 @@ function AgentsList() {
       const response = await userService.getSharedAgents(token);
       if (!response.ok) throw new Error('Failed to fetch shared agents');
       const data = await response.json();
-      setSharedAgents(data);
+      dispatch(setSharedAgents(data));
       setLoadingSharedAgents(false);
     } catch (error) {
       console.error('Error:', error);
@@ -110,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>
@@ -162,11 +163,17 @@ function AgentsList() {
       </div> */}
       <AgentSection
         agents={agents ?? []}
+        updateAgents={(updatedAgents) => {
+          dispatch(setAgents(updatedAgents));
+        }}
         loading={loadingUserAgents}
         section="user"
       />
       <AgentSection
         agents={sharedAgents ?? []}
+        updateAgents={(updatedAgents) => {
+          dispatch(setSharedAgents(updatedAgents));
+        }}
         loading={loadingSharedAgents}
         section="shared"
       />
@@ -176,10 +183,12 @@ function AgentsList() {
 
 function AgentSection({
   agents,
+  updateAgents,
   loading,
   section,
 }: {
   agents: Agent[];
+  updateAgents?: (agents: Agent[]) => void;
   loading: boolean;
   section: keyof typeof sectionConfig;
 }) {
@@ -197,33 +206,36 @@ 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
           </button>
         )}
       </div>
-      <div className="grid w-full grid-cols-2 gap-2 md:flex md:flex-wrap md:gap-4">
+      <div>
         {loading ? (
           <div className="flex h-72 w-full items-center justify-center">
             <Spinner />
           </div>
         ) : agents && agents.length > 0 ? (
-          agents.map((agent) => (
-            <AgentCard
-              key={agent.id}
-              agent={agent}
-              agents={agents}
-              section={section}
-            />
-          ))
+          <div className="grid grid-cols-1 gap-4 sm:flex sm:flex-wrap">
+            {agents.map((agent, idx) => (
+              <AgentCard
+                key={agent.id}
+                agent={agent}
+                agents={agents}
+                updateAgents={updateAgents}
+                section={section}
+              />
+            ))}
+          </div>
         ) : (
           <div className="flex h-72 w-full flex-col items-center justify-center gap-3 text-base text-[#18181B] dark:text-[#E0E0E0]">
             <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
@@ -239,10 +251,12 @@ function AgentSection({
 function AgentCard({
   agent,
   agents,
+  updateAgents,
   section,
 }: {
   agent: Agent;
   agents: Agent[];
+  updateAgents?: (agents: Agent[]) => void;
   section: keyof typeof sectionConfig;
 }) {
   const navigate = useNavigate();
@@ -264,7 +278,23 @@ function AgentCard({
           return { ...prevAgent, pinned: !prevAgent.pinned };
         return prevAgent;
       });
-      dispatch(setAgents(updatedAgents));
+      updateAgents?.(updatedAgents);
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+  const handleHideSharedAgent = async () => {
+    try {
+      const response = await userService.removeSharedAgent(
+        agent.id ?? '',
+        token,
+      );
+      if (!response.ok) throw new Error('Failed to hide shared agent');
+      const updatedAgents = agents.filter(
+        (prevAgent) => prevAgent.id !== agent.id,
+      );
+      updateAgents?.(updatedAgents);
     } catch (error) {
       console.error('Error:', error);
     }
@@ -294,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',
@@ -326,8 +360,30 @@ function AgentCard({
           navigate(`/agents/shared/${agent.shared_token}`);
         },
         variant: 'primary',
-        iconWidth: 14,
-        iconHeight: 14,
+        iconWidth: 12,
+        iconHeight: 12,
+      },
+      {
+        icon: agent.pinned ? UnPin : Pin,
+        label: agent.pinned ? 'Unpin' : 'Pin agent',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          togglePin();
+        },
+        variant: 'primary',
+        iconWidth: 18,
+        iconHeight: 18,
+      },
+      {
+        icon: Trash,
+        label: 'Remove',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          handleHideSharedAgent();
+        },
+        variant: 'danger',
+        iconWidth: 13,
+        iconHeight: 13,
       },
     ],
   };
@@ -354,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();
@@ -366,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
@@ -374,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>
@@ -392,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/agents/types/index.ts

@@ -1,3 +1,9 @@
+export type ToolSummary = {
+  id: string;
+  name: string;
+  display_name: string;
+};
+
 export type Agent = {
   id?: string;
   name: string;
@@ -8,6 +14,7 @@ export type Agent = {
   retriever: string;
   prompt_id: string;
   tools: string[];
+  tool_details?: ToolSummary[];
   agent_type: string;
   status: string;
   key?: string;

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/endpoints.ts

@@ -18,6 +18,7 @@ const endpoints = {
     SHARED_AGENT: (id: string) => `/api/shared_agent?token=${id}`,
     SHARED_AGENTS: '/api/shared_agents',
     SHARE_AGENT: `/api/share_agent`,
+    REMOVE_SHARED_AGENT: (id: string) => `/api/remove_shared_agent?id=${id}`,
     AGENT_WEBHOOK: (id: string) => `/api/agent_webhook?id=${id}`,
     PROMPTS: '/api/get_prompts',
     CREATE_PROMPT: '/api/create_prompt',

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> =>
@@ -41,6 +41,8 @@ const userService = {
     apiClient.get(endpoints.USER.SHARED_AGENTS, token),
   shareAgent: (data: any, token: string | null): Promise<any> =>
     apiClient.put(endpoints.USER.SHARE_AGENT, data, token),
+  removeSharedAgent: (id: string, token: string | null): Promise<any> =>
+    apiClient.delete(endpoints.USER.REMOVE_SHARED_AGENT(id), token),
   getAgentWebhook: (id: string, token: string | null): Promise<any> =>
     apiClient.get(endpoints.USER.AGENT_WEBHOOK(id), token),
   getPrompts: (token: string | null): Promise<any> =>

frontend/src/assets/alert.svg

@@ -1,3 +1,3 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.16669 11.5H9.83335V13.1666H8.16669V11.5ZM8.16669 4.83329H9.83335V9.83329H8.16669V4.83329ZM8.99169 0.666626C4.39169 0.666626 0.666687 4.39996 0.666687 8.99996C0.666687 13.6 4.39169 17.3333 8.99169 17.3333C13.6 17.3333 17.3334 13.6 17.3334 8.99996C17.3334 4.39996 13.6 0.666626 8.99169 0.666626ZM9.00002 15.6666C5.31669 15.6666 2.33335 12.6833 2.33335 8.99996C2.33335 5.31663 5.31669 2.33329 9.00002 2.33329C12.6834 2.33329 15.6667 5.31663 15.6667 8.99996C15.6667 12.6833 12.6834 15.6666 9.00002 15.6666Z" fill="#F44336"/>
+<path d="M8.16669 11.5H9.83335V13.1666H8.16669V11.5ZM8.16669 4.83329H9.83335V9.83329H8.16669V4.83329ZM8.99169 0.666626C4.39169 0.666626 0.666687 4.39996 0.666687 8.99996C0.666687 13.6 4.39169 17.3333 8.99169 17.3333C13.6 17.3333 17.3334 13.6 17.3334 8.99996C17.3334 4.39996 13.6 0.666626 8.99169 0.666626ZM9.00002 15.6666C5.31669 15.6666 2.33335 12.6833 2.33335 8.99996C2.33335 5.31663 5.31669 2.33329 9.00002 2.33329C12.6834 2.33329 15.6667 5.31663 15.6667 8.99996C15.6667 12.6833 12.6834 15.6666 9.00002 15.6666Z" fill="#ECECF1"/>
 </svg>

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/link-gray.svg

@@ -1,3 +1,3 @@
 <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 1.5H3C2.46957 1.5 1.96086 1.71071 1.58579 2.08579C1.21071 2.46086 1 2.96957 1 3.5V15.5C1 16.0304 1.21071 16.5391 1.58579 16.9142C1.96086 17.2893 2.46957 17.5 3 17.5H15C15.5304 17.5 16.0391 17.2893 16.4142 16.9142C16.7893 16.5391 17 16.0304 17 15.5V11.5M9 9.5L17 1.5M17 1.5V6.5M17 1.5H12" stroke="#949494" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 1.5H3C2.46957 1.5 1.96086 1.71071 1.58579 2.08579C1.21071 2.46086 1 2.96957 1 3.5V15.5C1 16.0304 1.21071 16.5391 1.58579 16.9142C1.96086 17.2893 2.46957 17.5 3 17.5H15C15.5304 17.5 16.0391 17.2893 16.4142 16.9142C16.7893 16.5391 17 16.0304 17 15.5V11.5M9 9.5L17 1.5M17 1.5V6.5M17 1.5H12" stroke="#747474" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </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/ActionButtons.tsx

@@ -0,0 +1,89 @@
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import newChatIcon from '../assets/openNewChat.svg';
+import ShareIcon from '../assets/share.svg';
+import { ShareConversationModal } from '../modals/ShareConversationModal';
+import { useState } from 'react';
+import { selectConversationId } from '../preferences/preferenceSlice';
+import { useDispatch } from 'react-redux';
+import { AppDispatch } from '../store';
+import {
+  setConversation,
+  updateConversationId,
+} from '../conversation/conversationSlice';
+
+interface ActionButtonsProps {
+  className?: string;
+  showNewChat?: boolean;
+  showShare?: boolean;
+}
+
+import { useNavigate } from 'react-router-dom';
+
+export default function ActionButtons({
+  className = '',
+  showNewChat = true,
+  showShare = true,
+}: ActionButtonsProps) {
+  const { t } = useTranslation();
+  const dispatch = useDispatch<AppDispatch>();
+  const conversationId = useSelector(selectConversationId);
+  const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
+  const navigate = useNavigate();
+
+  const newChat = () => {
+    dispatch(setConversation([]));
+    dispatch(
+      updateConversationId({
+        query: { conversationId: null },
+      }),
+    );
+    navigate('/');
+  };
+  return (
+    <div className="fixed right-4 top-0 z-10 flex h-16 flex-col justify-center">
+      <div className={`flex items-center gap-2 sm:gap-4 ${className}`}>
+        {showNewChat && (
+          <button
+            title="Open New Chat"
+            onClick={newChat}
+            className="flex items-center gap-1 rounded-full p-2 hover:bg-bright-gray dark:hover:bg-[#28292E] lg:hidden"
+          >
+            <img
+              className="filter dark:invert"
+              alt="NewChat"
+              width={21}
+              height={21}
+              src={newChatIcon}
+            />
+          </button>
+        )}
+
+        {showShare && conversationId && (
+          <>
+            <button
+              title="Share"
+              onClick={() => setShareModalState(true)}
+              className="rounded-full p-2 hover:bg-bright-gray dark:hover:bg-[#28292E]"
+            >
+              <img
+                className="filter dark:invert"
+                alt="share"
+                width={16}
+                height={16}
+                src={ShareIcon}
+              />
+            </button>
+            {isShareModalOpen && (
+              <ShareConversationModal
+                close={() => setShareModalState(false)}
+                conversationId={conversationId}
+              />
+            )}
+          </>
+        )}
+        <div>{/* <UserButton  /> */}</div>
+      </div>
+    </div>
+  );
+}

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({
@@ -30,7 +30,17 @@ export default function ContextMenu({
   offset = { x: 0, y: 8 },
 }: ContextMenuProps) {
   const menuRef = useRef<HTMLDivElement>(null);
-
+  useEffect(() => {
+    if (isOpen && menuRef.current) {
+      const positionStyle = getMenuPosition();
+      if (menuRef.current) {
+        Object.assign(menuRef.current.style, {
+          top: positionStyle.top,
+          left: positionStyle.left,
+        });
+      }
+    }
+  }, [isOpen]);
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -61,20 +71,45 @@ export default function ContextMenu({
     let top = rect.bottom + scrollY + offset.y;
     let left = rect.right + scrollX + offset.x;
 
+    // Get menu dimensions (need ref to be available)
+    const menuWidth = menuRef.current?.offsetWidth || 144; // Default min-width
+    const menuHeight = menuRef.current?.offsetHeight || 0;
+
+    // Get viewport dimensions
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    // Adjust position based on specified position
     switch (position) {
       case 'bottom-left':
         left = rect.left + scrollX - offset.x;
         break;
       case 'top-right':
-        top = rect.top + scrollY - offset.y;
+        top = rect.top + scrollY - offset.y - menuHeight;
         break;
       case 'top-left':
-        top = rect.top + scrollY - offset.y;
+        top = rect.top + scrollY - offset.y - menuHeight;
         left = rect.left + scrollX - offset.x;
         break;
       // bottom-right is default
     }
 
+    if (left + menuWidth > viewportWidth) {
+      left = Math.max(5, viewportWidth - menuWidth - 5);
+    }
+
+    if (left < 5) {
+      left = 5;
+    }
+
+    if (top + menuHeight > viewportHeight + scrollY) {
+      top = rect.top + scrollY - menuHeight - offset.y;
+    }
+
+    if (top < scrollY + 5) {
+      top = rect.bottom + scrollY + offset.y;
+    }
+
     return {
       position: 'fixed',
       top: `${top}px`,
@@ -90,7 +125,7 @@ export default function ContextMenu({
       onClick={(e) => e.stopPropagation()}
     >
       <div
-        className="flex w-32 flex-col rounded-xl bg-lotion text-sm shadow-xl dark:bg-charleston-green-2 md:w-36"
+        className="bg-lotion dark:bg-charleston-green-2 flex flex-col rounded-xl text-sm shadow-xl"
         style={{ minWidth: '144px' }}
       >
         {options.map((option, index) => (
@@ -109,7 +144,7 @@ export default function ContextMenu({
             } `}
           >
             {option.icon && (
-              <div className="flex w-4 justify-center">
+              <div className="flex w-4 min-w-4 shrink-0 justify-center">
                 <img
                   width={option.iconWidth || 16}
                   height={option.iconHeight || 16}
@@ -119,7 +154,7 @@ export default function ContextMenu({
                 />
               </div>
             )}
-            <span>{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}
+    </>
+  );
+}