enhanced frontedn

src/backend/api_routes/chat_api.py

@@ -1,9 +1,9 @@
 from fastapi import APIRouter, HTTPException, status, Depends
-from services.embedding_service import get_text_embedding
-from services.pinecone_service import retrieve_context_from_pinecone
-from services.llm_model_service import get_health_advice
-from services.schemas import ConversationInput
-from utils import logger
+from backend.services.embedding_service import get_text_embedding
+from backend.services.pinecone_service import retrieve_context_from_pinecone
+from backend.services.llm_model_service import get_health_advice
+from backend.services.schemas import ConversationInput
+from backend.utils import logger
 
 logger = logger.get_logger()
 

src/backend/api_routes/chat_history_supabase_api.py

@@ -1,8 +1,8 @@
-from typing import Dict, Any, Union
+from typing import Dict,List, Any, Union
 from fastapi import APIRouter, HTTPException, status, Query
-from services.schemas import ChatHistoryRequest
-from services import supabase_service
-from utils import logger
+from backend.services.schemas import ChatHistoryRequest
+from backend.services import supabase_service
+from backend.utils import logger
 
 logger = logger.get_logger()
 
@@ -12,7 +12,7 @@ router = APIRouter(
 )
 
 @router.post('/store', response_model=Dict[str, Any], status_code=status.HTTP_201_CREATED)
-def add_chat_history(chat_history: ChatHistoryRequest) -> Dict[str, Any]:
+async def add_chat_history(chat_history: ChatHistoryRequest) -> Dict[str, Any]:
     """
     Save chat conversation history in the database.
 
@@ -50,7 +50,7 @@ def add_chat_history(chat_history: ChatHistoryRequest) -> Dict[str, Any]:
         )
 
 @router.get('/retrieve', response_model=Union[Dict[str, Any], None])
-def get_chat_history(
+async def get_chat_history(
     conversation_id: str = Query(..., description="Conversation ID for chat history retrieval")
 ) -> Union[Dict[str, Any], None]:
     """
@@ -96,4 +96,24 @@ def get_chat_history(
         raise HTTPException(
             status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
             detail="Unexpected error occurred while retrieving chat history. Please try again later."
-        )
+        )
+
+@router.get("/bucket-items", response_model=List[str])
+async def retrieve_bucket_items():
+    """
+    API endpoint to retrieve item names from a specified Supabase storage bucket.
+
+    Returns:
+        List[str]: A list of item names with '.json' removed, excluding the last item in the bucket.
+
+    Raises:
+        HTTPException: If an error occurs while fetching bucket items.
+    """
+    try:
+        conversation_ids = supabase_service.get_bucket_items()
+        if conversation_ids:
+            return conversation_ids
+        else:
+            raise HTTPException(status_code=404, detail="No items found in the bucket.")
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error fetching bucket items: {e}")

src/backend/api_routes/knowledge_base_api.py

@@ -1,8 +1,8 @@
 from fastapi import APIRouter, HTTPException
-from services import pinecone_service, embedding_service
-from services.schemas import UpsertRequest, DeleteRequest, MetadataRequest
+from backend.services import pinecone_service, embedding_service
+from backend.services.schemas import UpsertRequest, DeleteRequest, MetadataRequest
 import pandas as pd
-from utils import logger
+from backend.utils import logger
 from fastapi.responses import JSONResponse
 
 logger = logger.get_logger()

src/backend/data/dataset.py

@@ -1,7 +1,7 @@
 import os
 import pandas as pd
 import string
-from utils import logger
+from backend.utils import logger
 
 logger = logger.get_logger()
 

src/backend/data/pinecone_db.py

