Enhance deployment pipeline and modern chat interface (#53)

* feat: Add modern chat interface (Issue #25)

* feat: Load environment variables from .env file in app and enhanced_app

* Implement Issue #25: Modern Chat Interface Enhancements

- Add conversation persistence with localStorage and server API
- Implement feedback collection system with thumbs up/down options
- Add source document visualization with interactive side panel
- Add query suggestions to help users get started
- Create tests for the new functionality

* Enhanced Chat Interface:

- Added timestamp display to messages for better context
- Improved accessibility with ARIA attributes and keyboard navigation
- Added mobile swipe gestures for conversation history
- Added conversation export/import functionality
- Enhanced error handling with auto-retry for transient issues
- Improved focus management for side panels

* Fix test fixtures in enhanced chat interface tests

* Fix conftest.py flake8 compliance by suppressing E402 for imports after sys.path setup

* Fix test failures: improve ChromaDB telemetry disabling and mock LLM service

- Enhanced ChromaDB telemetry mocking in conftest.py with comprehensive patches
- Added LLM service mocking to test_chat_endpoint_structure to prevent 503 errors
- Set additional environment variables to disable ChromaDB telemetry
- Fixed flake8 E722 and E501 line length issues

* Address PR feedback: Fix JavaScript security and maintainability issues

- Fix const reassignment error in showSourceDocument (let instead of const)
- Add HTML escaping to prevent XSS in formatDocumentContent method
- Extract renderSourceError helper to eliminate code duplication
- Improve error handling with consistent retry functionality and accessibility
- All error messages now properly escaped and centrally managed

.gitignore

@@ -39,6 +39,7 @@ dev-tools/query-expansion-tests/
 *.log
 *.tmp
 .env.local
+.env
 
 # Vector Database (ChromaDB data)
 data/chroma_db/

app.py

@@ -1,5 +1,14 @@
+import os
+
+# Import type annotations
+from typing import Any, Dict
+
+from dotenv import load_dotenv
 from flask import Flask, jsonify, render_template, request
 
+# Load environment variables from .env file
+load_dotenv()
+
 # Disable ChromaDB anonymized telemetry for local development so the
 # library doesn't attempt to call external PostHog telemetry endpoints.
 # This avoids noisy errors in server logs and respects developer privacy.
@@ -7,7 +16,8 @@ try:
     import chromadb
 
     # Turn off anonymized telemetry (the chromadb package defaults this to True)
-    chromadb.configure(anonymized_telemetry=False)
+    # Using Any type to avoid issues with unknown parameters
+    chromadb.configure(anonymized_telemetry=False)  # type: ignore
 except Exception:
     # If chromadb isn't installed in this environment yet, ignore silently.
     pass
@@ -18,9 +28,9 @@ app = Flask(__name__)
 @app.route("/")
 def index():
     """
-    Renders the main page.
+    Renders the chat interface.
     """
-    return render_template("index.html")
+    return render_template("chat.html")
 
 
 @app.route("/health")
@@ -44,8 +54,8 @@ def ingest():
         from src.ingestion.ingestion_pipeline import IngestionPipeline
 
         # Get optional parameters from request
-        data = request.get_json() if request.is_json else {}
-        store_embeddings = data.get("store_embeddings", True)
+        data: Dict[str, Any] = request.get_json() if request.is_json else {}
+        store_embeddings: bool = bool(data.get("store_embeddings", True))
 
         pipeline = IngestionPipeline(
             chunk_size=DEFAULT_CHUNK_SIZE,
@@ -57,7 +67,7 @@ def ingest():
         result = pipeline.process_directory_with_embeddings(CORPUS_DIRECTORY)
 
         # Create response with enhanced information
-        response = {
+        response: Dict[str, Any] = {
             "status": result["status"],
             "chunks_processed": result["chunks_processed"],
             "files_processed": result["files_processed"],
@@ -160,7 +170,7 @@ def search():
         )
 
         # Format response
-        response = {
+        response: Dict[str, Any] = {
             "status": "success",
             "query": query.strip(),
             "results_count": len(results),
@@ -176,6 +186,192 @@ def search():
         return jsonify({"status": "error", "message": f"Search failed: {str(e)}"}), 500
 
 
+@app.route("/chat/suggestions")
+def get_query_suggestions():
+    """
+    Get query suggestions based on available documents.
+
+    Returns a list of suggested queries based on the most common topics
+    in the document corpus.
+    """
+    try:
+        # In a real implementation, these might come from analytics or document metadata
+        # For now, we'll return a static list of suggestions based on our corpus
+        suggestions = [
+            "What is our remote work policy?",
+            "How do I request time off?",
+            "What are our information security guidelines?",
+            "How does our expense reimbursement work?",
+            "Tell me about our diversity and inclusion policy",
+            "What's the process for employee performance reviews?",
+            "How do I report an emergency at work?",
+            "What professional development opportunities are available?",
+        ]
+
+        return jsonify({"status": "success", "suggestions": suggestions})
+
+    except Exception as e:
+        return (
+            jsonify(
+                {
+                    "status": "error",
+                    "message": f"Failed to retrieve suggestions: {str(e)}",
+                }
+            ),
+            500,
+        )
+
+
+@app.route("/chat/feedback", methods=["POST"])
+def submit_feedback():
+    """
+    Submit feedback for a specific chat message.
+
+    Collects user feedback on answer quality and relevance.
+    """
+    try:
+        # Get the feedback data from the request
+        feedback_data = request.json
+
+        if not feedback_data:
+            return (
+                jsonify({"status": "error", "message": "No feedback data provided"}),
+                400,
+            )
+
+        # Validate the required fields
+        required_fields = ["conversation_id", "message_id", "feedback_type"]
+        for field in required_fields:
+            if field not in feedback_data:
+                return (
+                    jsonify(
+                        {
+                            "status": "error",
+                            "message": f"Missing required field: {field}",
+                        }
+                    ),
+                    400,
+                )
+
+        # Log the feedback for now
+        # In a production system, you'd save this to a database
+        print(f"Received feedback: {feedback_data}")
+
+        # Return a success response
+        return jsonify(
+            {
+                "status": "success",
+                "message": "Feedback received",
+                "feedback": feedback_data,
+            }
+        )
+    except Exception as e:
+        print(f"Error processing feedback: {str(e)}")
+        return (
+            jsonify(
+                {"status": "error", "message": f"Error processing feedback: {str(e)}"}
+            ),
+            500,
+        )
+
+
+@app.route("/chat/source/<source_id>")
+def get_source_document(source_id: str):
+    """
+    Get source document content by ID.
+
+    Returns the content and metadata of a source document
+    referenced in chat responses.
+    """
+    try:
+        # In a real implementation, you'd retrieve this from your vector store
+        # For this implementation, we'll use a simplified approach with mock data
+
+        # We'll use hardcoded mock data instead of actual imports
+
+        # Map of source IDs to policy content
+        # In a real implementation, this would come from your vector store
+        from typing import Union
+
+        source_map: Dict[str, Dict[str, Union[str, Dict[str, str]]]] = {
+            "remote_work": {
+                "content": (
+                    "# Remote Work Policy\n\n"
+                    "Employees may work remotely up to 3 days per week with manager"
+                    " approval."
+                ),
+                "metadata": {
+                    "filename": "remote_work_policy.md",
+                    "last_updated": "2025-09-15",
+                },
+            },
+            "pto": {
+                "content": (
+                    "# PTO Policy\n\n"
+                    "Full-time employees receive 20 days of PTO annually, accrued"
+                    " monthly."
+                ),
+                "metadata": {"filename": "pto_policy.md", "last_updated": "2025-08-20"},
+            },
+            "security": {
+                "content": (
+                    "# Information Security Policy\n\n"
+                    "All employees must use company-approved devices and software"
+                    " for work tasks."
+                ),
+                "metadata": {
+                    "filename": "information_security_policy.md",
+                    "last_updated": "2025-10-01",
+                },
+            },
+            "expense": {
+                "content": (
+                    "# Expense Reimbursement\n\n"
+                    "Submit all expense reports within 30 days of incurring"
+                    " the expense."
+                ),
+                "metadata": {
+                    "filename": "expense_reimbursement_policy.md",
+                    "last_updated": "2025-07-10",
+                },
+            },
+        }
+
+        # Try to find the source in our mock data
+        if source_id in source_map:
+            source_data: Dict[str, Union[str, Dict[str, str]]] = source_map[source_id]
+            return jsonify(
+                {
+                    "status": "success",
+                    "source_id": source_id,
+                    "content": source_data["content"],
+                    "metadata": source_data["metadata"],
+                }
+            )
+        else:
+            # If we don't find it, return a generic response
+            return (
+                jsonify(
+                    {
+                        "status": "error",
+                        "message": f"Source document with ID {source_id} not found",
+                    }
+                ),
+                404,
+            )
+
+    except Exception as e:
+        return (
+            jsonify(
+                {
+                    "status": "error",
+                    "message": f"Failed to retrieve source document: {str(e)}",
+                }
+            ),
+            500,
+        )
+
+
 @app.route("/chat", methods=["POST"])
 def chat():
     """
@@ -293,6 +489,153 @@ def chat():
         )
 
 
+@app.route("/conversations", methods=["GET"])
+def get_conversations():
+    """
+    Get a list of all conversations for the current user.
+
+    Returns conversation IDs, titles, and timestamps.
+    """
+    # In a production system, you'd retrieve these from a database
+    # For now, we'll create some mock data
+
+    conversations = [
+        {
+            "id": "conv-123456",
+            "title": "HR Policy Questions",
+            "timestamp": "2025-10-15T14:30:00Z",
+            "preview": "What is our remote work policy?",
+        },
+        {
+            "id": "conv-789012",
+            "title": "Project Planning Queries",
+            "timestamp": "2025-10-14T09:15:00Z",
+            "preview": "How do we handle project kickoffs?",
+        },
+        {
+            "id": "conv-345678",
+            "title": "Security Compliance",
+            "timestamp": "2025-10-12T16:45:00Z",
+            "preview": "What are our password requirements?",
+        },
+    ]
+
+    return jsonify({"status": "success", "conversations": conversations})
+
+
+@app.route("/conversations/<conversation_id>", methods=["GET"])
+def get_conversation(conversation_id: str):
+    """
+    Get the full content of a specific conversation.
+
+    Returns all messages in the conversation.
+    """
+    try:
+        # In a production system, you'd retrieve this from a database
+        # For now, we'll create some mock data based on the ID
+
+        # Mock conversation data
+        if conversation_id == "conv-123456":
+            from typing import List, Union
+
+            messages: List[Dict[str, Union[str, List[Dict[str, str]]]]] = [
+                {
+                    "id": "msg-111",
+                    "role": "user",
+                    "content": "What is our remote work policy?",
+                    "timestamp": "2025-10-15T14:30:00Z",
+                },
+                {
+                    "id": "msg-112",
+                    "role": "assistant",
+                    "content": (
+                        "According to our remote work policy, employees may work "
+                        "up to 3 days per week with manager approval. You need to "
+                        "coordinate with your team to ensure adequate in-office "
+                        "coverage."
+                    ),
+                    "timestamp": "2025-10-15T14:30:15Z",
+                    "sources": [{"id": "remote_work", "title": "Remote Work Policy"}],
+                },
+            ]
+        elif conversation_id == "conv-789012":
+            messages: List[Dict[str, Union[str, List[Dict[str, str]]]]] = [
+                {
+                    "id": "msg-221",
+                    "role": "user",
+                    "content": "How do we handle project kickoffs?",
+                    "timestamp": "2025-10-14T09:15:00Z",
+                },
+                {
+                    "id": "msg-222",
+                    "role": "assistant",
+                    "content": (
+                        "Our project kickoff procedure includes a meeting with all "
+                        "stakeholders, defining project scope and goals, establishing "
+                        "communication channels, and setting up the initial project "
+                        "timeline."
+                    ),
+                    "timestamp": "2025-10-14T09:15:30Z",
+                    "sources": [
+                        {"id": "project_kickoff", "title": "Project Kickoff Procedure"}
+                    ],
+                },
+            ]
+        elif conversation_id == "conv-345678":
+            messages: List[Dict[str, Union[str, List[Dict[str, str]]]]] = [
+                {
+                    "id": "msg-331",
+                    "role": "user",
+                    "content": "What are our password requirements?",
+                    "timestamp": "2025-10-12T16:45:00Z",
+                },
+                {
+                    "id": "msg-332",
+                    "role": "assistant",
+                    "content": (
+                        "Our security policy requires passwords to be at least "
+                        "12 characters long with a mix of uppercase letters, "
+                        "lowercase letters, numbers, and special characters. "
+                        "Passwords must be changed every 90 days and cannot be "
+                        "reused for 12 cycles."
+                    ),
+                    "timestamp": "2025-10-12T16:45:20Z",
+                    "sources": [
+                        {"id": "security", "title": "Information Security Policy"}
+                    ],
+                },
+            ]
+        else:
+            return (
+                jsonify(
+                    {
+                        "status": "error",
+                        "message": f"Conversation {conversation_id} not found",
+                    }
+                ),
+                404,
+            )
+
+        return jsonify(
+            {
+                "status": "success",
+                "conversation_id": conversation_id,
+                "messages": messages,
+            }
+        )
+
+    except Exception as e:
+        return (
+            jsonify(
+                {
+                    "status": "error",
+                    "message": f"Error retrieving conversation: {str(e)}",
+                }
+            ),
+            500,
+        )
+
+
 @app.route("/chat/health", methods=["GET"])
 def chat_health():
     """
@@ -351,6 +694,26 @@ def chat_health():
                 503,
             )
 
+    except ValueError as e:
+        # Specific handling for LLM configuration errors
+        return (
+            jsonify(
+                {
+                    "status": "error",
+                    "message": f"LLM configuration error: {str(e)}",
+                    "health": {
+                        "pipeline_status": "unhealthy",
+                        "components": {
+                            "llm_service": {
+                                "status": "unconfigured",
+                                "error": str(e),
+                            }
+                        },
+                    },
+                }
+            ),
+            503,
+        )
     except Exception as e:
         return (
             jsonify({"status": "error", "message": f"Health check failed: {str(e)}"}),
@@ -359,4 +722,5 @@ def chat_health():
 
 
 if __name__ == "__main__":
-    app.run(debug=True)
+    port = int(os.environ.get("PORT", 8080))
+    app.run(debug=True, host="0.0.0.0", port=port)

enhanced_app.py

@@ -5,17 +5,23 @@ This module demonstrates how to integrate the guardrails system
 with the existing Flask API endpoints.
 """
 
+# ...existing code...
+
+from dotenv import load_dotenv
 from flask import Flask, jsonify, render_template, request
 
+# Load environment variables from .env file
+load_dotenv()
+
 app = Flask(__name__)
 
 
 @app.route("/")
 def index():
     """
-    Renders the main page.
+    Renders the chat interface.
     """
-    return render_template("index.html")
+    return render_template("chat.html")
 
 
 @app.route("/health")
@@ -206,6 +212,26 @@ def chat_health():
             }
         )
 
+    except ValueError as e:
+        # Specific handling for LLM configuration errors
+        return (
+            jsonify(
+                {
+                    "status": "error",
+                    "message": f"LLM configuration error: {str(e)}",
+                    "health": {
+                        "pipeline_status": "unhealthy",
+                        "components": {
+                            "llm_service": {
+                                "status": "unconfigured",
+                                "error": str(e),
+                            }
+                        },
+                    },
+                }
+            ),
+            503,
+        )
     except Exception as e:
         return (
             jsonify(
@@ -290,4 +316,4 @@ def validate_response():
 
 
 if __name__ == "__main__":
-    app.run(debug=True)
+    app.run(debug=True, host="0.0.0.0", port=8080)

project-plan.md

@@ -79,9 +79,15 @@ This plan outlines the steps to design, build, and deploy a Retrieval-Augmented
 
 ## 7. Web Application Completion
 
-- [ ] **Chat Interface:** Implement a simple web chat interface for the `/` endpoint.
+- [x] **Chat Interface:** ✅ **COMPLETED** - Implement a simple web chat interface for the `/` endpoint.
+  - [x] **Modern Chat UI:** Interactive chat interface with real-time messaging
+  - [x] **Message History:** Conversation display with user and assistant messages
+  - [x] **Source Citations:** Visual display of source documents and confidence scores
+  - [x] **Responsive Design:** Mobile-friendly interface with modern styling
+  - [x] **Error Handling:** Graceful error display and loading states
+  - [x] **System Health:** Status indicators and health monitoring
 - [x] **API Endpoint:** Create the `/chat` API endpoint that receives user questions (POST) and returns model-generated answers with citations and snippets.
-- [ ] **UI/UX:** Ensure the web interface is clean, user-friendly, and handles loading/error states gracefully.
+- [x] **UI/UX:** ✅ **COMPLETED** - Ensure the web interface is clean, user-friendly, and handles loading/error states gracefully.
 - [x] **Testing:** Write end-to-end tests for the chat functionality.
 
 ## 8. Evaluation

static/chat-enhanced.css

@@ -0,0 +1,206 @@
+/* Enhanced Chat Interface Styles */
+
+/* Message timestamp styles */
+.message-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 1rem 0.5rem 1rem;
+    font-size: 0.8rem;
+    color: #64748b;
+}
+
+.sender-label {
+    font-weight: 500;
+}
+
+.message-timestamp {
+    font-size: 0.75rem;
+    color: #94a3b8;
+}
+
+.message-user .message-header {
+    text-align: right;
+}
+
+.message-assistant .message-header {
+    text-align: left;
+}
+
+/* Accessibility Improvements */
+.message:focus {
+    outline: 2px solid #667eea;
+    border-radius: 8px;
+}
+
+.side-panel:focus {
+    outline: 2px solid #667eea;
+}
+
+button:focus-visible,
+textarea:focus-visible,
+input:focus-visible,
+.clickable:focus-visible {
+    outline: 2px solid #667eea;
+    outline-offset: 2px;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
+/* Mobile Experience Optimization */
+@media (max-width: 768px) {
+    /* Adjustments for smaller screens */
+    .message-header {
+        padding: 0 0.5rem 0.25rem 0.5rem;
+        font-size: 0.75rem;
+    }
+
+    /* Mobile swipe gestures */
+    .chat-container {
+        position: relative;
+        touch-action: pan-y;
+    }
+
+    /* Improved touch targets for mobile */
+    .feedback-btn, .icon-button, .primary-button {
+        min-height: 44px;
+        min-width: 44px;
+    }
+}
+
+/* Mobile swipe indicator */
+.swipe-indicator {
+    position: absolute;
+    top: 50%;
+    right: -5px;
+    width: 30px;
+    height: 50px;
+    background: rgba(102, 126, 234, 0.2);
+    border-top-left-radius: 25px;
+    border-bottom-left-radius: 25px;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 90;
+    opacity: 0.7;
+    box-shadow: -1px 0 3px rgba(0, 0, 0, 0.1);
+    animation: pulse 2s infinite;
+}
+
+/* Only show swipe indicator on smaller screens */
+@media (max-width: 768px) {
+    .swipe-indicator {
+        display: flex;
+    }
+}
+
+.swipe-indicator svg {
+    width: 16px;
+    height: 16px;
+    stroke: #667eea;
+}
+
+/* Conversation export/import */
+.export-import-buttons {
+    display: flex;
+    gap: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.search-conversations {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.search-input {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    font-size: 0.875rem;
+}
+
+.search-input:focus {
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    outline: none;
+}
+
+/* Improved error handling */
+.retry-button {
+    background: #f8fafc;
+    border: 1px solid #ef4444;
+    color: #ef4444;
+    border-radius: 8px;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.retry-button:hover {
+    background: #fef2f2;
+}
+
+.error-details {
+    background: #fef2f2;
+    padding: 0.5rem;
+    border-radius: 6px;
+    margin-top: 0.5rem;
+    font-size: 0.8rem;
+    color: #b91c1c;
+    max-height: 100px;
+    overflow-y: auto;
+}
+
+/* File upload for import */
+.file-upload {
+    display: none;
+}
+
+.file-upload-label {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    color: #1e293b;
+    transition: all 0.2s;
+}
+
+.file-upload-label:hover {
+    background: #f1f5f9;
+    border-color: #cbd5e1;
+}
+
+/* Auto-retry status */
+.auto-retry-status {
+    font-size: 0.8rem;
+    color: #f59e0b;
+    margin-top: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.retry-countdown {
+    font-weight: 600;
+}

static/chat.css

@@ -0,0 +1,719 @@
+/* Chat Interface Styles */
+
+.chat-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: #ffffff;
+}
+
+.chat-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 1.5rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.header-content h1 {
+    margin: 0;
+    font-size: 2rem;
+    font-weight: 700;
+}
+
+.header-content .subtitle {
+    margin: 0.25rem 0 0 0;
+    opacity: 0.9;
+    font-size: 1rem;
+}
+
+.header-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(255,255,255,0.1);
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    backdrop-filter: blur(10px);
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #4ade80;
+    animation: pulse 2s infinite;
+}
+
+.status-text {
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+.chat-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.messages-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 2rem;
+    background: #f8fafc;
+}
+
+.welcome-message {
+    text-align: center;
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 3rem 2rem;
+}
+
+.welcome-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+}
+
+.welcome-message h2 {
+    color: #1e293b;
+    margin-bottom: 1rem;
+    font-size: 1.875rem;
+    font-weight: 600;
+}
+
+.welcome-message p {
+    color: #64748b;
+    margin-bottom: 2rem;
+    font-size: 1.125rem;
+    line-height: 1.6;
+}
+
+.policy-topics {
+    list-style: none;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 0.75rem;
+    margin-top: 1.5rem;
+}
+
+.policy-topics li {
+    background: white;
+    padding: 1rem;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    color: #475569;
+    font-weight: 500;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.policy-topics li:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.message {
+    margin-bottom: 1.5rem;
+    animation: fadeInUp 0.3s ease-out;
+}
+
+.message-user {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.message-assistant {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.message-content {
+    max-width: 70%;
+    padding: 1rem 1.25rem;
+    border-radius: 18px;
+    position: relative;
+}
+
+.message-user .message-content {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-bottom-right-radius: 4px;
+}
+
+.message-assistant .message-content {
+    background: white;
+    color: #1e293b;
+    border: 1px solid #e2e8f0;
+    border-bottom-left-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.message-text {
+    line-height: 1.5;
+    margin-bottom: 0;
+}
+
+.message-sources {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #e2e8f0;
+}
+
+.sources-header {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #64748b;
+    margin-bottom: 0.5rem;
+}
+
+.source-citation {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background: #f1f5f9;
+    border-radius: 6px;
+    margin-bottom: 0.5rem;
+    font-size: 0.875rem;
+}
+
+.source-icon {
+    width: 16px;
+    height: 16px;
+    color: #64748b;
+}
+
+.confidence-score {
+    margin-top: 0.75rem;
+    padding: 0.5rem;
+    background: #f8fafc;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    color: #64748b;
+}
+
+.confidence-bar {
+    height: 4px;
+    background: #e2e8f0;
+    border-radius: 2px;
+    margin-top: 0.25rem;
+    overflow: hidden;
+}
+
+.confidence-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);
+    border-radius: 2px;
+    transition: width 0.3s ease;
+}
+
+.message-feedback {
+    display: flex;
+    gap: 0.75rem;
+    margin-top: 1rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid #e2e8f0;
+}
+
+.feedback-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 20px;
+    padding: 0.5rem 0.75rem;
+    color: #64748b;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.feedback-btn:hover {
+    background: #f1f5f9;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.feedback-btn svg {
+    color: #94a3b8;
+}
+
+.feedback-thanks {
+    color: #10b981;
+    font-size: 0.875rem;
+    font-style: italic;
+    padding: 0.5rem 0;
+}
+
+.feedback-form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.feedback-form p {
+    margin: 0;
+    font-size: 0.875rem;
+    color: #64748b;
+}
+
+.feedback-select, .feedback-textarea {
+    padding: 0.75rem;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    background: white;
+    font-family: inherit;
+    font-size: 0.875rem;
+    color: #1e293b;
+    width: 100%;
+}
+
+.feedback-textarea {
+    resize: vertical;
+    min-height: 80px;
+}
+
+.feedback-actions {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.feedback-actions .primary-button {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+}
+
+.input-container {
+    padding: 1.5rem 2rem;
+    background: white;
+    border-top: 1px solid #e2e8f0;
+}
+
+.chat-form {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.input-wrapper {
+    display: flex;
+    align-items: flex-end;
+    gap: 0.75rem;
+    background: #f8fafc;
+    border: 2px solid #e2e8f0;
+    border-radius: 12px;
+    padding: 0.75rem;
+    transition: border-color 0.2s;
+}
+
+.input-wrapper:focus-within {
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+#messageInput {
+    flex: 1;
+    border: none;
+    background: transparent;
+    resize: none;
+    font-family: 'Inter', sans-serif;
+    font-size: 1rem;
+    line-height: 1.5;
+    min-height: 20px;
+    max-height: 120px;
+    padding: 0;
+    outline: none;
+    color: #1e293b;
+}
+
+#messageInput::placeholder {
+    color: #94a3b8;
+}
+
+.send-button {
+    background: #667eea;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 0.75rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+}
+
+.send-button:hover:not(:disabled) {
+    background: #5a67d8;
+    transform: translateY(-1px);
+}
+
+.send-button:disabled {
+    background: #cbd5e1;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.input-options {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 0.75rem;
+    font-size: 0.875rem;
+}
+
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    color: #64748b;
+    user-select: none;
+}
+
+.checkbox-label input[type="checkbox"] {
+    display: none;
+}
+
+.checkmark {
+    width: 18px;
+    height: 18px;
+    border: 2px solid #cbd5e1;
+    border-radius: 4px;
+    position: relative;
+    transition: all 0.2s;
+}
+
+.checkbox-label input[type="checkbox"]:checked + .checkmark {
+    background: #667eea;
+    border-color: #667eea;
+}
+
+.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
+    content: '';
+    position: absolute;
+    left: 5px;
+    top: 2px;
+    width: 4px;
+    height: 8px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+}
+
+.char-counter {
+    color: #94a3b8;
+    font-size: 0.8rem;
+}
+
+.char-counter.warning {
+    color: #f59e0b;
+}
+
+.char-counter.error {
+    color: #ef4444;
+}
+
+.chat-footer {
+    padding: 1rem 2rem;
+    background: #f8fafc;
+    border-top: 1px solid #e2e8f0;
+    text-align: center;
+    font-size: 0.875rem;
+    color: #64748b;
+}
+
+.chat-footer a {
+    color: #667eea;
+    text-decoration: none;
+}
+
+.chat-footer a:hover {
+    text-decoration: underline;
+}
+
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255,255,255,0.9);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    backdrop-filter: blur(4px);
+}
+
+.loading-overlay.hidden {
+    display: none;
+}
+
+.loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #e2e8f0;
+    border-top: 4px solid #667eea;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 1rem;
+}
+
+.loading-overlay p {
+    color: #64748b;
+    font-size: 1.125rem;
+    margin: 0;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Error message styles */
+.error-message {
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    color: #dc2626;
+    padding: 1rem;
+    border-radius: 8px;
+    margin: 1rem 0;
+}
+
+.error-message strong {
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .chat-header {
+        padding: 1rem;
+        flex-direction: column;
+        gap: 1rem;
+        text-align: center;
+    }
+
+    .header-content h1 {
+        font-size: 1.5rem;
+    }
+
+    .messages-container {
+        padding: 1rem;
+    }
+
+    .welcome-message {
+        padding: 2rem 1rem;
+    }
+
+    .policy-topics {
+        grid-template-columns: 1fr;
+    }
+
+    .message-content {
+        max-width: 85%;
+    }
+
+    .input-container {
+        padding: 1rem;
+    }
+
+    .input-options {
+        flex-direction: column;
+        gap: 0.5rem;
+        align-items: flex-start;
+    }
+}
+
+/* Side Panel */
+.side-panel {
+    position: fixed;
+    top: 0;
+    right: -400px;
+    width: 350px;
+    max-width: 90vw;
+    height: 100vh;
+    background: white;
+    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    transition: right 0.3s ease;
+    display: flex;
+    flex-direction: column;
+}
+
+.side-panel.show {
+    right: 0;
+}
+
+.panel-header {
+    padding: 1.5rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.panel-header h3 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.panel-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.panel-actions {
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #e2e8f0;
+    margin-bottom: 1rem;
+}
+
+.icon-button {
+    background: transparent;
+    border: none;
+    color: currentColor;
+    cursor: pointer;
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: background-color 0.2s;
+}
+
+.icon-button:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.icon-button.small {
+    padding: 0.25rem;
+}
+
+.primary-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: #667eea;
+    color: white;
+    border: none;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.primary-button:hover {
+    background: #5a67d8;
+    transform: translateY(-1px);
+}
+
+.conversation-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    flex: 1;
+}
+
+.conversation-item {
+    padding: 0.75rem;
+    background: #f8fafc;
+    border-radius: 8px;
+    border: 1px solid #e2e8f0;
+    cursor: pointer;
+    transition: all 0.2s;
+    position: relative;
+}
+
+.conversation-item.active {
+    background: rgba(102, 126, 234, 0.1);
+    border-color: #667eea;
+}
+
+.conversation-item:hover {
+    background: #f1f5f9;
+    transform: translateY(-1px);
+}
+
+.conversation-item h4 {
+    margin: 0 0 0.5rem 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #1e293b;
+}
+
+.conversation-meta {
+    font-size: 0.8rem;
+    color: #64748b;
+}
+
+.conversation-actions {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.conversation-item:hover .conversation-actions {
+    opacity: 1;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 2rem 1rem;
+    color: #64748b;
+}
+
+@media (max-width: 480px) {
+    .welcome-message h2 {
+        font-size: 1.5rem;
+    }
+
+    .welcome-message p {
+        font-size: 1rem;
+    }
+
+    .message-content {
+        max-width: 95%;
+    }
+}

static/js/chat.js

@@ -0,0 +1,1939 @@
+/**
+ * PolicyWise Chat Interface
+ * Interactive web chat for the RAG application
+ */
+
+class ChatInterface {
+    constructor() {
+        this.messageInput = document.getElementById('messageInput');
+        this.sendButton = document.getElementById('sendButton');
+        this.chatForm = document.getElementById('chatForm');
+        this.messagesContainer = document.getElementById('messagesContainer');
+        this.includeSources = document.getElementById('includeSources');
+        this.loadingOverlay = document.getElementById('loadingOverlay');
+        this.statusIndicator = document.getElementById('statusIndicator');
+        this.charCount = document.getElementById('charCount');
+        this.sourcePanel = document.getElementById('sourcePanel');
+        this.conversationHistoryPanel = document.getElementById('conversationHistoryPanel');
+        this.swipeIndicator = document.getElementById('swipeIndicator');
+
+        // Search and filter elements
+        this.searchConversations = document.getElementById('searchConversations');
+        this.exportConversationsBtn = document.getElementById('exportConversationsBtn');
+        this.importConversations = document.getElementById('importConversations');
+
+        this.messages = []; // Store messages in memory
+        this.conversationId = this.loadOrCreateConversation();
+        this.isLoading = false;
+        this.autoRetryCount = 0;
+        this.maxAutoRetries = 3;
+
+        // Track focused elements for keyboard navigation
+        this.lastFocusedElement = null;
+
+        // Touch handling for mobile swipe
+        this.touchStartX = 0;
+        this.touchEndX = 0;
+
+        this.initializeEventListeners();
+        this.setupKeyboardNavigation();
+        this.setupTouchHandlers();
+        this.checkSystemHealth();
+        this.loadConversationHistory();
+        this.loadQuerySuggestions();
+        this.focusInput();
+        this.initializeSourcePanel();
+    }
+
+    /**
+     * Set up keyboard navigation and accessibility
+     */
+    setupKeyboardNavigation() {
+        // Trap focus within modal dialogs
+        const handleTabKey = (e, containerElement) => {
+            if (e.key !== 'Tab') return;
+
+            const focusableElements = containerElement.querySelectorAll(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            );
+
+            const firstElement = focusableElements[0];
+            const lastElement = focusableElements[focusableElements.length - 1];
+
+            if (e.shiftKey) {
+                if (document.activeElement === firstElement) {
+                    e.preventDefault();
+                    lastElement.focus();
+                }
+            } else {
+                if (document.activeElement === lastElement) {
+                    e.preventDefault();
+                    firstElement.focus();
+                }
+            }
+        };
+
+        // Add keyboard event listeners to side panels
+        if (this.conversationHistoryPanel) {
+            this.conversationHistoryPanel.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape') {
+                    this.closeConversationPanel();
+                } else if (e.key === 'Tab') {
+                    handleTabKey(e, this.conversationHistoryPanel);
+                }
+            });
+        }
+
+        if (this.sourcePanel) {
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape' && this.sourcePanel.classList.contains('show')) {
+                    this.closeSourcePanel();
+                } else if (e.key === 'Tab' && this.sourcePanel.classList.contains('show')) {
+                    handleTabKey(e, this.sourcePanel);
+                }
+            });
+        }
+
+        // Add keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            // Cmd+/ or Ctrl+/ to focus search
+            if ((e.metaKey || e.ctrlKey) && e.key === '/') {
+                e.preventDefault();
+                this.focusInput();
+            }
+
+            // Cmd+Shift+E or Ctrl+Shift+E to export conversations
+            if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === 'E') {
+                e.preventDefault();
+                this.exportConversationsToFile();
+            }
+        });
+    }
+
+    /**
+     * Set up touch handlers for mobile swipe gestures
+     */
+    setupTouchHandlers() {
+        // Only set up on mobile devices
+        if (window.innerWidth <= 768) {
+            document.addEventListener('touchstart', (e) => {
+                this.touchStartX = e.changedTouches[0].screenX;
+            }, { passive: true });
+
+            document.addEventListener('touchend', (e) => {
+                this.touchEndX = e.changedTouches[0].screenX;
+                this.handleSwipeGesture();
+            }, { passive: true });
+
+            // Show swipe indicator occasionally
+            setTimeout(() => {
+                if (this.swipeIndicator && !this.conversationHistoryPanel.classList.contains('show')) {
+                    this.swipeIndicator.style.display = 'flex';
+                    setTimeout(() => {
+                        this.swipeIndicator.style.display = 'none';
+                    }, 3000);
+                }
+            }, 5000);
+        }
+    }
+
+    /**
+     * Initialize source document panel
+     */
+    /**
+     * Load query suggestions from the server
+     */
+    async loadQuerySuggestions() {
+        const suggestionsContainer = document.getElementById('suggestedQueries');
+        if (!suggestionsContainer) return;
+
+        try {
+            const response = await fetch('/chat/suggestions');
+            const data = await response.json();
+
+            if (response.ok && data.status === 'success' && data.suggestions && data.suggestions.length > 0) {
+                suggestionsContainer.innerHTML = '';
+
+                data.suggestions.forEach(suggestion => {
+                    const suggestionDiv = document.createElement('div');
+                    suggestionDiv.className = 'query-suggestion';
+
+                    const iconSpan = document.createElement('span');
+                    iconSpan.className = 'suggestion-icon';
+                    iconSpan.innerHTML = `
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"></circle>
+                            <line x1="12" y1="8" x2="12" y2="12"></line>
+                            <line x1="12" y1="16" x2="12" y2="16"></line>
+                        </svg>
+                    `;
+
+                    const textSpan = document.createElement('span');
+                    textSpan.className = 'suggestion-text';
+                    textSpan.textContent = suggestion;
+
+                    suggestionDiv.appendChild(iconSpan);
+                    suggestionDiv.appendChild(textSpan);
+
+                    // Add click event to populate the input
+                    suggestionDiv.addEventListener('click', () => {
+                        this.messageInput.value = suggestion;
+                        this.updateCharCount();
+                        this.autoResizeTextarea();
+                        this.updateSendButton();
+                        this.focusInput();
+                    });
+
+                    suggestionsContainer.appendChild(suggestionDiv);
+                });
+            }
+        } catch (error) {
+            console.warn('Failed to load query suggestions:', error);
+        }
+    }
+
+    initializeSourcePanel() {
+        // Create the source panel if it doesn't exist
+        if (!this.sourcePanel) {
+            const sourcePanelHTML = `
+                <div id="sourcePanel" class="side-panel source-document-panel"
+                     role="dialog"
+                     aria-labelledby="sourcePanelHeader"
+                     aria-hidden="true">
+                    <div class="panel-header">
+                        <h3 id="sourcePanelHeader">Source Document</h3>
+                        <button id="closeSourcePanel" class="icon-button" aria-label="Close source document">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                                <line x1="18" y1="6" x2="6" y2="18"></line>
+                                <line x1="6" y1="6" x2="18" y2="18"></line>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="panel-body">
+                        <div id="sourceContent" class="source-document-content">
+                            <!-- Document content will be loaded here -->
+                            <p class="sr-only">Document content will be loaded here.</p>
+                        </div>
+                    </div>
+                </div>
+            `;
+
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = sourcePanelHTML;
+            document.body.appendChild(tempDiv.firstElementChild);
+
+            this.sourcePanel = document.getElementById('sourcePanel');
+
+            // Add ESC key handler for accessibility
+            this.sourcePanel.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape') {
+                    this.closeSourcePanel();
+                }
+            });
+        }
+    }
+
+    /**
+     * Initialize all event listeners
+     */
+    initializeEventListeners() {
+        // Form submission
+        this.chatForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.sendMessage();
+        });
+
+        // Input validation and auto-resize
+        this.messageInput.addEventListener('input', () => {
+            this.updateCharCount();
+            this.autoResizeTextarea();
+            this.updateSendButton();
+        });
+
+        // Enter key handling (Shift+Enter for new line, Enter to send)
+        this.messageInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                if (!this.isLoading && this.messageInput.value.trim()) {
+                    this.sendMessage();
+                }
+            }
+        });
+
+        // Clear welcome message on first input
+        this.messageInput.addEventListener('focus', () => {
+            this.clearWelcomeMessage();
+        }, { once: true });
+
+        // Conversation history panel
+        const conversationHistoryBtn = document.getElementById('conversationHistoryBtn');
+        const closeConversationsBtn = document.getElementById('closeConversationsBtn');
+        const newConversationBtn = document.getElementById('newConversationBtn');
+
+        if (conversationHistoryBtn) {
+            conversationHistoryBtn.addEventListener('click', () => {
+                this.openConversationPanel();
+            });
+        }
+
+        if (closeConversationsBtn) {
+            closeConversationsBtn.addEventListener('click', () => {
+                this.closeConversationPanel();
+            });
+        }
+
+        if (newConversationBtn) {
+            newConversationBtn.addEventListener('click', () => {
+                this.startNewConversation();
+            });
+        }
+
+        // Conversation search functionality
+        if (this.searchConversations) {
+            this.searchConversations.addEventListener('input', () => {
+                this.filterConversations(this.searchConversations.value);
+            });
+        }
+
+        // Export/Import functionality
+        if (this.exportConversationsBtn) {
+            this.exportConversationsBtn.addEventListener('click', () => {
+                this.exportConversationsToFile();
+            });
+        }
+
+        if (this.importConversations) {
+            this.importConversations.addEventListener('change', (e) => {
+                this.importConversationsFromFile(e.target.files[0]);
+            });
+        }
+    }
+
+    /**
+     * Handle swipe gestures for mobile
+     */
+    handleSwipeGesture() {
+        const swipeThreshold = 100;
+
+        // Right to left swipe (open conversation panel)
+        if (this.touchEndX < this.touchStartX - swipeThreshold) {
+            if (!this.conversationHistoryPanel.classList.contains('show')) {
+                this.openConversationPanel();
+            }
+        }
+
+        // Left to right swipe (close conversation panel)
+        if (this.touchEndX > this.touchStartX + swipeThreshold) {
+            if (this.conversationHistoryPanel.classList.contains('show')) {
+                this.closeConversationPanel();
+            }
+        }
+    }
+
+    /**
+     * Open conversation panel with focus management
+     */
+    openConversationPanel() {
+        this.updateConversationList();
+        this.conversationHistoryPanel.classList.add('show');
+        this.conversationHistoryPanel.setAttribute('aria-hidden', 'false');
+
+        // Store last focused element to restore focus when closing
+        this.lastFocusedElement = document.activeElement;
+
+        // Focus the close button
+        const closeBtn = document.getElementById('closeConversationsBtn');
+        if (closeBtn) {
+            setTimeout(() => closeBtn.focus(), 100);
+        }
+
+        // Hide the swipe indicator
+        if (this.swipeIndicator) {
+            this.swipeIndicator.style.display = 'none';
+        }
+
+        // Add class to the body for potential styling
+        document.body.classList.add('panel-open');
+    }
+
+    /**
+     * Close conversation panel with focus management
+     */
+    closeConversationPanel() {
+        this.conversationHistoryPanel.classList.remove('show');
+        this.conversationHistoryPanel.setAttribute('aria-hidden', 'true');
+
+        // Restore focus to previous element
+        if (this.lastFocusedElement) {
+            this.lastFocusedElement.focus();
+        }
+
+        document.body.classList.remove('panel-open');
+    }
+
+    /**
+     * Close source document panel
+     */
+    closeSourcePanel() {
+        if (this.sourcePanel) {
+            this.sourcePanel.classList.remove('show');
+            document.body.classList.remove('source-panel-open');
+
+            // Restore focus
+            if (this.lastFocusedElement) {
+                this.lastFocusedElement.focus();
+            }
+        }
+    }
+
+    /**
+     * Update the conversation list in the side panel
+     */
+    updateConversationList() {
+        const conversationList = document.getElementById('conversationList');
+        if (!conversationList) return;
+
+        // Clear current list
+        conversationList.innerHTML = '';
+
+        // Get conversations from storage
+        const conversations = this.getConversationsFromStorage();
+
+        if (conversations.length === 0) {
+            const emptyState = document.createElement('div');
+            emptyState.className = 'empty-state';
+            emptyState.innerHTML = '<p>No conversation history found.</p>';
+            conversationList.appendChild(emptyState);
+            return;
+        }
+
+        // Sort conversations by last updated (newest first)
+        conversations.sort((a, b) => {
+            const dateA = new Date(a.metadata.last_updated);
+            const dateB = new Date(b.metadata.last_updated);
+            return dateB - dateA;
+        });
+
+        // Add each conversation to the list
+        conversations.forEach(conversation => {
+            const item = document.createElement('div');
+            item.className = 'conversation-item';
+            item.setAttribute('role', 'listitem');
+            item.setAttribute('tabindex', '0');
+            item.setAttribute('aria-label', `${conversation.title || 'Untitled Conversation'}, ${conversation.metadata.message_count} messages, last updated ${this.formatDateTime(conversation.metadata.last_updated)}`);
+
+            if (conversation.id === this.conversationId) {
+                item.classList.add('active');
+                item.setAttribute('aria-current', 'true');
+            }
+
+            const title = document.createElement('h4');
+            title.textContent = conversation.title || 'Untitled Conversation';
+
+            const meta = document.createElement('div');
+            meta.className = 'conversation-meta';
+
+            const date = new Date(conversation.metadata.last_updated);
+            const formattedDate = date.toLocaleDateString(undefined, {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric'
+            });
+
+            meta.textContent = `${conversation.metadata.message_count} messages · ${formattedDate}`;
+
+            const actions = document.createElement('div');
+            actions.className = 'conversation-actions';
+
+            const deleteBtn = document.createElement('button');
+            deleteBtn.className = 'icon-button small';
+            deleteBtn.setAttribute('aria-label', `Delete conversation: ${conversation.title || 'Untitled Conversation'}`);
+            deleteBtn.innerHTML = `
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                    <path d="M3 6h18"></path>
+                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                </svg>
+            `;
+            deleteBtn.title = 'Delete conversation';
+            deleteBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.deleteConversation(conversation.id);
+            });
+
+            actions.appendChild(deleteBtn);
+
+            item.appendChild(title);
+            item.appendChild(meta);
+            item.appendChild(actions);
+
+            // Add click event to load this conversation
+            item.addEventListener('click', () => {
+                this.loadConversation(conversation.id);
+                this.closeConversationPanel();
+            });
+
+            // Add keyboard support
+            item.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.loadConversation(conversation.id);
+                    this.closeConversationPanel();
+                }
+            });
+
+            conversationList.appendChild(item);
+        });
+    }
+
+    /**
+     * Filter conversations based on search query
+     */
+    filterConversations(query) {
+        if (!query) {
+            this.updateConversationList();
+            return;
+        }
+
+        query = query.toLowerCase();
+        const conversationList = document.getElementById('conversationList');
+        if (!conversationList) return;
+
+        // Clear current list
+        conversationList.innerHTML = '';
+
+        // Get conversations from storage
+        const conversations = this.getConversationsFromStorage();
+
+        // Filter conversations
+        const filteredConversations = conversations.filter(conv => {
+            // Search in title
+            if (conv.title && conv.title.toLowerCase().includes(query)) {
+                return true;
+            }
+
+            // Search in messages
+            if (conv.messages && conv.messages.some(msg =>
+                msg.content && msg.content.toLowerCase().includes(query))) {
+                return true;
+            }
+
+            return false;
+        });
+
+        if (filteredConversations.length === 0) {
+            const emptyState = document.createElement('div');
+            emptyState.className = 'empty-state';
+            emptyState.innerHTML = `<p>No conversations matching "${query}"</p>`;
+            conversationList.appendChild(emptyState);
+            return;
+        }
+
+        // Sort and display filtered conversations
+        filteredConversations.sort((a, b) => {
+            const dateA = new Date(a.metadata.last_updated);
+            const dateB = new Date(b.metadata.last_updated);
+            return dateB - dateA;
+        });
+
+        // Add each filtered conversation to the list
+        filteredConversations.forEach(conversation => {
+            const item = document.createElement('div');
+            item.className = 'conversation-item';
+            item.setAttribute('role', 'listitem');
+            item.setAttribute('tabindex', '0');
+
+            if (conversation.id === this.conversationId) {
+                item.classList.add('active');
+                item.setAttribute('aria-current', 'true');
+            }
+
+            const title = document.createElement('h4');
+            title.textContent = conversation.title || 'Untitled Conversation';
+
+            const meta = document.createElement('div');
+            meta.className = 'conversation-meta';
+
+            const date = new Date(conversation.metadata.last_updated);
+            const formattedDate = this.formatDateTime(conversation.metadata.last_updated);
+
+            meta.textContent = `${conversation.metadata.message_count} messages · ${formattedDate}`;
+
+            item.appendChild(title);
+            item.appendChild(meta);
+
+            // Add click event to load this conversation
+            item.addEventListener('click', () => {
+                this.loadConversation(conversation.id);
+                this.closeConversationPanel();
+            });
+
+            // Add keyboard support
+            item.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.loadConversation(conversation.id);
+                    this.closeConversationPanel();
+                }
+            });
+
+            conversationList.appendChild(item);
+        });
+    }
+
+    /**
+     * Export conversations to a JSON file
+     */
+    exportConversationsToFile() {
+        try {
+            const conversations = this.getConversationsFromStorage();
+            if (conversations.length === 0) {
+                alert('No conversations to export.');
+                return;
+            }
+
+            const dataStr = JSON.stringify(conversations, null, 2);
+            const blob = new Blob([dataStr], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+
+            const downloadLink = document.createElement('a');
+            downloadLink.href = url;
+            downloadLink.download = `policywise_conversations_${new Date().toISOString().split('T')[0]}.json`;
+
+            // Append to the document, click it, then remove it
+            document.body.appendChild(downloadLink);
+            downloadLink.click();
+            document.body.removeChild(downloadLink);
+
+            // Clean up the URL
+            setTimeout(() => URL.revokeObjectURL(url), 100);
+
+            // Show confirmation
+            const statusText = this.statusIndicator.querySelector('.status-text');
+            const originalText = statusText.textContent;
+            statusText.textContent = 'Conversations exported!';
+            setTimeout(() => {
+                statusText.textContent = originalText;
+            }, 3000);
+
+        } catch (error) {
+            console.error('Failed to export conversations:', error);
+            alert('Failed to export conversations. Please try again.');
+        }
+    }
+
+    /**
+     * Import conversations from a JSON file
+     */
+    importConversationsFromFile(file) {
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            try {
+                const importedData = JSON.parse(event.target.result);
+
+                if (!Array.isArray(importedData)) {
+                    throw new Error('Invalid format: expected an array of conversations');
+                }
+
+                // Validate the structure
+                const validConversations = importedData.filter(conv => {
+                    return (
+                        conv.id &&
+                        conv.messages &&
+                        Array.isArray(conv.messages) &&
+                        conv.metadata
+                    );
+                });
+
+                if (validConversations.length === 0) {
+                    throw new Error('No valid conversations found in the file');
+                }
+
+                // Merge with existing conversations
+                const existingConversations = this.getConversationsFromStorage();
+                const existingIds = new Set(existingConversations.map(c => c.id));
+
+                // Add only conversations that don't exist
+                const newConversations = validConversations.filter(c => !existingIds.has(c.id));
+                const mergedConversations = [...existingConversations, ...newConversations];
+
+                // Save to localStorage
+                this.saveConversationsToStorage(mergedConversations);
+
+                // Update UI
+                this.updateConversationList();
+
+                // Show confirmation with count of imported conversations
+                alert(`Successfully imported ${newConversations.length} conversation(s).`);
+
+            } catch (error) {
+                console.error('Failed to import conversations:', error);
+                alert(`Failed to import conversations: ${error.message}`);
+            }
+        };
+
+        reader.readAsText(file);
+    }
+
+    /**
+     * Start a new conversation
+     */
+    startNewConversation() {
+        // Generate new ID
+        this.conversationId = this.generateConversationId();
+
+        // Clear messages
+        this.messages = [];
+        this.messagesContainer.innerHTML = '';
+
+        // Add welcome message
+        this.addWelcomeMessage();
+
+        // Update URL without reloading
+        const url = new URL(window.location.href);
+        url.searchParams.set('conversation_id', this.conversationId);
+        window.history.pushState({}, '', url);
+
+        // Close conversation panel
+        document.getElementById('conversationHistoryPanel').classList.remove('show');
+
+        // Focus input
+        this.focusInput();
+    }
+
+    /**
+     * Load a conversation by ID
+     */
+    loadConversation(conversationId) {
+        const conversations = this.getConversationsFromStorage();
+        const conversation = conversations.find(c => c.id === conversationId);
+
+        if (conversation) {
+            // Update current conversation ID
+            this.conversationId = conversationId;
+
+            // Update URL without reloading
+            const url = new URL(window.location.href);
+            url.searchParams.set('conversation_id', this.conversationId);
+            window.history.pushState({}, '', url);
+
+            // Clear current messages
+            this.messages = [];
+            this.messagesContainer.innerHTML = '';
+
+            // Load messages
+            conversation.messages.forEach(msg => {
+                this.addMessage(msg.content, msg.sender, msg.metadata, false);
+            });
+
+            // Add messages to memory
+            this.messages = [...conversation.messages];
+
+            // Update conversation metadata
+            conversation.metadata.last_accessed = new Date().toISOString();
+            this.saveConversationsToStorage(conversations);
+
+            // Focus input
+            this.focusInput();
+        }
+    }
+
+    /**
+     * Delete a conversation by ID
+     */
+    deleteConversation(conversationId) {
+        if (confirm('Are you sure you want to delete this conversation? This cannot be undone.')) {
+            const conversations = this.getConversationsFromStorage();
+            const updatedConversations = conversations.filter(c => c.id !== conversationId);
+            this.saveConversationsToStorage(updatedConversations);
+
+            // If we deleted the current conversation, start a new one
+            if (conversationId === this.conversationId) {
+                this.startNewConversation();
+            }
+
+            // Update the conversation list
+            this.updateConversationList();
+        }
+    }
+
+    /**
+     * Add welcome message to the UI
+     */
+    addWelcomeMessage() {
+        const welcomeDiv = document.createElement('div');
+        welcomeDiv.className = 'welcome-message';
+        welcomeDiv.innerHTML = `
+            <div class="welcome-icon">🤖</div>
+            <h2>Welcome to PolicyWise!</h2>
+            <p>I'm here to help you find information about company policies and procedures. Ask me anything about:</p>
+            <ul class="policy-topics">
+                <li>Remote work policies</li>
+                <li>PTO and leave policies</li>
+                <li>Expense reimbursement</li>
+                <li>Information security</li>
+                <li>Employee benefits</li>
+                <li>And much more...</li>
+            </ul>
+        `;
+        this.messagesContainer.appendChild(welcomeDiv);
+    }
+
+    /**
+     * Generate a unique conversation ID
+     */
+    generateConversationId() {
+        return 'conv_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+    }
+
+    /**
+     * Load existing conversation or create new one
+     */
+    loadOrCreateConversation() {
+        // Check URL parameters for conversation ID
+        const urlParams = new URLSearchParams(window.location.search);
+        const conversationId = urlParams.get('conversation_id');
+
+        if (conversationId) {
+            // If this conversation exists in localStorage, use it
+            const conversations = this.getConversationsFromStorage();
+            if (conversations.some(conv => conv.id === conversationId)) {
+                return conversationId;
+            }
+        }
+
+        // Otherwise generate a new ID
+        return this.generateConversationId();
+    }
+
+    /**
+     * Load conversation history from localStorage
+     */
+    loadConversationHistory() {
+        const conversations = this.getConversationsFromStorage();
+        const conversation = conversations.find(conv => conv.id === this.conversationId);
+
+        if (conversation && conversation.messages && conversation.messages.length > 0) {
+            // Clear welcome message if we're loading history
+            this.clearWelcomeMessage();
+
+            // Load messages
+            conversation.messages.forEach(msg => {
+                this.addMessage(msg.content, msg.sender, msg.metadata, false);
+            });
+
+            // Update conversation metadata
+            conversation.metadata.last_accessed = new Date().toISOString();
+            this.saveConversationsToStorage(conversations);
+        }
+    }
+
+    /**
+     * Get conversations from localStorage
+     */
+    getConversationsFromStorage() {
+        try {
+            return JSON.parse(localStorage.getItem('policywise_conversations') || '[]');
+        } catch (e) {
+            console.error('Failed to parse conversations from localStorage:', e);
+            return [];
+        }
+    }
+
+    /**
+     * Save conversations to localStorage
+     */
+    saveConversationsToStorage(conversations) {
+        try {
+            localStorage.setItem('policywise_conversations', JSON.stringify(conversations));
+        } catch (e) {
+            console.error('Failed to save conversations to localStorage:', e);
+        }
+    }
+
+    /**
+     * Save current conversation to localStorage
+     */
+    saveCurrentConversation() {
+        const conversations = this.getConversationsFromStorage();
+        const now = new Date().toISOString();
+
+        // Find existing conversation or create new one
+        let conversation = conversations.find(conv => conv.id === this.conversationId);
+
+        if (!conversation) {
+            // Create new conversation
+            conversation = {
+                id: this.conversationId,
+                title: this.getConversationTitle(),
+                messages: this.messages,
+                metadata: {
+                    created_at: now,
+                    last_updated: now,
+                    last_accessed: now,
+                    message_count: this.messages.length
+                }
+            };
+            conversations.push(conversation);
+        } else {
+            // Update existing conversation
+            conversation.messages = this.messages;
+            conversation.title = this.getConversationTitle();
+            conversation.metadata.last_updated = now;
+            conversation.metadata.message_count = this.messages.length;
+        }
+
+        this.saveConversationsToStorage(conversations);
+    }
+
+    /**
+     * Generate a title for the conversation based on first user message
+     */
+    getConversationTitle() {
+        const firstUserMessage = this.messages.find(msg => msg.sender === 'user');
+        if (firstUserMessage) {
+            // Truncate to reasonable title length
+            const title = firstUserMessage.content.trim();
+            return title.length > 50 ? title.substring(0, 50) + '...' : title;
+        }
+        return 'New Conversation';
+    }
+
+    /**
+     * Update character count and styling
+     */
+    updateCharCount() {
+        const count = this.messageInput.value.length;
+        this.charCount.textContent = count;
+
+        const counter = this.charCount.parentElement;
+        counter.classList.remove('warning', 'error');
+
+        if (count > 900) {
+            counter.classList.add('error');
+        } else if (count > 800) {
+            counter.classList.add('warning');
+        }
+    }
+
+    /**
+     * Auto-resize textarea based on content
+     */
+    autoResizeTextarea() {
+        this.messageInput.style.height = 'auto';
+        this.messageInput.style.height = Math.min(this.messageInput.scrollHeight, 120) + 'px';
+    }
+
+    /**
+     * Update send button state
+     */
+    updateSendButton() {
+        const hasText = this.messageInput.value.trim().length > 0;
+        this.sendButton.disabled = !hasText || this.isLoading;
+    }
+
+    /**
+     * Focus the input field
+     */
+    focusInput() {
+        this.messageInput.focus();
+    }
+
+    /**
+     * Check system health status
+     */
+    async checkSystemHealth() {
+        try {
+            const response = await fetch('/chat/health');
+            const data = await response.json();
+
+            if (data.status === 'healthy') {
+                this.updateStatus('Ready', 'ready');
+            } else {
+                this.updateStatus('Degraded', 'warning');
+            }
+        } catch (error) {
+            console.warn('Health check failed:', error);
+            this.updateStatus('Offline', 'error');
+        }
+    }
+
+    /**
+     * Update status indicator
+     */
+    updateStatus(text, type) {
+        const statusText = this.statusIndicator.querySelector('.status-text');
+        const statusDot = this.statusIndicator.querySelector('.status-dot');
+
+        statusText.textContent = text;
+
+        // Remove existing status classes
+        statusDot.classList.remove('ready', 'warning', 'error', 'loading');
+        statusDot.classList.add(type);
+    }
+
+    /**
+     * Clear the welcome message
+     */
+    clearWelcomeMessage() {
+        const welcomeMessage = this.messagesContainer.querySelector('.welcome-message');
+        if (welcomeMessage) {
+            welcomeMessage.style.display = 'none';
+        }
+    }
+
+    /**
+     * Send a message to the chat API
+     */
+    async sendMessage() {
+        const message = this.messageInput.value.trim();
+        if (!message || this.isLoading) return;
+
+        // Add user message to chat
+        this.addMessage(message, 'user');
+
+        // Clear input and reset
+        this.messageInput.value = '';
+        this.updateCharCount();
+        this.autoResizeTextarea();
+        this.updateSendButton();
+
+        // Send the message to the API
+        await this.sendMessageToAPI(message);
+    }
+
+    /**
+     * Send a message to the chat API with enhanced error handling
+     */
+    async sendMessageToAPI(message) {
+        if (this.isLoading) return;
+
+        // Show loading state
+        this.setLoading(true);
+
+        try {
+            const requestData = {
+                message: message,
+                conversation_id: this.conversationId,
+                include_sources: this.includeSources.checked,
+                include_debug: false // Set to true for debugging
+            };
+
+            // Set timeout for the request (30 seconds)
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), 30000);
+
+            const response = await fetch('/chat', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(requestData),
+                signal: controller.signal
+            });
+
+            clearTimeout(timeoutId);
+
+            const data = await response.json();
+
+            if (response.ok && data.status === 'success') {
+                // Reset auto retry count on success
+                this.autoRetryCount = 0;
+
+                this.addMessage(data.answer || data.response, 'assistant', {
+                    sources: data.sources,
+                    citations: data.citations,
+                    confidence: data.confidence,
+                    processing_time: data.processing_time_ms,
+                    timestamp: new Date().toISOString()
+                });
+            } else {
+                // Handle API error
+                const errorInfo = {
+                    status: response.status,
+                    message: data.message || 'Unknown error'
+                };
+
+                let errorMessage = 'An error occurred while processing your request.';
+                let canRetry = true;
+
+                // Customize message based on status code
+                if (response.status === 400) {
+                    errorMessage = 'Invalid request. Please modify your query and try again.';
+                    canRetry = false;
+                } else if (response.status === 401 || response.status === 403) {
+                    errorMessage = 'You are not authorized to perform this action.';
+                    canRetry = false;
+                } else if (response.status === 404) {
+                    errorMessage = 'The requested resource could not be found.';
+                } else if (response.status === 429) {
+                    errorMessage = 'You\'ve sent too many requests. Please wait a moment and try again.';
+                    canRetry = true;
+                } else if (response.status >= 500) {
+                    errorMessage = 'The server encountered an error. We\'ll automatically retry shortly.';
+                    canRetry = true;
+                }
+
+                if (data.message) {
+                    errorMessage += ` Details: ${data.message}`;
+                }
+
+                this.addErrorMessage(errorMessage, errorInfo, canRetry);
+            }
+
+        } catch (error) {
+            console.error('Chat request failed:', error);
+
+            const errorInfo = {
+                code: error.name,
+                message: error.message
+            };
+
+            let errorMessage = 'Failed to connect to the server.';
+
+            if (error.name === 'AbortError') {
+                errorMessage = 'The request took too long and was cancelled. The server might be experiencing high load.';
+            } else if (error.name === 'TypeError' && error.message.includes('NetworkError')) {
+                errorMessage = 'Network error. Please check your internet connection and try again.';
+            } else if (error.name === 'SyntaxError') {
+                errorMessage = 'Received an invalid response from the server.';
+            }
+
+            this.addErrorMessage(errorMessage, errorInfo, true);
+        } finally {
+            this.setLoading(false);
+            this.focusInput();
+        }
+    }
+
+    /**
+     * Set loading state
+     */
+    setLoading(loading) {
+        this.isLoading = loading;
+
+        if (loading) {
+            this.loadingOverlay.classList.remove('hidden');
+            this.updateStatus('Processing...', 'loading');
+        } else {
+            this.loadingOverlay.classList.add('hidden');
+            this.updateStatus('Ready', 'ready');
+        }
+
+        this.updateSendButton();
+    }
+
+    /**
+     * Add a message to the chat interface
+     */
+    addMessage(text, sender, metadata = {}, save = true) {
+        const messageId = 'msg_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+        const timestamp = metadata.timestamp || new Date().toISOString();
+
+        // Create message element
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message message-${sender}`;
+        messageDiv.dataset.messageId = messageId;
+
+        // Add header with timestamp
+        const messageHeader = document.createElement('div');
+        messageHeader.className = 'message-header';
+
+        const senderLabel = document.createElement('span');
+        senderLabel.className = 'sender-label';
+        senderLabel.textContent = sender === 'user' ? 'You' : 'PolicyWise';
+
+        const timestampSpan = document.createElement('span');
+        timestampSpan.className = 'message-timestamp';
+        timestampSpan.setAttribute('aria-label', `Sent ${this.formatDateTime(timestamp)}`);
+        timestampSpan.textContent = this.formatDateTime(timestamp);
+
+        messageHeader.appendChild(senderLabel);
+        messageHeader.appendChild(timestampSpan);
+        messageDiv.appendChild(messageHeader);
+
+        const contentDiv = document.createElement('div');
+        contentDiv.className = 'message-content';
+
+        const textDiv = document.createElement('div');
+        textDiv.className = 'message-text';
+        textDiv.textContent = text;
+
+        contentDiv.appendChild(textDiv);
+
+        // Add sources and citations for assistant messages
+        if (sender === 'assistant' && metadata.sources && this.includeSources.checked) {
+            this.addSourcesToMessage(contentDiv, metadata);
+        }
+
+        // Add confidence score for assistant messages
+        if (sender === 'assistant' && metadata.confidence !== undefined) {
+            this.addConfidenceScore(contentDiv, metadata.confidence);
+        }
+
+        // Add feedback controls for assistant messages
+        if (sender === 'assistant' && save) {
+            this.addFeedbackControls(contentDiv, messageId);
+        }
+
+        messageDiv.appendChild(contentDiv);
+        this.messagesContainer.appendChild(messageDiv);
+
+        // Store message in memory
+        if (save) {
+            this.messages.push({
+                id: messageId,
+                sender,
+                content: text,
+                timestamp,
+                metadata: {...metadata}
+            });
+
+            // Save to localStorage
+            this.saveCurrentConversation();
+        }
+
+        // Scroll to bottom
+        this.scrollToBottom();
+    }
+
+    /**
+     * Add feedback controls to assistant messages
+     */
+    addFeedbackControls(contentDiv, messageId) {
+        const feedbackDiv = document.createElement('div');
+        feedbackDiv.className = 'message-feedback';
+
+        const helpfulBtn = document.createElement('button');
+        helpfulBtn.className = 'feedback-btn';
+        helpfulBtn.title = 'Helpful';
+        helpfulBtn.innerHTML = `
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
+            </svg>
+            <span>Helpful</span>
+        `;
+
+        const unhelpfulBtn = document.createElement('button');
+        unhelpfulBtn.className = 'feedback-btn';
+        unhelpfulBtn.title = 'Not helpful';
+        unhelpfulBtn.innerHTML = `
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path>
+            </svg>
+            <span>Not helpful</span>
+        `;
+
+        // Add event listeners
+        helpfulBtn.addEventListener('click', () => {
+            this.submitFeedback(messageId, true);
+            feedbackDiv.innerHTML = '<div class="feedback-thanks">Thanks for your feedback!</div>';
+        });
+
+        unhelpfulBtn.addEventListener('click', () => {
+            this.submitFeedback(messageId, false);
+
+            // Replace with detailed feedback form
+            feedbackDiv.innerHTML = `
+                <div class="feedback-form">
+                    <p>What was the issue with this response?</p>
+                    <select id="feedback-reason-${messageId}" class="feedback-select">
+                        <option value="inaccurate">Information is inaccurate</option>
+                        <option value="incomplete">Information is incomplete</option>
+                        <option value="irrelevant">Response is irrelevant</option>
+                        <option value="sources">Sources are missing or incorrect</option>
+                        <option value="other">Other issue</option>
+                    </select>
+                    <textarea id="feedback-detail-${messageId}" class="feedback-textarea"
+                        placeholder="Optional: Provide more details about the issue"></textarea>
+                    <div class="feedback-actions">
+                        <button class="primary-button submit-feedback-btn">Submit</button>
+                    </div>
+                </div>
+            `;
+
+            // Add event listener to the new submit button
+            const submitBtn = feedbackDiv.querySelector('.submit-feedback-btn');
+            submitBtn.addEventListener('click', () => {
+                const reason = document.getElementById(`feedback-reason-${messageId}`).value;
+                const detail = document.getElementById(`feedback-detail-${messageId}`).value;
+
+                this.submitDetailedFeedback(messageId, reason, detail);
+                feedbackDiv.innerHTML = '<div class="feedback-thanks">Thanks for your detailed feedback!</div>';
+            });
+        });
+
+        feedbackDiv.appendChild(helpfulBtn);
+        feedbackDiv.appendChild(unhelpfulBtn);
+
+        contentDiv.appendChild(feedbackDiv);
+    }
+
+    /**
+     * Add sources and citations to a message
+     */
+    addSourcesToMessage(contentDiv, metadata) {
+        if (!metadata.sources || metadata.sources.length === 0) return;
+
+        const sourcesDiv = document.createElement('div');
+        sourcesDiv.className = 'message-sources';
+        sourcesDiv.setAttribute('aria-label', 'Source documents');
+
+        const headerDiv = document.createElement('div');
+        headerDiv.className = 'sources-header';
+        headerDiv.textContent = 'Sources:';
+        sourcesDiv.appendChild(headerDiv);
+
+        metadata.sources.forEach(source => {
+            const citationDiv = document.createElement('div');
+            citationDiv.className = 'source-citation';
+
+            const iconSvg = document.createElement('svg');
+            iconSvg.className = 'source-icon';
+            iconSvg.innerHTML = '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14,2 14,8 20,8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10,9 9,9 8,9"></polyline>';
+            iconSvg.setAttribute('width', '16');
+            iconSvg.setAttribute('height', '16');
+            iconSvg.setAttribute('viewBox', '0 0 24 24');
+            iconSvg.setAttribute('fill', 'none');
+            iconSvg.setAttribute('stroke', 'currentColor');
+            iconSvg.setAttribute('stroke-width', '2');
+            iconSvg.setAttribute('aria-hidden', 'true');
+
+            const textSpan = document.createElement('span');
+            textSpan.textContent = source.document || source.title || source.chunk_id || 'Unknown source';
+
+            // Make the source citation clickable to view the full document
+            if (source.id) {
+                citationDiv.classList.add('clickable');
+                citationDiv.setAttribute('role', 'button');
+                citationDiv.setAttribute('tabindex', '0');
+                citationDiv.setAttribute('aria-label', `View source: ${source.document || source.title || 'Source Document'}`);
+                citationDiv.title = 'Click to view full source document';
+                citationDiv.dataset.sourceId = source.id;
+
+                // Add click event
+                citationDiv.addEventListener('click', () => {
+                    this.showSourceDocument(source.id, source.document || source.title || 'Source Document');
+                });
+
+                // Add keyboard support
+                citationDiv.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.showSourceDocument(source.id, source.document || source.title || 'Source Document');
+                    }
+                });
+            }
+
+            citationDiv.appendChild(iconSvg);
+            citationDiv.appendChild(textSpan);
+            sourcesDiv.appendChild(citationDiv);
+        });
+
+        contentDiv.appendChild(sourcesDiv);
+    }
+
+    /**
+     * Show the full source document in a side panel
+     */
+    async showSourceDocument(sourceId, title) {
+        // Get source panel elements
+        let sourcePanel = document.getElementById('sourcePanel');
+        if (!sourcePanel) {
+            this.initializeSourcePanel();
+            sourcePanel = document.getElementById('sourcePanel');
+            if (!sourcePanel) {
+                console.error('Failed to create source panel');
+                return;
+            }
+        }
+
+        const sourceContent = document.getElementById('sourceContent');
+        const closeBtn = document.getElementById('closeSourcePanel');
+
+        // Store last focused element for accessibility
+        this.lastFocusedElement = document.activeElement;
+
+        // Clear existing content
+        sourceContent.innerHTML = '<div class="loading-spinner" role="status" aria-label="Loading source document"></div><p>Loading source document...</p>';
+
+        // Show the panel
+        sourcePanel.classList.add('show');
+        sourcePanel.setAttribute('aria-hidden', 'false');
+        document.body.classList.add('source-panel-open');
+
+        // Set up close button
+        if (closeBtn) {
+            closeBtn.addEventListener('click', () => {
+                this.closeSourcePanel();
+            }, { once: true });
+
+            // Focus the close button for keyboard accessibility
+            setTimeout(() => closeBtn.focus(), 100);
+        }
+
+        try {
+            // Set timeout for the request (15 seconds)
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), 15000);
+
+            // Fetch source document content
+            const response = await fetch(`/chat/source/${sourceId}`, {
+                signal: controller.signal
+            });
+
+            clearTimeout(timeoutId);
+            const data = await response.json();
+
+            if (response.ok && data.status === 'success') {
+                // Create content elements
+                const documentTitle = data.metadata?.filename || data.metadata?.title || title;
+                const contentHTML = `
+                    <h3 id="sourceTitle">${documentTitle}</h3>
+                    <div class="metadata" aria-label="Document metadata">
+                        ${data.metadata?.last_updated ?
+                            `<div class="metadata-item"><span>Last Updated:</span> ${data.metadata.last_updated}</div>` : ''}
+                        ${data.metadata?.author ?
+                            `<div class="metadata-item"><span>Author:</span> ${data.metadata.author}</div>` : ''}
+                        ${data.metadata?.department ?
+                            `<div class="metadata-item"><span>Department:</span> ${data.metadata.department}</div>` : ''}
+                    </div>
+                    <div class="document-content" tabindex="0">
+                        ${this.formatDocumentContent(data.content)}
+                    </div>
+                `;
+
+                sourceContent.innerHTML = contentHTML;
+
+                // Update ARIA labels
+                sourcePanel.setAttribute('aria-label', `Source document: ${documentTitle}`);
+
+                // Make content keyboard navigable
+                const docContent = sourceContent.querySelector('.document-content');
+                if (docContent) {
+                    docContent.addEventListener('keydown', (e) => {
+                        const scrollAmount = 100;
+                        if (e.key === 'ArrowDown') {
+                            e.preventDefault();
+                            docContent.scrollTop += scrollAmount;
+                        } else if (e.key === 'ArrowUp') {
+                            e.preventDefault();
+                            docContent.scrollTop -= scrollAmount;
+                        }
+                    });
+                }
+            } else {
+                // Show error with retry button
+                this.renderSourceError(data.message || 'Failed to load document', sourceId, title, sourceContent);
+            }
+        } catch (error) {
+            console.error('Failed to fetch source document:', error);
+
+            let errorMessage = 'Failed to load the source document.';
+            if (error.name === 'AbortError') {
+                errorMessage = 'The request took too long and was cancelled.';
+            } else if (error.name === 'TypeError' && error.message.includes('NetworkError')) {
+                errorMessage = 'Network error. Please check your internet connection.';
+            }
+
+            this.renderSourceError(`${errorMessage} Please try again later.`, sourceId, title, sourceContent);
+        }
+    }
+
+    /**
+     * Escape HTML characters to prevent XSS
+     */
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    /**
+     * Render error message with retry functionality for source documents
+     */
+    renderSourceError(message, sourceId, title, sourceContent) {
+        const errorHtml = `
+            <div class="error-message" role="alert">
+                <strong>Error loading source document</strong>
+                <p>${this.escapeHtml(message)}</p>
+                <button class="retry-button" id="retrySourceLoad" aria-label="Retry loading the source document">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                        <polyline points="23 4 23 10 17 10"></polyline>
+                        <polyline points="1 20 1 14 7 14"></polyline>
+                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                    </svg>
+                    Retry
+                </button>
+            </div>
+        `;
+
+        sourceContent.innerHTML = errorHtml;
+
+        // Add retry functionality
+        document.getElementById('retrySourceLoad')?.addEventListener('click', () => {
+            this.showSourceDocument(sourceId, title);
+        });
+    }
+
+    /**
+     * Format document content for display
+     */
+    formatDocumentContent(content) {
+        if (!content) return '<p>No content available</p>';
+
+        // First escape HTML to prevent XSS
+        const escapedContent = this.escapeHtml(content);
+
+        // Check if content is markdown and convert if needed
+        if (content.includes('#') || content.includes('*')) {
+            // Simple markdown formatting on escaped content
+            return escapedContent
+                .replace(/^# (.+)$/gm, '<h1>$1</h1>')
+                .replace(/^## (.+)$/gm, '<h2>$1</h2>')
+                .replace(/^### (.+)$/gm, '<h3>$1</h3>')
+                .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+                .replace(/\*(.+?)\*/g, '<em>$1</em>')
+                .replace(/\n\n/g, '</p><p>')
+                .replace(/\n/g, '<br>')
+                .replace(/^(.+)$/gm, function(match) {
+                    if (!match.startsWith('<')) return '<p>' + match + '</p>';
+                    return match;
+                });
+        }
+
+        // If not markdown, wrap escaped content in paragraphs
+        return '<p>' + escapedContent + '</p>';
+    }
+
+    /**
+     * Add confidence score visualization
+     */
+    addConfidenceScore(contentDiv, confidence) {
+        const confidenceDiv = document.createElement('div');
+        confidenceDiv.className = 'confidence-score';
+
+        const labelSpan = document.createElement('span');
+        labelSpan.textContent = `Confidence: ${Math.round(confidence * 100)}%`;
+
+        const barDiv = document.createElement('div');
+        barDiv.className = 'confidence-bar';
+
+        const fillDiv = document.createElement('div');
+        fillDiv.className = 'confidence-fill';
+        fillDiv.style.width = `${confidence * 100}%`;
+
+        barDiv.appendChild(fillDiv);
+        confidenceDiv.appendChild(labelSpan);
+        confidenceDiv.appendChild(barDiv);
+        contentDiv.appendChild(confidenceDiv);
+    }
+
+    /**
+     * Add an error message to the chat with retry options
+     */
+    addErrorMessage(errorText, error = null, canRetry = true) {
+        const messageId = 'msg_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+        const timestamp = new Date().toISOString();
+
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'message message-assistant';
+        messageDiv.dataset.messageId = messageId;
+
+        // Add header with timestamp
+        const messageHeader = document.createElement('div');
+        messageHeader.className = 'message-header';
+
+        const senderLabel = document.createElement('span');
+        senderLabel.className = 'sender-label';
+        senderLabel.textContent = 'System';
+
+        const timestampSpan = document.createElement('span');
+        timestampSpan.className = 'message-timestamp';
+        timestampSpan.textContent = this.formatDateTime(timestamp);
+
+        messageHeader.appendChild(senderLabel);
+        messageHeader.appendChild(timestampSpan);
+        messageDiv.appendChild(messageHeader);
+
+        const contentDiv = document.createElement('div');
+        contentDiv.className = 'message-content error-message';
+
+        const strongElement = document.createElement('strong');
+        strongElement.textContent = 'Error:';
+        strongElement.setAttribute('aria-hidden', 'true');
+
+        const textSpan = document.createElement('span');
+        textSpan.textContent = ` ${errorText}`;
+        textSpan.setAttribute('role', 'alert');
+
+        contentDiv.appendChild(strongElement);
+        contentDiv.appendChild(textSpan);
+
+        // Add retry button if applicable
+        if (canRetry) {
+            const retryButton = document.createElement('button');
+            retryButton.className = 'retry-button';
+            retryButton.innerHTML = `
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                    <polyline points="23 4 23 10 17 10"></polyline>
+                    <polyline points="1 20 1 14 7 14"></polyline>
+                    <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+                </svg>
+                Retry
+            `;
+            retryButton.setAttribute('aria-label', 'Retry sending your last message');
+
+            retryButton.addEventListener('click', () => {
+                // Remove the error message
+                messageDiv.remove();
+
+                // Retry the last user message
+                this.retryLastMessage();
+            });
+
+            contentDiv.appendChild(retryButton);
+        }
+
+        // Add more detailed error info if available
+        if (error && (error.status || error.code)) {
+            const detailsDiv = document.createElement('div');
+            detailsDiv.className = 'error-details';
+
+            let detailsText = '';
+            if (error.status) detailsText += `Status code: ${error.status}. `;
+            if (error.code) detailsText += `Error code: ${error.code}. `;
+            if (error.message) detailsText += error.message;
+
+            detailsDiv.textContent = detailsText;
+            contentDiv.appendChild(detailsDiv);
+        }
+
+        messageDiv.appendChild(contentDiv);
+        this.messagesContainer.appendChild(messageDiv);
+
+        // Store in messages array
+        this.messages.push({
+            id: messageId,
+            sender: 'system',
+            content: errorText,
+            timestamp,
+            metadata: { error: true }
+        });
+
+        // Save to localStorage
+        this.saveCurrentConversation();
+
+        this.scrollToBottom();
+
+        // Auto retry for server errors (5xx) if retry count is under the limit
+        if (error && error.status && error.status >= 500 && this.autoRetryCount < this.maxAutoRetries) {
+            this.autoRetryCount++;
+
+            // Show auto-retry status
+            const retryStatus = document.createElement('div');
+            retryStatus.className = 'auto-retry-status';
+            retryStatus.innerHTML = `
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <polyline points="12 6 12 12 16 14"></polyline>
+                </svg>
+                Retrying in <span class="retry-countdown">5</span> seconds...
+            `;
+            contentDiv.appendChild(retryStatus);
+
+            // Countdown timer
+            const countdownEl = retryStatus.querySelector('.retry-countdown');
+            let countdown = 5;
+
+            const countdownInterval = setInterval(() => {
+                countdown--;
+                if (countdownEl) countdownEl.textContent = countdown.toString();
+
+                if (countdown <= 0) {
+                    clearInterval(countdownInterval);
+                    messageDiv.remove();
+                    this.retryLastMessage();
+                }
+            }, 1000);
+        }
+    }
+
+    /**
+     * Retry sending the last user message
+     */
+    retryLastMessage() {
+        // Find the last user message
+        const lastUserMessage = [...this.messages].reverse().find(msg => msg.sender === 'user');
+
+        if (lastUserMessage) {
+            // Reset auto retry count if this is a manual retry
+            this.autoRetryCount = 0;
+
+            // Resend the message
+            this.sendMessageToAPI(lastUserMessage.content);
+        } else {
+            this.addErrorMessage("Couldn't find a previous message to retry.", null, false);
+        }
+    }
+
+    /**
+     * Submit simple feedback (helpful/not helpful)
+     */
+    submitFeedback(messageId, isHelpful) {
+        const message = this.messages.find(msg => msg.id === messageId);
+        if (!message) return;
+
+        // Update message with feedback
+        message.feedback = {
+            rating: isHelpful ? 5 : 1,
+            timestamp: new Date().toISOString()
+        };
+
+        // Save to localStorage
+        this.saveCurrentConversation();
+
+        // Send to server if available
+        this.sendFeedbackToServer(messageId, isHelpful);
+    }
+
+    /**
+     * Submit detailed feedback
+     */
+    submitDetailedFeedback(messageId, reason, detail) {
+        const message = this.messages.find(msg => msg.id === messageId);
+        if (!message) return;
+
+        // Update message with detailed feedback
+        message.feedback = {
+            rating: 1, // Not helpful
+            reason: reason,
+            detail: detail,
+            timestamp: new Date().toISOString()
+        };
+
+        // Save to localStorage
+        this.saveCurrentConversation();
+
+        // Send to server if available
+        this.sendDetailedFeedbackToServer(messageId, reason, detail);
+    }
+
+    /**
+     * Send feedback to server
+     */
+    sendFeedbackToServer(messageId, isHelpful) {
+        try {
+            const feedback = {
+                feedback_id: 'feedback_' + Date.now(),
+                conversation_id: this.conversationId,
+                message_id: messageId,
+                feedback_type: 'response_rating',
+                rating: isHelpful ? 5 : 1,
+                timestamp: new Date().toISOString()
+            };
+
+            fetch('/chat/feedback', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(feedback)
+            })
+            .then(response => {
+                if (!response.ok) {
+                    console.warn('Failed to send feedback to server:', response.status);
+                }
+            })
+            .catch(error => {
+                console.warn('Error sending feedback to server:', error);
+            });
+        } catch (error) {
+            console.warn('Error preparing feedback:', error);
+        }
+    }
+
+    /**
+     * Send detailed feedback to server
+     */
+    sendDetailedFeedbackToServer(messageId, reason, detail) {
+        try {
+            const feedback = {
+                feedback_id: 'feedback_' + Date.now(),
+                conversation_id: this.conversationId,
+                message_id: messageId,
+                feedback_type: 'detailed',
+                rating: 1,
+                reason: reason,
+                comment: detail,
+                timestamp: new Date().toISOString()
+            };
+
+            fetch('/chat/feedback', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(feedback)
+            })
+            .then(response => {
+                if (!response.ok) {
+                    console.warn('Failed to send detailed feedback to server:', response.status);
+                }
+            })
+            .catch(error => {
+                console.warn('Error sending detailed feedback to server:', error);
+            });
+        } catch (error) {
+            console.warn('Error preparing detailed feedback:', error);
+        }
+    }
+
+    /**
+     * Scroll to the bottom of the messages container
+     */
+    scrollToBottom() {
+        this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
+    }
+
+    /**
+     * Format ISO datetime string to a user-friendly format
+     */
+    formatDateTime(isoString) {
+        try {
+            const date = new Date(isoString);
+
+            // For messages from today, just show the time
+            const today = new Date();
+            if (date.toDateString() === today.toDateString()) {
+                return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+            }
+
+            // For messages from this year, show month, day and time
+            if (date.getFullYear() === today.getFullYear()) {
+                return date.toLocaleDateString([], { month: 'short', day: 'numeric' }) +
+                       ' at ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+            }
+
+            // For older messages, show full date
+            return date.toLocaleDateString([], { year: 'numeric', month: 'short', day: 'numeric' }) +
+                   ' at ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        } catch (e) {
+            console.warn('Invalid timestamp format:', isoString);
+            return 'Unknown time';
+        }
+    }
+}
+
+// CSS for additional status states
+const additionalStyles = `
+.status-dot.loading {
+    background: #f59e0b;
+}
+
+.status-dot.warning {
+    background: #f59e0b;
+}
+
+.status-dot.error {
+    background: #ef4444;
+}
+
+.status-dot.ready {
+    background: #10b981;
+}
+
+/* Source document panel styles */
+.source-document-panel {
+    position: fixed;
+    top: 0;
+    right: -500px;
+    width: 450px;
+    max-width: 90vw;
+    height: 100vh;
+    background: white;
+    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+    z-index: 101;
+    transition: right 0.3s ease;
+    display: flex;
+    flex-direction: column;
+}
+
+.source-document-panel.show {
+    right: 0;
+}
+
+.source-document-content {
+    padding: 1rem;
+    overflow-y: auto;
+}
+
+.source-document-content h1 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: #1e293b;
+}
+
+.source-document-content h2 {
+    font-size: 1.25rem;
+    margin: 1.5rem 0 0.75rem 0;
+    color: #1e293b;
+}
+
+.source-document-content h3 {
+    font-size: 1.125rem;
+    margin: 1.25rem 0 0.5rem 0;
+    color: #1e293b;
+}
+
+.source-document-content p {
+    margin: 0.75rem 0;
+    color: #4b5563;
+    line-height: 1.6;
+}
+
+.source-document-content .metadata {
+    margin: 1rem 0;
+    padding: 0.75rem;
+    background: #f1f5f9;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    color: #64748b;
+}
+
+.source-document-content .metadata-item {
+    margin: 0.25rem 0;
+}
+
+.source-document-content .metadata-item span {
+    font-weight: 600;
+}
+
+.source-citation.clickable {
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.source-citation.clickable:hover {
+    background: #e2e8f0;
+}
+`;
+
+// Add additional styles to document
+const styleSheet = document.createElement('style');
+styleSheet.textContent = additionalStyles;
+document.head.appendChild(styleSheet);
+
+// Initialize the chat interface when the DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new ChatInterface();
+});
+
+// Service worker registration for potential offline functionality
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+        // Optional: register a service worker for offline functionality
+        // navigator.serviceWorker.register('/sw.js').catch(console.warn);
+    });
+}

templates/chat.html

@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PolicyWise - Chat</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='chat.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='chat-enhanced.css') }}">
+</head>
+<body>
+    <div class="chat-container" role="application" aria-label="PolicyWise Chat Interface">
+        <header class="chat-header">
+            <div class="header-content">
+                <h1>PolicyWise</h1>
+                <p class="subtitle">Your Intelligent Policy Assistant</p>
+            </div>
+            <div class="header-controls">
+                <button id="conversationHistoryBtn" class="icon-button" title="Conversation History"
+                        aria-label="Open conversation history" aria-haspopup="dialog">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
+                    </svg>
+                </button>
+                <div class="status-indicator" id="statusIndicator" role="status" aria-live="polite">
+                    <span class="status-dot" aria-hidden="true"></span>
+                    <span class="status-text">Ready</span>
+                </div>
+            </div>
+        </header>
+
+        <main class="chat-main">
+            <div class="messages-container" id="messagesContainer" role="log" aria-label="Chat messages" aria-live="polite">
+                <div class="welcome-message">
+                    <div class="welcome-icon" aria-hidden="true">🤖</div>
+                    <h2>Welcome to PolicyWise!</h2>
+                    <p>I'm here to help you find information about company policies and procedures. Ask me anything about:</p>
+                    <ul class="policy-topics" aria-label="Suggested policy topics">
+                        <li>Remote work policies</li>
+                        <li>PTO and leave policies</li>
+                        <li>Expense reimbursement</li>
+                        <li>Information security</li>
+                        <li>Employee benefits</li>
+                        <li>And much more...</li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="input-container">
+                <form id="chatForm" class="chat-form" aria-label="Chat message form">
+                    <div class="input-wrapper">
+                        <textarea
+                            id="messageInput"
+                            placeholder="Ask about company policies..."
+                            rows="1"
+                            maxlength="1000"
+                            required
+                            aria-label="Message input"
+                            aria-describedby="charCount"></textarea>
+                        <button type="submit" id="sendButton" class="send-button" disabled aria-label="Send message">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                                <line x1="22" y1="2" x2="11" y2="13"></line>
+                                <polygon points="22,2 15,22 11,13 2,9"></polygon>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="input-options">
+                        <label class="checkbox-label" for="includeSources">
+                            <input type="checkbox" id="includeSources" checked>
+                            <span class="checkmark" aria-hidden="true"></span>
+                            Include source citations
+                        </label>
+                        <span class="char-counter" role="status">
+                            <span id="charCount">0</span>/1000
+                        </span>
+                    </div>
+                </form>
+            </div>
+        </main>
+
+        <footer class="chat-footer">
+            <p>&copy; 2025 MSSE AI Engineering Project | <a href="/health">System Status</a></p>
+        </footer>
+    </div>
+
+    <!-- Loading overlay -->
+    <div id="loadingOverlay" class="loading-overlay hidden">
+        <div class="loading-spinner"></div>
+        <p>Analyzing policies...</p>
+    </div>
+
+    <!-- Conversation history panel -->
+    <div id="conversationHistoryPanel" class="side-panel" role="dialog" aria-labelledby="conversationHistoryHeader" aria-hidden="true">
+        <div class="panel-header">
+            <h3 id="conversationHistoryHeader">Conversation History</h3>
+            <button id="closeConversationsBtn" class="icon-button" aria-label="Close conversation history">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <div class="panel-body">
+            <div class="panel-actions">
+                <button id="newConversationBtn" class="primary-button" aria-label="Start new conversation">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                        <line x1="12" y1="5" x2="12" y2="19"></line>
+                        <line x1="5" y1="12" x2="19" y2="12"></line>
+                    </svg>
+                    New Conversation
+                </button>
+                <div class="export-import-buttons">
+                    <button id="exportConversationsBtn" class="file-upload-label" aria-label="Export conversations">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                            <polyline points="7 10 12 15 17 10"></polyline>
+                            <line x1="12" y1="15" x2="12" y2="3"></line>
+                        </svg>
+                        Export
+                    </button>
+                    <label for="importConversations" class="file-upload-label" aria-label="Import conversations">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                            <polyline points="17 8 12 3 7 8"></polyline>
+                            <line x1="12" y1="3" x2="12" y2="15"></line>
+                        </svg>
+                        Import
+                    </label>
+                    <input type="file" id="importConversations" class="file-upload" accept=".json" aria-label="Import conversations from file">
+                </div>
+            </div>
+            <div class="search-conversations">
+                <input type="text" id="searchConversations" class="search-input" placeholder="Search conversations..." aria-label="Search conversations">
+            </div>
+            <div class="conversation-list" id="conversationList" role="list" aria-label="Your conversations">
+                <!-- Conversations will be added here dynamically -->
+                <div class="empty-state">
+                    <p>No conversation history found.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Swipe indicator for mobile -->
+    <div class="swipe-indicator" id="swipeIndicator" aria-hidden="true">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 18l6-6-6-6"></path>
+        </svg>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/chat.js') }}"></script>
+</body>
+</html>

tests/conftest.py

@@ -10,3 +10,59 @@ if PROJECT_ROOT not in sys.path:
 
 if SRC_PATH not in sys.path:
     sys.path.insert(0, SRC_PATH)
+
+# Set environment variables to disable ChromaDB telemetry
+os.environ["ANONYMIZED_TELEMETRY"] = "False"
+os.environ["CHROMA_TELEMETRY"] = "False"
+
+from unittest.mock import MagicMock, patch  # noqa: E402
+
+import pytest  # noqa: E402
+
+from app import app as flask_app  # noqa: E402
+
+
+@pytest.fixture(scope="session", autouse=True)
+def disable_chromadb_telemetry():
+    """Disable ChromaDB telemetry to avoid errors in tests"""
+    patches = []
+    try:
+        # Patch multiple telemetry-related functions
+        patches.extend(
+            [
+                patch("chromadb.telemetry.product.posthog.capture", return_value=None),
+                patch(
+                    "chromadb.telemetry.product.posthog.Posthog.capture",
+                    return_value=None,
+                ),
+                patch(
+                    "chromadb.telemetry.product.posthog.Posthog",
+                    return_value=MagicMock(),
+                ),
+                patch("chromadb.configure", return_value=None),
+            ]
+        )
+        for p in patches:
+            p.start()
+        yield
+    except (ImportError, AttributeError):
+        # If modules don't exist, continue without patching
+        yield
+    finally:
+        for p in patches:
+            try:
+                p.stop()
+            except Exception:
+                pass
+
+
+@pytest.fixture
+def app():
+    """Flask application fixture."""
+    yield flask_app
+
+
+@pytest.fixture
+def client(app):
+    """Flask test client fixture."""
+    return app.test_client()

tests/test_enhanced_chat_interface.py

@@ -0,0 +1,150 @@
+import json
+import os
+from typing import Any, Dict
+from unittest.mock import MagicMock, patch
+
+from flask.testing import FlaskClient
+
+
+@patch.dict(os.environ, {"OPENROUTER_API_KEY": "test_key"})
+@patch("src.rag.rag_pipeline.RAGPipeline")
+@patch("src.rag.response_formatter.ResponseFormatter")
+@patch("src.llm.llm_service.LLMService")
+@patch("src.search.search_service.SearchService")
+@patch("src.vector_store.vector_db.VectorDatabase")
+@patch("src.embedding.embedding_service.EmbeddingService")
+def test_chat_endpoint_structure(
+    mock_embedding,
+    mock_vector,
+    mock_search,
+    mock_llm,
+    mock_formatter,
+    mock_rag,
+    client: FlaskClient,
+):
+    """Test that the chat endpoint returns properly formatted responses with
+    citations."""
+    # Mock the RAG pipeline response
+    mock_response = {
+        "answer": (
+            "Based on the remote work policy, employees can work "
+            "remotely up to 3 days per week."
+        ),
+        "confidence": 0.85,
+        "sources": [{"chunk_id": "123", "content": "Remote work policy content..."}],
+        "citations": ["remote_work_policy.md"],
+        "processing_time_ms": 1500,
+    }
+
+    # Setup mock instances
+    mock_rag_instance = MagicMock()
+    mock_rag_instance.generate_answer.return_value = mock_response
+    mock_rag.return_value = mock_rag_instance
+
+    mock_formatter_instance = MagicMock()
+    mock_formatter_instance.format_api_response.return_value = {
+        "status": "success",
+        "answer": mock_response["answer"],
+        "confidence": mock_response["confidence"],
+        "sources": mock_response["sources"],
+        "citations": mock_response["citations"],
+    }
+    mock_formatter.return_value = mock_formatter_instance
+
+    # Mock LLMService.from_environment to return a mock instance
+    mock_llm_instance = MagicMock()
+    mock_llm.from_environment.return_value = mock_llm_instance
+
+    response = client.post(
+        "/chat",
+        json={"message": "What is our remote work policy?", "include_sources": True},
+    )
+
+    assert response.status_code == 200
+    data = json.loads(response.data)
+
+    assert "status" in data
+    assert data["status"] == "success"
+    assert "response" in data or "answer" in data
+
+    # Check for sources when include_sources is True
+    assert "sources" in data
+    assert isinstance(data["sources"], list)
+
+
+def test_conversation_endpoints(client: FlaskClient):
+    """Test the conversation management endpoints."""
+    # Test getting conversation list
+    response = client.get("/conversations")
+    assert response.status_code == 200
+    data = json.loads(response.data)
+
+    assert "status" in data
+    assert data["status"] == "success"
+    assert "conversations" in data
+    assert isinstance(data["conversations"], list)
+
+    # Test getting a specific conversation
+    if len(data["conversations"]) > 0:
+        conv_id = data["conversations"][0]["id"]
+        response = client.get(f"/conversations/{conv_id}")
+        assert response.status_code == 200
+        conv_data = json.loads(response.data)
+
+        assert "status" in conv_data
+        assert conv_data["status"] == "success"
+        assert "conversation_id" in conv_data
+        assert "messages" in conv_data
+        assert isinstance(conv_data["messages"], list)
+
+
+def test_feedback_endpoint(client: FlaskClient):
+    """Test the feedback submission endpoint."""
+    feedback_data: Dict[str, Any] = {
+        "conversation_id": "test_conv_id",
+        "message_id": "test_msg_id",
+        "feedback_type": "response_rating",
+        "rating": 5,
+    }
+
+    response = client.post("/chat/feedback", json=feedback_data)
+
+    assert response.status_code == 200
+    data = json.loads(response.data)
+
+    assert "status" in data
+    assert data["status"] == "success"
+    assert "feedback" in data
+
+
+def test_source_document_endpoint(client: FlaskClient):
+    """Test retrieving source documents."""
+    # Test a valid source ID
+    response = client.get("/chat/source/remote_work")
+    assert response.status_code == 200
+    data = json.loads(response.data)
+
+    assert "status" in data
+    assert data["status"] == "success"
+    assert "content" in data
+    assert "metadata" in data
+
+    # Test an invalid source ID
+    response = client.get("/chat/source/nonexistent_source")
+    assert response.status_code == 404
+    data = json.loads(response.data)
+
+    assert "status" in data
+    assert data["status"] == "error"
+
+
+def test_query_suggestions_endpoint(client: FlaskClient):
+    """Test query suggestions endpoint."""
+    response = client.get("/chat/suggestions")
+    assert response.status_code == 200
+    data = json.loads(response.data)
+
+    assert "status" in data
+    assert data["status"] == "success"
+    assert "suggestions" in data
+    assert isinstance(data["suggestions"], list)