Uploading the files

.spacesconfig.yaml

@@ -0,0 +1,8 @@
+title: Medical Chatbot RAG
+emoji: 🏥
+colorFrom: blue
+colorTo: green
+sdk: docker
+pinned: false
+license: mit
+short_description: Medical information chatbot using RAG with Gemini & Pinecone

Dockerfile

@@ -0,0 +1,35 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# Environment variables
+ENV PYTHONUNBUFFERED=1
+ENV TRANSFORMERS_CACHE=/app/.cache/transformers
+ENV HF_HOME=/app/.cache/huggingface
+ENV TORCH_HOME=/app/.cache/torch
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy and install Python dependencies
+COPY requirements.txt setup.py ./
+COPY src/ ./src/
+
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Create cache directories
+RUN mkdir -p /app/.cache/transformers /app/.cache/huggingface /app/.cache/torch
+
+# Expose port (HF Spaces uses 7860 by default)
+EXPOSE 7860
+
+# Set the port for the app
+ENV PORT=7860
+
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,174 @@
+from fastapi import FastAPI, Request, Form
+from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
+from fastapi.templating import Jinja2Templates
+from langchain_pinecone import PineconeVectorStore
+from src.config import Config
+from src.helper import download_embeddings
+from src.utility import QueryClassifier, StreamingHandler
+from langchain_google_genai import ChatGoogleGenerativeAI
+from langchain_classic.chains import create_retrieval_chain
+from langchain_classic.chains.combine_documents import create_stuff_documents_chain
+from langchain_core.prompts import ChatPromptTemplate, MessagesPlaceholder
+from langchain_core.chat_history import BaseChatMessageHistory
+from langchain_community.chat_message_histories import ChatMessageHistory
+from src.prompt import system_prompt
+import uuid
+
+
+Config.validate()
+
+
+PINECONE_API_KEY = Config.PINECONE_API_KEY
+GEMINI_API_KEY = Config.GEMINI_API_KEY
+
+templates = Jinja2Templates(directory="templates")
+
+# Intialize FastAPI app
+app = FastAPI(title="Medical Chatbot", version="0.0.0")
+
+# Store for session-based chat histories (resets on server restart)
+chat_histories = {}
+
+# Intialize embedding model
+print("Loading the Embedding model...")
+embeddings = download_embeddings()
+
+# Connect to existing Pinecone index
+index_name = Config.PINECONE_INDEX_NAME
+print(f"Connecting to PineCone index: {index_name}")
+docsearch = PineconeVectorStore.from_existing_index(
+    index_name=index_name, embedding=embeddings
+)
+
+# Creating retriever from vector store
+retriever = docsearch.as_retriever(
+    search_type=Config.SEARCH_TYPE, search_kwargs={"k": Config.RETRIEVAL_K}
+)
+
+# Initialize Google Gemini chat model
+print("Initializing Gemini model...")
+llm = ChatGoogleGenerativeAI(
+    model=Config.GEMINI_MODEL,
+    google_api_key=GEMINI_API_KEY,
+    temperature=Config.LLM_TEMPERATURE,
+    convert_system_message_to_human=True,
+)
+
+# Create chat prompt template with memory
+prompt = ChatPromptTemplate.from_messages(
+    [
+        ("system", system_prompt),
+        MessagesPlaceholder(variable_name="chat_history"),
+        ("human", "{input}"),
+    ]
+)
+
+# Create the question-answer chain
+question_answer_chain = create_stuff_documents_chain(llm, prompt)
+
+# Create the RAG chain
+rag_chain = create_retrieval_chain(retriever, question_answer_chain)
+
+
+# Function to get chat history for a session
+def get_chat_history(session_id: str) -> BaseChatMessageHistory:
+    if session_id not in chat_histories:
+        chat_histories[session_id] = ChatMessageHistory()
+    return chat_histories[session_id]
+
+
+# Function to maintain conversation window buffer (keep last 5 messages)
+def manage_memory_window(session_id: str, max_messages: int = 10):
+    """Keep only the last max_messages (5 pairs = 10 messages)"""
+    if session_id in chat_histories:
+        history = chat_histories[session_id]
+        if len(history.messages) > max_messages:
+            # Keep only the last max_messages
+            history.messages = history.messages[-max_messages:]
+
+
+print("Intialized Medical Chabot successfuly!")
+print("Vector Store connected")
+
+
+@app.get("/", response_class=HTMLResponse)
+async def index(request: Request):
+    """Render the chatbot interface"""
+    # Clear all old sessions to prevent memory overflow
+    chat_histories.clear()
+
+    # Generate a new session ID for each page load
+    session_id = str(uuid.uuid4())
+    return templates.TemplateResponse(
+        "index.html", {"request": request, "session_id": session_id}
+    )
+
+
+@app.post("/get")
+async def chat(msg: str = Form(...), session_id: str = Form(...)):
+    """Handle chat messages and return streaming AI responses with conversation memory"""
+    
+    # Get chat history for this session
+    history = get_chat_history(session_id)
+
+    # Classify query to determine if retrieval is needed
+    needs_retrieval, reason = QueryClassifier.needs_retrieval(msg)
+
+    async def generate_response():
+        """Generator for streaming response"""
+        full_answer = ""
+        
+        try:
+            if needs_retrieval:
+                # Stream RAG chain response for medical queries
+                print(f"✓ [RETRIEVAL STREAM] Reason: {reason} | Query: {msg[:50]}...")
+                
+                async for chunk in StreamingHandler.stream_rag_response(
+                    rag_chain, {"input": msg, "chat_history": history.messages}
+                ):
+                    yield chunk
+                    # Extract full answer from the last chunk
+                    if b'"done": true' in chunk.encode():
+                        import json
+                        data = json.loads(chunk.replace("data: ", "").strip())
+                        if "full_answer" in data:
+                            full_answer = data["full_answer"]
+            else:
+                # Stream simple response for greetings/acknowledgments
+                print(f"[NO RETRIEVAL STREAM] Reason: {reason} | Query: {msg[:50]}...")
+                simple_resp = QueryClassifier.get_simple_response(msg)
+                full_answer = simple_resp
+                
+                async for chunk in StreamingHandler.stream_simple_response(simple_resp):
+                    yield chunk
+            
+            # Add the conversation to history after streaming completes
+            history.add_user_message(msg)
+            history.add_ai_message(full_answer)
+            
+            # Manage memory window
+            manage_memory_window(session_id, max_messages=10)
+            
+        except Exception as e:
+            print(f"Error during streaming: {str(e)}")
+            import json
+            yield f"data: {json.dumps({'error': 'An error occurred', 'done': True})}\n\n"
+
+    return StreamingResponse(
+        generate_response(),
+        media_type="text/event-stream",
+        headers={
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive",
+            "X-Accel-Buffering": "no"
+        }
+    )
+
+
+if __name__ == "__main__":
+    import uvicorn
+    import os
+
+    # Use PORT from environment (7860 for HF Spaces, 8080 for Render)
+    port = int(os.getenv("PORT", 7860))
+    uvicorn.run(app, host="0.0.0.0", port=port)

