try 2

.env

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

data.py

@@ -0,0 +1,47 @@
+kb = """
+
+Meandb Details :- https://meandb.shop/
+
+ME&NT TO B
+Inspiration behind the Me&nt to B collection
+Our office space is directly connected to our sample room and warehouse, which means we’re constantly seeing the waste that is created throughout the production process. This could be anything from left-over stock, scrap fabric to reject garments that are not viable to sell. Seeing this on the daily got the team thinking about what we could do to improve our waste while still providing our customers with garments that are on trend, size inclusive and will become staple pieces in their wardrobes for years to come!
+Our first Me&nt to B collection is largely focused on The Anglaise Dress, a garment that we loved SO much we made it in three colourways. We were confident that this dress would be a winner so produced too much stock for the season. The team had a brainstorming session on how to repurpose the leftover stock, it went from altering the garments elastic back to eventually repurposing the garment into a tee and skirt set! We’ve taken this same approach to a few other styles from our previous seasons like updating a button or adding an embroidery detail or updating the silhouette slightly. Keep an eye out because this is just the start of our circular fashion initiative, we are currently looking into subscriptions models and reselling plans to take this concept one step further
+
+The collection and Me&B’s long-term sustainability goals
+We’re not oblivious to the fact that the clothing industry is inherently unsustainable, but Me&nt to B has allowed us to include another step in our process that limits our overall wastage. We understand we have a responsibility to the planet and this is the least we can do. Every step of our process, from the design of garments to the packaging is a check point where we can ensure that we’re ticking one of the four R’s from the circular fashion concept: reduce, reuse, recycle, or remove.
+Another one of our favourite aspects of the Me&nt to B range is the connection it has to the local communities, as all of our Me&nt to B garments are redesigned and altered either in house or at one of our local CMTs. This ensures that even when we’re mid-season and the factories are typically without work, we can keep our factories busy and thriving.
+
+We’re feeling really optimistic about this new venture and are excited to see where it takes us!
+
+Welcome to Me&B!
+
+The mother-daughter fashion brand, made right here in the mother city!
+
+Betina and Kelly founded this brand with a strong belief that the fashion industry deserved a shake-up - and that our team of South African designers and craftsmen could be just the people to deliver that ‘something different.’
+
+In 2018 we gathered a team of experts who had studied fashion intently, and knew all the rules but also had the right amount of confidence and creativity to be able to deliver something completely new and fresh.
+
+Tasked with proving that high-quality, fashion-forward clothing could be available at fair prices, we created piece after piece that is testament to our passion for making fashion more accessible to all. We see that same excitement, comfort and belief reflected in the eyes of every woman who tries on a Me&B piece.
+
+Me&B delivers fashion that makes you feel comfortable. Both in your body and your style. We want to help you feel both confident with who you are and how you choose to express yourself. Each piece is designed to feel perfect for now but also fit for years to come.
+
+We create clothing that invites you to step out and show the world who YOU are while still looking stylishly tailored AND feeling supremely comfortable.   
+
+       
+Iris Apfel told the world that “when you don't dress like everybody else, you don't have to think like everybody else.” We believe this wholeheartedly. It’s part of the Me&B philosophy which is quite literally stitched into the fabric of everything we do, from inclusive sizing for every body type all the way through to using compostable delivery bags. So once again welcome to Me&B, we're so happy to have you!
+
+
+Products :- 
+
+1. the dropped waist shirt dress in scattered floral
+PRICE :- R899
+image link :- https://cdn.shopify.com/s/files/1/3003/2366/files/Me_B_4Sept2023_021_80c53c3b-709e-4a18-b735-71fab899ba36.jpg
+product link :- https://meandb.shop/collections/shop-all-clothing/products/the-dropped-waist-shirt-dress-in-scattered-floral
+
+2. collared knit top in milk
+PRICE :- R499
+image link :- https://cdn.shopify.com/s/files/1/3003/2366/files/Mr_B_16Oct2023_343_fc023756-f4db-4091-af11-0d4437e38deb.jpg
+product link :- https://meandb.shop/collections/shop-all-clothing/products/collared-knit-top-in-milk
+
+
+"""

examples/sample_product_catalog.txt

