// 为 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= ''