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".........完整代码请登录后点击上方下载按钮下载查看