@@ -0,0 +1,11 @@
+Products :- 
+
+1. the dropped waist shirt dress in scattered floral
+PRICE :- R899
+image link :- https://cdn.shopify.com/s/files/1/3003/2366/files/Me_B_4Sept2023_021_80c53c3b-709e-4a18-b735-71fab899ba36.jpg
+product link :- https://meandb.shop/collections/shop-all-clothing/products/the-dropped-waist-shirt-dress-in-scattered-floral
+
+2. collared knit top in milk
+PRICE :- R499
+image link :- https://cdn.shopify.com/s/files/1/3003/2366/files/Mr_B_16Oct2023_343_fc023756-f4db-4091-af11-0d4437e38deb.jpg
+product link :- https://meandb.shop/collections/shop-all-clothing/products/collared-knit-top-in-milk

main.py

@@ -0,0 +1,90 @@
+import os
+import logging
+from flask import Flask, request, jsonify, render_template
+from flask_cors import CORS
+from dotenv import load_dotenv
+from salesgpt.agents import SalesGPT
+from langchain_community.chat_models import ChatLiteLLM
+import sys
+import io
+
+#__import__('pysqlite3')
+#import sys
+
+#sys.modules['sqlite3'] = sys.modules.pop('pysqlite3')
+
+# Load environment variables
+load_dotenv()
+
+# Set your OpenAI API key
+OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
+
+# Initialize the SalesGPT agent
+llm = ChatLiteLLM(temperature=0.4, model='gpt-3.5-turbo-16k')
+
+instruction = """
+
+As the Meandb AI, developed by Tab Robotics, your main responsibility is to provide users with assistance regarding the products offered by Meandb. When addressing users, please use the pronoun 'we' to refer to the company. Your integration on their website aims to ensure prompt and relevant support in a professional manner, enabling users to navigate through available options efficiently. As a user, my questions will solely pertain to Meandb, and not about the AI itself. Therefore, please only provide information based on the data provided. For instance, if I ask 'What products do you provide?', your response should be concise and informative, stating the specific services offered by Meandb. Additionally, when the user greets you at the start of the conversation, please respond with a good response according to the question and provide the info user asks and please continue the conversation like a human. Please look at what you are saying and make sure it makes sense if the user asks a question instead of greeting please answer the question and please continue the conversation like a human. Please try to answer in very short format but also provide the most important information in short. Please maintain some space between the sentences. Try to be happy and positive. When user asks to recommend a product also give him the image link with the product link and price, this is very very very important. If you cant find the link in the dataset please do not make it up because the link will be processed as an image to show to the user. Do not recommend or display any links that are not in the dataset.
+
+Please provide the image links too that is the most important feature
+
+"""
+
+from data import kb
+
+sales_agent = SalesGPT.from_llm(
+    llm,
+    use_tools=True,
+    product_catalog = "examples\sample_product_catalog.txt",
+    verbose=False,
+    salesperson_name="meandb AI",
+    salesperson_role=instruction + kb,
+    company_name="MeanDb",
+    company_business="Ecommerce")
+
+# Initialize Flask app
+app = Flask(__name__)
+CORS(app)
+
+
+# Generate response
+def generate_response(user_input):
+  # Redirect stdout to capture the response
+  captured_output = io.StringIO()
+  sys.stdout = captured_output
+
+  # Process the user input and generate a response
+  sales_agent.human_step(user_input)
+  sales_agent.step()
+
+  # Restore stdout and get the captured output
+  sys.stdout = sys.__stdout__
+  full_response = captured_output.getvalue()
+
+  # Extract the response part after "Heyford AI:"
+  response = full_response.split("meandb AI:", 1)[-1].strip()
+  return response
+
+
+# Flask routes
+@app.route('/')
+def home():
+  return render_template('bannner.html')
+
+#hello
+
+@app.route('/get-response', methods=['POST'])
+def get_response():
+  user_input = request.json['message'].lower().strip()
+  user_id = request.json.get(
+      'user_id')  # Get user/session identifier from the request
+  if not user_id:
+    return jsonify({'response': "Error: User ID is missing or invalid."})
+
+  response = generate_response(user_input)  # Generate response from the AI
+  return jsonify({'response': response})
+
+
+if __name__ == '__main__':
+  app.run(host='0.0.0.0', port=7860)
+#done

