peanut/happy-life-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

聊天工具优化

Browse Source
This commit is contained in:
huazhongmin
2025-12-26 13:39:58 +08:00
parent f1c7639ec1
commit a4e2542b23
9 changed files with 1381 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web_client/templates/index.html
+108 -118
View File
@@ -45,152 +45,100 @@
<div class="particles" id="particles"></div>
<div class="flex h-screen">
<!-- 左侧用户信息面板 -->
<div class="w-80 bg-slate-900/80 glass-effect border-r border-slate-700 flex flex-col">
<div class="p-6 border-b border-slate-700">
<h2 class="text-xl font-bold text-white mb-4">用户画像</h2>
<div class="flex items-center space-x-3 mb-4">
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white text-xl font-bold">
U
</div>
<div>
<p class="text-white font-medium">张伟明</p>
<p class="text-slate-400 text-sm">AI 助手用户</p>
</div>
<!-- 应用选择面板（初始显示） -->
<div id="app-selector-panel" class="w-full bg-slate-900/80 glass-effect flex flex-col">
<div class="p-6 border-b border-slate-700 flex justify-between items-center">
<div>
<h1 class="text-3xl font-bold text-white mb-2 font-['Pacifico']">AI 助手</h1>
<p class="text-slate-400">选择一个智能体开始对话</p>
</div>
<!-- 个性化推荐 -->
<div class="mt-4 p-3 bg-slate-800/50 rounded-lg">
<h3 class="text-sm font-medium text-white mb-2">个性化推荐</h3>
<p class="text-slate-300 text-xs">根据您的使用习惯，推荐以下功能</p>
<div class="mt-2 flex flex-wrap gap-1">
<span class="px-2 py-1 bg-primary/20 text-primary text-xs rounded-full">智能问答</span>
<span class="px-2 py-1 bg-secondary/20 text-secondary text-xs rounded-full">语音识别</span>
<span class="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full">任务管理</span>
</div>
</div>
</div>
<!-- 待办事项 -->
<div class="p-6 border-b border-slate-700">
<h3 class="text-lg font-semibold text-white mb-4">待办事项</h3>
<div class="space-y-3" id="todo-list">
<div class="flex items-center space-x-2 p-2 bg-slate-800/30 rounded-lg">
<input type="checkbox" class="rounded text-primary">
<span class="text-slate-300 text-sm">完成项目报告</span>
</div>
<div class="flex items-center space-x-2 p-2 bg-slate-800/30 rounded-lg">
<input type="checkbox" class="rounded text-primary">
<span class="text-slate-300 text-sm">准备会议材料</span>
</div>
<div class="flex items-center space-x-2 p-2 bg-slate-800/30 rounded-lg">
<input type="checkbox" class="rounded text-primary">
<span class="text-slate-300 text-sm">回复客户邮件</span>
</div>
</div>
<div class="mt-3 flex">
<input type="text" id="todo-input" placeholder="添加新任务..." class="flex-1 bg-slate-800 text-white text-sm px-3 py-2 rounded-l-lg border border-slate-600 focus:outline-none focus:border-primary">
<button id="todo-add-btn" class="bg-primary text-white px-3 py-2 rounded-r-lg hover:bg-primary/80 transition">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
<!-- 提醒设置 -->
<div class="p-6 flex-1">
<h3 class="text-lg font-semibold text-white mb-4">提醒设置</h3>
<div class="space-y-3">
<div class="p-3 bg-slate-800/30 rounded-lg">
<p class="text-slate-300 text-sm">每日 9:00 AM</p>
<p class="text-white text-sm">晨会准备</p>
</div>
<div class="p-3 bg-slate-800/30 rounded-lg">
<p class="text-slate-300 text-sm">每周三 2:00 PM</p>
<p class="text-white text-sm">团队同步会议</p>
</div>
<div class="p-3 bg-slate-800/30 rounded-lg">
<p class="text-slate-300 text-sm">每月 15 日</p>
<p class="text-white text-sm">月度总结报告</p>
</div>
</div>
<button class="w-full mt-4 bg-slate-700 text-white py-2 rounded-lg hover:bg-slate-600 transition flex items-center justify-center space-x-2">
<i class="fas fa-bell"></i>
<span>设置新提醒</span>
<!-- 设置按钮 -->
<button
onclick="openTokenModal()"
class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-md transition-colors flex items-center gap-2"
title="设置认证Token"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
设置
</button>
</div>
<!-- 搜索框 -->
<div class="p-6 border-b border-slate-700 flex justify-center">
<div class="relative w-[30%]">
<input
type="text"
id="app-search-input"
placeholder="搜索智能体..."
class="w-full bg-slate-800 text-white px-4 py-3 pl-12 rounded-xl border border-slate-600 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-300"
>
<i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
</div>
</div>
<!-- 应用列表 -->
<div class="flex-1 overflow-y-auto p-6">
<div id="app-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<!-- 应用卡片将通过JavaScript动态加载 -->
<div class="text-center text-slate-400 py-12 col-span-full">
<i class="fas fa-spinner fa-spin text-4xl mb-4"></i>
<p>正在加载智能体列表...</p>
</div>
</div>
</div>
</div>
<!-- 主对话区域 -->
<div class="flex-1 flex flex-col">
<!-- 主对话区域（初始隐藏） -->
<div id="chat-panel" class="flex-1 flex flex-col hidden">
<!-- 顶部导航栏 -->
<div class="h-16 bg-slate-900/80 glass-effect border-b border-slate-700 flex items-center justify-between px-6 relative">
<div class="flex items-center space-x-4">
<h1 class="text-xl font-bold text-white font-['Pacifico']">AI 助手</h1>
<div class="flex space-x-2">
<button class="theme-btn px-3 py-1 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-600 transition" data-theme="dark">深空黑</button>
<button class="theme-btn px-3 py-1 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-500 transition" data-theme="blue">极光蓝</button>
<button class="theme-btn px-3 py-1 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-500 transition" data-theme="purple">霓虹紫</button>
<button class="theme-btn px-3 py-1 bg-green-600 text-white rounded-lg text-sm hover:bg-green-500 transition" data-theme="green">科技绿</button>
<!-- 返回按钮 -->
<button id="back-to-apps-btn" class="text-white p-2 hover:bg-slate-700 rounded-lg transition">
<i class="fas fa-arrow-left"></i>
</button>
<!-- 当前应用信息 -->
<div class="flex items-center space-x-3">
<img id="current-app-avatar" src="" alt="" class="w-10 h-10 rounded-full bg-slate-700">
<div>
<h1 id="current-app-name" class="text-lg font-bold text-white">AI 助手</h1>
<p id="current-app-desc" class="text-xs text-slate-400"></p>
</div>
</div>
</div>
<!-- 字体选择 -->
<!-- 右侧工具栏 -->
<div class="flex items-center space-x-4">
<select id="font-select" class="bg-slate-800 text-white px-3 py-1 rounded-lg border border-slate-600 focus:outline-none focus:border-primary">
<select id="font-select" class="bg-slate-800 text-white px-3 py-1 rounded-lg border border-slate-600 focus:outline-none focus:border-primary text-sm">
<option value="'Inter', sans-serif">默认字体</option>
<option value="'Source Han Sans CN', sans-serif">思源黑体</option>
<option value="'PingFang SC', sans-serif">苹方</option>
<option value="'Roboto', sans-serif">Roboto</option>
</select>
<!-- 消息通知 -->
<div class="relative">
<button class="text-white p-2 hover:bg-slate-700 rounded-lg transition relative">
<i class="fas fa-bell text-lg"></i>
<div class="notification-badge">3</div>
</button>
</div>
<div class="w-8 h-8 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center text-white">
<i class="fas fa-user text-sm"></i>
</div>
</div>
</div>
<!-- 智能回复提示 -->
<div class="p-4 bg-slate-800/50 border-b border-slate-700">
<div class="flex space-x-3">
<button class="quick-reply-btn px-4 py-2 bg-slate-700 text-slate-300 rounded-lg text-sm hover:bg-slate-600 transition whitespace-nowrap">
<i class="fas fa-lightbulb mr-2"></i>今日天气如何？
</button>
<button class="quick-reply-btn px-4 py-2 bg-slate-700 text-slate-300 rounded-lg text-sm hover:bg-slate-600 transition whitespace-nowrap">
<i class="fas fa-calendar mr-2"></i>明天的会议安排
</button>
<button class="quick-reply-btn px-4 py-2 bg-slate-700 text-slate-300 rounded-lg text-sm hover:bg-slate-600 transition whitespace-nowrap">
<i class="fas fa-tasks mr-2"></i>帮我制定工作计划
</button>
<!-- 智能回复提示（动态加载） -->
<div id="quick-reply-container" class="p-4 bg-slate-800/50 border-b border-slate-700 hidden">
<div id="quick-reply-buttons" class="flex space-x-3 overflow-x-auto">
<!-- 快捷回复按钮将通过JavaScript动态加载 -->
</div>
</div>
<!-- 对话内容区域 -->
<div class="flex-1 overflow-y-auto p-6 space-y-4" id="chat-container">
<!-- 用户消息示例 -->
<div class="flex justify-end slide-in">
<div class="max-w-xs lg:max-w-md user-bubble text-white p-4 rounded-2xl rounded-br-md">
<p>你好，我想了解一下今天的工作安排。</p>
</div>
</div>
<!-- AI 回复示例 -->
<div class="flex justify-start slide-in">
<div class="max-w-xs lg:max-w-md ai-bubble text-white p-4 rounded-2xl rounded-bl-md">
<p>您好！根据您的日程安排，今天有以下任务：</p>
<ul class="mt-2 space-y-1 text-sm">
<li>• 9:00 AM - 晨会准备</li>
<li>• 10:30 AM - 客户电话会议</li>
<li>• 2:00 PM - 项目进度汇报</li>
<li>• 4:00 PM - 团队协作讨论</li>
</ul>
<!-- 欢迎消息 -->
<div class="flex justify-center">
<div class="text-center text-slate-400 py-8">
<i class="fas fa-comments text-4xl mb-4"></i>
<p id="welcome-message">开始对话吧！</p>
</div>
</div>
</div>
@@ -248,6 +196,48 @@
</div>
</div>
<!-- Token设置模态框 -->
<div id="token-modal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
<div class="bg-slate-800 rounded-lg p-6 w-full max-w-md mx-4 shadow-2xl">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold text-white">设置认证Token</h2>
<button onclick="closeTokenModal()" class="text-slate-400 hover:text-white transition">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-slate-300 mb-2">
Token（自动添加Bearer前缀）
</label>
<textarea
id="token-input"
rows="4"
placeholder="粘贴您的认证token..."
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent resize-none"
></textarea>
<p class="mt-2 text-xs text-slate-400">
当前状态: <span id="token-status-modal" class="font-medium">未设置</span>
</p>
</div>
<div class="flex gap-3">
<button
onclick="saveToken()"
class="flex-1 px-4 py-2 bg-primary hover:bg-primary/80 text-white rounded-md transition-colors"
>
保存
</button>
<button
onclick="closeTokenModal()"
class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-md transition-colors"
>
取消
</button>
</div>
</div>
</div>
<!-- JavaScript -->
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>