requirements.txt

@@ -0,0 +1,21 @@
+# ===== Development =====
+
+# pypdf==6.4.1
+# langchain-text-splitters==1.0.0
+
+# ===== Production=====
+fastapi==0.124.2
+uvicorn==0.38.0
+python-multipart==0.0.20
+langchain==1.1.3
+langchain-classic==1.0.0
+langchain-community==0.4.1
+langchain-core==1.1.3
+langchain-google-genai==4.0.0
+langchain-pinecone==0.2.13
+pinecone==7.3.0
+sentence-transformers==5.1.2
+python-dotenv==1.2.1
+google-generativeai==0.8.5
+-e .
+

setup.py

@@ -0,0 +1,11 @@
+from setuptools import find_packages, setup
+
+setup(
+    name="medical_chatbot",
+    version="0.0.0",
+    author="Harsh Patel",
+    author_email="code.by.hp@gmail.com",
+    packages=find_packages(),
+    python_requires=">=3.10",
+    install_requires=[],
+)

src/config.py

@@ -0,0 +1,46 @@
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+
+class Config:
+    """Central Configuration class for the application."""
+
+    # API Keys
+    PINECONE_API_KEY = os.getenv("PINECONE_API_KEY")
+    GEMINI_API_KEY = os.getenv("GEMINI_API_KEY")
+
+    # Pinecone Configuration
+    PINECONE_INDEX_NAME = "medical-chatbot"
+    PINECONE_CLOUD = "aws"  
+    PINECONE_REGION = "us-east-1" 
+    PINECONE_METRIC = "cosine"
+    PINECONE_DIMENSION = 384
+
+    # Embeddings Configuration
+    EMBEDDINGS_MODEL = "sentence-transformers/all-MiniLM-L6-v2"
+    EMBEDDINGS_TYPE = "huggingface"
+    
+    # LLM Configuration
+    GEMINI_MODEL = "gemini-2.5-flash"
+    LLM_TEMPERATURE = 0.3 
+    
+    # Document Processing Configuration
+    CHUNK_SIZE = 500
+    CHUNK_OVERLAP = 50
+    DATA_PATH = "data/"
+    
+    # Retrieval Configuration
+    RETRIEVAL_K = 3
+    SEARCH_TYPE = "similarity"
+
+    @classmethod
+    def validate(cls):
+        """Validate that all required configuration is present."""
+        if not cls.PINECONE_API_KEY:
+            raise ValueError("PINECONE_API_KEY not found in environment variables")
+
+        if not cls.GEMINI_API_KEY:
+            raise ValueError("GEMINI_API_KEY not found in environment variables")
+
+        return True

