gemini-banlancer/web/templates/chat.html

{% extends "base.html" %}
{% block title %}Web Chat - GEMINI BALANCER{% endblock %}

{% block content %}
<!-- [核心] 聊天界面的主容器，使用 flex 布局撑满整个可用空间 -->
<div class="w-full h-full flex overflow-hidden rounded-lg border border-border" data-page-id="chat">

    <!-- =================================================================== -->
    <!--       1. 左侧栏: 会话列表                                           -->
    <!-- =================================================================== -->
    <aside class="w-[280px] h-full flex flex-col border-r border-border bg-muted/50 shrink-0">
        <!-- 侧边栏头部 -->
        <div class="p-4 border-b border-border shrink-0">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-bold tracking-tight">会话</h2>
                <button class="btn btn-ghost btn-icon btn-sm" aria-label="新建会话">
                    <i class="fas fa-plus"></i>
                </button>
            </div>
            <div class="relative mt-4">
                <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"></i>
                <input class="input h-9 pl-10" placeholder="搜索会话...">
            </div>
        </div>

        <!-- 会话列表 (可滚动) -->
        <div class="flex-grow overflow-y-auto main-content-scroll p-2">
            <!-- 示例会话 1: 激活状态 -->
            <a href="#" class="flex flex-col items-start gap-2 rounded-lg p-3 text-left text-sm transition-all hover:bg-accent bg-accent">
                <div class="flex w-full items-center justify-between">
                    <div class="font-semibold">关于Python异步编程</div>
                    <div class="ml-auto text-xs text-muted-foreground">3:15 PM</div>
                </div>
                <div class="text-xs text-muted-foreground line-clamp-2">好的，我明白了。所以 aiohttp 客户端的 session 应该在...</div>
            </a>
            <!-- 示例会话 2: 非激活状态 -->
            <a href="#" class="flex flex-col items-start gap-2 rounded-lg p-3 text-left text-sm transition-all hover:bg-accent">
                <div class="flex w-full items-center justify-between">
                    <div class="font-semibold">Tailwind v4 迁移指南</div>
                    <div class="ml-auto text-xs text-muted-foreground">1:45 PM</div>
                </div>
                <div class="text-xs text-muted-foreground line-clamp-2">我们已经成功解决了 JIT 编译器的缓存和 HSL 函数的问题...</div>
            </a>
            <!-- 示例会话 3: 非激活状态 -->
            <a href="#" class="flex flex-col items-start gap-2 rounded-lg p-3 text-left text-sm transition-all hover:bg-accent">
                <div class="flex w-full items-center justify-between">
                    <div class="font-semibold">数据库性能优化</div>
                    <div class="ml-auto text-xs text-muted-foreground">昨天</div>
                </div>
                <div class="text-xs text-muted-foreground line-clamp-2">索引的创建确实是关键，特别是在有大量 JOIN 操作的查询中。</div>
            </a>
        </div>
    </aside>

    <!-- =================================================================== -->
    <!--       2. 右侧主区域: 聊天窗口                                       -->
    <!-- =================================================================== -->
    <main class="flex-1 flex flex-col h-full">
        <!-- 聊天窗口头部 -->
        <div class="flex items-center p-4 border-b border-border shrink-0">
            <h3 class="text-lg font-semibold">关于Python异步编程</h3>
            <div class="ml-auto flex items-center gap-2">
                <button class="btn btn-ghost btn-icon btn-sm" aria-label="清除会话">
                    <i class="fas fa-eraser"></i>
                </button>
                <button class="btn btn-ghost btn-icon btn-sm" aria-label="更多选项">
                    <i class="fas fa-ellipsis-v"></i>
                </button>
            </div>
        </div>

        <!-- 消息区域 (可滚动) -->
        <div class="flex-grow p-6 overflow-y-auto main-content-scroll">
            <div class="space-y-6">
                <!-- 示例消息 1: 用户 -->
                <div class="flex items-start gap-4">
                    <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-secondary text-secondary-foreground">
                        <i class="fas fa-user"></i>
                    </span>
                    <div class="flex-1 space-y-2">
                        <div class="rounded-lg bg-muted p-3">
                            <p class="text-sm text-foreground">你能给我解释一下 aiohttp 客户端的 session 和 connector 管理吗？我总是搞不清楚什么时候应该创建，什么时候应该关闭。</p>
                        </div>
                    </div>
                </div>
                <!-- 示例消息 2: 助手 (Gemini) -->
                <div class="flex items-start gap-4">
                     <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground">
                        <i class="fas fa-robot"></i>
                    </span>
                    <div class="flex-1 space-y-2">
                        <div class="rounded-lg bg-primary/10 border border-primary/20 p-3">
                            <p class="text-sm text-foreground">当然可以。这是一个非常经典的问题。简单来说，`ClientSession` 应该在你的应用程序的生命周期内尽可能地保持单例存在...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 输入区域 -->
        <div class="p-4 border-t border-border shrink-0 bg-background">
            <div class="relative">
                <textarea placeholder="输入消息..." class="input pr-20 resize-none" rows="1"></textarea>
                <div class="absolute top-1/2 right-3 -translate-y-1/2 flex items-center gap-2">
                    <button class="btn btn-ghost btn-icon btn-sm" aria-label="附加文件">
                        <i class="fas fa-paperclip"></i>
                    </button>
                    <button class="btn btn-primary btn-sm">发送</button>
                </div>
            </div>
        </div>
    </main>
</div>
{% endblock %}

{% block page_scripts %}
{% endblock page_scripts %}