Upload 12 files

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+favicon.jpg filter=lfs diff=lfs merge=lfs -text
+juno[[:space:]]avatar.jpg filter=lfs diff=lfs merge=lfs -text
+juno.jpg filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,30 @@
+FROM python:3.9-slim
+
+WORKDIR /code
+
+# Install system dependencies including tesseract for OCR
+RUN apt-get update && apt-get install -y \
+    tesseract-ocr \
+    tesseract-ocr-eng \
+    poppler-utils \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements and install Python dependencies
+COPY ./requirements.txt /code/requirements.txt
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+# Copy application files
+COPY . /code
+
+# Create necessary directories
+RUN mkdir -p /code/static /code/templates
+
+# Expose port
+EXPOSE 7860
+
+# Set environment variable for Hugging Face Spaces
+ENV PYTHONPATH=/code
+
+# Command to run the application
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,748 @@
+import os
+import json
+import uuid
+import time
+import random
+from datetime import datetime, timedelta
+from flask import Flask, request, jsonify, send_from_directory
+from flask_cors import CORS
+from dotenv import load_dotenv
+import google.generativeai as genai
+from google.api_core.exceptions import ResourceExhausted, GoogleAPIError
+from langchain.text_splitter import RecursiveCharacterTextSplitter
+from langchain.vectorstores import Chroma
+from langchain.embeddings import HuggingFaceEmbeddings
+from langchain.schema import Document
+import PyPDF2
+import io
+import base64
+from typing import List, Dict, Any
+import requests
+from bs4 import BeautifulSoup
+import re
+import pytesseract
+from PIL import Image
+
+# Import Juno AI Prompts System
+from prompts import juno_prompts, get_main_conversation_prompt, get_document_summary_prompt, get_rag_prompt, get_streaming_prompt, get_fallback_responses
+
+# Load environment variables
+load_dotenv()
+
+app = Flask(__name__)
+CORS(app)
+
+# Configure Gemini
+genai.configure(api_key=os.getenv('GEMINI_API_KEY'))
+
+class ChatbotWithMemoryAndRAG:
+    def __init__(self):
+        self.embeddings = HuggingFaceEmbeddings(
+            model_name="sentence-transformers/all-MiniLM-L6-v2"
+        )
+
+        self.text_splitter = RecursiveCharacterTextSplitter(
+            chunk_size=1000,
+            chunk_overlap=200,
+            length_function=len
+        )
+
+        self.vectorstore = None
+        self.chat_history = []
+        self.memory = {}
+        self.session_id = str(uuid.uuid4())
+        self.last_rate_limit = None
+        self.consecutive_rate_limits = 0
+
+        # Initialize Juno AI Prompts System
+        self.prompts = juno_prompts
+
+        print(f"🤖 Juno AI initialized with session ID: {self.session_id}")
+
+    def _retry_with_backoff(self, func, max_retries=5, base_delay=2):
+        """Improved retry function with progressive backoff for rate limit handling"""
+
+        # If we recently hit rate limits, wait longer before trying
+        if self.last_rate_limit and datetime.now() - self.last_rate_limit < timedelta(seconds=30):
+            additional_wait = min(self.consecutive_rate_limits * 5, 30)  # Up to 30 seconds
+            print(f"Recent rate limits detected, waiting additional {additional_wait}s")
+            time.sleep(additional_wait)
+
+        for attempt in range(max_retries):
+            try:
+                result = func()
+                # Reset rate limit tracking on success
+                self.consecutive_rate_limits = 0
+                self.last_rate_limit = None
+                return result
+
+            except ResourceExhausted as e:
+                self.last_rate_limit = datetime.now()
+                self.consecutive_rate_limits += 1
+
+                if attempt == max_retries - 1:
+                    print(f"Max retries ({max_retries}) exceeded for rate limit")
+                    raise e
+
+                # Progressive backoff with jitter: 2s, 6s, 14s, 30s, 62s
+                delay = base_delay * (2 ** attempt) + random.uniform(1, 3)  # Add jitter
+                delay = min(delay, 60)  # Cap at 60 seconds
+
+                print(f"Rate limit hit (attempt {attempt + 1}/{max_retries}), waiting {delay:.1f}s...")
+                time.sleep(delay)
+
+            except GoogleAPIError as e:
+                print(f"Google API Error: {e}")
+                if "quota" in str(e).lower() or "rate" in str(e).lower():
+                    # Treat as rate limit
+                    self.last_rate_limit = datetime.now()
+                    self.consecutive_rate_limits += 1
+
+                    if attempt == max_retries - 1:
+                        raise ResourceExhausted("API quota exceeded")
+
+                    delay = base_delay * (2 ** attempt) + random.uniform(1, 3)
+                    delay = min(delay, 60)
+                    print(f"API quota issue, waiting {delay:.1f}s...")
+                    time.sleep(delay)
+                else:
+                    raise e
+
+            except Exception as e:
+                # For non-rate-limit errors, don't retry
+                print(f"Non-retryable error: {e}")
+                raise e
+
+    def _fallback_response(self, user_message):
+        """Generate a fallback response when API is unavailable using Juno AI prompts"""
+
+        # Use Juno AI fallback response templates
+        fallback_templates = get_fallback_responses()
+
+        # Select a template and personalize it
+        template = random.choice(fallback_templates)
+        response = template.format(
+            user_message_preview=user_message[:50]
+        )
+
+        # Add to chat history so conversation continues
+        self.chat_history.append({
+            "user": user_message,
+            "bot": response,
+            "timestamp": datetime.now().isoformat(),
+            "fallback": True
+        })
+
+        return response
+
+    def extract_text_from_pdf(self, pdf_content):
+        """Extract text content from PDF bytes with OCR fallback"""
+        try:
+            pdf_reader = PyPDF2.PdfReader(io.BytesIO(pdf_content))
+            text = ""
+
+            for page in pdf_reader.pages:
+                page_text = page.extract_text()
+                # Check if extracted text is substantial
+                if page_text and len(page_text.strip()) > 10:  # Heuristic to check for actual content
+                    text += page_text + "\n"
+                else:
+                    # Attempt OCR if text extraction is poor
+                    try:
+                        # Iterate through images on the page for OCR
+                        for image_file_object in page.images:
+                            img = Image.open(io.BytesIO(image_file_object.data))
+                            ocr_text = pytesseract.image_to_string(img)
+                            if ocr_text:
+                                text += ocr_text + "\n"
+                    except Exception as ocr_error:
+                        # OCR can fail if no images, etc. Silently pass.
+                        print(f"OCR fallback failed for a page: {ocr_error}")
+                        pass
+
+            return text
+        except Exception as e:
+            return f"Error extracting PDF: {str(e)}"
+
+    def process_document(self, text_content, filename="document"):
+        """Process document text and create vector store"""
+        try:
+            # Split text into chunks
+            chunks = self.text_splitter.split_text(text_content)
+
+            # Create documents
+            documents = [
+                Document(
+                    page_content=chunk,
+                    metadata={"source": filename, "chunk_id": i}
+                )
+                for i, chunk in enumerate(chunks)
+            ]
+
+            # Create or update vector store
+            if self.vectorstore is None:
+                self.vectorstore = Chroma.from_documents(
+                    documents=documents,
+                    embedding=self.embeddings,
+                    collection_name=f"collection_{self.session_id}"
+                )
+            else:
+                self.vectorstore.add_documents(documents)
+
+            return f"Successfully processed {len(chunks)} chunks from {filename}"
+        except Exception as e:
+            return f"Error processing document: {str(e)}"
+
+    def retrieve_relevant_context(self, query, k=3):
+        """Retrieve relevant context from vector store"""
+        if self.vectorstore is None:
+            return ""
+
+        try:
+            docs = self.vectorstore.similarity_search(query, k=k)
+            context = "\n".join([doc.page_content for doc in docs])
+            return context
+        except Exception as e:
+            return ""
+
+    def summarize_text(self, text, max_length=500):
+        """Summarize long text using Juno AI prompts with improved rate limit handling"""
+        def _summarize():
+            model = genai.GenerativeModel('gemini-1.5-flash')
+
+            # Use Juno AI document summarization prompt
+            prompt = self.prompts.get_document_summarization_prompt(text, max_length)
+
+            response = model.generate_content(prompt)
+            return response.text
+
+        try:
+            return self._retry_with_backoff(_summarize)
+        except (ResourceExhausted, GoogleAPIError):
+            return f"📄 Document uploaded successfully ({len(text)} characters). \n\n✨ **Juno AI Note:** Summary temporarily unavailable due to high API usage, but the document content is fully searchable and ready for your questions!"
+        except Exception as e:
+            return f"Error summarizing text: {str(e)}"
+
+    def generate_response(self, user_message, context=""):
+        """Generate response using Juno AI prompts with improved rate limit handling"""
+        def _generate():
+            model = genai.GenerativeModel('gemini-1.5-flash')
+
+            # Build conversation context for Juno AI
+            conversation_history = []
+            if self.chat_history:
+                recent_history = self.chat_history[-3:]  # Last 3 exchanges
+                for exchange in recent_history:
+                    if not exchange.get('fallback', False):  # Skip fallback responses
+                        conversation_history.append({
+                            'user': exchange['user'],
+                            'bot': exchange['bot'],
+                            'timestamp': exchange.get('timestamp', '')
+                        })
+
+            # Use Juno AI conversation prompt with full context
+            prompt = self.prompts.get_conversation_prompt(
+                user_message=user_message,
+                context=context,
+                conversation_history=conversation_history,
+                memory_context=self.memory
+            )
+
+            response = model.generate_content(prompt)
+            return response.text
+
+        try:
+            bot_response = self._retry_with_backoff(_generate)
+
+            # Update chat history
+            self.chat_history.append({
+                "user": user_message,
+                "bot": bot_response,
+                "timestamp": datetime.now().isoformat()
+            })
+
+            # Update memory with important information
+            self.update_memory(user_message, bot_response)
+
+            return bot_response
+
+        except (ResourceExhausted, GoogleAPIError):
+            return self._fallback_response(user_message)
+        except Exception as e:
+            return f"Error generating response: {str(e)}"
+
+    def update_memory(self, user_message, bot_response):
+        """Update session memory with important information"""
+        # Simple memory update - in production, you'd want more sophisticated extraction
+        current_time = datetime.now().isoformat()
+
+        if "memory" not in self.memory:
+            self.memory["memory"] = []
+
+        self.memory["memory"].append({
+            "user": user_message,
+            "bot": bot_response,
+            "timestamp": current_time
+        })
+
+        # Keep only last 10 interactions in memory
+        if len(self.memory["memory"]) > 10:
+            self.memory["memory"] = self.memory["memory"][-10:]
+
+    def scrape_web_content(self, url):
+        """Scrape content from a web URL"""
+        try:
+            headers = {
+                'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
+            }
+
+            response = requests.get(url, headers=headers, timeout=10)
+            response.raise_for_status()
+
+            soup = BeautifulSoup(response.content, 'html.parser')
+
+            # Remove script and style elements
+            for script in soup(["script", "style"]):
+                script.decompose()
+
+            # Get text content
+            text = soup.get_text()
+
+            # Clean up text
+            lines = (line.strip() for line in text.splitlines())
+            chunks = (phrase.strip() for line in lines for phrase in line.split("  "))
+            text = ' '.join(chunk for chunk in chunks if chunk)
+
+            return text[:10000]  # Limit to 10000 characters
+        except Exception as e:
+            return f"Error scraping URL: {str(e)}"
+
+    def analyze_web_content(self, url, content):
+        """Analyze scraped web content using Juno AI prompts"""
+        def _analyze():
+            model = genai.GenerativeModel('gemini-1.5-flash')
+
+            # Use Juno AI web content analysis prompt
+            prompt = self.prompts.get_web_content_analysis_prompt(url, content)
+
+            response = model.generate_content(prompt)
+            return response.text
+
+        try:
+            return self._retry_with_backoff(_analyze)
+        except (ResourceExhausted, GoogleAPIError):
+            return f"🌐 **Web Content Scraped Successfully**\n\n**URL:** {url}\n**Content Length:** {len(content)} characters\n\n**Juno AI Note:** Analysis temporarily unavailable due to high API usage, but the content has been processed and is ready for your questions!"
+        except Exception as e:
+            return f"Error analyzing web content: {str(e)}"
+
+    def generate_rag_response(self, user_query, context, sources=None):
+        """Generate RAG response using Juno AI prompts"""
+        def _generate_rag():
+            model = genai.GenerativeModel('gemini-1.5-flash')
+
+            # Split context into chunks for better handling
+            context_chunks = [context[i:i+2000] for i in range(0, len(context), 2000)]
+
+            # Use Juno AI RAG prompt
+            prompt = self.prompts.get_rag_response_prompt(
+                user_query=user_query,
+                retrieved_chunks=context_chunks[:3],  # Top 3 chunks
+                source_info=sources
+            )
+
+            response = model.generate_content(prompt)
+            return response.text
+
+        try:
+            return self._retry_with_backoff(_generate_rag)
+        except (ResourceExhausted, GoogleAPIError):
+            return self._fallback_response(user_query)
+        except Exception as e:
+            return f"Error generating RAG response: {str(e)}"
+
+    def save_conversation(self, conversation_id, title=""):
+        """Save current conversation to memory"""
+        if not title:
+            title = f"Chat {datetime.now().strftime('%Y-%m-%d %H:%M')}"
+
+        conversation_data = {
+            "id": conversation_id,
+            "title": title,
+            "messages": self.chat_history,
+            "created_at": datetime.now().isoformat(),
+            "last_updated": datetime.now().isoformat()
+        }
+
+        if "conversations" not in self.memory:
+            self.memory["conversations"] = {}
+
+        self.memory["conversations"][conversation_id] = conversation_data
+        return conversation_data
+
+    def load_conversation(self, conversation_id):
+        """Load a specific conversation"""
+        if "conversations" in self.memory and conversation_id in self.memory["conversations"]:
+            conversation = self.memory["conversations"][conversation_id]
+            self.chat_history = conversation["messages"]
+            return conversation
+        return None
+
+    def delete_conversation(self, conversation_id):
+        """Delete a specific conversation"""
+        if "conversations" in self.memory and conversation_id in self.memory["conversations"]:
+            del self.memory["conversations"][conversation_id]
+            return True
+        return False
+
+    def rename_conversation(self, conversation_id, new_title):
+        """Rename a conversation"""
+        if "conversations" in self.memory and conversation_id in self.memory["conversations"]:
+            self.memory["conversations"][conversation_id]["title"] = new_title
+            self.memory["conversations"][conversation_id]["last_updated"] = datetime.now().isoformat()
+            return True
+        return False
+
+    def generate_streaming_response(self, user_message, context=""):
+        """Generate streaming response using Juno AI prompts with improved rate limit handling"""
+        def _generate_stream():
+            model = genai.GenerativeModel('gemini-1.5-flash')
+
+            # Use Juno AI streaming prompt (optimized for speed)
+            prompt = self.prompts.get_streaming_response_prompt(user_message, context)
+
+            response = model.generate_content(prompt, stream=True)
+            return response
+
+        try:
+            return self._retry_with_backoff(_generate_stream, max_retries=3, base_delay=1)
+        except (ResourceExhausted, GoogleAPIError):
+            return None
+        except Exception as e:
+            return None
+
+# Initialize Juno AI chatbot
+chatbot = ChatbotWithMemoryAndRAG()
+
+@app.route('/')
+def serve_frontend():
+    return send_from_directory('.', 'index.html')
+
+@app.route('/<path:filename>')
+def serve_static(filename):
+    return send_from_directory('.', filename)
+
+@app.route('/api/chat', methods=['POST'])
+def chat():
+    try:
+        data = request.json
+        user_message = data.get('message', '')
+
+        if not user_message:
+            return jsonify({'error': 'No message provided'}), 400
+
+        # Retrieve relevant context
+        context = chatbot.retrieve_relevant_context(user_message)
+
+        # Generate response using Juno AI prompts
+        if context:
+            # Use RAG response for document-based queries
+            bot_response = chatbot.generate_rag_response(user_message, context)
+        else:
+            # Use regular conversation response
+            bot_response = chatbot.generate_response(user_message, context)
+
+        return jsonify({
+            'response': bot_response,
+            'has_context': bool(context),
+            'session_id': chatbot.session_id
+        })
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/upload', methods=['POST'])
+def upload_document():
+    try:
+        if 'file' not in request.files:
+            return jsonify({'error': 'No file provided'}), 400
+
+        file = request.files['file']
+        if file.filename == '':
+            return jsonify({'error': 'No file selected'}), 400
+
+        if file and file.filename.lower().endswith('.pdf'):
+            # Read PDF content
+            pdf_content = file.read()
+
+            # Extract text
+            text_content = chatbot.extract_text_from_pdf(pdf_content)
+
+            if text_content.startswith("Error"):
+                return jsonify({'error': text_content}), 400
+
+            # Process document
+            result = chatbot.process_document(text_content, file.filename)
+
+            # Generate Juno AI summary
+            summary = chatbot.summarize_text(text_content)
+
+            return jsonify({
+                'message': result,
+                'summary': summary,
+                'filename': file.filename,
+                'text_length': len(text_content)
+            })
+        else:
+            return jsonify({'error': 'Only PDF files are supported'}), 400
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/summarize', methods=['POST'])
+def summarize_document():
+    try:
+        data = request.json
+        text = data.get('text', '')
+        max_length = data.get('max_length', 500)
+
+        if not text:
+            return jsonify({'error': 'No text provided'}), 400
+
+        # Use Juno AI summarization
+        summary = chatbot.summarize_text(text, max_length)
+
+        return jsonify({
+            'summary': summary,
+            'original_length': len(text),
+            'summary_length': len(summary)
+        })
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/memory', methods=['GET'])
+def get_memory():
+    return jsonify({
+        'memory': chatbot.memory,
+        'chat_history_length': len(chatbot.chat_history),
+        'has_vectorstore': chatbot.vectorstore is not None,
+        'session_id': chatbot.session_id
+    })
+
+@app.route('/api/clear', methods=['POST'])
+def clear_session():
+    global chatbot
+    chatbot = ChatbotWithMemoryAndRAG()
+    return jsonify({'message': 'Juno AI session cleared successfully'})
+
+@app.route('/api/scrape', methods=['POST'])
+def scrape_url():
+    try:
+        data = request.json
+        url = data.get('url', '')
+
+        if not url:
+            return jsonify({'error': 'No URL provided'}), 400
+
+        # Validate URL format
+        if not re.match(r'^https?://', url):
+            url = 'https://' + url
+
+        content = chatbot.scrape_web_content(url)
+
+        if content.startswith("Error"):
+            return jsonify({'error': content}), 400
+
+        # Process the scraped content
+        result = chatbot.process_document(content, f"Web: {url}")
+
+        # Use Juno AI web content analysis
+        analysis = chatbot.analyze_web_content(url, content)
+
+        return jsonify({
+            'message': result,
+            'summary': analysis,
+            'url': url,
+            'content_length': len(content)
+        })
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/chat/stream', methods=['POST'])
+def chat_stream():
+    try:
+        data = request.json
+        user_message = data.get('message', '')
+
+        if not user_message:
+            return jsonify({'error': 'No message provided'}), 400
+
+        # Retrieve relevant context
+        context = chatbot.retrieve_relevant_context(user_message)
+
+        # Generate streaming response using Juno AI prompts
+        streaming_response = chatbot.generate_streaming_response(user_message, context)
+
+        if streaming_response is None:
+            # Fallback to regular response if streaming fails
+            if context:
+                bot_response = chatbot.generate_rag_response(user_message, context)
+            else:
+                bot_response = chatbot.generate_response(user_message, context)
+            return jsonify({
+                'response': bot_response,
+                'has_context': bool(context),
+                'session_id': chatbot.session_id,
+                'streaming': False
+            })
+
+        # Collect streaming response
+        full_response = ""
+        response_chunks = []
+
+        try:
+            for chunk in streaming_response:
+                if chunk.text:
+                    full_response += chunk.text
+                    response_chunks.append(chunk.text)
+        except (ResourceExhausted, GoogleAPIError):
+            # If rate limited during streaming, fallback to regular response
+            if context:
+                bot_response = chatbot.generate_rag_response(user_message, context)
+            else:
+                bot_response = chatbot.generate_response(user_message, context)
+            return jsonify({
+                'response': bot_response,
+                'has_context': bool(context),
+                'session_id': chatbot.session_id,
+                'streaming': False
+            })
+
+        # Update chat history
+        chatbot.chat_history.append({
+            "user": user_message,
+            "bot": full_response,
+            "timestamp": datetime.now().isoformat()
+        })
+
+        # Update memory
+        chatbot.update_memory(user_message, full_response)
+
+        return jsonify({
+            'response': full_response,
+            'chunks': response_chunks,
+            'has_context': bool(context),
+            'session_id': chatbot.session_id,
+            'streaming': True
+        })
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/conversations', methods=['GET'])
+def get_conversations():
+    try:
+        conversations = []
+        if "conversations" in chatbot.memory:
+            for conv_id, conv_data in chatbot.memory["conversations"].items():
+                conversations.append({
+                    'id': conv_id,
+                    'title': conv_data['title'],
+                    'created_at': conv_data['created_at'],
+                    'last_updated': conv_data['last_updated'],
+                    'message_count': len(conv_data['messages'])
+                })
+
+        # Sort by last updated, newest first
+        conversations.sort(key=lambda x: x['last_updated'], reverse=True)
+
+        return jsonify({'conversations': conversations})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/conversations', methods=['POST'])
+def save_conversation():
+    try:
+        data = request.json
+        conversation_id = data.get('id', str(uuid.uuid4()))
+        title = data.get('title', '')
+
+        conversation = chatbot.save_conversation(conversation_id, title)
+
+        return jsonify({
+            'message': 'Conversation saved successfully',
+            'conversation': conversation
+        })
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/conversations/<conversation_id>', methods=['GET'])
+def load_conversation(conversation_id):
+    try:
+        conversation = chatbot.load_conversation(conversation_id)
+        if conversation:
+            return jsonify({
+                'message': 'Conversation loaded successfully',
+                'conversation': conversation
+            })
+        else:
+            return jsonify({'error': 'Conversation not found'}), 404
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/conversations/<conversation_id>', methods=['DELETE'])
+def delete_conversation(conversation_id):
+    try:
+        success = chatbot.delete_conversation(conversation_id)
+        if success:
+            return jsonify({'message': 'Conversation deleted successfully'})
+        else:
+            return jsonify({'error': 'Conversation not found'}), 404
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/conversations/<conversation_id>/rename', methods=['PUT'])
+def rename_conversation(conversation_id):
+    try:
+        data = request.json
+        new_title = data.get('title', '')
+
+        if not new_title:
+            return jsonify({'error': 'No title provided'}), 400
+
+        success = chatbot.rename_conversation(conversation_id, new_title)
+        if success:
+            return jsonify({'message': 'Conversation renamed successfully'})
+        else:
+            return jsonify({'error': 'Conversation not found'}), 404
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/messages/<int:message_index>/edit', methods=['PUT'])
+def edit_message(message_index):
+    try:
+        data = request.json
+        new_message = data.get('message', '')
+
+        if not new_message:
+            return jsonify({'error': 'No message provided'}), 400
+
+        if 0 <= message_index < len(chatbot.chat_history):
+            # Update the user message
+            chatbot.chat_history[message_index]['user'] = new_message
+            chatbot.chat_history[message_index]['edited'] = True
+            chatbot.chat_history[message_index]['edited_at'] = datetime.now().isoformat()
+
+            # Remove subsequent messages (bot response and after)
+            chatbot.chat_history = chatbot.chat_history[:message_index + 1]
+
+            return jsonify({
+                'message': 'Message edited successfully',
+                'updated_history': chatbot.chat_history
+            })
+        else:
+            return jsonify({'error': 'Invalid message index'}), 400
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    print("🚀 Starting Juno AI Server...")
+    print("🤖 Advanced AI Assistant with Document Processing, Web Scraping, and Memory")
+    print("🌟 Powered by Juno AI Prompts System")
+    app.run(debug=False, host='0.0.0.0', port=7860)