@@ -1,230 +0,0 @@
-import os
-# import sys
-# src_directory = os.path.abspath(os.path.join(os.path.dirname(__file__), "../..", "backend"))
-# sys.path.append(src_directory)
-from pinecone import Pinecone, ServerlessSpec
-import time
-from tqdm import tqdm
-from dotenv import load_dotenv
-from utils import logger
-import pandas as pd
-from models import embedding_model
-
-load_dotenv()
-PINECONE_API_KEY = os.environ.get("PINECONE_API_KEY")
-logger = logger.get_logger()
-NAMESPACE = "health-care-dataset"
-INDEX_NAME = "health-care-index"
-PINECONE = Pinecone(api_key=PINECONE_API_KEY)
-
-def initialize_pinecone_index(pinecone, index_name, dimension=384, metric="cosine", cloud="aws", region="us-east-1"):
-    """
-    Retrieves an existing Pinecone index or creates a new one if it does not exist.
-
-    This method checks for the presence of the specified index. If the index does not exist,
-    it initiates the creation process, waits until the index is ready, and then returns the index.
-
-    Args:
-        pinecone (Pinecone): Pinecone client instance.
-        index_name (str): Name of the index to retrieve or create.
-        dimension (int, optional): Vector dimension for the index. Default is 384.
-        metric (str, optional): Distance metric for the index. Default is "cosine".
-        cloud (str, optional): Cloud provider for hosting the index. Default is "aws".
-        region (str, optional): Region where the index will be hosted. Default is "us-east-1".
-
-    Returns:
-        pinecone.Index: The Pinecone index instance.
-
-    Raises:
-        Exception: If an error occurs during index creation or retrieval.
-
-    Example:
-        >>> index = get_or_create_index(pinecone, "sample_index")
-        Logs: "Index 'sample_index' is ready and accessible."
-    """
-    try:
-        logger.info(f"Checking if the index '{index_name}' exists...")
-
-        # Check if index already exists
-        if not pinecone.has_index(index_name):
-            logger.info(f"Index '{index_name}' does not exist. Creating a new index...")
-
-            # Create a new index
-            pinecone.create_index(
-                name=index_name,
-                dimension=dimension,
-                metric=metric,
-                spec=ServerlessSpec(cloud=cloud, region=region)
-            )
-            logger.info(f"Index '{index_name}' creation initiated. Waiting for it to be ready...")
-
-            # Wait until index is ready
-            while True:
-                index_status = pinecone.describe_index(index_name)
-                if index_status.status.get("ready", False):
-                    index = pinecone.Index(index_name)
-                    logger.info(f"Index '{index_name}' is ready and accessible.")
-                    return index
-                else:
-                    logger.debug(f"Index '{index_name}' is not ready yet. Checking again in 1 second.")
-                    time.sleep(1)
-        else:
-            # Return the existing index
-            index = pinecone.Index(index_name)
-            logger.info(f"Index '{index_name}' already exists. Returning the existing index.")
-            return index
-
-    except Exception as e:
-        logger.error(f"Error occurred while getting or creating the Pinecone index: {str(e)}", exc_info=True)
-        return None
-    
-def delete_records_by_ids(ids_to_delete):
-    """
-    Deletes specified IDs from the database index.
-
-    This method interacts with the index to delete entries based on the provided list of IDs.
-    It logs a success message if the deletion is successful or returns an error message if it fails.
-
-    Args:
-        ids_to_delete (list): 
-            A list of unique identifiers (IDs) to be deleted from the database.
-
-    Returns:
-        str: A success message is logged upon successful deletion.
-             If an error occurs, a string describing the failure is returned.
-
-    Raises:
-        Exception: Logs an error if the deletion process encounters an issue.
-
-    Example:
-        >>> remove_ids_from_database(['id_123', 'id_456'])
-        Logs: "IDs deleted successfully."
-
-    Notes:
-        - The method assumes `get_index()` initializes the index object.
-        - Deletion occurs within the specified `NAMESPACE`.
-    """
-    try:
-        index = initialize_pinecone_index(PINECONE,INDEX_NAME)
-        index.delete(ids=ids_to_delete, namespace=NAMESPACE)
-        logger.info("IDs deleted successfully.")
-    except Exception as e:
-        return f"Failed to delete the IDs: {e}"
-
-def retrieve_relevant_metadata(prompt, n_result=3, score_threshold=0.47):
-    """
-    Retrieves relevant context data based on a given prompt and extracts metadata.
-
-    This method queries the Pinecone index with the provided prompt's embedding,
-    fetches the top `n_result` entries, and filters out entries with a score below 
-    the specified threshold. Extracted metadata is formatted and returned.
-
-    Args:
-        prompt (str or list): 
-            The input prompt used to generate the text embedding. 
-            If a list is provided, the method extracts the last element.
-        n_result (int, optional): 
-            The number of relevant results to return. Defaults to 3.
-        score_threshold (float, optional): 
-            The minimum score required for an entry to be included in the results. Defaults to 0.5.
-
-    Returns:
-        list: A list of dictionaries containing:
-            - `"question"` (str): Extracted question or `"N/A"` if unavailable.
-            - `"answer"` (str): Extracted answer or `"N/A"` if unavailable.
-            - `"instruction"` (str): Extracted instruction or `"N/A"` if unavailable.
-            - `"score"` (str): The score value as a string for consistency.
-
-        If no relevant entries are found, the list will contain a single
-        dictionary with the key `"response"` and a message indicating no data was found.
-
-    Example:
-        >>> prompt = ["Tell me about mental health"]
-        >>> fetch_and_extract_metadata(prompt, n_result=2)
-        [{'question': 'What is mental health?', 'answer': 'Mental health refers to...', 
-          'instruction': 'Focus on general well-being.', 'score': '0.6'}]
-
-    Notes:
-        - Assumes `get_or_create_index()` initializes the index object.
-        - Uses `embedding_model.get_text_embedding()` to generate text embeddings.
-        - Entries without a `metadata` key or with missing fields default to `"N/A"`.
-        - Entries with a score below `score_threshold` are excluded from results.
-    """
-    try:
-        index = initialize_pinecone_index(PINECONE, INDEX_NAME)
-        prompt = prompt[-1] if isinstance(prompt, list) else prompt
-
-        # Generate embedding for the provided prompt
-        embedding = embedding_model.get_text_embedding(prompt)
-        response = index.query(
-            top_k=n_result,
-            vector=embedding,
-            namespace=NAMESPACE,
-            include_metadata=True
-        )
-
-        # Extract and filter metadata
-        metadata = [
-            {
-                "question": entry.get('metadata', {}).get('question', 'N/A'),
-                "answer": entry.get('metadata', {}).get('answer', 'N/A'),
-                "instruction": entry.get('metadata', {}).get('instruction', 'N/A'),
-                "score": f"{entry.get('score', 0)}",
-                "id": f"{entry.get('id', 'N/A')}"
-            }
-            for entry in response.get('matches', [])
-            if entry.get('score', 0) >= score_threshold
-        ]
-
-        # Return metadata or fallback message
-        return metadata if metadata else [{"response": "No relevant data found."}]
-
-    except Exception as e:
-        logger.error(f"Failed to fetch context for '{prompt[:20]}'. Error: {e}")
-        return [{"response": "Failed to fetch data due to an error."}]
-
-def upsert_vector_data(df: pd.DataFrame):
-
-    """
-    Generates embeddings for the given DataFrame and uploads data to Pinecone in batches.
-    
-    Parameters:
-    - df (pd.DataFrame): DataFrame containing 'input', 'question', and 'answer' columns.
-    
-    Returns:
-    - None
-    """
-
-    try:
-        index = initialize_pinecone_index(PINECONE,INDEX_NAME)
-        df["embedding"] = [
-            embedding_model.get_text_embedding([q])[0] 
-            for q in tqdm(df["input"], desc="Generating Embeddings")
-        ]
-    except Exception as e:
-        logger.error(f"Error generating embeddings: {e}")
-        return
-
-    # # Upload data to Pinecone in batches
-    BATCH_SIZE = 500
-
-    for i in tqdm(range(0, len(df), BATCH_SIZE), desc="Uploading Data to Pinecone"):
-        batch = df.iloc[i : i + BATCH_SIZE]
-    
-        vectors = []
-        for idx, (embedding, (_, row_data)) in enumerate(zip(batch["embedding"], batch.iterrows())):
-            question = row_data.get("input")
-            vector_id = f"{question[:50]}:{i + idx}"  # Ensures IDs remain unique across 
-            metadata = {
-                "question": row_data.get("input"),
-                "answer": row_data.get("output"),
-                "instruction": row_data.get("instruction"),
-            }
-            vectors.append((vector_id, embedding, metadata))
-
-        try:
-            index.upsert(vectors=vectors,namespace=NAMESPACE)
-        except Exception as e:
-            logger.error(f"Error uploading batch starting at index {i}: {e}")
-
-    logger.info("All question-answer pairs stored successfully!")

src/backend/services/embedding_service.py

@@ -1,6 +1,6 @@
 from sentence_transformers import SentenceTransformer
 from langchain.text_splitter import RecursiveCharacterTextSplitter
-from utils import logger
+from backend.utils import logger
 
 logger = logger.get_logger()
 

src/backend/services/pinecone_service.py

@@ -6,9 +6,9 @@ from pinecone import Pinecone, ServerlessSpec
 import time
 from tqdm import tqdm
 from dotenv import load_dotenv
-from utils import logger
+from backend.utils import logger
 import pandas as pd
-from services.embedding_service import get_text_embedding
+from backend.services.embedding_service import get_text_embedding
 from sentence_transformers import CrossEncoder
 
 reranker = CrossEncoder('cross-encoder/ms-marco-MiniLM-L-6-v2')

src/backend/services/supabase_service.py

@@ -1,8 +1,11 @@
 import json
 import os
+import sys
+src_directory = os.path.abspath(os.path.join(os.path.dirname(__file__), "../..", "backend"))
+sys.path.append(src_directory)
 from datetime import datetime
 from supabase import create_client, StorageException
-from utils import logger
+from backend.utils import logger
 from dotenv import load_dotenv
 
 # Logger Initialization
