JohnSmith9982's picture
Upload 114 files
7bab2f2
function openSettingBox() {
chuanhuPopup.classList.add('showBox');
popupWrapper.classList.add('showBox');
settingBox.classList.remove('hideBox');
trainingBox.classList.add('hideBox');
showMask("box");
}
function openTrainingBox() {
chuanhuPopup.classList.add('showBox');
popupWrapper.classList.add('showBox');
trainingBox.classList.remove('hideBox');
settingBox.classList.add('hideBox');
showMask("box");
}
function openChatMore() {
chatbotArea.classList.add('show-chat-more');
showMask("chat-more");
}
function closeChatMore() {
chatbotArea.classList.remove('show-chat-more');
chatbotArea.querySelector('.chuanhu-mask')?.remove();
}
function showMask(obj) {
const mask = document.createElement('div');
mask.classList.add('chuanhu-mask');
if (obj == "box") {
mask.classList.add('mask-blur');
document.body.classList.add('popup-open');
popupWrapper.appendChild(mask);
} else if (obj == "chat-more") {
mask.classList.add('transparent-mask');
chatbotArea.querySelector('#chatbot-input-more-area').parentNode.appendChild(mask);
} else if (obj == "update-toast") {
mask.classList.add('chuanhu-top-mask');
if (document.querySelector('.chuanhu-top-mask')) {
for (var i = 0; i < document.querySelectorAll('.chuanhu-top-mask').length; i++) {
document.querySelectorAll('.chuanhu-top-mask')[i].remove();
}
}
document.body.appendChild(mask);
// mask.classList.add('transparent-mask');
}
mask.addEventListener('click', () => {
if (obj == "box") {
closeBox();
} else if (obj == "chat-more") {
closeChatMore();
} else if (obj == "update-toast") {
closeUpdateToast();
}
});
}
function chatMoreBtnClick() {
if (chatbotArea.classList.contains('show-chat-more')) {
closeChatMore();
} else {
openChatMore();
}
}
function closeBtnClick(obj) {
if (obj == "box") {
closeBox();
} else if (obj == "toolbox") {
closeSide(toolbox);
wantOpenToolbox = false;
}
}
function closeBox() {
chuanhuPopup.classList.remove('showBox');
popupWrapper.classList.remove('showBox');
trainingBox.classList.add('hideBox');
settingBox.classList.add('hideBox');
document.querySelector('.chuanhu-mask')?.remove();
document.body.classList.remove('popup-open');
}
function closeSide(sideArea) {
document.body.classList.remove('popup-open');
sideArea.classList.remove('showSide');
if (sideArea == toolbox) {
chuanhuHeader.classList.remove('under-box');
chatbotArea.classList.remove('toolbox-open')
toolboxOpening = false;
} else if (sideArea == menu) {
chatbotArea.classList.remove('menu-open')
menuOpening = false;
}
adjustMask();
}
function openSide(sideArea) {
sideArea.classList.add('showSide');
if (sideArea == toolbox) {
chuanhuHeader.classList.add('under-box');
chatbotArea.classList.add('toolbox-open')
toolboxOpening = true;
} else if (sideArea == menu) {
chatbotArea.classList.add('menu-open')
menuOpening = true;
}
// document.body.classList.add('popup-open');
}
function menuClick() {
shouldAutoClose = false;
if (menuOpening) {
closeSide(menu);
wantOpenMenu = false;
} else {
if (windowWidth < 1024 && toolboxOpening) {
closeSide(toolbox);
wantOpenToolbox = false;
}
openSide(menu);
wantOpenMenu = true;
}
adjustSide();
}
function toolboxClick() {
shouldAutoClose = false;
if (toolboxOpening) {
closeSide(toolbox);
wantOpenToolbox = false;
} else {
if (windowWidth < 1024 && menuOpening) {
closeSide(menu);
wantOpenMenu = false;
}
openSide(toolbox);
wantOpenToolbox = true;
}
adjustSide();
}
var menuOpening = false;
var toolboxOpening = false;
var shouldAutoClose = true;
var wantOpenMenu = windowWidth > 768;
var wantOpenToolbox = windowWidth >= 1024;
function adjustSide() {
if (windowWidth >= 1024) {
shouldAutoClose = true;
if (wantOpenMenu) {
openSide(menu);
if (wantOpenToolbox) openSide(toolbox);
} else if (wantOpenToolbox) {
openSide(toolbox);
} else {
closeSide(menu);
closeSide(toolbox);
}
} else if (windowWidth > 768 && windowWidth < 1024 ) {
shouldAutoClose = true;
if (wantOpenToolbox) {
if (wantOpenMenu) {
closeSide(toolbox);
openSide(menu);
} else {
closeSide(menu);
openSide(toolbox);
}
} else if (wantOpenMenu) {
if (wantOpenToolbox) {
closeSide(menu);
openSide(toolbox);
} else {
closeSide(toolbox);
openSide(menu);
}
} else if (!wantOpenMenu && !wantOpenToolbox){
closeSide(menu);
closeSide(toolbox);
}
} else { // windowWidth <= 768
if (shouldAutoClose) {
closeSide(menu);
// closeSide(toolbox);
}
}
checkChatbotWidth();
adjustMask();
}
function adjustMask() {
var sideMask = null;
if (!gradioApp().querySelector('.chuanhu-side-mask')) {
sideMask = document.createElement('div');
sideMask.classList.add('chuanhu-side-mask');
gradioApp().appendChild(sideMask);
sideMask.addEventListener('click', () => {
closeSide(menu);
closeSide(toolbox);
});
}
sideMask = gradioApp().querySelector('.chuanhu-side-mask');
if (windowWidth > 768) {
sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0)';
setTimeout(() => {sideMask.style.display = 'none'; }, 100);
return;
}
// if (windowWidth <= 768)
if (menuOpening || toolboxOpening) {
document.body.classList.add('popup-open');
sideMask.style.display = 'block';
setTimeout(() => {sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';}, 200);
sideMask.classList.add('mask-blur');
} else if (!menuOpening && !toolboxOpening) {
sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0)';
setTimeout(() => {sideMask.style.display = 'none'; }, 100);
}
}
function checkChatbotWidth() {
// let chatbotWidth = chatbotArea.clientWidth;
// if (chatbotWidth > 488) {
if (windowWidth > 768) {
chatbotArea.classList.add('chatbot-full-width');
} else {
chatbotArea.classList.remove('chatbot-full-width');
}
if (windowWidth > 768) {
chatbotArea.classList.remove('no-toolbox');
chatbotArea.classList.remove('no-menu');
if (!chatbotArea.classList.contains('toolbox-open') && chatbotArea.classList.contains('menu-open')) {
chatbotArea.classList.add('no-toolbox');
} else if (!chatbotArea.classList.contains('menu-open') && chatbotArea.classList.contains('toolbox-open')) {
chatbotArea.classList.add('no-menu');
} else if (!chatbotArea.classList.contains('menu-open') && !chatbotArea.classList.contains('toolbox-open')) {
chatbotArea.classList.add('no-toolbox');
chatbotArea.classList.add('no-menu');
}
}
checkChatMoreMask();
}
function checkChatMoreMask() {
if (!chatbotArea.classList.contains('chatbot-full-width')) {
chatbotArea.querySelector('.chuanhu-mask')?.remove();
chatbotArea.classList.remove('show-chat-more');
}
}
/*
function setHistroyPanel() {
const historySelectorInput = gradioApp().querySelector('#history-select-dropdown input');
const historyPanel = document.createElement('div');
historyPanel.classList.add('chuanhu-history-panel');
historySelector.parentNode.insertBefore(historyPanel, historySelector);
var historyList=null;
historySelectorInput.addEventListener('click', (e) => {
e.stopPropagation();
historyList = gradioApp().querySelector('#history-select-dropdown ul.options');
if (historyList) {
// gradioApp().querySelector('.chuanhu-history-panel')?.remove();
historyPanel.innerHTML = '';
let historyListClone = historyList.cloneNode(true);
historyListClone.removeAttribute('style');
// historyList.classList.add('hidden');
historyList.classList.add('hideK');
historyPanel.appendChild(historyListClone);
addHistoryPanelListener(historyPanel);
// historySelector.parentNode.insertBefore(historyPanel, historySelector);
}
});
}
*/
// function addHistoryPanelListener(historyPanel){
// historyPanel.querySelectorAll('ul.options > li').forEach((historyItem) => {
// historyItem.addEventListener('click', (e) => {
// const historySelectorInput = gradioApp().querySelector('#history-select-dropdown input');
// const historySelectBtn = gradioApp().querySelector('#history-select-btn');
// historySelectorInput.value = historyItem.innerText;
// historySelectBtn.click();
// });
// });
// }
// function testTrain() {
// trainBody.classList.toggle('hide-body');
// trainingBox.classList.remove('hideBox');
// var chuanhuBody = document.querySelector('#chuanhu-body');
// chuanhuBody.classList.toggle('hide-body');
// }