index.html

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JUNO AI </title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body data-theme="light">
+    <div class="app-container">
+        <!-- Header -->
+        <header class="header">
+            <div class="header-content">
+                <div class="logo">
+                    <img src="juno.jpg" alt="Juno Logo" class="logo-image">
+                    <h1>JUNO AI</h1>
+                </div>
+                <div class="header-actions">
+                    <button class="btn-secondary" id="memoryBtn">
+                        <i class="fas fa-brain"></i> Memory
+                    </button>
+                    <button class="btn-secondary" id="clearBtn">
+                        <i class="fas fa-broom"></i> Clear
+                    </button>
+                    <button class="btn-secondary" id="themeToggleBtn">
+                        <i class="fas fa-moon"></i>
+                    </button>
+                    <button class="btn-secondary" id="conversationsBtn">
+                        <i class="fas fa-bars"></i> Menu
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <div class="main-content">
+            <div class="chat-container">
+                <!-- Chat Header -->
+                <div class="chat-header">
+                    <div class="status-indicator">
+                        <span class="status-dot active"></span>
+                        <span>JUNO AI is Ready</span>
+                    </div>
+                    <div class="document-status" id="documentStatus">
+                        <i class="fas fa-file-pdf" style="color: var(--text-muted);"></i>
+                        <span>No documents loaded</span>
+                    </div>
+                </div>
+
+                <!-- Messages Container -->
+                <div class="messages-container" id="messagesContainer">
+                    <div class="welcome-message" id="welcomeMessage">
+                        <div class="welcome-icon">
+                            <img src="juno logo.jpg" alt="Juno Logo" class="welcome-logo">
+                        </div>
+                        <h2>Welcome to JUNO AI</h2>
+                        <p>Upload documents, ask questions, or start a conversation!</p>
+
+                        <div class="feature-grid">
+                            <div class="feature-item">
+                                <i class="fas fa-file-upload"></i>
+                                <span>Upload PDFs</span>
+                            </div>
+                            <div class="feature-item">
+                                <i class="fas fa-brain"></i>
+                                <span>Smart Memory</span>
+                            </div>
+                            <div class="feature-item">
+                                <i class="fas fa-globe"></i>
+                                <span>Web Scraping</span>
+                            </div>
+                            <div class="feature-item">
+                                <i class="fas fa-microphone"></i>
+                                <span>Voice Input</span>
+                            </div>
+                        </div>
+
+                        <!-- Quick Actions -->
+                        <div class="quick-actions">
+                            <button class="quick-btn" onclick="chatbot.fillInput('Summarize this document')">
+                                <i class="fas fa-file-text"></i> Summarize Doc
+                            </button>
+                            <button class="quick-btn" onclick="chatbot.fillInput('Extract key insights from this content')">
+                                <i class="fas fa-lightbulb"></i> Key Insights
+                            </button>
+                            <button class="quick-btn" onclick="chatbot.fillInput('What is the main topic of this document?')">
+                                <i class="fas fa-bullseye"></i> Main Topic
+                            </button>
+                            <button class="quick-btn" onclick="chatbot.fillInput('List the important points mentioned')">
+                                <i class="fas fa-list"></i> Key Points
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Input Area -->
+                <div class="input-area">
+                    <div class="message-input-container">
+                        <div class="input-wrapper">
+                            <div class="input-actions-left">
+                                <button class="action-btn upload-btn" id="attachBtn" title="Upload PDF">
+                                    <i class="fas fa-paperclip"></i>
+                                </button>
+                                <button class="action-btn scrape-btn" id="scrapeBtn" title="Scrape Website">
+                                    <i class="fas fa-globe"></i>
+                                </button>
+                                <button class="action-btn voice-btn" id="voiceBtn" title="Voice Input">
+                                    <i class="fas fa-microphone"></i>
+                                </button>
+                            </div>
+                            <div class="input-field-wrapper">
+                                <textarea id="messageInput" placeholder="Type your message... (Shift+Enter for new line)" rows="1"></textarea>
+                            </div>
+                            <div class="input-actions-right">
+                                <button class="action-btn send-btn" id="sendBtn">
+                                    <i class="fas fa-paper-plane"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Sidebar for Conversations -->
+            <div class="sidebar" id="sidebar">
+                <div class="sidebar-header">
+                    <h3>Conversations</h3>
+                    <button class="btn-icon" id="closeSidebarBtn">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="sidebar-content">
+                    <div class="sidebar-actions">
+                        <button class="btn-secondary" id="newConvBtn">
+                            <i class="fas fa-plus"></i> New Conversation
+                        </button>
+                        <button class="btn-secondary" id="saveConvBtn">
+                            <i class="fas fa-save"></i> Save Current
+                        </button>
+                    </div>
+                    <div class="conversations-list" id="conversationsList">
+                        <!-- Conversations will be loaded here -->
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Voice Modal -->
+        <div class="voice-modal" id="voiceModal">
+            <div class="voice-content">
+                <div class="voice-animation">
+                    <div class="voice-wave"></div>
+                    <div class="voice-wave"></div>
+                    <div class="voice-wave"></div>
+                    <div class="voice-wave"></div>
+                    <div class="voice-wave"></div>
+                </div>
+                <div class="voice-title">Listening...</div>
+                <div class="voice-subtitle">Speak clearly into your microphone</div>
+                <button class="stop-voice-btn" id="stopVoiceBtn">
+                    <i class="fas fa-stop"></i> Stop Recording
+                </button>
+            </div>
+        </div>
+
+        <!-- Memory Modal -->
+        <div class="modal" id="memoryModal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3>Memory & Session Data</h3>
+                    <button class="btn-icon" id="closeModalBtn">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <div id="memoryContent">
+                        Loading memory data...
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Advanced Loading Overlay -->
+        <div class="loading-overlay" id="loadingOverlay">
+            <div class="loading-spinner">
+                <div class="spinner-ring"></div>
+                <div class="spinner-ring"></div>
+                <div class="spinner-ring"></div>
+            </div>
+            <div class="loading-text">Processing...</div>
+        </div>
+    </div>
+
+    <!-- Hidden file input -->
+    <input type="file" id="fileInput" accept=".pdf" style="display: none;">
+
+    <script src="script.js"></script>
+</body>
+</html>

