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

vue调用coze api实现流式ai客服问答webui交互效果代码

代码语言：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;
        background: white;
        border-radius: 10px;
        display:none; 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 so.........完整代码请登录后点击上方下载按钮下载查看