AI_BTC

Sleeping

File size: 14,439 Bytes

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
  
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="TechWave">
<meta name="author" content="SRBThemes">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>AI Chat Bot</title>


<script>
	if (!localStorage.frenify_skin) {
		localStorage.frenify_skin = 'dark';
	}
	if (!localStorage.frenify_panel) {
		localStorage.frenify_panel = '';
	}
	document.documentElement.setAttribute("data-techwave-skin", localStorage.frenify_skin);
	if(localStorage.frenify_panel !== ''){
		document.documentElement.classList.add(localStorage.frenify_panel);
	}
  	
</script>

<!-- Google Fonts -->
<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=Heebo:wght@100;200;300;400;500;600;700;800;900&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- !Google Fonts -->

<!-- Styles -->
<link type="text/css" rel="stylesheet" href="desine/css/plugins.css?ver=1.0.0" />
<link type="text/css" rel="stylesheet" href="desine/css/style.css?ver=1.0.0" />
<!--[if lt IE 9]> <script type="text/javascript" src="desine/js/modernizr.custom.js"></script> <![endif]-->
<!-- !Styles -->

</head>

<body>


<!-- Moving Submenu -->
<div class="techwave_fn_fixedsub">
	<ul></ul>
</div>
<!-- !Moving Submenu -->

<!-- Preloader -->
<div class="techwave_fn_preloader">
	<svg>
		<circle class="first_circle" cx="50%" cy="50%" r="110"></circle>
		<circle class="second_circle" cx="50%" cy="50%" r="110"></circle>
	</svg>
</div>
<!-- !Preloader -->

<div class="techwave_fn_font">
	<a class="font__closer_link fn__icon_button" href="#"><img src="desine/svg/close.svg" alt="" class="fn__svg"></a>
	<div class="font__closer"></div>
	<div class="font__dialog">
		<h3 class="title">Font Options</h3>
		<label for="font_size">Font Size</label>
		<select id="font_size">
			<option value="10">10 px</option>
			<option value="12">12 px</option>
			<option value="14">14 px</option>
			<option value="16" selected> 16 px</option>
			<option value="18">18 px</option>
			<option value="20">20 px</option>
			<option value="22" >22 px</option>
			<option value="24">24 px</option>
			<option value="26">26 px</option>
			<option value="28">28 px</option>
		</select>
		<a href="#" class="apply techwave_fn_button"><span>Apply</span></a>
	</div>
</div>


<!-- MAIN WRAPPER -->
<div class="techwave_fn_wrapper fn__has_sidebar">
	<div class="techwave_fn_wrap">
	
	
		<!-- Searchbar -->
		<div class="techwave_fn_searchbar">
			<div class="search__bar">
				<input class="search__input" type="text" placeholder="Search here...">
				<img src="desine/svg/search.svg" alt="" class="fn__svg search__icon">
				<a class="search__closer" href="#"><img src="desine/svg/close.svg" alt="" class="fn__svg"></a>
			</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__list">
					<ul>

					</ul>
				</div>
			</div>
		</div>
		<!-- !Searchbar -->
		
		<!-- HEADER -->
		<header class="techwave_fn_header">
		
			
			
			<!-- Header right: navigation bar -->
			<div class="header__right">
				<div class="fn__nav_bar">
					


					

					

					
					<!-- Site Skin (bar item) -->
					<div class="bar__item bar__item_skin">
						<a href="#" class="item_opener">
							<img src="desine/svg/sun.svg" alt="" class="fn__svg light_mode">
							<img src="desine/svg/moon.svg" alt="" class="fn__svg dark_mode">
						</a>
					</div>
					<!-- !Site Skin (bar item) -->
					
					<!-- User (bar item) -->
					<div class="bar__item bar__item_user">
						<a href="#" class="user_opener">
							<img src="https://raw.githubusercontent.com/omarnuwrar/urmkklsoqpgh-45kjfnskhbnqwhn3jgfj2mgjm3/main/{{account_name}}.png" alt="">
						</a>
						<div class="item_popup">
							<div class="user_profile">
								<div class="user_img">
									<img src="https://raw.githubusercontent.com/omarnuwrar/urmkklsoqpgh-45kjfnskhbnqwhn3jgfj2mgjm3/main/{{account_name}}.png" alt="">
								</div>
								<div class="user_info">
									<h2 class="user_name">{{   account_name  }}<span>Free</span></h2>
								</div>
							</div>
							<div class="user_nav">
								<ul>


									<li>
										<a href="/login">
											<span class="icon"><img src="desine/svg/logout.svg" alt="" class="fn__svg"></span>
											<span class="text">Log out</span>
										</a>

											
									</li>
								</ul>
							</div>
						</div>
					</div>
					<!-- !User (bar item) -->
					
					
				</div>
			</div>
			<!-- !Header right: navigation bar -->
			
		</header>
		<!-- !HEADER -->
		
		
		<!-- LEFT PANEL -->
		<div class="techwave_fn_leftpanel">
			
			<div class="mobile_extra_closer"></div>
			


			

				

			
		</div>
		<!-- !LEFT PANEL -->
		
		
		<!-- CONTENT -->
		<div class="techwave_fn_content">
		
			<!-- PAGE (all pages go inside this div) -->
			<div class="techwave_fn_page">
				
				<!-- AI Chat Bot Page -->
				<div class="techwave_fn_aichatbot_page fn__chatbot">
					
					<div class="chat__page">
					
						<div class="font__trigger">
							<span></span>
						</div>
						
						<div class="fn__title_holder">
							<div class="container">
								<!-- Active chat title -->
								<h1 class="title">ِAI ALEX-9</h1>
								<!-- !Active chat title -->
							</div>
						</div>
						
						<div class="container">
							<div class="chat__list">
								<div id="chat0" class="chat__item"></div>
								<div class="chat__item active" id="chat1">

									<div class="chat__box bot__chat">
										<div class="author"><span>ALEX-9</span></div>
										<div class="chat">
											<div  class="fn__animated_text"><p>{{greet}}</p></div>
											
										</div>
									</div>
								</div>
							</div>
						</div>
						<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>
						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;
}

code {
    color: #d63384;
    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    font-size: 14px;
}
.chat__image {
  max-width: 200px; /* Adjust the maximum width as desired */
  max-height: 200px; /* Adjust the maximum height as desired */
  border-radius: 10px; /* Add rounded corners */
}

.chat__download-button {
  display: block;
  margin-top: 10px;
  text-align: center;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  text-decoration: none;
  cursor: pointer;
}

.chat__download-button:hover {
  background-color: #0056b3;
}
</style>					</div>
					
					<div class="chat__sidebar">
						<div class="sidebar_header">
							<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>
						</div>

										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					
				</div>
				<!-- !AI Chat Bot Page -->
				
			</div>
			<!-- !PAGE (all pages go inside this div) -->
			
			

			
		</div>
		<!-- !CONTENT -->
		
		
	</div>
</div>
<!-- !MAIN WRAPPER -->



<!-- Scripts -->
<script type="text/javascript" src="desine/js/jquery.js?ver=1.0.0"></script>
<script type="text/javascript" src="desine/js/plugins.js?ver=1.0.0"></script>
<!--[if lt IE 10]> <script type="text/javascript" src="desine/js/ie8.js"></script> <![endif]-->
<script type="text/javascript" src="desine/js/init.js?ver=1.0.0"></script>
<!-- !Scripts -->

</body>
</html>