|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>AI大模型聊天界面</title>
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
<style>
|
|
|
|
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
|
width: 6px;
|
|
|
}
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
|
background-color: #9ca3af;
|
|
|
border-radius: 3px;
|
|
|
}
|
|
|
|
|
|
@keyframes typing {
|
|
|
from { width: 0 }
|
|
|
to { width: 100% }
|
|
|
}
|
|
|
.typing-animation {
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
animation: typing 1.5s steps(40, end);
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body class="bg-gray-100 h-screen flex flex-col">
|
|
|
|
|
|
<header class="bg-white shadow-sm py-4 px-6">
|
|
|
<div class="flex items-center justify-between">
|
|
|
<div class="flex items-center space-x-2">
|
|
|
<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
|
|
|
<i class="fas fa-robot text-white"></i>
|
|
|
</div>
|
|
|
<h1 class="text-xl font-semibold text-gray-800">AI助手</h1>
|
|
|
</div>
|
|
|
<div class="flex space-x-4">
|
|
|
<button class="text-gray-500 hover:text-gray-700">
|
|
|
<i class="fas fa-cog"></i>
|
|
|
</button>
|
|
|
<button class="text-gray-500 hover:text-gray-700">
|
|
|
<i class="fas fa-history"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-4">
|
|
|
|
|
|
<div class="flex space-x-3 max-w-3xl mx-auto">
|
|
|
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
|
|
|
<i class="fas fa-robot text-white"></i>
|
|
|
</div>
|
|
|
<div class="flex-1">
|
|
|
<div class="bg-white p-4 rounded-lg shadow-sm">
|
|
|
<p class="text-gray-800">您好！我是AI助手，有什么可以帮您的吗？</p>
|
|
|
<div class="mt-2 flex space-x-2 text-xs text-gray-500">
|
|
|
<span>AI助手</span>
|
|
|
<span>•</span>
|
|
|
<span>刚刚</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="flex space-x-3 max-w-3xl mx-auto flex-row-reverse">
|
|
|
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
|
|
|
<i class="fas fa-user text-white"></i>
|
|
|
</div>
|
|
|
<div class="flex-1">
|
|
|
<div class="bg-green-100 p-4 rounded-lg shadow-sm">
|
|
|
<p class="text-gray-800">请帮我写一篇关于人工智能的文章</p>
|
|
|
<div class="mt-2 flex space-x-2 text-xs text-gray-500 justify-end">
|
|
|
<span>您</span>
|
|
|
<span>•</span>
|
|
|
<span>刚刚</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="flex space-x-3 max-w-3xl mx-auto">
|
|
|
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
|
|
|
<i class="fas fa-robot text-white"></i>
|
|
|
</div>
|
|
|
<div class="flex-1">
|
|
|
<div class="bg-white p-4 rounded-lg shadow-sm">
|
|
|
<div class="flex space-x-2">
|
|
|
<div class="w-2 h-2 rounded-full bg-gray-400 animate-pulse"></div>
|
|
|
<div class="w-2 h-2 rounded-full bg-gray-400 animate-pulse delay-75"></div>
|
|
|
<div class="w-2 h-2 rounded-full bg-gray-400 animate-pulse delay-150"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
|
|
|
<footer class="bg-white border-t border-gray-200 p-4">
|
|
|
<div class="max-w-3xl mx-auto">
|
|
|
<form class="flex space-x-2">
|
|
|
<div class="flex-1 relative">
|
|
|
<textarea
|
|
|
id="messageInput"
|
|
|
rows="1"
|
|
|
placeholder="输入消息..."
|
|
|
class="w-full border border-gray-300 rounded-lg py-2 px-4 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
|
|
|
style="min-height: 44px; max-height: 120px;"></textarea>
|
|
|
<div class="absolute right-2 bottom-2 flex space-x-1">
|
|
|
<button type="button" class="text-gray-400 hover:text-gray-600">
|
|
|
<i class="fas fa-paperclip"></i>
|
|
|
</button>
|
|
|
<button type="button" class="text-gray-400 hover:text-gray-600">
|
|
|
<i class="fas fa-microphone"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<button
|
|
|
type="submit"
|
|
|
class="bg-blue-500 hover:bg-blue-600 text-white rounded-lg px-4 py-2 transition-colors duration-200">
|
|
|
<i class="fas fa-paper-plane"></i>
|
|
|
</button>
|
|
|
</form>
|
|
|
<p class="text-xs text-gray-500 mt-2 text-center">
|
|
|
AI助手可能会产生不准确的信息，请谨慎参考
|
|
|
</p>
|
|
|
</div>
|
|
|
</footer>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
const messageInput = document.getElementById('messageInput');
|
|
|
messageInput.addEventListener('input', function() {
|
|
|
this.style.height = 'auto';
|
|
|
this.style.height = (this.scrollHeight) + 'px';
|
|
|
});
|
|
|
|
|
|
|
|
|
const form = document.querySelector('form');
|
|
|
form.addEventListener('submit', function(e) {
|
|
|
e.preventDefault();
|
|
|
const message = messageInput.value.trim();
|
|
|
if (message) {
|
|
|
|
|
|
console.log('发送消息:', message);
|
|
|
messageInput.value = '';
|
|
|
messageInput.style.height = 'auto';
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