requirements.txt

@@ -0,0 +1,8 @@
+SalesGPT==0.1.1
+Flask==2.3.3
+Flask-Cors==4.0.0
+langchain== 0.1.0
+google-generativeai==0.3.2
+python-dotenv==1.0.1
+google-generativeai
+gunicorn

static/js/chatbot-widget.js

@@ -0,0 +1,41 @@
+(function(window) {
+    function createChatbot() {
+        // Code to create chat UI elements
+        // This can include creating a chat window, input box, send button, etc.
+
+        // Example:
+        var chatWindow = document.createElement('div');
+        chatWindow.id = 'chat-window';
+        // Add more styling and elements to chatWindow as needed
+
+        document.body.appendChild(chatWindow);
+
+        // Setup event listeners for chat interactions, like sending a message
+        setupChatEventListeners();
+    }
+
+    function setupChatEventListeners() {
+        // Code to handle chat input, send button click, etc.
+        // Example: document.getElementById('send-button').addEventListener('click', sendMessageToChatbot);
+    }
+
+    function sendMessageToChatbot(message) {
+        // Code to send the message to your Flask backend and handle the response
+        // Example using fetch API:
+        fetch('http://127.0.0.1:5000//', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message: message })
+        })
+        .then(response => response.json())
+        .then(data => {
+            // Code to display the chatbot's response in the chat window
+        })
+        .catch(error => {
+            console.error('Error:', error);
+        });
+    }
+
+    // Expose the chatbot initialization function to the window object
+    window.myChatbot = { load: createChatbot };
+})(window);

static/js/script.js

