update app.py

app.py

@@ -1,65 +1,70 @@
 import os
 from dotenv import load_dotenv
-load_dotenv(".env")
-
-os.environ['USER_AGENT'] = os.getenv("USER_AGENT")
-os.environ["GROQ_API_KEY"] = os.getenv("GROQ_API_KEY")
-os.environ["TOKENIZERS_PARALLELISM"]='true'
-
+import asyncio
+from flask import Flask, request, render_template
+from flask_cors import CORS
+from flask_socketio import SocketIO, emit, join_room, leave_room
 from langchain.chains import create_history_aware_retriever, create_retrieval_chain
 from langchain.chains.combine_documents import create_stuff_documents_chain
 from langchain_community.chat_message_histories import ChatMessageHistory
-from langchain_community.document_loaders import WebBaseLoader
 from langchain_core.chat_history import BaseChatMessageHistory
 from langchain_core.prompts import ChatPromptTemplate, MessagesPlaceholder
 from langchain_core.runnables.history import RunnableWithMessageHistory
-
 from pinecone import Pinecone
 from pinecone_text.sparse import BM25Encoder
-
 from langchain_huggingface import HuggingFaceEmbeddings
 from langchain_community.retrievers import PineconeHybridSearchRetriever
-
 from langchain_groq import ChatGroq
 
-from flask import Flask, request, render_template
-from flask_cors import CORS
-from flask_socketio import SocketIO, emit
-
+# Load environment variables
+load_dotenv(".env")
+USER_AGENT = os.getenv("USER_AGENT")
+GROQ_API_KEY = os.getenv("GROQ_API_KEY")
+SECRET_KEY = os.getenv("SECRET_KEY")
+PINECONE_API_KEY = os.getenv("PINECONE_API_KEY")
+SESSION_ID_DEFAULT = "abc123"
+
+# Set environment variables
+os.environ['USER_AGENT'] = USER_AGENT
+os.environ["GROQ_API_KEY"] = GROQ_API_KEY
+os.environ["TOKENIZERS_PARALLELISM"] = 'true'
+
+# Initialize Flask app and SocketIO with CORS
 app = Flask(__name__)
 CORS(app)
 socketio = SocketIO(app, cors_allowed_origins="*")
 app.config['SESSION_COOKIE_SECURE'] = True  # Use HTTPS
 app.config['SESSION_COOKIE_HTTPONLY'] = True
 app.config['SESSION_COOKIE_SAMESITE'] = 'Lax'
-app.config['SECRET_KEY'] = os.getenv('SECRET_KEY')
-
-try:
-    pc = Pinecone(api_key=os.getenv("PINECONE_API_KEY"))
-    index_name = "traveler-demo-website-vectorstore"
-    # connect to index
-    pinecone_index = pc.Index(index_name)
-except:
-    pc = Pinecone(api_key=os.getenv("PINECONE_API_KEY"))
-    index_name = "traveler-demo-website-vectorstore"
-    # connect to index
-    pinecone_index = pc.Index(index_name)
+app.config['SECRET_KEY'] = SECRET_KEY
 
+# Function to initialize Pinecone connection
+def initialize_pinecone(index_name: str):
+    try:
+        pc = Pinecone(api_key=PINECONE_API_KEY)
+        return pc.Index(index_name)
+    except Exception as e:
+        print(f"Error initializing Pinecone: {e}")
+        raise
+
+# Initialize Pinecone index and BM25 encoder
+pinecone_index = initialize_pinecone("traveler-demo-website-vectorstore")
 bm25 = BM25Encoder().load("./bm25_traveler_website.json")
 
+# Initialize models and retriever
 embed_model = HuggingFaceEmbeddings(model_name="Alibaba-NLP/gte-large-en-v1.5", model_kwargs={"trust_remote_code":True})
-
 retriever = PineconeHybridSearchRetriever(
     embeddings=embed_model, 
     sparse_encoder=bm25, 
     index=pinecone_index, 
     top_k=20, 
-    alpha=0.5, 
+    alpha=0.5
 )
 
-llm = ChatGroq(model="llama-3.1-70b-versatile", temperature=0.1, max_tokens=1024, max_retries=2)
+# Initialize LLM
+llm = ChatGroq(model="llama-3.1-8b-instant", temperature=0, max_tokens=1024, max_retries=2)
 
