# Setup

.env

@@ -0,0 +1 @@
+GROQ_API_KEY = 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

.gitignore

@@ -0,0 +1,2 @@
+venv
+*__pycache__

Dockerfile

@@ -0,0 +1,43 @@
+# Dockerfile for Hugging Face Spaces
+# Uses Python 3.9 with minimal dependencies
+
+FROM python:3.9-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    g++ \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY app.py .
+COPY templates/ ./templates/
+COPY data/ ./data/
+
+# Create necessary directories
+RUN mkdir -p static vector_store
+
+# Set environment variables for Hugging Face
+ENV HF_SPACE=True
+ENV PORT=7860
+ENV PYTHONUNBUFFERED=1
+ENV PYTHONPATH=/app
+
+# Expose port
+EXPOSE 7860
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD python -c "import urllib.request; urllib.request.urlopen('http://localhost:7860/api/health')"
+
+# Run the application
+CMD ["python", "app.py"]

README.md

@@ -1,8 +1,8 @@
 ---
 title: Itsm Knowledge Chatbot
-emoji: 🌍
-colorFrom: purple
-colorTo: green
+emoji: 👁
+colorFrom: indigo
+colorTo: red
 sdk: docker
 pinned: false
 ---

app.py

@@ -0,0 +1,617 @@
+"""
+ITSM Knowledge Base Chatbot - Hugging Face Deployment
+Optimized for Spaces with minimal dependencies
+"""
+
+import os
+import sys
+import json
+import faiss
+import pickle
+import numpy as np
+import pandas as pd
+import uuid
+from datetime import datetime
+from typing import List, Dict, Any, Optional
+from dataclasses import dataclass, asdict
+import threading
+
+from flask import Flask, request, jsonify, render_template, session
+from sentence_transformers import SentenceTransformer
+from dotenv import load_dotenv
+
+# Try to import Groq (optional)
+try:
+    from groq import Groq
+    GROQ_AVAILABLE = True
+except ImportError:
+    GROQ_AVAILABLE = False
+    print("⚠️  Groq not installed. Using simple responses.")
+
+# ==================== CONFIGURATION ====================
+load_dotenv()
+
+class Config:
+    EMBEDDING_MODEL = "all-MiniLM-L6-v2"
+    CSV_PATH = "data/synthetic_knowledge_items.csv"
+    VECTOR_STORE_DIR = "vector_store"
+    INDEX_PATH = f"{VECTOR_STORE_DIR}/kb_index.faiss"
+    METADATA_PATH = f"{VECTOR_STORE_DIR}/kb_metadata.pkl"
+    GROQ_MODEL = "llama3-70b-8192"
+    HISTORY_FILE = "chat_data.json"
+    SECRET_KEY = os.getenv("SECRET_KEY", "dev-key-for-huggingface")
+    HF_SPACE = os.getenv("HF_SPACE", "False") == "True"
+
+# ==================== DATACLASSES ====================
+@dataclass
+class KnowledgeItem:
+    id: str
+    topic: str
+    text: str
+    alt_text: str = ""
+    bad_text: str = ""
+    category: str = "General"
+
+@dataclass
+class SupportTicket:
+    id: str
+    description: str
+    status: str
+    priority: str
+    category: str
+    created_at: str
+    created_by: str
+    estimated_resolution: str = ""
+
+# ==================== INDEX BUILDER ====================
+class KnowledgeIndexBuilder:
+    def __init__(self):
+        # Use smaller model for Hugging Face
+        self.model = SentenceTransformer(Config.EMBEDDING_MODEL)
+        self.index = None
+        self.knowledge_items = []
+        
+    def build_index(self):
+        """Build FAISS index from CSV file"""
+        print(f"📚 Building index from: {Config.CSV_PATH}")
+        
+        if not os.path.exists(Config.CSV_PATH):
+            raise FileNotFoundError(f"CSV file not found: {Config.CSV_PATH}")
+        
+        # Load and process CSV
+        df = pd.read_csv(Config.CSV_PATH)
+        print(f"📊 Loaded {len(df)} rows")
+        
+        processed_items = []
+        texts_for_embedding = []
+        
+        # Process in smaller batches for Hugging Face
+        for idx, row in df.iterrows():
+            if idx >= 100 and Config.HF_SPACE:  # Limit for Hugging Face
+                break
+                
+            # Clean data
+            topic = str(row.get('ki_topic', '')).strip()
+            text = str(row.get('ki_text', '')).strip()
+            alt_text = str(row.get('alt_ki_text', '')).strip()
+            bad_text = str(row.get('bad_ki_text', '')).strip()
+            
+            if not topic and not text:
+                continue
+            
+            # Create knowledge item
+            item_id = f"kb_{idx:04d}"
+            category = self._extract_category(topic)
+            
+            item = KnowledgeItem(
+                id=item_id,
+                topic=topic,
+                text=text,
+                alt_text=alt_text,
+                bad_text=bad_text,
+                category=category
+            )
+            
+            # For embedding
+            embedding_text = f"{topic}. {text}"
+            processed_items.append(item)
+            texts_for_embedding.append(embedding_text)
+        
+        print(f"✅ Processed {len(processed_items)} unique items")
+        
+        if not processed_items:
+            raise ValueError("No valid knowledge items found")
+        
+        # Generate embeddings
+        print("🔢 Generating embeddings...")
+        embeddings = self.model.encode(
+            texts_for_embedding,
+            convert_to_numpy=True,
+            normalize_embeddings=True,
+            show_progress_bar=True
+        )
+        
+        # Create FAISS index
+        dim = embeddings.shape[1]
+        self.index = faiss.IndexFlatIP(dim)
+        self.index.add(embeddings.astype('float32'))
+        
+        self.knowledge_items = processed_items
+        
+        # Save to disk
+        self._save_to_disk()
+        
+        # Print statistics
+        self._print_statistics()
+        
+        return self
+    
+    def _extract_category(self, topic: str) -> str:
+        """Extract category from topic"""
+        categories = {
+            'password': 'Authentication', 'login': 'Authentication',
+            'vpn': 'Network', 'wifi': 'Network',
+            'email': 'Communication', 'outlook': 'Communication',
+            'software': 'Software', 'install': 'Software',
+            'printer': 'Hardware', 'hardware': 'Hardware'
+        }
+        
+        topic_lower = topic.lower()
+        for keyword, category in categories.items():
+            if keyword in topic_lower:
+                return category
+        return 'General'
+    
+    def _save_to_disk(self):
+        """Save index and metadata to disk"""
+        os.makedirs(Config.VECTOR_STORE_DIR, exist_ok=True)
+        
+        # Save FAISS index
+        faiss.write_index(self.index, Config.INDEX_PATH)
+        print(f"💾 Saved FAISS index to: {Config.INDEX_PATH}")
+        
+        # Save metadata
+        metadata = []
+        for item in self.knowledge_items:
+            metadata.append(asdict(item))
+        
+        with open(Config.METADATA_PATH, 'wb') as f:
+            pickle.dump(metadata, f)
+        print(f"💾 Saved metadata to: {Config.METADATA_PATH}")
+        
+        # Save statistics
+        stats = {
+            'total_items': len(self.knowledge_items),
+            'categories': {},
+            'created_at': datetime.now().isoformat(),
+            'deployment': 'huggingface' if Config.HF_SPACE else 'local'
+        }
+        
+        for item in self.knowledge_items:
+            stats['categories'][item.category] = stats['categories'].get(item.category, 0) + 1
+        
+        stats_path = f"{Config.VECTOR_STORE_DIR}/stats.json"
+        with open(stats_path, 'w') as f:
+            json.dump(stats, f, indent=2)
+        print(f"📊 Saved statistics to: {stats_path}")
+    
+    def _print_statistics(self):
+        """Print index statistics"""
+        print(f"\n📊 Index Statistics:")
+        print(f"   Total knowledge items: {len(self.knowledge_items)}")
+        print(f"   Embedding dimension: {self.index.d}")
+        print(f"   Index size: {self.index.ntotal} vectors")
+        print(f"   Deployment: {'Hugging Face' if Config.HF_SPACE else 'Local'}")
+
+# ==================== KNOWLEDGE RETRIEVER ====================
+class KnowledgeRetriever:
+    def __init__(self):
+        """Load existing index or build if not exists"""
+        self.model = SentenceTransformer(Config.EMBEDDING_MODEL)
+        self.index = None
+        self.knowledge_data = []
+        self._load_index()
+    
+    def _load_index(self):
+        """Load FAISS index and metadata"""
+        if not os.path.exists(Config.INDEX_PATH):
+            print("⚠️  Index not found. Building now...")
+            builder = KnowledgeIndexBuilder()
+            builder.build_index()
+        
+        # Load index
+        self.index = faiss.read_index(Config.INDEX_PATH)
+        
+        # Load metadata
+        with open(Config.METADATA_PATH, 'rb') as f:
+            self.knowledge_data = pickle.load(f)
+        
+        print(f"✅ Loaded {len(self.knowledge_data)} knowledge items")
+    
+    def retrieve(self, query: str, top_k: int = 3, similarity_threshold: float = 0.3) -> List[Dict]:
+        """Retrieve relevant knowledge items (optimized for Hugging Face)"""
+        # Encode query
+        query_embedding = self.model.encode([query], convert_to_numpy=True)
+        query_embedding = query_embedding.astype('float32')
+        
+        # Normalize for cosine similarity
+        faiss.normalize_L2(query_embedding)
+        
+        # Search
+        k = min(top_k * 2, len(self.knowledge_data))
+        scores, indices = self.index.search(query_embedding, k)
+        
+        # Process results
+        results = []
+        for score, idx in zip(scores[0], indices[0]):
+            if idx < 0 or idx >= len(self.knowledge_data):
+                continue
+            
+            similarity = float(score)
+            if similarity >= similarity_threshold:
+                item = self.knowledge_data[idx].copy()
+                item['similarity'] = similarity
+                results.append(item)
+        
+        # Sort by similarity
+        results.sort(key=lambda x: x['similarity'], reverse=True)
+        return results[:top_k]
+
+# ==================== CHAT ENGINE ====================
+class ChatEngine:
+    def __init__(self):
+        self.retriever = KnowledgeRetriever()
+        self.groq_client = None
+        self.active_tickets = {}
+        self._init_groq()
+    
+    def _init_groq(self):
+        """Initialize Groq client if available"""
+        if GROQ_AVAILABLE:
+            api_key = os.getenv("GROQ_API_KEY")
+            if api_key:
+                try:
+                    self.groq_client = Groq(api_key=api_key)
+                    print(f"✅ Groq integration enabled (Model: {Config.GROQ_MODEL})")
+                except Exception as e:
+                    print(f"⚠️  Groq initialization failed: {e}")
+                    self.groq_client = None
+            else:
+                print("⚠️  GROQ_API_KEY not found. Using simple responses.")
+        else:
+            print("ℹ️  Using simple response mode")
+    
+    def generate_response(self, query: str, context: str) -> str:
+        """Generate response using Groq or fallback"""
+        if self.groq_client:
+            try:
+                return self._generate_groq_response(query, context)
+            except Exception as e:
+                print(f"⚠️  Groq error: {e}")
+        
+        # Fallback response
+        return self._generate_fallback_response(query, context)
+    
+    def _generate_groq_response(self, query: str, context: str) -> str:
+        """Generate response using Groq API"""
+        system_prompt = """You are a helpful IT support assistant. 
+        Provide clear, step-by-step instructions based on the company knowledge base.
+        Be concise but thorough. Use bullet points when helpful."""
+        
+        user_prompt = f"""User Query: {query}
+
+Relevant Knowledge Base Information:
+{context}
+
+Based on the above knowledge base information, provide a helpful response."""
+        
+        try:
+            response = self.groq_client.chat.completions.create(
+                model=Config.GROQ_MODEL,
+                messages=[
+                    {"role": "system", "content": system_prompt},
+                    {"role": "user", "content": user_prompt}
+                ],
+                temperature=0.3,
+                max_tokens=300,  # Reduced for Hugging Face
+                timeout=30  # Add timeout for Hugging Face
+            )
+            
+            return response.choices[0].message.content.strip()
+        except Exception as e:
+            print(f"Groq API call failed: {e}")
+            return self._generate_fallback_response(query, context)
+    
+    def _generate_fallback_response(self, query: str, context: str) -> str:
+        """Generate simple response without AI"""
+        if "No relevant knowledge found" in context:
+            return "I couldn't find specific information about that in our knowledge base. Could you please provide more details?"
+        
+        # Try to extract useful information
+        lines = context.split('\n')
+        for i, line in enumerate(lines):
+            if "text:" in line.lower() and i + 1 < len(lines):
+                return f"Based on our knowledge base:\n\n{lines[i+1].strip()}"
+        
+        return "I found some relevant information. Please check with IT support for detailed assistance."
+    
+    def process_query(self, query: str, user_id: str = "anonymous") -> Dict[str, Any]:
+        """Process user query and generate response"""
+        # Handle greetings
+        query_lower = query.lower()
+        if any(word in query_lower for word in ["hello", "hi", "hey", "greetings"]):
+            return {
+                "answer": "Hello! I'm your ITSM assistant. I can help you with IT issues, knowledge base searches, and ticket creation. How can I assist you today?",
+                "timestamp": datetime.now().isoformat(),
+                "sources": [],
+                "intent": "greeting"
+            }
+        
+        # Retrieve relevant knowledge
+        results = self.retriever.retrieve(query, top_k=2)  # Reduced for Hugging Face
+        
+        # Prepare context
+        if results:
+            context_parts = []
+            for i, item in enumerate(results, 1):
+                context = f"[{i}] {item['topic']}\n"
+                context += f"Category: {item['category']}\n"
+                context += f"Instruction: {item['text']}\n"
+                context_parts.append(context)
+            context = "\n".join(context_parts)
+        else:
+            context = "No relevant knowledge found."
+        
+        # Generate response
+        answer = self.generate_response(query, context)
+        
+        # Prepare response
+        response = {
+            "answer": answer,
+            "timestamp": datetime.now().isoformat(),
+            "sources": [],
+            "context_used": bool(results)
+        }
+        
+        # Add sources if available
+        if results:
+            response["sources"] = [{
+                "topic": r["topic"],
+                "category": r["category"],
+                "confidence": f"{r.get('similarity', 0):.0%}"
+            } for r in results]
+        
+        return response
+
+# ==================== CHAT HISTORY MANAGER ====================
+class ChatHistoryManager:
+    def __init__(self):
+        self.history_file = Config.HISTORY_FILE
+        self.lock = threading.RLock()
+        self._ensure_file()
+    
+    def _ensure_file(self):
+        """Ensure history file exists"""
+        if not os.path.exists(self.history_file):
+            with open(self.history_file, 'w') as f:
+                json.dump({"sessions": {}}, f)
+    
+    def add_message(self, session_id: str, role: str, content: str):
+        """Add message to chat history (simplified for Hugging Face)"""
+        with self.lock:
+            try:
+                # Load existing data
+                with open(self.history_file, 'r') as f:
+                    data = json.load(f)
+                
+                # Ensure session exists
+                if 'sessions' not in data:
+                    data['sessions'] = {}
+                
+                if session_id not in data['sessions']:
+                    data['sessions'][session_id] = {
+                        "created_at": datetime.now().isoformat(),
+                        "messages": []
+                    }
+                
+                # Add message (limit to last 10 messages per session for Hugging Face)
+                message = {
+                    "role": role,
+                    "content": content,
+                    "timestamp": datetime.now().isoformat()
+                }
+                
+                data['sessions'][session_id]['messages'].append(message)
+                
+                # Keep only last 10 messages
+                if len(data['sessions'][session_id]['messages']) > 10:
+                    data['sessions'][session_id]['messages'] = data['sessions'][session_id]['messages'][-10:]
+                
+                data['sessions'][session_id]['last_activity'] = datetime.now().isoformat()
+                
+                # Save back
+                with open(self.history_file, 'w') as f:
+                    json.dump(data, f)
+            except Exception as e:
+                print(f"Error saving chat history: {e}")
+    
+    def get_messages(self, session_id: str) -> List[Dict]:
+        """Get messages from a session"""
+        with self.lock:
+            try:
+                with open(self.history_file, 'r') as f:
+                    data = json.load(f)
+                
+                if 'sessions' not in data or session_id not in data['sessions']:
+                    return []
+                
+                return data['sessions'][session_id].get('messages', [])
+            except Exception as e:
+                print(f"Error loading chat history: {e}")
+                return []
+
+# ==================== FLASK APPLICATION ====================
+app = Flask(__name__, 
+            static_folder='static',
+            template_folder='templates')
+app.secret_key = Config.SECRET_KEY
+
+# Initialize components
+chat_engine = ChatEngine()
+history_manager = ChatHistoryManager()
+
+# ==================== ROUTES ====================
+@app.route('/')
+def home():
+    """Serve the main chat interface"""
+    # Generate session ID if not exists
+    if 'session_id' not in session:
+        session['session_id'] = str(uuid.uuid4())[:8]
+    
+    return render_template('index.html', 
+                         session_id=session['session_id'],
+                         hf_space=Config.HF_SPACE)
+
+@app.route('/api/chat', methods=['POST'])
+def chat():
+    """Handle chat messages"""
+    try:
+        data = request.json
+        user_message = data.get('message', '').strip()
+        session_id = data.get('session_id') or session.get('session_id')
+        
+        if not user_message:
+            return jsonify({'error': 'Message is required'}), 400
+        
+        if not session_id:
+            session_id = str(uuid.uuid4())[:8]
+            session['session_id'] = session_id
+        
+        # Save user message
+        history_manager.add_message(session_id, 'user', user_message)
+        
+        # Process through chat engine
+        response = chat_engine.process_query(user_message, session_id)
+        
+        # Save bot response
+        history_manager.add_message(session_id, 'assistant', response['answer'])
+        
+        # Return response
+        return jsonify({
+            'success': True,
+            'session_id': session_id,
+            'response': response['answer'],
+            'sources': response.get('sources', []),
+            'timestamp': response['timestamp']
+        })
+        
+    except Exception as e:
+        print(f"Error in chat endpoint: {e}")
+        return jsonify({
+            'success': False,
+            'error': 'Internal server error',
+            'response': 'Sorry, I encountered an error. Please try again.'
+        }), 500
+
+@app.route('/api/history/<session_id>', methods=['GET'])
+def get_history(session_id):
+    """Get chat history for a session"""
+    try:
+        messages = history_manager.get_messages(session_id)
+        return jsonify({
+            'success': True,
+            'session_id': session_id,
+            'messages': messages,
+            'count': len(messages)
+        })
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+@app.route('/api/health', methods=['GET'])
+def health_check():
+    """Health check endpoint"""
+    return jsonify({
+        'status': 'healthy',
+        'timestamp': datetime.now().isoformat(),
+        'deployment': 'huggingface' if Config.HF_SPACE else 'local',
+        'knowledge_items': len(chat_engine.retriever.knowledge_data),
+        'groq_available': GROQ_AVAILABLE and bool(os.getenv("GROQ_API_KEY")),
+        'version': '1.0.0'
+    })
+
+@app.route('/api/clear', methods=['POST'])
+def clear_session():
+    """Clear current session"""
+    try:
+        session_id = request.json.get('session_id') or session.get('session_id')
+        if 'session_id' in session:
+            session.pop('session_id')
+        
+        return jsonify({
+            'success': True,
+            'message': 'Session cleared'
+        })
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+# ==================== UTILITY FUNCTIONS ====================
+def ensure_directories():
+    """Ensure required directories exist"""
+    os.makedirs('data', exist_ok=True)
+    os.makedirs('vector_store', exist_ok=True)
+    os.makedirs('static', exist_ok=True)
+    os.makedirs('templates', exist_ok=True)
+    
+    # Check for CSV file
+    if not os.path.exists(Config.CSV_PATH):
+        print(f"⚠️  Warning: CSV file not found at {Config.CSV_PATH}")
+        # Create a minimal sample CSV for Hugging Face demo
+        sample_data = pd.DataFrame({
+            'ki_topic': [
+                'Password Reset Guide',
+                'VPN Connection Issues',
+                'Email Setup Instructions'
+            ],
+            'ki_text': [
+                'To reset your password, visit the company portal and click "Forgot Password".',
+                'For VPN issues, check your internet connection and restart the VPN client.',
+                'Configure email by entering server settings: mail.company.com, port 993.'
+            ],
+            'alt_ki_text': ['', '', ''],
+            'bad_ki_text': ['', '', '']
+        })
+        sample_data.to_csv(Config.CSV_PATH, index=False)
+        print(f"📁 Created sample CSV at {Config.CSV_PATH}")
+    
+    return True
+
+# ==================== MAIN ENTRY ====================
+if __name__ == '__main__':
+    # Ensure directories exist
+    ensure_directories()
+    
+    # Check if index needs to be built
+    if not os.path.exists(Config.INDEX_PATH):
+        print("🔨 Building knowledge index...")
+        try:
+            builder = KnowledgeIndexBuilder()
+            builder.build_index()
+            print("✅ Index built successfully!")
+        except Exception as e:
+            print(f"❌ Error building index: {e}")
+    
+    # Print startup info
+    print("\n" + "="*60)
+    print("🚀 ITSM Knowledge Base Chatbot")
+    print("="*60)
+    print(f"📚 Knowledge Base: {len(chat_engine.retriever.knowledge_data)} items")
+    print(f"🤖 Chat Engine: Ready")
+    print(f"🌐 Deployment: {'Hugging Face Space' if Config.HF_SPACE else 'Local'}")
+    print(f"🔗 URL: http://localhost:5000")
+    print("="*60 + "\n")
+    
+    # Run the application
+    port = int(os.getenv("PORT", 5000))
+    debug = not Config.HF_SPACE  # Disable debug in production/HF
+    
+    app.run(debug=debug, host='0.0.0.0', port=port)