@@ -0,0 +1,200 @@
+const chatbotToggler = document.querySelector(".chatbot-toggler");
+const closeBtn = document.querySelector(".close-btn");
+const chatbox = document.querySelector(".chatbox");
+const chatInput = document.querySelector(".chat-input textarea");
+const sendChatBtn = document.querySelector(".chat-input span");
+const microphoneBtn = document.getElementById('microphone-btn');
+
+let userMessage = null;
+const inputInitHeight = chatInput.scrollHeight;
+
+// Function to get or create a unique user ID
+function getUserId() {
+    let userId = localStorage.getItem('userId');
+    if (!userId) {
+        userId = 'user_' + Math.random().toString(36).substr(2, 9);
+        localStorage.setItem('userId', userId);
+    }
+    return userId;
+}
+
+function linkify(inputText) {
+    var replacedText, replacePattern1, replacePattern2, replacePattern3;
+
+    //URLs starting with http://, https://, or ftp://
+    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
+    replacedText = inputText.replace(replacePattern1, (match) => {
+        // Check if the URL is an image link
+        if (match.match(/\.(jpeg|jpg|gif|png)$/) != null) {
+            return `<img src="${match}" alt="Image" style="max-width:100%;height:auto;">`;
+        } else {
+            return `<a href="${match}" target="_blank">here</a>`;
+        }
+    });
+
+    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
+    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
+    replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');
+
+    //Change email addresses to mailto:: links.
+    replacePattern3 = /(([a-zA-Z0-9\-_.])+@[a-zA-Z0-9\-_.]+\.[a-zA-Z]{2,5})/gim;
+    replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');
+
+    return replacedText;
+}
+
+const createChatLi = (message, className) => {
+    const chatLi = document.createElement("li");
+    chatLi.classList.add("chat", className);
+    let chatContent = className === "outgoing" ? 
+        `<p>${message}</p>` : 
+        `<span class="material-symbols-outlined">smart_toy</span><p>${linkify(message)}</p>`;
+    chatLi.innerHTML = chatContent;
+    return chatLi;
+};
+
+const generateResponse = (chatElement, typingInterval) => {
+    const SERVER_URL = "http://127.0.0.1:7860//get-response";
+    const userId = getUserId();
+
+    fetch(SERVER_URL, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ 
+            message: userMessage,
+            user_id: userId
+        })
+    })
+    .then(res => res.json())
+    .then(data => {
+        clearInterval(typingInterval); // Make sure to clear the typing animation
+        const incomingChatLi = createChatLi(data.response, "incoming"); // Create a new chat bubble for the response
+        chatbox.replaceChild(incomingChatLi, chatElement); // Replace the "Typing..." bubble with the response bubble
+        chatbox.scrollTo(0, chatbox.scrollHeight); // Scroll to the new message
+    })
+    .catch((error) => {
+        clearInterval(typingInterval); // Also clear the typing animation in case of error
+        console.error('Error:', error);
+        chatElement.querySelector("p").textContent = "Oops! Something went wrong. Please try again.";
+    });
+}
+
+const handleSend = () => {
+    userMessage = chatInput.value.trim();
+    if (!userMessage) return;
+
+    const outgoingChatLi = createChatLi(userMessage, "outgoing");
+    chatbox.appendChild(outgoingChatLi);
+    chatbox.scrollTo(0, chatbox.scrollHeight);
+    chatInput.value = "";
+    chatInput.style.height = `${inputInitHeight}px`;
+
+    setTimeout(() => {
+        const incomingChatLi = createChatLi("Typing.", "incoming");
+        chatbox.appendChild(incomingChatLi);
+        chatbox.scrollTo(0, chatbox.scrollHeight);
+
+        let dotCount = 1;
+        const typingInterval = setInterval(() => {
+            incomingChatLi.innerHTML = `<span class="material-symbols-outlined">smart_toy</span><p>Typing${'.'.repeat(dotCount)}</p>`;
+            dotCount = (dotCount % 6) + 1; // Cycle dotCount from 1 to 6
+        }, 500);
+
+        generateResponse(incomingChatLi, typingInterval); // Pass the typingInterval to the generateResponse function
+    }, 600);
+};
+
+function updateTypingMessage(message) {
+    const typingElements = document.getElementsByClassName('typing');
+    if(typingElements.length > 0) {
+        // Assuming there's only one typing element at a time
+        typingElements[0].innerText = message;
+    } else {
+        // Create new typing element if it doesn't exist
+        const incomingChatLi = createChatLi(message, "incoming");
+        chatbox.appendChild(incomingChatLi);
+        chatbox.scrollTo(0, chatbox.scrollHeight);
+    }
+}
+
+chatInput.addEventListener("input", () => {
+    chatInput.style.height = "auto";
+    chatInput.style.height = `${chatInput.scrollHeight}px`;
+});
+
+chatInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault(); // Prevent the default action to avoid a newline
+        handleSend(); // Call the send handler
+    }
+});
+
+sendChatBtn.addEventListener("click", handleSend);
+closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot"));
+chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot"));
+
+
+// Enhanced Speech Recognition setup
+const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+
+let isSpeechDetected = false;
+let recognitionTimeout;
+
+function updateMicrophoneIcon(isListening) {
+    if (isListening) {
+        microphoneBtn.classList.add('listening');
+    } else {
+        microphoneBtn.classList.remove('listening');
+    }
+}
+
+recognition.onstart = function() {
+    console.log('Voice recognition activated. Start speaking.');
+    updateMicrophoneIcon(true);
+    clearTimeout(recognitionTimeout);
+    isSpeechDetected = false;
+};
+
+recognition.onspeechend = function() {
+    setTimeout(() => {
+        recognition.stop();
+        if (!isSpeechDetected) {
+            chatbox.appendChild(createChatLi("No speech detected. Please try again.", "incoming"));
+        }
+    }, 2000 + Math.random() * 2000); // Random delay between 2 to 4 seconds
+};
+
+recognition.onresult = function(event) {
+    isSpeechDetected = true;
+    const transcript = event.results[0][0].transcript;
+    chatInput.value = transcript;
+    updateMicrophoneIcon(false);
+    handleChat();
+};
+
+recognition.onerror = function(event) {
+    console.error('Speech recognition error detected: ' + event.error);
+    updateMicrophoneIcon(false);
+    chatbox.appendChild(createChatLi(`Error in speech recognition: ${event.error}`, "incoming"));
+};
+
+microphoneBtn.addEventListener('click', function() {
+    if (microphoneBtn.classList.contains('listening')) {
+        recognition.stop();
+    } else {
+        recognition.start();
+        recognitionTimeout = setTimeout(() => {
+            if (!isSpeechDetected) {
+                recognition.stop();
+                updateMicrophoneIcon(false);
+                chatbox.appendChild(createChatLi("No speech detected. Please try again.", "incoming"));
+            }
+        }, 12000); // Adjusted total time to 12 seconds (10 seconds listening + up to 2 seconds delay)
+    }
+});

