tailwind+vue实现带代码高亮显示与打字动画本地存储及一键复制的模仿chatgpt聊天对话窗口代码-html代码-BFW代码库

tailwind+vue实现带代码高亮显示与打字动画本地存储及一键复制的模仿chatgpt聊天对话窗口代码

代码语言：html

所属分类：其他

代码描述：tailwind+vue实现带代码高亮显示与打字动画本地存储及一键复制的模仿chatgpt聊天对话窗口代码，直接输入后端的api接口url就能使用。

代码标签： tailwind vue 代码高亮显示打字动画本地存储复制模仿 chatgpt

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

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.2.7.css">
    <style>
        body{
            color: #d1d5db;
        }
        pre{
            background: rgba(0,0,0,.5);
            padding: 10px;
            margin: 10px 0;
        }
        #chatbody{
            height: 90vh;
            overflow-y: scroll;
        }
        .controlbar{
    font-size: 12px;
    float: right;
    padding-right: 10px;
    line-height: 50px;
    margin-left: auto;
    cursor: pointer;
}
    </style>
</head>

<body>
    
    
    
    <div id="app">
       
        <div class="bg-gray-900 flex flex-col h-full">
            <main class="flex-grow-1 h-full">
               
               
                <div class="h-full w-full">
                    <div class="relative w-full h-full flex flex-col ">
                        <div class=" h-full" id="chatbody">
                            
                            
                            
        <bubble 
                        v-for="content in contents"
                        v-bind:bubbtext="content.text"
                                v-bind:oldtext="content.oldtext"
                        
                                v-bind:ifnew="content.isnew"
                        
                        v-bind:isuser="content.isUser ? 'bg-gray-800' : ''"
                >
                </bubble>
                <div v-show="thinking" class="">
                AI思考中……
                </div>
                           
                
                   
                  
                        </div>
                        <div class="p-3">
                            <form class="w-full flex items-center gap-3" onsubmit="return false;">
                                <div class="w-full">
                                    
                                    <div class="relative rounded-md shadow-sm">
                                       
                                       <input id="chatText" type="text" class="block w-full sm:text-sm rounded-md bg-gray-800 border-gray-500 focus:ring-brand-primary focus:border-brand-primary text-white"   v-on:keyup.enter="addToChat"
                        v-model="newMessage"
                
                        name="chatText" 
                
                
                        placeholder="Type a message" aria-invalid="false"
                                            aria-describedby="message-error" style="height:40px;">
                                        
                                       
                                       
                                    </div>
                                    
                                </div><button v-on:click="addToChat" type="button" class="relative flex items-center font-medium px-3 py-2 text-sm rounded-md border border-transparent shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"><span class="flex items-center&qu.........完整代码请登录后点击上方下载按钮下载查看