<!DOCTYPE html>
<head>
<script src="./jquery-3.1.1.min.js"></script>
<style>
#float-btn {
/* 设置形状及阴影 */
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
/* 使img元素居中 */
display: flex;
align-items: center;
justify-content: center;
/* 设置按钮的位置 */
position: fixed;
right: 10px;
bottom: 60px;
/* 设置过渡属性 */
transition: width 0.5s, height 0.5s;
}
#float-btn:hover {
/* 鼠标悬停时 */
width: 60px;
height: 60px;
}
#float-btn:active {
/* 鼠标点击时 */
background-color: whitesmoke;
}
.ai-window{
/* 设置形状及阴影 */
width: 500px;
height: 700px;
border-radius: 10px;
background-color: rgb(242, 248, 247);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
/* 设置位置 */
position: fixed;
right: 60px;
bottom: 60px;
/* 设置布局 */
display: flex;
flex-direction: column;
justify-items: center;
overflow: hidden;
}
.ai-window .ai-top{
position: relative;
background-color: rgb(7, 236, 217);
width: auto;
height: 50px;
display: flex;
justify-content: space-between;
line-height: 50px;
text-align: center;
padding: 0 30px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.ai-window .ai-top .ai-title{
font-size: 14px;
color:#fff;
}
.ai-window .ai-top .ai-close{
width: 50px;
height: 50px;
margin-right: -30px;
cursor: pointer;
font-size: 18px;
color: #fff;
}
.ai-window .ai-body{
position: relative;
overflow:auto;
height: 545px;
display: flex;
flex-direction: column;
}
.ai-window .ai-body::-webkit-scrollbar {
display: none;
}
.ai-window .ai-body .ai-l-message{
/* width: auto;
max-width: 85%; */
display: flex; /* 或者使用 'table' */
justify-content: flex-start;
height: auto;
line-height: 30px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
margin: 10px;
/* background-color: #fff; */
font-size: 14px;
color: #939393;
padding: 10px;
}
.ai-window .ai-body .ai-l-containner{
background-color: #fff;
height: auto;
line-height: 30px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 10px;
}
.ai-window .ai-body .ai-r-message{
display: flex; /* 或者使用 'table' */
justify-content: flex-end;
height: auto;
line-height: 30px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin: 10px;
/* background-color: #d511fc; */
font-size: 14px;
color: #fff;
padding: 10px;
left: 0;
}
.ai-window .ai-body .ai-r-containner{
background-color: #d511fc;
height: auto;
line-height: 30px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
.ai-window .ai-body .ai-span-container{
white-space: normal;
}
.ai-window .ai-send-message{
position: relative;
/* background-color: rgb(232, 248, 216); */
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
width: auto;
height: 105px;
overflow-y: auto;
/* 去除边框 */
border: none;
resize: none;
/* 去除选中后的边框 */
outline:none;
}
/* 隐藏滚动条 */
.ai-window .ai-send-message::-webkit-scrollbar {
display: none;
}
.ai-window .ai-send-message .ai-send-input .ai-textarea{
caret-color: #5240ff;
-webkit-caret-color: #5240ff;
resize: none;
font-size: 16px;
line-height: 46px;
height: 46px;
color: var(--text-color-default);
font-family: Arial, Helvetica, sans-serif;
overflow: auto;
padding: 0 24px ;
border: 0;
border-radius: 30px;
/* 去除边框 */
border: none;
/* resize: none; */
/* 去除选中后的边框 */
outline:none;
max-height: 99px;
}
/* .ai-textarea::-webkit-scrollbar {
width: 0;
height: 0;
} */
.ai-window .ai-send-message .ai-send-input{
background-color: #fff;
border-radius: 30px;
margin-top: 1px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 靠下*/
position: absolute;
left: 0;
bottom: 6px;
max-height: 99px;
width: 95%;
margin-left: 11px;
}
.ai-window .ai-send-message .ai-send-input .ai-send-icon{
position: absolute;
background-image: -webkit-linear-gradient(139deg, #6e55f2, #b5b7ff);
background-image: linear-gradient(-49deg, #6e55f2, #b5b7ff);
border-radius: 50%;
right: 4px;
bottom: 4px;
width: 38px;
height: 38px;
font-size: 20px;
line-height: 38px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div id="float-btn">
<img src="AI.png" width="40px" height="40px" onclick="isOpenWindow()" >
</div>
<div class="ai-window" id="ai-window" name="ai-window" style="display: none;">
<div class="ai-top">
<span class="ai-title">欢迎使用OA办公助手</span>
<span class="ai-close" onclick="closeWindows()" title="退出OA助手">X</span>
</div>
<div class="ai-body" id="ai-body">
<div class="ai-r-message">
<div class="ai-r-containner">
<span class="ai-span-container">
为了身体健康，我们今天今天最适合吃什么？
</span>
</div>
</div>
<div class="ai-l-message">
<div class="ai-l-containner">
<span class="ai-span-container">
作为你的搜索AI伙伴，我并不能确定今天最适合吃什么，因为这取决于许多因素，比如你的个人口味、饮食习惯、所在地的饮食文化、身体状况、天气状况以及可获得的食材等。
</span>
</div>
</div>
</div>
<div class="ai-send-message">
<div class="ai-send-input">
<textarea id="auto-resize" rows="1" class="ai-textarea" cols="45px" placeholder="你可以问我任何问题" maxlength="500"
spellcheck="true" autocapitalize="none" autocomplete="off" autocorrect="off" ></textarea>
<i class="c-icon ai-send-icon" onclick="question()">问</i>
</div>
</div>
</div>
<script>
var isShow=false;
var aiWindow = document.getElementById('ai-window');
function isOpenWindow(){
isShow = !isShow;
if(isShow){
console.log("显示窗口",isShow);
aiWindow.style.display = "block";
}else{
console.log("隐藏窗口",isShow);
aiWindow.style.display = "none";
}
}
function closeWindows(){
// TODO 清空上下文件，下次重新聊天
isOpenWindow();
// 清空聊天内容
$("#ai-body").html("");
console.log("--------------清空聊天内容----------");
}
document.addEventListener('DOMContentLoaded', function() {
var textarea = document.getElementById('auto-resize');
textarea.addEventListener('input', autoResize);
function autoResize() {
console.log('自动调整调试');