@@ -14,6 +17,7 @@ SUPABASE_URL = os.getenv('SUPABASE_URL')
 SUPABASE_KEY = os.getenv('SUPABASE_KEY')
 SUPABASE_BUCKET = os.getenv('SUPABASE_BUCKET')
 LLM_MODEL_NAME = os.getenv('LLM_MODEL_NAME')
+BUCKET_FOLDER = "chat-history"
 
 # Supabase Client Initialization
 supabase = create_client(SUPABASE_URL, SUPABASE_KEY)
@@ -137,4 +141,43 @@ def retrieve_chat_history(conversation_id: str) -> dict:
         return {"success": False, "error": "Failed to retrieve chat history. Storage error occurred."}
     except Exception as e:
         logger.error(f"Unexpected error retrieving chat history for ID {conversation_id}: {e}")
-        return {"success": False, "error": "Unexpected error occurred while retrieving chat history."}
+        return {"success": False, "error": "Unexpected error occurred while retrieving chat history."}
+    
+def get_bucket_items():
+    """
+    Retrieves item names from a specified Supabase storage bucket and returns them as a list, 
+    excluding the '.json' extension and omitting the last item in the response.
+
+    This function uses the globally defined `SUPABASE_BUCKET` and `BUCKET_FOLDER` variables 
+    to identify the bucket and folder path.
+
+    Returns:
+        list: A list of item names with '.json' removed, excluding the last item in the bucket.
+
+    Logs:
+        - An error if there are no items found in the bucket.
+        - An error if an exception occurs during the fetching process.
+
+    Example:
+        Suppose the bucket contains:
+        - "2025-03-18.json"
+        - "2025-03-19.json"
+        - "2025-03-20.json"
+
+        The function will return:
+        ['2025-03-18', '2025-03-19']
+
+    Raises:
+        Exception: Logs an error if fetching bucket items fails.
+    """
+    try:
+        response = supabase.storage.from_(SUPABASE_BUCKET).list(BUCKET_FOLDER)
+        conversation_ids = []
+        if response:
+            for item in response[:-1]:
+                conversation_ids.append(item['name'].replace('.json', ''))
+            return conversation_ids
+        else:
+            logger.error("No items found in the bucket.")
+    except Exception as e:
+        logger.error(f"Error fetching bucket items: {e}")

src/frontend/app/common_functions.py

@@ -2,7 +2,7 @@ import os
 import base64
 import requests
 from dotenv import load_dotenv
-from utils import logger
+from frontend.utils import logger
 import json
 import time
 import streamlit as st
@@ -19,9 +19,26 @@ ABOUT_US = "An AI-powered assistant for personalized healthcare guidance."
 API_URL = os.getenv("API_URL", "http://localhost:8000")
 
 def config_homepage(page_title=PAGE_TITLE):
-    if not hasattr(st, "_page_config_set"):
+    """
+    Configures the Streamlit homepage with essential settings.
+
+    This function sets up the page title, icon, layout, and sidebar state.
+    It also defines custom menu items for better navigation.
+
+    Args:
+        page_title (str): The title displayed on the browser tab (default is PAGE_TITLE).
+
+    Key Features:
+    - Ensures `st.set_page_config()` is called only once to avoid errors.
+    - Uses constants for improved maintainability and consistency.
+    - Provides links for help, bug reporting, and an 'About' section.
+
+    Example:
+        >>> config_homepage("My Custom App")
+    """
+    if "page_config_set" not in st.session_state:
         st.set_page_config(
-            page_title=PAGE_TITLE,
+            page_title=page_title,
             page_icon=PAGE_ICON,
             layout=PAGE_LAYOUT,
             initial_sidebar_state="collapsed",
@@ -31,14 +48,41 @@ def config_homepage(page_title=PAGE_TITLE):
                 "About": ABOUT_US
             }
         )
