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

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

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