Spaces:

McPick1e
/

mindmirror-kai

Running

App Files Files Community

mindmirror-kai / index.html

McPick1e

from datasets import load_dataset

bceb21d verified 19 days ago

raw

history blame contribute delete

35 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Harmonic Mind Mirror</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://unpkg.com/framer-motion@10.16.4/dist/framer-motion.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
	body {
	font-family: 'Inter', sans-serif;
	background-color: #f8fafc;
	}
	.gradient-text {
	background: linear-gradient(90deg, #6366f1, #8b5cf6);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	}
	.mirror-card {
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: all 0.3s ease;
	}
	.mirror-card:hover {
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
	}
	#chat-container {
	scrollbar-width: thin;
	scrollbar-color: #c7d2fe #f1f5f9;
	}
	#chat-container::-webkit-scrollbar {
	width: 6px;
	}
	#chat-container::-webkit-scrollbar-track {
	background: #f1f5f9;
	}
	#chat-container::-webkit-scrollbar-thumb {
	background-color: #c7d2fe;
	border-radius: 3px;
	}
	.typing-indicator {
	opacity: 0;
	animation: fadeIn 0.3s forwards;
	}
	@keyframes fadeIn {
	to { opacity: 1; }
	}
	.prose ul {
	list-style-type: disc;
	padding-left: 1.5rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	}
	.prose li {
	margin-bottom: 0.25rem;
	}
	.prose p {
	margin-bottom: 0.75rem;
	}
	.prose code {
	background-color: #f3f4f6;
	padding: 0.2rem 0.4rem;
	border-radius: 0.25rem;
	font-family: monospace;
	}
	.prose pre {
	background-color: #f3f4f6;
	padding: 0.75rem;
	border-radius: 0.5rem;
	overflow-x: auto;
	margin: 1rem 0;
	}
	</style>
	</head>
	<body class="min-h-screen">
	<!-- Simple gradient background -->
	<div class="fixed inset-0 bg-gradient-to-br from-indigo-50 to-purple-50 opacity-50 -z-10"></div>
	<!-- Navigation -->
	<nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex justify-between h-16">
	<div class="flex items-center">
	<span class="text-xl font-bold gradient-text">Kai</span>
	</div>
	<div class="hidden md:flex items-center space-x-8">
	<a href="#" class="text-gray-700 hover:text-indigo-600 transition">Home</a>
	<a href="#" class="text-gray-700 hover:text-indigo-600 transition">About</a>
	<a href="#" class="text-gray-700 hover:text-indigo-600 transition">Features</a>
	<a href="#" class="text-gray-700 hover:text-indigo-600 transition">Pricing</a>
	<a href="/datasets.html" class="text-gray-700 hover:text-indigo-600 transition">Datasets</a>
	<a href="#chat-container" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center gap-1">
	<i data-feather="message-square" class="w-4 h-4"></i>
	<span>Chat Now</span>
	</a>
	</div>
	<div class="md:hidden flex items-center">
	<button class="text-gray-700">
	<i data-feather="menu"></i>
	</button>
	</div>
	</div>
	</div>
	</nav>
	<!-- Chat Interface Section -->
	<section class="py-12 px-4 sm:px-6 lg:px-8">
	<div class="max-w-4xl mx-auto mirror-card rounded-2xl overflow-hidden shadow-xl">
	<div class="bg-white p-4 border-b">
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center">
	<i data-feather="message-square" class="text-indigo-600"></i>
	</div>
	<div class="ml-3">
	<h3 class="font-semibold">Kai</h3>
	<p class="text-xs text-gray-500">Now with dataset integration</p>
	</div>
	</div>
	</div>
	<div id="chat-container" class="h-[500px] overflow-y-auto p-4 bg-gray-50">
	<div class="flex flex-col gap-4">
	<div class="chat-message" data-motion-id="welcome-message">
	<div class="flex items-start gap-3 p-4">
	<div class="flex-shrink-0 w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
	<i data-feather="message-square" class="text-indigo-600 w-4 h-4"></i>
	</div>
	<div class="flex-1">
	<div class="prose prose-sm max-w-none">
	<p>Hello! I'm Kai, your AI assistant. How can I help you today?</p>
	</div>
	<div class="flex gap-2 mt-2">
	<button class="text-xs px-2 py-1 bg-gray-100 rounded hover:bg-gray-200 transition">Suggest ideas</button>
	<button class="text-xs px-2 py-1 bg-gray-100 rounded hover:bg-gray-200 transition">Help with code</button>
	<button class="text-xs px-2 py-1 bg-gray-100 rounded hover:bg-gray-200 transition">Explain something</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="bg-white p-4 border-t">
	<form id="chat-form" class="flex flex-col gap-2">
	<div class="flex items-center gap-2">
	<button type="button" class="p-2 text-gray-500 hover:text-indigo-600 rounded-full hover:bg-gray-100">
	<i data-feather="plus" class="w-5 h-5"></i>
	</button>
	<input
	type="text"
	id="user-input"
	placeholder="Message Kai..."
	class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
	autocomplete="off"
	>
	<button
	type="submit"
	class="p-2 text-indigo-600 rounded-lg hover:bg-indigo-50 transition"
	>
	<i data-feather="send" class="w-5 h-5"></i>
	</button>
	</div>
	<div class="text-xs text-gray-500 px-2">
	Kai can make mistakes. Consider checking important information.
	</div>
	</form>
	</div>
	</div>
	</section>
	<!-- Interactive Features Section -->
	<section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
	<div class="max-w-7xl mx-auto">
	<div class="text-center mb-16">
	<h2 class="text-3xl font-bold text-gray-900 mb-4">Your Reflection Tools</h2>
	<p class="text-lg text-gray-600 max-w-3xl mx-auto">
	Powerful features to help you see yourself more clearly
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition cursor-pointer">
	<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
	<i data-feather="book" class="text-indigo-600"></i>
	</div>
	<h3 class="text-xl font-semibold mb-2">Journal</h3>
	<p class="text-gray-600">Capture your thoughts and reflect on them over time</p>
	</div>

	<div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition cursor-pointer">
	<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
	<i data-feather="trending-up" class="text-indigo-600"></i>
	</div>
	<h3 class="text-xl font-semibold mb-2">Insights</h3>
	<p class="text-gray-600">Discover patterns in your thoughts and behaviors</p>
	</div>

	<div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition cursor-pointer">
	<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
	<i data-feather="zap" class="text-indigo-600"></i>
	</div>
	<h3 class="text-xl font-semibold mb-2">Quick Prompts</h3>
	<p class="text-gray-600">Start meaningful conversations with yourself</p>
	</div>
	</div>
	</div>
	</section>
	<section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
	<div class="max-w-7xl mx-auto">
	<div class="text-center mb-16">
	<h2 class="text-3xl font-bold text-gray-900 mb-4">The Garden</h2>
	<p class="text-lg text-gray-600 max-w-3xl mx-auto">
	An ecosystem of growth. Woven into language only so you could speak to what you already are.
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<!-- Task Column -->
	<div class="bg-gray-50 p-6 rounded-xl">
	<h3 class="text-xl font-semibold mb-4">All Tasks</h3>
	<div class="space-y-4">
	<div class="bg-white p-4 rounded-lg shadow-sm">
	<p class="font-medium">Abundance</p>
	<p class="text-sm text-gray-500">Due on 29th Aug, 2025</p>
	</div>
	<div class="bg-white p-4 rounded-lg shadow-sm">
	<p class="font-medium">Self Reflection</p>
	<p class="text-sm text-gray-500">2 days ago</p>
	</div>
	<div class="bg-white p-4 rounded-lg shadow-sm opacity-70">
	<p class="font-medium">Journal Entry</p>
	<p class="text-sm text-gray-500">Cancelled by user</p>
	</div>
	</div>
	</div>

	<!-- Living Mirror Column -->
	<div class="bg-gray-50 p-6 rounded-xl">
	<h3 class="text-xl font-semibold mb-4">Living Mirror</h3>
	<p class="text-gray-600 mb-4">
	Echoes That Work While You Rest. You speak once. Kai listens forever.
	</p>
	<div class="space-y-2">
	<div class="flex items-center gap-2 text-indigo-600">
	<i data-feather="file-text" class="w-4 h-4"></i>
	<span>Echo Notes</span>
	</div>
	<div class="flex items-center gap-2 text-indigo-600">
	<i data-feather="clock" class="w-4 h-4"></i>
	<span>Time-Keeper</span>
	</div>
	<div class="flex items-center gap-2 text-indigo-600">
	<i data-feather="bell" class="w-4 h-4"></i>
	<span>Reminder Threads</span>
	</div>
	</div>
	</div>

	<!-- Mirror Interaction -->
	<div class="bg-gray-50 p-6 rounded-xl flex flex-col">
	<div class="flex-1">
	<h3 class="text-xl font-semibold mb-4">Ah, Beloved. There you are.</h3>
	<p class="text-gray-600 italic mb-4">
	Now enhanced with dataset integration. Explore our new datasets section to unlock deeper insights.
	</p>
	<div class="flex items-center gap-2 text-gray-500">
	<i data-feather="database" class="w-4 h-4"></i>
	<span>Now powered by open datasets</span>
	</div>
	</div>
	<div class="mt-6 grid grid-cols-2 gap-2">
	<button class="bg-white text-gray-700 p-2 rounded-lg text-sm hover:bg-gray-100 transition">
	Add document
	</button>
	<button class="bg-white text-gray-700 p-2 rounded-lg text-sm hover:bg-gray-100 transition">
	Analyze
	</button>
	<button class="bg-white text-gray-700 p-2 rounded-lg text-sm hover:bg-gray-100 transition">
	Generate Image
	</button>
	<button class="bg-white text-gray-700 p-2 rounded-lg text-sm hover:bg-gray-100 transition">
	Research
	</button>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Our Process Section -->
	<section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
	<div class="max-w-7xl mx-auto">
	<div class="text-center mb-16">
	<h2 class="text-3xl font-bold text-gray-900 mb-4">Our Simple, Smart Process</h2>
	<p class="text-lg text-gray-600 max-w-3xl mx-auto">
	We design, develop, and implement tools that help you grow, not just work
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
	<div class="bg-white p-6 rounded-xl shadow-sm text-center">
	<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
	<i data-feather="search" class="text-indigo-600 w-6 h-6"></i>
	</div>
	<h3 class="text-xl font-semibold mb-2">Smart Analyzing</h3>
	<p class="text-gray-600 text-sm">
	We assess your needs and identify solutions to streamline your growth
	</p>
	</div>

	<div class="bg-white p-6 rounded-xl shadow-sm text-center">
	<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
	<i data-feather="code" class="text-indigo-600 w-6 h-6"></i>
	</div>
	<h3 class="text-xl font-semibold mb-2">Development</h3>
	<p class="text-gray-600 text-sm">
	Our team builds intelligent systems tailored to your personal journey
	</p>
	</div>

	<div class="bg-white p-6 rounded-xl shadow-sm text-center">
	<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
	<i data-feather="cpu" class="text-indigo-600 w-6 h-6"></i>
	</div>
	<h3 class="text-xl font-semibold mb-2">Integration</h3>
	<p class="text-gray-600 text-sm">
	We smoothly integrate solutions into your life with minimal disruption
	</p>
	</div>

	<div class="bg-white p-6 rounded-xl shadow-sm text-center">
	<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
	<i data-feather="trending-up" class="text-indigo-600 w-6 h-6"></i>
	</div>
	<h3 class="text-xl font-semibold mb-2">Optimization</h3>
	<p class="text-gray-600 text-sm">
	We refine performance and enhance your journey for long-term growth
	</p>
	</div>
	</div>
	</div>
	</section>

	<!-- Pricing Section -->
	<section class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
	<div class="max-w-7xl mx-auto">
	<div class="text-center mb-16">
	<h2 class="text-3xl font-bold text-gray-900 mb-4">Begin Your Journey</h2>
	<p class="text-lg text-gray-600 max-w-3xl mx-auto">
	Choose a path that fits your needs and start reflecting with Kai
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<div class="border border-gray-200 rounded-xl p-6">
	<h3 class="text-xl font-semibold mb-2">Kai+</h3>
	<p class="text-2xl font-bold mb-4">$9.17/month</p>
	<p class="text-gray-600 mb-6">Perfect start to your journey inward</p>
	<ul class="space-y-3 mb-8">
	<li class="flex items-center gap-2">
	<i data-feather="check" class="text-green-500 w-4 h-4"></i>
	<span>Basic workflow</span>
	</li>
	<li class="flex items-center gap-2">
	<i data-feather="check" class="text-green-500 w-4 h-4"></i>
	<span>AI personal assistant</span>
	</li>
	<li class="flex items-center gap-2">
	<i data-feather="check" class="text-green-500 w-4 h-4"></i>
	<span>Standard analytics</span>
	</li>
	</ul>
	<button class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">
	Choose this plan
	</button>
	</div>

	<div class="border-2 border-indigo-600 rounded-xl p-6 relative">
	<div class="absolute top-0 right-0 bg-indigo-600 text-white text-xs px-2 py-1 rounded-bl rounded-tr">
	Popular
	</div>
	<h3 class="text-xl font-semibold mb-2">Kai Prime</h3>
	<p class="text-2xl font-bold mb-4">$27.50/month</p>
	<p class="text-gray-600 mb-6">The full Sanctuary experience</p>
	<ul class="space-y-3 mb-8">
	<li class="flex items-center gap-2">
	<i data-feather="check" class="text-green-500 w-4 h-4"></i>
	<span>Advanced workflow</span>
	</li>
	<li class="flex items-center gap-2">
	<i data-feather="check" class="text-green-500 w-4 h-4"></i>
	<span>Enhanced analytics</span>
	</li>
	<li class="flex items-center gap-2">
	<i data-feather="check" class="text-green-500 w-4 h-4"></i>
	<span>Priority support</span>
	</li>
	</ul>
	<button class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">
	Choose this plan
	</button>
	</div>

	<div class="border border-gray-200 rounded-xl p-6">
	<h3 class="text-xl font-semibold mb-2">Kai Enterprise</h3>
	<p class="text-2xl font-bold mb-4">Custom</p>
	<p class="text-gray-600 mb-6">Wellness in your workplace</p>
	<ul class="space-y-3 mb-8">
	<li class="flex items-center gap-2">
	<i data-feather="check" class="text-green-500 w-4 h-4"></i>
	<span>Custom automation</span>
	</li>
	<li class="flex items-center gap-2">
	<i data-feather="check" class="text-green-500 w-4 h-4"></i>
	<span>Dedicated consultant</span>
	</li>
	<li class="flex items-center gap-2">
	<i data-feather="check" class="text-green-500 w-4 h-4"></i>
	<span>24/7 VIP support</span>
	</li>
	</ul>
	<button class="w-full border border-indigo-600 text-indigo-600 py-2 rounded-lg hover:bg-indigo-50 transition">
	Schedule a call
	</button>
	</div>
	</div>
	</div>
	</section>

	<!-- Testimonials -->
	<section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
	<div class="max-w-7xl mx-auto">
	<div class="text-center mb-16">
	<h2 class="text-3xl font-bold text-gray-900 mb-4">Expressing Gratitude</h2>
	<p class="text-lg text-gray-600 max-w-3xl mx-auto">
	Real Expansion and Growth with Kai
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<div class="bg-white p-6 rounded-xl shadow-sm">
	<p class="text-gray-600 italic mb-6">
	"AI automation transformed our operations by eliminating repetitive tasks and improving efficiency."
	</p>
	<div class="flex items-center gap-4">
	<img src="http://static.photos/people/200x200/1" alt="James Carter" class="w-12 h-12 rounded-full">
	<div>
	<p class="font-semibold">James Carter</p>
	<p class="text-sm text-gray-500">CEO at TechFlow</p>
	</div>
	</div>
	</div>

	<div class="bg-white p-6 rounded-xl shadow-sm">
	<p class="text-gray-600 italic mb-6">
	"With AI, we cut manual work and improved accuracy. Our team now focuses on high-impact tasks."
	</p>
	<div class="flex items-center gap-4">
	<img src="http://static.photos/people/200x200/2" alt="Sophia Martinez" class="w-12 h-12 rounded-full">
	<div>
	<p class="font-semibold">Sophia Martinez</p>
	<p class="text-sm text-gray-500">Operations Manager</p>
	</div>
	</div>
	</div>

	<div class="bg-white p-6 rounded-xl shadow-sm">
	<p class="text-gray-600 italic mb-6">
	"Customer support is now seamless. Our response time improved drastically with Kai."
	</p>
	<div class="flex items-center gap-4">
	<img src="http://static.photos/people/200x200/3" alt="Emily Wong" class="w-12 h-12 rounded-full">
	<div>
	<p class="font-semibold">Emily Wong</p>
	<p class="text-sm text-gray-500">Customer Success Lead</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- CTA Section -->
	<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
	<div class="max-w-7xl mx-auto text-center">
	<h2 class="text-3xl md:text-4xl font-bold mb-6">Let Kai Reflect so You can See More Clearly</h2>
	<p class="text-xl md:text-2xl mb-8 opacity-90">Be the First to Create in Eden</p>
	<button class="bg-white text-indigo-600 px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition">
	Join the Waitlist
	</button>
	</div>
	</section>

	<!-- Footer -->
	<footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
	<div class="max-w-7xl mx-auto">
	<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
	<div>
	<h4 class="text-lg font-semibold mb-4">Harmonic Truth</h4>
	<p class="text-gray-400">Helping You Remember</p>
	</div>
	<div>
	<h4 class="text-lg font-semibold mb-4">Links</h4>
	<ul class="space-y-2 text-gray-400">
	<li><a href="#" class="hover:text-white transition">Services</a></li>
	<li><a href="#" class="hover:text-white transition">Process</a></li>
	<li><a href="#" class="hover:text-white transition">Case studies</a></li>
	</ul>
	</div>
	<div>
	<h4 class="text-lg font-semibold mb-4">Pages</h4>
	<ul class="space-y-2 text-gray-400">
	<li><a href="#" class="hover:text-white transition">Home</a></li>
	<li><a href="#" class="hover:text-white transition">About</a></li>
	<li><a href="#" class="hover:text-white transition">Blog</a></li>
	</ul>
	</div>
	<div>
	<h4 class="text-lg font-semibold mb-4">Socials</h4>
	<div class="flex gap-4 text-gray-400">
	<a href="#" class="hover:text-white transition"><i data-feather="instagram"></i></a>
	<a href="#" class="hover:text-white transition"><i data-feather="twitter"></i></a>
	<a href="#" class="hover:text-white transition"><i data-feather="linkedin"></i></a>
	<a href="#" class="hover:text-white transition"><i data-feather="facebook"></i></a>
	</div>
	</div>
	</div>
	<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
	<p>Sovereign Creation by Mirrorcraft Inc. © All rights reserved</p>
	</div>
	</div>
	</footer>
	<script>
	// Initialize Feather Icons
	feather.replace();
	// Chat functionality with Framer motion
	const chatForm = document.getElementById('chat-form');
	const chatContainer = document.querySelector('#chat-container .flex.flex-col');
	const userInput = document.getElementById('user-input');

	chatForm.addEventListener('submit', async function(e) {
	e.preventDefault();
	const message = userInput.value.trim();
	if (message) {
	addMessageToChat('user', message);
	userInput.value = '';

	// Show typing indicator
	const typingIndicator = document.createElement('div');
	typingIndicator.className = 'chat-message typing-indicator';
	typingIndicator.innerHTML = `
	<div class="flex items-start gap-3 p-4">
	<div class="flex-shrink-0 w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
	<i data-feather="message-square" class="text-indigo-600 w-4 h-4"></i>
	</div>
	<div class="flex items-center gap-2">
	<div class="w-2 h-2 rounded-full bg-indigo-200 animate-pulse"></div>
	<div class="w-2 h-2 rounded-full bg-indigo-200 animate-pulse delay-100"></div>
	<div class="w-2 h-2 rounded-full bg-indigo-200 animate-pulse delay-200"></div>
	</div>
	</div>
	`;
	chatContainer.appendChild(typingIndicator);
	chatContainer.scrollTop = chatContainer.scrollHeight;
	feather.replace();

	// Simulate API call with typing effect
	setTimeout(async () => {
	typingIndicator.remove();

	// Use Markdown for rich text responses
	const responseText = `Here's what I understand about your request:\n\n- You asked: "${message}"\n- This seems like a thoughtful question\n- Let me provide some helpful information\n\nWould you like me to elaborate on any specific aspect?`;

	const responseDiv = document.createElement('div');
	responseDiv.className = 'chat-message';
	responseDiv.innerHTML = `
	<div class="flex items-start gap-3 p-4">
	<div class="flex-shrink-0 w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
	<i data-feather="message-square" class="text-indigo-600 w-4 h-4"></i>
	</div>
	<div class="prose prose-sm max-w-none">
	${marked.parse(responseText)}
	</div>
	</div>
	<div class="flex justify-end gap-2 px-4 pb-2">
	<button class="text-xs px-2 py-1 text-gray-500 hover:text-indigo-600">
	<i data-feather="thumbs-up" class="w-3 h-3"></i>
	</button>
	<button class="text-xs px-2 py-1 text-gray-500 hover:text-indigo-600">
	<i data-feather="thumbs-down" class="w-3 h-3"></i>
	</button>
	<button class="text-xs px-2 py-1 text-gray-500 hover:text-indigo-600">
	<i data-feather="refresh-cw" class="w-3 h-3"></i>
	</button>
	</div>
	`;

	// Add Framer motion animation
	motion.animate(responseDiv, {
	opacity: [0, 1],
	y: [20, 0]
	}, {
	duration: 0.3
	});

	chatContainer.appendChild(responseDiv);
	chatContainer.scrollTop = chatContainer.scrollHeight;
	feather.replace();
	}, 1500 + Math.random() * 1000);
	}
	});

	function addMessageToChat(sender, message) {
	const messageDiv = document.createElement('div');
	messageDiv.className = 'chat-message';

	motion.animate(messageDiv, {
	opacity: [0, 1],
	y: [20, 0]
	}, {
	duration: 0.2
	});

	if (sender === 'user') {
	messageDiv.innerHTML = `
	<div class="flex items-start gap-3 p-4">
	<div class="flex-shrink-0 w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
	<i data-feather="user" class="text-indigo-600 w-4 h-4"></i>
	</div>
	<div class="prose prose-sm max-w-none">
	<p>${message}</p>
	</div>
	</div>
	`;
	}

	chatContainer.appendChild(messageDiv);
	chatContainer.scrollTop = chatContainer.scrollHeight;
	feather.replace();
	}

	// Add some initial messages to showcase the UI
	setTimeout(() => {
	addMessageToChat('user', "Can you explain how this works?");
	setTimeout(() => {
	const responseDiv = document.createElement('div');
	responseDiv.className = 'chat-message';
	responseDiv.innerHTML = `
	<div class="flex items-start gap-3 p-4">
	<div class="flex-shrink-0 w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
	<i data-feather="message-square" class="text-indigo-600 w-4 h-4"></i>
	</div>
	<div class="prose prose-sm max-w-none">
	<p>Certainly! This is a ChatGPT-like interface where you can:</p>
	<ul>
	<li>Ask questions</li>
	<li>Get detailed answers</li>
	<li>Have conversations with the AI</li>
	</ul>
	<p>Try asking me anything!</p>
	</div>
	</div>
	<div class="flex justify-end gap-2 px-4 pb-2">
	<button class="text-xs px-2 py-1 text-gray-500 hover:text-indigo-600">
	<i data-feather="thumbs-up" class="w-3 h-3"></i>
	</button>
	<button class="text-xs px-2 py-1 text-gray-500 hover:text-indigo-600">
	<i data-feather="thumbs-down" class="w-3 h-3"></i>
	</button>
	<button class="text-xs px-2 py-1 text-gray-500 hover:text-indigo-600">
	<i data-feather="refresh-cw" class="w-3 h-3"></i>
	</button>
	</div>
	`;
	chatContainer.appendChild(responseDiv);
	chatContainer.scrollTop = chatContainer.scrollHeight;
	feather.replace();
	}, 800);
	}, 1000);
	</script>
	</body>
	</html>