chunzhi/chatgpt_academic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

smarter chatbot height adjustment

Browse Source
This commit is contained in:
binary-husky 2023-12-25 21:26:24 +08:00
parent 5c7499cada
commit c625348ce1
1 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
themes/common.js
View File

@ -156,21 +156,21 @@ function chatbotContentChanged(attempt = 1, force = false) {
function chatbotAutoHeight() {
// 自动调整高度
function update_height() {
var { panel_height_target, chatbot_height, chatbot } = get_elements(true);
if (panel_height_target != chatbot_height) {
var pixelString = panel_height_target.toString() + 'px';
var { height_target, chatbot_height, chatbot } = get_elements(true);
if (height_target != chatbot_height) {
var pixelString = height_target.toString() + 'px';
chatbot.style.maxHeight = pixelString; chatbot.style.height = pixelString;
}
}
function update_height_slow() {
var { panel_height_target, chatbot_height, chatbot } = get_elements();
if (panel_height_target != chatbot_height) {
new_panel_height = (panel_height_target - chatbot_height) * 0.5 + chatbot_height;
if (Math.abs(new_panel_height - panel_height_target) < 10) {
new_panel_height = panel_height_target;
var { height_target, chatbot_height, chatbot } = get_elements();
if (height_target != chatbot_height) {
new_panel_height = (height_target - chatbot_height) * 0.5 + chatbot_height;
if (Math.abs(new_panel_height - height_target) < 10) {
new_panel_height = height_target;
}
// console.log(chatbot_height, panel_height_target, new_panel_height);
// console.log(chatbot_height, height_target, new_panel_height);
var pixelString = new_panel_height.toString() + 'px';
chatbot.style.maxHeight = pixelString; chatbot.style.height = pixelString;
}
@ -179,7 +179,7 @@ function chatbotAutoHeight() {
update_height();
setInterval(function () {
update_height_slow()
}, 50); // 每100毫秒执行一次
}, 50); // 每50毫秒执行一次
}
function get_elements(consider_state_panel = false) {
@ -187,23 +187,36 @@ function get_elements(consider_state_panel = false) {
if (!chatbot) {
chatbot = document.querySelector('#gpt-chatbot');
}
const input_panel = document.querySelector('#input-panel');
const panel1 = document.querySelector('#input-panel').getBoundingClientRect();
const panel2 = document.querySelector('#basic-panel').getBoundingClientRect()
const panel3 = document.querySelector('#plugin-panel').getBoundingClientRect();
// const panel4 = document.querySelector('#interact-panel').getBoundingClientRect();
const panel5 = document.querySelector('#input-panel2').getBoundingClientRect();
const panel_active = document.querySelector('#state-panel').getBoundingClientRect();
if (consider_state_panel || panel_active.height < 25) {
document.state_panel_height = panel_active.height;
}
// 25 是chatbot的label高度, 16 是右侧的gap
var panel_height_target = panel1.height + panel2.height + panel3.height + 0 + 0 - 25 + 16 * 2;
var height_target = panel1.height + panel2.height + panel3.height + 0 + 0 - 25 + 16 * 2;
// 禁止动态的state-panel高度影响
panel_height_target = panel_height_target + (document.state_panel_height - panel_active.height)
var panel_height_target = parseInt(panel_height_target);
height_target = height_target + (document.state_panel_height - panel_active.height)
var height_target = parseInt(height_target);
var chatbot_height = chatbot.style.height;
const err_tor = 5;
if (Math.abs(panel1.left - chatbot.getBoundingClientRect().left) < err_tor){
// 是否处于窄屏模式
height_target = window.innerHeight * 0.6;
}else{
// 调整高度
const chatbot_height_exceed = 15;
const chatbot_height_exceed_m = 10;
if (panel3.bottom >= window.innerHeight - chatbot_height_exceed) {
height_target = window.innerHeight - chatbot.getBoundingClientRect().top - chatbot_height_exceed_m;
}
}
var chatbot_height = parseInt(chatbot_height);
return { panel_height_target, chatbot_height, chatbot };
return { height_target, chatbot_height, chatbot };
}