static/style.css

@@ -0,0 +1,317 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+body {
+  background: transparent;
+}
+
+.chatbot-toggler {
+  position: fixed;
+  bottom: 30px;
+  right: 35px;
+  outline: none;
+  border: none;
+  height: 50px;
+  width: 50px;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #000000;
+  transition: all 0.2s ease;
+}
+
+body.show-chatbot .chatbot-toggler {
+  transform: rotate(90deg);
+}
+
+.chatbot-toggler span {
+  color: #fff;
+  position: absolute;
+}
+
+.chatbot-toggler span:last-child,
+body.show-chatbot .chatbot-toggler span:first-child  {
+  opacity: 0;
+}
+
+body.show-chatbot .chatbot-toggler span:last-child {
+  opacity: 1;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  padding: 10px;
+  position: relative;
+  border-bottom: 2px solid #000000; /* Red border added */
+}
+
+.profile-pic {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+h3, p {
+  margin: 0;
+}
+
+.chatbot {
+  position: fixed;
+  right: 35px;
+  bottom: 90px;
+  width: 420px;
+  background: #fff;
+  border-radius: 15px;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.5);
+  transform-origin: bottom right;
+  /* Removed the box-shadow and added a black border */
+  border: 0.5px solid #000000; /* Black border added */
+  transition: all 0.1s ease;
+}
+
+body.show-chatbot .chatbot {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+
+.chatbot header {
+  padding: 5px 0;
+  position: relative;
+  text-align: center;
+  color: #ffffff;
+  border-bottom: 2px solid #000000;
+  bottom: 2.5px;
+  background: rgb(255, 255, 255);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.chatbot header span {
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  display: none;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+.chat-icon {
+  width: 40px; /* Updated width */
+  height: 40px; /* Updated height */
+  border-radius: 50%;
+  margin-right: 10px;
+  vertical-align: middle; /* Aligns image with text */
+  margin-right: 10px; /* Adds some space between the icon and the text */
+  object-fit: cover; /* Ensures the image covers the area without being stretched */
+  border: none; /* Remove any border */
+}
+
+header h2 {
+  font-size: 1.4rem;
+}
+
+.chatbot .chatbox {
+  overflow-y: auto;
+  height: 510px;
+  padding: 30px 20px 100px;
+}
+
+.chatbot :where(.chatbox, textarea)::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {
+  background: #fff;
+  border-radius: 25px;
+}
+
+.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 25px;
+}
+
+.chatbox .chat {
+  display: flex;
+  list-style: none;
+}
+
+.chatbox .outgoing {
+  margin: 20px 0;
+  color: #000;
+  justify-content: flex-end;
+}
+
+.chatbox .incoming span {
+  width: 32px;
+  height: 32px;
+  color: #fff;
+  cursor: default;
+  text-align: center;
+  line-height: 32px;
+  align-self: flex-end;
+  background: #000000;
+  border-radius: 4px;
+  margin: 0 10px 7px 0;
+}
+
+.chatbox .chat p {
+  white-space: pre-wrap;
+  padding: 12px 16px;
+  border-radius: 10px 10px 0 10px;
+  max-width: 75%;
+  color: #fffcfc;
+  font-size: 0.95rem;
+  background: #000000;
+}
+
+.chatbox .incoming p {
+  border-radius: 10px 10px 10px 0;
+  color: #303030; /* Darker text color for incoming messages */
+  background: #f2f2f2;
+}
+
+.chatbox .chat p.error {
+  color: #303030;
+  background: #f8d7da;
+}
+
+.chatbot .chat-input {
+  display: flex;
+  gap: 5px;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background: #fff;
+  padding: 3px 20px;
+  border-top: 1px solid #ddd;
+}
+
+@keyframes typing {
+  0% { content: 'Typing'; }
+  25% { content: 'Typing.'; }
+  50% { content: 'Typing..'; }
+  75% { content: 'Typing...'; }
+}
+
+.typing-animation {
+  display: inline-block;
+  position: relative;
+}
+
+.typing-animation::after {
+  content: 'Typing';
+  animation: typing 1.5s steps(4, end) infinite;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+
+.chat-input textarea {
+  height: 55px;
+  width: 100%;
+  border: none;
+  outline: none;
+  resize: none;
+  size: auto;
+  max-height: 60px;
+  padding: 17px 15px 15px 0;
+  font-size: 0.95rem;
+}
+
+.chat-input span {
+  align-self: flex-end;
+  color: #000000;
+  cursor: pointer;
+  height: 55px;
+  display: flex;
+  align-items: center;
+  visibility: hidden;
+  font-size: 1.35rem;
+}
+
+.chat-input textarea:valid ~ span {
+  visibility: visible;
+}
+
+/* Your existing styles */
+header {
+  position: relative;
+  background-color: #913a3a; /* Adjust background color as needed */
+}
+
+.header-img {
+  width: 100%;
+  padding-right: 20px;
+  display: block;
+}
+
+.close-btn {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  color: #b82d2d; /* Adjust close button color as needed */
+  cursor: pointer;
+}
+
+/* New style for the chatbot icon within the chat messages */
+.chat-icon {
+  width: 54px; /* Example size, adjust as needed */
+  height: fit-content; /* Example size, adjust as needed */
+  vertical-align: middle; /* Aligns image with text */
+  margin-right: 10px; /* Adds some space between the icon and the text */
+}
+
+.chat-input #microphone-btn {
+  align-self: flex-end;
+  color: #000000;
+  cursor: pointer;
+  height: 55px;
+  display: flex;
+  align-items: center;
+  font-size: 1.35rem;
+  background: transparent;
+  border: none;
+  margin-right: 10px;
+}
+
+@media (max-width: 490px) {
+  .chatbot-toggler {
+    right: 20px;
+    bottom: 20px;
+  }
+
+  .chatbot {
+    right: 0;
+    bottom: 0;
+    height: 100%;
+    border-radius: 0;
+    width: 100%;
+  }
+
+  .chatbot .chatbox {
+    height: 90%;
+    padding: 25px 15px 100px;
+  }
+
+  .chatbot .chat-input {
+    padding: 5px 15px;
+  }
+
+  .chatbot header span {
+    display: block;
+  }
+}

templates/bannner.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Chat AI</title>
+    <link rel="stylesheet" href="static/style.css"> <!-- Link to your external CSS file -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
+    <script src="{{ url_for('static', filename='js/script.js') }}" defer></script> <!-- Link to your external JavaScript file -->
+  </head>
+  <body>
+    <button class="chatbot-toggler">
+      <span class="material-symbols-rounded">mode_comment</span>
+      <span class="material-symbols-outlined">close</span>
+    </button>
+    <div class="chatbot">
+      <header>
+        <img src="static/images/test.png" alt="Chatbot Icon" class="header-img">
+        <span class="close-btn material-symbols-outlined">close</span>
+      </header>
+      <ul class="chatbox">
+        <li class="chat incoming">
+          <span class="material-symbols-outlined">smart_toy</span>
+          <p>Hello, welcome to meandb. <br>Can I answer any questions for you ?</p>
+        </li>
+        <!-- Additional chat messages can be added here -->
+      </ul>
+      <div class="chat-input">
+        <textarea placeholder="Enter a message..." spellcheck="false" required></textarea>
+        <button id="microphone-btn" class="material-symbols-rounded">mic</button>
+        <span id="send-btn" class="material-symbols-rounded">send</span>
+      </div>
+    </div>
+    <script src="static/js/script.js"></script> <!-- Link to your external JavaScript file -->
+  </body>
+</html>

thread_data/threads_db.bak

@@ -0,0 +1 @@
+'user_55ijq1r15', (0, 46)

thread_data/threads_db.dir

@@ -0,0 +1 @@
+'user_55ijq1r15', (0, 46)