// 为 bot 消息添加复制与切换显示按钮 以及最新消息加上重新生成,删除最新消息,嗯。 function addChuanhuButton(botElement) { // botElement = botRow.querySelector('.message.bot'); var 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) { // 判断pre是否存在fake-pre类,如果不存在,则为20231118之前的历史记录格式,需要转换,增加fake-pre类用于适配 if (!rawDiv.querySelector('pre')?.classList.contains('fake-pre')) { rawDiv.innerHTML = rawDiv.innerHTML.replace(/
/g, '');
}
// 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();
});
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= ''