Update templates/ai-chat-bot.html

templates/ai-chat-bot.html

@@ -13,7 +13,7 @@
 
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
-<title>AI Chat Bot - TechWave</title>
+<title>AI Chat Bot</title>
 
 
 <script>
@@ -99,13 +99,9 @@
 			</div>
 			<div class="search__results">
 				<!-- Results will come here (via ajax after the integration you made after purchase as it doesn't work in HTML) -->
-				<div class="results__title">Results</div>
 				<div class="results__list">
 					<ul>
-						<li><a href="#">Artificial Intelligence</a></li>
-						<li><a href="#">Learn about the impact of AI on the financial industry</a></li>
-						<li><a href="#">Delve into the realm of AI-driven manufacturing</a></li>
-						<li><a href="#">Understand the ethical implications surrounding AI</a></li>
+
 					</ul>
 				</div>
 			</div>
@@ -115,97 +111,18 @@
 		<!-- HEADER -->
 		<header class="techwave_fn_header">
 		
-			<!-- Header left: token information -->
-			<div class="header__left">
-				<div class="fn__token_info">
-					<span class="token_summary">
-						<span class="count">120</span>
-						<span class="text">Tokens<br>Remain</span>
-					</span>
-					<a href="pricing.html" class="token_upgrade techwave_fn_button"><span>Upgrade</span></a>
-					<div class="token__popup">
-						Resets in <span>19 hours.</span><br>
-						Daily limit is <span>200 tokens</span>
-					</div>
-				</div>
-			</div>
-			<!-- /Header left: token information -->
 			
 			
 			<!-- Header right: navigation bar -->
 			<div class="header__right">
 				<div class="fn__nav_bar">
 					
-					<!-- Search (bar item) -->
-					<div class="bar__item bar__item_search">
-						<a href="#" class="item_opener">
-							<img src="desine/svg/search.svg" alt="" class="fn__svg">
-						</a>
-						<div class="item_popup">
-							<input type="text" placeholder="Search">
-						</div>
-					</div>
-					<!-- !Search (bar item) -->
-					
-					<!-- Notification (bar item) -->
-					<div class="bar__item bar__item_notification has_notification">
-						<a href="#" class="item_opener">
-							<img src="desine/svg/bell.svg" alt="" class="fn__svg">
-						</a>
-						<div class="item_popup">
-							<div class="ntfc_header">
-								<h2 class="ntfc_title">Notifications</h2>
-								<a href="notifications.html">View All</a>
-							</div>
-							<div class="ntfc_list">
-								<ul>
-									<li>
-										<p><a href="notification-single.html">Version 1.1.0 has been launched</a></p>
-										<span>34 Min Ago</span>
-									</li>
-									<li>
-										<p><a href="notification-single.html">Video Generation has been released</a></p>
-										<span>12 Apr</span>
-									</li>
-									<li>
-										<p><a href="notification-single.html">Terms has been updated</a></p>
-										<span>12 Apr</span>
-									</li>
-								</ul>
-							</div>
-						</div>
-					</div>
-					<!-- !Notification (bar item) -->
+
+
 					
-					<!-- Full Screen (bar item) -->
-					<div class="bar__item bar__item_fullscreen">
-						<a href="#" class="item_opener">
-							<img src="desine/svg/fullscreen.svg" alt="" class="fn__svg f_screen">
-							<img src="desine/svg/smallscreen.svg" alt="" class="fn__svg s_screen">
-						</a>
-					</div>
-					<!-- !Full Screen (bar item) -->
+
 					
-					<!-- Language (bar item) -->
-					<div class="bar__item bar__item_language">
-						<a href="#" class="item_opener">
-							<img src="desine/svg/language.svg" alt="" class="fn__svg">
-						</a>
-						<div class="item_popup">
-							<ul>
-								<li>
-									<span class="active">English</span>
-								</li>
-								<li>
-									<a href="#">Spanish</a>
-								</li>
-								<li>
-									<a href="#">French</a>
-								</li>
-							</ul>
-						</div>
-					</div>
-					<!-- !Language (bar item) -->
+
 					
 					<!-- Site Skin (bar item) -->
 					<div class="bar__item bar__item_skin">
@@ -228,29 +145,12 @@
 								</div>
 								<div class="user_info">
 									<h2 class="user_name">{{   account_name  }}<span>Free</span></h2>
-									<p><a href="mailto:[email protected]" class="user_email">{{token2}}</a></p>
 								</div>
 							</div>
 							<div class="user_nav">
 								<ul>
-									<li>
-										<a href="user-profile.html">
-											<span class="icon"><img src="desine/svg/person.svg" alt="" class="fn__svg"></span>
-											<span class="text">Profile</span>
-										</a>
-									</li>
-									<li>
-										<a href="user-settings.html">
-											<span class="icon"><img src="desine/svg/setting.svg" alt="" class="fn__svg"></span>
-											<span class="text">Settings</span>
-										</a>
-									</li>
-									<li>
-										<a href="/">
-											<span class="icon"><img src="desine/svg/billing.svg" alt="" class="fn__svg"></span>
-											<span class="text">Billing</span>
-										</a>
-									</li>
+
+
 									<li>
 										<a href="/login">
 											<span class="icon"><img src="desine/svg/logout.svg" alt="" class="fn__svg"></span>
@@ -279,129 +179,12 @@
 			
 			<div class="mobile_extra_closer"></div>
 			
-			<!-- logo (left panel) -->
-			<div class="leftpanel_logo">
-				<a href="index.html" class="fn_logo">
-					<span class="full_logo">
-						<img src="desine/img/logo-desktop-full.png" alt="" class="desktop_logo">
-						<img src="desine/img/logo-retina-full.png" alt="" class="retina_logo">
-					</span>
-					<span class="short_logo">
-						<img src="desine/img/logo-desktop-mini.png" alt="" class="desktop_logo">
-						<img src="desine/img/logo-retina-mini.png" alt="" class="retina_logo">
-					</span>
-				</a>
-				<a href="#" class="fn__closer fn__icon_button desktop_closer">
-					<img src="desine/svg/arrow.svg" alt="" class="fn__svg">
-				</a>
-				<a href="#" class="fn__closer fn__icon_button mobile_closer">
-					<img src="desine/svg/arrow.svg" alt="" class="fn__svg">
-				</a>
-			</div>
-			<!-- !logo (left panel) -->
-			
-			<!-- content (left panel) -->
-			<div class="leftpanel_content">
-			
-				<!-- #1 navigation group -->
-				<div class="nav_group">
-					<h2 class="group__title">Start Here</h2>
-					<ul class="group__list">
-						<li>
-							<a href="index.html" class="fn__tooltip menu__item" data-position="right" title="Home">
-								<span class="icon"><img src="desine/svg/home.svg" alt="" class="fn__svg"></span>
-								<span class="text">Home</span>
-							</a>
-						</li>
-						<li>
-							<a href="community-feed.html" class="fn__tooltip menu__item" data-position="right" title="Community Feed">
-								<span class="icon"><img src="desine/svg/community.svg" alt="" class="fn__svg"></span>
-								<span class="text">Community Feed</span>
-							</a>
-						</li>
-						<li>
-							<a href="personal-feed.html" class="fn__tooltip menu__item" data-position="right" title="Personal Feed">
-								<span class="icon"><img src="desine/svg/person.svg" alt="" class="fn__svg"></span>
-								<span class="text">Personal Feed<span class="count">48</span></span>
-							</a>
-						</li>
-						<li>
-							<a href="models.html" class="fn__tooltip menu__item" data-position="right" title="Finetuned Models">
-								<span class="icon"><img src="desine/svg/cube.svg" alt="" class="fn__svg"></span>
-								<span class="text">Finetuned Models</span>
-							</a>
-						</li>
-					</ul>
-				</div>
-				<!-- !#1 navigation group -->
-			
-				<!-- #2 navigation group -->
-				<div class="nav_group">
-					<h2 class="group__title">User Tools</h2>
-					<ul class="group__list">
-						<li>
-							<a href="image-generation.html" class="fn__tooltip menu__item" data-position="right" title="Image Generation">
-								<span class="icon"><img src="desine/svg/image.svg" alt="" class="fn__svg"></span>
-								<span class="text">Image Generation</span>
-							</a>
-						</li>
-						<li>
-							<a href="ai-chat-bot.html" class="fn__tooltip active menu__item" data-position="right" title="AI Chat Bot">
-								<span class="icon"><img src="desine/svg/chat.svg" alt="" class="fn__svg"></span>
-								<span class="text">AI Chat Bot</span>
-							</a>
-						</li>
-					</ul>
-				</div>
-				<!-- !#2 navigation group -->
+
+
 			
-				<!-- #3 navigation group -->
-				<div class="nav_group">
-					<h2 class="group__title">Support</h2>
-					<ul class="group__list">
-						<li>
-							<a href="pricing.html" class="fn__tooltip menu__item" data-position="right" title="Pricing">
-								<span class="icon"><img src="desine/svg/dollar.svg" alt="" class="fn__svg"></span>
-								<span class="text">Pricing</span>
-							</a>
-						</li>
-						<li class="menu-item-has-children">
-							<a href="video-generation.html" class="fn__tooltip menu__item" title="FAQ &amp; Help" data-position="right">
-								<span class="icon"><img src="desine/svg/question.svg" alt="" class="fn__svg"></span>
-								<span class="text">FAQ &amp; Help</span>
-								<span class="trigger"><img src="desine/svg/arrow.svg" alt="" class="fn__svg"></span>
-							</a>
-							<ul class="sub-menu">
-								<li>
-									<a href="documentation.html"><span class="text">Documentation</span></a>
-								</li>
-								<li>
-									<a href="faq.html"><span class="text">FAQ</span></a>
-								</li>
-								<li>
-									<a href="changelog.html"><span class="text">Changelog<span class="fn__sup">(1.1.0)</span></span></a>
-								</li>
-								<li>
-									<a href="contact.html"><span class="text">Contact Us</span></a>
-								</li>
-								<li>
-									<a href="index-2.html"><span class="text">Home #2</span></a>
-								</li>
-							</ul>
-						</li>
-						<li>
-							<a href="/login" class="fn__tooltip menu__item" data-position="right" title="Log Out">
-								<span class="icon"><img src="desine/svg/logout.svg" alt="" class="fn__svg"></span>
-								<span class="text">Log Out</span>
-							</a>
-						</li>
-					</ul>
-				</div>
-				<!-- !#3 navigation group -->
-				
+
 				
-			</div>
-			<!-- !content (left panel) -->
+
 			
 		</div>
 		<!-- !LEFT PANEL -->
@@ -425,7 +208,7 @@
 						<div class="fn__title_holder">
 							<div class="container">
 								<!-- Active chat title -->
-								<h1 class="title">Chat Bot Definition</h1>
+								<h1 class="title">ِAI ALEX-9</h1>
 								<!-- !Active chat title -->
 							</div>
 						</div>
@@ -436,7 +219,7 @@
 								<div class="chat__item active" id="chat1">
 
 									<div class="chat__box bot__chat">
-										<div class="author"><span>Bot</span></div>
+										<div class="author"><span>ALEX-9</span></div>
 										<div class="chat">
 											<div  class="fn__animated_text"><p>{{greet}}</p></div>
 											
@@ -448,103 +231,178 @@
 						<div class="chat__comment">
 							<div class="container">
 								<div class="fn__chat_comment">
-									
 									<textarea rows="1" class="fn__hidden_textarea" tabindex="-1"></textarea>
 									<textarea rows="1" placeholder="Send a message..." id="user_input"></textarea>
 									<button onclick="sendMessage()"><img src="desine/svg/enter.svg" alt="" class="fn__svg"></button>
 								</div>
 							</div>
 						</div>
-
+						<div id="chat1"></div> <!-- Container for chat history -->
+						
+						<style>
+							.copy__button, .download__button {
+								color: #7c5fe3;
+								background-color: rgb(0, 0, 0);
+								border: none;
+								border-radius: 5px;
+								padding: 5px 10px;
+								margin: 5px;
+								cursor: pointer;
+								font-size: 14px;
+							}
+						
+							.copy__button:hover, .download__button:hover {
+								background-color: #5a4a9d;
+							}
+					
+						</style>
+						
 						<script>
-function sendMessage() {
-    var user_input = document.getElementById("user_input").value;
-
-    if (user_input.trim() !== "") {
-        // Display user's message immediately
-        addChatMessage(user_input, "User");
-        document.getElementById("user_input").value = "";
-
-        var xhr = new XMLHttpRequest();
-        xhr.open("POST", "/get_response", true);
-        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-        xhr.onreadystatechange = function() {
-            if (xhr.readyState === 4 && xhr.status === 200) {
-                var response_text = xhr.responseText;
-                // Display bot's response
-                addChatMessage2(response_text, "Bot");
-            }
-        };
-        xhr.send("user_input=" + user_input);
-    }
-}
-
-function addChatMessage(message, author) {
-    var chatItem = document.createElement("div");
-    chatItem.className = "chat__box your__chat";
-
-    var authorElement = document.createElement("div");
-    authorElement.className = "author";
-    authorElement.innerHTML = "<span>{{account_name}}</span>";
-
-    var chatElement = document.createElement("div");
-    chatElement.className = "chat";
-
-    chatElement.innerHTML = "<p>" + message + "</p>";
-
-    chatItem.appendChild(authorElement);
-    chatItem.appendChild(chatElement);
-
-    document.getElementById("chat1").appendChild(chatItem);
+						var conversationHistory = [];
+						var userFirstName = "{{ first }}";
+						
+						function sendMessage() {
+							var user_input = document.getElementById("user_input").value;
+						
+							if (user_input.trim() !== "") {
+								// Display user's message immediately
+								addChatMessage(user_input, userFirstName); 
+								document.getElementById("user_input").value = "";
+						
+								// Store user input in conversation history
+								conversationHistory.push({author: userFirstName, message: user_input});
+						
+								var xhr = new XMLHttpRequest();
+								xhr.open("POST", "/get_response", true);
+								xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+								xhr.onreadystatechange = function() {
+									if (xhr.readyState === 4 && xhr.status === 200) {
+										var response_text = xhr.responseText;
+										// Display bot's response
+										addChatMessage2(response_text, "Bot");
+						
+										// Store bot response in conversation history
+										conversationHistory.push({author: "Bot", message: response_text});
+									}
+								};
+								xhr.send("user_input=" + encodeURIComponent(user_input) + "&conversation_history=" + encodeURIComponent(JSON.stringify(conversationHistory)));
+							}
+						}
+						
+						function addChatMessage(message, author) {
+							var chatItem = document.createElement("div");
+							chatItem.className = "chat__box your__chat";
+						
+							var authorElement = document.createElement("div");
+							authorElement.className = "author";
+							authorElement.innerHTML = "<span>{{first}}</span>";
+						
+							var chatElement = document.createElement("div");
+							chatElement.className = "chat";
+						
+							chatElement.innerHTML = "<p>" + message + "</p>";
+						
+							chatItem.appendChild(authorElement);
+							chatItem.appendChild(chatElement);
+						
+							document.getElementById("chat1").appendChild(chatItem);
+						}
+						
+						function addChatMessage2(message, author) {
+							var chatItem = document.createElement("div");
+							chatItem.className = "chat__box bot__chat";
+						
+							var authorElement = document.createElement("div");
+							authorElement.className = "author";
+							authorElement.innerHTML = "<span>ALEX-9</span>";
+						
+							var chatElement = document.createElement("div");
+							chatElement.className = "chat";
+						
+							chatItem.appendChild(authorElement);
+							chatItem.appendChild(chatElement);
+						
+							document.getElementById("chat1").appendChild(chatItem);
+						
+							var messageElement = document.createElement("p");
+							chatElement.appendChild(messageElement);
+						
+							var copyButton = document.createElement("button");
+							copyButton.innerHTML = "Copy";
+							copyButton.className = "copy__button";
+							copyButton.onclick = function() {
+								var tempElement = document.createElement('textarea');
+								tempElement.value = message.replace(/<br\s*\/?>/gi, '\n');
+								document.body.appendChild(tempElement);
+								tempElement.select();
+								document.execCommand('copy');
+								document.body.removeChild(tempElement);
+								alert("Copied to clipboard!");
+							};
+							chatElement.appendChild(copyButton);
+						
+							var index = 0;
+							var typingInterval = setInterval(function() {
+								if (index < message.length) {
+									if (message.charAt(index) === "<" && message.charAt(index + 1) === "b" && message.charAt(index + 2) === "r" && message.charAt(index + 3) === ">") {
+										messageElement.innerHTML += "<br>";
+										index += 3;
+									} else if (message.charAt(index) === "<" && message.charAt(index + 1) === "i" && message.charAt(index + 2) === "m" && message.charAt(index + 3) === "g" && message.charAt(index + 4) === " ") {
+										var srcStart = message.indexOf("src='", index) + 5;
+										var srcEnd = message.indexOf("'", srcStart);
+										var imageUrl = message.substring(srcStart, srcEnd);
+										var imageElement = document.createElement("img");
+										imageElement.src = imageUrl;
+										imageElement.className = "chat__image"; // Add CSS class for styling
+										messageElement.appendChild(imageElement);
+						
+										var downloadButton = document.createElement("button");
+										downloadButton.innerHTML = "Download";
+										downloadButton.className = "download__button";
+										downloadButton.onclick = function() {
+											fetch(imageUrl)
+												.then(response => response.blob())
+												.then(blob => {
+													var url = window.URL.createObjectURL(blob);
+													var a = document.createElement("a");
+													a.style.display = "none";
+													a.href = url;
+													a.download = imageUrl.substring(imageUrl.lastIndexOf('/') + 1);
+													document.body.appendChild(a);
+													a.click();
+													window.URL.revokeObjectURL(url);
+												})
+												.catch(() => alert('Could not download the image.'));
+										};
+										chatElement.appendChild(downloadButton);
+						
+										index = srcEnd + 1;
+									} else {
+										messageElement.innerHTML += message.charAt(index);
+									}
+									index++;
+								} else {
+									clearInterval(typingInterval);
+								}
+							}, 30); // Adjust the delay (in milliseconds) between each character being added
+						}
+						</script>
+						
+						<style>
+pre {
+    background-color: #f5f5f5;
+    padding: 10px;
+    border-radius: 5px;
+    overflow-x: auto;
+    white-space: pre-wrap; /* Adjust this based on your preference */
+    margin: 10px 0;
 }
 
-function addChatMessage2(message, author) {
-  var chatItem = document.createElement("div");
-  chatItem.className = "chat__box bot__chat";
-
-  var authorElement = document.createElement("div");
-  authorElement.className = "author";
-  authorElement.innerHTML = "<span>" + author + "</span>";
-
-  var chatElement = document.createElement("div");
-  chatElement.className = "chat";
-
-  chatItem.appendChild(authorElement);
-  chatItem.appendChild(chatElement);
-
-  document.getElementById("chat1").appendChild(chatItem);
-
-  var messageElement = document.createElement("p");
-  chatElement.appendChild(messageElement);
-
-  var index = 0;
-  var typingInterval = setInterval(function() {
-    if (index < message.length) {
-      if (message.charAt(index) === "<" && message.charAt(index + 1) === "b" && message.charAt(index + 2) === "r" && message.charAt(index + 3) === ">") {
-        messageElement.innerHTML += "<br>";
-        index += 3;
-      } else if (message.charAt(index) === "<" && message.charAt(index + 1) === "i" && message.charAt(index + 2) === "m" && message.charAt(index + 3) === "g" && message.charAt(index + 4) === " ") {
-        var srcStart = message.indexOf("src='", index) + 5;
-        var srcEnd = message.indexOf("'", srcStart);
-        var imageUrl = message.substring(srcStart, srcEnd);
-        var imageElement = document.createElement("img");
-        imageElement.src = imageUrl;
-        imageElement.className = "chat__image"; // Add CSS class for styling
-        messageElement.appendChild(imageElement);
-        index = srcEnd + 1;
-
-      } else {
-        messageElement.innerHTML += message.charAt(index);
-      }
-      index++;
-    } else {
-      clearInterval(typingInterval);
-    }
-  }, 30); // Adjust the delay (in milliseconds) between each character being added
+code {
+    color: #d63384;
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-size: 14px;
 }
-
-</script>
-<style>
 .chat__image {
   max-width: 200px; /* Adjust the maximum width as desired */
   max-height: 200px; /* Adjust the maximum height as desired */
@@ -571,7 +429,7 @@ function addChatMessage2(message, author) {
 					
 					<div class="chat__sidebar">
 						<div class="sidebar_header">
-							<a href="{{ url_for('home') }}" class="fn__new_chat_link">
+							<a href="{{ url_for('chat', account_name=account_name, greet=greet, first=first, last=last, token2=token2) }}" class="fn__new_chat_link">
 								<span class="icon"></span>
 								<span class="text">New Chat</span>
 							</a>
@@ -591,21 +449,7 @@ function addChatMessage2(message, author) {
 			<!-- !PAGE (all pages go inside this div) -->
 			
 			
-			<!-- FOOTER (inside the content) -->
-			<footer class="techwave_fn_footer">
-				<div class="techwave_fn_footer_content">
-					<div class="copyright">
-						<p><script>document.write(new Date().getFullYear())</script>© SRBThemes</p>
-					</div>
-					<div class="menu_items">
-						<ul>
-							<li><a href="terms.html">Terms of Service</a></li>
-							<li><a href="privacy.html">Privacy Policy</a></li>
-						</ul>
-					</div>
-				</div>
-			</footer>
-			<!-- !FOOTER (inside the content) -->
+
 			
 		</div>
 		<!-- !CONTENT -->