js实现简洁兼容openai多模型回复对比ai聊天对话代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js实现简洁兼容openai多模型回复对比ai聊天对话代码，可自定义设置多个模型api及baseurl，支持历史会话本地存储，支持markdown渲染与复制、支持流式回复，支持图片发送。

下面为部分代码预览，完整代码请点击下载或在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; }
        .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; }
        .message-content pre { margin-top: 1em; margin-bottom: 1em; }
        /* 针对代码块内复制按钮的样式 */
        .message-content pre { position: relative; }
        .copy-code-btn { position: absolute; top: 0.5rem; right: 0.5rem; background-color: #4a5568; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 0.375rem; cursor: pointer; opacity: 0; transition: opacity 0.2s; font-size: 0.8rem; }
        .message-content pre:hover .copy-code-btn { opacity: 1; }
        
        /* 多模型Tab样式 */
.tabs-container {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}
.tabs-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari 隐藏滚动条 */
}
.model-tab-btn {
    transition: all 0.2s ease-in-out;
}
.model-tab-btn.active {
    background-color: #6366f1; /* indigo-500 */
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}
.model-tab-btn:not(.active):hover {
    background-color: #e2e8f0; /* slate-200 */
    color: #1e293b; /* slate-800 */
}
    </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>
            <div id="chat-input-area" class="flex-shrink-0 p-4 bg-white border-t border-slate-200"><div class="relative"><textarea id="message-input" placeholder="输入消息... (Shift+Enter 换行)" class="w-full p-3 pr-28 border border-slate-300 rounded-xl resize-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition" rows="1"></textarea><div class="absolute bottom-2 right-2 flex items-center gap-1"><.........完整代码请登录后点击上方下载按钮下载查看