Merge branch 'main' into 1059-migrating-database-to-new-model

2025-11-29 08:33:20 +00:00 · 2024-09-09 23:55:25 +01:00
parent c686d950d0 a1d3592d08
commit 44d225e6ca
64 changed files with 3517 additions and 4971 deletions
--- a/application/api/answer/routes.py
+++ b/application/api/answer/routes.py
@@ -1,7 +1,7 @@
 import asyncio
 import os
 import sys
-from flask import Blueprint, request, Response
+from flask import Blueprint, request, Response, current_app
 import json
 import datetime
 import logging
@@ -126,7 +126,11 @@ def save_conversation(conversation_id, question, response, source_log_docs, llm)
                "role": "assistant",
                "content": "Summarise following conversation in no more than 3 "
                "words, respond ONLY with the summary, use the same "
-                "language as the system \n\nUser: " + question + "\n\n" + "AI: " + response,
+                "language as the system \n\nUser: "
+                + question
+                + "\n\n"
+                + "AI: "
+                + response,
            },
            {
                "role": "user",
@@ -166,7 +170,10 @@ def get_prompt(prompt_id):
    return prompt


-def complete_stream(question, retriever, conversation_id, user_api_key):
+def complete_stream(
+    question, retriever, conversation_id, user_api_key, isNoneDoc=False
+):
+
    try:
        response_full = ""
        source_log_docs = []
@@ -179,9 +186,17 @@ def complete_stream(question, retriever, conversation_id, user_api_key):
            elif "source" in line:
                source_log_docs.append(line["source"])

-        llm = LLMCreator.create_llm(settings.LLM_NAME, api_key=settings.API_KEY, user_api_key=user_api_key)
+        if isNoneDoc:
+            for doc in source_log_docs:
+                doc["source"] = "None"
+
+        llm = LLMCreator.create_llm(
+            settings.LLM_NAME, api_key=settings.API_KEY, user_api_key=user_api_key
+        )
        if user_api_key is None:
-            conversation_id = save_conversation(conversation_id, question, response_full, source_log_docs, llm)
+            conversation_id = save_conversation(
+                conversation_id, question, response_full, source_log_docs, llm
+            )
            # send data.type = "end" to indicate that the stream has ended as json
            data = json.dumps({"type": "id", "id": str(conversation_id)})
            yield f"data: {data}\n\n"
@@ -205,7 +220,6 @@ def complete_stream(question, retriever, conversation_id, user_api_key):
 def stream():
    try:
        data = request.get_json()
-        # get parameter from url question
        question = data["question"]
        if "history" not in data:
            history = []
@@ -252,10 +266,9 @@ def stream():
            source = {}
            user_api_key = None

-        """ if source["active_docs"].split("/")[0] == "default" or source["active_docs"].split("/")[0] == "local":
-            retriever_name = "classic"
-        else:
-            retriever_name = source["active_docs"] """
+        current_app.logger.info(f"/stream - request_data: {data}, source: {source}",
+            extra={"data": json.dumps({"request_data": data, "source": source})}
+        )

        prompt = get_prompt(prompt_id)
       
@@ -277,20 +290,23 @@ def stream():
                retriever=retriever,
                conversation_id=conversation_id,
                user_api_key=user_api_key,
+                isNoneDoc=data.get("isNoneDoc"),
            ),
            mimetype="text/event-stream",
        )

-    except ValueError as err:
+    except ValueError:
        message = "Malformed request body"
-        print("\033[91merr", str(err), file=sys.stderr)
+        print("\033[91merr", str(message), file=sys.stderr)
        return Response(
            error_stream_generate(message),
            status=400,
            mimetype="text/event-stream",
        )
    except Exception as e:
-        print("\033[91merr", str(e), file=sys.stderr)
+        current_app.logger.error(f"/stream - error: {str(e)} - traceback: {traceback.format_exc()}",
+          extra={"error": str(e), "traceback": traceback.format_exc()}
+        )
        message = e.args[0]
        status_code = 400
        # # Custom exceptions with two arguments, index 1 as status code
@@ -357,6 +373,10 @@ def api_answer():

        prompt = get_prompt(prompt_id)