requirements.txt

@@ -0,0 +1,11 @@
+pandas
+selenium
+groq
+langchain
+langchain-community
+langchain_groq
+faiss-cpu
+sentence-transformers
+langchain_huggingface
+flask
+flask[async]

templates/index.html

@@ -0,0 +1,1160 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ITSM Knowledge Base Chatbot 🤖</title>
+    
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
+    
+    <!-- Custom CSS -->
+    <style>
+        :root {
+            --primary-color: #4361ee;
+            --secondary-color: #3a0ca3;
+            --success-color: #4cc9f0;
+            --light-color: #f8f9fa;
+            --dark-color: #212529;
+        }
+        
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+        
+        .chat-container {
+            max-width: 1400px;
+            margin: 20px auto;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            overflow: hidden;
+            height: 95vh;
+        }
+        
+        /* Header Styles */
+        .chat-header {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            padding: 1.5rem;
+        }
+        
+        .chat-header h1 {
+            font-weight: 600;
+            margin: 0;
+        }
+        
+        .status-indicator {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            background: rgba(255,255,255,0.2);
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 0.9rem;
+        }
+        
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: #4caf50;
+            animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+        
+        /* Main Layout */
+        .chat-body {
+            display: flex;
+            height: calc(100% - 120px);
+        }
+        
+        .sidebar {
+            width: 300px;
+            background: #f8f9fa;
+            border-right: 1px solid #dee2e6;
+            padding: 1.5rem;
+            overflow-y: auto;
+        }
+        
+        .chat-area {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            padding: 0;
+        }
+        
+        /* Messages Area */
+        .messages-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 1.5rem;
+            background: #f8f9fa;
+        }
+        
+        .message {
+            margin-bottom: 1.5rem;
+            animation: slideIn 0.3s ease-out;
+        }
+        
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .message.user {
+            margin-left: auto;
+            max-width: 70%;
+        }
+        
+        .message.assistant, .message.system {
+            margin-right: auto;
+            max-width: 70%;
+        }
+        
+        .message-bubble {
+            padding: 1rem 1.25rem;
+            border-radius: 18px;
+            position: relative;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        
+        .message.user .message-bubble {
+            background: var(--primary-color);
+            color: white;
+            border-bottom-right-radius: 4px;
+        }
+        
+        .message.assistant .message-bubble {
+            background: white;
+            color: var(--dark-color);
+            border: 1px solid #dee2e6;
+            border-bottom-left-radius: 4px;
+        }
+        
+        .message.system .message-bubble {
+            background: #e8f4fd;
+            color: var(--primary-color);
+            border-left: 4px solid var(--success-color);
+        }
+        
+        .message-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 6px;
+            font-size: 0.9rem;
+        }
+        
+        .message.user .message-header {
+            justify-content: flex-end;
+        }
+        
+        .message-content {
+            line-height: 1.6;
+        }
+        
+        .message-content ul, .message-content ol {
+            padding-left: 1.5rem;
+            margin-bottom: 0.5rem;
+        }
+        
+        /* Sources */
+        .sources-container {
+            margin-top: 1rem;
+            padding: 1rem;
+            background: rgba(0,0,0,0.03);
+            border-radius: 10px;
+            border-left: 4px solid var(--success-color);
+        }
+        
+        .source-item {
+            padding: 8px 12px;
+            background: white;
+            border-radius: 8px;
+            margin-bottom: 8px;
+            font-size: 0.9rem;
+            border: 1px solid #dee2e6;
+        }
+        
+        .confidence-badge {
+            display: inline-block;
+            background: var(--success-color);
+            color: white;
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 0.8rem;
+            margin-right: 8px;
+        }
+        
+        /* Input Area */
+        .input-area {
+            padding: 1.5rem;
+            background: white;
+            border-top: 1px solid #dee2e6;
+        }
+        
+        /* Quick Actions */
+        .quick-actions {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+            margin-bottom: 1rem;
+        }
+        
+        .quick-action {
+            padding: 8px 16px;
+            background: #f8f9fa;
+            border: 1px solid #dee2e6;
+            border-radius: 20px;
+            font-size: 0.9rem;
+            transition: all 0.3s;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        
+        .quick-action:hover {
+            background: var(--primary-color);
+            color: white;
+            border-color: var(--primary-color);
+            transform: translateY(-2px);
+        }
+        
+        /* Ticket Items */
+        .ticket-item {
+            padding: 12px;
+            background: white;
+            border: 1px solid #dee2e6;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        
+        .ticket-item:hover {
+            border-color: var(--primary-color);
+            transform: translateX(5px);
+        }
+        
+        .ticket-id {
+            font-weight: 600;
+            color: var(--primary-color);
+            font-size: 0.9rem;
+        }
+        
+        .priority-badge {
+            padding: 3px 8px;
+            border-radius: 12px;
+            font-size: 0.8rem;
+            font-weight: 600;
+        }
+        
+        .priority-urgent { background: #ffebee; color: #c62828; }
+        .priority-high { background: #fff3e0; color: #ef6c00; }
+        .priority-medium { background: #e8f5e9; color: #2e7d32; }
+        .priority-low { background: #f5f5f5; color: #616161; }
+        
+        /* Loading Spinner */
+        .loading-spinner {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid var(--primary-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        /* Notifications */
+        .notification {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 10000;
+            animation: slideInRight 0.3s ease;
+        }
+        
+        @keyframes slideInRight {
+            from { transform: translateX(100%); }
+            to { transform: translateX(0); }
+        }
+        
+        /* Scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: #c1c1c1;
+            border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: #a1a1a1;
+        }
+        
+        /* Responsive */
+        @media (max-width: 992px) {
+            .chat-container {
+                margin: 0;
+                height: 100vh;
+                border-radius: 0;
+            }
+            
+            .sidebar {
+                display: none;
+            }
+            
+            .message.user,
+            .message.assistant,
+            .message.system {
+                max-width: 85%;
+            }
+        }
+        
+        @media (max-width: 768px) {
+            .message.user,
+            .message.assistant,
+            .message.system {
+                max-width: 90%;
+            }
+            
+            .quick-actions {
+                justify-content: center;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="chat-container">
+        <!-- Header -->
+        <div class="chat-header">
+            <div class="d-flex justify-content-between align-items-center">
+                <div>
+                    <h1><i class="bi bi-robot"></i> ITSM Knowledge Bot</h1>
+                    <div class="subtitle">Powered by AI & Semantic Search</div>
+                </div>
+                <div class="status-indicator">
+                    <div class="status-dot"></div>
+                    <span id="status-text">System Ready</span>
+                </div>
+            </div>
+            <div class="mt-2 d-flex justify-content-between align-items-center">
+                <div>
+                    <small>Session: <span id="session-id" class="badge bg-light text-dark">{{ session_id }}</span></small>
+                    <small class="ms-3">User: <span class="badge bg-info">Anonymous</span></small>
+                </div>
+                <div>
+                    <button id="new-session" class="btn btn-sm btn-outline-light">
+                        <i class="bi bi-plus-circle"></i> New Session
+                    </button>
+                    <button id="export-chat" class="btn btn-sm btn-outline-light ms-2">
+                        <i class="bi bi-download"></i> Export
+                    </button>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Main Body -->
+        <div class="chat-body">
+            <!-- Sidebar -->
+            <div class="sidebar">
+                <!-- Quick Actions -->
+                <div class="mb-4">
+                    <h6 class="text-muted mb-3"><i class="bi bi-lightning"></i> Quick Actions</h6>
+                    <div class="quick-actions">
+                        <button class="quick-action" data-query="How to reset password?">
+                            <i class="bi bi-key"></i> Password Reset
+                        </button>
+                        <button class="quick-action" data-query="VPN not working">
+                            <i class="bi bi-wifi"></i> VPN Issues
+                        </button>
+                        <button class="quick-action" data-query="Email not syncing">
+                            <i class="bi bi-envelope"></i> Email Problems
+                        </button>
+                        <button class="quick-action" data-query="Install software">
+                            <i class="bi bi-download"></i> Software Install
+                        </button>
+                    </div>
+                    <button id="create-ticket-btn" class="btn btn-primary w-100 mt-2">
+                        <i class="bi bi-ticket"></i> Create Support Ticket
+                    </button>
+                </div>
+                
+                <!-- Chat History -->
+                <div class="mb-4">
+                    <h6 class="text-muted mb-3"><i class="bi bi-clock-history"></i> Recent Messages</h6>
+                    <div id="history-list">
+                        <div class="text-center">
+                            <small class="text-muted">No recent messages</small>
+                        </div>
+                    </div>
+                    <button id="clear-history" class="btn btn-sm btn-outline-danger w-100 mt-2">
+                        <i class="bi bi-trash"></i> Clear History
+                    </button>
+                </div>
+                
+                <!-- System Info -->
+                <div>
+                    <h6 class="text-muted mb-3"><i class="bi bi-info-circle"></i> System Info</h6>
+                    <div class="system-info">
+                        <div class="d-flex justify-content-between mb-2">
+                            <small>Knowledge Items:</small>
+                            <small id="kb-count" class="text-primary">Loading...</small>
+                        </div>
+                        <div class="d-flex justify-content-between mb-2">
+                            <small>AI Model:</small>
+                            <small id="ai-model" class="text-success">Groq Llama 3</small>
+                        </div>
+                        <div class="d-flex justify-content-between">
+                            <small>Status:</small>
+                            <small id="system-status" class="text-success">● Operational</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Chat Area -->
+            <div class="chat-area">
+                <!-- Messages Container -->
+                <div class="messages-container" id="messages-container">
+                    <!-- Welcome Message -->
+                    <div class="message system">
+                        <div class="message-header">
+                            <i class="bi bi-robot"></i>
+                            <span class="fw-semibold">ITSM Bot</span>
+                            <small class="text-muted">Just now</small>
+                        </div>
+                        <div class="message-bubble">
+                            <div class="message-content">
+                                <p>👋 <strong>Welcome to ITSM Knowledge Base Chatbot!</strong></p>
+                                <p>I'm your AI-powered IT support assistant. I can help you with:</p>
+                                <ul>
+                                    <li>🔍 Knowledge base searches</li>
+                                    <li>🔧 IT troubleshooting guides</li>
+                                    <li>🎫 Support ticket creation</li>
+                                    <li>🔒 Password reset procedures</li>
+                                    <li>🛠️ Software installation help</li>
+                                    <li>🌐 Network connectivity issues</li>
+                                </ul>
+                                <p class="mb-0">Try asking me questions like:</p>
+                                <ul class="mb-0">
+                                    <li>"How do I reset my password?"</li>
+                                    <li>"My email is not working"</li>
+                                    <li>"How to connect to VPN?"</li>
+                                    <li>"Create a ticket for printer issues"</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Input Area -->
+                <div class="input-area">
+                    <div class="quick-actions mb-3">
+                        <button class="quick-action" data-query="My email is not working">
+                            <i class="bi bi-envelope-exclamation"></i> Email Issue
+                        </button>
+                        <button class="quick-action" data-query="How to connect to VPN?">
+                            <i class="bi bi-shield-lock"></i> VPN Setup
+                        </button>
+                        <button class="quick-action" data-query="Printer not printing">
+                            <i class="bi bi-printer"></i> Printer Help
+                        </button>
+                        <button class="quick-action" data-query="Software installation guide">
+                            <i class="bi bi-gear"></i> Installation
+                        </button>
+                    </div>
+                    
+                    <div class="input-group">
+                        <textarea 
+                            id="message-input" 
+                            class="form-control" 
+                            placeholder="Type your IT question here... (Press Enter to send, Shift+Enter for new line)"
+                            rows="3"
+                            style="resize: none;"
+                        ></textarea>
+                        <button id="send-button" class="btn btn-primary">
+                            <i class="bi bi-send"></i> Send
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Ticket Modal -->
+    <div class="modal fade" id="ticketModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header bg-primary text-white">
+                    <h5 class="modal-title"><i class="bi bi-ticket"></i> Create Support Ticket</h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="mb-3">
+                        <label class="form-label fw-semibold">Issue Description *</label>
+                        <textarea 
+                            id="ticket-description" 
+                            class="form-control" 
+                            placeholder="Describe your issue in detail. Include error messages, when it started, and what you've tried..."
+                            rows="5"
+                        ></textarea>
+                        <div class="form-text">Be as detailed as possible for faster resolution.</div>
+                    </div>
+                    
+                    <div class="row">
+                        <div class="col-md-6 mb-3">
+                            <label class="form-label fw-semibold">Priority</label>
+                            <select id="ticket-priority" class="form-select">
+                                <option value="Low">Low - General inquiry</option>
+                                <option value="Medium" selected>Medium - Minor issue</option>
+                                <option value="High">High - Affecting work</option>
+                                <option value="Urgent">Urgent - Critical system down</option>
+                            </select>
+                        </div>
+                        <div class="col-md-6 mb-3">
+                            <label class="form-label fw-semibold">Category</label>
+                            <select id="ticket-category" class="form-select">
+                                <option value="General">General IT Support</option>
+                                <option value="Authentication">Password & Login</option>
+                                <option value="Network">VPN & Network</option>
+                                <option value="Software">Software & Applications</option>
+                                <option value="Hardware">Hardware & Devices</option>
+                                <option value="Communication">Email & Communication</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="alert alert-info">
+                        <i class="bi bi-info-circle"></i> 
+                        <strong>Ticket Information:</strong> 
+                        Once created, you'll receive a ticket ID and estimated resolution time.
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button id="submit-ticket" class="btn btn-primary">
+                        <i class="bi bi-check-circle"></i> Create Ticket
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Bootstrap JS Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Custom JavaScript -->
+    <script>
+        class ITSMChatbot {
+            constructor() {
+                this.sessionId = '{{ session_id }}';
+                this.currentTicketId = null;
+                this.setupEventListeners();
+                this.loadSystemInfo();
+                this.loadHistory();
+            }
+            
+            setupEventListeners() {
+                // Send message
+                const sendButton = document.getElementById('send-button');
+                const messageInput = document.getElementById('message-input');
+                
+                sendButton.addEventListener('click', () => this.sendMessage());
+                messageInput.addEventListener('keypress', (e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        this.sendMessage();
+                    }
+                });
+                
+                // Auto-resize textarea
+                messageInput.addEventListener('input', function() {
+                    this.style.height = 'auto';
+                    this.style.height = Math.min(this.scrollHeight, 150) + 'px';
+                });
+                
+                // Quick actions
+                document.querySelectorAll('.quick-action[data-query]').forEach(btn => {
+                    btn.addEventListener('click', (e) => {
+                        const query = e.currentTarget.getAttribute('data-query');
+                        messageInput.value = query;
+                        messageInput.focus();
+                        // Optionally auto-send
+                        // this.sendMessage();
+                    });
+                });
+                
+                // Create ticket button
+                document.getElementById('create-ticket-btn').addEventListener('click', () => {
+                    this.openTicketModal();
+                });
+                
+                // Ticket modal submit
+                document.getElementById('submit-ticket').addEventListener('click', () => {
+                    this.createTicket();
+                });
+                
+                // Clear history
+                document.getElementById('clear-history').addEventListener('click', () => {
+                    this.clearHistory();
+                });
+                
+                // New session
+                document.getElementById('new-session').addEventListener('click', () => {
+                    this.createNewSession();
+                });
+                
+                // Export chat
+                document.getElementById('export-chat').addEventListener('click', () => {
+                    this.exportChat();
+                });
+            }
+            
+            async sendMessage() {
+                const input = document.getElementById('message-input');
+                const message = input.value.trim();
+                
+                if (!message) return;
+                
+                // Add user message
+                this.addMessage('user', message);
+                
+                // Clear input
+                input.value = '';
+                input.style.height = 'auto';
+                
+                // Show loading
+                const loadingId = this.showLoading();
+                
+                try {
+                    const response = await fetch('/api/chat', {
+                        method: 'POST',
+                        headers: { 
+                            'Content-Type': 'application/json',
+                            'Accept': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            message: message,
+                            session_id: this.sessionId
+                        })
+                    });
+                    
+                    const data = await response.json();
+                    
+                    // Remove loading
+                    this.removeLoading(loadingId);
+                    
+                    if (data.success) {
+                        // Add bot response
+                        this.addMessage('assistant', data.response, data.sources, data.intent);
+                        
+                        // Update history
+                        this.updateHistoryList();
+                        
+                        // Auto-suggest ticket for issue reports
+                        if (data.intent === 'issue_report') {
+                            setTimeout(() => this.showTicketSuggestion(message), 1500);
+                        }
+                        
+                        // Play notification sound
+                        this.playNotification();
+                    } else {
+                        this.showNotification(data.error || 'Error sending message', 'danger');
+                    }
+                } catch (error) {
+                    console.error('Error:', error);
+                    this.removeLoading(loadingId);
+                    this.showNotification('Network error. Please check your connection.', 'danger');
+                }
+            }
+            
+            addMessage(role, content, sources = [], intent = null) {
+                const container = document.getElementById('messages-container');
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `message ${role}`;
+                
+                const time = new Date().toLocaleTimeString([], { 
+                    hour: '2-digit', minute: '2-digit' 
+                });
+                
+                const sender = role === 'user' ? 'You' : 'ITSM Bot';
+                const icon = role === 'user' ? 'bi-person' : 'bi-robot';
+                const color = role === 'user' ? '#4361ee' : '#d81b60';
+                
+                // Format content
+                let formattedContent = this.formatMessage(content);
+                
+                // Add sources if available
+                let sourcesHtml = '';
+                if (sources && sources.length > 0) {
+                    sourcesHtml = `
+                        <div class="sources-container">
+                            <small class="text-muted mb-2 d-block fw-semibold">
+                                <i class="bi bi-book"></i> Knowledge Sources:
+                            </small>
+                            ${sources.map(source => `
+                                <div class="source-item">
+                                    <span class="confidence-badge">${source.confidence}</span>
+                                    <strong>${source.topic}</strong>
+                                    <small class="text-muted d-block">${source.category}</small>
+                                </div>
+                            `).join('')}
+                        </div>
+                    `;
+                }
+                
+                // Add intent badge if available
+                let intentBadge = '';
+                if (intent && intent !== 'knowledge_request') {
+                    const intentLabels = {
+                        'issue_report': 'Issue Report',
+                        'password_reset': 'Password Help',
+                        'software_install': 'Installation Guide',
+                        'greeting': 'Greeting'
+                    };
+                    if (intentLabels[intent]) {
+                        intentBadge = `<span class="badge bg-info float-end">${intentLabels[intent]}</span>`;
+                    }
+                }
+                
+                messageDiv.innerHTML = `
+                    <div class="message-header">
+                        <i class="bi ${icon}" style="color: ${color}"></i>
+                        <span class="fw-semibold">${sender}</span>
+                        ${intentBadge}
+                        <small class="text-muted ms-auto">${time}</small>
+                    </div>
+                    <div class="message-bubble">
+                        <div class="message-content">
+                            ${formattedContent}
+                            ${sourcesHtml}
+                        </div>
+                    </div>
+                `;
+                
+                container.appendChild(messageDiv);
+                container.scrollTop = container.scrollHeight;
+            }
+            
+            formatMessage(content) {
+                // Convert markdown-like formatting
+                return content
+                    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                    .replace(/\*(.*?)\*/g, '<em>$1</em>')
+                    .replace(/`(.*?)`/g, '<code>$1</code>')
+                    .replace(/\n\n/g, '</p><p>')
+                    .replace(/\n/g, '<br>')
+                    .replace(/^\s*[-•*]\s+/gm, '• ') // Convert list items
+                    .replace(/^\s*\d+\.\s+/gm, (match) => `<br>${match}`) // Numbered lists
+                    .replace(/^(Step \d+:|Note:|Tip:|Warning:)/gim, '<strong>$1</strong>');
+            }
+            
+            showLoading() {
+                const container = document.getElementById('messages-container');
+                const loadingDiv = document.createElement('div');
+                loadingDiv.id = 'loading-indicator';
+                loadingDiv.className = 'message assistant';
+                loadingDiv.innerHTML = `
+                    <div class="message-header">
+                        <i class="bi bi-robot" style="color: #d81b60"></i>
+                        <span class="fw-semibold">ITSM Bot</span>
+                        <small class="text-muted">Thinking...</small>
+                    </div>
+                    <div class="message-bubble">
+                        <div class="text-center py-2">
+                            <div class="loading-spinner d-inline-block"></div>
+                            <small class="text-muted d-block mt-2">Searching knowledge base...</small>
+                        </div>
+                    </div>
+                `;
+                container.appendChild(loadingDiv);
+                container.scrollTop = container.scrollHeight;
+                return 'loading-indicator';
+            }
+            
+            removeLoading(id) {
+                const element = document.getElementById(id);
+                if (element) element.remove();
+            }
+            
+            async loadSystemInfo() {
+                try {
+                    const response = await fetch('/api/health');
+                    const data = await response.json();
+                    
+                    if (data.status === 'healthy') {
+                        document.getElementById('kb-count').textContent = data.knowledge_items + ' items';
+                        document.getElementById('system-status').textContent = '● Operational';
+                        document.getElementById('system-status').className = 'text-success';
+                        
+                        if (data.groq_available) {
+                            document.getElementById('ai-model').textContent = 'Groq AI Enabled';
+                        } else {
+                            document.getElementById('ai-model').textContent = 'Simple Mode';
+                            document.getElementById('ai-model').className = 'text-warning';
+                        }
+                    }
+                } catch (error) {
+                    console.error('Error loading system info:', error);
+                }
+            }
+            
+            async loadHistory() {
+                try {
+                    const response = await fetch(`/api/history/${this.sessionId}`);
+                    const data = await response.json();
+                    
+                    if (data.success && data.messages.length > 0) {
+                        this.updateHistoryList();
+                    }
+                } catch (error) {
+                    console.error('Error loading history:', error);
+                }
+            }
+            
+            async updateHistoryList() {
+                try {
+                    const response = await fetch(`/api/history/${this.sessionId}`);
+                    const data = await response.json();
+                    
+                    if (data.success) {
+                        const historyList = document.getElementById('history-list');
+                        const recent = data.messages.slice(-5).reverse();
+                        
+                        if (recent.length === 0) {
+                            historyList.innerHTML = `
+                                <div class="text-center py-3">
+                                    <small class="text-muted">No recent messages</small>
+                                </div>
+                            `;
+                            return;
+                        }
+                        
+                        historyList.innerHTML = recent.map(msg => `
+                            <div class="ticket-item mb-2" onclick="chatbot.loadMessage('${msg.timestamp}')">
+                                <div class="d-flex justify-content-between align-items-center">
+                                    <small class="text-truncate">
+                                        <i class="bi bi-${msg.role === 'user' ? 'person' : 'robot'} me-1"></i>
+                                        ${msg.content.substring(0, 40)}${msg.content.length > 40 ? '...' : ''}
+                                    </small>
+                                    <small class="text-muted">${new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</small>
+                                </div>
+                            </div>
+                        `).join('');
+                    }
+                } catch (error) {
+                    console.error('Error updating history:', error);
+                }
+            }
+            
+            async clearHistory() {
+                if (!confirm('Are you sure you want to clear all chat history? This action cannot be undone.')) {
+                    return;
+                }
+                
+                try {
+                    const response = await fetch(`/api/history/${this.sessionId}`, {
+                        method: 'DELETE'
+                    });
+                    
+                    const data = await response.json();
+                    
+                    if (data.success) {
+                        // Clear messages container
+                        const container = document.getElementById('messages-container');
+                        container.innerHTML = `
+                            <div class="message system">
+                                <div class="message-header">
+                                    <i class="bi bi-robot"></i>
+                                    <span class="fw-semibold">ITSM Bot</span>
+                                    <small class="text-muted">Just now</small>
+                                </div>
+                                <div class="message-bubble">
+                                    <div class="message-content">
+                                        <p>Chat history cleared. How can I help you today?</p>
+                                    </div>
+                                </div>
+                            </div>
+                        `;
+                        
+                        // Update history list
+                        this.updateHistoryList();
+                        
+                        this.showNotification('Chat history cleared successfully', 'success');
+                    } else {
+                        this.showNotification('Failed to clear history', 'danger');
+                    }
+                } catch (error) {
+                    console.error('Error clearing history:', error);
+                    this.showNotification('Error clearing history', 'danger');
+                }
+            }
+            
+            async createTicket() {
+                const description = document.getElementById('ticket-description').value.trim();
+                const priority = document.getElementById('ticket-priority').value;
+                const category = document.getElementById('ticket-category').value;
+                
+                if (!description) {
+                    this.showNotification('Please enter a description for the ticket', 'warning');
+                    document.getElementById('ticket-description').focus();
+                    return;
+                }
+                
+                try {
+                    const response = await fetch('/api/ticket', {
+                        method: 'POST',
+                        headers: { 
+                            'Content-Type': 'application/json',
+                            'Accept': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            description: description,
+                            session_id: this.sessionId,
+                            priority: priority,
+                            category: category
+                        })
+                    });
+                    
+                    const data = await response.json();
+                    
+                    if (data.success) {
+                        // Close modal
+                        const modal = bootstrap.Modal.getInstance(document.getElementById('ticketModal'));
+                        modal.hide();
+                        
+                        // Clear form
+                        document.getElementById('ticket-description').value = '';
+                        document.getElementById('ticket-priority').value = 'Medium';
+                        document.getElementById('ticket-category').value = 'General';
+                        
+                        // Show success message in chat
+                        const ticket = data.ticket;
+                        this.addMessage('system', 
+                            `✅ <strong>Support Ticket Created Successfully!</strong><br><br>
+                            <strong>Ticket ID:</strong> ${ticket.id}<br>
+                            <strong>Priority:</strong> <span class="priority-badge priority-${ticket.priority.toLowerCase()}">${ticket.priority}</span><br>
+                            <strong>Category:</strong> ${ticket.category}<br>
+                            <strong>Status:</strong> ${ticket.status}<br>
+                            <strong>Estimated Resolution:</strong> ${ticket.estimated_resolution}<br><br>
+                            Your ticket has been logged and will be addressed by our IT team.`);
+                        
+                        this.showNotification(`Ticket ${ticket.id} created successfully!`, 'success');
+                        
+                    } else {
+                        this.showNotification(data.error || 'Failed to create ticket', 'danger');
+                    }
+                } catch (error) {
+                    console.error('Error creating ticket:', error);
+                    this.showNotification('Network error creating ticket', 'danger');
+                }
+            }
+            
+            showTicketSuggestion(issue) {
+                const container = document.getElementById('messages-container');
+                const suggestion = document.createElement('div');
+                suggestion.className = 'message system';
+                suggestion.innerHTML = `
+                    <div class="message-header">
+                        <i class="bi bi-lightbulb"></i>
+                        <span class="fw-semibold">Suggestion</span>
+                    </div>
+                    <div class="message-bubble">
+                        <p>It seems like you're reporting an issue. Would you like me to create a support ticket for this?</p>
+                        <div class="mt-2">
+                            <button class="btn btn-sm btn-primary me-2" id="accept-ticket-suggestion">
+                                <i class="bi bi-check-circle"></i> Yes, Create Ticket
+                            </button>
+                            <button class="btn btn-sm btn-outline-secondary" id="decline-ticket-suggestion">
+                                <i class="bi bi-x-circle"></i> No, Thanks
+                            </button>
+                        </div>
+                    </div>
+                `;
+                container.appendChild(suggestion);
+                container.scrollTop = container.scrollHeight;
+                
+                // Add event listeners
+                document.getElementById('accept-ticket-suggestion').addEventListener('click', () => {
+                    document.getElementById('ticket-description').value = issue;
+                    this.openTicketModal();
+                    suggestion.remove();
+                });
+                
+                document.getElementById('decline-ticket-suggestion').addEventListener('click', () => {
+                    suggestion.remove();
+                });
+            }
+            
+            openTicketModal() {
+                const modal = new bootstrap.Modal(document.getElementById('ticketModal'));
+                modal.show();
+                document.getElementById('ticket-description').focus();
+            }
+            
+            async createNewSession() {
+                try {
+                    const response = await fetch('/api/session', {
+                        method: 'POST',
+                        headers: { 
+                            'Content-Type': 'application/json',
+                            'Accept': 'application/json'
+                        },
+                        body: JSON.stringify({ user_id: 'web_user' })
+                    });
+                    
+                    const data = await response.json();
+                    
+                    if (data.success) {
+                        this.sessionId = data.session_id;
+                        document.getElementById('session-id').textContent = this.sessionId;
+                        
+                        // Clear chat
+                        const container = document.getElementById('messages-container');
+                        container.innerHTML = `
+                            <div class="message system">
+                                <div class="message-header">
+                                    <i class="bi bi-robot"></i>
+                                    <span class="fw-semibold">ITSM Bot</span>
+                                    <small class="text-muted">Just now</small>
+                                </div>
+                                <div class="message-bubble">
+                                    <div class="message-content">
+                                        <p>👋 New session started! How can I help you today?</p>
+                                    </div>
+                                </div>
+                            </div>
+                        `;
+                        
+                        // Update history
+                        this.updateHistoryList();
+                        
+                        this.showNotification('New session created', 'success');
+                    }
+                } catch (error) {
+                    console.error('Error creating session:', error);
+                    this.showNotification('Failed to create session', 'danger');
+                }
+            }
+            
+            async exportChat() {
+                try {
+                    const response = await fetch(`/api/history/${this.sessionId}`);
+                    const data = await response.json();
+                    
+                    if (data.success) {
+                        const exportData = {
+                            session_id: this.sessionId,
+                            exported_at: new Date().toISOString(),
+                            message_count: data.messages.length,
+                            messages: data.messages
+                        };
+                        
+                        const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+                            type: 'application/json'
+                        });
+                        
+                        const url = URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.href = url;
+                        a.download = `itsm-chat-${this.sessionId}-${new Date().toISOString().slice(0,10)}.json`;
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
+                        URL.revokeObjectURL(url);
+                        
+                        this.showNotification('Chat exported successfully', 'success');
+                    }
+                } catch (error) {
+                    console.error('Error exporting chat:', error);
+                    this.showNotification('Failed to export chat', 'danger');
+                }
+            }
+            
+            showNotification(message, type = 'success') {
+                // Remove existing notifications
+                document.querySelectorAll('.alert.notification').forEach(alert => alert.remove());
+                
+                // Create new notification
+                const alert = document.createElement('div');
+                alert.className = `alert alert-${type} alert-dismissible fade show notification`;
+                alert.innerHTML = `
+                    ${message}
+                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                `;
+                
+                document.body.appendChild(alert);
+                
+                // Auto-remove after 5 seconds
+                setTimeout(() => {
+                    if (alert.parentNode) {
+                        alert.remove();
+                    }
+                }, 5000);
+            }
+            
+            playNotification() {
+                // Simple notification sound using Web Audio API
+                try {
+                    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                    const oscillator = audioContext.createOscillator();
+                    const gainNode = audioContext.createGain();
+                    
+                    oscillator.connect(gainNode);
+                    gainNode.connect(audioContext.destination);
+                    
+                    oscillator.frequency.value = 800;
+                    oscillator.type = 'sine';
+                    
+                    gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
+                    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
+                    
+                    oscillator.start(audioContext.currentTime);
+                    oscillator.stop(audioContext.currentTime + 0.5);
+                } catch (e) {
+                    // Audio not supported, silently fail
+                }
+            }
+            
+            loadMessage(timestamp) {
+                // This would load a specific message in a real implementation
+                console.log('Load message:', timestamp);
+            }
+        }
+        
+        // Initialize chatbot when page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            window.chatbot = new ITSMChatbot();
+        });
+    </script>
+</body>
+</html>