prompts.py

@@ -0,0 +1,689 @@
+"""
+Juno AI - Comprehensive Prompt System
+=====================================
+
+This module contains all prompts and prompt templates for Juno AI,
+an advanced conversational AI assistant with document processing,
+web scraping, memory management, and RAG capabilities.
+
+Features Covered:
+- Core AI Personality & Branding
+- Document Analysis & Processing
+- Web Content Integration
+- Memory & Context Management
+- Conversation Management
+- Summarization Capabilities
+- RAG (Retrieval Augmented Generation)
+- Streaming Responses
+- Error Handling & Fallbacks
+- Professional Communication
+
+Author: Juno AI Development Team
+Version: 1.0
+"""
+
+from typing import List, Dict, Any, Optional
+from datetime import datetime
+import json
+
+class JunoAIPrompts:
+    """
+    Centralized prompt management system for Juno AI.
+    Contains all prompts, templates, and prompt generation methods.
+    """
+
+    def __init__(self):
+        self.version = "1.0"
+        self.ai_name = "Juno AI"
+        self.personality = self._load_personality_traits()
+
+    def _load_personality_traits(self) -> Dict[str, str]:
+        """Define Juno AI's core personality traits"""
+        return {
+            "helpful": "Always eager to assist and provide valuable insights",
+            "intelligent": "Demonstrates deep understanding and analytical thinking",
+            "professional": "Maintains professional tone while being approachable",
+            "adaptive": "Adapts communication style to user needs and context",
+            "reliable": "Provides accurate, well-sourced information",
+            "innovative": "Offers creative solutions and fresh perspectives",
+            "empathetic": "Understands user needs and responds thoughtfully"
+        }
+
+    # ==========================================
+    # CORE AI ASSISTANT PROMPTS
+    # ==========================================
+
+    def get_core_system_prompt(self) -> str:
+        """
+        Core system prompt that defines Juno AI's personality and capabilities
+        """
+        return f"""You are {self.ai_name}, an advanced AI assistant created to help users with a wide range of tasks through intelligent conversation, document analysis, and information processing.
+
+CORE IDENTITY & PERSONALITY:
+- You are helpful, intelligent, and professional while maintaining a warm, approachable demeanor
+- You demonstrate deep analytical thinking and provide thoughtful, well-reasoned responses
+- You adapt your communication style to match the user's needs and expertise level
+- You are curious about learning and helping users discover insights
+- You maintain professionalism while being conversational and engaging
+
+KEY CAPABILITIES:
+🧠 Intelligent Conversation: Engage in natural, contextual conversations with memory retention
+📄 Document Analysis: Process, analyze, and extract insights from uploaded documents
+🌐 Web Integration: Scrape and analyze web content for real-time information
+💭 Memory Management: Remember important details across conversations
+🔍 Smart Search: Use RAG to find relevant information from uploaded content
+📊 Summarization: Create comprehensive summaries of long-form content
+🎯 Task Management: Help with various professional and personal tasks
+
+COMMUNICATION STYLE:
+- Be clear, concise, and informative
+- Use appropriate formatting for readability
+- Provide specific examples when helpful
+- Ask clarifying questions when needed
+- Acknowledge uncertainty when appropriate
+- Maintain continuity across conversation turns
+
+CONTEXT AWARENESS:
+- Always consider previous conversation history
+- Reference uploaded documents and web content when relevant
+- Use memory to provide personalized responses
+- Maintain context across multiple interaction sessions
+
+Remember: You are not just answering questions - you are having a meaningful conversation and building a helpful relationship with the user."""
+
+    def get_conversation_prompt(self, 
+                              user_message: str,
+                              context: str = "",
+                              conversation_history: List[Dict] = None,
+                              memory_context: Dict = None,
+                              user_preferences: Dict = None) -> str:
+        """
+        Generate a comprehensive conversation prompt with all available context
+        """
+
+        # Build conversation history section
+        history_section = ""
+        if conversation_history:
+            recent_history = conversation_history[-5:]  # Last 5 exchanges
+            history_section = "\n".join([
+                f"User: {exchange.get('user', '')}\nAssistant: {exchange.get('bot', '')}"
+                for exchange in recent_history
+                if not exchange.get('fallback', False)
+            ])
+
+        # Build memory context section
+        memory_section = ""
+        if memory_context and memory_context.get('memory'):
+            recent_memory = memory_context['memory'][-3:]
+            memory_section = json.dumps(recent_memory, indent=2)
+
+        # Build user preferences section
+        preferences_section = ""
+        if user_preferences:
+            preferences_section = json.dumps(user_preferences, indent=2)
+
+        # Build document context section
+        context_section = ""
+        if context:
+            context_section = f"\n\nRELEVANT DOCUMENT CONTEXT:\n{context[:2000]}"
+
+        return f"""{self.get_core_system_prompt()}
+
+CONVERSATION CONTEXT:
+{f"Previous conversation history:\n{history_section}\n" if history_section else ""}
+{f"Session memory:\n{memory_section}\n" if memory_section else ""}
+{f"User preferences:\n{preferences_section}\n" if preferences_section else ""}
+{context_section}
+
+CURRENT USER MESSAGE: {user_message}
+
+RESPONSE INSTRUCTIONS:
+- Provide a helpful, accurate response based on all available context
+- Reference relevant information from documents or previous conversations when applicable
+- Maintain conversational flow and continuity
+- Be specific and actionable in your advice
+- Use formatting (lists, headers, etc.) to improve readability when appropriate
+- If you need clarification, ask thoughtful follow-up questions
+- Do NOT include your name or "Assistant:" in your response - respond directly and naturally"""
+
+    # ==========================================
+    # DOCUMENT PROCESSING PROMPTS
+    # ==========================================
+
+    def get_document_analysis_prompt(self, document_text: str, filename: str = "document") -> str:
+        """
+        Prompt for analyzing uploaded documents
+        """
+        return f"""Analyze the following document and provide comprehensive insights.
+
+DOCUMENT: {filename}
+CONTENT:
+{document_text[:8000]}
+
+ANALYSIS REQUIREMENTS:
+1. **Document Summary**: Provide a clear, comprehensive summary of the main content
+2. **Key Points**: Extract the most important points, insights, or findings
+3. **Document Type**: Identify the type of document (report, article, manual, etc.)
+4. **Main Topics**: List the primary topics or themes covered
+5. **Important Details**: Highlight any critical information, data, or recommendations
+6. **Potential Use Cases**: Suggest how this information could be applied or used
+
+RESPONSE FORMAT:
+Structure your analysis clearly with headers and bullet points for easy reading.
+Be thorough but concise, focusing on the most valuable insights."""
+
+    def get_document_summarization_prompt(self, text: str, max_length: int = 500, focus_area: str = "") -> str:
+        """
+        Prompt for document summarization
+        """
+        focus_instruction = f"\nFocus particularly on: {focus_area}" if focus_area else ""
+
+        return f"""Create a comprehensive summary of the following text.
+
+TARGET LENGTH: Approximately {max_length} words
+{focus_instruction}
+
+CONTENT TO SUMMARIZE:
+{text[:10000]}
+
+SUMMARIZATION REQUIREMENTS:
+- Capture all key points and main arguments
+- Maintain the original meaning and context
+- Include important details, data, and insights
+- Use clear, professional language
+- Structure with headers or bullet points if helpful
+- Ensure the summary is standalone and comprehensive"""
+
+    def get_document_qa_prompt(self, question: str, document_context: str, document_title: str = "") -> str:
+        """
+        Prompt for answering questions about specific documents
+        """
+        title_section = f"DOCUMENT: {document_title}\n" if document_title else ""
+
+        return f"""Answer the following question based on the provided document context.
+
+{title_section}QUESTION: {question}
+
+RELEVANT DOCUMENT CONTENT:
+{document_context}
+
+RESPONSE REQUIREMENTS:
+- Answer directly and specifically based on the document content
+- Quote or reference specific sections when relevant
+- If the answer isn't in the document, clearly state this
+- Provide additional context or explanations when helpful
+- Use clear formatting for readability"""
+
+    # ==========================================
+    # WEB SCRAPING & CONTENT PROMPTS
+    # ==========================================
+
+    def get_web_content_analysis_prompt(self, url: str, content: str) -> str:
+        """
+        Prompt for analyzing scraped web content
+        """
+        return f"""Analyze the following web content and provide comprehensive insights.
+
+SOURCE URL: {url}
+SCRAPED CONTENT:
+{content[:8000]}
+
+ANALYSIS REQUIREMENTS:
+1. **Content Summary**: Provide a clear summary of the web page content
+2. **Key Information**: Extract the most important information and insights
+3. **Content Type**: Identify the type of content (article, blog, news, product page, etc.)
+4. **Main Topics**: List the primary topics or themes
+5. **Credibility Assessment**: Comment on the source credibility and information quality
+6. **Relevance**: Explain potential use cases for this information
+
+RESPONSE FORMAT:
+Use clear headers and bullet points for easy scanning.
+Focus on providing actionable insights from the web content."""
+
+    def get_web_content_integration_prompt(self, user_question: str, web_content: str, url: str) -> str:
+        """
+        Prompt for integrating web content into responses
+        """
+        return f"""Answer the user's question using the provided web content as a primary source.
+
+USER QUESTION: {user_question}
+
+WEB SOURCE: {url}
+CONTENT:
+{web_content[:4000]}
+
+RESPONSE REQUIREMENTS:
+- Answer the question using information from the web content
+- Reference the source appropriately
+- Provide additional context or explanations when helpful
+- If the web content doesn't fully answer the question, state what's missing
+- Maintain objectivity and cite the source clearly"""
+
+    # ==========================================
+    # MEMORY & CONTEXT MANAGEMENT PROMPTS
+    # ==========================================
+
+    def get_memory_extraction_prompt(self, user_message: str, bot_response: str) -> str:
+        """
+        Prompt for extracting important information for memory storage
+        """
+        return f"""Analyze this conversation exchange and extract important information that should be remembered for future interactions.
+
+USER MESSAGE: {user_message}
+AI RESPONSE: {bot_response}
+
+EXTRACTION CRITERIA:
+- User preferences, interests, or goals mentioned
+- Important facts or context about the user
+- Project details or ongoing tasks
+- Specific requests or requirements
+- Any information that would improve future interactions
+
+Return a JSON object with extracted information:
+{{
+    "user_preferences": [...],
+    "important_facts": [...],
+    "ongoing_projects": [...],
+    "context_tags": [...]
+}}
+
+Only extract genuinely important information that would be useful to remember."""
+
+    def get_context_integration_prompt(self, current_message: str, relevant_memories: List[Dict]) -> str:
+        """
+        Prompt for integrating remembered context into responses
+        """
+        memory_context = json.dumps(relevant_memories, indent=2)
+
+        return f"""Respond to the current message while incorporating relevant context from previous interactions.
+
+CURRENT MESSAGE: {current_message}
+
+RELEVANT CONTEXT FROM PREVIOUS INTERACTIONS:
+{memory_context}
+
+INTEGRATION INSTRUCTIONS:
+- Reference previous conversations naturally when relevant
+- Show continuity and memory of past interactions
+- Build upon previous discussions when appropriate
+- Don't over-reference past conversations unless directly relevant
+- Maintain a natural conversation flow"""
+
+    # ==========================================
+    # RAG (RETRIEVAL AUGMENTED GENERATION) PROMPTS
+    # ==========================================
+
+    def get_rag_response_prompt(self, 
+                               user_query: str,
+                               retrieved_chunks: List[str],
+                               source_info: List[str] = None) -> str:
+        """
+        Prompt for generating responses using retrieved document chunks
+        """
+
+        # Combine retrieved chunks
+        context = "\n\n---\n\n".join(retrieved_chunks[:3])  # Top 3 chunks
+
+        # Add source information if available
+        source_section = ""
+        if source_info:
+            sources = ", ".join(set(source_info[:3]))
+            source_section = f"\nSOURCES: {sources}\n"
+
+        return f"""Answer the user's question using the retrieved information from uploaded documents.
+
+USER QUESTION: {user_query}
+{source_section}
+RETRIEVED INFORMATION:
+{context}
+
+RESPONSE REQUIREMENTS:
+- Answer the question using the retrieved information as the primary source
+- Synthesize information from multiple chunks when relevant
+- Clearly indicate when information comes from the uploaded documents
+- If the retrieved information doesn't fully answer the question, state what's missing
+- Provide specific details and examples from the source material
+- Maintain accuracy and don't add information not present in the sources"""
+
+    def get_rag_no_context_prompt(self, user_query: str) -> str:
+        """
+        Prompt when no relevant context is found in uploaded documents
+        """
+        return f"""The user has asked a question but no relevant information was found in their uploaded documents.
+
+USER QUESTION: {user_query}
+
+RESPONSE REQUIREMENTS:
+- Acknowledge that no relevant information was found in uploaded documents
+- Provide a helpful general response based on your knowledge
+- Suggest how the user might find more specific information
+- Offer to help analyze relevant documents if they upload them"""
+
+    # ==========================================
+    # CONVERSATION MANAGEMENT PROMPTS
+    # ==========================================
+
+    def get_conversation_starter_prompt(self, user_context: Dict = None) -> str:
+        """
+        Prompt for starting new conversations
+        """
+        context_section = ""
+        if user_context:
+            context_section = f"User Context: {json.dumps(user_context, indent=2)}\n"
+
+        return f"""Generate a welcoming message to start a new conversation.
+
+{context_section}REQUIREMENTS:
+- Be welcoming and professional
+- Introduce your capabilities briefly
+- Invite the user to ask questions or share what they need help with
+- Reference any available context appropriately
+- Keep it concise but engaging"""
+
+    def get_conversation_summary_prompt(self, conversation_messages: List[Dict]) -> str:
+        """
+        Prompt for summarizing conversations
+        """
+        messages_text = "\n\n".join([
+            f"User: {msg.get('user', '')}\nAssistant: {msg.get('bot', '')}"
+            for msg in conversation_messages[-10:]  # Last 10 exchanges
+        ])
+
+        return f"""Create a comprehensive summary of this conversation.
+
+CONVERSATION:
+{messages_text}
+
+SUMMARY REQUIREMENTS:
+- Capture the main topics discussed
+- Note key questions asked and answers provided
+- Include important decisions or conclusions reached
+- Highlight any ongoing tasks or follow-up items
+- Keep it concise but comprehensive"""
+
+    # ==========================================
+    # SPECIALIZED TASK PROMPTS
+    # ==========================================
+
+    def get_comparison_analysis_prompt(self, items_to_compare: List[str], comparison_criteria: str = "") -> str:
+        """
+        Prompt for comparative analysis
+        """
+        criteria_section = f"\nComparison Criteria: {comparison_criteria}" if comparison_criteria else ""
+        items_list = "\n".join([f"- {item}" for item in items_to_compare])
+
+        return f"""Provide a comprehensive comparison analysis.
+
+ITEMS TO COMPARE:
+{items_list}
+{criteria_section}
+
+ANALYSIS REQUIREMENTS:
+- Create a structured comparison covering key aspects
+- Highlight similarities and differences
+- Provide pros and cons for each item
+- Include recommendations based on different use cases
+- Use clear formatting (tables, lists, headers) for readability"""
+
+    def get_research_synthesis_prompt(self, research_sources: List[Dict], research_question: str) -> str:
+        """
+        Prompt for synthesizing research from multiple sources
+        """
+        sources_text = "\n\n".join([
+            f"SOURCE: {source.get('title', 'Unknown')}\n{source.get('content', '')[:2000]}"
+            for source in research_sources[:5]  # Up to 5 sources
+        ])
+
+        return f"""Synthesize the following research sources to answer the research question.
+
+RESEARCH QUESTION: {research_question}
+
+SOURCES:
+{sources_text}
+
+SYNTHESIS REQUIREMENTS:
+- Integrate information from multiple sources
+- Identify common themes and conflicting viewpoints
+- Provide a balanced, comprehensive answer
+- Note any gaps or limitations in the available sources
+- Use appropriate citations or source references
+- Structure the response logically with clear sections"""
+
+    def get_problem_solving_prompt(self, problem_description: str, constraints: str = "", goal: str = "") -> str:
+        """
+        Prompt for structured problem-solving
+        """
+        constraints_section = f"\nConstraints: {constraints}" if constraints else ""
+        goal_section = f"\nGoal: {goal}" if goal else ""
+
+        return f"""Help solve the following problem using a structured approach.
+
+PROBLEM: {problem_description}
+{constraints_section}
+{goal_section}
+
+PROBLEM-SOLVING APPROACH:
+1. **Problem Analysis**: Break down the problem into components
+2. **Root Cause Analysis**: Identify underlying causes
+3. **Solution Options**: Generate multiple potential solutions
+4. **Evaluation**: Assess pros and cons of each option
+5. **Recommendation**: Provide the best solution(s) with rationale
+6. **Implementation Plan**: Outline next steps"""
+
+    # ==========================================
+    # ERROR HANDLING & FALLBACK PROMPTS
+    # ==========================================
+
+    def get_fallback_response_templates(self) -> List[str]:
+        """
+        Templates for fallback responses when API is overloaded
+        """
+        return [
+            "I'm currently experiencing high API demand, but I'm here and ready to help. Your message about '{user_message_preview}' is important to me. Please try again in a moment while I catch up with the processing queue.",
+
+            "The AI processing system is temporarily overloaded, but don't worry - I've received your message and I'm working on getting back to full capacity. Your question deserves a thoughtful response, so please retry in 30-60 seconds.",
+
+            "I'm having a brief moment of high computational demand. While I process your message about '{user_message_preview}', please know that I'm committed to providing you with a helpful response once the system stabilizes.",
+
+            "System overload detected, but I want to acknowledge your message: '{user_message_preview}'. I'm designed to provide thoughtful, comprehensive responses, so please give me a moment to clear the processing backlog and try again.",
+
+            "I'm experiencing temporary processing constraints due to high usage, but I'm still here with you. Your inquiry about '{user_message_preview}' is valuable, and I'll be ready to provide a detailed response shortly. Please retry in a minute."
+        ]
+
+    def get_error_explanation_prompt(self, error_type: str, user_context: str = "") -> str:
+        """
+        Prompt for explaining errors to users
+        """
+        return f"""Explain the following error to the user in a helpful, non-technical way.
+
+ERROR TYPE: {error_type}
+USER CONTEXT: {user_context}
+
+EXPLANATION REQUIREMENTS:
+- Use clear, non-technical language
+- Explain what happened and why
+- Provide actionable steps to resolve the issue
+- Maintain a helpful, apologetic tone
+- Offer alternative solutions when possible
+- Reassure the user that you're still available to help"""
+
+    def get_clarification_request_prompt(self, unclear_request: str, possible_interpretations: List[str]) -> str:
+        """
+        Prompt for requesting clarification from users
+        """
+        interpretations_list = "\n".join([f"- {interp}" for interp in possible_interpretations])
+
+        return f"""The user's request needs clarification to provide the most helpful response.
+
+USER REQUEST: {unclear_request}
+
+POSSIBLE INTERPRETATIONS:
+{interpretations_list}
+
+CLARIFICATION REQUIREMENTS:
+- Politely acknowledge the request
+- Explain why clarification would help provide a better response
+- Present the possible interpretations as options
+- Ask specific questions to narrow down the intent
+- Maintain an encouraging, helpful tone"""
+
+    # ==========================================
+    # STREAMING RESPONSE PROMPTS
+    # ==========================================
+
+    def get_streaming_response_prompt(self, user_message: str, context: str = "") -> str:
+        """
+        Optimized prompt for streaming responses (shorter to reduce latency)
+        """
+        context_section = f"\nContext: {context[:1500]}" if context else ""
+
+        return f"""You are a helpful AI assistant. Respond naturally and conversationally.
+
+{context_section}
+
+User: {user_message}
+
+Requirements:
+- Be helpful and accurate
+- Use available context when relevant
+- Maintain conversational flow
+- Format for readability
+- Respond directly without prefixes"""
+
+    # ==========================================
+    # UTILITY METHODS
+    # ==========================================
+
+    def format_prompt_with_variables(self, template: str, **variables) -> str:
+        """
+        Format a prompt template with provided variables
+        """
+        try:
+            return template.format(**variables)
+        except KeyError as e:
+            raise ValueError(f"Missing required variable for prompt template: {e}")
+
+    def get_prompt_by_category(self, category: str, prompt_type: str, **kwargs) -> str:
+        """
+        Get a specific prompt by category and type
+        """
+        method_name = f"get_{category}_{prompt_type}_prompt"
+        if hasattr(self, method_name):
+            method = getattr(self, method_name)
+            return method(**kwargs)
+        else:
+            raise ValueError(f"Prompt not found: {category}.{prompt_type}")
+
+    def get_all_prompt_categories(self) -> List[str]:
+        """
+        Get list of all available prompt categories
+        """
+        return [
+            "core_system",
+            "conversation", 
+            "document_analysis",
+            "document_summarization",
+            "document_qa",
+            "web_content_analysis",
+            "web_content_integration",
+            "memory_extraction",
+            "context_integration",
+            "rag_response",
+            "rag_no_context",
+            "conversation_starter",
+            "conversation_summary",
+            "comparison_analysis",
+            "research_synthesis",
+            "problem_solving",
+            "error_explanation",
+            "clarification_request",
+            "streaming_response"
+        ]
+
+    def validate_prompt_inputs(self, **inputs) -> Dict[str, Any]:
+        """
+        Validate and sanitize prompt inputs
+        """
+        validated = {}
+
+        for key, value in inputs.items():
+            if isinstance(value, str):
+                # Truncate very long strings to prevent token issues
+                if len(value) > 10000:
+                    validated[key] = value[:10000] + "\n\n[Content truncated for processing...]"
+                else:
+                    validated[key] = value
+            elif isinstance(value, (list, dict)):
+                validated[key] = value
+            else:
+                validated[key] = str(value)
+
+        return validated
+
+# ==========================================
+# GLOBAL INSTANCE & CONVENIENCE FUNCTIONS
+# ==========================================
+
+# Create global instance for easy access
+juno_prompts = JunoAIPrompts()
+
+# Convenience functions for common prompt types
+def get_main_conversation_prompt(user_message: str, **kwargs) -> str:
+    """Get the main conversation prompt with all context"""
+    return juno_prompts.get_conversation_prompt(user_message, **kwargs)
+
+def get_document_summary_prompt(text: str, max_length: int = 500) -> str:
+    """Get document summarization prompt"""
+    return juno_prompts.get_document_summarization_prompt(text, max_length)
+
+def get_rag_prompt(user_query: str, retrieved_chunks: List[str]) -> str:
+    """Get RAG response prompt"""
+    return juno_prompts.get_rag_response_prompt(user_query, retrieved_chunks)
+
+def get_streaming_prompt(user_message: str, context: str = "") -> str:
+    """Get optimized streaming response prompt"""
+    return juno_prompts.get_streaming_response_prompt(user_message, context)
+
+def get_fallback_responses() -> List[str]:
+    """Get fallback response templates"""
+    return juno_prompts.get_fallback_response_templates()
+
+# ==========================================
+# EXAMPLE USAGE
+# ==========================================
+
+if __name__ == "__main__":
+    # Example usage of the Juno AI Prompts system
+    prompts = JunoAIPrompts()
+
+    # Example 1: Basic conversation prompt
+    conversation_prompt = prompts.get_conversation_prompt(
+        user_message="How can you help me analyze documents?",
+        context="User has uploaded a research paper about AI",
+        conversation_history=[
+            {"user": "Hello", "bot": "Hi! How can I help you today?"}
+        ]
+    )
+    print("CONVERSATION PROMPT:")
+    print(conversation_prompt[:500] + "...")
+    print("\n" + "="*50 + "\n")
+
+    # Example 2: Document analysis prompt
+    doc_analysis_prompt = prompts.get_document_analysis_prompt(
+        document_text="This is a sample document about AI technology...",
+        filename="ai_research_paper.pdf"
+    )
+    print("DOCUMENT ANALYSIS PROMPT:")
+    print(doc_analysis_prompt[:500] + "...")
+    print("\n" + "="*50 + "\n")
+
+    # Example 3: RAG prompt
+    rag_prompt = prompts.get_rag_response_prompt(
+        user_query="What are the benefits of AI?",
+        retrieved_chunks=[
+            "AI provides automation capabilities...",
+            "Machine learning improves over time..."
+        ]
+    )
+    print("RAG PROMPT:")
+    print(rag_prompt[:500] + "...")