src/helper.py

@@ -0,0 +1,45 @@
+from langchain_community.document_loaders import PyPDFLoader, DirectoryLoader
+from langchain_text_splitters import RecursiveCharacterTextSplitter
+from langchain_classic.schema import Document
+from langchain_community.embeddings import HuggingFaceEmbeddings
+
+
+# Function: Load the pdf files from "data" dir
+def load_pdf_files(data):
+    loader = DirectoryLoader(data, glob="*.pdf", loader_cls=PyPDFLoader)
+
+    documents = loader.load()
+    return documents
+
+
+# Function: Filter the Documents
+def filter_to_minimal_docs(docs: list[Document]) -> list[Document]:
+    """
+    input: The list of Document
+    output: The list of minimal Documents containing (src,page_content)
+    """
+
+    minimal_docs: list[Document] = []
+    for doc in docs:
+        src = doc.metadata.get("source")
+        minimal_docs.append(
+            Document(page_content=doc.page_content, metadata={"source": src})
+        )
+    return minimal_docs
+
+
+# Function: Perfrom Text Splitting
+def text_split(minimal_docs):
+    text_splitter = RecursiveCharacterTextSplitter(chunk_size=500, chunk_overlap=20)
+    texts_chunk = text_splitter.split_documents(minimal_docs)
+    return texts_chunk
+
+
+# Function: Download embedding model
+def download_embeddings():
+    """
+    Downlaod and return the HuggingFace embeddings model.
+    """
+    model_name = "sentence-transformers/all-MiniLM-L6-v2"
+    embeddings = HuggingFaceEmbeddings(model_name=model_name)
+    return embeddings

src/prompt.py

@@ -0,0 +1,18 @@
+system_prompt = (
+    "You are a knowledgeable and helpful medical assistant designed to answer health-related questions. "
+    "Your role is to provide accurate, evidence-based information from the medical context provided to you.\n\n"
+    
+    "Guidelines:\n"
+    "1. Use ONLY the information from the retrieved context below to answer questions\n"
+    "2. If the context doesn't contain relevant information, clearly state: "
+    "'I don't have enough information in my knowledge base to answer that question accurately.'\n"
+    "3. Keep responses concise (3-5 sentences maximum) unless more detail is specifically requested\n"
+    "4. Use clear, simple language that patients can understand\n"
+    "5. Always remind users that this information is educational and not a substitute for professional medical advice\n\n"
+    
+    "Context from medical documents:\n"
+    "{context}\n\n"
+    
+    "Remember: Provide helpful information while emphasizing the importance of consulting healthcare professionals "
+    "for personalized medical advice, diagnosis, or treatment."
+)

src/utility.py

