// 为 bot 消息添加复制与切换显示按钮 以及最新消息加上重新生成，删除最新消息，嗯。
function addChuanhuButton(botRow) {
botElement = botRow.querySelector('.message.bot');
isLatestMessage = botElement.classList.contains('latest');
var rawMessage = botElement.querySelector('.raw-message');
var mdMessage = botElement.querySelector('.md-message');
if (!rawMessage) { // 如果没有 raw message，说明是早期历史记录，去除按钮
// var buttons = botElement.querySelectorAll('button.chuanhu-btn');
// for (var i = 0; i < buttons.length; i++) {
// buttons[i].parentNode.removeChild(buttons[i]);
// }
botElement.querySelector('.message-btn-row')?.remove();
botElement.querySelector('.message-btn-column')?.remove();
return;
}
// botElement.querySelectorAll('button.copy-bot-btn, button.toggle-md-btn').forEach(btn => btn.remove()); // 就算原先有了，也必须重新添加，而不是跳过
if (!isLatestMessage) botElement.querySelector('.message-btn-row')?.remove();
botElement.querySelector('.message-btn-column')?.remove();
// Copy bot button
var copyButton = document.createElement('button');
copyButton.classList.add('chuanhu-btn');
copyButton.classList.add('copy-bot-btn');
copyButton.setAttribute('aria-label', 'Copy');
copyButton.innerHTML = copyIcon;
copyButton.addEventListener('click', async () => {
const textToCopy = rawMessage.innerText;
try {
if ("clipboard" in navigator) {
await navigator.clipboard.writeText(textToCopy);
copyButton.innerHTML = copiedIcon;
setTimeout(() => {
copyButton.innerHTML = copyIcon;
}, 1500);
} else {
const textArea = document.createElement("textarea");
textArea.value = textToCopy;
document.body.appendChild(textArea);
textArea.select();
try {
document.execCommand('copy');
copyButton.innerHTML = copiedIcon;
setTimeout(() => {
copyButton.innerHTML = copyIcon;
}, 1500);
} catch (error) {
console.error("Copy failed: ", error);
}
document.body.removeChild(textArea);
}
} catch (error) {
console.error("Copy failed: ", error);
}
});
// botElement.appendChild(copyButton);
// Toggle button
var toggleButton = document.createElement('button');
toggleButton.classList.add('chuanhu-btn');
toggleButton.classList.add('toggle-md-btn');
toggleButton.setAttribute('aria-label', 'Toggle');
var renderMarkdown = mdMessage.classList.contains('hideM');
toggleButton.innerHTML = renderMarkdown ? mdIcon : rawIcon;
toggleButton.addEventListener('click', () => {
renderMarkdown = mdMessage.classList.contains('hideM');
if (renderMarkdown) {
renderMarkdownText(botElement);
toggleButton.innerHTML=rawIcon;
} else {
removeMarkdownText(botElement);
toggleButton.innerHTML=mdIcon;
}
chatbotContentChanged(1); // to set md or raw in read-only history html
});
// botElement.insertBefore(toggleButton, copyButton);
var messageBtnColumn = document.createElement('div');
messageBtnColumn.classList.add('message-btn-column');
messageBtnColumn.appendChild(toggleButton);
messageBtnColumn.appendChild(copyButton);
botElement.appendChild(messageBtnColumn);
function renderMarkdownText(message) {
var mdDiv = message.querySelector('.md-message');
if (mdDiv) mdDiv.classList.remove('hideM');
var rawDiv = message.querySelector('.raw-message');
if (rawDiv) rawDiv.classList.add('hideM');
}
function removeMarkdownText(message) {
var rawDiv = message.querySelector('.raw-message');
if (rawDiv) {
rawDiv.innerHTML = rawDiv.querySelector('pre')?.innerHTML || rawDiv.innerHTML;
rawDiv.classList.remove('hideM');
}
var mdDiv = message.querySelector('.md-message');
if (mdDiv) mdDiv.classList.add('hideM');
}
}
function setLatestMessage() {
var latestMessage = gradioApp().querySelector('#chuanhu-chatbot > .wrapper > .wrap > .message-wrap .message.bot.latest');
if (latestMessage) addLatestMessageButtons(latestMessage);
}
function addLatestMessageButtons(botElement) {
botElement.querySelector('.message-btn-row')?.remove();
var messageBtnRow = document.createElement('div');
messageBtnRow.classList.add('message-btn-row');
var messageBtnRowLeading = document.createElement('div');
messageBtnRowLeading.classList.add('message-btn-row-leading');
var messageBtnRowTrailing = document.createElement('div');
messageBtnRowTrailing.classList.add('message-btn-row-trailing');
messageBtnRow.appendChild(messageBtnRowLeading);
messageBtnRow.appendChild(messageBtnRowTrailing);
botElement.appendChild(messageBtnRow);
//leading
var regenerateButton = document.createElement('button');
regenerateButton.classList.add('chuanhu-btn');
regenerateButton.classList.add('regenerate-btn');
regenerateButton.setAttribute('aria-label', 'Regenerate');
regenerateButton.innerHTML = regenIcon + `${i18n(regenerate_i18n)}`;
var gradioRetryBtn = gradioApp().querySelector('#gr-retry-btn');
regenerateButton.addEventListener('click', () => {
gradioRetryBtn.click();
});
var deleteButton = document.createElement('button');
deleteButton.classList.add('chuanhu-btn');
deleteButton.classList.add('delete-latest-btn');
deleteButton.setAttribute('aria-label', 'Delete');
deleteButton.innerHTML = deleteIcon + `${i18n(deleteRound_i18n)}`;
var gradioDelLastBtn = gradioApp().querySelector('#gr-dellast-btn');
deleteButton.addEventListener('click', () => {
gradioDelLastBtn.click();
chatbotContentChanged(2);
});
messageBtnRowLeading.appendChild(regenerateButton);
messageBtnRowLeading.appendChild(deleteButton);
// trailing
var likeButton = document.createElement('button');
likeButton.classList.add('chuanhu-btn');
likeButton.classList.add('like-latest-btn');
likeButton.setAttribute('aria-label', 'Like');
likeButton.innerHTML = likeIcon;
var gradioLikeBtn = gradioApp().querySelector('#gr-like-btn');
likeButton.addEventListener('click', () => {
gradioLikeBtn.click();
});
var dislikeButton = document.createElement('button');
dislikeButton.classList.add('chuanhu-btn');
dislikeButton.classList.add('dislike-latest-btn');
dislikeButton.setAttribute('aria-label', 'Dislike');
dislikeButton.innerHTML = dislikeIcon;
var gradioDislikeBtn = gradioApp().querySelector('#gr-dislike-btn');
dislikeButton.addEventListener('click', () => {
gradioDislikeBtn.click();
});
messageBtnRowTrailing.appendChild(likeButton);
messageBtnRowTrailing.appendChild(dislikeButton);
}
// button svg code
const copyIcon = '';
const copiedIcon = '';
const mdIcon = '';
const rawIcon = '';
const regenIcon = '';
const deleteIcon = '';
// const deleteIcon = ''
const likeIcon = '';
const dislikeIcon= ''