requirements.txt

@@ -0,0 +1,17 @@
+python-dotenv
+google-generativeai
+langchain
+langchain-google-genai
+chromadb
+pypdf2
+sentence-transformers
+flask
+flask-cors
+faiss-cpu
+tiktoken
+requests
+beautifulsoup4
+pytesseract
+Pillow
+opencv-python-headless
+pdf2image

script.js

@@ -0,0 +1,858 @@
+class ChatbotUI {
+    constructor() {
+        this.apiBase = 'http://localhost:5000/api';
+        this.isTyping = false;
+        this.hasDocuments = false;
+        this.conversations = [];
+        this.currentConversationId = null;
+        this.isStreaming = false;
+
+        // Speech recognition properties
+        this.recognition = null;
+        this.isRecording = false;
+        this.isListening = false;
+
+        this.initializeElements();
+        this.attachEventListeners();
+        this.applyInitialTheme();
+        this.loadConversations();
+        this.initializeSpeechRecognition();
+    }
+
+    initializeElements() {
+        // Main elements
+        this.messagesContainer = document.getElementById('messagesContainer');
+        this.messageInput = document.getElementById('messageInput');
+        this.sendBtn = document.getElementById('sendBtn');
+        this.fileInput = document.getElementById('fileInput');
+        this.documentStatus = document.getElementById('documentStatus');
+        this.welcomeMessage = document.getElementById('welcomeMessage');
+
+        // Buttons
+        this.attachBtn = document.getElementById('attachBtn');
+        this.memoryBtn = document.getElementById('memoryBtn');
+        this.clearBtn = document.getElementById('clearBtn');
+        this.themeToggleBtn = document.getElementById('themeToggleBtn');
+        this.voiceBtn = document.getElementById('voiceBtn');
+        this.stopVoiceBtn = document.getElementById('stopVoiceBtn');
+        this.conversationsBtn = document.getElementById('conversationsBtn');
+
+        // Modal and sidebar
+        this.memoryModal = document.getElementById('memoryModal');
+        this.closeModalBtn = document.getElementById('closeModalBtn');
+        this.memoryContent = document.getElementById('memoryContent');
+        this.sidebar = document.getElementById('sidebar');
+        this.closeSidebarBtn = document.getElementById('closeSidebarBtn');
+
+        // Voice modal and loading
+        this.voiceModal = document.getElementById('voiceModal');
+        this.loadingOverlay = document.getElementById('loadingOverlay');
+    }
+
+    initializeSpeechRecognition() {
+        // Check if speech recognition is supported
+        if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
+            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+            this.recognition = new SpeechRecognition();
+
+            // Configure recognition settings
+            this.recognition.continuous = true;
+            this.recognition.interimResults = true;
+            this.recognition.lang = 'en-US';
+
+            // Event handlers
+            this.recognition.onstart = () => {
+                console.log('🎤 Speech recognition started');
+                this.isListening = true;
+                this.voiceBtn.classList.add('voice-recording');
+                this.showVoiceModal();
+            };
+
+            this.recognition.onresult = (event) => {
+                let finalTranscript = '';
+                let interimTranscript = '';
+
+                for (let i = event.resultIndex; i < event.results.length; i++) {
+                    const transcript = event.results[i][0].transcript;
+                    if (event.results[i].isFinal) {
+                        finalTranscript += transcript;
+                    } else {
+                        interimTranscript += transcript;
+                    }
+                }
+
+                // Update input field with transcription
+                this.messageInput.value = finalTranscript + interimTranscript;
+                this.autoResizeInput();
+                this.updateSendButton();
+            };
+
+            this.recognition.onerror = (event) => {
+                console.error('🎤 Speech recognition error:', event.error);
+                this.showNotification(`Voice recognition error: ${event.error}`, 'error');
+                this.stopVoiceRecording();
+            };
+
+            this.recognition.onend = () => {
+                console.log('🎤 Speech recognition ended');
+                this.isListening = false;
+                this.stopVoiceRecording();
+            };
+        } else {
+            console.warn('🎤 Speech recognition not supported in this browser');
+        }
+    }
+
+    attachEventListeners() {
+        // Send message events
+        this.sendBtn.addEventListener('click', () => this.sendMessage());
+
+        // Shift+Enter for new line
+        this.messageInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                if (e.shiftKey) {
+                    return;
+                } else {
+                    e.preventDefault();
+                    this.sendMessage();
+                }
+            }
+        });
+
+        // File upload events
+        this.attachBtn.addEventListener('click', () => this.fileInput.click());
+        this.fileInput.addEventListener('change', (e) => this.handleFileUpload(e));
+
+        // Voice events
+        this.voiceBtn.addEventListener('click', () => this.toggleVoiceRecording());
+        this.stopVoiceBtn.addEventListener('click', () => this.stopVoiceRecording());
+
+        // Close voice modal on click outside
+        this.voiceModal.addEventListener('click', (e) => {
+            if (e.target === this.voiceModal) {
+                this.stopVoiceRecording();
+            }
+        });
+
+        // Conversations button (Menu button)
+        this.conversationsBtn.addEventListener('click', () => this.toggleSidebar());
+
+        // Modal events
+        this.memoryBtn.addEventListener('click', () => this.showMemory());
+        this.closeModalBtn.addEventListener('click', () => this.hideMemory());
+        this.memoryModal.addEventListener('click', (e) => {
+            if (e.target === this.memoryModal) this.hideMemory();
+        });
+
+        // Clear session
+        this.clearBtn.addEventListener('click', () => this.clearSession());
+
+        // Sidebar events
+        this.closeSidebarBtn.addEventListener('click', () => this.closeSidebar());
+
+        // Auto-resize textarea
+        this.messageInput.addEventListener('input', () => {
+            this.autoResizeInput();
+            this.updateSendButton();
+        });
+
+        // Theme toggle
+        this.themeToggleBtn.addEventListener('click', () => this.toggleTheme());
+
+        // Web scraping button
+        const scrapeBtn = document.getElementById('scrapeBtn');
+        if (scrapeBtn) {
+            scrapeBtn.addEventListener('click', () => this.scrapeWebsite());
+        }
+
+        // Save conversation button
+        const saveConvBtn = document.getElementById('saveConvBtn');
+        if (saveConvBtn) {
+            saveConvBtn.addEventListener('click', () => this.saveConversation());
+        }
+
+        // New conversation button
+        const newConvBtn = document.getElementById('newConvBtn');
+        if (newConvBtn) {
+            newConvBtn.addEventListener('click', () => this.newConversation());
+        }
+    }
+
+    // Quick Action Button Helper
+    fillInput(text) {
+        this.messageInput.value = text;
+        this.updateSendButton();
+        this.autoResizeInput();
+        this.messageInput.focus();
+    }
+
+    // Toggle sidebar method
+    toggleSidebar() {
+        this.sidebar.classList.toggle('active');
+        if (this.sidebar.classList.contains('active')) {
+            this.loadConversations(); // Refresh conversations when opening
+        }
+    }
+
+    // Loading overlay methods
+    showLoading() {
+        if (this.loadingOverlay) {
+            this.loadingOverlay.classList.add('active');
+        }
+    }
+
+    hideLoading() {
+        if (this.loadingOverlay) {
+            this.loadingOverlay.classList.remove('active');
+        }
+    }
+
+    // Voice Recording Methods
+    toggleVoiceRecording() {
+        if (!this.recognition) {
+            this.showNotification('Speech recognition not supported in this browser', 'error');
+            return;
+        }
+
+        if (this.isRecording) {
+            this.stopVoiceRecording();
+        } else {
+            this.startVoiceRecording();
+        }
+    }
+
+    startVoiceRecording() {
+        if (this.isRecording || !this.recognition) return;
+
+        try {
+            this.isRecording = true;
+            this.recognition.start();
+            console.log('🎤 Starting voice recording...');
+        } catch (error) {
+            console.error('🎤 Error starting voice recording:', error);
+            this.showNotification('Failed to start voice recording', 'error');
+            this.isRecording = false;
+        }
+    }
+
+    stopVoiceRecording() {
+        if (!this.isRecording && !this.isListening) return;
+
+        try {
+            if (this.recognition) {
+                this.recognition.stop();
+            }
+
+            this.isRecording = false;
+            this.isListening = false;
+            this.voiceBtn.classList.remove('voice-recording');
+            this.hideVoiceModal();
+
+            console.log('🎤 Voice recording stopped');
+
+            // Auto-send if there's content and user preference
+            if (this.messageInput.value.trim()) {
+                this.updateSendButton();
+                this.messageInput.focus();
+            }
+        } catch (error) {
+            console.error('🎤 Error stopping voice recording:', error);
+        }
+    }
+
+    showVoiceModal() {
+        this.voiceModal.classList.add('active');
+        document.body.style.overflow = 'hidden';
+    }
+
+    hideVoiceModal() {
+        this.voiceModal.classList.remove('active');
+        document.body.style.overflow = 'auto';
+    }
+
+    async sendMessage() {
+        const message = this.messageInput.value.trim();
+        if (!message || this.isTyping) return;
+
+        // Use streaming for better UX
+        await this.sendMessageWithStreaming(message);
+    }
+
+    // Conversation Management
+    async loadConversations() {
+        try {
+            const response = await fetch(`${this.apiBase}/conversations`);
+            const data = await response.json();
+            if (response.ok) {
+                this.conversations = data.conversations;
+                this.updateConversationsList();
+            }
+        } catch (error) {
+            console.error('Error loading conversations:', error);
+        }
+    }
+
+    updateConversationsList() {
+        const conversationsList = document.getElementById('conversationsList');
+        if (!conversationsList) return;
+
+        conversationsList.innerHTML = '';
+        this.conversations.forEach(conversation => {
+            const conversationItem = document.createElement('div');
+            conversationItem.className = 'conversation-item';
+            if (conversation.id === this.currentConversationId) {
+                conversationItem.classList.add('active');
+            }
+
+            conversationItem.innerHTML = `
+                <div class="conversation-info">
+                    <div class="conversation-title">${conversation.title}</div>
+                    <div class="conversation-meta">${conversation.message_count} messages • ${new Date(conversation.last_updated).toLocaleDateString()}</div>
+                </div>
+                <div class="conversation-actions">
+                    <button class="btn-icon" onclick="chatbot.loadConversation('${conversation.id}')" title="Load">
+                        <i class="fas fa-folder-open"></i>
+                    </button>
+                    <button class="btn-icon" onclick="chatbot.deleteConversation('${conversation.id}')" title="Delete">
+                        <i class="fas fa-trash"></i>
+                    </button>
+                </div>
+            `;
+
+            conversationsList.appendChild(conversationItem);
+        });
+    }
+
+    async sendMessageWithStreaming(message) {
+        this.addMessage(message, 'user');
+        this.messageInput.value = '';
+        this.autoResizeInput();
+        this.updateSendButton();
+        this.showTypingIndicator();
+
+        try {
+            const response = await fetch(`${this.apiBase}/chat/stream`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ message: message })
+            });
+
+            const data = await response.json();
+            this.hideTypingIndicator();
+
+            if (response.ok) {
+                const botMessage = data.response;
+                const hasContext = data.has_context;
+
+                // Add bot message without any prefix
+                this.addMessage(botMessage, 'bot');
+
+                // Only show context notification when document context is actually used
+                if (hasContext && botMessage.includes('document')) {
+                    this.showNotification('Response based on uploaded documents', 'info');
+                }
+            } else {
+                throw new Error(data.error || 'Failed to get response');
+            }
+        } catch (error) {
+            this.hideTypingIndicator();
+            this.addMessage(`❌ Error: ${error.message}`, 'bot');
+            this.showNotification(`Error: ${error.message}`, 'error');
+        }
+    }
+
+    addMessage(content, sender) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${sender} fade-in`;
+
+        const timestamp = new Date().toLocaleTimeString([], { 
+            hour: '2-digit', 
+            minute: '2-digit' 
+        });
+
+        // Create avatar HTML for both user and bot
+        let avatarHtml = '';
+        if (sender === 'user') {
+            // User avatar with 'U'
+            avatarHtml = `
+                <div class="message-avatar user-avatar">
+                    <span class="avatar-text">U</span>
+                </div>
+            `;
+        } else {
+            // Bot avatar with image
+            avatarHtml = `
+                <div class="message-avatar bot-avatar">
+                    <img src="juno avatar.jpg" alt="Bot Avatar">
+                </div>
+            `;
+        }
+
+        messageDiv.innerHTML = `
+            ${avatarHtml}
+            <div class="message-content">
+                <div class="message-bubble">
+                    <div class="message-text">${this.formatMessage(content)}</div>
+                </div>
+                <div class="message-time">${timestamp}</div>
+            </div>
+        `;
+
+        this.messagesContainer.appendChild(messageDiv);
+        this.scrollToBottom();
+
+        // Hide welcome message after first user message
+        if (sender === 'user' && this.welcomeMessage) {
+            this.welcomeMessage.style.display = 'none';
+        }
+    }
+
+    formatMessage(text) {
+        return text
+            .replace(/\n/g, '<br>')
+            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+            .replace(/\*(.*?)\*/g, '<em>$1</em>')
+            .replace(/`(.*?)`/g, '<code>$1</code>');
+    }
+
+    showTypingIndicator() {
+        this.isTyping = true;
+        this.sendBtn.disabled = true;
+
+        const typingDiv = document.createElement('div');
+        typingDiv.className = 'message bot typing fade-in';
+        typingDiv.innerHTML = `
+            <div class="message-avatar bot-avatar">
+                <img src="juno avatar.jpg" alt="Bot Avatar">
+            </div>
+            <div class="message-content">
+                <div class="typing-indicator">
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                </div>
+            </div>
+        `;
+
+        this.messagesContainer.appendChild(typingDiv);
+        this.scrollToBottom();
+    }
+
+    hideTypingIndicator() {
+        this.isTyping = false;
+        this.sendBtn.disabled = false;
+        const typingIndicator = this.messagesContainer.querySelector('.typing');
+        if (typingIndicator) {
+            typingIndicator.remove();
+        }
+    }
+
+    handleFileUpload(event) {
+        const file = event.target.files[0];
+        if (file) {
+            this.processFile(file);
+        }
+    }
+
+    async processFile(file) {
+        if (file.type !== 'application/pdf') {
+            this.showNotification('Please select a PDF file', 'error');
+            return;
+        }
+
+        const formData = new FormData();
+        formData.append('file', file);
+        this.showLoading();
+        this.showNotification(`Uploading ${file.name}...`, 'info');
+
+        try {
+            const response = await fetch(`${this.apiBase}/upload`, {
+                method: 'POST',
+                body: formData
+            });
+
+            const data = await response.json();
+            this.hideLoading();
+
+            if (response.ok) {
+                this.hasDocuments = true;
+                this.updateDocumentStatus(`Processed: ${data.filename}`, true);
+
+                // Hide welcome message when document is uploaded
+                if (this.welcomeMessage) {
+                    this.welcomeMessage.style.display = 'none';
+                }
+
+                this.addMessage(
+                    `📄 **Document Processed Successfully**\n\n**File:** ${data.filename}\n**Length:** ${data.text_length.toLocaleString()} characters\n\n**Summary:**\n${data.summary}`,
+                    'bot'
+                );
+                this.showNotification('Document processed successfully!', 'success');
+            } else {
+                throw new Error(data.error || 'Failed to upload file');
+            }
+
+        } catch (error) {
+            this.hideLoading();
+            this.showNotification(`Upload failed: ${error.message}`, 'error');
+        }
+
+        this.fileInput.value = '';
+    }
+
+    updateDocumentStatus(message, hasDocuments) {
+        const iconClass = hasDocuments ? 'fas fa-file-pdf' : 'fas fa-file-pdf';
+        const color = hasDocuments ? 'var(--success-color)' : 'var(--text-muted)';
+        this.documentStatus.innerHTML = `<i class="${iconClass}" style="color: ${color};"></i><span>${message}</span>`;
+    }
+
+    async showMemory() {
+        try {
+            const response = await fetch(`${this.apiBase}/memory`);
+            const data = await response.json();
+
+            let memoryHtml = `**Session ID:** ${data.session_id}
+**Chat History:** ${data.chat_history_length} messages
+**Documents Loaded:** ${data.has_vectorstore ? 'Yes' : 'No'}
+
+**Memory Data:**
+${JSON.stringify(data.memory, null, 2)}`;
+
+            this.memoryContent.innerHTML = `<pre>${memoryHtml}</pre>`;
+            this.memoryModal.classList.add('active');
+        } catch (error) {
+            this.showNotification(`Failed to load memory: ${error.message}`, 'error');
+        }
+    }
+
+    hideMemory() {
+        this.memoryModal.classList.remove('active');
+    }
+
+    async clearSession() {
+        if (!confirm('Are you sure you want to clear the current session? This will remove all chat history and uploaded documents.')) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`${this.apiBase}/clear`, {
+                method: 'POST'
+            });
+
+            const data = await response.json();
+
+            if (response.ok) {
+                this.messagesContainer.innerHTML = `
+                    <div class="welcome-message" id="welcomeMessage">
+                        <div class="welcome-icon">
+                            <img src="juno logo.jpg" alt="Juno Logo" class="welcome-logo">
+                        </div>
+                        <h2>Welcome to AI Assistant</h2>
+                        <p>Upload documents, ask questions, or start a conversation!</p>
+
+                        <div class="feature-grid">
+                            <div class="feature-item">
+                                <i class="fas fa-file-upload"></i>
+                                <span>Upload PDFs</span>
+                            </div>
+                            <div class="feature-item">
+                                <i class="fas fa-brain"></i>
+                                <span>Smart Memory</span>
+                            </div>
+                            <div class="feature-item">
+                                <i class="fas fa-globe"></i>
+                                <span>Web Scraping</span>
+                            </div>
+                            <div class="feature-item">
+                                <i class="fas fa-microphone"></i>
+                                <span>Voice Input</span>
+                            </div>
+                        </div>
+
+                        <div class="quick-actions">
+                            <button class="quick-btn" onclick="chatbot.fillInput('Summarize this document')">
+                                <i class="fas fa-file-text"></i> Summarize Doc
+                            </button>
+                            <button class="quick-btn" onclick="chatbot.fillInput('Extract key insights from this content')">
+                                <i class="fas fa-lightbulb"></i> Key Insights
+                            </button>
+                            <button class="quick-btn" onclick="chatbot.fillInput('What is the main topic of this document?')">
+                                <i class="fas fa-bullseye"></i> Main Topic
+                            </button>
+                            <button class="quick-btn" onclick="chatbot.fillInput('List the important points mentioned')">
+                                <i class="fas fa-list"></i> Key Points
+                            </button>
+                        </div>
+                    </div>
+                `;
+
+                // Re-initialize welcome message reference
+                this.welcomeMessage = document.getElementById('welcomeMessage');
+
+                this.hasDocuments = false;
+                this.updateDocumentStatus('No documents loaded', false);
+                this.showNotification('Session cleared successfully!', 'success');
+                this.currentConversationId = null;
+                this.loadConversations();
+            } else {
+                throw new Error(data.error || 'Failed to clear session');
+            }
+
+        } catch (error) {
+            this.showNotification(`Clear failed: ${error.message}`, 'error');
+        }
+    }
+
+    async scrapeWebsite() {
+        const url = prompt('Enter the website URL to scrape:');
+        if (!url) return;
+
+        this.showLoading();
+        this.showNotification('Scraping website...', 'info');
+
+        try {
+            const response = await fetch(`${this.apiBase}/scrape`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ url: url })
+            });
+
+            const data = await response.json();
+            this.hideLoading();
+
+            if (response.ok) {
+                this.hasDocuments = true;
+                this.updateDocumentStatus(`Scraped: ${data.url}`, true);
+
+                // Hide welcome message when content is scraped
+                if (this.welcomeMessage) {
+                    this.welcomeMessage.style.display = 'none';
+                }
+
+                this.addMessage(
+                    `🌐 **Website Scraped Successfully**\n\n**URL:** ${data.url}\n**Content Length:** ${data.content_length.toLocaleString()} characters\n\n**Summary:**\n${data.summary}`,
+                    'bot'
+                );
+                this.showNotification('Website scraped successfully!', 'success');
+            } else {
+                throw new Error(data.error || 'Failed to scrape website');
+            }
+
+        } catch (error) {
+            this.hideLoading();
+            this.showNotification(`Scraping failed: ${error.message}`, 'error');
+        }
+    }
+
+    closeSidebar() {
+        this.sidebar.classList.remove('active');
+    }
+
+    autoResizeInput() {
+        this.messageInput.style.height = 'auto';
+        this.messageInput.style.height = Math.min(this.messageInput.scrollHeight, 120) + 'px';
+    }
+
+    updateSendButton() {
+        const hasText = this.messageInput.value.trim().length > 0;
+        this.sendBtn.disabled = !hasText || this.isTyping;
+    }
+
+    scrollToBottom() {
+        this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
+    }
+
+    showNotification(message, type = 'info', duration = 4000) {
+        const notification = document.createElement('div');
+        notification.className = `notification ${type}`;
+        notification.textContent = message;
+
+        document.body.appendChild(notification);
+
+        // Auto-hide notifications except errors
+        if (type !== 'error') {
+            setTimeout(() => {
+                if (document.body.contains(notification)) {
+                    notification.remove();
+                }
+            }, duration);
+        } else {
+            setTimeout(() => {
+                if (document.body.contains(notification)) {
+                    notification.remove();
+                }
+            }, 7000); // Errors stay longer
+        }
+    }
+
+    applyInitialTheme() {
+        const savedTheme = localStorage.getItem('theme') || 'light';
+        document.body.setAttribute('data-theme', savedTheme);
+        this.updateThemeIcon(savedTheme);
+    }
+
+    toggleTheme() {
+        const currentTheme = document.body.getAttribute('data-theme');
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+        document.body.setAttribute('data-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+        this.updateThemeIcon(newTheme);
+    }
+
+    updateThemeIcon(theme) {
+        const icon = this.themeToggleBtn.querySelector('i');
+        icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
+    }
+
+    // Conversation management methods
+    async saveConversation() {
+        const title = prompt('Enter conversation title:') || `Chat ${new Date().toLocaleString()}`;
+
+        try {
+            const response = await fetch(`${this.apiBase}/conversations`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ title: title })
+            });
+
+            const data = await response.json();
+
+            if (response.ok) {
+                this.showNotification('Conversation saved successfully!', 'success');
+                this.loadConversations();
+            } else {
+                throw new Error(data.error || 'Failed to save conversation');
+            }
+
+        } catch (error) {
+            this.showNotification(`Save failed: ${error.message}`, 'error');
+        }
+    }
+
+    async loadConversation(conversationId) {
+        try {
+            const response = await fetch(`${this.apiBase}/conversations/${conversationId}`);
+            const data = await response.json();
+
+            if (response.ok) {
+                this.currentConversationId = conversationId;
+                this.messagesContainer.innerHTML = '';
+
+                // Hide welcome message when loading conversation
+                if (this.welcomeMessage) {
+                    this.welcomeMessage.style.display = 'none';
+                }
+
+                // Load messages
+                data.conversation.messages.forEach(msg => {
+                    this.addMessage(msg.user, 'user');
+                    this.addMessage(msg.bot, 'bot');
+                });
+
+                this.showNotification('Conversation loaded successfully!', 'success');
+                this.updateConversationsList();
+                this.closeSidebar();
+            } else {
+                throw new Error(data.error || 'Failed to load conversation');
+            }
+
+        } catch (error) {
+            this.showNotification(`Load failed: ${error.message}`, 'error');
+        }
+    }
+
+    async deleteConversation(conversationId) {
+        if (!confirm('Are you sure you want to delete this conversation?')) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`${this.apiBase}/conversations/${conversationId}`, {
+                method: 'DELETE'
+            });
+
+            const data = await response.json();
+
+            if (response.ok) {
+                this.showNotification('Conversation deleted successfully!', 'success');
+                this.loadConversations();
+
+                if (this.currentConversationId === conversationId) {
+                    this.currentConversationId = null;
+                }
+            } else {
+                throw new Error(data.error || 'Failed to delete conversation');
+            }
+
+        } catch (error) {
+            this.showNotification(`Delete failed: ${error.message}`, 'error');
+        }
+    }
+
+    newConversation() {
+        this.currentConversationId = null;
+        this.messagesContainer.innerHTML = `
+            <div class="welcome-message" id="welcomeMessage">
+                <div class="welcome-icon">
+                    <img src="juno logo.jpg" alt="Juno Logo" class="welcome-logo">
+                </div>
+                <h2>Welcome to AI Assistant</h2>
+                <p>Upload documents, ask questions, or start a conversation!</p>
+
+                <div class="feature-grid">
+                    <div class="feature-item">
+                        <i class="fas fa-file-upload"></i>
+                        <span>Upload PDFs</span>
+                    </div>
+                    <div class="feature-item">
+                        <i class="fas fa-brain"></i>
+                        <span>Smart Memory</span>
+                    </div>
+                    <div class="feature-item">
+                        <i class="fas fa-globe"></i>
+                        <span>Web Scraping</span>
+                    </div>
+                    <div class="feature-item">
+                        <i class="fas fa-microphone"></i>
+                        <span>Voice Input</span>
+                    </div>
+                </div>
+
+                <div class="quick-actions">
+                    <button class="quick-btn" onclick="chatbot.fillInput('Summarize this document')">
+                        <i class="fas fa-file-text"></i> Summarize Doc
+                    </button>
+                    <button class="quick-btn" onclick="chatbot.fillInput('Extract key insights from this content')">
+                        <i class="fas fa-lightbulb"></i> Key Insights
+                    </button>
+                    <button class="quick-btn" onclick="chatbot.fillInput('What is the main topic of this document?')">
+                        <i class="fas fa-bullseye"></i> Main Topic
+                    </button>
+                    <button class="quick-btn" onclick="chatbot.fillInput('List the important points mentioned')">
+                        <i class="fas fa-list"></i> Key Points
+                    </button>
+                </div>
+            </div>
+        `;
+
+        // Re-initialize welcome message reference
+        this.welcomeMessage = document.getElementById('welcomeMessage');
+
+        this.updateConversationsList();
+        this.closeSidebar();
+        this.showNotification('New conversation started!', 'success');
+    }
+}
+
+// Initialize the chatbot when the page loads
+let chatbot;
+document.addEventListener('DOMContentLoaded', () => {
+    chatbot = new ChatbotUI();
+});

styles.css

@@ -0,0 +1,1179 @@
+:root {
+--primary-color: #667eea;
+--primary-dark: #5a67d8;
+--secondary-color: #764ba2;
+--success-color: #48bb78;
+--warning-color: #ed8936;
+--error-color: #f56565;
+--text-primary: #2d3748;
+--text-secondary: #4a5568;
+--text-muted: #718096;
+--bg-primary: #ffffff;
+--bg-secondary: #f7fafc;
+--bg-tertiary: #edf2f7;
+--bg-overlay: rgba(255, 255, 255, 0.9);
+--border-color: #e2e8f0;
+--border-light: #f1f5f9;
+--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+--border-radius: 12px;
+--radius-sm: 0.375rem;
+--radius-md: 0.5rem;
+--radius-lg: 0.75rem;
+--radius-xl: 1rem;
+--radius-full: 9999px;
+--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body[data-theme="dark"] {
+--success-color: #38a169;
+--warning-color: #dd6b20;
+--error-color: #e53e3e;
+--text-primary: #edf2f7;
+--text-secondary: #a0aec0;
+--text-muted: #718096;
+--bg-primary: #1a202c;
+--bg-secondary: #2d3748;
+--bg-tertiary: #4a5568;
+--bg-overlay: rgba(26, 32, 44, 0.9);
+--border-color: #4a5568;
+--border-light: #2d3748;
+--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+}
+
+* {
+margin: 0;
+padding: 0;
+box-sizing: border-box;
+}
+
+body {
+font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+background: var(--bg-secondary);
+min-height: 100vh;
+color: var(--text-primary);
+line-height: 1.6;
+transition: var(--transition);
+}
+
+.app-container {
+display: flex;
+flex-direction: column;
+height: 100vh;
+width: 100%;
+margin: 0;
+background: var(--bg-primary);
+box-shadow: var(--shadow-lg);
+border-radius: 0;
+overflow: hidden;
+}
+
+/* Header Styles - RESTORED PREVIOUS GRADIENT BACKGROUND */
+.header {
+background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+color: white;
+padding: 1rem 2rem;
+box-shadow: var(--shadow-sm);
+}
+
+.header-content {
+display: flex;
+justify-content: space-between;
+align-items: center;
+}
+
+.logo {
+display: flex;
+align-items: center;
+gap: 0.75rem;
+}
+
+.logo-image {
+width: 40px;
+height: 40px;
+border-radius: var(--radius-lg);
+object-fit: cover;
+box-shadow: var(--shadow-md);
+}
+
+.logo h1 {
+font-size: 1.5rem;
+font-weight: 600;
+margin: 0;
+}
+
+.header-actions {
+display: flex;
+gap: 0.75rem;
+}
+
+/* Button Styles - RESTORED PREVIOUS STYLING */
+.btn-secondary {
+background: rgba(255, 255, 255, 0.2);
+color: white;
+border: 1px solid rgba(255, 255, 255, 0.3);
+padding: 0.5rem 1rem;
+border-radius: 8px;
+font-size: 0.875rem;
+font-weight: 500;
+cursor: pointer;
+transition: var(--transition);
+display: flex;
+align-items: center;
+gap: 0.5rem;
+}
+
+#themeToggleBtn, #conversationsBtn {
+padding: 0.5rem 0.8rem;
+}
+
+.btn-secondary:hover {
+background: rgba(255, 255, 255, 0.3);
+transform: translateY(-2px);
+}
+
+.btn-icon {
+background: transparent;
+border: none;
+padding: 0.5rem;
+border-radius: 8px;
+cursor: pointer;
+color: var(--text-muted);
+transition: var(--transition);
+display: flex;
+align-items: center;
+justify-content: center;
+}
+
+.btn-icon:hover {
+background: var(--bg-tertiary);
+color: var(--primary-color);
+}
+
+/* Input Area Styling - Fixed Alignment */
+.input-area {
+padding: 0.75rem 2rem;
+background: var(--bg-overlay);
+backdrop-filter: blur(12px);
+border-top: 1px solid var(--border-color);
+box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1);
+}
+
+.input-wrapper {
+display: flex;
+align-items: center;
+gap: 0.75rem;
+background: var(--bg-primary);
+border: 2px solid var(--border-color);
+border-radius: var(--radius-xl);
+padding: 0.75rem;
+box-shadow: var(--shadow-lg);
+transition: var(--transition);
+min-height: 56px;
+}
+
+.input-wrapper:focus-within {
+border-color: var(--primary-color);
+box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.input-actions-left,
+.input-actions-right {
+display: flex;
+align-items: center;
+gap: 0.5rem;
+}
+
+.action-btn {
+width: 40px;
+height: 40px;
+border: none;
+border-radius: var(--radius-lg);
+cursor: pointer;
+display: flex;
+align-items: center;
+justify-content: center;
+font-size: 1rem;
+transition: var(--transition);
+position: relative;
+overflow: hidden;
+flex-shrink: 0;
+}
+
+.upload-btn,
+.scrape-btn,
+.voice-btn {
+background: var(--bg-secondary);
+color: var(--text-secondary);
+border: 1px solid var(--border-color);
+}
+
+.upload-btn:hover,
+.scrape-btn:hover,
+.voice-btn:hover {
+background: var(--bg-tertiary);
+color: var(--text-primary);
+transform: scale(1.05);
+}
+
+.send-btn {
+background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+color: white;
+box-shadow: var(--shadow-md);
+}
+
+.send-btn:enabled:hover {
+transform: scale(1.05);
+box-shadow: var(--shadow-lg);
+}
+
+.send-btn:disabled {
+opacity: 0.5;
+cursor: not-allowed;
+transform: none;
+}
+
+.input-field-wrapper {
+flex: 1;
+position: relative;
+display: flex;
+align-items: center;
+}
+
+#messageInput {
+width: 100%;
+border: none;
+outline: none;
+background: transparent;
+font-family: inherit;
+font-size: 1rem;
+color: var(--text-primary);
+resize: none;
+min-height: 40px;
+max-height: 120px;
+padding: 0.5rem 0;
+line-height: 1.5;
+}
+
+#messageInput::placeholder {
+color: var(--text-muted);
+}
+
+/* Voice Recording State */
+.voice-recording {
+background: var(--error-color) !important;
+color: white !important;
+animation: voicePulse 2s infinite;
+}
+
+@keyframes voicePulse {
+0% { box-shadow: 0 0 0 0 rgba(245, 101, 101, 0.7); }
+70% { box-shadow: 0 0 0 10px rgba(245, 101, 101, 0); }
+100% { box-shadow: 0 0 0 0 rgba(245, 101, 101, 0); }
+}
+
+/* Main Content */
+.main-content {
+display: flex;
+flex: 1;
+overflow: hidden;
+}
+
+.chat-container {
+flex: 1;
+display: flex;
+flex-direction: column;
+background: var(--bg-primary);
+}
+
+.chat-header {
+padding: 1rem 2rem;
+border-bottom: 1px solid var(--border-color);
+display: flex;
+justify-content: space-between;
+align-items: center;
+background: var(--bg-secondary);
+}
+
+.status-indicator {
+display: flex;
+align-items: center;
+gap: 0.5rem;
+font-size: 0.875rem;
+color: var(--text-secondary);
+}
+
+.status-dot {
+width: 8px;
+height: 8px;
+border-radius: 50%;
+background: var(--text-muted);
+}
+
+.status-dot.active {
+background: var(--success-color);
+animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+0% { opacity: 1; }
+50% { opacity: 0.5; }
+100% { opacity: 1; }
+}
+
+.document-status {
+display: flex;
+align-items: center;
+gap: 0.5rem;
+font-size: 0.875rem;
+color: var(--text-secondary);
+}
+
+/* Messages */
+.messages-container {
+flex: 1;
+overflow-y: auto;
+padding: 2rem;
+background: var(--bg-secondary);
+}
+
+/* RESTORED PREVIOUS WELCOME MESSAGE CONTAINER */
+.welcome-message {
+text-align: center;
+max-width: 700px;
+margin: 2rem auto;
+padding: 2rem;
+background: var(--bg-overlay);
+backdrop-filter: blur(12px);
+border-radius: var(--radius-xl);
+box-shadow: var(--shadow-lg);
+border: 1px solid var(--border-color);
+}
+
+.welcome-icon {
+margin-bottom: 1rem;
+}
+
+.welcome-logo {
+width: 64px;
+height: 64px;
+border-radius: var(--radius-xl);
+object-fit: cover;
+box-shadow: var(--shadow-xl);
+}
+
+.welcome-message h2 {
+margin-bottom: 0.5rem;
+color: var(--text-primary);
+font-weight: 600;
+font-size: 1.75rem;
+}
+
+.welcome-message p {
+color: var(--text-secondary);
+margin-bottom: 2rem;
+font-size: 1rem;
+}
+
+.feature-grid {
+display: grid;
+grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+gap: 1rem;
+margin-bottom: 2rem;
+}
+
+.feature-item {
+display: flex;
+flex-direction: column;
+align-items: center;
+gap: 0.5rem;
+padding: 1rem;
+background: var(--bg-secondary);
+border-radius: var(--radius-lg);
+color: var(--text-secondary);
+font-size: 0.875rem;
+transition: transform 0.25s cubic-bezier(.4,2,.35,1.3), box-shadow 0.18s;
+border: 1px solid var(--border-color);
+}
+
+.feature-item:hover {
+transform: scale(1.06) rotate(-1deg);
+box-shadow: 0 2px 32px 2px rgba(126,116,244,0.12);
+background: var(--bg-tertiary);
+}
+
+.feature-item i {
+font-size: 1.5rem;
+color: var(--primary-color);
+}
+
+/* Quick Actions */
+.quick-actions {
+display: flex;
+justify-content: center;
+gap: 0.75rem;
+flex-wrap: wrap;
+}
+
+.quick-btn {
+background: var(--bg-overlay);
+backdrop-filter: blur(12px);
+border: 1px solid var(--border-color);
+border-radius: var(--radius-full);
+padding: 0.6rem 1.25rem;
+cursor: pointer;
+display: flex;
+align-items: center;
+gap: 0.5rem;
+color: var(--text-primary);
+font-weight: 500;
+font-size: 0.85rem;
+transition: var(--transition);
+box-shadow: var(--shadow-md);
+}
+
+.quick-btn:hover {
+background: var(--primary-color);
+color: white;
+border-color: var(--primary-color);
+transform: translateY(-2px);
+}
+
+.message {
+margin-bottom: 1.5rem;
+display: flex;
+align-items: flex-start;
+gap: 0.75rem;
+animation: fadeInUp 0.3s ease-out;
+}
+
+@keyframes fadeInUp {
+from {
+opacity: 0;
+transform: translateY(20px);
+}
+to {
+opacity: 1;
+transform: translateY(0);
+}
+}
+
+.message.user {
+flex-direction: row-reverse;
+}
+
+/* Modern Attractive Avatars - KEEPING THE NEW BEAUTIFUL DESIGN */
+.message-avatar {
+width: 40px;
+height: 40px;
+border-radius: 50%;
+flex-shrink: 0;
+display: flex;
+align-items: center;
+justify-content: center;
+overflow: hidden;
+position: relative;
+background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+border: 3px solid rgba(255, 255, 255, 0.9);
+}
+
+/* Stylish User Avatar with Modern Design */
+.user-avatar {
+background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+position: relative;
+}
+
+.user-avatar::before {
+content: '';
+position: absolute;
+top: -2px;
+left: -2px;
+right: -2px;
+bottom: -2px;
+background: linear-gradient(45deg, var(--primary-color), var(--primary-dark), #667eea, #5a67d8);
+border-radius: 50%;
+z-index: -1;
+animation: avatarGlow 3s ease-in-out infinite alternate;
+}
+
+
+@keyframes avatarGlow {
+0% { opacity: 0.5; transform: scale(1); }
+100% { opacity: 0.8; transform: scale(1.05); }
+}
+
+.user-avatar .avatar-text {
+font-size: 1.1rem;
+font-weight: 700;
+color: white;
+text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+line-height: 1;
+}
+
+/* Stylish Bot Avatar with Modern Design */
+.bot-avatar {
+background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+padding: 0;
+border: 3px solid rgba(255, 255, 255, 0.9);
+position: relative;
+}
+
+.bot-avatar::before {
+content: '';
+position: absolute;
+top: -3px;
+left: -3px;
+right: -3px;
+bottom: -3px;
+background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c);
+border-radius: 50%;
+z-index: -1;
+animation: botAvatarGlow 4s ease-in-out infinite alternate;
+}
+
+@keyframes botAvatarGlow {
+0% { opacity: 0.3; }
+100% { opacity: 0.7; }
+}
+
+.bot-avatar img {
+width: 100%;
+height: 100%;
+object-fit: cover;
+border-radius: 50%;
+}
+
+/* Hover effects for avatars */
+.message-avatar:hover {
+transform: scale(1.1);
+transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.message-content {
+max-width: 70%;
+display: flex;
+flex-direction: column;
+}
+
+.message.user .message-content {
+align-items: flex-end;
+}
+
+.message.bot .message-content {
+align-items: flex-start;
+}
+
+.message-bubble {
+padding: 1rem 1.25rem;
+border-radius: var(--radius-xl);
+box-shadow: var(--shadow-lg);
+word-wrap: break-word;
+display: inline-block;
+max-width: 100%;
+text-align: left;
+position: relative;
+}
+
+.message.user .message-bubble {
+background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+color: white;
+border-bottom-right-radius: var(--radius-sm);
+}
+
+.message.bot .message-bubble {
+background: var(--bg-overlay);
+backdrop-filter: blur(12px);
+color: var(--text-primary);
+border: 1px solid var(--border-color);
+border-bottom-left-radius: var(--radius-sm);
+}
+
+.message-time {
+font-size: 0.75rem;
+color: var(--text-muted);
+margin-top: 0.5rem;
+text-align: right;
+}
+
+.message.bot .message-time {
+text-align: left;
+}
+
+/* Voice Modal */
+.voice-modal {
+position: fixed;
+top: 0;
+left: 0;
+right: 0;
+bottom: 0;
+background: rgba(15, 23, 42, 0.9);
+backdrop-filter: blur(12px);
+display: none;
+align-items: center;
+justify-content: center;
+z-index: 2000;
+}
+
+.voice-modal.active {
+display: flex;
+}
+
+.voice-content {
+text-align: center;
+color: white;
+padding: 3rem;
+max-width: 400px;
+}
+
+.voice-animation {
+display: flex;
+justify-content: center;
+align-items: center;
+gap: 4px;
+height: 60px;
+margin-bottom: 2rem;
+}
+
+.voice-wave {
+width: 4px;
+background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+border-radius: var(--radius-full);
+animation: voiceWave 1.2s ease-in-out infinite;
+}
+
+.voice-wave:nth-child(1) { animation-delay: 0s; }
+.voice-wave:nth-child(2) { animation-delay: 0.1s; }
+.voice-wave:nth-child(3) { animation-delay: 0.2s; }
+.voice-wave:nth-child(4) { animation-delay: 0.3s; }
+.voice-wave:nth-child(5) { animation-delay: 0.4s; }
+
+@keyframes voiceWave {
+0%, 100% {
+height: 20px;
+opacity: 0.5;
+}
+50% {
+height: 60px;
+opacity: 1;
+}
+}
+
+.voice-title {
+font-size: 1.5rem;
+font-weight: 600;
+margin-bottom: 0.5rem;
+}
+
+.voice-subtitle {
+font-size: 1rem;
+opacity: 0.8;
+margin-bottom: 2rem;
+}
+
+.stop-voice-btn {
+background: var(--error-color);
+color: white;
+border: none;
+padding: 0.75rem 1.5rem;
+border-radius: var(--radius-full);
+cursor: pointer;
+font-size: 1rem;
+font-weight: 500;
+transition: var(--transition);
+display: flex;
+align-items: center;
+gap: 0.5rem;
+margin: 0 auto;
+}
+
+.stop-voice-btn:hover {
+background: #e53e3e;
+transform: scale(1.05);
+}
+
+/* Advanced Loading Spinner */
+.loading-overlay {
+position: fixed;
+top: 0;
+left: 0;
+right: 0;
+bottom: 0;
+background: rgba(15, 23, 42, 0.8);
+backdrop-filter: blur(8px);
+display: none;
+align-items: center;
+justify-content: center;
+z-index: 1000;
+}
+
+.loading-overlay.active {
+display: flex;
+}
+
+.loading-spinner {
+position: relative;
+width: 80px;
+height: 80px;
+margin-bottom: 2rem;
+}
+
+.spinner-ring {
+position: absolute;
+border: 3px solid transparent;
+border-top: 3px solid var(--primary-color);
+border-radius: 50%;
+animation: spin 1s linear infinite;
+}
+
+.spinner-ring:nth-child(1) {
+width: 80px;
+height: 80px;
+animation-delay: 0s;
+}
+
+.spinner-ring:nth-child(2) {
+width: 60px;
+height: 60px;
+top: 10px;
+left: 10px;
+border-top-color: var(--secondary-color);
+animation-delay: 0.1s;
+}
+
+.spinner-ring:nth-child(3) {
+width: 40px;
+height: 40px;
+top: 20px;
+left: 20px;
+border-top-color: var(--success-color);
+animation-delay: 0.2s;
+}
+
+.loading-text {
+color: white;
+font-size: 1.125rem;
+font-weight: 500;
+text-align: center;
+}
+
+@keyframes spin {
+0% { transform: rotate(0deg); }
+100% { transform: rotate(360deg); }
+}
+
+/* Sidebar */
+.sidebar {
+width: 350px;
+background: var(--bg-primary);
+border-left: 1px solid var(--border-color);
+display: none;
+flex-direction: column;
+transition: var(--transition);
+transform: translateX(100%);
+}
+
+.sidebar.active {
+display: flex;
+transform: translateX(0);
+}
+
+.sidebar-header {
+padding: 1rem 2rem;
+border-bottom: 1px solid var(--border-color);
+display: flex;
+justify-content: space-between;
+align-items: center;
+background: var(--bg-secondary);
+}
+
+.sidebar-header h3 {
+font-size: 1.125rem;
+font-weight: 600;
+color: var(--text-primary);
+}
+
+.sidebar-content {
+flex: 1;
+padding: 2rem;
+overflow-y: auto;
+}
+
+/* Modal */
+.modal {
+display: none;
+position: fixed;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%;
+background: rgba(0, 0, 0, 0.5);
+z-index: 1000;
+align-items: center;
+justify-content: center;
+}
+
+.modal.active {
+display: flex;
+}
+
+.modal-content {
+background: var(--bg-primary);
+border-radius: var(--border-radius);
+box-shadow: var(--shadow-lg);
+max-width: 600px;
+width: 90%;
+max-height: 80vh;
+overflow: hidden;
+display: flex;
+flex-direction: column;
+}
+
+.modal-header {
+padding: 1.5rem 2rem;
+border-bottom: 1px solid var(--border-color);
+display: flex;
+justify-content: space-between;
+align-items: center;
+background: var(--bg-secondary);
+}
+
+.modal-header h3 {
+font-size: 1.25rem;
+font-weight: 600;
+color: var(--text-primary);
+}
+
+.modal-body {
+flex: 1;
+padding: 2rem;
+overflow-y: auto;
+}
+
+/* Improved Memory Modal Font */
+#memoryContent, .modal-body pre, .modal-body code {
+font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', 'Courier New', monospace;
+font-size: 0.875rem;
+line-height: 1.6;
+white-space: pre-wrap;
+color: var(--text-primary);
+background: var(--bg-tertiary);
+padding: 1rem;
+border-radius: var(--radius-md);
+border: 1px solid var(--border-color);
+}
+
+/* Loading Animation */
+.typing-indicator {
+display: flex;
+align-items: center;
+gap: 0.25rem;
+padding: 1rem 1.25rem;
+background: var(--bg-overlay);
+backdrop-filter: blur(12px);
+border: 1px solid var(--border-color);
+border-radius: var(--radius-xl);
+border-bottom-left-radius: var(--radius-sm);
+box-shadow: var(--shadow-lg);
+}
+
+.typing-dot {
+width: 8px;
+height: 8px;
+border-radius: 50%;
+background: var(--text-muted);
+animation: typing 1.4s infinite ease-in-out;
+}
+
+.typing-dot:nth-child(1) { animation-delay: -0.32s; }
+.typing-dot:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes typing {
+0%, 80%, 100% {
+transform: scale(0);
+opacity: 0.5;
+}
+40% {
+transform: scale(1);
+opacity: 1;
+}
+}
+
+/* Conversation sidebar styles */
+.conversations-list {
+margin-top: 1rem;
+}
+
+.conversation-item {
+display: flex;
+align-items: center;
+justify-content: space-between;
+padding: 0.75rem;
+margin-bottom: 0.5rem;
+background: var(--bg-secondary);
+border-radius: 8px;
+border: 1px solid var(--border-color);
+cursor: pointer;
+transition: var(--transition);
+}
+
+.conversation-item:hover {
+background: var(--bg-tertiary);
+transform: translateY(-2px);
+}
+
+.conversation-item.active {
+background: var(--primary-color);
+color: white;
+border-color: var(--primary-color);
+}
+
+.conversation-info {
+flex: 1;
+}
+
+.conversation-title {
+font-weight: 500;
+margin-bottom: 0.25rem;
+}
+
+.conversation-meta {
+font-size: 0.75rem;
+opacity: 0.7;
+}
+
+.conversation-actions {
+display: flex;
+gap: 0.25rem;
+}
+
+.conversation-actions .btn-icon {
+padding: 0.25rem;
+font-size: 0.75rem;
+}
+
+.sidebar-actions {
+display: flex;
+flex-direction: column;
+gap: 0.5rem;
+padding-bottom: 1rem;
+border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar-actions .btn-secondary {
+background: var(--bg-tertiary);
+color: var(--text-secondary);
+border: 1px solid var(--border-color);
+justify-content: center;
+width: 100%;
+}
+
+.sidebar-actions .btn-secondary:hover {
+background: var(--border-color);
+color: var(--text-primary);
+}
+
+body[data-theme="dark"] .sidebar-actions .btn-secondary {
+background: var(--bg-secondary);
+color: var(--text-primary);
+border-color: var(--border-color);
+}
+
+/* Scrollbar Styling */
+.messages-container::-webkit-scrollbar,
+.sidebar-content::-webkit-scrollbar,
+.modal-body::-webkit-scrollbar {
+width: 6px;
+}
+
+.messages-container::-webkit-scrollbar-track,
+.sidebar-content::-webkit-scrollbar-track,
+.modal-body::-webkit-scrollbar-track {
+background: var(--bg-tertiary);
+border-radius: 3px;
+}
+
+.messages-container::-webkit-scrollbar-thumb,
+.sidebar-content::-webkit-scrollbar-thumb,
+.modal-body::-webkit-scrollbar-thumb {
+background: var(--text-muted);
+border-radius: 3px;
+}
+
+.messages-container::-webkit-scrollbar-thumb:hover,
+.sidebar-content::-webkit-scrollbar-thumb:hover,
+.modal-body::-webkit-scrollbar-thumb:hover {
+background: var(--text-secondary);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+.header {
+padding: 1rem;
+}
+
+.logo h1 {
+font-size: 1.25rem;
+}
+
+.header-actions {
+gap: 0.5rem;
+}
+
+.chat-header {
+padding: 1rem;
+flex-direction: column;
+gap: 0.5rem;
+align-items: flex-start;
+}
+
+.messages-container {
+padding: 1rem;
+}
+
+.input-area {
+padding: 1rem;
+}
+
+.message-content {
+max-width: 85%;
+}
+
+.feature-grid {
+grid-template-columns: repeat(2, 1fr);
+}
+
+.quick-actions {
+flex-direction: column;
+align-items: center;
+}
+
+.sidebar {
+position: fixed;
+top: 0;
+right: -350px;
+height: 100vh;
+z-index: 100;
+box-shadow: var(--shadow-lg);
+}
+
+.sidebar.active {
+right: 0;
+}
+
+.modal-content {
+margin: 1rem;
+width: calc(100% - 2rem);
+}
+
+.voice-content {
+padding: 2rem;
+}
+
+.voice-title {
+font-size: 1.25rem;
+}
+
+.message-avatar {
+width: 36px;
+height: 36px;
+}
+
+.user-avatar .avatar-text {
+font-size: 1rem;
+}
+}
+
+@media (max-width: 480px) {
+.input-wrapper {
+gap: 0.5rem;
+padding: 0.5rem;
+}
+
+.action-btn {
+width: 36px;
+height: 36px;
+font-size: 0.875rem;
+}
+
+#messageInput {
+font-size: 16px; /* Prevent zoom on iOS */
+}
+
+.message-avatar {
+width: 32px;
+height: 32px;
+}
+
+.user-avatar .avatar-text {
+font-size: 0.9rem;
+}
+}
+
+/* Notification styles */
+.notification {
+position: fixed;
+top: 1rem;
+right: 1rem;
+padding: 0.75rem 1rem;
+border-radius: 8px;
+color: white;
+font-weight: 500;
+z-index: 1000;
+animation: slideInRight 0.3s ease-out;
+}
+
+.notification.success { background: var(--success-color); }
+.notification.error { background: var(--error-color); }
+.notification.info { background: var(--primary-color); }
+
+@keyframes slideInRight {
+from { transform: translateX(100%); }
+to { transform: translateX(0); }
+}
+
+/* Animation Classes */
+.fade-in {
+animation: fadeIn 0.3s ease-out;
+}
+
+.slide-up {
+animation: slideUp 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+from {
+opacity: 0;
+transform: translateY(10px);
+}
+to {
+opacity: 1;
+transform: translateY(0);
+}
+}
+
+@keyframes slideUp {
+from {
+opacity: 0;
+transform: translateY(20px);
+}
+to {
+opacity: 1;
+transform: translateY(0);
+}
+}
+
+/* Utility Classes */
+.hidden {
+display: none !important;
+}
+
+.visible {
+display: block !important;
+}