+        current_app.logger.info(f"/api/answer - request_data: {data}, source: {source}",
+            extra={"data": json.dumps({"request_data": data, "source": source})}
+        )
+
        retriever = RetrieverCreator.create_retriever(
            retriever_name,
            question=question,
@@ -376,7 +396,13 @@ def api_answer():
            elif "answer" in line:
                response_full += line["answer"]

-        llm = LLMCreator.create_llm(settings.LLM_NAME, api_key=settings.API_KEY, user_api_key=user_api_key)
+        if data.get("isNoneDoc"):
+            for doc in source_log_docs:
+                doc["source"] = "None"
+
+        llm = LLMCreator.create_llm(
+            settings.LLM_NAME, api_key=settings.API_KEY, user_api_key=user_api_key
+        )

        result = {"answer": response_full, "sources": source_log_docs}
        result["conversation_id"] = str(
@@ -385,16 +411,15 @@ def api_answer():

        return result
    except Exception as e:
-        # print whole traceback
-        traceback.print_exc()
-        print(str(e))
+        current_app.logger.error(f"/api/answer - error: {str(e)} - traceback: {traceback.format_exc()}",
+          extra={"error": str(e), "traceback": traceback.format_exc()}
+        )
        return bad_request(500, str(e))


@answer.route("/api/search", methods=["POST"])
 def api_search():
    data = request.get_json()
-    # get parameter from url question
    question = data["question"]
    if "chunks" in data:
        chunks = int(data["chunks"])
@@ -421,6 +446,10 @@ def api_search():
    else:
        token_limit = settings.DEFAULT_MAX_HISTORY
        
+    current_app.logger.info(f"/api/answer - request_data: {data}, source: {source}",
+            extra={"data": json.dumps({"request_data": data, "source": source})}
+    )
+
    retriever = RetrieverCreator.create_retriever(
        retriever_name,
        question=question,
@@ -433,4 +462,9 @@ def api_search():
        user_api_key=user_api_key,
    )
    docs = retriever.search()
+
+    if data.get("isNoneDoc"):
+        for doc in docs:
+            doc["source"] = "None"
+
    return docs
--- a/application/app.py
+++ b/application/app.py
@@ -6,12 +6,14 @@ from application.core.settings import settings
 from application.api.user.routes import user
 from application.api.answer.routes import answer
 from application.api.internal.routes import internal
+from application.core.logging_config import setup_logging

 if platform.system() == "Windows":
    import pathlib
    pathlib.PosixPath = pathlib.WindowsPath

 dotenv.load_dotenv()
+setup_logging()

 app = Flask(__name__)
 app.register_blueprint(user)
--- a/application/celery_init.py
+++ b/application/celery_init.py
@@ -1,9 +1,15 @@
 from celery import Celery
 from application.core.settings import settings
+from celery.signals import setup_logging

 def make_celery(app_name=__name__):
    celery = Celery(app_name, broker=settings.CELERY_BROKER_URL, backend=settings.CELERY_RESULT_BACKEND)
    celery.conf.update(settings)
    return celery

+@setup_logging.connect
+def config_loggers(*args, **kwargs):
+    from application.core.logging_config import setup_logging
+    setup_logging()
+
 celery = make_celery()
--- a/application/core/logging_config.py
+++ b/application/core/logging_config.py
@@ -0,0 +1,22 @@
+from logging.config import dictConfig
+
+def setup_logging():
+    dictConfig({
+        'version': 1,
+        'formatters': {
+            'default': {
+                'format': '[%(asctime)s] %(levelname)s in %(module)s: %(message)s',
+            }
+        },
+        "handlers": {
+            "console": {
+                "class": "logging.StreamHandler",
+                "stream": "ext://sys.stdout",
+                "formatter": "default",
+            }
+        },
+        'root': {
+            'level': 'INFO',
+            'handlers': ['console'],
+        },
+    })
--- a/application/core/settings.py
+++ b/application/core/settings.py
@@ -18,7 +18,7 @@ class Settings(BaseSettings):
    DEFAULT_MAX_HISTORY: int = 150
    MODEL_TOKEN_LIMITS: dict = {"gpt-3.5-turbo": 4096, "claude-2": 1e5}
    UPLOAD_FOLDER: str = "inputs"
-    VECTOR_STORE: str = "faiss"  # "faiss" or "elasticsearch" or "qdrant"
+    VECTOR_STORE: str = "faiss"  # "faiss" or "elasticsearch" or "qdrant" or "milvus"
    RETRIEVERS_ENABLED: list = ["classic_rag", "duckduck_search"] # also brave_search

    API_URL: str = "http://localhost:7091"  # backend url for celery worker
@@ -29,6 +29,7 @@ class Settings(BaseSettings):
    OPENAI_API_VERSION: Optional[str] = None  # azure openai api version
    AZURE_DEPLOYMENT_NAME: Optional[str] = None  # azure deployment name for answering
    AZURE_EMBEDDINGS_DEPLOYMENT_NAME: Optional[str] = None  # azure deployment name for embeddings
+    OPENAI_BASE_URL: Optional[str] = None # openai base url for open ai compatable models

    # elasticsearch
    ELASTIC_CLOUD_ID: Optional[str] = None  # cloud id for elasticsearch
@@ -61,6 +62,11 @@ class Settings(BaseSettings):
    QDRANT_PATH: Optional[str] = None
    QDRANT_DISTANCE_FUNC: str = "Cosine"

+    # Milvus vectorstore config
+    MILVUS_COLLECTION_NAME: Optional[str] = "docsgpt"
+    MILVUS_URI: Optional[str] = "./milvus_local.db"   # milvus lite version as default
+    MILVUS_TOKEN: Optional[str] = ""
+
    BRAVE_SEARCH_API_KEY: Optional[str] = None

    FLASK_DEBUG_MODE: bool = False
--- a/application/llm/openai.py
+++ b/application/llm/openai.py
@@ -2,25 +2,23 @@ from application.llm.base import BaseLLM
 from application.core.settings import settings


+
 class OpenAILLM(BaseLLM):

    def __init__(self, api_key=None, user_api_key=None, *args, **kwargs):
-        global openai
        from openai import OpenAI

        super().__init__(*args, **kwargs)
-        self.client = OpenAI(
-            api_key=api_key,
-        )
+        if settings.OPENAI_BASE_URL:
+            self.client = OpenAI(
+                api_key=api_key,
+                base_url=settings.OPENAI_BASE_URL
+            )
+        else:
+            self.client = OpenAI(api_key=api_key)
        self.api_key = api_key
        self.user_api_key = user_api_key

-    def _get_openai(self):
-        # Import openai when needed
-        import openai
-
-        return openai
-
    def _raw_gen(
        self,
        baseself,
@@ -73,8 +71,3 @@ class AzureOpenAILLM(OpenAILLM):
            api_base=settings.OPENAI_API_BASE,
            deployment_name=settings.AZURE_DEPLOYMENT_NAME,
        )
-
-    def _get_openai(self):
-        openai = super()._get_openai()
-
-        return openai
--- a/application/parser/file/html_parser.py
+++ b/application/parser/file/html_parser.py
@@ -3,7 +3,6 @@
 Contains parser for html files.

 """
-import re
 from pathlib import Path
 from typing import Dict, Union

@@ -18,66 +17,8 @@ class HTMLParser(BaseParser):
        return {}

    def parse_file(self, file: Path, errors: str = "ignore") -> Union[str, list[str]]:
-        """Parse file.
+        from langchain_community.document_loaders import BSHTMLLoader

-            Returns:
-            Union[str, List[str]]: a string or a List of strings.
-        """
-        try:
-            from unstructured.partition.html import partition_html
-            from unstructured.staging.base import convert_to_isd
-            from unstructured.cleaners.core import clean
-        except ImportError:
-            raise ValueError("unstructured package is required to parse HTML files.")
-
-        # Using the unstructured library to convert the html to isd format
-        # isd sample : isd = [
-        #   {"text": "My Title", "type": "Title"},
-        #   {"text": "My Narrative", "type": "NarrativeText"}
-        # ]
-        with open(file, "r", encoding="utf-8") as fp:
-            elements = partition_html(file=fp)
-            isd = convert_to_isd(elements)
-
-            # Removing non ascii charactwers from isd_el['text']
-        for isd_el in isd:
-            isd_el['text'] = isd_el['text'].encode("ascii", "ignore").decode()
-
-        # Removing all the \n characters from isd_el['text'] using regex and replace with single space
-        # Removing all the extra spaces  from isd_el['text'] using regex and replace with single space
-        for isd_el in isd:
-            isd_el['text'] = re.sub(r'\n', ' ', isd_el['text'], flags=re.MULTILINE | re.DOTALL)
-            isd_el['text'] = re.sub(r"\s{2,}", " ", isd_el['text'], flags=re.MULTILINE | re.DOTALL)
-
-        # more cleaning: extra_whitespaces, dashes, bullets, trailing_punctuation
-        for isd_el in isd:
-            clean(isd_el['text'], extra_whitespace=True, dashes=True, bullets=True, trailing_punctuation=True)
-
-        # Creating a list of all the indexes of isd_el['type'] = 'Title'
-        title_indexes = [i for i, isd_el in enumerate(isd) if isd_el['type'] == 'Title']
-
-        # Creating 'Chunks' - List of lists of strings 
-        # each list starting with isd_el['type'] = 'Title' and all the data till the next 'Title'
-        # Each Chunk can be thought of as an individual set of data, which can be sent to the model
-        # Where Each Title is grouped together with the data under it
-
-        Chunks = [[]]
-        final_chunks = list(list())
-
-        for i, isd_el in enumerate(isd):
-            if i in title_indexes:
-                Chunks.append([])
-            Chunks[-1].append(isd_el['text'])
-
-        # Removing all the chunks with sum of length of all the strings in the chunk < 25
-        # TODO: This value can be an user defined variable
-        for chunk in Chunks:
-            # sum of length of all the strings in the chunk
-            sum = 0
-            sum += len(str(chunk))
-            if sum < 25:
-                Chunks.remove(chunk)
-            else:
-                # appending all the approved chunks to final_chunks as a single string       
-                final_chunks.append(" ".join([str(item) for item in chunk]))
-        return final_chunks
+        loader = BSHTMLLoader(file)
+        data = loader.load()        
+        return data
--- a/application/parser/remote/crawler_loader.py
+++ b/application/parser/remote/crawler_loader.py
@@ -5,7 +5,7 @@ from application.parser.remote.base import BaseRemote

 class CrawlerLoader(BaseRemote):
    def __init__(self, limit=10):
-        from langchain.document_loaders import WebBaseLoader
+        from langchain_community.document_loaders import WebBaseLoader
        self.loader = WebBaseLoader  # Initialize the document loader
        self.limit = limit  # Set the limit for the number of pages to scrape

--- a/application/parser/remote/sitemap_loader.py
+++ b/application/parser/remote/sitemap_loader.py
@@ -5,7 +5,7 @@ from application.parser.remote.base import BaseRemote

 class SitemapLoader(BaseRemote):
    def __init__(self, limit=20):
-        from langchain.document_loaders import WebBaseLoader
+        from langchain_community.document_loaders import WebBaseLoader
        self.loader = WebBaseLoader
        self.limit = limit  # Adding limit to control the number of URLs to process

--- a/application/requirements.txt
+++ b/application/requirements.txt
@@ -1,34 +1,36 @@
-anthropic==0.12.0
-boto3==1.34.6
+anthropic==0.34.0
+boto3==1.34.153
+beautifulsoup4==4.12.3
 celery==5.3.6
-dataclasses_json==0.6.3
+dataclasses_json==0.6.7
 docx2txt==0.8
-duckduckgo-search==5.3.0
+duckduckgo-search==6.2.6
 EbookLib==0.18
-elasticsearch==8.12.0
+elasticsearch==8.14.0
 escodegen==1.0.11
 esprima==4.0.1
-faiss-cpu==1.7.4
 Flask==3.0.1
-gunicorn==22.0.0
+faiss-cpu==1.8.0.post1
+gunicorn==23.0.0
 html2text==2020.1.16
 javalang==0.13.0
-langchain==0.1.4
-langchain-openai==0.0.5
+langchain==0.2.16
+langchain-community==0.2.16
+langchain-core==0.2.38
+langchain-openai==0.1.23
 openapi3_parser==1.1.16
-pandas==2.2.0
-pydantic_settings==2.1.0
-pymongo==4.6.3
+pandas==2.2.2
+pydantic_settings==2.4.0
+pymongo==4.8.0
 PyPDF2==3.0.1
 python-dotenv==1.0.1
-qdrant-client==1.9.0
+qdrant-client==1.11.0
 redis==5.0.1
 Requests==2.32.0
 retry==0.9.2
 sentence-transformers
-tiktoken
+tiktoken==0.7.0
 torch
 tqdm==4.66.3
-transformers==4.36.2
-unstructured==0.12.2
+transformers==4.44.0
 Werkzeug==3.0.3
--- a/application/retriever/brave_search.py
+++ b/application/retriever/brave_search.py
@@ -2,7 +2,7 @@ import json
 from application.retriever.base import BaseRetriever
 from application.core.settings import settings
 from application.llm.llm_creator import LLMCreator
-from application.utils import count_tokens
+from application.utils import num_tokens_from_string
 from langchain_community.tools import BraveSearch


@@ -78,7 +78,7 @@ class BraveRetSearch(BaseRetriever):
            self.chat_history.reverse()
            for i in self.chat_history:
                if "prompt" in i and "response" in i:
-                    tokens_batch = count_tokens(i["prompt"]) + count_tokens(
+                    tokens_batch = num_tokens_from_string(i["prompt"]) + num_tokens_from_string(
                        i["response"]
                    )
                    if tokens_current_history + tokens_batch < self.token_limit:
--- a/application/retriever/classic_rag.py
+++ b/application/retriever/classic_rag.py
@@ -3,7 +3,7 @@ from application.core.settings import settings
 from application.vectorstore.vector_creator import VectorCreator
 from application.llm.llm_creator import LLMCreator

-from application.utils import count_tokens
+from application.utils import num_tokens_from_string


 class ClassicRAG(BaseRetriever):
@@ -82,7 +82,7 @@ class ClassicRAG(BaseRetriever):
            self.chat_history.reverse()
            for i in self.chat_history:
                if "prompt" in i and "response" in i:
-                    tokens_batch = count_tokens(i["prompt"]) + count_tokens(
+                    tokens_batch = num_tokens_from_string(i["prompt"]) + num_tokens_from_string(
                        i["response"]
                    )
                    if tokens_current_history + tokens_batch < self.token_limit:
--- a/application/retriever/duckduck_search.py
+++ b/application/retriever/duckduck_search.py
@@ -1,7 +1,7 @@
 from application.retriever.base import BaseRetriever
 from application.core.settings import settings
 from application.llm.llm_creator import LLMCreator
-from application.utils import count_tokens
+from application.utils import num_tokens_from_string
 from langchain_community.tools import DuckDuckGoSearchResults
 from langchain_community.utilities import DuckDuckGoSearchAPIWrapper

@@ -95,7 +95,7 @@ class DuckDuckSearch(BaseRetriever):
            self.chat_history.reverse()
            for i in self.chat_history:
                if "prompt" in i and "response" in i:
-                    tokens_batch = count_tokens(i["prompt"]) + count_tokens(
+                    tokens_batch = num_tokens_from_string(i["prompt"]) + num_tokens_from_string(
                        i["response"]
                    )
                    if tokens_current_history + tokens_batch < self.token_limit:
--- a/application/retriever/retriever_creator.py
+++ b/application/retriever/retriever_creator.py
@@ -5,15 +5,16 @@ from application.retriever.brave_search import BraveRetSearch


 class RetrieverCreator:
-    retievers = {
+    retrievers = {
        'classic': ClassicRAG,
        'duckduck_search': DuckDuckSearch,
-        'brave_search': BraveRetSearch
+        'brave_search': BraveRetSearch,
+        'default': ClassicRAG
    }

    @classmethod
    def create_retriever(cls, type, *args, **kwargs):
-        retiever_class = cls.retievers.get(type.lower())
+        retiever_class = cls.retrievers.get(type.lower())
        if not retiever_class:
            raise ValueError(f"No retievers class found for type {type}")
        return retiever_class(*args, **kwargs)
--- a/application/usage.py
+++ b/application/usage.py
@@ -2,7 +2,7 @@ import sys
 from pymongo import MongoClient
 from datetime import datetime
 from application.core.settings import settings
-from application.utils import count_tokens
+from application.utils import num_tokens_from_string

 mongo = MongoClient(settings.MONGO_URI)
 db = mongo["docsgpt"]
@@ -24,9 +24,9 @@ def update_token_usage(user_api_key, token_usage):
 def gen_token_usage(func):
    def wrapper(self, model, messages, stream, **kwargs):
        for message in messages:
-            self.token_usage["prompt_tokens"] += count_tokens(message["content"])
+            self.token_usage["prompt_tokens"] += num_tokens_from_string(message["content"])
        result = func(self, model, messages, stream, **kwargs)
-        self.token_usage["generated_tokens"] += count_tokens(result)
+        self.token_usage["generated_tokens"] += num_tokens_from_string(result)
        update_token_usage(self.user_api_key, self.token_usage)
        return result

@@ -36,14 +36,14 @@ def gen_token_usage(func):
 def stream_token_usage(func):
    def wrapper(self, model, messages, stream, **kwargs):
        for message in messages:
-            self.token_usage["prompt_tokens"] += count_tokens(message["content"])
+            self.token_usage["prompt_tokens"] += num_tokens_from_string(message["content"])
        batch = []
        result = func(self, model, messages, stream, **kwargs)
        for r in result:
            batch.append(r)
            yield r
        for line in batch:
-            self.token_usage["generated_tokens"] += count_tokens(line)
+            self.token_usage["generated_tokens"] += num_tokens_from_string(line)
        update_token_usage(self.user_api_key, self.token_usage)

    return wrapper
--- a/application/utils.py
+++ b/application/utils.py
@@ -1,6 +1,22 @@
-from transformers import GPT2TokenizerFast
+import tiktoken

-tokenizer = GPT2TokenizerFast.from_pretrained('gpt2')
-tokenizer.model_max_length = 100000
-def count_tokens(string):
-    return len(tokenizer(string)['input_ids'])
+_encoding = None
+
+def get_encoding():
+    global _encoding
+    if _encoding is None:
+        _encoding = tiktoken.get_encoding("cl100k_base")
+    return _encoding
+
+def num_tokens_from_string(string: str) -> int:
+    encoding = get_encoding()
+    num_tokens = len(encoding.encode(string))
+    return num_tokens
+
+def count_tokens_docs(docs):
+    docs_content = ""
+    for doc in docs:
+        docs_content += doc.page_content
+
+    tokens = num_tokens_from_string(docs_content)
+    return tokens
--- a/application/vectorstore/base.py
+++ b/application/vectorstore/base.py
@@ -1,13 +1,30 @@
 from abc import ABC, abstractmethod
 import os
-from langchain_community.embeddings import (
-    HuggingFaceEmbeddings,
-    CohereEmbeddings,
-    HuggingFaceInstructEmbeddings,
-)
+from sentence_transformers import SentenceTransformer
 from langchain_openai import OpenAIEmbeddings
 from application.core.settings import settings

+class EmbeddingsWrapper:
+    def __init__(self, model_name, *args, **kwargs):
+        self.model = SentenceTransformer(model_name, config_kwargs={'allow_dangerous_deserialization': True}, *args, **kwargs)
+        self.dimension = self.model.get_sentence_embedding_dimension()
+
+    def embed_query(self, query: str):
+        return self.model.encode(query).tolist()
+    
+    def embed_documents(self, documents: list):
+        return self.model.encode(documents).tolist()
+    
+    def __call__(self, text):
+        if isinstance(text, str):
+            return self.embed_query(text)
+        elif isinstance(text, list):
+            return self.embed_documents(text)
+        else:
+            raise ValueError("Input must be a string or a list of strings")
+
+
+
 class EmbeddingsSingleton:
    _instances = {}

@@ -23,16 +40,15 @@ class EmbeddingsSingleton:
    def _create_instance(embeddings_name, *args, **kwargs):
        embeddings_factory = {
            "openai_text-embedding-ada-002": OpenAIEmbeddings,
-            "huggingface_sentence-transformers/all-mpnet-base-v2": HuggingFaceEmbeddings,
-            "huggingface_sentence-transformers-all-mpnet-base-v2": HuggingFaceEmbeddings,
-            "huggingface_hkunlp/instructor-large": HuggingFaceInstructEmbeddings,
-            "cohere_medium": CohereEmbeddings
+            "huggingface_sentence-transformers/all-mpnet-base-v2": lambda: EmbeddingsWrapper("sentence-transformers/all-mpnet-base-v2"),
+            "huggingface_sentence-transformers-all-mpnet-base-v2": lambda: EmbeddingsWrapper("sentence-transformers/all-mpnet-base-v2"),
+            "huggingface_hkunlp/instructor-large": lambda: EmbeddingsWrapper("hkunlp/instructor-large"),
        }

-        if embeddings_name not in embeddings_factory:
-            raise ValueError(f"Invalid embeddings_name: {embeddings_name}")
-
-        return embeddings_factory[embeddings_name](*args, **kwargs)
+        if embeddings_name in embeddings_factory:
+            return embeddings_factory[embeddings_name](*args, **kwargs)
+        else:
+            return EmbeddingsWrapper(embeddings_name, *args, **kwargs)

 class BaseVectorStore(ABC):
    def __init__(self):
@@ -58,22 +74,14 @@ class BaseVectorStore(ABC):
                    embeddings_name,
                    openai_api_key=embeddings_key
                )
-        elif embeddings_name == "cohere_medium":
-            embedding_instance = EmbeddingsSingleton.get_instance(
-                embeddings_name,
-                cohere_api_key=embeddings_key
-            )
        elif embeddings_name == "huggingface_sentence-transformers/all-mpnet-base-v2":
            if os.path.exists("./model/all-mpnet-base-v2"):
                embedding_instance = EmbeddingsSingleton.get_instance(
-                    embeddings_name,
-                    model_name="./model/all-mpnet-base-v2",
-                    model_kwargs={"device": "cpu"}
+                    embeddings_name="./model/all-mpnet-base-v2",
                )
            else:
                embedding_instance = EmbeddingsSingleton.get_instance(
                    embeddings_name,
-                    model_kwargs={"device": "cpu"}
                )
        else:
            embedding_instance = EmbeddingsSingleton.get_instance(embeddings_name)
--- a/application/vectorstore/faiss.py
+++ b/application/vectorstore/faiss.py
@@ -24,7 +24,8 @@ class FaissStore(BaseVectorStore):
            )
        else:
            self.docsearch = FAISS.load_local(
-                self.path, embeddings
+                self.path, embeddings, 
+                allow_dangerous_deserialization=True
            )
        self.assert_embedding_dimensions(embeddings)

@@ -47,10 +48,10 @@ class FaissStore(BaseVectorStore):
        """
        if settings.EMBEDDINGS_NAME == "huggingface_sentence-transformers/all-mpnet-base-v2":
            try:
-                word_embedding_dimension = embeddings.client[1].word_embedding_dimension
+                word_embedding_dimension = embeddings.dimension
            except AttributeError as e:
-                raise AttributeError("word_embedding_dimension not found in embeddings.client[1]") from e
+                raise AttributeError("'dimension' attribute not found in embeddings instance. Make sure the embeddings object is properly initialized.") from e
            docsearch_index_dimension = self.docsearch.index.d
            if word_embedding_dimension != docsearch_index_dimension:
-                raise ValueError(f"word_embedding_dimension ({word_embedding_dimension}) " +
-                                 f"!= docsearch_index_word_embedding_dimension ({docsearch_index_dimension})")
+                raise ValueError(f"Embedding dimension mismatch: embeddings.dimension ({word_embedding_dimension}) " +
+                                 f"!= docsearch index dimension ({docsearch_index_dimension})")
--- a/application/vectorstore/milvus.py
+++ b/application/vectorstore/milvus.py
@@ -0,0 +1,37 @@
+from typing import List, Optional
+from uuid import uuid4
+
+
+from application.core.settings import settings
+from application.vectorstore.base import BaseVectorStore
+
+
+class MilvusStore(BaseVectorStore):
+    def __init__(self, path: str = "", embeddings_key: str = "embeddings"):
+        super().__init__()
+        from langchain_milvus import Milvus
+
+        connection_args = {
+            "uri": settings.MILVUS_URI,
+            "token": settings.MILVUS_TOKEN,
+        }
+        self._docsearch = Milvus(
+            embedding_function=self._get_embeddings(settings.EMBEDDINGS_NAME, embeddings_key),
+            collection_name=settings.MILVUS_COLLECTION_NAME,
+            connection_args=connection_args,
+        )
+        self._path = path
+
+    def search(self, question, k=2, *args, **kwargs):
+        return self._docsearch.similarity_search(query=question, k=k, filter={"path": self._path} *args, **kwargs)
+
+    def add_texts(self, texts: List[str], metadatas: Optional[List[dict]], *args, **kwargs):
+        ids = [str(uuid4()) for _ in range(len(texts))]
+
+        return self._docsearch.add_texts(texts=texts, metadatas=metadatas, ids=ids, *args, **kwargs)
+
+    def save_local(self, *args, **kwargs):
+        pass
+
+    def delete_index(self, *args, **kwargs):
+        pass
--- a/application/vectorstore/vector_creator.py
+++ b/application/vectorstore/vector_creator.py
@@ -1,5 +1,6 @@
 from application.vectorstore.faiss import FaissStore
 from application.vectorstore.elasticsearch import ElasticsearchStore
+from application.vectorstore.milvus import MilvusStore
 from application.vectorstore.mongodb import MongoDBVectorStore
 from application.vectorstore.qdrant import QdrantStore

@@ -10,6 +11,7 @@ class VectorCreator:
        "elasticsearch": ElasticsearchStore,
        "mongodb": MongoDBVectorStore,
        "qdrant": QdrantStore,
+        "milvus": MilvusStore,
    }

    @classmethod
--- a/application/worker.py
+++ b/application/worker.py
@@ -2,8 +2,8 @@ import os
 import shutil
 import string
 import zipfile
-import tiktoken
 from urllib.parse import urljoin
+import logging

 import requests
 from bson.objectid import ObjectId
@@ -14,6 +14,8 @@ from application.parser.remote.remote_creator import RemoteCreator
 from application.parser.open_ai_func import call_openai_api
 from application.parser.schema.base import Document
 from application.parser.token_func import group_split
+from application.utils import count_tokens_docs
+


 # Define a function to extract metadata from a given filename.
@@ -40,7 +42,7 @@ def extract_zip_recursive(zip_path, extract_to, current_depth=0, max_depth=5):
        max_depth (int): Maximum allowed depth of recursion to prevent infinite loops.
    """
    if current_depth > max_depth:
-        print(f"Reached maximum recursion depth of {max_depth}")
+        logging.warning(f"Reached maximum recursion depth of {max_depth}")
        return

    with zipfile.ZipFile(zip_path, "r") as zip_ref:
@@ -88,14 +90,13 @@ def ingest_worker(self, directory, formats, name_job, filename, user, retriever=
    max_tokens = 1250
    recursion_depth = 2
    full_path = os.path.join(directory, user, name_job)
-    import sys

-    print(full_path, file=sys.stderr)
+    logging.info(f"Ingest file: {full_path}", extra={"user": user, "job": name_job})
    # check if API_URL env variable is set
    file_data = {"name": name_job, "file": filename, "user": user}
-    response = requests.get(urljoin(settings.API_URL, "/api/download"), params=file_data)
-    # check if file is in the response
-    print(response, file=sys.stderr)
+    response = requests.get(
+        urljoin(settings.API_URL, "/api/download"), params=file_data
+    )
    file = response.content

    if not os.path.exists(full_path):
@@ -134,7 +135,7 @@ def ingest_worker(self, directory, formats, name_job, filename, user, retriever=

    if sample:
        for i in range(min(5, len(raw_docs))):
-            print(raw_docs[i].text)
+            logging.info(f"Sample document {i}: {raw_docs[i]}")

    # get files from outputs/inputs/index.faiss and outputs/inputs/index.pkl
    # and send them to the server (provide user and name in form)
@@ -170,6 +171,7 @@ def remote_worker(self, source_data, name_job, user, loader, directory="temp", r
    if not os.path.exists(full_path):
        os.makedirs(full_path)
    self.update_state(state="PROGRESS", meta={"current": 1})
+    logging.info(f"Remote job: {full_path}", extra={"user": user, "job": name_job, source_data: source_data})

    remote_loader = RemoteCreator.create_loader(loader)
    raw_docs = remote_loader.load_data(source_data)
@@ -202,23 +204,3 @@ def remote_worker(self, source_data, name_job, user, loader, directory="temp", r
    shutil.rmtree(full_path)

    return {"urls": source_data, "name_job": name_job, "user": user, "limited": False}
-
-
-def count_tokens_docs(docs):
-    # Here we convert the docs list to a string and calculate the number of tokens the string represents.
-    # docs_content = (" ".join(docs))
-    docs_content = ""
-    for doc in docs:
-        docs_content += doc.page_content
-
-    tokens, total_price = num_tokens_from_string(string=docs_content, encoding_name="cl100k_base")
-    # Here we print the number of tokens and the approx user cost with some visually appealing formatting.
-    return tokens
-
-
-def num_tokens_from_string(string: str, encoding_name: str) -> int:
-    # Function to convert string to tokens and estimate user cost.
-    encoding = tiktoken.get_encoding(encoding_name)
-    num_tokens = len(encoding.encode(string))
-    total_price = (num_tokens / 1000) * 0.0004
-    return num_tokens, total_price
--- a/docker-compose-azure.yaml
+++ b/docker-compose-azure.yaml
@@ -1,5 +1,3 @@
-version: "3.9"
-
 services:
  frontend:
    build: ./frontend
--- a/docker-compose-dev.yaml
+++ b/docker-compose-dev.yaml
@@ -1,5 +1,3 @@
-version: "3.9"
-
 services:

  redis:
--- a/docker-compose-local.yaml
+++ b/docker-compose-local.yaml
@@ -1,5 +1,3 @@
-version: "3.9"
-
 services:
  frontend:
    build: ./frontend
--- a/docker-compose-mock.yaml
+++ b/docker-compose-mock.yaml
@@ -1,5 +1,3 @@
-version: "3.9"
-
 services:
  frontend:
    build: ./frontend
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -1,5 +1,3 @@
-version: "3.9"
-
 services:
  frontend:
    build: ./frontend
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
--- a/docs/package.json
+++ b/docs/package.json
@@ -7,7 +7,7 @@
  "license": "MIT",
  "dependencies": {
    "@vercel/analytics": "^1.1.1",
-    "docsgpt": "^0.3.7",
+    "docsgpt": "^0.4.1",
    "next": "^14.1.1",
    "nextra": "^2.13.2",
    "nextra-theme-docs": "^2.13.2",
--- a/docs/pages/Extensions/react-widget.md
+++ b/docs/pages/Extensions/react-widget.md
@@ -17,25 +17,31 @@ Now, you can use the widget in your component like this :
 ```jsx
 <DocsGPTWidget
  apiHost="https://your-docsgpt-api.com"
-  selectDocs="local/docs.zip"
  apiKey=""
-  avatar = "https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png",
-  title = "Get AI assistance",
-  description = "DocsGPT's AI Chatbot is here to help",
-  heroTitle = "Welcome to DocsGPT !",
+  avatar = "https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png"
+  title = "Get AI assistance"
+  description = "DocsGPT's AI Chatbot is here to help"
+  heroTitle = "Welcome to DocsGPT !"
  heroDescription="This chatbot is built with DocsGPT and utilises GenAI, 
  please review important information using sources."
+  theme = "dark"
+  buttonIcon = "https://your-icon"
+  buttonBg = "#222327"
 />
 ```
-DocsGPTWidget takes 8 **props** with default fallback values:
+To tailor the widget to your needs, you can configure the following props in your component:
 1. `apiHost` — The URL of your DocsGPT API.
-2. `selectDocs` — The documentation source that you want to use for your widget (e.g. `default` or `local/docs1.zip`).
+2. `theme` — Allows to select your specific theme (dark or light).
 3. `apiKey` — Usually, it's empty.
 4. `avatar`: Specifies the URL of the avatar or image representing the chatbot.
 5. `title`: Sets the title text displayed in the chatbot interface.
 6. `description`: Provides a brief description of the chatbot's purpose or functionality.
 7. `heroTitle`: Displays a welcome title when users interact with the chatbot.
 8. `heroDescription`: Provide additional introductory text or information about the chatbot's capabilities.
+9. `buttonIcon`: Specifies the url of the icon image for the widget.
+10. `buttonBg`: Allows to specify the Background color of the widget.
+11. `size`: Sets the size of the widget ( small, medium).
+

 ### How to use DocsGPTWidget with [Nextra](https://nextra.site/) (Next.js + MDX)
 Install your widget as described above and then go to your `pages/` folder and create a new file `_app.js` with the following content:
@@ -55,22 +61,30 @@ export default function MyApp({ Component, pageProps }) {
 ```html
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>DocsGPT Widget</title>
-</head>
-<body>
-  <div id="app"></div>
-  <!-- Include the widget script from dist/modern or dist/legacy -->
-  <script src="https://unpkg.com/docsgpt/dist/modern/main.js" type="module"></script>
-  <script type="module">
-    window.onload = function() {
-      renderDocsGPTWidget('app');
-    }
-  </script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>HTML + CSS</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>This is a simple HTML + CSS template!</h1>
+    <div id="app"></div>
+    <!-- Include the widget script from dist/modern or dist/legacy -->
+    <script
+      src="https://unpkg.com/docsgpt/dist/modern/main.js"
+      type="module"
+    ></script>
+    <script type="module">
+      window.onload = function () {
+        renderDocsGPTWidget("app", {
+          apiKey: "",
+          size: "medium",
+        });
+      };
+    </script>
+  </body>
 </html>
 ```
 To link the widget to your api and your documents you can pass parameters to the renderDocsGPTWidget('div id', { parameters }).
@@ -82,22 +96,24 @@ To link the widget to your api and your documents you can pass parameters to the
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DocsGPT Widget</title>
+  <script src="https://unpkg.com/docsgpt/dist/modern/main.js" type="module"></script>  
 </head>
 <body>
  <div id="app"></div>
  <!-- Include the widget script from dist/modern or dist/legacy -->
-  <script src="https://unpkg.com/docsgpt/dist/modern/main.js" type="module"></script>
  <script type="module">
    window.onload = function() {
      renderDocsGPTWidget('app', {
        apiHost: 'http://localhost:7001',
-        selectDocs: 'default',
-        apiKey: '',
+        apiKey:"",
        avatar: 'https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png',
        title: 'Get AI assistance',
        description: "DocsGPT's AI Chatbot is here to help",
        heroTitle: 'Welcome to DocsGPT!',
-        heroDescription: 'This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources.'
+        heroDescription: 'This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources.',
+        theme:"dark",
+        buttonIcon:"https://your-icon",
+        buttonBg:"#222327"
      });
    }
  </script>
--- a/docs/pages/Guides/How-to-use-different-LLM.mdx
+++ b/docs/pages/Guides/How-to-use-different-LLM.mdx
@@ -36,6 +36,14 @@ List of latest supported LLMs are https://github.com/arc53/DocsGPT/blob/main/app
 Visit application/llm and select the file of your selected llm and there you will find the speicifc requirements needed to be filled in order to use it,i.e API key of that llm.
 </Steps>

+### For OpenAI-Compatible Endpoints:
+DocsGPT supports the use of OpenAI-compatible endpoints through base URL substitution. This feature allows you to use alternative AI models or services that implement the OpenAI API interface.
+
+
+Set the OPENAI_BASE_URL in your environment. You can change .env file with OPENAI_BASE_URL with the desired base URL or docker-compose.yml file and add the environment variable to the backend container.
+
+> Make sure you have the right API_KEY and correct LLM_NAME.
+



--- a/docs/pages/_app.mdx
+++ b/docs/pages/_app.mdx
@@ -4,7 +4,7 @@ export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
-        <DocsGPTWidget apiKey="d61a020c-ac8f-4f23-bb98-458e4da3c240" />
+        <DocsGPTWidget apiKey="d61a020c-ac8f-4f23-bb98-458e4da3c240" theme="dark" />
    </>
  )
 }
--- a/extensions/chrome/package-lock.json
+++ b/extensions/chrome/package-lock.json
@@ -107,12 +107,12 @@
      }
    },
    "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
      "dev": true,
      "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
      },
      "engines": {
        "node": ">=8"
@@ -260,9 +260,9 @@
      }
    },
    "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
      "dev": true,
      "dependencies": {
        "to-regex-range": "^5.0.1"
@@ -884,12 +884,12 @@
      "dev": true
    },
    "braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
      "dev": true,
      "requires": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
      }
    },
    "camelcase-css": {
@@ -1000,9 +1000,9 @@
      }
    },
    "fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
      "dev": true,
      "requires": {
        "to-regex-range": "^5.0.1"
--- a/extensions/react-widget/README.md
+++ b/extensions/react-widget/README.md
@@ -27,15 +27,18 @@ To link the widget to your api and your documents you can pass parameters to the

    const App = () => {
      return <DocsGPTWidget
-             apiHost = 'http://localhost:7001',
-             selectDocs = 'default',
-             apiKey = '',
-             avatar = 'https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png',
-             title = 'Get AI assistance',
-             description = 'DocsGPT\'s AI Chatbot is here to help',
-             heroTitle = 'Welcome to DocsGPT !',
-             heroDescription='This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources.'
-             />;
+               apiHost="https://your-docsgpt-api.com"
+               apiKey=""
+               avatar = "https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png"
+               title = "Get AI assistance"
+               description = "DocsGPT's AI Chatbot is here to help"
+               heroTitle = "Welcome to DocsGPT !"
+               heroDescription="This chatbot is built with DocsGPT and utilises GenAI, 
+               please review important information using sources."
+               theme = "dark"
+               buttonIcon = "https://your-icon"
+               buttonBg = "#222327"
+          />;
    };
 ```

@@ -80,15 +83,17 @@ To link the widget to your api and your documents you can pass parameters to the
        <script src="https://unpkg.com/docsgpt/dist/modern/main.js" type="module"></script>
        <script type="module">
          window.onload = function() {
-            renderDocsGPTWidget('app', , {
+            renderDocsGPTWidget('app', {
              apiHost: 'http://localhost:7001',
-              selectDocs: 'default',
-              apiKey: '',
+              apiKey:"",
              avatar: 'https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png',
              title: 'Get AI assistance',
              description: "DocsGPT's AI Chatbot is here to help",
-              heroTitle: 'Welcome to DocsGPT !',
-              heroDescription: 'This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources.'
+              heroTitle: 'Welcome to DocsGPT!',
+              heroDescription: 'This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources.',
+              theme:"dark",
+              buttonIcon:"https://your-icon.svg",
+              buttonBg:"#222327"
            });
          }
        </script>
--- a/extensions/react-widget/package-lock.json
+++ b/extensions/react-widget/package-lock.json
--- a/extensions/react-widget/package.json
+++ b/extensions/react-widget/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "docsgpt",
-  "version": "0.3.9",
+  "name": "docsgpt-react",
+  "version": "0.4.2",
  "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",
@@ -11,18 +11,6 @@
    "dist",
    "package.json"
  ],
-  "targets": {
-    "modern": {
-      "engines": {
-        "browsers": "Chrome 80"
-      }
-    },
-    "legacy": {
-      "engines": {
-        "browsers": "> 0.5%, last 2 versions, not dead"
-      }
-    }
-  },
  "@parcel/resolver-default": {
    "packageExports": true
  },
@@ -31,6 +19,7 @@
  },
  "scripts": {
    "build": "parcel build src/main.tsx --public-url ./",
+    "build:react": "parcel build src/index.ts",
    "dev": "parcel src/index.html -p 3000",
    "test": "jest",
    "lint": "eslint",
@@ -39,7 +28,6 @@
  },
  "dependencies": {
    "@babel/plugin-transform-flow-strip-types": "^7.23.3",
-    "@bpmn-io/snarkdown": "^2.2.0",
    "@parcel/resolver-glob": "^2.12.0",
    "@parcel/transformer-svg-react": "^2.12.0",
    "@parcel/transformer-typescript-tsc": "^2.12.0",
@@ -51,6 +39,7 @@
    "flow-bin": "^0.229.2",
    "i": "^0.3.7",
    "install": "^0.13.0",
+    "markdown-it": "^14.1.0",
    "npm": "^10.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
@@ -63,6 +52,7 @@
    "@parcel/packager-ts": "^2.12.0",
    "@parcel/transformer-typescript-types": "^2.12.0",
    "@types/dompurify": "^3.0.5",
+    "@types/markdown-it": "^14.1.2",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "babel-loader": "^8.0.4",
--- a/extensions/react-widget/publish.sh
+++ b/extensions/react-widget/publish.sh
@@ -0,0 +1,43 @@
+#!/bin/bash
+## chmod +x publish.sh - to upgrade ownership
+set -e
+cat package.json >> package_copy.json
+cat package-lock.json >> package-lock_copy.json
+publish_package() {
+  PACKAGE_NAME=$1
+  BUILD_COMMAND=$2
+  # Update package name in package.json
+  jq --arg name "$PACKAGE_NAME" '.name=$name' package.json > temp.json && mv temp.json package.json
+
+  # Remove 'target' key if the package name is 'docsgpt-react'
+  if [ "$PACKAGE_NAME" = "docsgpt-react" ]; then
+    jq 'del(.targets)' package.json > temp.json && mv temp.json package.json
+  fi
+
+  if [ -d "dist" ]; then
+    echo "Deleting existing dist directory..."
+    rm -rf dist
+  fi
+
+  npm version patch
+
+  npm run "$BUILD_COMMAND"
+
+  # Publish to npm
+  npm publish
+  # Clean up
+  mv package_copy.json package.json
+  mv package-lock_copy.json package-lock.json
+  echo "Published ${PACKAGE_NAME}"
+}
+
+# Publish docsgpt package
+publish_package "docsgpt" "build"
+
+# Publish docsgpt-react package
+publish_package "docsgpt-react" "build:react"
+
+
+rm -rf package_copy.json
+rm -rf package-lock_copy.json
+echo "---Process completed---"
--- a/extensions/react-widget/src/assets/message.svg
+++ b/extensions/react-widget/src/assets/message.svg
@@ -1,7 +0,0 @@
-<svg width="36" height="36" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.37891 9.44824H7.75821" stroke="white" stroke-width="1.68965" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.1377 9.44824H12.8273" stroke="white" stroke-width="1.68965" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4.37891 6.06934H6.06856" stroke="white" stroke-width="1.68965" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9.44824 6.06934H12.8276" stroke="white" stroke-width="1.68965" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M16.2069 11.1379C16.2069 11.5861 16.0289 12.0158 15.712 12.3327C15.3951 12.6496 14.9654 12.8276 14.5172 12.8276H4.37931L1 16.2069V2.68965C1 2.24153 1.17802 1.81176 1.49489 1.49489C1.81176 1.17802 2.24153 1 2.68965 1H14.5172C14.9654 1 15.3951 1.17802 15.712 1.49489C16.0289 1.81176 16.2069 2.24153 16.2069 2.68965V11.1379Z" stroke="white" stroke-width="1.68965" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/extensions/react-widget/src/components/DocsGPTWidget.tsx
+++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx
@@ -1,13 +1,38 @@
 "use client";
 import React from 'react'
 import DOMPurify from 'dompurify';
-import snarkdown from '@bpmn-io/snarkdown';
 import styled, { keyframes, createGlobalStyle } from 'styled-components';
 import { PaperPlaneIcon, RocketIcon, ExclamationTriangleIcon, Cross2Icon } from '@radix-ui/react-icons';
-import MessageIcon from '../assets/message.svg';
-import { MESSAGE_TYPE, Query, Status } from '../types/index';
+import { MESSAGE_TYPE, Query, Status, WidgetProps } from '../types/index';
 import { fetchAnswerStreaming } from '../requests/streamingApi';
-
+import { ThemeProvider } from 'styled-components';
+import MarkdownIt from 'markdown-it';
+const themes = {
+  dark: {
+    bg: '#222327',
+    text: '#fff',
+    primary: {
+      text: "#FAFAFA",
+      bg: '#222327'
+    },
+    secondary: {
+      text: "#A1A1AA",
+      bg: "#38383b"
+    }
+  },
+  light: {
+    bg: '#fff',
+    text: '#000',
+    primary: {
+      text: "#222327",
+      bg: "#fff"
+    },
+    secondary: {
+      text: "#A1A1AA",
+      bg: "#F6F6F6"
+    }
+  }
+}
 const GlobalStyles = createGlobalStyle`
 .response pre {
    padding: 8px;
@@ -16,6 +41,7 @@ const GlobalStyles = createGlobalStyle`
    border-radius: 6px;
    overflow-x: auto;
    background-color: #1B1C1F;
+    color: #fff !important;
 }
 .response h1{
  font-size: 20px;
@@ -26,40 +52,60 @@ const GlobalStyles = createGlobalStyle`
 .response h3{
  font-size: 16px;
 }
+.response p{
+  margin:0px;
+}
 .response code:not(pre code){
  border-radius: 6px;
  padding: 1px 3px 1px 3px;
  font-size: 12px;
  display: inline-block;
  background-color: #646464;
+  color: #fff !important;
 }
 `;
-const WidgetContainer = styled.div`
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  transition: opacity 0.5s;
+`
+const WidgetContainer = styled.div<{ modal: boolean }>`
    display: block;
    position: fixed;
-    right: 10px;
-    bottom: 10px;
+    right: ${props => props.modal ? '50%' : '10px'};
+    bottom: ${props => props.modal ? '50%' : '10px'};
    z-index: 1000;
    display: flex;
+    ${props => props.modal &&
+    "transform : translate(50%,50%);"
+  }
    flex-direction: column;
    align-items: center;
    text-align: left;
+    @media only screen and (max-width: 768px) {
+    max-height: 100vh !important;
+    overflow: auto;
+    }
 `;
 const StyledContainer = styled.div`
-    display: block;
+    display: flex;
    position: relative;
+    flex-direction: column;
+    justify-content: center;
    bottom: 0;
    left: 0;
-    width: 352px;
-    height: 407px;
-    max-height: 407px;
    border-radius: 0.75rem;
-    background-color: #222327;
+    background-color: ${props => props.theme.primary.bg};
    font-family: sans-serif;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: visibility 0.3s, opacity 0.3s;
 `;
-const FloatingButton = styled.div`
+const FloatingButton = styled.div<{ bgcolor: string }>`
    position: fixed;
    display: flex;
    z-index: 500;
@@ -70,7 +116,7 @@ const FloatingButton = styled.div`
    width: 5rem;
    height: 5rem;
    border-radius: 9999px;
-    background-image: linear-gradient(to bottom right, #5AF0EC, #E80D9D);
+    background: ${props => props.bgcolor};
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    &:hover {
@@ -120,24 +166,34 @@ const ContentWrapper = styled.div`
 const Title = styled.h3`
    font-size: 1rem;
    font-weight: normal;
-    color: #FAFAFA;
+    color: ${props => props.theme.primary.text};
    margin-top: 0;
    margin-bottom: 0.25rem;
 `;

 const Description = styled.p`
    font-size: 0.85rem;
-    color: #A1A1AA;
+    color: ${props => props.theme.secondary.text};
    margin-top: 0;
 `;
-const Conversation = styled.div`
-    height: 16rem;
+
+const Conversation = styled.div<{ size: string }>`
+    min-height: 250px;
+    max-width: 968px;
+    height: ${props => props.size === 'large' ? '75vh' : props.size === 'medium' ? '70vh' : '320px'};
+    width: ${props => props.size === 'large' ? '60vw' : props.size === 'medium' ? '28vw' : '400px'};
    padding-inline: 0.5rem;
    border-radius: 0.375rem;
    text-align: left;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #4a4a4a transparent; /* thumb color track color */
+    @media only screen and (max-width: 768px) {
+    width: 90vw !important;
+    }
+    @media only screen and (min-width:768px ) and (max-width: 1280px) {
+    width:${props => props.size === 'large' ? '90vw' : props.size === 'medium' ? '60vw' : '400px'} !important;
+    }
 `;

 const MessageBubble = styled.div<{ type: MESSAGE_TYPE }>`
@@ -146,13 +202,13 @@ const MessageBubble = styled.div<{ type: MESSAGE_TYPE }>`
    justify-content: ${props => props.type === 'QUESTION' ? 'flex-end' : 'flex-start'};
    margin: 0.5rem;
 `;
-const Message = styled.p<{ type: MESSAGE_TYPE }>`
+const Message = styled.div<{ type: MESSAGE_TYPE }>`
    background: ${props => props.type === 'QUESTION' ?
    'linear-gradient(to bottom right, #8860DB, #6D42C5)' :
-    '#38383b'};
-    color: #ffff;
+    props.theme.secondary.bg};
+    color: ${props => props.type === 'ANSWER' ? props.theme.primary.text : '#fff'};
    border: none;
-    max-width: 80%;
+    max-width: ${props => props.type === 'ANSWER' ? '100%' : '80'};
    overflow: auto;
    margin: 4px;
    display: block;
@@ -190,35 +246,31 @@ const DotAnimation = styled.div`
 const Delay = styled(DotAnimation) <{ delay: number }>`
  animation-delay: ${props => props.delay + 'ms'};
 `;
-const PromptContainer = styled.form`
+const PromptContainer = styled.form<{ size: string }>`
  background-color: transparent;
-  height: 36px;
-  position: absolute;
-  bottom: 25px;
-  left: 24px;
-  right: 24px;
+  height: ${props => props.size == 'large' ? '60px' : '40px'};
+  margin: 16px;
  display: flex;
  justify-content: space-evenly;
 `;
 const StyledInput = styled.input`
-  width: 260px;
-  height: 36px;
+  width: 100%;
  border: 1px solid #686877;
  padding-left: 12px;
  background-color: transparent;
  font-size: 16px;
  border-radius: 6px;
-  color: #ffff;
+  color: ${props => props.theme.text};
  outline: none;
 `;
-const StyledButton = styled.button`
+const StyledButton = styled.button<{ size: string }>`
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to bottom right, #5AF0EC, #E80D9D);
  border-radius: 6px;
-  width: 36px;
-  height: 36px;
+  min-width: ${props => props.size === 'large' ? '60px' : '36px'};
+  height: ${props => props.size === 'large' ? '60px' : '36px'};
  margin-left:8px;
  padding: 0px;
  border: none;
@@ -239,13 +291,14 @@ const HeroContainer = styled.div`
  align-items: middle;
  transform: translate(-50%, -50%);
  width: 80%;
+  max-width: 500px;
  background-image: linear-gradient(to bottom right, #5AF0EC, #ff1bf4);
  border-radius: 10px;
  margin: 0 auto;
  padding: 2px;
 `;
 const HeroWrapper = styled.div`
-  background-color: #222327;
+  background-color: ${props => props.theme.primary.bg};
  border-radius: 10px; 
  font-weight: normal;
  padding: 6px;
@@ -253,23 +306,22 @@ const HeroWrapper = styled.div`
  justify-content: space-between;
 `
 const HeroTitle = styled.h3`
-  color: #fff;
-  font-size: 17px;
+  color: ${props => props.theme.text};
  margin-bottom: 5px;
  padding: 2px;
 `;
 const HeroDescription = styled.p`
-  color: #fff;
+  color: ${props => props.theme.text};
  font-size: 14px;
  line-height: 1.5;
 `;
-const Hero = ({ title, description }: { title: string, description: string }) => {
+const Hero = ({ title, description, theme }: { title: string, description: string, theme: string }) => {
  return (
    <>
      <HeroContainer>
        <HeroWrapper>
-          <IconWrapper style={{ marginTop: '8px' }}>
-            <RocketIcon color='white' width={20} height={20} />
+          <IconWrapper style={{ marginTop: '12px' }}>
+            <RocketIcon color={theme === 'light' ? 'black' : 'white'} width={20} height={20} />
          </IconWrapper>
          <div>
            <HeroTitle>{title}</HeroTitle>
@@ -284,15 +336,17 @@ const Hero = ({ title, description }: { title: string, description: string }) =>
 };
 export const DocsGPTWidget = ({
  apiHost = 'https://gptcloud.arc53.com',
-  selectDocs = 'default',
  apiKey = '82962c9a-aa77-4152-94e5-a4f84fd44c6a',
  avatar = 'https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png',
  title = 'Get AI assistance',
  description = 'DocsGPT\'s AI Chatbot is here to help',
  heroTitle = 'Welcome to DocsGPT !',
-  heroDescription = 'This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources.'
-}) => {
-
+  heroDescription = 'This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources.',
+  size = 'small',
+  theme = 'dark',
+  buttonIcon = 'https://d3dg1063dc54p9.cloudfront.net/widget/message.svg',
+  buttonBg = 'linear-gradient(to bottom right, #5AF0EC, #E80D9D)'
+}: WidgetProps) => {
  const [prompt, setPrompt] = React.useState('');
  const [status, setStatus] = React.useState<Status>('idle');
  const [queries, setQueries] = React.useState<Query[]>([])
@@ -300,6 +354,8 @@ export const DocsGPTWidget = ({
  const [open, setOpen] = React.useState<boolean>(false)
  const [eventInterrupt, setEventInterrupt] = React.useState<boolean>(false); //click or scroll by user while autoScrolling
  const endMessageRef = React.useRef<HTMLDivElement | null>(null);
+  const md = new MarkdownIt();
+
  const handleUserInterrupt = () => {
    (status === 'loading') && setEventInterrupt(true);
  }
@@ -316,7 +372,6 @@ export const DocsGPTWidget = ({
    const lastChild = element?.children?.[element.children.length - 1]
    lastChild && scrollToBottom(lastChild)
  };
-
  React.useEffect(() => {
    !eventInterrupt && scrollToBottom(endMessageRef.current);
  }, [queries.length, queries[queries.length - 1]?.response]);
@@ -329,19 +384,24 @@ export const DocsGPTWidget = ({
          question: question,
          apiKey: apiKey,
          apiHost: apiHost,
-          selectedDocs: selectDocs,
          history: queries,
          conversationId: conversationId,
          onEvent: (event: MessageEvent) => {
            const data = JSON.parse(event.data);
            // check if the 'end' event has been received
            if (data.type === 'end') {
-              // set status to 'idle'
              setStatus('idle');
-
-            } else if (data.type === 'id') {
+            }
+            else if (data.type === 'id') {
              setConversationId(data.id)
-            } else {
+            }
+            else if (data.type === 'error') {
+              const updatedQueries = [...queries];
+              updatedQueries[updatedQueries.length - 1].error = data.error;
+              setQueries(updatedQueries);
+              setStatus('idle')
+            }
+            else {
              const result = data.answer;
              const streamingResponse = queries[queries.length - 1].response ? queries[queries.length - 1].response : '';
              const updatedQueries = [...queries];
@@ -353,7 +413,7 @@ export const DocsGPTWidget = ({
      );
    } catch (error) {
      const updatedQueries = [...queries];
-      updatedQueries[updatedQueries.length - 1].error = 'error'
+      updatedQueries[updatedQueries.length - 1].error = 'Something went wrong !'
      setQueries(updatedQueries);
      setStatus('idle')
      //setEventInterrupt(false)
@@ -372,16 +432,21 @@ export const DocsGPTWidget = ({
    event.currentTarget.src = "https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png";
  };
  return (
-    <>
-      <WidgetContainer>
+    <ThemeProvider theme={themes[theme]}>
+      {open && size === 'large' &&
+        <Overlay onClick={() => {
+          setOpen(false)
+        }} />
+      }
+      <FloatingButton bgcolor={buttonBg} onClick={() => setOpen(!open)} hidden={open}>
+        <img style={{ maxHeight: '4rem', maxWidth: '4rem' }} src={buttonIcon} />
+      </FloatingButton>
+      <WidgetContainer modal={size == 'large'}>
        <GlobalStyles />
-        {!open && <FloatingButton onClick={() => setOpen(true)} hidden={open}>
-          <MessageIcon style={{ marginTop: '8px' }} />
-        </FloatingButton>}
        {open && <StyledContainer>
          <div>
            <CancelButton onClick={() => setOpen(false)}>
-              <Cross2Icon width={24} height={24} color='white' />
+              <Cross2Icon width={24} height={24} color={theme === 'light' ? 'black' : 'white'} />
            </CancelButton>
            <Header>
              <IconWrapper>
@@ -393,7 +458,7 @@ export const DocsGPTWidget = ({
              </ContentWrapper>
            </Header>
          </div>
-          <Conversation onWheel={handleUserInterrupt} onTouchMove={handleUserInterrupt}>
+          <Conversation size={size} onWheel={handleUserInterrupt} onTouchMove={handleUserInterrupt}>
            {
              queries.length > 0 ? queries?.map((query, index) => {
                return (
@@ -413,7 +478,10 @@ export const DocsGPTWidget = ({
                          type='ANSWER'
                          ref={(index === queries.length - 1) ? endMessageRef : null}
                        >
-                          <div className="response" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(snarkdown(query.response)) }} />
+                          <div
+                            className="response"
+                            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(md.render(query.response)) }}
+                          />
                        </Message>
                      </MessageBubble>
                        : <div>
@@ -424,7 +492,7 @@ export const DocsGPTWidget = ({
                              </IconWrapper>
                              <div>
                                <h5 style={{ margin: 2 }}>Network Error</h5>
-                                <span style={{ margin: 2, fontSize: '13px' }}>Something went wrong !</span>
+                                <span style={{ margin: 2, fontSize: '13px' }}>{query.error}</span>
                              </div>
                            </ErrorAlert>
                              : <MessageBubble type='ANSWER'>
@@ -439,22 +507,23 @@ export const DocsGPTWidget = ({
                    }
                  </React.Fragment>)
              })
-                : <Hero title={heroTitle} description={heroDescription} />
+                : <Hero title={heroTitle} description={heroDescription} theme={theme} />
            }
          </Conversation>
-
          <PromptContainer
+            size={size}
            onSubmit={handleSubmit}>
            <StyledInput
              value={prompt} onChange={(event) => setPrompt(event.target.value)}
              type='text' placeholder="What do you want to do?" />
            <StyledButton
+              size={size}
              disabled={prompt.length == 0 || status !== 'idle'}>
              <PaperPlaneIcon width={15} height={15} color='white' />
            </StyledButton>
          </PromptContainer>
        </StyledContainer>}
      </WidgetContainer>
-    </>
+    </ThemeProvider>
  )
 }
--- a/extensions/react-widget/src/main.tsx
+++ b/extensions/react-widget/src/main.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { DocsGPTWidget } from './components/DocsGPTWidget';

-const renderWidget = (elementId: string, props = {}) => {
-  const root = createRoot(document.getElementById(elementId) as HTMLElement);
-  root.render(<DocsGPTWidget {...props} />);
-};
-
-(window as any).renderDocsGPTWidget = renderWidget;
+if (typeof window !== 'undefined') {
+  const renderWidget = (elementId: string, props = {}) => {
+    const root = createRoot(document.getElementById(elementId) as HTMLElement);
+    root.render(<DocsGPTWidget {...props} />);
+  };
+  (window as any).renderDocsGPTWidget = renderWidget;
+}
 export { DocsGPTWidget };
--- a/extensions/react-widget/src/requests/streamingApi.ts
+++ b/extensions/react-widget/src/requests/streamingApi.ts
@@ -1,92 +1,83 @@
 interface HistoryItem {
-    prompt: string;
-    response?: string;
-  }
+  prompt: string;
+  response?: string;
+}
 interface FetchAnswerStreamingProps {
-    question?: string;
-    apiKey?: string;
-    selectedDocs?: string;
-    history?: HistoryItem[];
-    conversationId?: string | null;
-    apiHost?: string;
-    onEvent?: (event: MessageEvent) => void;
-  }
+  question?: string;
+  apiKey?: string;
+  selectedDocs?: string;
+  history?: HistoryItem[];
+  conversationId?: string | null;
+  apiHost?: string;
+  onEvent?: (event: MessageEvent) => void;
+}
 export function fetchAnswerStreaming({
-    question = '',
-    apiKey = '',
-    selectedDocs = '',
-    history = [],
-    conversationId = null,
-    apiHost = '',
-    onEvent = () => {console.log("Event triggered, but no handler provided.");}
-  }: FetchAnswerStreamingProps): Promise<void> {
-    let docPath = 'default';
-    if (selectedDocs) {
-      docPath = selectedDocs;
-    }
+  question = '',
+  apiKey = '',
+  history = [],
+  conversationId = null,
+  apiHost = '',
+  onEvent = () => { console.log("Event triggered, but no handler provided."); }
+}: FetchAnswerStreamingProps): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    const body= {
+      question: question,
+      history: JSON.stringify(history),
+      conversation_id: conversationId,
+      model: 'default',
+      api_key:apiKey
+    };
+    fetch(apiHost + '/stream', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    })
+      .then((response) => {
+        if (!response.body) throw Error('No response body');

-    return new Promise<void>((resolve, reject) => {
-      const body = {
-        question: question,
-        api_key: apiKey,
-        embeddings_key: apiKey,
-        active_docs: docPath,
-        history: JSON.stringify(history),
-        conversation_id: conversationId,
-        model: 'default'
-      };
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder('utf-8');
+        let counterrr = 0;
+        const processStream = ({
+          done,
+          value,
+        }: ReadableStreamReadResult<Uint8Array>) => {
+          if (done) {
+            resolve();
+            return;
+          }

-      fetch(apiHost + '/stream', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(body),
-      })
-        .then((response) => {
-          if (!response.body) throw Error('No response body');
+          counterrr += 1;

-          const reader = response.body.getReader();
-          const decoder = new TextDecoder('utf-8');
-          let counterrr = 0;
-          const processStream = ({
-            done,
-            value,
-          }: ReadableStreamReadResult<Uint8Array>) => {
-            if (done) {
-              resolve();
-              return;
+          const chunk = decoder.decode(value);
+
+          const lines = chunk.split('\n');
+
+          for (let line of lines) {
+            if (line.trim() == '') {
+              continue;
+            }
+            if (line.startsWith('data:')) {
+              line = line.substring(5);
            }

-            counterrr += 1;
+            const messageEvent = new MessageEvent('message', {
+              data: line,
+            });

-            const chunk = decoder.decode(value);
-  
-            const lines = chunk.split('\n');
-  
-            for (let line of lines) {
-              if (line.trim() == '') {
-                continue;
-              }
-              if (line.startsWith('data:')) {
-                line = line.substring(5);
-              }
-  
-              const messageEvent = new MessageEvent('message', {
-                data: line,
-              });
-  
-              onEvent(messageEvent); // handle each message
-            }
-  
-            reader.read().then(processStream).catch(reject);
-          };
+            onEvent(messageEvent); // handle each message
+          }

          reader.read().then(processStream).catch(reject);
-        })
-        .catch((error) => {
-          console.error('Connection failed:', error);
-          reject(error);
-        });
-    });
-  }
+        };
+
+        reader.read().then(processStream).catch(reject);
+      })
+      .catch((error) => {
+        console.error('Connection failed:', error);
+        reject(error);
+      });
+  });
+}
--- a/extensions/react-widget/src/types/index.ts
+++ b/extensions/react-widget/src/types/index.ts
@@ -1,7 +1,7 @@
 export type MESSAGE_TYPE = 'QUESTION' | 'ANSWER' | 'ERROR';
 export type Status = 'idle' | 'loading' | 'failed';
 export type FEEDBACK = 'LIKE' | 'DISLIKE';
-
+export type THEME = 'light' | 'dark';
 export interface Query {
  prompt: string;
  response?: string;
@@ -11,3 +11,16 @@ export interface Query {
  conversationId?: string | null;
  title?: string | null;
 }
+export interface WidgetProps {
+  apiHost?: string;
+  apiKey?: string;
+  avatar?: string;
+  title?: string;
+  description?: string;
+  heroTitle?: string;
+  heroDescription?: string;
+  size?: 'small' | 'medium' | 'large';
+  theme?:THEME,
+  buttonIcon?:string;
+  buttonBg?:string;
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,45 +21,45 @@
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.2",
    "@vercel/analytics": "^0.1.10",
-    "i18next": "^23.11.5",
+    "i18next": "^23.14.0",
    "i18next-browser-languagedetector": "^8.0.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
    "react-dropzone": "^14.2.3",
-    "react-i18next": "^14.1.2",
-    "react-markdown": "^8.0.7",
+    "react-i18next": "^15.0.1",
+    "react-markdown": "^9.0.1",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.8.1",
    "react-syntax-highlighter": "^15.5.0",
-    "remark-gfm": "^3.0.0"
+    "remark-gfm": "^4.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
+    "@types/react-dom": "^18.3.0",
    "@types/react-syntax-highlighter": "^15.5.6",
    "@typescript-eslint/eslint-plugin": "^5.51.0",
-    "@typescript-eslint/parser": "^5.51.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.13",
    "eslint": "^8.33.0",
    "eslint-config-prettier": "^8.6.0",
    "eslint-config-standard-with-typescript": "^34.0.0",
    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-n": "^15.6.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-n": "^15.7.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-promise": "^6.6.0",
+    "eslint-plugin-react": "^7.35.0",
    "eslint-plugin-unused-imports": "^2.0.0",
    "husky": "^8.0.0",
-    "lint-staged": "^13.1.1",
-    "postcss": "^8.4.31",
-    "prettier": "^2.8.4",
+    "lint-staged": "^15.2.8",
+    "postcss": "^8.4.41",
+    "prettier": "^3.3.3",
    "prettier-plugin-tailwindcss": "^0.2.2",
    "tailwindcss": "^3.2.4",
    "typescript": "^4.9.5",
-    "vite": "^5.0.13",
+    "vite": "^5.3.5",
    "vite-plugin-svgr": "^4.2.0"
  }
 }
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -19,7 +19,7 @@ export default function Hero({
  }>;
  return (
    <div
-      className={`mt-16 mb-4 flex w-full flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-full lg:mt-6`}
+      className={`mb-1 mt-16 flex w-full flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-full md:mb-10 lg:mt-6`}
    >
      <div className="flex h-full w-full flex-col items-center justify-center">
        <div className="flex items-center">
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -22,6 +22,7 @@ import {
 } from './conversation/conversationSlice';
 import ConversationTile from './conversation/ConversationTile';
 import { useDarkTheme, useMediaQuery, useOutsideAlerter } from './hooks';
+import useDefaultDocument from './hooks/useDefaultDocument';
 import DeleteConvModal from './modals/DeleteConvModal';
 import { ActiveState, Doc } from './models/misc';
 import APIKeyModal from './preferences/APIKeyModal';
@@ -39,7 +40,6 @@ import {
  setSelectedDocs,
  setSourceDocs,
 } from './preferences/preferenceSlice';
-import SelectDocsModal from './preferences/SelectDocsModal';
 import Upload from './upload/Upload';

 interface NavigationProps {
@@ -172,16 +172,12 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
        console.error(err);
      });
  }
-  useOutsideAlerter(
-    navRef,
-    () => {
-      if (isMobile && navOpen && apiKeyModalState === 'INACTIVE') {
-        setNavOpen(false);
-        setIsDocsListOpen(false);
-      }
-    },
-    [navOpen, isDocsListOpen, apiKeyModalState],
-  );
+  useOutsideAlerter(navRef, () => {
+    if (isMobile && navOpen && apiKeyModalState === 'INACTIVE') {
+      setNavOpen(false);
+      setIsDocsListOpen(false);
+    }
+  }, [navOpen, isDocsListOpen, apiKeyModalState]);

  /*
    Needed to fix bug where if mobile nav was closed and then window was resized to desktop, nav would still be closed but the button to open would be gone, as per #1 on issue #146
@@ -190,6 +186,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
  useEffect(() => {
    setNavOpen(!isMobile);
  }, [isMobile]);
+  useDefaultDocument();
  return (
    <>
      {!navOpen && (
@@ -396,12 +393,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
          />
        </button>
      </div>
-
-      <SelectDocsModal
-        modalState={selectedDocsModalState}
-        setModalState={setSelectedDocsModalState}
-        isCancellable={isSelectedDocsSet}
-      />
      <APIKeyModal
        modalState={apiKeyModalState}
        setModalState={setApiKeyModalState}
--- a/frontend/src/assets/document.svg
+++ b/frontend/src/assets/document.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9294 5.375V12.4583C12.9294 12.8341 12.7801 13.1944 12.5145 13.4601C12.2488 13.7257 11.8885 13.875 11.5127 13.875H3.01274C2.63701 13.875 2.27668 13.7257 2.011 13.4601C1.74532 13.1944 1.59607 12.8341 1.59607 12.4583V2.54167C1.59607 2.16594 1.74532 1.80561 2.011 1.53993C2.27668 1.27426 2.63701 1.125 3.01274 1.125H8.6794M12.9294 5.375V5.25317C12.9293 4.87747 12.78 4.5172 12.5143 4.25158L9.80282 1.54008C9.53721 1.27439 9.17693 1.12508 8.80124 1.125H8.6794M12.9294 5.375H10.0961C9.72035 5.375 9.36001 5.22574 9.09434 4.96007C8.82866 4.69439 8.6794 4.33406 8.6794 3.95833V1.125" stroke="#949494" stroke-width="1.41667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/frontend/src/assets/sources.svg
+++ b/frontend/src/assets/sources.svg
@@ -0,0 +1,25 @@
+<svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.73517 17.2121L0.538918 17.9125C0.3753 18.0084 0.239616 18.1455 0.145332 18.31C0.0510491 18.4746 0.00144577 18.661 0.00144577 18.8506C0.00144577 19.0403 0.0510491 19.2267 0.145332 19.3912C0.239616 19.5558 0.3753 19.6929 0.538918 19.7888L11.0514 25.9513C11.2181 26.0489 11.4078 26.1004 11.601 26.1004C11.7941 26.1004 11.9838 26.0489 12.1505 25.9513L22.663 19.7888C22.8266 19.6929 22.9623 19.5558 23.0566 19.3912C23.1509 19.2267 23.2005 19.0403 23.2005 18.8506C23.2005 18.661 23.1509 18.4746 23.0566 18.31C22.9623 18.1455 22.8266 18.0084 22.663 17.9125L21.4668 17.2107L13.2511 22.0276C12.7506 22.321 12.1811 22.4757 11.601 22.4757C11.0209 22.4757 10.4513 22.321 9.95087 22.0276L1.73517 17.2121Z" fill="url(#paint0_linear_4013_8178)"/>
+<path d="M1.73517 11.4121L0.538918 12.1124C0.3753 12.2084 0.239616 12.3454 0.145332 12.51C0.0510491 12.6746 0.00144577 12.8609 0.00144577 13.0506C0.00144577 13.2403 0.0510491 13.4266 0.145332 13.5912C0.239616 13.7558 0.3753 13.8928 0.538918 13.9887L11.0514 20.1512C11.2181 20.2489 11.4078 20.3003 11.601 20.3003C11.7941 20.3003 11.9838 20.2489 12.1505 20.1512L22.663 13.9887C22.8266 13.8928 22.9623 13.7558 23.0566 13.5912C23.1509 13.4266 23.2005 13.2403 23.2005 13.0506C23.2005 12.8609 23.1509 12.6746 23.0566 12.51C22.9623 12.3454 22.8266 12.2084 22.663 12.1124L21.4668 11.4106L13.2511 16.2275C12.7506 16.5209 12.1811 16.6756 11.601 16.6756C11.0209 16.6756 10.4513 16.5209 9.95087 16.2275L1.73517 11.4121Z" fill="url(#paint1_linear_4013_8178)"/>
+<path d="M12.152 0.149921C11.9849 0.0517579 11.7947 0 11.601 0C11.4072 0 11.217 0.0517579 11.05 0.149921L0.537472 6.31242C0.373854 6.40835 0.23817 6.5454 0.143887 6.70997C0.0496035 6.87454 0 7.06091 0 7.25057C0 7.44024 0.0496035 7.6266 0.143887 7.79117C0.23817 7.95574 0.373854 8.09279 0.537472 8.18872L11.05 14.3512C11.217 14.4494 11.4072 14.5011 11.601 14.5011C11.7947 14.5011 11.9849 14.4494 12.152 14.3512L22.6645 8.18872C22.8281 8.09279 22.9638 7.95574 23.0581 7.79117C23.1523 7.6266 23.2019 7.44024 23.2019 7.25057C23.2019 7.06091 23.1523 6.87454 23.0581 6.70997C22.9638 6.5454 22.8281 6.40835 22.6645 6.31242L12.152 0.149921Z" fill="url(#paint2_linear_4013_8178)"/>
+<defs>
+<linearGradient id="paint0_linear_4013_8178" x1="0.00144577" y1="21.6555" x2="23.2005" y2="21.6555" gradientUnits="userSpaceOnUse">
+<stop stop-color="#70FDF7"/>
+<stop offset="0.325" stop-color="#747696"/>
+<stop offset="0.68" stop-color="#BD5372"/>
+<stop offset="1" stop-color="#F5A06C"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4013_8178" x1="0.00144577" y1="15.8555" x2="23.2005" y2="15.8555" gradientUnits="userSpaceOnUse">
+<stop stop-color="#70FDF7"/>
+<stop offset="0.325" stop-color="#747696"/>
+<stop offset="0.68" stop-color="#BD5372"/>
+<stop offset="1" stop-color="#F5A06C"/>
+</linearGradient>
+<linearGradient id="paint2_linear_4013_8178" x1="0" y1="7.25057" x2="23.2019" y2="7.25057" gradientUnits="userSpaceOnUse">
+<stop stop-color="#70FDF7"/>
+<stop offset="0.325" stop-color="#747696"/>
+<stop offset="0.68" stop-color="#BD5372"/>
+<stop offset="1" stop-color="#F5A06C"/>
+</linearGradient>
+</defs>
+</svg>
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -92,18 +92,14 @@ function Dropdown({
            {selectedValue && 'label' in selectedValue
              ? selectedValue.label
              : selectedValue && 'description' in selectedValue
-              ? `${
-                  selectedValue.value < 1e9
-                    ? selectedValue.value + ` (${selectedValue.description})`
-                    : selectedValue.description
-                }`
-              : selectedValue &&
-                'name' in selectedValue &&
-                'id' in selectedValue
-              ? `${selectedValue.name}`
-              : placeholder
-              ? placeholder
-              : 'From URL'}
+                ? `${
+                    selectedValue.value < 1e9
+                      ? selectedValue.value + ` (${selectedValue.description})`
+                      : selectedValue.description
+                  }`
+                : placeholder
+                  ? placeholder
+                  : 'From URL'}
          </span>
        )}
        <img
@@ -133,14 +129,14 @@ function Dropdown({
                {typeof option === 'string'
                  ? option
                  : option.name
-                  ? option.name
-                  : option.label
-                  ? option.label
-                  : `${
-                      option.value < 1e9
-                        ? option.value + ` (${option.description})`
-                        : option.description
-                    }`}
+                    ? option.name
+                    : option.label
+                      ? option.label
+                      : `${
+                          option.value < 1e9
+                            ? option.value + ` (${option.description})`
+                            : option.description
+                        }`}
              </span>
              {showEdit && onEdit && (
                <img
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import Exit from '../assets/exit.svg';
+
+type SidebarProps = {
+  isOpen: boolean;
+  toggleState: (arg0: boolean) => void;
+  children: React.ReactNode;
+};
+
+export default function Sidebar({
+  isOpen,
+  toggleState,
+  children,
+}: SidebarProps) {
+  const sidebarRef = React.useRef<HTMLDivElement>(null);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      sidebarRef.current &&
+      !sidebarRef.current.contains(event.target as Node)
+    ) {
+      toggleState(false);
+    }
+  };
+
+  React.useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  return (
+    <div ref={sidebarRef} className="h-vh relative">
+      <div
+        className={`fixed right-0 top-0 z-50 h-full w-72 transform bg-white shadow-xl transition-all duration-300 dark:bg-chinese-black sm:w-96 ${
+          isOpen ? 'translate-x-[10px]' : 'translate-x-full'
+        } border-l border-[#9ca3af]/10`}
+      >
+        <div className="flex w-full flex-row items-end justify-end px-4 pt-3">
+          <button
+            className="w-7 rounded-full p-2 hover:bg-gray-1000 hover:dark:bg-gun-metal"
+            onClick={() => toggleState(!isOpen)}
+          >
+            <img className="filter dark:invert" src={Exit} />
+          </button>
+        </div>
+        <div className="flex h-full flex-col items-center gap-2 py-4 px-6 text-center">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';

@@ -30,7 +30,7 @@ export default function Conversation() {
  const status = useSelector(selectStatus);
  const conversationId = useSelector(selectConversationId);
  const dispatch = useDispatch<AppDispatch>();
-  const endMessageRef = useRef<HTMLDivElement>(null);
+  const conversationRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLTextAreaElement>(null);
  const [isDarkTheme] = useDarkTheme();
  const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
@@ -55,32 +55,8 @@ export default function Conversation() {
  }, []);

  useEffect(() => {
-    return () => {
-      if (status !== 'idle') {
-        fetchStream.current && fetchStream.current.abort(); //abort previous stream
-      }
-    };
-  }, [status]);
-
-  useEffect(() => {
-    const observerCallback: IntersectionObserverCallback = (entries) => {
-      entries.forEach((entry) => {
-        setHasScrolledToLast(entry.isIntersecting);
-      });
-    };
-
-    const observer = new IntersectionObserver(observerCallback, {
-      root: null,
-      threshold: [1, 0.8],
-    });
-    if (endMessageRef.current) {
-      observer.observe(endMessageRef.current);
-    }
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [endMessageRef.current]);
+    fetchStream.current && fetchStream.current.abort();
+  }, [conversationId]);

  useEffect(() => {
    if (queries.length) {
@@ -90,10 +66,16 @@ export default function Conversation() {
  }, [queries[queries.length - 1]]);

  const scrollIntoView = () => {
-    endMessageRef?.current?.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start',
-    });
+    if (!conversationRef?.current || eventInterrupt) return;
+
+    if (status === 'idle' || !queries[queries.length - 1].response) {
+      conversationRef.current.scrollTo({
+        behavior: 'smooth',
+        top: conversationRef.current.scrollHeight,
+      });
+    } else {
+      conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
+    }
  };

  const handleQuestion = ({
@@ -147,7 +129,6 @@ export default function Conversation() {
    if (query.response) {
      responseView = (
        <ConversationBubble
-          ref={endMessageRef}
          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
          key={`${index}ANSWER`}
          message={query.response}
@@ -180,7 +161,6 @@ export default function Conversation() {
      );
      responseView = (
        <ConversationBubble
-          ref={endMessageRef}
          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'} `}
          key={`${index}ERROR`}
          message={query.error}
@@ -211,7 +191,7 @@ export default function Conversation() {
    };
  }, []);
  return (
-    <div className="flex h-screen flex-col gap-7 pb-2">
+    <div className="flex h-[90vh] flex-col gap-7 pb-2 sm:h-[85vh]">
      {conversationId && (
        <>
          <button
@@ -238,6 +218,7 @@ export default function Conversation() {
        </>
      )}
      <div
+        ref={conversationRef}
        onWheel={handleUserInterruption}
        onTouchMove={handleUserInterruption}
        className="flex h-[90%] w-full flex-1 justify-center overflow-y-auto p-4 md:h-[83vh]"
@@ -279,7 +260,7 @@ export default function Conversation() {
        {queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
      </div>

-      <div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-8/12">
+      <div className="bottom-safe fixed flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-1/2">
        <div className="flex w-full items-center rounded-[40px] border border-silver bg-white py-1 dark:bg-raisin-black">
          <textarea
            id="inputbox"
@@ -311,7 +292,7 @@ export default function Conversation() {
          )}
        </div>

-        <p className="text-gray-595959 hidden w-[100vw] self-center  bg-white bg-transparent py-2 text-center text-xs dark:bg-raisin-black dark:text-bright-gray md:inline md:w-full">
+        <p className="text-gray-595959 hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs dark:text-bright-gray md:inline md:w-full">
          {t('tagline')}
        </p>
      </div>
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -1,17 +1,27 @@
 import { forwardRef, useState } from 'react';
-import Avatar from '../components/Avatar';
-import CopyButton from '../components/CopyButton';
-import remarkGfm from 'remark-gfm';
-import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
-import classes from './ConversationBubble.module.css';
-import Alert from './../assets/alert.svg';
-import Like from './../assets/like.svg?react';
-import Dislike from './../assets/dislike.svg?react';
-
 import ReactMarkdown from 'react-markdown';
+import { useSelector } from 'react-redux';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import remarkGfm from 'remark-gfm';
+
+import Alert from '../assets/alert.svg';
 import DocsGPT3 from '../assets/cute_docsgpt3.svg';
+import Dislike from '../assets/dislike.svg?react';
+import Document from '../assets/document.svg';
+import Like from '../assets/like.svg?react';
+import Link from '../assets/link.svg';
+import Sources from '../assets/sources.svg';
+import Avatar from '../components/Avatar';
+import CopyButton from '../components/CopyButton';
+import Sidebar from '../components/Sidebar';
+import {
+  selectChunks,
+  selectSelectedDocs,
+} from '../preferences/preferenceSlice';
+import classes from './ConversationBubble.module.css';
+import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
+
 const DisableSourceFE = import.meta.env.VITE_DISABLE_SOURCE_FE || false;

 const ConversationBubble = forwardRef<
@@ -29,15 +39,16 @@ const ConversationBubble = forwardRef<
  { message, type, className, feedback, handleFeedback, sources, retryBtn },
  ref,
 ) {
-  const [openSource, setOpenSource] = useState<number | null>(null);
-
+  const chunks = useSelector(selectChunks);
+  const selectedDocs = useSelector(selectSelectedDocs);
  const [isLikeHovered, setIsLikeHovered] = useState(false);
  const [isDislikeHovered, setIsDislikeHovered] = useState(false);
  const [isLikeClicked, setIsLikeClicked] = useState(false);
  const [isDislikeClicked, setIsDislikeClicked] = useState(false);
+  const [activeTooltip, setActiveTooltip] = useState<number | null>(null);
+  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);

  let bubble;
-
  if (type === 'QUESTION') {
    bubble = (
      <div ref={ref} className={`flex flex-row-reverse self-end ${className}`}>
@@ -55,18 +66,147 @@ const ConversationBubble = forwardRef<
        ref={ref}
        className={`flex flex-wrap self-start ${className} group flex-col  dark:text-bright-gray`}
      >
-        <div className="flex flex-wrap self-start lg:flex-nowrap">
-          <Avatar
-            className="mt-2 h-12 w-12 text-2xl"
-            avatar={
-              <img
-                src={DocsGPT3}
-                alt="DocsGPT"
-                className="h-full w-full object-cover"
+        {DisableSourceFE ||
+        type === 'ERROR' ||
+        sources?.length === 0 ||
+        sources?.some((source) => source.source === 'None') ? null : !sources &&
+          chunks !== '0' &&
+          selectedDocs ? (
+          <div className="mb-4 flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
+            <div className="my-2 flex flex-row items-center justify-center gap-3">
+              <Avatar
+                className="h-[26px] w-[30px] text-xl"
+                avatar={
+                  <img
+                    src={Sources}
+                    alt="Sources"
+                    className="h-full w-full object-fill"
+                  />
+                }
              />
-            }
-          />
-
+              <p className="text-base font-semibold">Sources</p>
+            </div>
+            <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
+              {Array.from({ length: 4 }).map((_, index) => (
+                <div
+                  key={index}
+                  className="flex h-28 cursor-pointer flex-col items-start gap-1 rounded-[20px] bg-gray-1000 p-4 text-purple-30 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:bg-gun-metal dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
+                >
+                  <span className="h-px w-10 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
+                  <span className="h-px w-24 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
+                  <span className="h-px w-16 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
+                  <span className="h-px w-32 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
+                  <span className="h-px w-24 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
+                  <span className="h-px w-20 animate-pulse cursor-pointer rounded-[20px] bg-[#B2B2B2] p-1"></span>
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : (
+          sources && (
+            <div className="mb-4 flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
+              <div className="my-2 flex flex-row items-center justify-center gap-3">
+                <Avatar
+                  className="h-[26px] w-[30px] text-xl"
+                  avatar={
+                    <img
+                      src={Sources}
+                      alt="Sources"
+                      className="h-full w-full object-fill"
+                    />
+                  }
+                />
+                <p className="text-base font-semibold">Sources</p>
+              </div>
+              <div className="ml-3 mr-5 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
+                <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
+                  {sources?.slice(0, 3)?.map((source, index) => (
+                    <div key={index} className="relative">
+                      <div
+                        className="h-28 cursor-pointer rounded-[20px] bg-gray-1000 p-4 hover:bg-[#F1F1F1] dark:bg-gun-metal dark:hover:bg-[#2C2E3C]"
+                        onMouseOver={() => setActiveTooltip(index)}
+                        onMouseOut={() => setActiveTooltip(null)}
+                      >
+                        <p className="ellipsis-text h-12 break-words text-xs">
+                          {source.text}
+                        </p>
+                        <div
+                          className={`mt-[14px] flex flex-row items-center gap-[6px] underline-offset-2 ${
+                            source.source && source.source !== 'local'
+                              ? 'hover:text-[#007DFF] hover:underline dark:hover:text-[#48A0FF]'
+                              : ''
+                          }`}
+                          onClick={() =>
+                            source.source && source.source !== 'local'
+                              ? window.open(
+                                  source.source,
+                                  '_blank',
+                                  'noopener, noreferrer',
+                                )
+                              : null
+                          }
+                        >
+                          <img
+                            src={Document}
+                            alt="Document"
+                            className="h-[17px] w-[17px] object-fill"
+                          />
+                          <p
+                            className="mt-[2px] truncate text-xs"
+                            title={
+                              source.source && source.source !== 'local'
+                                ? source.source
+                                : source.title
+                            }
+                          >
+                            {source.source && source.source !== 'local'
+                              ? source.source
+                              : source.title}
+                          </p>
+                        </div>
+                      </div>
+                      {activeTooltip === index && (
+                        <div
+                          className={`absolute left-1/2 z-30 max-h-48 w-40 translate-x-[-50%] translate-y-[3px] rounded-xl bg-[#FBFBFB] p-4 text-black shadow-xl dark:bg-chinese-black dark:text-chinese-silver sm:w-56`}
+                          onMouseOver={() => setActiveTooltip(index)}
+                          onMouseOut={() => setActiveTooltip(null)}
+                        >
+                          <p className="max-h-[164px] overflow-y-auto break-words rounded-md text-sm">
+                            {source.text}
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                  {(sources?.length ?? 0) > 3 && (
+                    <div
+                      className="flex h-24 cursor-pointer flex-col-reverse rounded-[20px] bg-gray-1000 p-4 text-purple-30 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:bg-gun-metal dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
+                      onClick={() => setIsSidebarOpen(true)}
+                    >
+                      <p className="ellipsis-text h-22 text-xs">{`View ${
+                        sources?.length ? sources.length - 3 : 0
+                      } more`}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          )
+        )}
+        <div className="flex flex-col flex-wrap items-start self-start lg:flex-nowrap">
+          <div className="my-2 flex flex-row items-center justify-center gap-3">
+            <Avatar
+              className="h-[34px] w-[34px] text-2xl"
+              avatar={
+                <img
+                  src={DocsGPT3}
+                  alt="DocsGPT"
+                  className="h-full w-full object-cover"
+                />
+              }
+            />
+            <p className="text-base font-semibold">Answer</p>
+          </div>
          <div
            className={`ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 py-[14px] px-7 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
              type === 'ERROR'
@@ -86,15 +226,16 @@ const ConversationBubble = forwardRef<
              className="whitespace-pre-wrap break-normal leading-normal"
              remarkPlugins={[remarkGfm]}
              components={{
-                code({ node, inline, className, children, ...props }) {
+                code(props) {
+                  const { children, className, node, ref, ...rest } = props;
                  const match = /language-(\w+)/.exec(className || '');

-                  return !inline && match ? (
+                  return match ? (
                    <div className="group relative">
                      <SyntaxHighlighter
+                        {...rest}
                        PreTag="div"
                        language={match[1]}
-                        {...props}
                        style={vscDarkPlus}
                      >
                        {String(children).replace(/\n$/, '')}
@@ -109,7 +250,10 @@ const ConversationBubble = forwardRef<
                      </div>
                    </div>
                  ) : (
-                    <code className={className ? className : ''} {...props}>
+                    <code
+                      className={className ? className : 'whitespace-pre-line'}
+                      {...props}
+                    >
                      {children}
                    </code>
                  );
@@ -165,51 +309,9 @@ const ConversationBubble = forwardRef<
            >
              {message}
            </ReactMarkdown>
-            {DisableSourceFE ||
-            type === 'ERROR' ||
-            !sources ||
-            sources.length === 0 ? null : (
-              <>
-                <span className="mt-3 h-px w-full bg-[#DEDEDE]"></span>
-                <div className="mt-3 flex w-full flex-row flex-wrap items-center justify-start gap-2">
-                  <div className="py-1 text-base font-semibold">Sources:</div>
-                  <div className="flex flex-row flex-wrap items-center justify-start gap-2">
-                    {sources?.map((source, index) => (
-                      <div
-                        key={index}
-                        className={`max-w-xs cursor-pointer rounded-[28px] px-4 py-1 sm:max-w-sm md:max-w-md ${
-                          openSource === index
-                            ? 'bg-[#007DFF]'
-                            : 'bg-[#D7EBFD] hover:bg-[#BFE1FF]'
-                        }`}
-                        onClick={() =>
-                          source.source !== 'local'
-                            ? window.open(
-                                source.source,
-                                '_blank',
-                                'noopener, noreferrer',
-                              )
-                            : setOpenSource(openSource === index ? null : index)
-                        }
-                      >
-                        <p
-                          className={`truncate text-center text-base font-medium ${
-                            openSource === index
-                              ? 'text-white'
-                              : 'text-[#007DFF]'
-                          }`}
-                        >
-                          {index + 1}. {source.title.substring(0, 45)}
-                        </p>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </>
-            )}
          </div>
        </div>
-        <div className="my-2 flex justify-start lg:ml-12">
+        <div className="my-2 ml-2 flex justify-start">
          <div
            className={`relative mr-5  block items-center justify-center lg:invisible 
            ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''}`}
@@ -292,19 +394,15 @@ const ConversationBubble = forwardRef<
            </>
          )}
        </div>
-
-        {sources && openSource !== null && sources[openSource] && (
-          <div className="ml-10 mt-12 max-w-[300px] break-words rounded-xl bg-blue-200 p-2 dark:bg-gun-metal sm:max-w-[800px] lg:mt-2">
-            <p className="m-1 w-3/4 truncate text-xs text-gray-500 dark:text-bright-gray">
-              Source: {sources[openSource].title}
-            </p>
-
-            <div className="m-2 rounded-xl border-2 border-gray-200 bg-white p-2 dark:border-chinese-silver dark:bg-dark-charcoal">
-              <p className="text-break text-black dark:text-bright-gray">
-                {sources[openSource].text}
-              </p>
-            </div>
-          </div>
+        {sources && (
+          <Sidebar
+            isOpen={isSidebarOpen}
+            toggleState={(state: boolean) => {
+              setIsSidebarOpen(state);
+            }}
+          >
+            <AllSources sources={sources} />
+          </Sidebar>
        )}
      </div>
    );
@@ -312,4 +410,49 @@ const ConversationBubble = forwardRef<
  return bubble;
 });

+type AllSourcesProps = {
+  sources: { title: string; text: string; source: string }[];
+};
+
+function AllSources(sources: AllSourcesProps) {
+  return (
+    <div className="h-full w-full">
+      <div className="w-full">
+        <p className="text-left text-xl">{`${sources.sources.length} Sources`}</p>
+        <div className="mx-1 mt-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40 lg:w-[95%] "></div>
+      </div>
+      <div className="mt-6 flex h-[90%] w-60 flex-col items-center gap-4 overflow-y-auto sm:w-80">
+        {sources.sources.map((source, index) => (
+          <div
+            key={index}
+            className="min-h-32 w-full rounded-[20px] bg-gray-1000 p-4 dark:bg-[#28292E]"
+          >
+            <span className="flex flex-row">
+              <p
+                title={source.title}
+                className="ellipsis-text break-words text-left text-sm font-semibold"
+              >
+                {`${index + 1}. ${source.title}`}
+              </p>
+              {source.source && source.source !== 'local' ? (
+                <img
+                  src={Link}
+                  alt="Link"
+                  className="h-3 w-3 cursor-pointer object-fill"
+                  onClick={() =>
+                    window.open(source.source, '_blank', 'noopener, noreferrer')
+                  }
+                ></img>
+              ) : null}
+            </span>
+            <p className="mt-3 max-h-24 overflow-y-auto break-words rounded-md text-left text-xs text-black dark:text-chinese-silver">
+              {source.text}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 export default ConversationBubble;
--- a/frontend/src/conversation/conversationHandlers.ts
+++ b/frontend/src/conversation/conversationHandlers.ts
@@ -91,7 +91,19 @@ export function handleFetchAnswerSteaming(

  return new Promise<Answer>((resolve, reject) => {
    conversationService
-      .answerStream(payload, signal)
+      .answerStream(
+        {
+          question: question,
+          active_docs: selectedDocs?.id as string,
+          history: JSON.stringify(history),
+          conversation_id: conversationId,
+          prompt_id: promptId,
+          chunks: chunks,
+          token_limit: token_limit,
+          isNoneDoc: selectedDocs === null,
+        },
+        signal,
+      )
      .then((response) => {
        if (!response.body) throw Error('No response body');

@@ -162,7 +174,15 @@ export function handleSearch(
    payload.active_docs = selectedDocs.id as string;
  payload.retriever = selectedDocs?.retriever as string;
  return conversationService
-    .search(payload)
+    .search({
+      question: question,
+      active_docs: selectedDocs?.id as string,
+      conversation_id,
+      history,
+      chunks: chunks,
+      token_limit: token_limit,
+      isNoneDoc: selectedDocs === null,
+    })
    .then((response) => response.json())
    .then((data) => {
      return data;
--- a/frontend/src/conversation/conversationSlice.ts
+++ b/frontend/src/conversation/conversationSlice.ts
@@ -62,7 +62,7 @@ export const fetchAnswer = createAsyncThunk<Answer, { question: string }>(
                dispatch(
                  updateStreamingSource({
                    index: state.conversation.queries.length - 1,
-                    query: { sources },
+                    query: { sources: sources ?? [] },
                  }),
                );
              });
--- a/frontend/src/hooks/useDefaultDocument.ts
+++ b/frontend/src/hooks/useDefaultDocument.ts
@@ -0,0 +1,30 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Doc, getDocs } from '../preferences/preferenceApi';
+import {
+  selectSelectedDocs,
+  setSelectedDocs,
+  setSourceDocs,
+} from '../preferences/preferenceSlice';
+
+export default function useDefaultDocument() {
+  const dispatch = useDispatch();
+  const selectedDoc = useSelector(selectSelectedDocs);
+
+  const fetchDocs = () => {
+    getDocs().then((data) => {
+      dispatch(setSourceDocs(data));
+      if (!selectedDoc)
+        data?.forEach((doc: Doc) => {
+          if (doc.model && doc.name === 'default') {
+            dispatch(setSelectedDocs(doc));
+          }
+        });
+    });
+  };
+
+  React.useEffect(() => {
+    fetchDocs();
+  }, []);
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -429,3 +429,15 @@ template {
  padding-left: 36px;
  padding-right: 36px;
 }
+
+.bottom-safe {
+  bottom: env(safe-area-inset-bottom, 0);
+}
+
+.ellipsis-text {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+}
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -71,7 +71,7 @@
      "remote": "Remote",
      "name": "Name",
      "choose": "Choose Files",
-      "info": "Please upload .pdf, .txt, .rst, .docx, .md, .zip limited to 25mb",
+      "info": "Please upload .pdf, .txt, .rst, .csv, .docx, .md, .zip limited to 25mb",
      "uploadedFiles": "Uploaded Files",
      "cancel": "Cancel",
      "train": "Train",
--- a/frontend/src/modals/DeleteConvModal.tsx
+++ b/frontend/src/modals/DeleteConvModal.tsx
@@ -19,15 +19,11 @@ export default function DeleteConvModal({
  const dispatch = useDispatch();
  const { isMobile } = useMediaQuery();
  const { t } = useTranslation();
-  useOutsideAlerter(
-    modalRef,
-    () => {
-      if (isMobile && modalState === 'ACTIVE') {
-        dispatch(setModalState('INACTIVE'));
-      }
-    },
-    [modalState],
-  );
+  useOutsideAlerter(modalRef, () => {
+    if (isMobile && modalState === 'ACTIVE') {
+      dispatch(setModalState('INACTIVE'));
+    }
+  }, [modalState]);

  function handleSubmit() {
    handleDeleteAllConv();
--- a/frontend/src/preferences/APIKeyModal.tsx
+++ b/frontend/src/preferences/APIKeyModal.tsx
@@ -22,15 +22,11 @@ export default function APIKeyModal({
  const modalRef = useRef(null);
  const { isMobile } = useMediaQuery();

-  useOutsideAlerter(
-    modalRef,
-    () => {
-      if (isMobile && modalState === 'ACTIVE') {
-        setModalState('INACTIVE');
-      }
-    },
-    [modalState],
-  );
+  useOutsideAlerter(modalRef, () => {
+    if (isMobile && modalState === 'ACTIVE') {
+      setModalState('INACTIVE');
+    }
+  }, [modalState]);

  function handleSubmit() {
    if (key.length <= 1) {
--- a/frontend/src/preferences/SelectDocsModal.tsx
+++ b/frontend/src/preferences/SelectDocsModal.tsx
@@ -1,114 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { ActiveState } from '../models/misc';
-import Modal from '../modals';
-import {
-  setSelectedDocs,
-  setSourceDocs,
-  selectSourceDocs,
-  selectSelectedDocs,
-} from './preferenceSlice';
-import { Doc } from '../models/misc';
-import { getDocs } from './preferenceApi';
-
-export default function APIKeyModal({
-  modalState,
-  setModalState,
-  isCancellable = true,
-}: {
-  modalState: ActiveState;
-  setModalState: (val: ActiveState) => void;
-  isCancellable?: boolean;
-}) {
-  const dispatch = useDispatch();
-  const docs = useSelector(selectSourceDocs);
-  const selectedDoc = useSelector(selectSelectedDocs);
-  const [localSelectedDocs, setLocalSelectedDocs] = useState<Doc | null>(
-    selectedDoc,
-  );
-  const [isDocsListOpen, setIsDocsListOpen] = useState(false);
-  const [isError, setIsError] = useState(false);
-
-  function handleSubmit() {
-    if (!localSelectedDocs) {
-      setIsError(true);
-    } else {
-      dispatch(setSelectedDocs(localSelectedDocs));
-      setModalState('INACTIVE');
-      setIsError(false);
-    }
-  }
-
-  function handleCancel() {
-    setIsError(false);
-    setModalState('INACTIVE');
-  }
-
-  useEffect(() => {
-    async function requestDocs() {
-      const data = await getDocs();
-      dispatch(setSourceDocs(data));
-    }
-
-    requestDocs();
-  }, []);
-  return (
-    <Modal
-      handleSubmit={handleSubmit}
-      isCancellable={isCancellable}
-      handleCancel={handleCancel}
-      modalState={modalState}
-      errorMessage="Please select Source Documentation"
-      isError={isError}
-      render={() => {
-        return (
-          <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-t-lg bg-white p-6 shadow-lg">
-            <p className="text-xl text-jet">Select Source Documentation</p>
-            <p className="text-lg leading-5 text-gray-500">
-              Please select the library of documentation that you would like to
-              use with our app.
-            </p>
-            <div className="relative">
-              <div
-                className="h-10 w-full cursor-pointer border-b-2"
-                onClick={() => setIsDocsListOpen(!isDocsListOpen)}
-              >
-                {!localSelectedDocs ? (
-                  <p className="py-3 text-gray-500">Select</p>
-                ) : (
-                  <p className="py-3">{localSelectedDocs.name}</p>
-                )}
-              </div>
-              {isDocsListOpen && (
-                <div className="absolute top-10 left-0 max-h-52 w-full overflow-y-scroll bg-white">
-                  {docs ? (
-                    docs.map((doc, index) => {
-                      if (doc.model) {
-                        return (
-                          <div
-                            key={index}
-                            onClick={() => {
-                              setLocalSelectedDocs(doc);
-                              setIsDocsListOpen(false);
-                            }}
-                            className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100"
-                          >
-                            <p className="ml-5 py-3">{doc.name}</p>
-                          </div>
-                        );
-                      }
-                    })
-                  ) : (
-                    <div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
-                      <p className="ml-5 py-3">No default documentation.</p>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          </article>
-        );
-      }}
-    />
-  );
-}
--- a/frontend/src/preferences/preferenceApi.ts
+++ b/frontend/src/preferences/preferenceApi.ts
@@ -64,11 +64,11 @@ export function setLocalPrompt(prompt: string): void {
  localStorage.setItem('DocsGPTPrompt', prompt);
 }

-export function setLocalRecentDocs(doc: Doc): void {
+export function setLocalRecentDocs(doc: Doc | null): void {
  localStorage.setItem('DocsGPTRecentDocs', JSON.stringify(doc));

  let docPath = 'default';
-  if (doc.type === 'local') {
+  if (doc?.type === 'local') {
    docPath = 'local' + '/' + doc.name + '/';
  }
  userService
--- a/frontend/src/preferences/preferenceSlice.ts
+++ b/frontend/src/preferences/preferenceSlice.ts
@@ -93,8 +93,7 @@ prefListenerMiddleware.startListening({
  matcher: isAnyOf(setSelectedDocs),
  effect: (action, listenerApi) => {
    setLocalRecentDocs(
-      (listenerApi.getState() as RootState).preference.selectedDocs ??
-        ([] as unknown as Doc),
+      (listenerApi.getState() as RootState).preference.selectedDocs ?? null,
    );
  },
 });
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -78,7 +78,7 @@ export default function APIKeys() {
  }, []);
  return (
    <div className="mt-8">
-      <div className="flex w-full flex-col lg:w-max">
+      <div className="flex flex-col max-w-[876px]">
        <div className="flex justify-end">
          <button
            onClick={() => setCreateModal(true)}
@@ -104,7 +104,7 @@ export default function APIKeys() {
            <table className="block w-max table-auto content-center justify-center rounded-xl border text-center dark:border-chinese-silver dark:text-bright-gray">
              <thead>
                <tr>
-                  <th className="border-r p-4 md:w-[244px]">
+                  <th className="w-[244px] border-r p-4">
                    {t('settings.apiKeys.name')}
                  </th>
                  <th className="w-[244px] border-r px-4 py-2">
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -259,6 +259,7 @@ function Upload({
      'application/zip': ['.zip'],
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
        ['.docx'],
+      'text/csv': ['.csv'],
    },
  });

--- a/scripts/requirements.txt
+++ b/scripts/requirements.txt
@@ -9,7 +9,7 @@ javalang==0.13.0
 langchain==0.1.4
 langchain_community==0.2.9
 langchain-openai==0.0.5
-nltk==3.8.1
+nltk==3.9
 openapi3_parser==1.1.16
 pandas==2.2.0
 PyPDF2==3.0.1