css+js实现简洁清爽的ai多会话聊天助手智能体语音通话效果代码
代码语言:html
所属分类:布局界面
代码描述:css+js实现简洁清爽的ai多会话聊天助手智能体语音通话效果代码,兼容所有的openai api大模型
代码标签: css js 简洁 清爽 ai 多会话 聊天 助手 智能体 语音 通话
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap-icons.1.11.3.css"> <style> :root { --primary-color: #4a89dc; --secondary-color: #5d9cec; --success-color: #2ecc71; --danger-color: #e74c3c; --warning-color: #f39c12; --info-color: #3498db; --light-color: #f5f7fa; --dark-color: #333; --gray-color: #95a5a6; --light-gray: #ecf0f1; --text-color: #333; --border-radius: 8px; --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--text-color); line-height: 1.6; background-color: #f9f9f9; } /* Overlay */ #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); display: none; justify-content: center; align-items: center; z-index: 1000; } #closeBtn { position: absolute; top: 20px; right: 20px; color: white; font-size: 24px; cursor: pointer; transition: var(--transition); } #closeBtn:hover { color: var(--danger-color); } #overlayImage { max-width: 90%; max-height: 90%; border-radius: var(--border-radius); } /* Main container */ .bodycont { display: flex; height: 100vh; position: relative; background-color: white; margin: 0 auto; box-shadow: var(--box-shadow); } /* Dialog boxes */ .tooldia { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: var(--border-radius); box-shadow: var(--box-shadow); width: 90%; max-width: 500px; z-index: 100; } .dia-title { font-weight: bold; font-size: 18px; margin-bottom: 15px; color: var(--dark-color); border-bottom: 1px solid var(--light-gray); padding-bottom: 10px; } .add-icon { margin-left: 10px; cursor: pointer; color: var(--primary-color); transition: var(--transition); } .add-icon:hover { color: var(--secondary-color); } /* Form elements */ .form-group { margin-bottom: 15px; } .form-group p { margin-bottom: 5px; } .textinput, .promptinput, .custom-select { width: 100%; padding: 10px; border: 1px solid var(--light-gray); border-radius: var(--border-radius); font-size: 14px; transition: var(--transition); } .textinput:focus, .promptinput:focus, .custom-select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(74, 137, 220, 0.2); } .promptinput { min-height: 80px; resize: vertical; } .custom-range { width: 100%; height: 8px; -webkit-appearance: none; background: var(--light-gray); border-radius: 4px; outline: none; } .custom-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: var(--primary-color); border-radius: 50%; cursor: pointer; } .custom-range::-moz-range-thumb { width: 18px; height: 18px; background: var(--primary-color); border-radius: 50%; cursor: pointer; border: none; } .select-wrapper { position: relative; } .select-wrapper::after { content: '\25BC'; position: absolute; right: 10px; top: 40px; color: var(--gray-color); pointer-events: none; font-size: 12px; } .custom-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 30px; background-color: white; } /* Tool and agent items */ .tool-item, .agent-item { padding: 8px 10px; border-radius: var(--border-radius); margin-bottom: 5px; transition: var(--transition); } .tool-item:hover, .agent-item:hover { background-color: var(--light-gray); } .tool-label { display: flex; align-items: center; cursor: pointer; } .tool-label input[type="checkbox"] { margin-right: 10px; } .tool-desc { color: var(--gray-color); font-size: 12px; } /* Chat history sidebar */ .chat-history { width: 300px; height: 100vh; background-color: white; box-shadow: var(--box-shadow); z-index: 50; display: flex; flex-direction: column; border-right: 1px solid var(--light-gray); } .chat-history-header { display: flex; padding: 15px; border-bottom: 1px solid var(--light-gray); align-items: center; } .new-chat-btn { flex: 1; padding: 10px; border: 1px solid var(--light-gray); border-radius: var(--border-radius); text-align: center; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; font-weight: 500; } .new-chat-btn:hover { background-color: var(--light-color); } .close-icon { margin-left: 10px; cursor: pointer; font-size: 18px; color: var(--gray-color); transition: var(--transition); } .close-icon:hover { color: var(--danger-color); } .hischatitem { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid var(--light-gray); position: relative; transition: var(--transition); } .hischatitem:hover { background-color: var(--light-color); } .nowchatitem { background-color: var(--light-color); border-left: 3px solid var(--primary-color); } .agentname { display: block; font-weight: 500; margin-bottom: 5px; } .messagetext { display: block; font-size: 13px; color: var(--gray-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; } .del { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--gray-color); transition: var(--transition); opacity: 0; } .hischatitem:hover .del { opacity: 1; } .del:hover { color: var(--danger-color); } /* Main content area */ .cont { flex: 1; display: flex; flex-direction: column; height: 100vh; margin-left: 0; transition: var(--transition); } .header-bar { display: flex; padding: 15px; align-items: center; border-bottom: 1px solid var(--light-gray); background-color: white; } .app-title { margin: 0 auto; font-size: 20px; font-weight: 500; } .header-bar i { font-size: 18px; cursor: pointer; color: var(--gray-color); transition: var(--transition); } .header-bar i:hover { color: var(--primary-color); } /* Voice chat */ .voice-chat { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 20px; } .voice-avatar { cursor: pointer; } .voice-avatar img { height: 120px; width: auto; border-radius: 50%; box-shadow: var(--box-shadow); transition: var(--transition); } .voice-avatar img:hover { transform: scale(1.05); } .voice-status { margin: 20px 0; text-align: center; font-size: 16px; color: var(--gray-color); } .hangoverbtn { background-color: var(--danger-color); color: white; border: none; padding: 10px 20px; border-radius: var(--border-radius); cursor: pointer; font-size: 16px; transition: var(--transition); display: flex; align-items: center; } .hangoverbtn:hover { background-color: #c0392b; } /* Welcome screen */ .welcome-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .recomlist { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 900px; } .item { width: 200px; height: 150px; background-color: white; border-radius: var(--border-radius); box-shadow: var(--box-shadow); padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); text-align: center; } .item:hover { transform: translateY(-5px); box-shadow: 0 7px 15px rgba(0, 0, 0, 0.1); } .item i { font-size: 36px; margin-bottom: 15px; color: var(--primary-color); } .item p { font-size: 14px; color: var(--text-color); } /* Chat history */ .historylist { flex: 1; overflow-y: auto; padding: 20px; background-color: #f9f9f9; } .mesay, .aisay { max-width: 85%; margin-bottom: 20px; padding: 15px; border-radius: var(--border-radius); position: relative; line-height: 1.5; } .mesay { background-color: var(--primary-color); color: white; margin-left: auto; border-bottom-right-radius: 0; } .aisay { background-color: white; color: var(--text-color); margin-right: auto; border-bottom-left-radius: 0; box-shadow: var(--box-shadow); } .ai-thinking, .ai-tool-using { display: flex; align-items: center; justify-content: center; padding: 10px; } .ai-thinking img { height: 30px; } .feedbackpanel { margin-top: 10px; display: flex; align-items: center; gap: 10px; } .action-btn { color: var(--gray-color); cursor: pointer; transition: var(--transition); } .action-btn:hover { color: var(--primary-color); } .model-label { margin-left: auto; font-size: 12px; color: var(--gray-color); } .recomminput { margin-top: 20px; background-color: white; border-radius: var(--border-radius); padding: 15px; box-shadow: var(--box-shadow); } .recomminput ol { padding-left: 20px; } .recomminput li { margin-bottom: 10px; cursor: pointer; transition: var(--transition); } .recomminput li:hover { color: var(--primary-color); } /* Footer and input area */ .footer { padding: 15px; border-top: 1px solid var(--light-gray); background-color: white; position: relative; } .scrollbar { position: absolute; top: -30px; right: 20px; background-color: white; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; box-shadow: var(--box-shadow); color: var(--gray-color); transition: var(--transition); } .scrollbar:hover { color: var(--primary-color); } .attachpannel { display: flex; align-items: center; background-color: var(--light-color); padding: 10px; border-radius: var(--border-radius); margin-bottom: 10px; } .filebox { display: flex; align-items: center; flex: 1; } .filebox img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--border-radius); margin-right: 10px; } .fname { font-size: 14px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mic-input { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); width: 240px; background-color: white; border-radius: var(--border-radius); box-shadow: var(--box-shadow); padding: 20px; text-align: center; z-index: 60; } .close-mic { position: absolute; top: 10px; right: 10px; cursor: pointer; color: var(--gray-color); transition: var(--transition); } .close-mic:hover { color: var(--danger-color); } .mic-button { cursor: pointer; width: 80px; height: 80px; margin: 0 auto; } .mic-button img { width: 100%; height: 100%; object-fit: contain; } .mic-status { margin-top: 15px; font-size: 14px; color: var(--gray-color); } .inputpannel { display: flex; align-items: flex-end; background-color: var(--light-color); border-radius: var(--border-radius); padding: 10px; } .file-upload { position: relative; margin-right: 10px; } .file-upload input[type="file"] { position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .file-upload i { font-size: 20px; color: var(--gray-color); cursor: pointer; transition: var(--transition); } .file-upload i:hover { color: var(--primary-color); } .inputtext { flex: 1; border: none; background-color: transparent; resize: none; padding: 8px; font-size: 14px; max-height: 150px; min-height: 38px; } .inputtext:focus { outline: none; } .sendbtn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background-color: var(--light-gray); margin-left: 10px; transition: var(--transition); } .sendbtn:hover { background-color: var(--primary-color); color: white; } .sendbtn.primary { background-color: var(--primary-color); color: white; } .sendbtn.primary:hover { background-color: var(--secondary-color); } .sendbtn i { font-size: 16px; } /* Settings panel */ .settings-panel { width: 350px; height: 100vh; background-color: white; box-shadow: var(--box-shadow); z-index: 50; overflow-y: auto; padding: 20px; border-left: 1px solid var(--light-gray); } .settings-header { display: flex; align-items: center; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--light-gray); } .settings-title { flex: 1; font-size: 18px; font-weight: 500; text-align: center; } .settings-header i { cursor: pointer; font-size: 18px; color: var(--gray-color); transition: var(--transition); } .settings-header i:hover { color: var(--danger-color); } .subbtn { background-color: var(--primary-color); color: white; border: none; padding: 10px 20px; border-radius: var(--border-radius); cursor: pointer; font-size: 16px; width: 100%; margin-top: 20px; transition: var(--transition); } .subbtn:hover { background-color: var(--secondary-color); } /* Responsive design */ @media (max-width: 768px) { .bodycont { flex-direction: column; height: auto; } .chat-history { width: 100%; height: 100vh; } .cont { margin-left: 0; height: 100vh; } .settings-panel { width: 100%; } .tooldia { width: 95%; } .recomlist { flex-direction: column; } .item { width: 100%; } .mesay, .aisay { max-width: 95%; } } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chinese_lunar_calendar.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/highlight.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/highlight.9.9.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/marked.umd.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/localforage.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/xlsx.full.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pdf.2.2.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mammoth.browser.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jszip.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pptxgen.bundle.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/coderunner.1.1.1.js"></script> </head> <body> <div id="overlay" onclick="hideImage()"> <i id="closeBtn" onclick="hideImage()" class="bi bi-x-circle-fill"></i> <img id="overlayImage" src="" alt="Fullscreen Image"> </div> <div id="app" class="bodycont"> <div class="tooldia" v-show="showtooldiaforagent" style="z-index: 113;"> <i @click="showtooldiaforagent=false" class="bi bi-x-circle-fill" style="margin: 0; float: right;"></i> <div class="dia-title">选择你想要的工具</div> <p v-for="item in alltoollist" :key="item.toolname" class="tool-item"> <label class="tool-label"> <input type="checkbox" v-model="agentformdata.bottoollist" :value="item" /> {{item.toolname}}(<span class="tool-desc">{{item.desc}}</span>) </label> </p> </div> <div class="tooldia" v-show="showaddagentdia" style="z-index: 112; max-height: 60vh; overflow: auto;"> <i @click="showaddagentdia=false" class="bi bi-x-circle-fill" style="margin: 0; float: right;"></i> <div class="dia-title">添加智能体</div> <div class="form-group"> <p>智能体名称:</p> <input type="text" class="textinput" v-model="agentformdata.agentname" placeholder="智能体名称" /> </div> <div class="form-group"> <p>智能体描述:</p> <textarea type="text" class="promptinput" v-model="agentformdata.desc" placeholder="智能体描述"></textarea> </div> <div class="form-group select-wrapper"> <p>模型</p> <p> <select v-model="agentformdata.aimodel" class="custom-select"> <option v-for="item in modellist" :key="item.model" :value="item.model"> {{ item.model }} </option> </select> </p> </div> <div class="form-group"> <p>随机性: {{agentformdata.temperature}}</p> <p><input type="range" class="custom-range" v-model="agentformdata.temperature" min="0.1" max="1" step="0.1" /></p> </div> <div class="form-group"> <p>上下文历史记录轮数: {{agentformdata.maxlun}}</p> <p><input type="range" class="custom-range" v-model="agentformdata.maxlun" min="1" max="10" step="1" /></p> </div> <div class="form-group"> <p>topN: {{agentformdata.topn}}</p> <p><input type="range" class="custom-range" v-model="agentformdata.topn" min="0.1" max="1" step="0.1" /></p> </div> <div class="form-group"> <p>最大输出: {{agentformdata.maxtokens}} tokens</p> <p><input type="ran.........完整代码请登录后点击上方下载按钮下载查看
网友评论0