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" cl.........完整代码请登录后点击上方下载按钮下载查看