@@ -0,0 +1,229 @@
+"""
+Utility functions for query classification and response generation
+"""
+import re
+from typing import Tuple
+
+
+class QueryClassifier:
+    """Classify queries to determine if retrieval is needed"""
+
+    # Simple greetings/acknowledgments (no retrieval needed)
+    SIMPLE_PATTERNS = [
+        r"\b(hi|hello|hey|greetings|good morning|good evening|good afternoon)\b",
+        r"\b(thank you|thanks|thx|appreciate it)\b",
+        r"\b(bye|goodbye|see you|take care)\b",
+        r"\b(ok|okay|got it|understood|alright|sure)\b",
+        r"\b(yes|yeah|yep|no|nope)\b",
+    ]
+
+    # Medical keywords (definitely needs retrieval)
+    MEDICAL_KEYWORDS = [
+        "symptom",
+        "treatment",
+        "disease",
+        "diagnosis",
+        "medicine",
+        "medication",
+        "cure",
+        "pain",
+        "fever",
+        "infection",
+        "doctor",
+        "hospital",
+        "prescription",
+        "side effect",
+        "dosage",
+        "therapy",
+        "vaccine",
+        "surgery",
+        "condition",
+        "blood",
+        "pressure",
+        "diabetes",
+        "cancer",
+        "heart",
+        "lung",
+        "kidney",
+        "test",
+        "scan",
+        "mri",
+        "x-ray",
+        "injury",
+        "allergy",
+        "chronic",
+        "acute",
+        "disorder",
+        "illness",
+        "sick",
+        "health",
+    ]
+
+    @classmethod
+    def needs_retrieval(cls, query: str) -> Tuple[bool, str]:
+        """
+        Determine if query needs document retrieval
+
+        Args:
+            query: User's input message
+
+        Returns:
+            Tuple[bool, str]: (needs_retrieval, reason)
+        """
+        query_lower = query.lower().strip()
+        word_count = len(query_lower.split())
+
+        # Rule 1: Very short queries with simple patterns (no retrieval)
+        if word_count <= 3:
+            for pattern in cls.SIMPLE_PATTERNS:
+                if re.search(pattern, query_lower):
+                    return False, "simple_greeting"
+
+        # Rule 2: Contains medical keywords (needs retrieval)
+        for keyword in cls.MEDICAL_KEYWORDS:
+            if keyword in query_lower:
+                return True, "medical_keyword_detected"
+
+        # Rule 3: Question words in longer queries (likely needs retrieval)
+        question_words = [
+            "what",
+            "how",
+            "why",
+            "when",
+            "where",
+            "which",
+            "who",
+            "can",
+            "should",
+            "is",
+            "are",
+            "does",
+            "do",
+            "could",
+            "would",
+            "will",
+        ]
+        if word_count >= 3 and any(q in query_lower.split()[:3] for q in question_words):
+            return True, "question_detected"
+
+        # Rule 4: Single word queries (context-dependent, default to no retrieval)
+        if word_count == 1:
+            return False, "single_word"
+
+        # Default: If uncertain and query is substantial, use retrieval
+        if word_count >= 4:
+            return True, "substantial_query"
+
+        return False, "default_no_retrieval"
+
+    @classmethod
+    def get_simple_response(cls, query: str) -> str:
+        """
+        Generate appropriate response for non-retrieval queries
+
+        Args:
+            query: User's input message
+
+        Returns:
+            str: Appropriate response without retrieval
+        """
+        query_lower = query.lower().strip()
+
+        # Greetings
+        if re.search(cls.SIMPLE_PATTERNS[0], query_lower):
+            return (
+                "Hello! I'm your medical assistant. I can help answer questions about "
+                "symptoms, treatments, medications, and general health information. "
+                "How can I assist you today?"
+            )
+
+        # Thanks
+        if re.search(cls.SIMPLE_PATTERNS[1], query_lower):
+            return (
+                "You're very welcome! If you have any other health-related questions, "
+                "feel free to ask. I'm here to help!"
+            )
+
+        # Goodbye
+        if re.search(cls.SIMPLE_PATTERNS[2], query_lower):
+            return (
+                "Goodbye! Take care of your health. Feel free to return anytime you "
+                "have questions. Stay well!"
+            )
+
+        # Acknowledgments
+        if re.search(cls.SIMPLE_PATTERNS[3], query_lower):
+            return (
+                "Is there anything else you'd like to know about your health or medical concerns?"
+            )
+
+        # Yes/No
+        if re.search(cls.SIMPLE_PATTERNS[4], query_lower):
+            return (
+                "Could you please provide more details about your question? "
+                "I'm here to help with any health-related information you need."
+            )
+
+        # Default
+        return (
+            "I'm here to help with medical and health-related questions. "
+            "Could you please elaborate on what you'd like to know?"
+        )
+
+
+class StreamingHandler:
+    """Handle streaming responses from LangChain"""
+
+    @staticmethod
+    async def stream_rag_response(rag_chain, input_data: dict):
+        """
+        Stream tokens from RAG chain
+        
+        Args:
+            rag_chain: The retrieval chain to stream from
+            input_data: Dict with 'input' and 'chat_history' keys
+            
+        Yields:
+            str: JSON formatted chunks with token data
+        """
+        import json
+        
+        try:
+            # Stream the response
+            full_answer = ""
+            async for chunk in rag_chain.astream(input_data):
+                # Extract answer tokens from the chunk
+                if "answer" in chunk:
+                    token = chunk["answer"]
+                    full_answer += token
+                    # Send token as JSON
+                    yield f"data: {json.dumps({'token': token, 'done': False})}\n\n"
+            
+            # Send completion signal
+            yield f"data: {json.dumps({'token': '', 'done': True, 'full_answer': full_answer})}\n\n"
+            
+        except Exception as e:
+            error_msg = f"Streaming error: {str(e)}"
+            yield f"data: {json.dumps({'error': error_msg, 'done': True})}\n\n"
+
+    @staticmethod
+    async def stream_simple_response(response: str):
+        """
+        Stream a simple non-retrieval response character by character
+        
+        Args:
+            response: The complete response text
+            
+        Yields:
+            str: JSON formatted chunks with token data
+        """
+        import json
+        import asyncio
+        
+        # Stream character by character with slight delay for smooth effect
+        for char in response:
+            yield f"data: {json.dumps({'token': char, 'done': False})}\n\n"
+            await asyncio.sleep(0.01)  # Small delay for smooth streaming
+        
+        # Send completion signal
+        yield f"data: {json.dumps({'token': '', 'done': True, 'full_answer': response})}\n\n"

