vue调用coze api实现流式ai问答webui交互效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：vue调用coze api实现流式ai问答webui交互效果代码，兼容chatgpt、千问、智谱、ollama等流式接口请求，实现了代码块格式化高亮显示、代码块高亮、附件上传、自动滚动、打字输出、复制及重回答、图片全屏放大、消息本地持久存储等ai助手常用功能。

代码标签： vue 调用 coze api 流式 ai 问答 webui 交互

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue Chat with API</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.css">
    <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>



    <style>
    body{
        padding: 0;
        margin: 0;
    }
    .cont{
        position: fixed;
        top:0;
        left: 0;
        right: 0;
        display:flex; flex-direction: column;height:100vh;
    }
        .historylist {
        
         flex: 1;
            overflow-y: scroll;
          
        }
        .historylist img{
           max-width: 100px; 
        }
        .mesay, .aisay {
            padding: 10px;
            margin: 10px;
            border-radius: 5px;
             line-height: 30px;
        }
        .mesay {
            background-color: #d0e7ff;
            text-align: right;
        }
        .aisay {
            background-color: aliceblue;
            text-align: left;
        }
        .inputpannel {
            display: flex;
            margin: 10px;
            background: white;
            align-items: flex-end;
            border: 2px solid grey;
            border-radius: 14px;
        }
        .footer{
            position: relative;
        }

        .inputpannel:focus-within {
    border-color: blue;
}
        
           .inputtext {
            margin-top: 4px;
           
          width: 100%;
          background: white;
          line-height: 20px;
          box-sizing: border-box;
          padding: 8px;
          font-family: inherit;
          font-size: 16px;
          resize: none;
          overflow: hidden;
          border: none;
          outline: none;
          height: 40px;
          
          min-height: 40px;
           overflow-y: auto;
          max-height: calc(24px * 5 );
         
        }
        .inputtext:focus {
          border: none;
          outline: none;
        }
        
        
textarea::placeholder {
   


}
 
    
        .historylist pre {
            white-space: pre-wrap;
            color: #ececec;
            background: black;
            border-radius: 4px;
            padding: 10px;
            margin: 0;
            
        }
        .historylist p {
            margin: 0;
            padding: 2px;
        }
        .typing-text {
            font-size: 24px;
            white-space: pre-wrap;
            border-right: 2px solid black;
            animation: blink 0.7s steps(2, start) infinite;
        }
        @keyframes blink {
            to {
                border-color: transparent;
            }
        }
             .code-header {
           position: absolute;
            top: 0;
            left:0;
            right: 0;
            width: 100%;
           color: #cdcdcd;
           height:24px;
          background : #6767;
            
           
        }
        .language-label {
            position: absolute;
            top: -4px;
            left: 0;
            padding: 0 10px;
            
            font-size: 0.8em;
            
        }
        .copy-button {
            position: absolute;
            top: 0;
            right: 0px;
            padding: 0.3em 0.6em;
           
            
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 0.8em;
        }
        .code-content{
            line-height: 20px;
display: block;
    text-wrap: nowrap;
    margin-top: -40px;
        margin-bottom: -63px;
        overflow-x: scroll;
        }
        .historylist pre{
              position: relative;
            background: black;
            color: white;
             border-radius: 6px;
            padding: 1em;
            margin: 1em 0;
        }
.file-upload {
    position: relative;
   width: 30px;
   height: 30px;
   margin: 6px -1px 3px 10px;

    overflow: hidden;
 
    
 
}
.sendbtn{
    margin: 13px;
}

.file-upload input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
   
    
    opacity: 0;
    cursor: pointer;
}



ol{
    list-style: none;
    padding: 0;margin: 10px;
}
i{
    cursor: pointer;

}
.recomminput li{
    background: aliceblue;
    border: 1px solid aliceblue;
    margin:  2px 0 4px 0;
        padding: 5px;
  
    width: 64%;
    font-size: 12px;
    cursor: pointer;
    border-radius: 5px;
}
.copybtn,.regenbtn{
    cursor: pointer;
    margin-right: 20px;
}
.scrollbar{
    position: absolute;
    top: -20px;
 .........完整代码请登录后点击上方下载按钮下载查看