-### Contextualize question ###
+# Contextualization prompt and retriever
 contextualize_q_system_prompt = """Given a chat history and the latest user question \
 which might reference context in the chat history, formulate a standalone question \
 which can be understood without the chat history. Do NOT answer the question, \
@@ -72,34 +77,32 @@ contextualize_q_prompt = ChatPromptTemplate.from_messages(
         ("human", "{input}")
     ]
 )
+history_aware_retriever = create_history_aware_retriever(llm, retriever, contextualize_q_prompt)
 
-history_aware_retriever = create_history_aware_retriever(
-    llm, retriever, contextualize_q_prompt
-)
-
+# QA system prompt and chain
+qa_system_prompt = """You are a highly skilled information retrieval assistant. Use the following context to answer questions effectively. \
+If you don't know the answer, simply state that you don't know. \
+Provide answers in proper HTML format and keep them concise. \
 
-qa_system_prompt = """You are a highly skilled information retrieval assistant. Use the following pieces of retrieved context to answer the question. \
-Provide links to sources provided in the answer. \
-If you don't know the answer, just say that you don't know. \
-Do not give extra long answers. \
-When responding to queries, your responses should be comprehensive and well-organized. For each response: \
+When responding to queries, follow these guidelines: \
 
-    1. Provide Clear Answers \
+    1. Provide Clear Answers: \
+        - Ensure the response directly addresses the query with accurate and relevant information.\
 
     2. Include Detailed References: \
-        - Include links to sources and any links or sites where there is a mentioned in the answer.
-        - Links to Sources: Provide URLs to credible sources where users can verify the information or explore further. \
-        - Downloadable Materials: Include links to any relevant downloadable resources if applicable. \
+        - Links to Sources: Include URLs to credible sources where users can verify information or explore further. \
         - Reference Sites: Mention specific websites or platforms that offer additional information. \
-
+        - Downloadable Materials: Provide links to any relevant downloadable resources if applicable. \
+    
     3. Formatting for Readability: \
-        - Bullet Points or Lists: Where applicable, use bullet points or numbered lists to present information clearly. \
-        - Emphasize Important Information: Use bold or italics to highlight key details. \
-
-    4. Organize Content Logically \
-
-Do not include anything about context in the answer. \
-
+        - The answer should be in a proper HTML format with appropriate tags. \
+        - Use bullet points or numbered lists where applicable to present information clearly. \
+        - Highlight key details using bold or italics. \
+        - Provide proper and meaningful abbreviations for urls. Do not include naked urls. \
+    
+    4. Organize Content Logically: \
+        - Structure the content in a logical order, ensuring easy navigation and understanding for the user. \
+        
 {context}
 """
 qa_prompt = ChatPromptTemplate.from_messages(
@@ -111,20 +114,21 @@ qa_prompt = ChatPromptTemplate.from_messages(
 )
 question_answer_chain = create_stuff_documents_chain(llm, qa_prompt)
 
+# Retrieval and Generative (RAG) Chain
 rag_chain = create_retrieval_chain(history_aware_retriever, question_answer_chain)
 
-### Statefully manage chat history ###
+# Chat message history storage
 store = {}
 
 def clean_temporary_data():
-    store = {}
+    store.clear()
 
 def get_session_history(session_id: str) -> BaseChatMessageHistory:
     if session_id not in store:
         store[session_id] = ChatMessageHistory()
     return store[session_id]
 
-
+# Conversational RAG chain with message history
 conversational_rag_chain = RunnableWithMessageHistory(
     rag_chain,
     get_session_history,
@@ -133,33 +137,41 @@ conversational_rag_chain = RunnableWithMessageHistory(
     output_messages_key="answer",
 )
 
-# Stream response to client
+# Function to handle WebSocket connection
+@socketio.on('connect')
+def handle_connect():
+    print(f"Client connected: {request.sid}")
+    emit('connection_response', {'message': 'Connected successfully.'})
+
+# Function to handle WebSocket disconnection
+@socketio.on('disconnect')
+def handle_disconnect():
+    print(f"Client disconnected: {request.sid}")
+    clean_temporary_data()
+
+# Function to handle WebSocket messages
 @socketio.on('message')
 def handle_message(data):
     question = data.get('question')
-    session_id = data.get('session_id', 'abc123')
+    session_id = data.get('session_id', SESSION_ID_DEFAULT)
     chain = conversational_rag_chain.pick("answer")
-    
+
     try:
         for chunk in chain.stream(
                 {"input": question},
-                config={
-                    "configurable": {"session_id": "abc123"}
-                },
+                config={"configurable": {"session_id": session_id}},
             ):
-                emit('response', chunk, room=request.sid)
-    except:
-        for chunk in chain.stream(
-                {"input": question},
-                config={
-                    "configurable": {"session_id": "abc123"}
-                },
-            ):
-                emit('response', chunk, room=request.sid)
+            emit('response', chunk, room=request.sid)
+    except Exception as e:
+        print(f"Error during message handling: {e}")
+        emit('response', {"error": "An error occurred while processing your request."}, room=request.sid)
+
 
+# Home route
 @app.route("/")
 def index_view():
     return render_template('chat.html') 
 
+# Main function to run the app
 if __name__ == '__main__': 
     socketio.run(app, debug=True)

static/script.js

@@ -3,79 +3,92 @@ const socket = io.connect(document.baseURI);
 const chatBox = document.getElementById('chat-box');
 const chatInput = document.getElementById('chat-input');
 const sendButton = document.getElementById('send-button');
-var converter = new showdown.Converter();
-var response="";
+const converter = new showdown.Converter(); // If you're using showdown.js for markdown to HTML conversion
 
+let response = "";
 
-function addLoader(){
-    // loader_ele = `
-    //     <div class="dot-loader">
-    //         <div></div>
-    //         <div></div>
-    //         <div></div>
-    //     </div>
-    // `
-    const loader_ele = document.createElement('div');
-    loader_ele.classList.add('dot-loader');
-    loader_ele.innerHTML = `
-            <div></div>
-            <div></div>
-            <div></div>
+// Function to add a loader element
+function addLoader() {
+    const loaderEle = document.createElement('div');
+    loaderEle.classList.add('dot-loader');
+    loaderEle.innerHTML = `
+        <div></div>
+        <div></div>
+        <div></div>
     `;
-    chatBox.appendChild(loader_ele);
+    chatBox.appendChild(loaderEle);
 }
 
+// Function to append a message to the chat box
 function appendMessage(message, sender) {
-    if(sender == "bot"){
+    if (sender === 'bot') {
         response += message;
-        message = converter.makeHtml(response);
 
-        let loader_ele = chatBox.lastElementChild;
-        
-        if(!loader_ele.classList.contains("hidden")){
-            chatBox.removeChild(loader_ele);
+        const loaderEle = chatBox.lastElementChild;
+
+        if (loaderEle && loaderEle.classList.contains('dot-loader')) {
+            chatBox.removeChild(loaderEle);
             const messageElement = document.createElement('div');
             messageElement.classList.add('chat-message', sender);
-            messageElement.innerHTML = `<span>${message}</span>`;
+            messageElement.innerHTML = `<span>${response}</span>`;
             chatBox.append(messageElement);
             chatBox.scrollTop = chatBox.scrollHeight;
-        }else{
-            last_message_ele = chatBox.lastElementChild.lastChild;
-            last_message_ele.innerHTML  = message;
+        } else {
+            const lastMessageEle = chatBox.lastElementChild;
+            if (lastMessageEle) {
+                lastMessageEle.innerHTML = response;
+            }
             chatBox.scrollTop = chatBox.scrollHeight;
         }
-    }else{
+    } else {
         const messageElement = document.createElement('div');
         messageElement.classList.add('chat-message', sender);
         messageElement.innerHTML = `<span>${message}</span>`;
         chatBox.append(messageElement);
         chatBox.scrollTop = chatBox.scrollHeight;
-        setTimeout(() => {
-            addLoader()
-        }, 500);
+
+        // Add a loader after a slight delay
+        setTimeout(addLoader, 500);
     }
-    chatBox.scrollTop = chatBox.scrollHeight;
 }
 
+// Event listener for the send button
 sendButton.addEventListener('click', () => {
     const message = chatInput.value.trim();
     if (message) {
         appendMessage(message, 'user');
         socket.emit('message', { question: message, session_id: 'abc123' });
-        // setInterval(()=>{
-        //     appendMessage("This is a test message", "bot");
-        // }, 2000)
         chatInput.value = '';
         response = "";
+    } else {
+        console.error("Message cannot be empty.");
     }
 });
 
+// Event listener for 'Enter' key press in the chat input
 chatInput.addEventListener('keypress', (e) => {
     if (e.key === 'Enter') {
         sendButton.click();
     }
 });
 
-socket.on('response', (response) => {
-    appendMessage(response, 'bot');
+// Handle incoming responses from the server
+socket.on('response', (data) => {
+    if (data && typeof data === 'string') {
+        appendMessage(data, 'bot');
+    } else {
+        console.error("Invalid response format received from the server.");
+    }
+});
+
+// Handle connection errors
+socket.on('connect_error', (error) => {
+    console.error("Connection error:", error);
+    appendMessage("Sorry, there was a problem connecting to the server. Please try again later.", 'bot');
+});
+
+// Handle disconnection
+socket.on('disconnect', (reason) => {
+    console.warn("Disconnected from server:", reason);
+    appendMessage("You have been disconnected from the server. Please refresh the page to reconnect.", 'bot');
 });