{% extends 'base.html' %}

{% load static %}

{% block title %}AI Chat{% endblock %}

{% block js %}
	<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
	<script src="{% static 'plugins/@highlightjs/cdn-assets/highlight.min.js' %}"></script>
	<script src="{% static 'plugins/render.highlight.js' %}"></script>
	<script src="{% static 'js/demo/ai-chat.demo.js' %}"></script>
{% endblock %}

{% block content %}
	<a class="d-lg-none btn btn-icon btn-lg bg-component text-body rounded-0 z-3 rounded-end-3 mt-5 shadow-lg position-absolute top-0 start-0 " data-bs-toggle="offcanvas" href="#aiChatSidebar" role="button" aria-controls="offcanvasExample">
		<i class="fa fa-gear"></i>
	</a>
	<!-- BEGIN ai-chat-sidebar -->
	<div class="w-250px bg-component  bg-opacity-75 offcanvas offcanvas-start position-lg-relative transform-lg-none visibility-lg-initial z-lg-3" id="aiChatSidebar">
		<!-- BEGIN ai-chat-sidebar-mobile-bg -->
		<div class="bg-component d-lg-none d-block position-absolute top-0 end-0 w-100 h-100"></div>
		<!-- END ai-chat-sidebar-mobile-bg -->
		
		<!-- BEGIN ai-chat-sidebar-content -->
		<div class="position-relative h-100 d-flex flex-column">
			<!-- BEGIN ai-chat-new-btn -->
			<div class="p-3">
				<button type="button" class="btn bg-gradient-to-r bg-gradient-from-teal bg-gradient-to-blue text-white rounded-4 w-100 fw-bold border-0" data-toggle-ai-tab="aiChatIntro"><i class="fa fa-plus me-2 ms-n2 my-4px"></i> New Chat</button>
			</div>
			<!-- END ai-chat-new-btn -->
			
			<hr class="m-0 opacity-20" />
			
			<!-- BEGIN ai-chat-history -->
			<div class="flex-1 overflow-hidden text-body">
				<!-- BEGIN scrollbar -->
				<div data-scrollbar="true" class="p-3" data-height="100%">
					<div class="fw-bold mb-2 d-flex align-items-center">
						<iconify-icon icon="solar:calendar-bold-duotone" class="fs-18px me-5px opacity-5"></iconify-icon> 
						Today
					</div>
					<div class="fs-6 px-2">
						<div class="position-relative hover-bg-body hover-show rounded-4 py-6px px-3 border-0 d-flex align-items-center">
							<div class="fw-bold flex-1 text-body text-opacity-75">Plan My Dream Vacation</div>
							<a href="#" class="stretched-link" data-toggle-ai-tab="aiChatPrev"></a>
							<div class="dropdown position-relative z-3">
								<a href="#" data-bs-toggle="dropdown" class="link-secondary opacity-50 d-none hover-show-elm"><i class="fa fa-ellipsis"></i></a>
								<div class="dropdown-menu">
									<a href="#" class="dropdown-item">Share Chat</a>
									<a href="#" class="dropdown-item">See Details</a>
									<div class="dropdown-divider"></div>
									<a href="#" class="dropdown-item">Rename</a>
									<a href="#" class="dropdown-item">Archive</a>
									<a href="#" class="dropdown-item">Delete</a>
								</div>
							</div>
						</div>
						<div class="position-relative hover-bg-body hover-show rounded-4 py-6px px-3 border-0 d-flex align-items-center">
							<div class="fw-bold flex-1 text-body text-opacity-75">Craft a Winning Pitch</div>
							<a href="#" class="stretched-link" data-toggle-ai-tab="aiChatPrev"></a>
							<div class="dropdown position-relative z-3">
								<a href="#" data-bs-toggle="dropdown" class="link-secondary opacity-50 d-none hover-show-elm"><i class="fa fa-ellipsis"></i></a>
								<div class="dropdown-menu">
									<a href="#" class="dropdown-item">Share Chat</a>
									<a href="#" class="dropdown-item">See Details</a>
									<div class="dropdown-divider"></div>
									<a href="#" class="dropdown-item">Rename</a>
									<a href="#" class="dropdown-item">Archive</a>
									<a href="#" class="dropdown-item">Delete</a>
								</div>
							</div>
						</div>
						<div class="position-relative hover-bg-body hover-show rounded-4 py-6px px-3 mb-12 border-0 d-flex align-items-center">
							<div class="fw-bold flex-1 text-body text-opacity-75">Organize My Day</div>
							<a href="#" class="stretched-link" data-toggle-ai-tab="aiChatPrev"></a>
							<div class="dropdown position-relative z-3">
								<a href="#" data-bs-toggle="dropdown" class="link-secondary opacity-50 d-none hover-show-elm"><i class="fa fa-ellipsis"></i></a>
								<div class="dropdown-menu">
									<a href="#" class="dropdown-item">Share Chat</a>
									<a href="#" class="dropdown-item">See Details</a>
									<div class="dropdown-divider"></div>
									<a href="#" class="dropdown-item">Rename</a>
									<a href="#" class="dropdown-item">Archive</a>
									<a href="#" class="dropdown-item">Delete</a>
								</div>
							</div>
						</div>
						<div class="position-relative hover-bg-body hover-show rounded-4 py-6px px-3 mb-12 border-0 d-flex align-items-center">
							<div class="fw-bold flex-1 text-body text-opacity-75">Write Custom Code</div>
							<a href="#" class="stretched-link" data-toggle-ai-tab="aiChatPrev"></a>
							<div class="dropdown position-relative z-3">
								<a href="#" data-bs-toggle="dropdown" class="link-secondary opacity-50 d-none hover-show-elm"><i class="fa fa-ellipsis"></i></a>
								<div class="dropdown-menu">
									<a href="#" class="dropdown-item">Share Chat</a>
									<a href="#" class="dropdown-item">See Details</a>
									<div class="dropdown-divider"></div>
									<a href="#" class="dropdown-item">Rename</a>
									<a href="#" class="dropdown-item">Archive</a>
									<a href="#" class="dropdown-item">Delete</a>
								</div>
							</div>
						</div>
						<div class="position-relative hover-bg-body hover-show rounded-4 py-6px px-3 mb-12 border-0 d-flex align-items-center">
							<div class="fw-bold flex-1 text-body text-opacity-75">Draft a Polished Email</div>
							<a href="#" class="stretched-link" data-toggle-ai-tab="aiChatPrev"></a>
							<div class="dropdown position-relative z-3">
								<a href="#" data-bs-toggle="dropdown" class="link-secondary opacity-50 d-none hover-show-elm"><i class="fa fa-ellipsis"></i></a>
								<div class="dropdown-menu">
									<a href="#" class="dropdown-item">Share Chat</a>
									<a href="#" class="dropdown-item">See Details</a>
									<div class="dropdown-divider"></div>
									<a href="#" class="dropdown-item">Rename</a>
									<a href="#" class="dropdown-item">Archive</a>
									<a href="#" class="dropdown-item">Delete</a>
								</div>
							</div>
						</div>
						<div class="position-relative hover-bg-body hover-show rounded-4 py-6px px-3 mb-12 border-0 d-flex align-items-center">
							<div class="fw-bold flex-1 text-body text-opacity-75">Brainstorm Ideas</div>
							<a href="#" class="stretched-link" data-toggle-ai-tab="aiChatPrev"></a>
							<div class="dropdown position-relative z-3">
								<a href="#" data-bs-toggle="dropdown" class="link-secondary opacity-50 d-none hover-show-elm"><i class="fa fa-ellipsis"></i></a>
								<div class="dropdown-menu">
									<a href="#" class="dropdown-item">Share Chat</a>
									<a href="#" class="dropdown-item">See Details</a>
									<div class="dropdown-divider"></div>
									<a href="#" class="dropdown-item">Rename</a>
									<a href="#" class="dropdown-item">Archive</a>
									<a href="#" class="dropdown-item">Delete</a>
								</div>
							</div>
						</div>
					</div>
						
					<div class="fw-bold mb-2 d-flex align-items-center mt-4">
						<iconify-icon icon="solar:calendar-bold-duotone" class="fs-18px me-5px"></iconify-icon>
						1 Week Ago
					</div>
					<div class="fs-6 px-2">
						<div class="position-relative hover-bg-body hover-show rounded-4 py-6px px-3 mb-12 border-0 d-flex align-items-center">
							<div class="fw-bold flex-1 text-body text-opacity-75">Summarize an Article</div><a href="#" class="stretched-link" data-toggle-ai-tab="aiChatPrev"></a>
							<div class="dropdown position-relative z-3">
								<a href="#" data-bs-toggle="dropdown" class="link-secondary opacity-50 d-none hover-show-elm"><i class="fa fa-ellipsis"></i></a>
								<div class="dropdown-menu">
									<a href="#" class="dropdown-item">Share Chat</a>
									<a href="#" class="dropdown-item">See Details</a>
									<div class="dropdown-divider"></div>
									<a href="#" class="dropdown-item">Rename</a>
									<a href="#" class="dropdown-item">Archive</a>
									<a href="#" class="dropdown-item">Delete</a>
								</div>
							</div>
						</div>
						<div class="position-relative hover-bg-body hover-show rounded-4 py-6px px-3 mb-12 border-0 d-flex align-items-center">
							<div class="fw-bold flex-1 text-body text-opacity-75">Prepare for a Speech</div>
							<a href="#" class="stretched-link" data-toggle-ai-tab="aiChatPrev"></a>
							<div class="dropdown position-relative z-3">
								<a href="#" data-bs-toggle="dropdown" class="link-secondary opacity-50 d-none hover-show-elm"><i class="fa fa-ellipsis"></i></a>
								<div class="dropdown-menu">
									<a href="#" class="dropdown-item">Share Chat</a>
									<a href="#" class="dropdown-item">See Details</a>
									<div class="dropdown-divider"></div>
									<a href="#" class="dropdown-item">Rename</a>
									<a href="#" class="dropdown-item">Archive</a>
									<a href="#" class="dropdown-item">Delete</a>
								</div>
							</div>
						</div>
						<div class="position-relative hover-bg-body hover-show rounded-4 py-6px px-3 mb-12 border-0 d-flex align-items-center">
							<div class="fw-bold flex-1 text-body text-opacity-75">Create a Business Proposal</div>
							<a href="#" class="stretched-link" data-toggle-ai-tab="aiChatPrev"></a>
							<div class="dropdown position-relative z-3">
								<a href="#" data-bs-toggle="dropdown" class="link-secondary opacity-50 d-none hover-show-elm"><i class="fa fa-ellipsis"></i></a>
								<div class="dropdown-menu">
									<a href="#" class="dropdown-item">Share Chat</a>
									<a href="#" class="dropdown-item">See Details</a>
									<div class="dropdown-divider"></div>
									<a href="#" class="dropdown-item">Rename</a>
									<a href="#" class="dropdown-item">Archive</a>
									<a href="#" class="dropdown-item">Delete</a>
								</div>
							</div>
						</div>
					</div>
					
					<div class="fw-bold mb-2 d-flex align-items-center mt-4">
						<iconify-icon icon="solar:calendar-bold-duotone" class="fs-18px me-5px"></iconify-icon> 
						2 Weeks Ago
					</div>
					<div class="fs-6 px-2">
						<div class="position-relative hover-bg-body hover-show rounded-4 py-6px px-3 mb-12 border-0 d-flex align-items-center">
							<div class="fw-bold flex-1 text-body text-opacity-75">Organize Project Tasks</div>
							<a href="#" class="stretched-link" data-toggle-ai-tab="aiChatPrev"></a>
							<div class="dropdown position-relative z-3">
								<a href="#" data-bs-toggle="dropdown" class="link-secondary opacity-50 d-none hover-show-elm"><i class="fa fa-ellipsis"></i></a>
								<div class="dropdown-menu">
									<a href="#" class="dropdown-item">Share Chat</a>
									<a href="#" class="dropdown-item">See Details</a>
									<div class="dropdown-divider"></div>
									<a href="#" class="dropdown-item">Rename</a>
									<a href="#" class="dropdown-item">Archive</a>
									<a href="#" class="dropdown-item">Delete</a>
								</div>
							</div>
						</div>
						<div class="position-relative hover-bg-body hover-show rounded-4 py-6px px-3 mb-12 border-0 d-flex align-items-center">
							<div class="fw-bold flex-1 text-body text-opacity-75">Research Market Trends</div>
							<a href="#" class="stretched-link" data-toggle-ai-tab="aiChatPrev"></a>
							<div class="dropdown position-relative z-3">
								<a href="#" data-bs-toggle="dropdown" class="link-secondary opacity-50 d-none hover-show-elm"><i class="fa fa-ellipsis"></i></a>
								<div class="dropdown-menu">
									<a href="#" class="dropdown-item">Share Chat</a>
									<a href="#" class="dropdown-item">See Details</a>
									<div class="dropdown-divider"></div>
									<a href="#" class="dropdown-item">Rename</a>
									<a href="#" class="dropdown-item">Archive</a>
									<a href="#" class="dropdown-item">Delete</a>
								</div>
							</div>
						</div>
						<div class="position-relative hover-bg-body hover-show rounded-4 py-6px px-3 mb-12 border-0 d-flex align-items-center">
							<div class="fw-bold flex-1 text-body text-opacity-75">Craft Social Media Posts</div>
							<a href="#" class="stretched-link" data-toggle-ai-tab="aiChatPrev"></a>
							<div class="dropdown position-relative z-3">
								<a href="#" data-bs-toggle="dropdown" class="link-secondary opacity-50 d-none hover-show-elm"><i class="fa fa-ellipsis"></i></a>
								<div class="dropdown-menu">
									<a href="#" class="dropdown-item">Share Chat</a>
									<a href="#" class="dropdown-item">See Details</a>
									<div class="dropdown-divider"></div>
									<a href="#" class="dropdown-item">Rename</a>
									<a href="#" class="dropdown-item">Archive</a>
									<a href="#" class="dropdown-item">Delete</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- END scrollbar -->
			</div>
			<!-- END ai-chat-history -->
			
			<hr class="m-0 opacity-20" />
			
			<!-- BEGIN ai-chat-info -->
			<div class="fs-6 p-2">
				<div class="hover-bg-body rounded-4 py-6px px-3 border-0 d-flex align-items-center fw-bold fs-13px text-body">
					<i class="far fa-folder fa-lg fa-fw me-1"></i>
					Explore Bots
				</div>
				<div class="hover-bg-body rounded-4 py-6px px-3 border-0 d-flex align-items-center fw-bold fs-13px text-body">
					<i class="far fa-gem fa-lg fa-fw me-1"></i>
					Go Pro
				</div>
			</div>
			<!-- END ai-chat-info -->
			
			<hr class="m-0 opacity-20" />
			
			<!-- BEGIN ai-chat-user-info -->
			<div class="rounded-4 px-3 py-3 border-0">
				<div class="fw-bold flex-1 fs-13px text-body d-flex align-items-center">
					<div class="w-30px h-30px fs-20px me-2 rounded-circle text-white bg-gradient-45 bg-gradient-from-blue  bg-gradient-to-teal d-flex align-items-center justify-content-center">
						S
					</div>
					support@seantheme.com
				</div>
			</div>
			<!-- END ai-chat-user-info -->
		</div>
		<!-- END ai-chat-sidebar-content -->
	</div>
	<!-- END ai-chat-sidebar -->
	
	<!-- BEGIN ai-chat-content -->
	<div class="flex-1 d-flex flex-column  bg-light bg-opacity-75">
		<!-- BEGIN ai-chat-tabs -->
		<div class="flex-1 overflow-hidden tab-content p-2 p-lg-4 w-100">
			<!-- BEGIN ai-chat-intro -->
			<div id="aiChatIntro" class="h-100 px-3 px-lg-4 py-3 tab-pane fade show active" data-scrollbar="true">
				<div class="display-6 fw-bold mb-0">
					<span class="text-gradient bg-gradient-45 bg-gradient-from-blue bg-gradient-to-teal">Hello, there</span>
				</div>
				<div class="fs-2 fw-bold text-body mb-4">How can I assist you today?</div>
				<div class="row g-4">
					<div class="col-sm-6 col-xl-4">
						<a class="card cursor-pointer h-100 border-0 bg-component hover-bg-body position-relative overflow-hidden rounded-4 text-decoration-none" data-toggle-ai-tab="aiChatNew" data-toggle-ai-input="Suggest hidden gems and must-see spots for my next trip.">
							<div class="card-body p-4">
								<div class="mb-3 d-flex">
									<iconify-icon icon="solar:calendar-date-bold-duotone" class="fs-40px"></iconify-icon>
								</div>
								<div class="text-body text-opacity-75 fw-bold mb-1">Plan My Adventure</div>
								<div class="fs-5 fw-bold">Suggest hidden gems and must-see spots for my next trip.</div>
							</div>
						</a>
					</div>
					<div class="col-sm-6 col-xl-4">
						<a class="card cursor-pointer h-100 border-0 bg-component hover-bg-body position-relative overflow-hidden rounded-4 text-decoration-none" data-toggle-ai-tab="aiChatNew" data-toggle-ai-input="Create a concise and professional response for any situation.">
							<div class="card-body p-4">
								<div class="mb-3 d-flex">
									<iconify-icon icon="solar:chat-square-arrow-bold-duotone" class="fs-40px"></iconify-icon>
								</div>
								<div class="text-body text-opacity-75 fw-bold mb-1">Draft a Quick Reply</div>
								<div class="fs-5 fw-bold">Create a concise and professional response for any situation.</div>
							</div>
						</a>
					</div>
					<div class="col-sm-6 col-xl-4">
						<a class="card cursor-pointer h-100 border-0 bg-component hover-bg-body position-relative overflow-hidden rounded-4 text-decoration-none" data-toggle-ai-tab="aiChatNew" data-toggle-ai-input="Break down complex ideas into simple, easy-to-understand explanations.">
							<div class="card-body p-4">
								<div class="mb-3 d-flex">
									<iconify-icon icon="solar:layers-minimalistic-bold-duotone" class="fs-40px"></iconify-icon>
								</div>
								<div class="text-body text-opacity-75 fw-bold mb-1">Simplify This</div>
								<div class="fs-5 fw-bold">Break down complex ideas into simple, easy-to-understand explanations.</div>
							</div>
						</a>
					</div>
					<div class="col-sm-6 col-xl-4">
						<a class="card cursor-pointer h-100 border-0 bg-component hover-bg-body position-relative overflow-hidden rounded-4 text-decoration-none" data-toggle-ai-tab="aiChatNew" data-toggle-ai-input="Write and troubleshoot code with smart fixes for tricky errors.">
							<div class="card-body p-4">
								<div class="mb-3 d-flex">
									<iconify-icon icon="solar:code-bold-duotone" class="fs-40px"></iconify-icon>
								</div>
								<div class="text-body text-opacity-75 fw-bold mb-1">Code & Debug</div>
								<div class="fs-5 fw-bold">Write and troubleshoot code with smart fixes for tricky errors.</div>
							</div>
						</a>
					</div>
					<div class="col-sm-6 col-xl-4">
						<a class="card cursor-pointer h-100 border-0 bg-component hover-bg-body position-relative overflow-hidden rounded-4 text-decoration-none" data-toggle-ai-tab="aiChatNew" data-toggle-ai-input="Generate fresh ideas for projects, names, or creative solutions.">
							<div class="card-body p-4">
								<div class="mb-3 d-flex">
									<iconify-icon icon="solar:lightbulb-bolt-bold-duotone" class="fs-40px"></iconify-icon>
								</div>
								<div class="text-body text-opacity-75 fw-bold mb-1">Brainstorm Anything</div>
								<div class="fs-5 fw-bold">Generate fresh ideas for projects, names, or creative solutions.</div>
							</div>
						</a>
					</div>
					<div class="col-sm-6 col-xl-4">
						<a class="card cursor-pointer h-100 border-0 bg-component hover-bg-body position-relative overflow-hidden rounded-4 text-decoration-none" data-toggle-ai-tab="aiChatNew" data-toggle-ai-input="Craft emails, reports, or social posts in a polished, clear tone.">
							<div class="card-body p-4">
								<div class="mb-3 d-flex">
									<iconify-icon icon="solar:pen-2-bold-duotone" class="fs-40px"></iconify-icon>
								</div>
								<div class="text-body text-opacity-75 fw-bold mb-1">Write It for Me</div>
								<div class="fs-5 fw-bold">Craft emails, reports, or social posts in a polished, clear tone.</div>
							</div>
						</a>
					</div>
				</div>
			</div>
			<!-- END ai-chat-intro -->
			
			<!-- BEGIN ai-chat-prev -->
			<div id="aiChatPrev" class="h-100 tab-pane fade px-lg-3 my-lg-3 my-2" data-scrollbar="true">
				<!-- BEGIN chat-human -->
				<div class="d-flex justify-content-end align-items-end mb-3">
					<div class="rounded-4 px-3 py-2 bg-component text-body fw-bold">
						Can you generate some content for social media captions?
					</div>
					<div>
						<div class="w-30px h-30px my-2px ms-2 fs-20px me-2 rounded-circle text-white bg-inverse d-flex align-items-center justify-content-center">
							S
						</div>
					</div>
				</div>
				<!-- END chat-human -->
				
				<!-- BEGIN chat-ai -->
				<div class="mb-3">
					<div class="d-flex justify-content-start align-items-end">
						<div>
							<div class="w-30px h-30px my-2px ms-2 fs-16px me-2 rounded-circle bg-gradient-to-r bg-gradient-from-blue bg-gradient-to-teal text-white d-flex align-items-center justify-content-center">
								<i class="fa fa-shekel-sign"></i>
							</div>
						</div>
						<div class="rounded-4 px-3 py-2 bg-component text-body fw-bold mw-75">
							<div>Absolutely! What’s the topic or product?</div>
						</div>
					</div>
					<div class="d-flex">
						<div class="w-30px h-30px me-2 ms-2"></div>
						<div class="d-flex flex-wrap w-100 p-2 opacity-75">
							<a href="#" class="link-secondary text-decoration me-2"><i class="far fa-fw fa-copy"></i></a>
							<a href="#" class="link-secondary text-decoration me-2"><i class="far fa-fw fa-thumbs-up"></i></a>
							<a href="#" class="link-secondary text-decoration me-2"><i class="far fa-fw fa-thumbs-down"></i></a>
							<a href="#" class="link-secondary text-decoration me-2"><i class="fa fa-fw fa-microphone"></i></a>
							<a href="#" class="link-secondary text-decoration"><i class="fa fa-fw fa-arrow-rotate-right"></i></a>
						</div>
					</div>
				</div>
				<!-- END chat-ai -->
	
				<!-- BEGIN chat-human -->
				<div class="d-flex justify-content-end align-items-end mb-3">
					<div class="rounded-4 px-3 py-2 bg-component text-body fw-bold">
						Let’s say… a coffee shop promotion.
					</div>
					<div>
						<div class="w-30px h-30px my-2px ms-2 fs-20px me-2 rounded-circle text-white bg-inverse d-flex align-items-center justify-content-center">
							S
						</div>
					</div>
				</div>
				<!-- END chat-human -->
				
				<!-- BEGIN chat-ai -->
				<div class="mb-3">
					<div class="d-flex justify-content-start align-items-end">
						<div>
							<div class="w-30px h-30px my-2px ms-2 fs-16px me-2 rounded-circle bg-gradient-to-r bg-gradient-from-blue bg-gradient-to-teal text-white d-flex align-items-center justify-content-center">
								<i class="fa fa-shekel-sign"></i>
							</div>
						</div>
						<div class="rounded-4 px-3 py-2 bg-component text-body fw-bold mw-75">
							<div>How about these:</div>
							<ol class="my-2 ps-4">
								<li>Start your day with the perfect brew – 20% off all lattes today!</li>
								<li>Coffee first, everything else later. Grab your cup now!</li>
								<li>A little caffeine, a lot of happiness. Visit us for your daily fix!</li>
							</ol>
							<div>Need more options?</div>
						</div>
					</div>
					<div class="d-flex">
						<div class="w-30px h-30px me-2 ms-2"></div>
						<div class="d-flex flex-wrap w-100 p-2 opacity-75">
							<a href="#" class="link-secondary text-decoration me-2"><i class="far fa-fw fa-copy"></i></a>
							<a href="#" class="link-secondary text-decoration me-2"><i class="far fa-fw fa-thumbs-up"></i></a>
							<a href="#" class="link-secondary text-decoration me-2"><i class="far fa-fw fa-thumbs-down"></i></a>
							<a href="#" class="link-secondary text-decoration me-2"><i class="fa fa-fw fa-microphone"></i></a>
							<a href="#" class="link-secondary text-decoration"><i class="fa fa-fw fa-arrow-rotate-right"></i></a>
						</div>
					</div>
				</div>
				<!-- END chat-ai -->
	
				<!-- BEGIN chat-human -->
				<div class="d-flex justify-content-end align-items-end mb-3">
					<div class="rounded-4 px-3 py-2 bg-component text-body fw-bold">
						How can I fetch API data in Vue.js?
					</div>
					<div>
						<div class="w-30px h-30px my-2px ms-2 fs-20px me-2 rounded-circle text-white bg-inverse d-flex align-items-center justify-content-center">
							S
						</div>
					</div>
				</div>
				<!-- END chat-human -->
				
				<!-- BEGIN chat-ai -->
				<div class="mb-3">
					<div class="d-flex justify-content-start align-items-end">
						<div>
							<div class="w-30px h-30px my-2px ms-2 fs-16px me-2 rounded-circle bg-gradient-to-r bg-gradient-from-blue bg-gradient-to-teal text-white d-flex align-items-center justify-content-center">
								<i class="fa fa-shekel-sign"></i>
							</div>
						</div>
						<div class="rounded-4 px-3 py-2 bg-component text-body fw-bold mw-75">
							Here’s a simple example:
							<div class="card rounded-3 my-2">
								<div class="card-header d-flex">
									<span class="flex-1">vue</span>
									<span><a href="#" class="text-body text-decoration-none"><i class="far fa-copy"></i> Copy</a></span>
								</div>
								<div class="hljs-wrapper bg-component">
							<pre><code class="html hljs py-10px">&lt;script&gt;
  export default {
    async mounted() {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
	    console.log(data);
    }
  }