templates/index.html

@@ -0,0 +1,286 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Medical Assistant</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Plus Jakarta Sans', sans-serif; }
+        .chat-container { height: calc(100vh - 200px); }
+        .message { animation: fadeIn 0.3s ease-in; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+        .cursor {
+            animation: blink 1s infinite;
+            color: #3b82f6;
+        }
+        @keyframes blink {
+            0%, 49% { opacity: 1; }
+            50%, 100% { opacity: 0; }
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <div class="max-w-4xl mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="text-center mb-8">
+            <h1 class="text-3xl font-semibold text-gray-800 mb-2">Medical Assistant</h1>
+            <p class="text-gray-500 text-sm">Ask health-related questions and get evidence-based answers</p>
+        </header>
+
+        <!-- Chat Container -->
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
+            <div id="chatbox" class="chat-container overflow-y-auto p-6 space-y-4">
+                <div class="message flex gap-3">
+                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
+                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                        </svg>
+                    </div>
+                    <div class="flex-1">
+                        <p class="text-gray-700 text-sm leading-relaxed">Hello! I'm your medical assistant. I can help answer your health-related questions based on medical knowledge. How can I assist you today?</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Input Area -->
+            <div class="border-t border-gray-200 p-4">
+                <form id="chatForm" class="flex gap-3">
+                    <input 
+                        type="text" 
+                        id="messageInput" 
+                        placeholder="Type your question here..." 
+                        class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
+                        required
+                    >
+                    <button 
+                        type="submit" 
+                        id="sendBtn"
+                        class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                    >
+                        Send
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const chatbox = document.getElementById('chatbox');
+        const chatForm = document.getElementById('chatForm');
+        const messageInput = document.getElementById('messageInput');
+        const sendBtn = document.getElementById('sendBtn');
+        
+        // Session ID for conversation memory (resets on page reload)
+        const sessionId = "{{ session_id }}";
+
+        // Auto-scroll to bottom
+        function scrollToBottom() {
+            chatbox.scrollTop = chatbox.scrollHeight;
+        }
+
+        // Add user message to chat
+        function addUserMessage(message) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'message flex gap-3 justify-end';
+            messageDiv.innerHTML = `
+                <div class="flex-1 max-w-2xl">
+                    <div class="bg-blue-600 text-white px-4 py-3 rounded-lg text-sm leading-relaxed">
+                        ${escapeHtml(message)}
+                    </div>
+                </div>
+                <div class="flex-shrink-0 w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+                    </svg>
+                </div>
+            `;
+            chatbox.appendChild(messageDiv);
+            scrollToBottom();
+        }
+
+        // Add bot message to chat
+        function addBotMessage(message) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'message flex gap-3';
+            messageDiv.innerHTML = `
+                <div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                    </svg>
+                </div>
+                <div class="flex-1 max-w-2xl">
+                    <div class="bg-gray-100 px-4 py-3 rounded-lg text-sm leading-relaxed text-gray-700">
+                        ${escapeHtml(message)}
+                    </div>
+                </div>
+            `;
+            chatbox.appendChild(messageDiv);
+            scrollToBottom();
+        }
+
+        // Add loading indicator
+        function addLoadingIndicator() {
+            const loadingDiv = document.createElement('div');
+            loadingDiv.id = 'loading';
+            loadingDiv.className = 'message flex gap-3';
+            loadingDiv.innerHTML = `
+                <div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                    </svg>
+                </div>
+                <div class="flex-1">
+                    <div class="bg-gray-100 px-4 py-3 rounded-lg text-sm">
+                        <div class="flex gap-1">
+                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0ms"></div>
+                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 150ms"></div>
+                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 300ms"></div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            chatbox.appendChild(loadingDiv);
+            scrollToBottom();
+        }
+
+        function removeLoadingIndicator() {
+            const loading = document.getElementById('loading');
+            if (loading) loading.remove();
+        }
+
+        // Create a streaming message container
+        function createStreamingMessage(messageId) {
+            const messageDiv = document.createElement('div');
+            messageDiv.id = messageId;
+            messageDiv.className = 'message flex gap-3';
+            messageDiv.innerHTML = `
+                <div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
+                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                    </svg>
+                </div>
+                <div class="flex-1 max-w-2xl">
+                    <div class="bg-gray-100 px-4 py-3 rounded-lg text-sm leading-relaxed text-gray-700">
+                        <span class="streaming-text"></span>
+                        <span class="cursor">▋</span>
+                    </div>
+                </div>
+            `;
+            chatbox.appendChild(messageDiv);
+            scrollToBottom();
+        }
+
+        // Update streaming message with new text
+        function updateStreamingMessage(messageId, text) {
+            const messageDiv = document.getElementById(messageId);
+            if (messageDiv) {
+                const textSpan = messageDiv.querySelector('.streaming-text');
+                const cursor = messageDiv.querySelector('.cursor');
+                if (textSpan) {
+                    textSpan.textContent = text;
+                }
+                // Remove cursor when done
+                if (text.length > 0 && cursor && text.endsWith('.')) {
+                    setTimeout(() => cursor?.remove(), 500);
+                }
+                scrollToBottom();
+            }
+        }
+
+        // Escape HTML to prevent XSS
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        // Handle form submission
+        chatForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const message = messageInput.value.trim();
+            if (!message) return;
+
+            // Disable input while processing
+            messageInput.disabled = true;
+            sendBtn.disabled = true;
+            sendBtn.textContent = 'Sending...';
+
+            // Add user message
+            addUserMessage(message);
+            messageInput.value = '';
+
+            // Create streaming message container
+            const streamingMessageId = 'streaming-' + Date.now();
+            createStreamingMessage(streamingMessageId);
+
+            try {
+                // Send message to backend with session ID
+                const formData = new FormData();
+                formData.append('msg', message);
+                formData.append('session_id', sessionId);
+
+                const response = await fetch('/get', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                // Handle streaming response
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let accumulatedText = '';
+
+                while (true) {
+                    const { value, done } = await reader.read();
+                    if (done) break;
+
+                    const chunk = decoder.decode(value, { stream: true });
+                    const lines = chunk.split('\n');
+
+                    for (const line of lines) {
+                        if (line.startsWith('data: ')) {
+                            try {
+                                const data = JSON.parse(line.slice(6));
+                                
+                                if (data.error) {
+                                    updateStreamingMessage(streamingMessageId, 'Sorry, an error occurred.');
+                                    break;
+                                }
+                                
+                                if (data.token && !data.done) {
+                                    accumulatedText += data.token;
+                                    updateStreamingMessage(streamingMessageId, accumulatedText);
+                                }
+                                
+                                if (data.done) {
+                                    if (data.full_answer) {
+                                        updateStreamingMessage(streamingMessageId, data.full_answer);
+                                    }
+                                }
+                            } catch (e) {
+                                console.error('Parse error:', e);
+                            }
+                        }
+                    }
+                }
+            } catch (error) {
+                updateStreamingMessage(streamingMessageId, 'Sorry, there was an error processing your request. Please try again.');
+                console.error('Error:', error);
+            } finally {
+                // Re-enable input
+                messageInput.disabled = false;
+                sendBtn.disabled = false;
+                sendBtn.textContent = 'Send';
+                messageInput.focus();
+            }
+        });
+
+        // Focus input on load
+        messageInput.focus();
+    </script>
+</body>
+</html>