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"><!--[-->Send<!--]--></span></button></form>
                         
                        </div>
                    </div>
                </div>
               
               
            </main>
           
        </div>
       
    </div>
    
    <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="https://repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
      <script type="text/javascript" src="https://repo.bfw.wiki/bfwrepo/js/axios-0.18.js"></script>
      
      <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue-typed-js.browser.js"></script>
      <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vue-typed-js.css">
      
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/marked.umd.min.js"></script>
  <script >
  
  marked.setOptions({
    highlight: function(code) {
        return hljs.highlightAuto(code).value
    }
})
marked.setOptions({ sanitize: true })
      const data = [
	{ text: 'Hello! 我是AI小助手' },


];
let	counter = 1;

          


Vue.component('bubble', {
	props: ['bubbtext','ifnew',"oldtext","isuser"],
	template: `<div :class="'flex w-full '+isuser ">
	
	 <div c.........完整代码请登录后点击上方下载按钮下载查看