js实现浏览器中支持设置多个ai模型apikey多轮ai问答会话聊天代码-html代码-BFW代码库

js实现浏览器中支持设置多个ai模型apikey多轮ai问答会话聊天代码

代码语言：html

代码描述：js实现浏览器中支持设置多个ai模型apikey多轮ai问答会话聊天代码，直接调用所有的兼容openai的api的大模型，可自定义设置多个ai大模型进行切换问答。

代码标签： js 浏览器支持设置多个 ai 模型 apikey 多轮问答会话聊天代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!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>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/highlight.atom-one-dark.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: #f1f5f9;
        }

        /* 自定义滚动条样式 */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        /* AI 打字动画 */
        .typing-indicator span {
            display: inline-block; width: 8px; height: 8px; margin: 0 2px;
            background-color: #94a3b8; border-radius: 50%;
            animation: typing 1s infinite;
        }
        .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
        .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes typing {
            0%, 100% { opacity: 0.3; transform: scale(0.7); }
            50% { opacity: 1; transform: scale(1); }
        }

        /* 侧边栏过渡 */
        #sidebar {
            transition: width 0.3s ease-in-out, padding 0.3s ease-in-out;
        }
        #sidebar.collapsed {
            width: 0;
            padding: 0;
            overflow: hidden;
        }
        
        /* 修复 marked.js 生成的 <pre> 标签的边距问题 */
        .message-content pre {
            margin-top: 1em;
            margin-bottom: 1em;
        }
    </style>
</head>
<body class="h-screen overflow-hidden">
    <div id="app-layout" class="flex h-full w-full bg-white">
        <!-- 左侧历史会话边栏 -->
        <aside id="sidebar" class="w-64 bg-slate-50 border-r border-slate-200 flex flex-col flex-shrink-0">
            <div class="p-4 border-b border-slate-200 flex-shrink-0">
                <button id="new-conversation" class="w-full px-4 py-2 text-sm font-semibold text-indigo-600 bg-indigo-100 rounded-lg hover:bg-indigo-200 transition-colors flex items-center justify-center gap-2">
                    <i class="fa-solid fa-plus"></i>新会话
                </button>
            </div>
            <nav id="conversation-list" class="flex-grow overflow-y-auto p-2 space-y-1">
                <!-- 历史会话将在这里动态添加 -->
            </nav>
        </aside>

        <!-- 右侧主聊天区域 -->
        <main id="chat-container" class="flex-1 flex flex-col h-full">
            <!-- 头部 -->
            <header id="chat-header" class="flex-shrink-0 p-4 bg-white border-b border-slate-200 flex justify-between items-center">
                <div class="flex items-center gap-2">
                    <button id="toggle-sidebar-btn" class="w-8 h-8 text-slate-500 hover:text-indigo-600 hover:bg-slate-100 rounded-full transition-colors"><i class="fa-solid fa-bars"></i></button>
                    <h2 class="text-lg font-bold text-slate-800">AI 聊天</h2>
                </div>
                <button id="settings-btn" class="w-8 h-8 text-slate-500 hover:text-indigo-600 hover:bg-slate-100 rounded-full transition-colors"><i class="fa-solid fa-cog"></i></button>
            </header>

            <!-- 聊天内容区域 -->
            <div id="chat-body" class="flex-1 p-6 overflow-y-auto bg-slate-50"></div>

            <!-- .........完整代码请登录后点击上方下载按钮下载查看