+        st.session_state.page_config_set = True
+
+def set_page_title(page_title=PAGE_TITLE, icon="⚕️", color="#2E7D32", font_size="36px"):
+    """
+    Sets a custom-styled page title for the Streamlit application.
+
+    Parameters:
+    -----------
+    page_title : str
+        The text to display as the page title. Defaults to the value of PAGE_TITLE.
+    icon : str, optional
+        An optional emoji or symbol to enhance the visual appeal of the title. Defaults to "⚕️".
+    color : str, optional
+        Hex color code for the title text. Defaults to a fresh green shade (#2E7D32).
+    font_size : str, optional
+        Font size for the title text. Defaults to "36px".
 
-def set_page_title(page_title=PAGE_TITLE):
+    Example Usage:
+    ---------------
+    set_page_title("Welcome to Yuvabe", icon="🌿", color="#1E88E5", font_size="42px")
+    """
+    
     st.markdown(f"""
-        <h1 style="color: white; text-align: left; font-size: 42px;">
-        <i>{PAGE_TITLE} ⚕️</i>
+        <h1 style="
+            color: {color};
+            font-size: {font_size};
+            font-weight: bold;
+            margin-bottom: 15px;
+            text-align: center;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Adds depth for a cleaner look */
+            padding: 10px 0;  /* Improved spacing */
+        ">
+            <i>{page_title} {icon}</i>
         </h1>
-        """, unsafe_allow_html=True
-    )
+    """, unsafe_allow_html=True)
 
 def img_to_base64(image_path):
     """Convert image to base64."""
@@ -49,16 +93,196 @@ def img_to_base64(image_path):
         logger.error(f"Error converting image to base64: {str(e)}")
         return None
     
-def typewriter_effect(text, speed=0.01):
-    """Displays text with a realistic typewriter effect (character by character)."""
+def typewriter_effect(text, speed=0.03, gradient=False):
+    """
+    Displays text with a typewriter effect. 
+    Supports optional gradient styling for enhanced visual appeal.
+
+    Args:
+        text (str): The text to display with the typing effect.
+        speed (float): Typing speed in seconds (default 0.03).
+        gradient (bool): If True, applies a gradient effect to the text.
+    """
     placeholder = st.empty()
     displayed_text = ""
-    
+
     for char in text:
         displayed_text += char
-        placeholder.markdown(displayed_text)
+        
+        if gradient:
+            placeholder.markdown(f"""
+                <h2 style="
+                color: #3D6D6B;
+                text-align: left;
+                background: linear-gradient(90deg, #3D6D6B, #6EA8A5);
+                -webkit-background-clip: text;
+                color: white;
+                font-weight: bold;
+                font-size: 28px;">
+                {displayed_text}
+            </h2>
+            """, unsafe_allow_html=True)
+        else:
+            placeholder.markdown(displayed_text)
+        
         time.sleep(speed)
-    
+
+def custom_navbar():
+    """
+    Renders a custom navigation bar with a modern design for the Streamlit application.
+
+    The navigation bar includes:
+    - **Logo:** Displays "Yuvabe Care Companion AI" as the app's brand.
+    - **Navigation Links:** Provides links to key sections like Home, Admin Portal, Knowledge Base Explorer, and Chatbot.
+
+    Key Features:
+    - Responsive Design: The layout adjusts for different screen sizes using media queries.
+    - Enhanced UI: Includes a soft background, subtle shadow, and smooth hover effects for improved aesthetics.
+    - Accessibility: Ensures text visibility and clickable elements for better user interaction.
+
+    Example Usage:
+        >>> custom_navbar()
+
+    """
+    st.markdown(
+        """
+        <style>
+        .navbar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: #FFFFFF;
+            padding: 16px 32px;
+            width: 100%;
+            border-radius: 50px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            border-bottom: 3px solid #2E5D5B;
+            box-sizing: border-box;
+            white-space: nowrap;
+            overflow-x: auto;
+        }
+
+        .logo {
+            font-family: 'Arial', sans-serif;
+            font-size: 28px;
+            font-weight: bold;
+            color: #1E293B;
+        }
+
+        .nav-links {
+            display: flex;
+            gap: 32px;
+            align-items: center;
+        }
+
+        .nav-link {
+            color: #1E293B !important;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 22px;
+            padding: 8px 16px;
+            border-radius: 6px;
+            transition: background-color 0.3s ease, color 0.3s ease;
+        }
+
+        .nav-link:hover {
+            background-color: #2E5D5B;
+            color: #FFFFFF !important;
+            border-radius: 50px;
+        }
+
+        @media (max-width: 1024px) {
+            .navbar {
+                flex-direction: column;
+                text-align: center;
+                padding: 12px 24px;
+            }
+
+            .nav-links {
+                flex-direction: column;
+                gap: 12px;
+                width: 100%;
+            }
+
+            .nav-link {
+                width: 100%;
+                text-align: center;
+            }
+        }
+        </style>
+
+        <div class="navbar">
+            <div class="logo">Yuvabe Care Companion AI</div>
+            <div class="nav-links">
+                <a href="/" class="nav-link">Home</a>
+                <a href="/Admin_Portal" class="nav-link">Admin Portal</a>
+                <a href="/Knowledge_Base_Explorer" class="nav-link">Knowledge Base Explorer</a>
+                <a href="/chatbot" class="nav-link">Chat With Us</a>
+            </div>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
+
+def set_bg_image(file_path, opacity=0.5):
+    """
+    Sets a background image for the Streamlit application with optional opacity control.
+
+    This function applies a background image to the entire Streamlit app (`.stApp` container) 
+    using CSS with a linear gradient overlay. The overlay enhances text readability by adding 
+    a semi-transparent dark layer over the image.
+
+    Args:
+        file_path (str): The file path of the background image (supports PNG, JPG, etc.).
+        opacity (float, optional): The opacity level of the dark overlay. 
+                                   Values range from 0 (fully transparent) to 1 (fully opaque). 
+                                   Default is 0.5, providing balanced readability and background visibility.
+
+    Example Usage:
+        ```python
+        set_bg_image("src/frontend/images/health_care_banner.png", opacity=0.6)
+        ```
+
+    Notes:
+    - Ensure the provided `file_path` is accessible and the image is properly encoded in base64 format.
+    - For optimal results, use high-resolution images with suitable contrast to enhance readability.
+
+    """
+    encoded_img = img_to_base64(file_path)
+    st.markdown(
+        f"""
+        <style>
+        .stApp {{
+            background: linear-gradient(rgba(0, 0, 0, {opacity}), rgba(0, 0, 0, {opacity})),
+                        url("data:image/png;base64,{encoded_img}") center/cover fixed no-repeat;
+            min-height: 100vh;
+        }}
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 def get_api_response(endpoint:str, prompt: list):
     try:
         logger.info(f"Sending user prompt to API endpoint: {API_URL}{endpoint}")
@@ -113,6 +337,47 @@ def store_chat_history_in_db(conversation_id, messages):
     except Exception as e:
         logger.info(f"Failed to add the chat in db {e}")
 
+def display_message_box(role, content):
+    """
+    Displays a styled message box for user or assistant content.
+
+    Args:
+        role (str): The role of the speaker (e.g., 'User' or 'Assistant').
+        content (str): The text content to display.
+    """
+    # Define styles based on role
+    background_color = "#E3F2FD" if role.lower() == 'user' else "#E8F5E9"
+    border_color = "#1E88E5" if role.lower() == 'user' else "#43A047"
+    text_align = "left" if role.lower() == 'user' else "right"
+    flex_direction = "row" if role.lower() == 'user' else "row-reverse"
+    avatar = "path_to_user_avatar.png" if role.lower() == 'user' else "path_to_assistant_avatar.png"
+
+    st.markdown(f"""
+        <div style="
+            display: flex; 
+            flex-direction: {flex_direction}; 
+            align-items: center; 
+            margin-bottom: 10px;
+            gap: 10px;">
+            
+            <img src="{avatar}" alt="{role} avatar" style="width: 40px; height: 40px; border-radius: 50%;">
+
+            <div style="
+                background-color: {background_color}; 
+                padding: 15px; 
+                border-left: 5px solid {border_color}; 
+                border-radius: 8px; 
+                box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
+                width: 100%;">
+                
+                <strong style="color: #333; font-size: 16px;">{role}:</strong>
+                <div style="margin-top: 5px; color: #555; font-size: 14px;">
+                    {content}
+                </div>
+            </div>
+        </div>
+        """, unsafe_allow_html=True)
+
 def get_chat_history_from_db(conversation_id: str, retries=3, delay=5):
     API_URL = "http://127.0.0.1:8000/chat-history/retrieve"
     for attempt in range(retries):
@@ -143,7 +408,7 @@ def display_chat_history(conversation_id):
             first_message_content = chat_history["data"]["messages"][0].get('content', '').strip()
             button_text = first_message_content[:20] if first_message_content else "No Content"
 
-            if st.sidebar.button(f"Show History for {button_text}", key=f"show_history_{conversation_id}"):
+            if st.sidebar.button(f"Show History for {button_text} : {conversation_id}", key=f"show_history_{conversation_id}"):
                 st.subheader(f"Chat History for Conversation ID: {conversation_id}")
 
                 for message in chat_history["data"]["messages"]:
@@ -170,122 +435,11 @@ def display_chat_history(conversation_id):
         logger.error(f"Error retrieving chat history for {conversation_id}: {e}")
         st.error("An unexpected error occurred while retrieving chat history.")
 
-    
-def set_bg_image(file_path, opacity=0.5):
-    encoded_img = img_to_base64(file_path)
-    st.markdown(
-        f"""
-        <style>
-        .stApp {{
-            background: linear-gradient(rgba(0, 0, 0, {opacity}), rgba(0, 0, 0, {opacity})),
-                        url("data:image/png;base64,{encoded_img}") center/cover fixed no-repeat;
-            min-height: 100vh;
-        }}
-        </style>
-        """,
-        unsafe_allow_html=True
-    )
-
-def custom_navbar():
-    st.markdown(
-        """
-        <style>
-        .navbar {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background-color: #F0F2F6; 
-            padding: 12px 32px;
-            margin-top: -30px; 
-            width: 100%; 
-            max-width: 1200px;
-            border-radius: 32px;
-            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
-            border: 1px solid #D1D5DB;
-            margin-left: auto;
-            margin-right: auto;
-            box-sizing: border-box;
-            flex-wrap: wrap;
-        }
-
-        .logo {
-            font-family: 'Arial', sans-serif;
-            font-size: 30px;
-            font-weight: bold;
-            color: #1E293B;
-            white-space: nowrap; 
-            text-overflow: ellipsis;
-            flex-wrap: wrap;
-        }
-
-        .nav-links {
-            display: flex;
-            gap: 32px;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-
-        .nav-link {
-            color: #1E293B !important;
-            background-color: transparent;
-            text-decoration: none;
-            font-weight: 600;
-            font-size: 18px;
-            padding: 6px 16px;
-            border-radius: 8px;
-            transition: background-color 0.3s ease, color 0.3s ease;
-            white-space: nowrap;
-        }
-
-        .nav-link:hover {
-            background-color: #2E5D5B;
-            color: #FFFFFF;
-        }
-
-        @media (max-width: 768px) {
-            .navbar {
-                flex-direction: column;
-                text-align: center;
-                padding: 12px 16px; /* Adjusted padding for smaller screens */
-            }
-
-            .nav-links {
-                flex-direction: column;
-                gap: 12px;
-                margin-top: 8px;
-            }
-        }
-
-        </style>
-
-        <div class="navbar">
-            <div class="logo">Yuvabe Care Companion AI</div>
-            <div class="nav-links">
-                <a href="/" class="nav-link">Home</a>
-                <a href="/Admin_Portal" class="nav-link">Admin Portal</a>
-                <a href="/Knowledge_Base_Explorer" class="nav-link">Knowledge Base Explorer</a>
-                <a href="/chatbot" class="nav-link">Chat With Us</a>
-            </div>
-        </div>
-        """,
-        unsafe_allow_html=True
-    )
-
-def type_text(container, text, delay=0.03):
-    """Simulates a typing effect for text with only text highlighted."""
-    displayed_text = ""
-    for char in text:
-        displayed_text += char
-        container.markdown(f"""
-            <h2 style="
-                color: #3D6D6B;
-                text-align: left;
-                background: linear-gradient(90deg, #3D6D6B, #6EA8A5);
-                -webkit-background-clip: text;
-                color: white;
-                font-weight: bold;
-                font-size: 28px;">
-                {displayed_text}
-            </h2>
-        """, unsafe_allow_html=True)
-        time.sleep(delay)
+def get_bucket_items():
+    API_URL = "http://127.0.0.1:8000/chat-history/bucket-items"
+    try:
+        response = requests.get(API_URL)
+        response.raise_for_status()
+        return response.json()
+    except Exception as e:
+            logger.error(f"Failed to get the bucket items {e}")

src/frontend/app/pinecone_data_handler.py

@@ -1,67 +1,125 @@
 import requests
-from app import common_functions
+from frontend.app import common_functions
 import streamlit as st
 
-
 API_BASE_URL = "http://localhost:8000/knowledge-base"
 
-def upsert_data(st):
-    st.header("Upsert Data")
+def upsert_data():
+    """
+    Displays a form to upsert data into the Pinecone database.
+
+    Features:
+    - Users can provide 'Input', 'Output', and 'Instruction'.
+    - Displays appropriate success or error messages.
+    - Improved error handling with detailed feedback.
+    """
+
+    st.subheader("Enter the data to upsert")
     with st.form("upsert_form"):
-        input_text = st.text_area("Input", "What is mental health?")
-        output_text = st.text_area("Output", "Mental health refers to...")
-        instruction_text = st.text_input("Instruction", "Focus on general well-being.")
-        upsert_submit = st.form_submit_button("Upsert Data")
+        # Input Fields
+        input_text = st.text_area("Input", placeholder="Enter input text here...", height=150)
+        output_text = st.text_area("Output", placeholder="Enter output text here...", height=150)
+        instruction_text = st.text_input("Instruction", placeholder="Provide guidance for the data...")
+
+        upsert_submit = st.form_submit_button("🚀 Upsert Data")
 
         if upsert_submit:
-            payload = {"data": [{"input": input_text, "output": output_text, "instruction": instruction_text}]}
-            response = requests.post(f"{API_BASE_URL}/upsert-data", json=payload)
-            st.success(response.json()["message"]) if response.status_code == 200 else st.error(response.json()["detail"])
+            # ✅ Validation Check
+            if not input_text.strip() or not output_text.strip() or not instruction_text.strip():
+                st.error("❗ All fields are required. Please fill out each section before submitting.")
+                return
 
-def delete_records(st):
-    st.header("Delete Records")
+            # ✅ Payload Creation
+            payload = {
+                "data": [
+                    {
+                        "input": input_text.strip(),
+                        "output": output_text.strip(),
+                        "instruction": instruction_text.strip()
+                    }
+                ]
+            }
+
+            # API Call 
+            with st.spinner("⏳ Processing your data..."):
+                try:
+                    response = requests.post(f"{API_BASE_URL}/upsert-data", json=payload)
+                    response_data = response.json()
+
+                    if response.status_code == 200:
+                        st.success(f"✅ Data successfully upserted: {response_data.get('message', 'Success')}")
+                        st.toast("🎉 Upsert successful!")
+                    elif response.status_code == 400:
+                        st.warning(f"⚠️ Bad Request: {response_data.get('detail', 'Check your input data.')}")
+                    elif response.status_code == 500:
+                        st.error("❌ Internal Server Error. Please try again later.")
+                    else:
+                        st.error(f"❗ Unexpected error: {response_data.get('detail', 'Unknown issue occurred.')}")
+                except requests.exceptions.RequestException as e:
+                    st.error(f"❌ Network error: {e}")
+
+def delete_records():
+    """
+    Displays a form to delete records from the Pinecone database.
+
+    Features:
+    - Users can input comma-separated IDs for deletion.
+    - Includes validation checks for empty or malformed IDs.
+    - Enhanced error handling for better user feedback.
+    """
+    st.subheader("Enter id to delete")
     with st.form("delete_form"):
-        ids_to_delete = st.text_area("IDs to Delete", "id_123, id_456").split(",")
-        delete_submit = st.form_submit_button("Delete Records")
+        ids_input = st.text_area("IDs to Delete", placeholder="Enter IDs separated by commas (e.g., id_123, id_456)")
+        ids_to_delete = [id.strip() for id in ids_input.split(",") if id.strip()]
+
+        delete_submit = st.form_submit_button("🗑️ Delete Records")
 
         if delete_submit:
-            payload = {"ids_to_delete": [id.strip() for id in ids_to_delete]}
-            response = requests.post(f"{API_BASE_URL}/delete-records", json=payload)
-            st.success(response.json()["message"]) if response.status_code == 200 else st.error(response.json()["detail"])
-
-# def render_metadata_fetch_form(st):
-#     st.header("Fetch Metadata")
-#     with st.form("fetch_metadata_form"):
-#         prompt_text = st.text_area("Describe Your Concern", "e.g., I've been feeling anxious lately.")
-#         n_result = st.number_input("Number of Results", min_value=1, value=3)
-#         score_threshold = st.number_input("Score Threshold", min_value=0.0, max_value=1.0, value=0.47)
-#         metadata_submit = st.form_submit_button("Fetch Metadata")
-
-#         if metadata_submit:
-#             payload = {
-#                 "prompt": prompt_text,
-#                 "n_result": n_result,
-#                 "score_threshold": score_threshold
-#             }
-#             response = requests.post(f"{API_BASE_URL}/fetch-metadata", json=payload)
-#             if response.status_code == 200:
-#                 metadata = response.json().get('metadata', [])
-#                 try:
-#                     if metadata:
-#                         st.subheader("Search Results")
-#                         for index, entry in enumerate(metadata, start=1):
-#                             st.markdown(f"### Result {index}")
-#                             common_fuctions.typewriter_effect(st, f"**Question:** {entry['question']}")
-#                             common_fuctions.typewriter_effect(st, f"**Answer:** {entry['answer']}")
-#                             st.markdown(f"**Score:** {entry['score']}")
-#                             st.markdown(f"**ID:** {entry['id']}")
-#                             st.markdown("---")
-#                 except Exception as e:
-#                     st.info("There is not relevant data to fetch")
-
-def render_metadata_fetch_form(st):
-    st.header("Fetch Metadata")
+            # ✅ Validation Check
+            if not ids_to_delete:
+                st.error("❗ Please provide at least one valid ID.")
+                return
+
+            # 🔒 Confirmation Prompt for Safety
+            if not st.confirm("Are you sure you want to delete the selected records? This action is irreversible."):
+                st.info("❗ Deletion canceled.")
+                return
+
+            # ✅ Payload Creation
+            payload = {"ids_to_delete": ids_to_delete}
+
+            # ✅ API Call with Improved Error Handling
+            with st.spinner("⏳ Deleting records..."):
+                try:
+                    response = requests.post(f"{API_BASE_URL}/delete-records", json=payload)
+                    response_data = response.json()
+
+                    if response.status_code == 200:
+                        st.success(f"✅ {response_data.get('message', 'Records successfully deleted.')}")
+                        st.toast("🎯 Deletion successful!")
+                    elif response.status_code == 400:
+                        st.warning(f"⚠️ Bad Request: {response_data.get('detail', 'Check the provided IDs.')}")
+                    elif response.status_code == 404:
+                        st.warning("⚠️ No matching records found. Please verify the provided IDs.")
+                    elif response.status_code == 500:
+                        st.error("❌ Internal Server Error. Please try again later.")
+                    else:
+                        st.error(f"❗ Unexpected error: {response_data.get('detail', 'Unknown issue occurred.')}")
+                except requests.exceptions.RequestException as e:
+                    st.error(f"❌ Network error: {e}")
+
+def render_metadata_fetch_form():
+    """
+    Renders a form to fetch metadata based on user concerns.
+    
+    Features:
+    - Input validation to ensure meaningful data is provided.
+    - Displays metadata in a visually appealing format.
+    - Improved error handling with detailed messages.
+    """
+    st.header("📋 Fetch Metadata")
     with st.form("fetch_metadata_form"):
+        # 📝 Input Fields
         prompt_text = st.text_area(
             "Describe Your Concern", 
             "e.g., I've been feeling anxious lately.",
@@ -81,30 +139,47 @@ def render_metadata_fetch_form(st):
             help="Set the minimum relevance score for the results. Higher values ensure more accurate matches."
         )
 
-        metadata_submit = st.form_submit_button("Fetch Metadata")
+        metadata_submit = st.form_submit_button("🔍 Fetch Metadata")
 
         if metadata_submit:
+            # ✅ Input Validation
+            if not prompt_text.strip():
+                st.warning("❗ Please provide a valid concern description.")
+                return
+
             payload = {
                 "prompt": prompt_text.strip(),
                 "n_result": n_result,
                 "score_threshold": score_threshold
             }
 
-            try:
-                response = requests.post(f"{API_BASE_URL}/fetch-metadata", json=payload)
-                response.raise_for_status()  # Ensures HTTP errors are caught
-                metadata = response.json().get('metadata', [])
-
-                if metadata:
-                    st.subheader("Search Results")
-                    for index, entry in enumerate(metadata, start=1):
-                        st.markdown(f"### Result {index}")
-                        common_functions.typewriter_effect(f"**Question:** {entry.get('question', 'N/A')}")
-                        common_functions.typewriter_effect(f"**Answer:** {entry.get('answer', 'N/A')}")
-                        st.markdown(f"**Score:** {entry.get('score', 'N/A')}")
-                        st.markdown(f"**ID:** {entry.get('id', 'N/A')}")
-                        st.markdown("---")
-                else:
-                    st.info("No relevant data found based on your input. Try refining your concern or adjusting the threshold.")
-            except Exception as e:
-                st.error(f"An unexpected error occurred: {e}")
+            # 🔄 Enhanced API Request with Better Error Handling
+            with st.spinner("⏳ Fetching metadata..."):
+                try:
+                    response = requests.post(f"{API_BASE_URL}/fetch-metadata", json=payload)
+                    response.raise_for_status()  
+                    metadata = response.json().get('metadata', [])
+
+                    # ✅ Display Results
+                    if metadata:
+                        st.success(f"✅ Found {len(metadata)} relevant result(s).")
+                        st.subheader("Search Results")
+
+                        for index, entry in enumerate(metadata, start=1):
+                            common_functions.typewriter_effect(f"**🧠 Question:** {entry.get('question', 'N/A')}",speed=0)
+                            common_functions.typewriter_effect(f"**💬 Answer:** {entry.get('answer', 'N/A')}",speed=0)
+                            st.markdown(f"**📈 Score:** `{entry.get('score', 'N/A')}`")
+                            st.markdown(f"**🆔 ID:** `{entry.get('id', 'N/A')}`")
+
+                    else:
+                        st.info("🤔 No relevant data found. Try refining your concern or adjusting the score threshold.")
+
+                # Exception Handling for Specific Errors
+                except requests.exceptions.HTTPError as http_err:
+                    st.error(f"❌ HTTP Error: {http_err}")
+                except requests.exceptions.ConnectionError:
+                    st.error("❌ Network error. Please check your internet connection.")
+                except requests.exceptions.Timeout:
+                    st.error("❌ Request timed out. Please try again later.")
+                except requests.exceptions.RequestException as e:
+                    st.error(f"❌ Unexpected error: {e}")

src/frontend/home.py

@@ -1,84 +1,77 @@
 import streamlit as st
-from app import common_functions
+from frontend.app import common_functions
 
-# # Page Configuration
+WELCOME_TEXT = "Welcome to the Yuvabe Care Companion AI!"   
+
+# Page Configuration
 common_functions.config_homepage()
 common_functions.set_bg_image("src/frontend/images/health_care_baner.png")
 common_functions.custom_navbar()
 st.divider()
 
 def render_homepage():
-# Display the animated text
-    welcome_text = "Welcome to the Yuvabe Care Companion AI!"
-    container = st.empty()
-    common_functions.type_text(container, welcome_text)
-    # Feature Overview Section
-    text = ("""
-        Key Features 
-            
-        - Admin Portal — Effortlessly manage records, track data, and configure settings with ease.
-            
-        - Knowledge Base Explorer — Discover precise and relevant insights using advanced vector search technology.
-            
-        - Chat with Us — Engage with our intelligent assistant for personalized guidance, helping you articulate your health concerns with clarity and confidence. 
+    """
+    Renders the Yuvabe Care Companion AI homepage with improved visuals and enhanced user experience.
+
+    Features:
+    - Displays a warm welcome message with animated text.
+    - Highlights key features using clean and modern UI design.
+    - Encourages user engagement with a prominent 'Get Started' call-to-action.
 
-        > 💡 Explore each section to unlock powerful features tailored to enhance your experience.
-        """)
+    Visual Enhancements:
+    - Consistent color theme with improved contrast for readability.
+    - Box shadows and rounded corners for a modern touch.
+    - Organized content using bullet points, ensuring clarity and focus.
+
+    """
+    
+    # Welcome Text with Animation
+    common_functions.typewriter_effect(WELCOME_TEXT, speed=0.02, gradient=True)
     
-    st.markdown(f"""
-        <h2 style="
-            text-align: left;
+    # Key Features Section
+    st.markdown(
+        """
+        <div style="
+            background-color: #1B3C59;
+            color: #FFFFFF;
+            padding: 25px;
+            border-radius: 15px;
+            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
+            margin-top: 20px;
+        ">
+            <h2 style="text-align: left; font-weight: bold;">Key Features</h2>
+            <ul style="padding-left: 20px;">
+                <li><b>🛠️ Admin Portal</b> — Effortlessly manage records, track data, and configure settings with ease.</li>
+                <li><b>📚 Knowledge Base Explorer</b> — Discover precise and relevant insights using advanced vector search technology.</li>
+                <li><b>💬 Chat with Us</b> — Engage with our intelligent assistant for personalized guidance.</li>
+            </ul>
+            <p style="margin-top: 15px; font-style: italic; font-weight: bold;">
+                💡 Explore each section to unlock powerful features tailored to enhance your experience.
+            </p>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
+    
+   # Call-to-Action Section
+    st.markdown(
+        """
+        <div style="
+            text-align: center;
+            margin-top: 30px;
+            padding: 18px 35px;
+            background-color: #4CAF50;
+            color: #FFFFFF;
             font-weight: bold;
-            font-size: 18px;
-            color: white;
-            background-color: #1B3C59; 
-            padding: 10px 20px;
-            border-radius: 8px;
+            font-size: 20px;
+            border-radius: 12px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
         ">
-            {text}
-        </h2>
-    """, unsafe_allow_html=True)
-
-render_homepage()
-
-# def render_homepage():
-#     """Renders the Yuvabe Care Companion AI homepage."""
-
-    # # Welcome Section with Visual
-    # st.image("src/frontend/images/health_care_baner.png", 
-    #          use_container_width=True, 
-    #          caption="Your AI-Powered Health Companion")
-
-    # # Navigation Tabs
-    # Home, Admin_Portal, Knowledge_Base_Explorer = st.tabs(
-    #     ["🏠 Home", "🔒 Admin Portal", "📚 Knowledge Base Explorer"]
-    # )
-
-    # with Home:
-    # st.markdown("""
-    # ### 👋 Welcome to the Yuvabe Care Companion AI!
-    # This platform offers comprehensive tools to support your healthcare journey. Use the tabs above to navigate:
-    # """)
-
-    # # Feature Overview Section
-    # st.markdown("""
-    # ### 🔹 Key Features
-    # - **Admin Portal** — Manage records, data, and configurations efficiently.
-    # - **Knowledge Base Explorer** — Leverage advanced vector search to find relevant knowledge entries with precision.
-    # - **Patient Assistance** — Personalized guidance to help patients describe their concerns.
-
-    # > 💡 *Explore each section for detailed functionality.*
-    # """)
-
-    # with Admin_Portal:
-    #     admin_page.render_admin_portal()
-    #     # if st.button("Go to Admin Portal"):
-    #     #     st.switch_page("pages/admin_portal.py")
-
-    # with Knowledge_Base_Explorer:
-    #     knowledge_base_explorer_page.render_knowledge_base_explorer()
-        # if st.button("Go to Knowledge Base Explorer"):
-        #     st.switch_page("pages/knowledge_base_explorer.py")
+            🌿 Ready to Get Started? Begin Your Journey Now! 🚀
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
 
-# Render the Homepage
-# render_homepage()
+if __name__ == "__main__":
+    render_homepage()

src/frontend/pages/Admin_Portal.py

@@ -1,49 +1,98 @@
 import streamlit as st
-from app import pinecone_data_handler
-from app import common_functions
+from frontend.app import pinecone_data_handler,common_functions
 
 # # Page Configuration
 common_functions.config_homepage()
+# common_functions.set_bg_image("src/frontend/images/health_care_baner.png")
 
 def render_admin_portal():
-    """Renders the enhanced Admin Portal page with improved UI and navigation."""
-
-    # Header Section
-    st.markdown("<h1 class='header-text'>🛠️ Admin Portal</h1>", unsafe_allow_html=True)
-    st.markdown("""
-        Welcome to the **Admin Portal**.  
-        Manage your Pinecone database with secure and efficient tools.
-    """)
+
+    """
+    Renders the enhanced Admin Portal page with improved UI, navigation, and user guidance.
+    
+    Features:
+    - Upsert data functionality with informative tips.
+    - Delete records feature with enhanced warnings and confirmation prompts.
+    """
+
+# Header Section
+    st.markdown(
+        """
+        <div style="
+            background-color: #1B3C59; 
+            color: #FFFFFF; 
+            padding: 10px; 
+            border-radius: 12px;
+            text-align: center;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+            border-radius: 80px;
+        ">
+            <h1>🛠️ Admin Portal</h1>
+            <p style="font-size: 16px;">
+                Manage your Pinecone database securely and efficiently.
+            </p>
+        </div>
+        """, 
+        unsafe_allow_html=True
+    )
+
     st.divider()
 
-    # Data Manager Tabs
+# Data Manager Tabs
     DataManager = st.tabs(["📂 Pinecone Data Manager"])[0]
 
     with DataManager:
-        Upsert, Delete = st.tabs(["Upsert Data", "Delete Records"])
+        Upsert, Delete = st.tabs(["🟢 Upsert Data", "🔴 Delete Records"])
 
         # Upsert Section
         with Upsert:
-            st.markdown("<div class='card'>", unsafe_allow_html=True)
-            st.markdown("### 📥 Upsert Data")
-            st.info(
-                "Use this section to **insert** or **update** records in Pinecone."
-                "\n\n✅ Ensure your data is correctly formatted before uploading."
+            st.markdown(
+                """
+                <div style="
+                    background-color: #E3F2FD; 
+                    padding: 20px;
+                    border-radius: 10px;
+                    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+                ">
+                    <h3>📥 Upsert Data</h3>
+                    <p style="color: #1976D2;">
+                        Use this section to <b>insert</b> or <b>update</b> records in Pinecone.
+                    </p>
+                    <p>
+                        ✅ Ensure your data is correctly formatted before uploading.<br>
+                    </p>
+                </div>
+                """, 
+                unsafe_allow_html=True
             )
-            st.markdown("---")
-            pinecone_data_handler.upsert_data(st)
-            st.markdown("</div>", unsafe_allow_html=True)
+
+            st.divider()
+
+            # Call Upsert Function
+            pinecone_data_handler.upsert_data()
 
         # Delete Section
         with Delete:
-            st.markdown("<div class='card'>", unsafe_allow_html=True)
-            st.markdown("### ⚠️ Delete Records")
-            st.error(
-                "❗ **Warning:** Deleting data is irreversible.\n"
-                "Proceed with caution."
+            st.markdown(
+                """
+                <div style="
+                    background-color: #FFEBEE; 
+                    padding: 20px;
+                    border-radius: 10px;
+                    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+                ">
+                    <h3>⚠️ Delete Records</h3>
+                    <p style="color: #D32F2F;">
+                        ❗ <b>Warning:</b> Deleting data is irreversible.<br>
+                        Please confirm your action before proceeding.
+                    </p>
+                </div>
+                """, 
+                unsafe_allow_html=True
             )
-            # Confirmation Dialog for Safety
-            pinecone_data_handler.delete_records(st)
+
+            st.divider()
+            pinecone_data_handler.delete_records()
 
 # Call the function to render the Admin Portal
 if __name__ == "__main__":

src/frontend/pages/{chatbot.py → Chat_With_Us.py}

@@ -1,13 +1,13 @@
 import streamlit as st
 import requests
-from app import common_functions
+from frontend.app import common_functions
 from datetime import datetime
 
 API_URL = "http://localhost:8000/chat/get-health-advice/"
 NUMBER_OF_MESSAGES_TO_DISPLAY = 20
 common_functions.config_homepage()
 common_functions.set_page_title()
-common_functions.set_bg_image("src/frontend/images/health_care_baner_2.jpg")
+# common_functions.set_bg_image("src/frontend/images/health_care_baner_2.jpg")
 # Initialize conversation history
 def initialize_conversation():
     assistant_message = ("Hello! I am your Yuvabe Care Companion AI, here to assist you with general medicine queries. " 
@@ -36,14 +36,18 @@ def render_chatbot():
     if 'conversation_id' not in st.session_state:
         st.session_state.conversation_id = datetime.now().strftime("%Y-%m-%d")
 
-    common_functions.display_chat_history(st.session_state.conversation_id)
+    conversation_ids = common_functions.get_bucket_items()
+    if conversation_ids:
+        for conversation_id in conversation_ids[-3:]:
+            common_functions.display_chat_history(conversation_id)
 
     # Display chat history
     for message in st.session_state.conversation_history [-NUMBER_OF_MESSAGES_TO_DISPLAY:]:
         role = message["role"]
         avatar_image = "src/frontend/images/chat_doctor_logo.png" if role == "assistant" else "src/frontend/images/healthy.png" if role == "user" else None
         with st.chat_message(role, avatar=avatar_image):
-            st.write(message["content"])
+            common_functions.display_message_box(role,message['content'])
+            # st.write(message["content"])
 
     # User Input
     user_input = st.chat_input("Ask your health-related question:")

src/frontend/pages/Knowledge_Base_Explorer.py

@@ -1,22 +1,65 @@
 import streamlit as st
-from app import pinecone_data_handler, common_functions
+from frontend.app import pinecone_data_handler, common_functions
 
+# Page Configuration
 common_functions.config_homepage()
 
 def render_knowledge_base_explorer():
-    """Renders the Knowledge Base Explorer page with improved UI and navigation."""
-    
-    # Header Section
-    st.title("📚 Knowledge Base Explorer")
-    st.markdown("""
-    ### Discover Helpful Information!
-    Enter your concerns below to receive insights and solutions tailored to your needs.
-    """)
+    """Renders the Knowledge Base Explorer page for fetching accurate metadata from Pinecone Vector DB."""
+
+    st.markdown(
+        """
+        <div style="
+            background-color: #1B3C59; 
+            color: #FFFFFF; 
+            padding: 20px; 
+            border-radius: 12px; 
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+            text-align: center;
+        ">
+            <h1>📚 Knowledge Base Explorer</h1>
+            <p>Powered by <b>Pinecone Vector DB</b> for precise metadata retrieval.</p>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
+
+    st.divider()
+
+    # Guidance Section
+    st.markdown(
+        """
+        ### How to Use the Knowledge Base Explorer  
+        1. **Enter your query** related to health concerns.  
+        2. Click **Fetch Metadata** to retrieve the most relevant insights.  
+        3. Results are fetched from **Pinecone Vector DB**, ensuring fast and accurate responses.  
 
-    # Knowledge Base Section
-    with st.expander("🔍 Explore the Knowledge Base"):
-        pinecone_data_handler.render_metadata_fetch_form(st)
+        ✅ **Pro Tip:** Use precise keywords for better results (e.g., "mental health tips" instead of "help").
+        """
+    )
 
+    st.divider()
+
+# Knowledge Base Section
+    with st.expander("🔍 **Explore the Knowledge Base (Pinecone Vector DB)**", expanded=True):
+        st.info(
+            "💡 **Looking for specific metadata?**"
+            "\nOur system intelligently maps your query to the most relevant results."
+        )
+
+        try:
+            result = pinecone_data_handler.render_metadata_fetch_form()
+            
+            # if result:
+            #     st.success("✅ **Metadata fetched successfully!**")
+            #     st.write(result)
+            # else:
+            #     st.warning("⚠️ No relevant metadata found. Try refining your query for better results.")
+        
+        except Exception as e:
+            st.error(f"❌ An error occurred while fetching metadata: {str(e)}")
+
+    
 # Call the function to render the Knowledge Base Explorer
 if __name__ == "__main__":
     render_knowledge_base_explorer()