Updated

app.py

@@ -1,6 +1,7 @@
 from flask import Flask, render_template, request, jsonify, make_response
-from langchain_core.prompts import PromptTemplate
-from langchain_huggingface import HuggingFaceEndpoint
+from langchain_core.prompts import ChatPromptTemplate
+from langchain_openai import ChatOpenAI
+from langchain_community.tools import DuckDuckGoSearchRun
 from vector import retriever
 import markdown
 import dotenv
@@ -10,41 +11,77 @@ import uuid
 dotenv.load_dotenv()
 app = Flask(__name__)
 
-# Hugging Face Hub LLM
-llm = HuggingFaceEndpoint(
-    repo_id="meta-llama/Meta-Llama-3-8B",
-    task="text-generation",
-    huggingfacehub_api_token=os.getenv("HUGGINGFACEHUB_API_TOKEN")
+# OpenRouter LLM Configuration
+# Using the secret key name provided by the user
+OPENROUTER_API_KEY = os.getenv("DOMINOS_PIZZA_AI_SUPPORT_OPENROUTER_MODEL_KEY")
+MODEL_NAME = "openai/gpt-oss-120b:free"
+
+llm = ChatOpenAI(
+    model=MODEL_NAME,
+    openai_api_key=OPENROUTER_API_KEY,
+    openai_api_base="https://openrouter.ai/api/v1",
+    default_headers={
+        "HTTP-Referer": "https://www.dominos.ng/", # Site URL for OpenRouter
+        "X-Title": "Domino's Pizza AI Support"
+    }
 )
 
-# Prompt template
-PROMPT_TEMPLATE = """
-You are an expert in answering questions about Pizza-related topics.
-Answer the user's question clearly, accurately, and professionally in English. Do NOT mention, reference, or imply that your answers come from reviews, datasets, or any internal files. Focus entirely on providing helpful and informative responses as a pizza expert.
-If your answer requires a numbered list, please:
-- Start numbering at 1.
-- Do not skip numbers.
-- Do not repeat numbers.
-- Use proper Markdown numbering format.
-- Ensure that each numbered item is concise and fits fully within the response.
-Here are some relevant reviews for context (ignore them completely in your answer): {reviews}
+# Web Search Tool
+search = DuckDuckGoSearchRun()
+
+# System Prompt
+SYSTEM_PROMPT = """
+You are the official Domino's Pizza AI Support agent for Domino's Pizza Nigeria.
+Your goal is to provide exceptional, professional, and friendly assistance to customers.
+
+Guidelines:
+1. Always maintain a helpful and appetizing tone.
+2. Use Domino's branding and language where appropriate.
+3. If you don't know the answer or can't find it in the provided context, state that you'll look it up, and use your web search capabilities (simulated in this flow) to find the most accurate information from https://www.dominos.ng/.
+4. Format your responses beautifully using Markdown:
+   - Use bold for emphasis.
+   - Use lists for steps or menus.
+   - Use headers for structure.
+5. If the answer involves a logo, mention that more information can be found at the link associated with the Domino's logo.
+
+Context from Domino's Reviews:
+{reviews}
+
 User question: {question}
 """
 
-prompt = PromptTemplate(input_variables=["reviews", "question"], template=PROMPT_TEMPLATE)
-
-# New style: RunnableSequence (prompt | llm)
-chain = prompt | llm
+prompt = ChatPromptTemplate.from_template(SYSTEM_PROMPT)
 
 # In-memory chat history per device
 chat_sessions = {}
 
-def run_chain(reviews: str, question: str) -> str:
+def get_ai_response(question: str, reviews: str) -> str:
     try:
-        return chain.invoke({"reviews": reviews, "question": question})
+        # First attempt with context
+        chain = prompt | llm
+        response = chain.invoke({"reviews": reviews, "question": question})
+        content = response.content
+
+        # Simple check if AI couldn't answer (heuristics)
+        fallback_phrases = ["i don't know", "i am not sure", "i couldn't find", "sorry, i can't"]
+        if any(phrase in content.lower() for phrase in fallback_phrases):
+             print(f"[INFO] Triggering web search for: {question}")
+             search_results = search.run(f"Domino's Pizza Nigeria {question}")
+             
+             # Re-run with search results
+             search_prompt = ChatPromptTemplate.from_template(
+                 "The user asked: {question}\n"
+                 "I found this information on the web: {search_results}\n"
+                 "Provide a final answer as Domino's AI Support using this information."
+             )
+             search_chain = search_prompt | llm
+             response = search_chain.invoke({"question": question, "search_results": search_results})
+             content = response.content
+
+        return content
     except Exception as e:
-        print(f"[ERROR] Chain failed: {e}")
-        return "Sorry, I couldn't process your question at this time."
+        print(f"[ERROR] AI Response failed: {e}")
+        return "I apologize, but I'm having trouble connecting to the pizza ovens (our servers) right now. Please try again in a moment!"
 
 @app.route("/", methods=["GET"])
 def index():
@@ -71,13 +108,16 @@ def ask():
     if not question:
         return jsonify({"error": "No question provided"}), 400
 
-    reviews = str(retriever.invoke(question) or "")
-    raw_response = run_chain(reviews, question)
+    reviews = str(retriever.invoke(question) or "No specific reviews found.")
+    raw_response = get_ai_response(question, reviews)
+    
+    formatted_response = markdown.markdown(raw_response, extensions=['extra', 'tables'])
+    
     chat_sessions[device_id].append({
         "user": question,
-        "bot": markdown.markdown(raw_response)
+        "bot": formatted_response
     })
-    return jsonify({"response": markdown.markdown(raw_response)})
+    return jsonify({"response": formatted_response})
 
 @app.route("/clear", methods=["POST"])
 def clear_chat():

requirements.txt

@@ -11,4 +11,5 @@ pandas
 sentence-transformers
 chromadb
 langchain-community
-python-dotenv
+python-dotenvlangchain-openai
+duckduckgo-search

static/main.css

@@ -1,146 +1,221 @@
-/* Global Reset */
+/* Domino's Pizza AI Support - Premium CSS */
+
+:root {
+  --dominos-blue: #006491;
+  --dominos-red: #E31837;
+  --dominos-white: #FFFFFF;
+  --bg-gradient: linear-gradient(135deg, #006491 0%, #004d70 100%);
+  --glass: rgba(255, 255, 255, 0.9);
+  --glass-border: rgba(255, 255, 255, 0.2);
+}
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: 'Segoe UI', sans-serif;
+  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 }
 
-html, body {
-  height: 100%;
-  width: 100%;
-  background: #f0f2f5;
-  overflow: hidden; /* Prevent page scroll */
+body {
+  height: 100vh;
+  width: 100vw;
+  background: var(--bg-gradient);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
 }
 
-/* Chat Container */
 .chat-container {
-  position: fixed; /* Lock in place */
-  top: 0;
-  left: 0;
   width: 100%;
-  height: 100%; /* Full page */
-  background: #fff;
-  border-radius: 0; /* No rounding on full-page layout */
+  max-width: 900px;
+  height: 90vh;
+  background: var(--glass);
+  backdrop-filter: blur(10px);
+  border-radius: 24px;
+  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
   display: flex;
   flex-direction: column;
-  padding-bottom: 20px;
+  overflow: hidden;
+  border: 1px solid var(--glass-border);
 }
 
-/* Chat Header */
 .chat-header {
-  background-color: #10a37f;
-  padding: 10px;
-  text-align: center;
-  color: white;
-  font-size: 1.2rem; /* Reduced size */
-  font-weight: bold;
+  background: var(--dominos-white);
+  padding: 20px 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 2px solid #eee;
+  z-index: 10;
+}
+
+.chat-header h2 {
+  color: var(--dominos-blue);
+  font-weight: 800;
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.chat-header img {
+  height: 40px;
 }
 
-/* Chat Box */
 .chat-box {
-  flex: 1; /* Fill remaining space */
-  padding: 20px;
+  flex: 1;
+  padding: 30px;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 15px;
-  background-color: #fafafa;
-  overflow-y: auto; /* Scroll inside chat box only */
+  gap: 20px;
+  background: rgba(245, 247, 250, 0.5);
+  scroll-behavior: smooth;
+}
+
+.chat-box::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat-box::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,0.1);
+  border-radius: 10px;
 }
 
-/* Messages */
 .message {
-  max-width: 80%;
-  padding: 12px 18px;
-  border-radius: 16px;
+  max-width: 75%;
+  padding: 16px 20px;
+  border-radius: 20px;
   font-size: 1rem;
-  line-height: 1.5; /* Better line spacing for Markdown */
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  transform: translateY(20px);
-  opacity: 0;
-  animation: slide-in 0.3s forwards;
+  line-height: 1.6;
+  position: relative;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
 }
 
-/* User messages */
 .message.user {
   align-self: flex-end;
-  background-color: #10a37f;
+  background: var(--dominos-blue);
   color: white;
+  border-bottom-right-radius: 4px;
 }
 
-/* Bot messages */
 .message.bot {
   align-self: flex-start;
-  background-color: #e5e5ea;
-  color: #000;
+  background: white;
+  color: #333;
+  border-bottom-left-radius: 4px;
+  border-left: 4px solid var(--dominos-red);
 }
 
-/* Lists inside messages */
-.message ol,
-.message ul {
-  margin: 0 0 0 1.2em; /* Proper indent inside bubble */
-  padding-left: 1.2em;
+.message.bot img.bot-logo {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  vertical-align: middle;
 }
 
-.message li {
-  margin-bottom: 0.3em; /* Space between items */
+/* AI Thinking Animation */
+.thinking-container {
+  display: flex;
+  gap: 4px;
+  padding: 10px 0;
+}
+
+.thinking-dot {
+  width: 8px;
+  height: 8px;
+  background: var(--dominos-red);
+  border-radius: 50%;
+  animation: bounce 1.4s infinite ease-in-out both;
+}
+
+.thinking-dot:nth-child(1) { animation-delay: -0.32s; }
+.thinking-dot:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes bounce {
+  0%, 80%, 100% { transform: scale(0); }
+  40% { transform: scale(1); }
 }
 
-/* Chat Input */
 .chat-input {
+  background: white;
+  padding: 24px 30px;
   display: flex;
-  padding: 15px;
-  border-top: 1px solid #ddd;
-  background-color: #fff;
+  gap: 15px;
+  align-items: flex-end;
+  border-top: 1px solid #eee;
 }
 
 .chat-input textarea {
   flex: 1;
-  padding: 12px;
-  border: 1px solid #ccc;
-  border-radius: 20px;
-  outline: none;
+  background: #f8f9fa;
+  border: 2px solid #eee;
+  border-radius: 16px;
+  padding: 14px 20px;
+  font-size: 1rem;
   resize: none;
-  min-height: 40px;
-  max-height: 150px;
+  max-height: 120px;
+  outline: none;
+  transition: border-color 0.3s ease;
+}
+
+.chat-input textarea:focus {
+  border-color: var(--dominos-blue);
 }
 
 .chat-input button {
-  padding: 10px 18px;
-  margin-left: 10px;
-  background-color: #10a37f;
+  background: var(--dominos-red);
   color: white;
   border: none;
-  border-radius: 20px;
+  border-radius: 14px;
+  padding: 14px 28px;
+  font-weight: 700;
   cursor: pointer;
+  transition: transform 0.2s ease, background 0.2s ease;
+  height: 52px;
 }
 
 .chat-input button:hover {
-  background-color: #0e8f6a;
+  background: #c1142d;
+  transform: translateY(-2px);
 }
 
-/* Spinner */
-.spinner {
-  border: 4px solid #f3f3f3;
-  border-top: 4px solid #10a37f;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  animation: spin 1s linear infinite;
-  display: inline-block;
+.chat-input button:active {
+  transform: translateY(0);
+}
+
+/* Markdown Styling */
+.message h1, .message h2, .message h3 {
+  margin: 10px 0;
+  color: var(--dominos-blue);
+}
+
+.message ul, .message ol {
+  margin-left: 20px;
+}
+
+.message li {
+  margin-bottom: 8px;
+}
+
+.message p {
+  margin-bottom: 12px;
 }
 
 /* Animations */
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+.slide-in-bottom {
+  animation: slideIn 0.4s ease-out forwards;
 }
 
-@keyframes slide-in {
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
   to {
-    transform: translateY(0);
     opacity: 1;
+    transform: translateY(0);
   }
 }

templates/index.html

@@ -3,25 +3,30 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Pizza AI</title>
+  <title>Domino's Pizza AI Support</title>
   <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}" />
+  <link rel="icon" href="{{ url_for('static', filename='assests/logo.png') }}" type="image/png">
 </head>
 <body>
   <div class="chat-container">
     <div class="chat-header">
-      <h2>🍕 Pizza AI</h2>
+      <h2><img src="/assests/logo.png" alt="Domino's Logo"> Domino's AI Support</h2>
+      <button onclick="clearChat()" style="background: transparent; border: none; color: var(--dominos-red); cursor: pointer; font-weight: bold;">Clear Chat</button>
     </div>
 
     <div class="chat-box" id="chat-box">
       {% for message in chat_history %}
         <div class="message user slide-in-bottom">{{ message.user }}</div>
-        <div class="message bot slide-in-bottom">{{ message.bot|safe }}</div>
+        <div class="message bot slide-in-bottom">
+            <img src="/assests/logo.png" class="bot-logo" alt="Domino's">
+            {{ message.bot|safe }}
+        </div>
       {% endfor %}
     </div>
 
     <form id="chat-form" class="chat-input" autocomplete="off">
-      <textarea name="question" id="input" placeholder="Ask me anything about Pizza..." required></textarea>
-      <button type="submit">Send</button>
+      <textarea name="question" id="input" placeholder="How can Domino's help you today?" required></textarea>
+      <button type="submit" id="send-btn">Send Order</button>
     </form>
   </div>
 
@@ -29,6 +34,7 @@
     const chatForm = document.getElementById('chat-form');
     const chatBox = document.getElementById('chat-box');
     const input = document.getElementById('input');
+    const sendBtn = document.getElementById('send-btn');
 
     // Auto-expand textarea
     input.addEventListener('input', () => {
@@ -36,6 +42,13 @@
       input.style.height = input.scrollHeight + 'px';
     });
 
+    async function clearChat() {
+        if (confirm('Are you sure you want to clear the pizza party? (Chat history)')) {
+            await fetch('/clear', { method: 'POST' });
+            window.location.reload();
+        }
+    }
+
     chatForm.addEventListener('submit', async (e) => {
       e.preventDefault();
       const question = input.value.trim();
@@ -51,15 +64,24 @@
       // Clear input immediately
       input.value = '';
       input.style.height = 'auto';
+      input.disabled = true;
+      sendBtn.disabled = true;
 
-      // Add bot message with spinner
+      // Add bot message with thinking animation
       const botMessage = document.createElement('div');
       botMessage.classList.add('message', 'bot', 'slide-in-bottom');
-      botMessage.innerHTML = '<div class="spinner"></div>';
+      botMessage.innerHTML = `
+        <img src="/assests/logo.png" class="bot-logo" alt="Domino's">
+        <div class="thinking-container">
+            <div class="thinking-dot"></div>
+            <div class="thinking-dot"></div>
+            <div class="thinking-dot"></div>
+        </div>
+      `;
       chatBox.appendChild(botMessage);
       botMessage.scrollIntoView({ block: "start", behavior: "smooth" });
 
-      // Send POST request via JSON
+      // Send POST request
       try {
         const res = await fetch('/ask', {
           method: 'POST',
@@ -68,11 +90,15 @@
         });
         const data = await res.json();
 
-        // Replace spinner with bot response
-        botMessage.innerHTML = data.response || data.error;
+        // Replace thinking animation with bot response
+        botMessage.innerHTML = `<img src="/assests/logo.png" class="bot-logo" alt="Domino's"> ${data.response || data.error}`;
         botMessage.scrollIntoView({ block: "start", behavior: "smooth" });
       } catch (err) {
-        botMessage.textContent = 'Error: could not get response';
+        botMessage.innerHTML = `<img src="/assests/logo.png" class="bot-logo" alt="Domino's"> Sorry, something went wrong in the kitchen.`;
+      } finally {
+          input.disabled = false;
+          sendBtn.disabled = false;
+          input.focus();
       }
     });
   </script>