&lt;/script&gt;					
</code></pre>
								</div>
							</div>
							Would you like me to explain how this works?
						</div>
					</div>
					<div class="d-flex">
						<div class="w-30px h-30px me-2 ms-2"></div>
						<div class="d-flex flex-wrap w-100 p-2 opacity-75">
							<a href="#" class="link-secondary text-decoration me-2"><i class="far fa-fw fa-copy"></i></a>
							<a href="#" class="link-secondary text-decoration me-2"><i class="far fa-fw fa-thumbs-up"></i></a>
							<a href="#" class="link-secondary text-decoration me-2"><i class="far fa-fw fa-thumbs-down"></i></a>
							<a href="#" class="link-secondary text-decoration me-2"><i class="fa fa-fw fa-microphone"></i></a>
							<a href="#" class="link-secondary text-decoration"><i class="fa fa-fw fa-arrow-rotate-right"></i></a>
						</div>
					</div>
				</div>
				<!-- END chat-ai -->
			</div>
			<!-- END ai-chat-prev -->
			
			<!-- BEGIN ai-chat-new -->
			<div id="aiChatNew" class="h-100 tab-pane fade px-lg-3 my-lg-3 my-2" data-scrollbar="true" data-mode="default">
				
			</div>
			<!-- END ai-chat-new -->
		</div>
		<!-- END ai-chat-tabs -->
		
		<!-- BEGIN ai-chat-input -->
		<div>
			<div class="px-lg-4 px-3 pb-3">
				<div class="position-relative mx-lg-4 mx-2 h-100">
					<div class="position-absolute start-0 bottom-0 px-3 pb-2">
						<button type="button" class="btn btn-icon btn-lg text-body text-opacity-50"><i class="fa fa-fw fa-plus"></i></button>
						<button type="button" class="btn btn-icon btn-lg text-body text-opacity-50"><i class="fa fa-fw fa-globe"></i></button>
						<button type="button" class="btn btn-icon btn-lg text-body text-opacity-50"><i class="fa fa-fw fa-microphone"></i></button>
					</div>
					<input type="text" class="form-control form-control-lg  border-0 shadow-none rounded-4 pb-80px pt-10px" id="userInput" placeholder="Message AI Bot" />
					<div class="position-absolute end-0 bottom-0 px-3 pb-2">
						<button id="sendButton" class="btn btn-inverse btn-lg btn-icon bg-gradient-45 bg-gradient-from-blue bg-gradient-to-teal">
							<i class="fa fa-arrow-right"></i>
						</button>
					</div>
				</div>
			</div>
		</div>
		<!-- END ai-chat-input -->
	</div>
	<!-- END ai-chat-content -->
{% endblock %}