- |
|
||<\/?code>)([\s\S]+?)(?=\n\n|$)/gm, '$1
'); markdown = markdown.replace(/CODEBLOCK(\d+)/g, function (match, n) { return codeBlocks[n]; }); return markdown; } // function markdownToHTML(markdown) { // // Convert bold text // markdown = markdown.replace(/\*\*(.*?)\*\*/g, '$1'); // // markdown = markdown.replace(/```(\w+)?\s*([\s\S]*?)```/g, function (match, lang, code) { // // 如果没有指定语言，我们可以默认使用'plaintext'，或者选择不显示 // lang = lang || 'plaintext'; // return ``; // }); // // // Convert inline code and escape HTML // markdown = markdown.replace(/`([^`]+)`/g, function (match, code) { // return '${lang}${code.trim()} //' + code.replace(//g, '>') + ''; // }); // // // Convert ordered lists // markdown = markdown.replace(/\d+\.\s+(.+)(\n|$)/g, '$1 '); // markdown = '' + markdown + '
'; // // // Convert unordered lists (assuming they are marked with - ) // markdown = markdown.replace(/^-\s+(.+)(\n|$)/gm, '$1 '); // markdown = '' + markdown + '
'; // // // Convert paragraphs // markdown = markdown.replace(/([^\n]+)(\n|$)/g, '$1
'); // // return markdown; // } // Convert code blocks // markdown = markdown.replace(/```([\s\S]*?)```/g, function (match, code) { // return ``; // }); // // Convert code blocks with language detection // markdown = markdown.replace(/```(\\w*)\\n([\\s\\S]*?)```/g, function(match, language, code) { // return `javascript${code.trim()} //`; // }); // // if(d.data.content[i].content_type && d.data.content[i].content_type === "image_asset_pointer"){ // let allPicsDiv = createAllPicsDiv(); // allPicsDiv.id = "allPicsDiv"; // realContentDiv.appendChild(allPicsDiv); // while(d.data.content[i] && d.data.content[i].content_type === "image_asset_pointer"){ // // const regex = /file-[\w-]+/; // // const matchedstring = d.data.content[i].asset_pointer.match(regex); // const matchedstring = d.data.content[i].asset_pointer.slice(15); // 从第16个字符开始截取到字符串结尾 // // if (matchedstring) { // log(matchedstring); // file-0rbJDxE2JZqAUM8R9Jz8eUOS // let sourceURL = pictureURL.get(matchedstring) ; // if (!sourceURL) { // try { // sourceURL = await fetchPictureURL(matchedstring); // pictureURL.set(matchedstring, sourceURL); // } catch (error) { // console.error(error); // return; // 如果有错误，提前退出函数 // } // } // // let picDiv = createOnePic(sourceURL); // let downloadBtn = createDownloadBtn(); // downloadBtn.dataset.sourceUrl = sourceURL; // 在所有情况下都设置 // allPicsDiv.appendChild(picDiv); // allPicsDiv.appendChild(downloadBtn); // } else { // log("No match found"); // } // i++; // } // if ( i < d.data.content.length) { // let contentSpan = document.createElement('div'); // contentSpan.className = 'content-text'; // contentSpan.innerHTML = d.data.content[i]; // 如果只需要纯文本 // realContentDiv.appendChild(contentSpan); // } // } // if(d.data.content_type === "text"){ // let div = document.createElement('div'); // div.innerHTML = d.data.content[0]; // div.className = 'content-text'; // realContentDiv.appendChild(div); // } // else { // for(let i = 0 ; i < d.data.content.length; i ++){ // if(d.data.content[i].content_type && d.data.content[i].content_type === "image_asset_pointer"){ // let allPicsDiv = createAllPicsDiv(); // allPicsDiv.id = "allPicsDiv"; // realContentDiv.appendChild(allPicsDiv); // while(d.data.content[i] && d.data.content[i].content_type === "image_asset_pointer"){ // // const regex = /file-[\w-]+/; // // const matchedstring = d.data.content[i].asset_pointer.match(regex); // const matchedstring = d.data.content[i].asset_pointer.slice(15); // 从第16个字符开始截取到字符串结尾 // // if (matchedstring) { // log(matchedstring); // file-0rbJDxE2JZqAUM8R9Jz8eUOS // let sourceURL = pictureURL.get(matchedstring) ; // if (!sourceURL) { // try { // sourceURL = await fetchPictureURL(matchedstring); // pictureURL.set(matchedstring, sourceURL); // } catch (error) { // console.error(error); // return; // 如果有错误，提前退出函数 // } // } // // let picDiv = createOnePic(sourceURL); // let downloadBtn = createDownloadBtn(); // downloadBtn.dataset.sourceUrl = sourceURL; // 在所有情况下都设置 // allPicsDiv.appendChild(picDiv); // allPicsDiv.appendChild(downloadBtn); // } else { // log("No match found"); // } // i++; // } // if ( i < d.data.content.length) { // let contentSpan = document.createElement('div'); // contentSpan.className = 'content-text'; // contentSpan.innerHTML = d.data.content[i]; // 如果只需要纯文本 // realContentDiv.appendChild(contentSpan); // } // } // else{ // let contentSpan = document.createElement('div'); // contentSpan.className = 'content-text'; // contentSpan.innerHTML = d.data.content[i]; // 如果只需要纯文本 // realContentDiv.appendChild(contentSpan); // } // } // } targetDiv.appendChild(realContentDiv); }, handleClick: function (e) { if (e.target.closest('button.flex.ml-auto.gizmo\\:ml-0.gap-2.items-center')) { var codeBlock = e.target.closest('.bg-black').querySelector('code').innerText; nodesInAndOutKit.copyToClipboard(codeBlock); } }, copyToClipboard: function (text) { var textArea = document.createElement("textarea"); textArea.value = text; document.body.appendChild(textArea); textArea.select(); document.execCommand('Copy'); textArea.remove(); ButtonOperations.showUserNotification(translate("codeCopiedToClipboard")); }, handleMouseOver: function (d) { curMouseOnUUID = d.data.uuid + "-window"; d3.select(this).style("cursor", "pointer"); d3.select(this).select("circle") .style("stroke", "#FFFFFF") .style("stroke-width", "3px") .style("cursor", "pointer"); if (d.parent) { d3.selectAll(".node") .filter(function (data) { return data === d.parent; }) .select("circle") .style("stroke", "cyan") .style("stroke-width", "3px"); } const ancestors = d.ancestors(); gLinks.selectAll(".link") .filter(link => ancestors.indexOf(link.target) > -1) .classed("highlighted", true); nodesInAndOutKit.highlightDescendantLinks(d); let windowId = d.data.uuid + "-window"; if (!document.getElementById(windowId)) { temporaryWindowKit.createContentWindowForNode(d); temporaryWindowKit.positionContentWindow(d, event.pageX, event.pageY); } }, handleMouseOut: function (d) { curMouseOnUUID = null; setTimeout(() => { if (curMouseOnUUID !== d.data.uuid + "-window") { let windowElem = document.getElementById(d.data.uuid + "-window"); if (windowElem && windowElem.id === d.data.uuid + "-window") { windowElem.remove(); } } }, 300); gLinks.selectAll(".link.highlighted") .classed("highlighted", false); gLinks.selectAll(".link.descendant-highlighted") .classed("descendant-highlighted", false); d3.select(this).select("circle") .style("stroke", null) .style("stroke-width", null); if (d.parent) { d3.selectAll(".node") .filter(function (data) { return data === d.parent; }) .select("circle") .style("stroke", null) .style("stroke-width", null); } }, onContextMenu: function (d) { log("右击了节点!"); d3.event.stopPropagation() d3.event.preventDefault(); const tag = d3.select(this).select(".emoji-tag"); if (tag.attr("visibility") === "hidden") { tag.attr("visibility", "visible"); conversationData.bookMarked.set(d.data.uuid, true); dbOperations.saveConversationsData(conversationData) .then(() => { log("已保存变化!",); }) .catch(error => { console.error("Error saving data:", error); }); } else { tag.attr("visibility", "hidden"); conversationData.bookMarked.delete(d.data.uuid); dbOperations.saveConversationsData(conversationData) .then(() => { }) .catch(error => { console.error("Error saving data:", error); }); } }, } //temporaryWindowKit const temporaryWindowKit = { log(category, ...message) { // 使用 Logger 实例的 log 方法 //console.log("moduleLog called."); this.logger.log(category, ...message); }, initTemporaryWindowKit: function () { this.logger = new Logger('temporaryWindowKit'); //this.log(LogCategories.SUCCESS, 'temporaryWindowKitLoggerCreated!'); }, positionContentWindow: function (d, x, y) { let windowElem = document.getElementById(d.data.uuid + "-window"); if (windowElem) { windowElem.style.top = (y + 15) + 'px'; windowElem.style.left = (x + 20) + 'px'; } }, createContentWindowForNode: function (d) { let elements = document.querySelectorAll('.temporalityContentLayoutDiv'); elements.forEach(element => { element.remove(); }); let windowElem = document.createElement('div'); windowElem.className = "temporalityContentLayoutDiv"; windowElem.id = d.data.uuid + "-window"; windowElem.style = `position: absolute; width: 600px; padding: 20px; font-size: 16px; lineHeight: 1.6; border: 1px solid #ccc; borderRadius: 5px; boxShadow: 0px 0px 10px rgba(0,0,0,0.2); overflow: auto; opacity: 0.8; max-Height: 500px;`; //fontFamily: Arial, sans-serif; nodesInAndOutKit.updateSelectedNodeContentDiv(d, windowElem); const dark = isDark(); windowElem.classList.add('markdown', 'prose', 'w-full', 'break-words', 'dark:prose-invert', dark ? "dark" : "light"); windowElem.style.backgroundColor = dark ? d.data.type === "chatGPT" ? 'rgb(68,70,84)' : 'rgb(51,53,65)' : d.data.type === "chatGPT" ? 'rgb(247,247,248)' : 'rgb(256,256,256)'; windowElem.style.boxShadow = dark ? '0px 4px 20px rgba(255, 255, 255, 0.1)' : '0px 4px 20px rgba(0, 0, 0, 0.1)'; windowElem.addEventListener('click', nodesInAndOutKit.handleClick); document.body.appendChild(windowElem); windowElem.addEventListener('mouseenter', temporaryWindowKit.windowEnter); windowElem.addEventListener('mouseleave', temporaryWindowKit.windowLeave); }, windowEnter: function (e) { curMouseOnUUID = e.target.id; }, windowLeave: function (e) { curMouseOnUUID = null; setTimeout(() => { if (curMouseOnUUID !== e.target.id) { e.target.remove(); } }, 300); }, } temporaryWindowKit.initTemporaryWindowKit(); //---ContentKit---// const contentDiv = document.createElement('div'); const selectedNodeContent = document.createElement('div'); const contentHeader = document.createElement('div'); let goToNodeButton;//注意gotoNode的逻辑! const talkingPerson = document.createElement('div'); const commentForm = document.createElement('div'); const commentLabel = document.createElement('label'); const commentTextarea = document.createElement('textarea'); let submitButton = document.createElement('button'); let cancelButton = document.createElement('button'); let clearButton = document.createElement('button'); function updateStylesBasedOnTheme() { const dark = isDark() contentDiv.style.backgroundColor = dark ? 'rgb(68,70,84)' : 'rgb(256,256,256)'; contentDiv.style.boxShadow = dark ? '0px 4px 20px rgba(255, 255, 255, 0.1)' : '0px 4px 20px rgba(0, 0, 0, 0.1)'; const links = gLinks.selectAll(".link"); if (dark) { links .attr("stroke", "white") } else { links .attr("stroke", "black") } commentTextarea.style.background = dark ? 'rgb(68,70,84)' : 'rgb(256,256,256)'; } updateStylesBasedOnTheme(); const HTMLClassObserver = new MutationObserver(mutations => { for (let mutation of mutations) { if (mutation.attributeName === 'class') { updateStylesBasedOnTheme(); } } }); HTMLClassObserver.observe(document.documentElement, {attributes: true}); let isRightMouseDown = false; let isLeftMouseDown = false; let initialMouseX, initialMouseY, initialDivX, initialDivY; const ContentKit = { init: function () { this.createContentDivs(); this.addEventListeners(); }, createContentDivs: function () { selectedNodeContent.id = 'nodeContent'; contentHeader.id = 'contentHeader'; contentHeader.style.fontFamily = 'Times New Roman'; contentHeader.textContent = translate("nodeDetails"); contentHeader.style.fontSize = '20px'; contentHeader.style.fontWeight = 'bold'; contentHeader.style.marginBottom = '10px'; contentHeader.style.display = 'flex'; contentHeader.style.justifyContent = 'space-between'; contentHeader.style.alignItems = 'center'; const htmlClass = document.documentElement.getAttribute('class'); contentDiv.style = `position :fixed; top: 10px; right: 10px; width: 400px; padding: 10px; border :8px solid #ddd; display :none; lineHeight :1.6; overflow :hidden; userSelect: text; font-size: 14px;`; contentDiv.id = 'contentDiv'; contentDiv.style.borderRadius = '8px'; let windowHeight = window.innerHeight; contentDiv.style.height = windowHeight - 20 + 'px'; selectedNodeContent.style.paddingTop = '10px'; selectedNodeContent.style.paddingRight = '10px'; selectedNodeContent.style.paddingBottom = '10px'; selectedNodeContent.style.paddingLeft = '10px'; selectedNodeContent.style.userSelect = 'text'; selectedNodeContent.style.overflow = 'auto'; //selectedNodeContent.classList.add('markdown', 'prose', 'w-full', 'break-words', 'dark:prose-invert', htmlClass); selectedNodeContent.classList.add('markdown', 'prose', 'w-full', 'break-words', 'dark:prose-invert'); let copyButton = ButtonCreator.createButton({ id: 'copyButton', innerHTML: '📋', eventListeners: [ { type: 'click', handler: () => { ContentKit.copyToClipboard(selectedNodeContent.innerHTML.replace(/<[^>]*>/g, ' ')); ButtonOperations.showUserNotification(translate("contentCopied")); } }, ], additionalStyles: { border: 'none', cursor: 'pointer', fontSize: '20px', position: 'absolute', top: '6px', right: '150px', background: 'none', }, }); goToNodeButton = ButtonCreator.createButton({ id: 'goToNodeButton', text: '🚩', eventListeners: [ {type: 'click', handler: () => DOMOperations.jumpToDialogueItem(contentDiv.dataset.curDisplay)}, ], additionalStyles: { border: 'none', cursor: 'pointer', fontSize: '18px', position: 'absolute', top: '7px', right: '90px', background: 'none', }, }); let commentButton = ButtonCreator.createButton({ id: 'commentButton', text: '🖊', eventListeners: [ {type: 'click', handler: this.commentToSave}, ], additionalStyles: { border: 'none', cursor: 'pointer', fontSize: '18px', position: 'absolute', top: '8px', right: '210px', background: 'none', }, }); talkingPerson.id = 'talkingPerson'; talkingPerson.style.position = 'absolute'; talkingPerson.style.top = '8px'; talkingPerson.style.right = '240px'; talkingPerson.style.background = 'none'; let closeButton = ButtonCreator.createButton({ id: 'closeButton', innerHTML: '', eventListeners: [ { type: 'click', handler: () => { contentDiv.style.display = 'none'; if (commentForm.style.display === 'block') commentForm.style.display = 'none'; } } ], additionalStyles: { border: 'none', cursor: 'pointer', fontSize: '30px', position: 'absolute', top: '10px', right: '40px', backgroundColor: 'white', }, }); commentForm.id = 'commentForm'; commentForm.style.position = 'fixed'; ContentKit.positionCommentFormRelativeToContentDiv(); commentForm.style.display = 'none'; commentLabel.setAttribute('for', 'comment'); commentLabel.innerText = translate("enterComment") + ":"; commentTextarea.id = 'commentText'; commentTextarea.rows = '5'; cancelButton.className = 'commentHoverEffect'; clearButton.className = 'commentHoverEffect'; submitButton.id = 'submitComment'; submitButton.innerText = translate("userCommentSave"); submitButton.className = 'commentHoverEffect'; commentForm.appendChild(commentLabel); commentForm.appendChild(commentTextarea); commentForm.appendChild(submitButton); commentForm.appendChild(cancelButton); commentForm.appendChild(clearButton); document.body.appendChild(commentForm); contentHeader.appendChild(copyButton); contentHeader.appendChild(goToNodeButton); contentHeader.appendChild(closeButton); contentHeader.appendChild(commentButton); contentHeader.appendChild(talkingPerson); contentDiv.appendChild(selectedNodeContent); contentDiv.insertBefore(contentHeader, selectedNodeContent); document.body.appendChild(contentDiv); }, positionCommentFormRelativeToContentDiv: function () { const rect = contentDiv.getBoundingClientRect(); commentForm.style.position = 'fixed'; commentForm.style.left = (rect.left - 300) + 'px'; commentForm.style.top = rect.top + 'px'; const commentRect = commentForm.getBoundingClientRect(); }, addEventListeners: function () { talkingPerson.addEventListener('mouseenter', function (e) { talkingPerson.style.cursor = 'grab'; }); talkingPerson.addEventListener('mousedown', function (e) { if (e.button === 0) { e.preventDefault(); e.stopPropagation(); isLeftMouseDown = true; initialMouseX = e.clientX; initialMouseY = e.clientY; initialDivX = contentDiv.offsetLeft; initialDivY = contentDiv.offsetTop; let rect = contentDiv.getBoundingClientRect(); offsetX = e.clientX - rect.left; offsetY = e.clientY - rect.top; document.body.style.cursor = 'grabbing'; document.addEventListener('mousemove', moveContentDiv); } }); contentDiv.addEventListener('mousedown', function (e) { if (e.button === 2) { e.preventDefault(); isRightMouseDown = true; initialMouseX = e.clientX; initialMouseY = e.clientY; initialDivX = contentDiv.offsetLeft; initialDivY = contentDiv.offsetTop; let rect = contentDiv.getBoundingClientRect(); offsetX = e.clientX - rect.left; offsetY = e.clientY - rect.top; document.body.style.cursor = 'move'; document.addEventListener('mousemove', moveContentDiv); } }); document.addEventListener('mouseup', function (e) { if (isRightMouseDown && e.button === 2 || isLeftMouseDown && e.button === 0) { e.preventDefault(); isRightMouseDown = false; document.body.style.cursor = ''; talkingPerson.style.cursor = 'grab'; document.removeEventListener('mousemove', moveContentDiv); } }); contentDiv.addEventListener('contextmenu', function (e) { e.preventDefault(); }); // onMouseDown: function (e) { // if (e.button !== 0) return; // let rect = treeMainBtn.getBoundingClientRect(); // offsetX = e.clientX - rect.left; // offsetY = e.clientY - rect.top; // isDragging = true; // window.addEventListener("mousemove", ButtonOperations.onMouseMove); // window.addEventListener("mouseup", ButtonOperations.onMouseUp); // }, function moveContentDiv(e) { if (isRightMouseDown || isLeftMouseDown) { ButtonOperations.hideMenu(); let top = e.clientY - offsetY; let left = e.clientX - offsetX; let maxWidth = window.innerWidth; let maxHeight = window.innerHeight; let elementWidth = contentDiv.offsetWidth; let elementHeight = contentDiv.offsetHeight; if (left < 0) { left = 0; } else if (left > maxWidth - elementWidth) { left = maxWidth - elementWidth; } if (top < 0) { top = 0; } else if (top > maxHeight - elementHeight) { top = maxHeight - elementHeight; } contentDiv.style.left = left + "px"; contentDiv.style.top = top + "px"; contentDiv.style.right = "auto"; contentDiv.style.bottom = "auto"; document.body.style.cursor = isRightMouseDown ? 'move' : 'grabbing'; talkingPerson.style.cursor = 'grabbing'; ContentKit.positionCommentFormRelativeToContentDiv(); } } contentDiv.addEventListener('mousemove', ContentKit.handleContentDivMouseMove); contentDiv.addEventListener('mousedown', ContentKit.handleContentDivMouseDown); contentDiv.onmouseleave = function () { contentDiv.style.cursor = 'null'; }; }, handleContentDivMouseMove: function (e) { var borderWidth = 8; var oBoxW = contentDiv.offsetWidth - borderWidth; var oBoxH = contentDiv.offsetHeight - borderWidth; var x = e.clientX - contentDiv.getBoundingClientRect().left; var y = e.clientY - contentDiv.getBoundingClientRect().top; contentDiv.style.cursor = ''; if (x < borderWidth) { contentDiv.style.cursor = 'w-resize'; } else if (x > oBoxW) { contentDiv.style.cursor = 'e-resize'; } if (y < borderWidth) { contentDiv.style.cursor = 'n-resize'; } else if (y > oBoxH) { contentDiv.style.cursor = 's-resize'; } if (x < borderWidth && y < borderWidth) { contentDiv.style.cursor = 'nw-resize'; } else if (x > oBoxW && y < borderWidth) { contentDiv.style.cursor = 'ne-resize'; } else if (x < borderWidth && y > oBoxH) { contentDiv.style.cursor = 'sw-resize'; } else if (x > oBoxW && y > oBoxH) { contentDiv.style.cursor = 'se-resize'; } }, handleContentDivMouseDown: function (e) { var borderWidth = 8; e = e || event; var d = null; var oBoxL = contentDiv.offsetLeft; var oBoxT = contentDiv.offsetTop; var oBoxW = contentDiv.offsetWidth - borderWidth; var oBoxH = contentDiv.offsetHeight - borderWidth; var initialWidth = contentDiv.offsetWidth; var initialHeight = contentDiv.offsetHeight; var x = e.clientX - oBoxL; var y = e.clientY - oBoxT; var directions = { top: y < borderWidth, bottom: y > oBoxH, left: x < borderWidth, right: x > oBoxW }; var corners = [ {corner: 'LT', conditions: ['left', 'top']}, {corner: 'LB', conditions: ['left', 'bottom']}, {corner: 'RT', conditions: ['right', 'top']}, {corner: 'RB', conditions: ['right', 'bottom']} ]; var d = Object.keys(directions).find(key => directions[key]) || null; corners.forEach(corner => { if (corner.conditions.every(condition => directions[condition])) { d = corner.corner; } }); if (!d) { return; } var startX = e.clientX; var startY = e.clientY; function handleMouseMove(e) { e = e || event; var dx = e.clientX - startX; var dy = e.clientY - startY; const cursors = { 'left': 'ew-resize', 'right': 'ew-resize', 'top': 'ns-resize', 'bottom': 'ns-resize', 'LB': 'nesw-resize', 'LT': 'nwse-resize', 'RB': 'nwse-resize', 'RT': 'nesw-resize' }; const MIN_WIDTH = 400; const MIN_HEIGHT = 200; function updateStyle(d, dx, dy) { let newWidth, newHeight; switch (d) { case 'left': case 'LB': case 'LT': newWidth = initialWidth - dx; if (d !== 'left') { newHeight = d === 'LB' ? initialHeight + dy : initialHeight - dy; } break; case 'right': case 'RB': case 'RT': newWidth = initialWidth + dx; if (d !== 'right') { newHeight = d === 'RB' ? initialHeight + dy : initialHeight - dy; } break; case 'top': case 'bottom': newHeight = d === 'top' ? initialHeight - dy : initialHeight + dy; break; } if (newWidth >= MIN_WIDTH) { contentDiv.style.width = newWidth + 'px'; if (['left', 'LB', 'LT'].includes(d)) { contentDiv.style.left = (oBoxL + dx) + 'px'; } } if (newHeight >= MIN_HEIGHT) { contentDiv.style.height = newHeight + 'px'; selectedNodeContent.style.height = (newHeight - 60) + 'px'; if (['top', 'LT', 'RT'].includes(d)) { contentDiv.style.top = (oBoxT + dy) + 'px'; } } //log("contentDiv:",contentDiv); let imagesBtns = contentDiv.querySelectorAll('.m-1'); //log("images:",images); let contentWidth = contentDiv.offsetWidth; imagesBtns.forEach(btn => { btn.style.width = `${contentWidth / 2 - 60}px`; btn.style.height = `${contentWidth / 2 - 60}px`; }); document.body.style.cursor = cursors[d]; } switch (d) { case 'left': case 'right': case 'top': case 'bottom': case 'LB': case 'LT': case 'RB': case 'RT': updateStyle(d, dx, dy); break; } if (commentForm.style.display === 'block') { ContentKit.positionCommentFormRelativeToContentDiv(); } return false; } function handleMouseUp() { log("mouseup!"); document.body.style.cursor = ''; contentDiv.style.cursor = ''; document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); } document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); if (e.preventDefault) { e.preventDefault(); } }, copyToClipboard: function (text) { const textArea = document.createElement("textarea"); textArea.value = text; document.body.appendChild(textArea); textArea.select(); document.execCommand("copy"); document.body.removeChild(textArea); }, commentToSave: function (d) { let curUUID = contentDiv.dataset.curDisplay; log("curUUID:", curUUID); if (commentForm.style.display !== 'block') { commentForm.style.display = 'block'; } else { commentForm.style.display = 'none'; return; } ContentKit.positionCommentFormRelativeToContentDiv(); let selectedNode = gNodes.selectAll(".node") .filter(function (d) { return d.data.uuid === curUUID; }); log("commentForm Node:", selectedNode); const existingComment = selectedNode.data.comment; if (existingComment && existingComment !== '') { commentTextarea.value = existingComment; } if (!cancelButton.hasListener) { cancelButton.innerText = translate("userCommentCancel"); cancelButton.addEventListener('click', function () { commentForm.style.display = 'none'; }); cancelButton.hasListener = true; } if (!clearButton.hasListener) { clearButton.innerText = translate("userCommentClear"); clearButton.addEventListener('click', function () { commentTextarea.value = ''; }); clearButton.hasListener = true; } if (!submitButton.hasListener) { log("curUUID:", curUUID); commentForm.style.display = 'block'; submitButton.addEventListener('click', function () { let commentValue = commentTextarea.value; let curUUID = contentDiv.dataset.curDisplay; let selectedNode = gNodes.selectAll(".node") .filter(function (d) { return d.data.uuid === curUUID; }); let selectedNodeData; selectedNodeData = selectedNode.data()[0]; let selectedMapNode; selectedMapNode = conversationData.uuid2nodeMap.get(curUUID); if (commentValue.trim() === '') { if (confirm(translate("emptyCommentPrompt"))) { ButtonOperations.showUserNotification(translate("commentSetToEmpty")); selectedNodeData.data.comment = ''; conversationData.commentMap.delete(selectedMapNode.uuid); log("renew selectedNodeData:", selectedNodeData); //log("selectedNodeData.comment:", selectedNodeData.data.comment); selectedMapNode.comment = ''; const existingComment = ""; if (existingComment && existingComment !== '') { commentTextarea.value = existingComment; } dbOperations.saveConversationsData(conversationData) .then(() => { }) .catch(error => { console.error("Error saving data:", error); }); log("newData", conversationData); commentForm.style.display = 'none'; nodesInAndOutKit.updateSelectedNodeContentDiv(selectedNodeData, selectedNodeContent); } else { ButtonOperations.showUserNotification(translate("enterCommentFirst"), "alert"); } } else { ButtonOperations.showUserNotification(translate("commentSaved")); try { selectedNodeData.data.comment = commentValue; conversationData.commentMap.set(selectedNodeData.data.uuid, commentValue); log("conversationData:", conversationData); log("renew selectedNodeData:", selectedNodeData); log("selectedNodeData.comment:", selectedNodeData.data.comment); //selectedMapNode.comment = commentValue; const existingComment = selectedNode.data.comment; if (existingComment && existingComment !== '') { commentTextarea.value = existingComment; } dbOperations.saveConversationsData(conversationData) .then(() => { nodesInAndOutKit.updateSelectedNodeContentDiv(selectedNodeData, selectedNodeContent); }) .catch(error => { console.error("Error saving data:", error); }); commentForm.style.display = 'none'; } catch (error) { //log("error:", error); } } }); submitButton.hasListener = true; } }, } //___ContentKit___// //---settingsKit---// let settingsDiv = document.createElement('div'); let zoomInButton = document.createElement('div'); let zoomOutButton = document.createElement('div'); let refreshTreeButton = document.createElement('div'); let thumbNailButton = document.createElement('div'); let undoButton = document.createElement('div'); let redoButton = document.createElement('div'); let deleteDiv = document.createElement('div'); let feedbackDiv = document.createElement('div'); let settingsContainer = document.createElement('div'); let rightMiddleContainer = document.createElement('div'); let colorSelectDiv = document.createElement('div'); let languageSelectDiv = document.createElement('div'); let WeChatDiv = document.createElement('div'); let TencentDiv = document.createElement('div'); const WeChatPicDiv = document.createElement('div'); const TencentPicDiv = document.createElement('div'); const feedBackPicDiv = document.createElement('div'); let rightMiddleMenu = document.createElement("div"); let toggleMainBtnMovingAccessbility = document.createElement("div"); let languageContainer = document.createElement('div'); let languageSelect = document.createElement('select'); let scaleIncrementSmall = 0.1; let scaleIncrementLarge = 0.3; let centerX = window.innerWidth / 2; let centerY = window.innerHeight / 3; let undoStack = []; let redoStack = []; let newOperation = {}; let redForEnterable = ` `; let greenForNotEnter = ``; const settingsKit = { init: function () { this.createSettingDivs(); this.addEventListeners(); }, createSettingDivs: function () { settingsDiv.id = "settingsDiv"; settingsDiv.style.fontSize = '24px'; settingsContainer.appendChild(settingsDiv); settingsContainer.style.display = 'none'; rightMiddleContainer.style.display = 'none'; const settingSVG = ''; settingsDiv.innerHTML = settingSVG; zoomInButton.className = "actionDiv"; zoomInButton.id = 'plusDiv'; zoomOutButton.className = "actionDiv"; zoomOutButton.id = 'minusDiv'; zoomInButton.innerText = '➕'; zoomOutButton.innerText = '➖'; settingsContainer.appendChild(zoomInButton); settingsContainer.appendChild(zoomOutButton); thumbNailButton.id = 'thumbNailDiv'; thumbNailButton.className = "actionDiv"; thumbNailButton.innerText = '🌐'; settingsContainer.appendChild(thumbNailButton); refreshTreeButton.id = 'refreshTree'; refreshTreeButton.className = "actionDiv"; refreshTreeButton.innerText = '🔄️'; settingsContainer.appendChild(refreshTreeButton); undoButton.id = 'undoDiv'; undoButton.className = "actionDiv"; undoButton.innerText = '⏪'; settingsContainer.appendChild(undoButton); redoButton.id = 'redoDiv'; redoButton.className = "actionDiv"; redoButton.innerText = '⏩'; settingsContainer.appendChild(redoButton); deleteDiv.id = 'deleteDiv'; deleteDiv.className = "actionDiv"; deleteDiv.innerText = '🗑️'; settingsContainer.appendChild(deleteDiv); feedbackDiv.id = 'feedbackDiv'; feedbackDiv.className = "rightMiddleDiv"; feedbackDiv.innerText = '✉️'; rightMiddleContainer.appendChild(feedbackDiv); rightMiddleMenu.style.display = 'none'; rightMiddleMenu.id = 'rightMiddleMenu'; rightMiddleContainer.appendChild(rightMiddleMenu); colorSelectDiv.id = "colorSelectDiv"; colorSelectDiv.className = "rightMiddleDiv"; colorSelectDiv.innerText = '🎨'; rightMiddleContainer.appendChild(colorSelectDiv); languageSelectDiv.id = "languageSelectDiv"; languageSelectDiv.className = "rightMiddleDiv"; languageSelectDiv.innerText = globalUserLang; languageSelectDiv.style.fontSize = '12px'; rightMiddleContainer.appendChild(languageSelectDiv); WeChatDiv.id = "WeChatDiv"; WeChatDiv.className = "rightMiddleDiv"; WeChatDiv.innerHTML = ` ` ; rightMiddleContainer.appendChild(WeChatDiv); TencentDiv.id = "TencentDiv"; TencentDiv.className = "rightMiddleDiv"; TencentDiv.innerHTML = ` `; rightMiddleContainer.appendChild(TencentDiv); languageContainer.className = "language-container"; languageContainer.style.position = 'fixed'; languageContainer.style.display = 'none'; languageSelect.id = 'languageSelect'; languageSelect.className = "language-dropdown"; let languages = ['ar', 'bg', 'ckb', 'cs', 'da', 'de', 'el', 'en', 'eo', 'es', 'fi', 'fr', 'fr-CA' , 'he', 'hu', 'id', 'it', 'ja', 'ka', 'ko', 'nb', 'nl', 'pl', 'pt-PT', 'pt-BR', 'ro', 'ru', 'sk' , 'sr', 'sv', 'th', 'tr', 'uk', 'ug', 'vi', 'zh-CN', 'zh-TW', 'zh-HK', 'zh-SG'] languages.forEach(lang => { let option = document.createElement('option'); option.value = lang; option.innerText = lang; if (lang === globalUserLang) { option.selected = true; } languageSelect.appendChild(option); }); languageContainer.appendChild(languageSelect); rightMiddleContainer.appendChild(languageContainer); toggleMainBtnMovingAccessbility.id = "toggleMainBtnMovingAccessbility"; toggleMainBtnMovingAccessbility.className = "rightAlwaysShownDiv"; toggleMainBtnMovingAccessbility.addEventListener('click', ButtonOperations.toggleStickyMainBtn) document.body.appendChild(toggleMainBtnMovingAccessbility); feedBackPicDiv.style.display = 'none'; rightMiddleContainer.appendChild(feedBackPicDiv); WeChatPicDiv.style.display = 'none'; rightMiddleContainer.appendChild(WeChatPicDiv); TencentPicDiv.style.display = 'none'; rightMiddleContainer.appendChild(TencentPicDiv); document.body.appendChild(settingsContainer); document.body.appendChild(rightMiddleContainer); }, deletechatgptDB: function () { const DB_NAME = 'ChatTreeDB'; console.log('try to delete:'); var req = indexedDB.deleteDatabase(DB_NAME); req.onsuccess = function () { console.log("Deleted database successfully"); }; req.onerror = function () { console.log("Couldn't delete database"); }; req.onblocked = function () { console.log("Couldn't delete database due to the operation being blocked"); }; }, toggleLanguageSelectShow: function () { if (languageContainer.style.display !== 'none') { languageContainer.style.display = 'none'; return; } languageContainer.style.display = 'flex'; document.addEventListener('click', (e) => { if (!rightMiddleContainer.contains(e.target)) { languageContainer.style.display = 'none'; } }); }, toggleColorSelectShow: function () { if (rightMiddleMenu.style.display === 'flex') { rightMiddleMenu.style.display = 'none'; return; } rightMiddleMenu.style.display = 'flex'; document.addEventListener('click', (e) => { if (!rightMiddleContainer.contains(e.target)) { rightMiddleMenu.style.display = 'none'; } }); function rgbToHex(rgb) { const result = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)$/.exec(rgb); return result ? '#' + parseInt(result[1]).toString(16).padStart(2, '0') + parseInt(result[2]).toString(16).padStart(2, '0') + parseInt(result[3]).toString(16).padStart(2, '0') : null; } //let hexColor = rgbToHex(color); //let opacity = parseFloat(treeMainBtn.style.opacity); rightMiddleMenu.style.color = 'black'; rightMiddleMenu.innerHTML = ` `; let SVGOpacityPicker = document.getElementById('SVGOpacityPicker'); let SVGColorTopPicker = document.getElementById('SVGColorTopPicker'); let SVGColorBottomPicker = document.getElementById('SVGColorBottomPicker'); let chatGPTColorTopPicker = document.getElementById('chatGPTColorTopPicker'); let chatGPTColorBottomPicker = document.getElementById('chatGPTColorBottomPicker'); let userColorTopPicker = document.getElementById('userColorTopPicker'); let userColorBottomPicker = document.getElementById('userColorBottomPicker'); //改变 SVGOpacityPicker.addEventListener('input', settingsKit.colorAndOpacityKit.onSVGOpacityChange); SVGColorTopPicker.addEventListener('input', settingsKit.colorAndOpacityKit.onSVGColorTopChange); SVGColorBottomPicker.addEventListener('input', settingsKit.colorAndOpacityKit.onSVGColorBottomChange); // chatGPTColorPicker.addEventListener('input', settingsKit.colorAndOpacityKit.onChatGPTColorChange); // userColorPicker.addEventListener('input', settingsKit.colorAndOpacityKit.onUserColorChange); //改完 SVGOpacityPicker.addEventListener('change', settingsKit.colorAndOpacityKit.onSVGOpacityChangeDone); SVGColorTopPicker.addEventListener('change', settingsKit.colorAndOpacityKit.onSVGColorTopChangeDone); SVGColorBottomPicker.addEventListener('change', settingsKit.colorAndOpacityKit.onSVGColorBottomChangeDone); chatGPTColorTopPicker.addEventListener('change', settingsKit.colorAndOpacityKit.onChatGPTColorTopPickerChangeDone); chatGPTColorBottomPicker.addEventListener('change', settingsKit.colorAndOpacityKit.onChatGPTColorBottomPickerChangeDone); userColorTopPicker.addEventListener('change', settingsKit.colorAndOpacityKit.onUserColorTopPickerChangeDone); userColorBottomPicker.addEventListener('change', settingsKit.colorAndOpacityKit.onUserColorBottomPickerChangeDone); let mainSvg = document.getElementById('mainSvg'); if (mainSvg) { let currentBackground = mainSvg.style.background; // 获取顶部和底部的颜色 let colorMatches = currentBackground.match(/rgba?\((\d{1,3}, \d{1,3}, \d{1,3})(?:, ([\d\.]+))?\)/g); let topColor = colorMatches && colorMatches[0]; let bottomColor = colorMatches && colorMatches[1]; // 获取 opacity let opacityMatch = topColor.match(/rgba?\(\d{1,3}, \d{1,3}, \d{1,3}, ([\d\.]+)\)/); let opacity = opacityMatch ? parseFloat(opacityMatch[1]) * 100 : 100; // 将 opacity 转换回百分比 log("opacity:", opacity); log("color:", rgbToHex(topColor)); SVGOpacityPicker.value = opacity; SVGColorTopPicker.value = rgbToHex(topColor); SVGColorBottomPicker.value = rgbToHex(bottomColor); chatGPTColorTopPicker.value = states.colorSetting.customChatGPT.top; chatGPTColorBottomPicker.value = states.colorSetting.customChatGPT.bottom; userColorTopPicker.value = states.colorSetting.customUser.top; userColorBottomPicker.value = states.colorSetting.customUser.bottom; } }, colorAndOpacityKit: { onSVGOpacityChange: function (e) { const opacity = e.target.value / 100; let mainSvg = document.getElementById('mainSvg'); if (mainSvg) { let currentBackground = mainSvg.style.background; // 使用正则表达式替换顶部和底部的opacity let newBackground = currentBackground.replace( /rgba\((\d{1,3}, \d{1,3}, \d{1,3}), [\d\.]+\)/g, `rgba($1, ${opacity})` ); mainSvg.style.background = newBackground; return newBackground; } return DEFAULT_MAINSVG_BACKGROUND; }, hexToRgb: function (hex) { var bigint = parseInt(hex.substring(1), 16); var r = (bigint >> 16) & 255; var g = (bigint >> 8) & 255; var b = bigint & 255; return r + "," + g + "," + b; }, onSVGColorTopChange: function (e) { const color = e.target.value; let mainSvg = document.getElementById('mainSvg'); if (mainSvg) { let currentBackground = mainSvg.style.background; // 使用正则表达式获取当前的opacity let opacityMatch = currentBackground.match(/rgba\(\d{1,3}, \d{1,3}, \d{1,3}, ([\d\.]+)\)/); let opacity = opacityMatch ? opacityMatch[1] : 1; // 默认值为1，如果没有匹配到opacity // 使用正则表达式替换顶部的颜色，同时保留原有的opacity let newBackground = currentBackground.replace( /linear-gradient\(to top, rgba\(\d{1,3}, \d{1,3}, \d{1,3}, [\d\.]+\) 0%/, `linear-gradient(to top, rgba(${settingsKit.colorAndOpacityKit.hexToRgb(color)}, ${opacity}) 0%` ); mainSvg.style.background = newBackground; return newBackground; } return DEFAULT_MAINSVG_BACKGROUND; }, onSVGColorBottomChange: function (e) { const color = e.target.value; let mainSvg = document.getElementById('mainSvg'); if (mainSvg) { let currentBackground = mainSvg.style.background; // 使用正则表达式获取当前的opacity let opacityMatch = currentBackground.match(/rgba\(\d{1,3}, \d{1,3}, \d{1,3}, ([\d\.]+)\) 100%/); let opacity = opacityMatch ? opacityMatch[1] : 1; // 默认值为1，如果没有匹配到opacity // 使用正则表达式替换底部的颜色，同时保留原有的opacity let newBackground = currentBackground.replace( /rgba\(\d{1,3}, \d{1,3}, \d{1,3}, [\d\.]+\) 100%/, `rgba(${settingsKit.colorAndOpacityKit.hexToRgb(color)}, ${opacity}) 100%` ); mainSvg.style.background = newBackground; return newBackground; } return DEFAULT_MAINSVG_BACKGROUND; }, onSVGOpacityChangeDone: function (e) { let newBackground = settingsKit.colorAndOpacityKit.onSVGOpacityChange(e); const newSettings = {id: 'mainSVG', background: newBackground}; dbOperations.updateUserSettings(newSettings).then(() => { ButtonOperations.showUserNotification(translate("successSavingChanges")); }).catch(error => { console.error("Error saving Change:", error); }); }, onSVGColorTopChangeDone: function (e) { let newBackground = settingsKit.colorAndOpacityKit.onSVGColorTopChange(e); const newSettings = {id: 'mainSVG', background: newBackground}; dbOperations.updateUserSettings(newSettings).then(() => { ButtonOperations.showUserNotification(translate("successSavingChanges")); }).catch(error => { console.error("Error saving Change:", error); }); }, onSVGColorBottomChangeDone: function (e) { let newBackground = settingsKit.colorAndOpacityKit.onSVGColorBottomChange(e); const newSettings = {id: 'mainSVG', background: newBackground}; dbOperations.updateUserSettings(newSettings).then(() => { ButtonOperations.showUserNotification(translate("successSavingChanges")); }).catch(error => { console.error("Error saving Change:", error); }); }, onChatGPTColorTopPickerChangeDone: function (e) { log("ChangeDone!"); states.colorSetting.customChatGPT.is = true; // 移除现有的渐变 // const existingGradient = defs.querySelector('#CUSTOM_USER_GRADIENT'); const defsNode = defs.node(); const existingGradient = defsNode.querySelector('#CUSTOM_CHATGPT_GRADIENT'); if (existingGradient) { defsNode.removeChild(existingGradient); } states.colorSetting.customChatGPT.top = e.target.value.toString(); initSvgAndGradient.createLinearGradient(defs, "CUSTOM_CHATGPT_GRADIENT", states.colorSetting.customChatGPT.bottom, states.colorSetting.customChatGPT.top); drawMainSVG(); const newSettings = {id: 'chatGPTColor', state: states.colorSetting.customChatGPT}; log("newGPTSetting:", newSettings); dbOperations.updateUserSettings(newSettings).then(() => { ButtonOperations.showUserNotification(translate("successSavingChanges")); }).catch(error => { console.error("Error saving Change:", error); }); }, onChatGPTColorBottomPickerChangeDone: function (e) { log("ChangeDone!"); states.colorSetting.customChatGPT.is = true; // 移除现有的渐变 const defsNode = defs.node(); const existingGradient = defsNode.querySelector('#CUSTOM_CHATGPT_GRADIENT'); if (existingGradient) { defsNode.removeChild(existingGradient); } states.colorSetting.customChatGPT.bottom = e.target.value.toString(); initSvgAndGradient.createLinearGradient(defs, "CUSTOM_CHATGPT_GRADIENT", states.colorSetting.customChatGPT.bottom, states.colorSetting.customChatGPT.top); drawMainSVG(); const newSettings = {id: 'chatGPTColor', state: states.colorSetting.customChatGPT}; log("newGPTSetting:", newSettings); dbOperations.updateUserSettings(newSettings).then(() => { ButtonOperations.showUserNotification(translate("successSavingChanges")); }).catch(error => { console.error("Error saving Change:", error); }); }, onUserColorTopPickerChangeDone: function (e) { log("ChangeDone!"); states.colorSetting.customUser.is = true; // 移除现有的渐变 const defsNode = defs.node(); const existingGradient = defsNode.querySelector('#CUSTOM_USER_GRADIENT'); if (existingGradient) { defsNode.removeChild(existingGradient); } states.colorSetting.customUser.top = e.target.value.toString(); initSvgAndGradient.createLinearGradient(defs, "CUSTOM_USER_GRADIENT", states.colorSetting.customUser.bottom, states.colorSetting.customUser.top); drawMainSVG(); const newSettings = {id: 'userColor', state: states.colorSetting.customUser}; log("newUserSetting:", newSettings); dbOperations.updateUserSettings(newSettings).then(() => { ButtonOperations.showUserNotification(translate("successSavingChanges")); }).catch(error => { console.error("Error saving Change:", error); }); }, onUserColorBottomPickerChangeDone: function (e) { log("ChangeDone!"); states.colorSetting.customUser.is = true; // 移除现有的渐变 const defsNode = defs.node(); const existingGradient = defsNode.querySelector('#CUSTOM_USER_GRADIENT'); if (existingGradient) { defsNode.removeChild(existingGradient); } states.colorSetting.customUser.bottom = e.target.value.toString(); initSvgAndGradient.createLinearGradient(defs, "CUSTOM_USER_GRADIENT", states.colorSetting.customUser.bottom, states.colorSetting.customUser.top); drawMainSVG(); const newSettings = {id: 'userColor', state: states.colorSetting.customUser}; log("newUserSetting:", newSettings); dbOperations.updateUserSettings(newSettings).then(() => { ButtonOperations.showUserNotification(translate("successSavingChanges")); }).catch(error => { console.error("Error saving Change:", error); }); } }, addEventListeners: function () { languageSelectDiv.addEventListener('click', settingsKit.toggleLanguageSelectShow); colorSelectDiv.addEventListener('click', settingsKit.toggleColorSelectShow); feedbackDiv.addEventListener('click', () => { // 检测用户的语言设置 if (globalUserLang.startsWith('zh')) { window.open('https://wj.qq.com/s2/13235492/27ec', '_blank'); } else { window.open('https://docs.google.com/forms/d/e/1FAIpQLSetbHqiS1GBM6bG0QaaKy9cN31jKXK76BcYCW8_wkRNH7I5kQ/viewform', '_blank'); } }); // 全局保存所有的PicDivs let allPicDivs = []; function handleMouseEvents(mainDiv, picDiv) { let disappearTimeOut; // 当一个PicDiv被展示时，隐藏所有其他的PicDivs function hideOtherPicDivs(currentPicDiv) { for (let div of allPicDivs) { if (div !== currentPicDiv) { div.style.display = 'none'; } } } mainDiv.addEventListener('mouseenter', function (e) { log(mainDiv.id + " mouseover"); clearTimeout(disappearTimeOut); hideOtherPicDivs(picDiv); // 隐藏其他PicDivs let elements = [mainDiv, picDiv]; elements.forEach(element => { element.style.display = 'flex'; }); }); picDiv.addEventListener('mouseenter', function (e) { log(picDiv.id + " mouseover"); clearTimeout(disappearTimeOut); hideOtherPicDivs(picDiv); // 隐藏其他PicDivs picDiv.style.display = 'block'; }); mainDiv.addEventListener('mouseleave', function () { log(mainDiv.id + " mouseleave"); disappearTimeOut = setTimeout(() => { picDiv.style.display = 'none'; }, 400); }); picDiv.addEventListener('mouseleave', function (e) { log(picDiv.id + " mouseleave"); disappearTimeOut = setTimeout(() => { picDiv.style.display = 'none'; }, 400); }); // 将当前的PicDiv加入到集中管理的数组中 allPicDivs.push(picDiv); } handleMouseEvents(feedbackDiv, feedBackPicDiv); handleMouseEvents(WeChatDiv, WeChatPicDiv); handleMouseEvents(TencentDiv, TencentPicDiv); // let feedbackTimeOut; // feedbackDiv.addEventListener('mouseenter', function (e) { // log("feedbackDiv mouseover"); // clearTimeout(feedbackTimeOut); // let elements = [feedbackDiv, feedBackPicDiv]; // elements.forEach(element => { // element.style.display = 'flex'; // }); // }); // feedBackPicDiv.addEventListener('mouseenter', function (e) { // log("feedBackPicDiv mouseover"); // clearTimeout(feedbackTimeOut); // feedBackPicDiv.style.display = 'block'; // }); // feedbackDiv.addEventListener('mouseleave', function () { // log("feedbackDiv mouseleave"); // feedbackTimeOut = setTimeout(() => { // feedBackPicDiv.style.display = 'none'; // }, 400); // }); // feedBackPicDiv.addEventListener('mouseleave', function (e) { // log("feedBackPicDiv mouseleave"); // feedbackTimeOut = setTimeout(() => { // feedBackPicDiv.style.display = 'none'; // }, 400); // }); settingsDiv.addEventListener('click', function (e) { log("settingsContainer click"); let elements = document.querySelectorAll('.actionDiv'); if (deleteDiv.style.display !== 'flex') { elements.forEach(element => { element.style.display = 'flex'; }); } else { elements.forEach(element => { element.style.display = 'none'; }); } }); zoomInButton.addEventListener('click', this.zoomIn); zoomOutButton.addEventListener('click', this.zoomOut); thumbNailButton.addEventListener('click', this.toggleThumbnail); refreshTreeButton.addEventListener('click', this.refreshTree); undoButton.addEventListener('click', this.undo); redoButton.addEventListener('click', this.redo); deleteDiv.addEventListener('click', function () { settingsKit.handleTwoTypesOfDeleteConversationData(null, false); }); }, handleTwoTypesOfDeleteConversationData: async function (operatingLink, IsfromPanel) { if (!operatingLink) { if (states.treeUpdate.isDOMOperating || (!states.url.isForLiveValidURL && !states.url.isForDeletedValidURL) || conversationData.url === null) { return; } } let operatingURL; if (operatingLink === null && IsfromPanel === false) { operatingURL = conversationData.url; } else if (operatingLink && IsfromPanel === true) { operatingURL = operatingLink; } //log("going to confirm delete"); if (confirm(translate("confirmDeleteLinkData").replace('{item}', operatingURL))) { try { //await dbOperations.deleteConversationData(operatingURL); dbOperations.deleteConversationData(operatingURL) .then(() => dbOperations.initConversationData()) .then(information => { log("after_init_conversationData:", chatHistory); controlPanelKit.updateCategorySelect(); log("before_filteredConversations:", filteredConversations); filteredConversations = filteredConversations.filter(aconv => { return !(aconv.link === operatingURL) }); controlPanelKit.renderConversations(filteredConversations); log("after_filteredConversations:", filteredConversations); }) .catch(error => { console.error(error); }); log('Data deleted successfully'); ButtonOperations.showUserNotification(translate("conversationDataDeleted"), 'alert'); if (IsfromPanel) { return; } try { dbOperations.loadConversationsData(operatingURL).then(loadeddata => { log("Loaded data for URL:", loadeddata); conversationData = loadeddata; root = d3.hierarchy(conversationData.rootNode); log("reNewedRoot:", root); const widthPerNode = 30; const heightPerNode = 30; treeLayout = d3.tree().nodeSize([widthPerNode, heightPerNode]); treeLayout(root); settingsKit.refreshTree(); //drawMainSVG(); }).catch(error => { console.error("Error loading data:", error); }); } catch (loadError) { console.error('Error loading data:', loadError); } } catch (deleteError) { console.error('Error deleting data:', deleteError); } } else { log('数据未被删除!'); } }, zoomIn: function () { let currentScale = d3.zoomTransform(svg.node()).k; let increment = currentScale < 1 ? scaleIncrementSmall : scaleIncrementLarge; let newScale = currentScale + increment; if (newScale > 10) newScale = 10; svg.transition().duration(250) .call(zoom.scaleTo, newScale, [centerX, centerY]); }, zoomOut: function () { let currentScale = d3.zoomTransform(svg.node()).k; let decrement = currentScale <= 1 ? scaleIncrementSmall : scaleIncrementLarge; let newScale = currentScale - decrement; if (newScale < 0.1) newScale = 0.1; svg.transition().duration(250) .call(zoom.scaleTo, newScale, [centerX, centerY]); }, toggleThumbnail: function () { let currentVisibility = svgThumbnail.attr('visibility'); svgThumbnail.attr('visibility', currentVisibility === 'hidden' ? 'visible' : 'hidden'); log("currentVisibility:", currentVisibility); }, refreshTree: function () { undoStack = []; redoStack = []; svg.call(zoom.transform, d3.zoomIdentity.translate(0, 0).scale("1")); treeLayout(root); const yOffset = window.innerHeight / 5 - root.x; const xOffset = window.innerWidth / 5 - root.x; root.each(d => { d.y += yOffset; }); root.each(d => { d.x += xOffset; }); drawMainSVG(); }, simulateMove: function (action, doType) { let nodeData; d3.selectAll("g.node") .filter(function (d) { return d.data.uuid === action.uuid; }) .each(function (d) { nodeData = d; }); if (!nodeData) { console.error("Node not found for UUID:", action.uuid); return; } let dx; let dy; if (doType === 'undo') { dx = action.startX - action.endX; dy = action.startY - action.endY; } else if (doType === 'redo') { dx = action.endX - action.startX; dy = action.endY - action.startY; } nodeData.x += dx; nodeData.y += dy; if (nodeData.children) { nodeData.children.forEach(child => { settingsKit.simulateMove({ uuid: child.data.uuid, startX: child.x, startY: child.y, endX: child.x - dx, endY: child.y - dy }, "undo"); }); } }, performAction: function (action) { undoStack.push(action); redoStack = []; }, redo: function () { if (redoStack.length <= 0) return; let action = redoStack.pop(); log("action:", action); if (action.type === 'drag') { settingsKit.simulateMove(action, "redo"); drawMainSVG(); } undoStack.push(action); }, undo: function () { if (undoStack.length <= 0) return; let action = undoStack.pop(); log("action:", action); if (action.type === 'drag') { settingsKit.simulateMove(action, "undo"); drawMainSVG(); } redoStack.push(action); }, }; let searchContainer = document.createElement('div'); let searchIcon = document.createElement('div'); let searchBox = document.createElement('input'); let searchBtn = document.createElement('button'); let searchResultsCount = document.createElement('div'); let searchHistory = document.createElement('div'); let suggestionsContainer = document.createElement('div'); let matchedUUIDs = new Set(); let matchedArray = []; let currentTreeBreathingIndex = -1; const searchKit = { isSearchKitExpanded: false, stopBreathing: false, init: function () { settingsKit.refreshTree(); searchContainer.id = 'search-container'; searchContainer.style.display = 'none'; searchIcon.id = 'search-icon'; searchIcon.innerText = '🔍'; searchIcon.onclick = searchKit.toggleSearch; searchContainer.appendChild(searchIcon); searchBox.type = 'text'; searchBox.id = 'search-box'; suggestionsContainer.id = 'suggestions-container'; suggestionsContainer.className = 'suggestions-container'; searchContainer.appendChild(suggestionsContainer); searchBox.setAttribute("placeholder", translate("searchPlaceholder")); searchBox.addEventListener('keydown', function (event) { if (event.key === 'Enter' || event.keyCode === 13) { event.preventDefault(); event.stopPropagation(); searchKit.executeSearch(); } }); function updateSuggestions(suggestions) { suggestionsContainer.style.display = 'block'; suggestionsContainer.innerHTML = ''; suggestions.forEach(suggestion => { const item = document.createElement('div'); item.className = 'suggestion-item'; item.textContent = suggestion; const closeButton = document.createElement('span'); closeButton.textContent = 'x'; closeButton.className = 'close-button'; closeButton.onclick = (e) => { e.stopPropagation(); const index = suggestions.indexOf(suggestion); if (index > -1) { suggestions.splice(index, 1); dbOperations.addSearchRecord(searchHistoryRecord) .then(() => dbOperations.getSearchHistory()) .then(records => { log('Got search history:', records); }) .catch(error => console.error(error)); } updateSuggestions(suggestions); }; item.appendChild(closeButton); item.onclick = () => { searchBox.value = suggestion; clearSuggestions(); }; item.addEventListener('contextmenu', function (e) { e.preventDefault(); const index = suggestions.indexOf(suggestion); if (index > -1) { suggestions.splice(index, 1); } updateSuggestions(suggestions); dbOperations.addSearchRecord(searchHistoryRecord) .then(() => dbOperations.getSearchHistory()) .then(records => { log('Got search history:', records); }) .catch(error => console.error(error)); }); suggestionsContainer.appendChild(item); }); } function clearSuggestions() { suggestionsContainer.innerHTML = ''; suggestionsContainer.style.display = 'none'; } document.addEventListener('click', function (e) { if (!searchContainer.contains(e.target)) { clearSuggestions(); } }); searchBox.addEventListener('input', function () { const query = this.value.trim(); if (query.length > 0) { const suggestions = searchHistoryRecord.filter(existing => existing.includes(query)); updateSuggestions(suggestions); } else { clearSuggestions(); } }); searchContainer.appendChild(searchBox); searchBtn.id = 'search-btn'; searchBtn.innerText = translate("searchButton"); searchBtn.onclick = searchKit.executeSearch; searchBtn.style.border = 'none'; searchBtn.style.borderRadius = '3px'; searchBtn.style.height = '32px'; searchBtn.style.cursor = 'pointer'; searchBtn.style.position = 'relative'; searchBtn.style.top = '4px'; searchBtn.style.backgroundColor = 'rgb(241, 241, 241)'; searchContainer.appendChild(searchBtn); searchResultsCount.id = 'search-results-count'; searchResultsCount.style.borderRadius = '3px'; searchResultsCount.style.background = '#f1f1f1'; searchResultsCount.style.height = '32px'; searchResultsCount.style.position = 'relative'; searchResultsCount.style.fontSize = '10px'; searchResultsCount.style.top = '4px'; searchResultsCount.style.left = '5px'; searchResultsCount.style.display = 'none'; const optionsButtons = document.createElement('div'); optionsButtons.style.width = '490px'; optionsButtons.style.position = 'absolute'; optionsButtons.style.top = '250px'; optionsButtons.style.left = '4px'; optionsButtons.style.display = 'flex'; optionsButtons.style.flexDirection = 'column'; optionsButtons.style.alignItems = 'center'; optionsButtons.style.background = 'none'; optionsButtons.id = "optionsButtons"; optionsButtons.style.display = 'none'; optionsButtons.style.marginTop = '10px'; const labelsDiv = document.createElement('div'); labelsDiv.style.display = 'flex'; labelsDiv.style.justifyContent = 'center'; labelsDiv.style.width = '100%'; labelsDiv.style.marginBottom = '20px'; const buttonsDiv = document.createElement('div'); buttonsDiv.style.display = 'flex'; buttonsDiv.style.justifyContent = 'center'; buttonsDiv.style.width = '100%'; const options = [translate("searchInContent"), translate("searchInComments"), translate("searchInBoth")]; options.forEach(option => { const label = document.createElement('label'); label.style.marginRight = '10px'; label.style.backgroundColor = 'rgb(221, 221, 221)'; label.style.padding = '5px'; label.style.borderRadius = '5px'; const radio = document.createElement('input'); radio.type = 'radio'; radio.name = 'searchOption'; radio.id = option.toLowerCase(); radio.value = option.toLowerCase(); if (option === translate("searchInContent")) radio.checked = true; label.appendChild(radio); label.appendChild(document.createTextNode(option)); labelsDiv.appendChild(label); }); optionsButtons.appendChild(labelsDiv); const navButtons = [translate("goToPrevious"), translate("goToNext")]; navButtons.forEach(btnText => { const btn = document.createElement('button'); btn.innerText = btnText; btn.style.marginRight = '10px'; btn.style.backgroundColor = 'rgb(221, 221, 221)'; btn.style.padding = '5px'; btn.style.borderRadius = '5px'; if (btnText === translate("goToNext")) { btn.addEventListener('click', function () { searchKit.goToNextMatch(); }); } if (btnText === translate("goToPrevious")) { btn.addEventListener('click', function () { searchKit.gpToPreviousMatch(); }); } buttonsDiv.appendChild(btn); }); optionsButtons.appendChild(buttonsDiv); searchContainer.appendChild(searchResultsCount); searchHistory.id = 'search-history'; searchContainer.appendChild(searchHistory); searchContainer.appendChild(optionsButtons); document.body.appendChild(searchContainer); }, toggleSearch: function () { const searchBox = document.getElementById('search-box'); const searchHistory = document.getElementById('search-history'); const searchIcon = document.getElementById('search-icon'); if (!this.isSearchKitExpanded) { searchContainer.style.display = 'flex'; searchContainer.style.width = '600px'; searchHistory.style.display = 'block'; searchBox.style.display = 'block'; anime({ targets: searchBox, width: '300px', duration: 500, easing: 'easeInOutQuart', opacity: 1, background: '#f1f1f1', complete: function () { searchBox.style.pointerEvents = 'auto'; searchBtn.style.display = 'block'; document.getElementById('search-history').style.display = 'flex'; searchResultsCount.style.display = 'block'; let opbtn = document.getElementById("optionsButtons"); opbtn.style.display = 'block'; searchKit.displaySearchHistory(); } }); anime({ targets: searchHistory, width: '500px', height: '300px', opacity: 1, duration: 500, easing: 'easeInOutQuart', background: '#f1f1f1', }); searchIcon.innerHTML = '❌'; this.isSearchKitExpanded = true; log("this.isSearchKitExpanded:", this.isSearchKitExpanded); } else { searchContainer.style.width = '50px'; suggestionsContainer.style.display = 'none'; gNodes.selectAll(".node") .select("circle") .interrupt() .attr("opacity", 1); gNodes.selectAll(".node") .each(function (d) { if (matchedUUIDs.has(d.data.uuid)) { d3.select(this) .select("text") .style("display", "none"); } }); let opbtn = document.getElementById("optionsButtons"); opbtn.style.display = 'none'; searchResultsCount.style.display = 'none'; anime({ targets: searchBox, width: '0px', duration: 500, easing: 'easeInOutQuart', opacity: 0, background: 'transparent', begin: function () { searchBtn.style.display = 'none'; }, complete: function () { searchHistory.style.display = 'none'; searchBox.style.display = 'none'; } }); anime({ targets: searchHistory, width: '20px', height: '0px', opacity: 0, duration: 500, easing: 'easeInOutQuart', background: '#f1f1f1', }); searchIcon.innerHTML = '🔍'; this.isSearchKitExpanded = false; log("this.isSearchKitExpanded:", this.isSearchKitExpanded); } }, escapeRegExp: function (string) { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); }, executeSearch: function () { gNodes.selectAll(".node") .select("circle") .interrupt() .attr("opacity", 1); gNodes.selectAll(".node") .each(function (d) { if (matchedUUIDs.has(d.data.uuid)) { d3.select(this) .select("text") .style("display", "none"); } }); let rawQuery = document.getElementById('search-box').value; let trimmedQuery = rawQuery.trim(); if (trimmedQuery !== null && trimmedQuery !== '' && trimmedQuery !== ' ') { ButtonOperations.showUserNotification(translate("executeSearchWithQuery").replace(`{item}`, rawQuery)); searchKit.addSearchHistory(rawQuery); searchKit.displaySearchHistory(); const searchOptions = document.getElementsByName("searchOption"); let selectedOption = ""; let selectedNum = 0; for (const option of searchOptions) { if (option.checked) { selectedOption = option.value; break; } selectedNum++; } selectedOption = selectedNum === 0 ? translate("searchInContent") : selectedNum === 1 ? translate("searchInComments") : translate("searchInBoth"); let escapedQuery = searchKit.escapeRegExp(rawQuery); matchedArray = searchKit.bfsSearch(conversationData.rootNode, escapedQuery, selectedOption); matchedUUIDs = new Set(matchedArray.map(d => d.uuid)); log('results:', matchedArray); let matches = matchedArray.length; document.getElementById('search-results-count').innerText = translate("numberOfMatches").replace('{matches}', matches); dbOperations.addSearchRecord(searchHistoryRecord) .then(() => dbOperations.getSearchHistory()) .then(records => { log('Got search history:', records); }) .catch(error => console.error(error)); gNodes.selectAll(".node") .each(function (d) { if (matchedUUIDs.has(d.data.uuid)) { d3.select(this) .select("text") .style("display", "block"); } }); } else { alert("Please Enter Before Searching!"); } }, bfsSearch: function (tree, searchTerm, searchOption) { log("searchTerm:", searchTerm); log("in bfsSearch"); //log("searchOption:",searchOption, "translate:",translate("searchInContent"),"\n",translate("searchInComments"),"\n",translate("searchInBoth")); let queue = [tree]; let results = []; while (queue.length > 0) { let current = queue.shift(); if (current.uuid === conversationRootNode.uuid) { queue.push(...current.children); continue; } //log("In BFSSearch, current_content:",current.content); if (searchOption === translate("searchInContent") && current.content) { log("搜索内容"); for (let i = 0; i < current.content.length; i++) { for (let j = 0; j < current.content[i].parts.length; j++) { if (!current.content[i].parts[j].content_type && current.content[i].parts[j].match(new RegExp(searchTerm, 'i'))) results.push(current); } } } else if (searchOption === translate("searchInComments")) { log("搜索评论"); if (conversationData.commentMap.get(current.uuid)) results.push(current); } else if (searchOption === translate("searchInBoth") && (current.content)) { log("搜索两者"); for (let i = 0; i < current.content.length; i++) { for (let j = 0; j < current.content[i].parts.length; j++) { if (!current.content[i].parts[j].content_type && current.content[i].parts[j].match(new RegExp(searchTerm, 'i'))) results.push(current); } } if (conversationData.commentMap.get(current.uuid)) results.push(current); } if (current.children) { queue.push(...current.children); } } return results; }, breathe: function (selection) { selection.select("circle") .transition() .duration(100) .attr("opacity", 0) .transition() .duration(100) .attr("opacity", 1) .on("end", function () { if (!this.stopBreathing) { searchKit.breathe(selection); } }); }, goToNextMatch: function () { log("In goToNextMatch"); if (matchedArray.length === 0) return; this.stopBreathing = true; gNodes.selectAll(".node") .select("circle") .interrupt() .attr("opacity", 1); log("matchedArray:", matchedArray); log("before_currentTreeBreathingIndex", currentTreeBreathingIndex); currentTreeBreathingIndex = (currentTreeBreathingIndex + 1) % matchedArray.length; log("after_currentTreeBreathingIndex", currentTreeBreathingIndex); log("matchedArray[currentTreeBreathingIndex]", matchedArray[currentTreeBreathingIndex]); let currentNodeUUID = matchedArray[currentTreeBreathingIndex].uuid; log("NextUUID:", currentNodeUUID); let nextNodeSelection = gNodes.selectAll(".node").filter(d => d.data.uuid === currentNodeUUID); log("nextNodeSelection:", nextNodeSelection); this.stopBreathing = false; searchKit.breathe(nextNodeSelection); searchKit.centerNodeOnScreen(nextNodeSelection); log("Out goToNextMatch"); }, gpToPreviousMatch: function () { if (matchedArray.length === 0) return; log("In goToNextMatch"); this.stopBreathing = true; gNodes.selectAll(".node") .select("circle") .interrupt() .attr("opacity", 1); log("matchedArray:", matchedArray); currentTreeBreathingIndex = (currentTreeBreathingIndex - 1 + matchedArray.length) % matchedArray.length; log("currentTreeBreathingIndex", currentTreeBreathingIndex); log("matchedArray[currentTreeBreathingIndex]", matchedArray[currentTreeBreathingIndex]); let currentNodeUUID = matchedArray[currentTreeBreathingIndex].uuid; log("NextUUID:", currentNodeUUID); let nextNodeSelection = gNodes.selectAll(".node").filter(d => d.data.uuid === currentNodeUUID); log("nextNodeSelection:", nextNodeSelection); this.stopBreathing = false; searchKit.breathe(nextNodeSelection); searchKit.centerNodeOnScreen(nextNodeSelection); log("Out goToNextMatch"); }, centerNodeOnScreen: function (node) { let nodeData = node.datum(); let nodeX = nodeData.x; let nodeY = nodeData.y; let newScale = 2; let horizontalTranslate = (window.innerWidth / 2) - (nodeX * newScale); let verticalTranslate = (window.innerHeight / 3) - (nodeY * newScale); let nodeTransform = d3.zoomIdentity.translate(horizontalTranslate, verticalTranslate).scale(newScale); svg.transition().duration(750).call(zoom.transform, nodeTransform); }, addSearchHistory: function (query) { if (searchHistoryRecord.includes(query)) { let index = searchHistoryRecord.indexOf(query); searchHistoryRecord.splice(index, 1); } searchHistoryRecord.unshift(query); }, displaySearchHistory: function () { let container = document.getElementById('search-history'); container.innerHTML = ''; let displayedCount = 0; searchHistoryRecord.forEach(item => { if (displayedCount >= 20) { return; } displayedCount++; let historyItem = document.createElement('div'); historyItem.className = 'history-item'; let text = document.createElement('div'); text.className = 'history-text'; text.innerText = item; historyItem.appendChild(text); historyItem.onclick = () => { searchBox.value = item; }; historyItem.style.cursor = 'pointer'; let deleteBtn = document.createElement('div'); deleteBtn.className = 'history-delete'; deleteBtn.innerText = 'x'; deleteBtn.onclick = function (e) { e.stopPropagation(); let index = searchHistoryRecord.indexOf(item); searchHistoryRecord.splice(index, 1); searchKit.displaySearchHistory(); dbOperations.addSearchRecord(searchHistoryRecord) .then(() => dbOperations.getSearchHistory()) .then(records => { log('Got search history:', records); }) .catch(error => console.error(error)); }; historyItem.appendChild(deleteBtn); container.appendChild(historyItem); }); }, }; let panelToggleButton;//= document.createElement('button'); // Create the 'managePanel' div let managePanel = document.createElement('div'); let topicSearchContainer = document.createElement('div'); let searchTopicBox = document.createElement('input'); let categoryEditor = document.createElement('div'); let categorySelect = document.createElement('select'); let conversationContainer = document.createElement('div'); let right_Top_togglePanel = document.createElement('div'); let panelHeader = document.createElement('div'); let filteredConversations = []; const controlPanelKit = { init: function () { panelToggleButton = ButtonCreator.createButton({ id: 'panelToggleButtonSVGShow', text: translate("openAdminPanel"), eventListeners: [ {type: 'click', handler: controlPanelKit.toggleHistoryPanel}, ], additionalStyles: { display: 'none', borderRadius: '12px', opacity: '0.9', background: 'linear-gradient(to right, #007BFF, #00C6FF)', color: 'white', padding: '10px 20px', fontWeight: 'bold', boxShadow: '0px 3px 5px rgba(0,0,0,0.2)', }, }); document.body.appendChild(panelToggleButton); managePanel.id = 'managePanel'; managePanel.style.display = 'none'; // Create the 'searchContainer' div topicSearchContainer.id = 'searchContainer'; topicSearchContainer.style.marginTop = '20px'; topicSearchContainer.style.marginLeft = '20px'; // Create the search input box searchTopicBox.type = 'text'; searchTopicBox.id = 'searchTopicBox'; searchTopicBox.setAttribute("placeholder", translate("searchPlaceholder")); // Append the search box to the 'searchContainer' div topicSearchContainer.appendChild(searchTopicBox); // Create the 'categoryEditor' div categoryEditor.id = 'categoryEditor'; categoryEditor.className = 'editor'; // Create the select box for categories categorySelect.id = 'categorySelect'; categorySelect.style.marginTop = '20px'; categorySelect.style.marginLeft = '20px'; // Add options to the select box // dbOperations.initConversationData() // .then(information => { // controlPanelKit.updateCategorySelect(); // }) // .catch(error => console.error(error)); let allCategoriesString = translate("allCategoriesFilter"); let categories = [allCategoriesString]; for (let i = 0; i < chatHistory.length; i++) { let curChat = chatHistory[i]; if (curChat.categories) { for (let j = 0; j < curChat.categories.length; j++) { if (!categories.includes(curChat.categories[j])) categories.push(curChat.categories[j]); } } } categories.forEach(optionText => { let option = document.createElement('option'); option.text = optionText; categorySelect.appendChild(option); }); // Append the select box to the 'categoryEditor' div categoryEditor.appendChild(categorySelect); panelHeader.id = 'panelHeader'; let translatedTitle = translate('conversationTitle'); let translatedOption = translate('actionOptions'); let translatedCategory = translate('conversationCategory'); let translatedTags = translate('conversationTags'); panelHeader.innerHTML = `${language || 'plain text'}${code.trim()} //
${translatedTitle}${translatedCategory}
`; // Create the 'conversationContainer' div conversationContainer.id = 'conversationContainer'; conversationContainer.style.marginTop = '20px'; conversationContainer.style.overflow = 'auto'; conversationContainer.style.maxHeight = '700px'; // Append all child divs to the 'managePanel' div managePanel.appendChild(topicSearchContainer); managePanel.appendChild(categoryEditor); managePanel.appendChild(panelHeader); managePanel.appendChild(conversationContainer); // Append 'managePanel' to the document body or another container element document.body.appendChild(managePanel); right_Top_togglePanel.innerHTML = '×'; right_Top_togglePanel.style.position = 'fixed'; right_Top_togglePanel.style.fontSize = '30px'; right_Top_togglePanel.style.top = '20px'; right_Top_togglePanel.style.right = '20px'; right_Top_togglePanel.style.cursor = 'pointer'; managePanel.appendChild(right_Top_togglePanel); //controlPanelKit.renderConversations(chatHistory); controlPanelKit.addEventListeners(); }, updateCategorySelect: function () { log("inupdateSelect!"); categorySelect.innerHTML = ''; let allCategoriesString = translate("allCategoriesFilter"); let categories = [allCategoriesString]; for (let i = 0; i < chatHistory.length; i++) { let curChat = chatHistory[i]; if (curChat.categories) { for (let j = 0; j < curChat.categories.length; j++) { if (!categories.includes(curChat.categories[j])) categories.push(curChat.categories[j]); } } } categories.forEach(optionText => { let option = document.createElement('option'); option.text = optionText; categorySelect.appendChild(option); }); }, addEventListeners: function () { searchTopicBox.addEventListener("input", controlPanelKit.executeFilter); categorySelect.addEventListener('change', controlPanelKit.executeFilter); right_Top_togglePanel.addEventListener('click', function () { managePanel.style.display = 'none'; if (states.visualization.thumbnailSvg === "visible") { panelToggleButton.style.display = 'block'; } }); }, executeFilter: function () { const selectedCategory = categorySelect.value.toLowerCase(); // 注意转换为小写 const query = searchTopicBox.value.toLowerCase(); filteredConversations = chatHistory.filter(conv => { return conv.topic.toLowerCase().includes(query); }); if (selectedCategory !== translate('allCategoriesFilter').toLowerCase()) { filteredConversations = filteredConversations.filter(conv => { return conv.categories.some(category => category.toLowerCase().includes(selectedCategory)); }); controlPanelKit.renderConversations(filteredConversations); log(`User selected category: ${selectedCategory}, filteredConversations:`, filteredConversations); } else { controlPanelKit.renderConversations(filteredConversations); log(`User selected category: ${selectedCategory}, filteredConversations:`, filteredConversations); } }, toggleHistoryPanel: function () { managePanel.style.display = 'block'; panelToggleButton.style.display = 'none'; }, renderConversations: function (conversations) { log("in_renderConv:", conversations); conversations.sort((a, b) => { // 比较isWholeConversationBookMarked字段 if (a.isWholeConversationBookMarked && !b.isWholeConversationBookMarked) { return -1; // a排在b前面 } if (!a.isWholeConversationBookMarked && b.isWholeConversationBookMarked) { return 1; // b排在a前面 } // 如果isWholeConversationBookMarked字段相同，则比较timestamp字段 if (a.timestamp > b.timestamp) { return -1; // a排在b前面 } if (a.timestamp < b.timestamp) { return 1; // b排在a前面 } return 0; // a和b相等，保持原来的顺序（稳定排序） }); // 现在chatHistory数组已经根据你的规则进行了排序。 //log("in render:"); const conversationContainer = document.getElementById("conversationContainer"); conversationContainer.innerHTML = ""; // Clear existing conversations let conversation_num = 0; conversations.forEach(conv => { conversation_num++; //const safeId = conv.id.replace(/-/g, ''); const safeId = conv.id; const convElem = document.createElement("div"); convElem.classList.add("conversation"); convElem.style.display = "flex"; convElem.style.justifyContent = "space-between"; // Create action buttons container const actionContainer = document.createElement("div"); actionContainer.classList.add("conversation-actions"); // Add topic const topicElem = document.createElement("h3"); topicElem.classList.add("topic"); const topicElem_2 = document.createElement("h3"); topicElem_2.innerText = conversation_num.toString() + ' '; topicElem.innerText = conv.topic; // 创建包含标题和按钮的一个容器 const topicContainer = document.createElement("div"); topicContainer.classList.add('topicContainer'); topicContainer.appendChild(topicElem_2); topicContainer.appendChild(topicElem); // 创建包含修改和删除按钮的一个容器 const optionsContainer = document.createElement("div"); optionsContainer.id = "optionsContainer_" + safeId; optionsContainer.classList.add("optionsContainer"); optionsContainer.innerHTML = conv.isWholeConversationBookMarked === false ? `` : ``; let buttons = optionsContainer.querySelectorAll('button'); for (let i = 0; i < buttons.length; i++) { buttons[i].style.cursor = 'pointer'; } buttons[0].addEventListener('click', function () { let topicElem = convElem.querySelector(".topic"); createTopicInput(conv, topicElem); }) buttons[1].addEventListener('click', function () { log("button1 clicked"); settingsKit.handleTwoTypesOfDeleteConversationData(conv.link, true) }) buttons[2].addEventListener('click', function () { window.open(conv.link, '_blank'); // let templink = document.createElement('a'); // templink.href = conv.link; // templink.target = '_blank'; // document.body.appendChild(templink); // templink.click(); // templink.remove(); }) buttons[3].addEventListener('click', function () { nodesInAndOutKit.copyToClipboard(conv.link); log("link_copied!"); }) buttons[4].addEventListener('click', function () { let seekURL = urlOperations.changeBetweenChattreeWithCAndOneMeansChattreeToC(0, conv.link); window.open(seekURL, '_blank'); log("deleted_information_to_load!"); }) buttons[5].addEventListener('click', function () { return handleBookMarks(conv, buttons[5]); }); async function handleBookMarks(conv, button) { //log("beforeClickIsBookMarked:", JSON.stringify(conv)); //await sleep(1000); const path = button.querySelector('path'); const currentFill = path.getAttribute('fill'); const newFill = currentFill === 'none' ? '#fe1616' : 'none'; path.setAttribute('fill', newFill); let shouldBeBookMarked = currentFill === 'none'; dbOperations.changeWholeConversationBookMarked(conv.link, shouldBeBookMarked); //conv.isWholeConversationBookMarked = currentFill === 'none'; // await sleep(1000); // log("afterClickIsBookMarked:", JSON.stringify(conv)); // await sleep(1000); // log("afterClickChatHistory:", JSON.stringify(chatHistory)); // await sleep(1000); // log("afterClickChatHistory:", JSON.stringify(filteredConversations)); } function createTopicInput(conv, replacedtopicElem) { const input = document.createElement("input"); input.type = "text"; input.value = replacedtopicElem.innerText; input.addEventListener('blur', function () { const value = input.value; if (value.trim()) { const topicElem = document.createElement("h3"); topicElem.innerText = value; conv.topic = value; topicElem.classList.add("topic"); topicContainer.appendChild(topicElem); dbOperations.changeConversationDataTopic(conv.link, value) } else { const topicElem = document.createElement("h3"); topicElem.innerText = conv.topic; topicElem.classList.add("topic"); topicContainer.appendChild(topicElem); } input.remove(); }); topicContainer.replaceChild(input, replacedtopicElem); input.focus(); } // 向 convElem 添加左和右容器 topicContainer.style.overflow = 'hidden'; convElem.appendChild(topicContainer); convElem.appendChild(optionsContainer); let categoriesContainer = document.createElement('div'); categoriesContainer.className = 'categoriesContainer'; categoriesContainer.id = "categoriesContainer_" + safeId; conv.categories.forEach(category => { // Add category const categoryElem = document.createElement("span"); categoryElem.classList.add("category"); categoryElem.innerText = `${category}`; // Add 'x' button for category const catDeleteBtn = document.createElement("span"); catDeleteBtn.innerHTML = "×"; catDeleteBtn.classList.add("delete-icon"); catDeleteBtn.onclick = function () { deleteClassOrTag("category", categoryElem, conv, category) // categoryElem.remove(); // conv.categories = conv.categories.filter(cat => cat !== category); }; categoryElem.appendChild(catDeleteBtn); categoriesContainer.appendChild(categoryElem); }); convElem.appendChild(categoriesContainer); // Add '+' button for adding new chatTreeTag or category const addClassBtn = document.createElement("span"); addClassBtn.innerHTML = "+"; addClassBtn.classList.add("add-icon"); addClassBtn.onclick = function () { createClassOrTagInput(categoriesContainer, "category", addClassBtn, conv); }; categoriesContainer.appendChild(addClassBtn); let tagContainers = document.createElement('div'); tagContainers.className = 'tagContainers'; tagContainers.id = "tagContainers_" + safeId; // Add chatTreeTags conv.chatTreeTags.forEach(chatTreeTag => { const chatTreeTagElem = document.createElement("span"); chatTreeTagElem.classList.add("chatTreeTag"); chatTreeTagElem.innerText = `${chatTreeTag}`; // Add 'x' button for chatTreeTag const chatTreeTagDeleteBtn = document.createElement("span"); chatTreeTagDeleteBtn.innerHTML = "×"; chatTreeTagDeleteBtn.classList.add("delete-icon"); chatTreeTagDeleteBtn.onclick = function () { deleteClassOrTag("chatTreeTag", chatTreeTagElem, conv, chatTreeTag) // chatTreeTagElem.remove(); // conv.chatTreeTags = conv.chatTreeTags.filter(tag => tag !== chatTreeTag); }; chatTreeTagElem.appendChild(chatTreeTagDeleteBtn); tagContainers.appendChild(chatTreeTagElem); }); convElem.appendChild(tagContainers); // Add '+' button for adding new chatTreeTag or category const addChatTreeTagBtn = document.createElement("span"); addChatTreeTagBtn.innerHTML = "+"; addChatTreeTagBtn.classList.add("add-icon"); addChatTreeTagBtn.onclick = function () { createClassOrTagInput(tagContainers, "chatTreeTag", addChatTreeTagBtn, conv); }; tagContainers.appendChild(addChatTreeTagBtn); function deleteClassOrTag(className, deletedTag, conv, value) { let operatingURL = conv.link; if (className === 'chatTreeTag') { dbOperations.addOrDeleteTagOrClassToURL(operatingURL, true, value, false); conv.chatTreeTags = conv.chatTreeTags.filter(tag => tag != value); } else { dbOperations.addOrDeleteTagOrClassToURL(operatingURL, false, value, false); conv.categories = conv.categories.filter(tag => tag != value); } deletedTag.remove(); } function createClassOrTagInput(convElem, className, replacedButton, conv) { // let safeId = convElem.id.split("_")[1]; // let foundObject = chatHistory.find(chat => chat.id === safeId); // // if (foundObject) { // log("Found the object:", foundObject); // } else { // log("Object not found"); // return; // } // log("conv:",conv); let operatingURL = conv.link; const input = document.createElement("input"); input.type = "text"; input.placeholder = `Enter new value`; convElem.replaceChild(input, replacedButton); input.focus(); input.addEventListener('blur', function () { const value = input.value; if (value.trim()) { // 创建新的类别或标签 const newElem = document.createElement("span"); newElem.classList.add(className); // 使用合适的类名 newElem.innerText = value; convElem.insertBefore(newElem, input); const catDeleteBtn = document.createElement("span"); catDeleteBtn.innerHTML = "×"; catDeleteBtn.classList.add("delete-icon"); newElem.appendChild(catDeleteBtn); if (className === 'chatTreeTag') { conv.chatTreeTags.push(value); dbOperations.addOrDeleteTagOrClassToURL(operatingURL, true, value, true); catDeleteBtn.onclick = function () { deleteClassOrTag(className, newElem, conv, value); }; } else { conv.categories.push(value); dbOperations.addOrDeleteTagOrClassToURL(operatingURL, false, value, true); catDeleteBtn.onclick = function () { deleteClassOrTag(className, newElem, conv, value); }; } } let addedBtn; if (className === 'chatTreeTag') { // Add '+' button for adding new chatTreeTag or category addedBtn = document.createElement("span"); addedBtn.innerHTML = "+"; addedBtn.classList.add("add-icon"); addedBtn.onclick = function () { createClassOrTagInput(convElem, "chatTreeTag", addedBtn, conv); } } else { // Add '+' button for adding new chatTreeTag or category addedBtn = document.createElement("span"); addedBtn.innerHTML = "+"; addedBtn.classList.add("add-icon"); addedBtn.onclick = function () { createClassOrTagInput(convElem, "category", addedBtn, conv); }; } if (input.nextSibling) { convElem.insertBefore(addedBtn, input.nextSibling); } else { convElem.appendChild(addedBtn); } input.remove(); }); } conversationContainer.appendChild(convElem); }); }, }; const languageKits = { init: function (e) { log("changeLanguageclick!"); if (!db) { return; } document.getElementById('search-results-count').innerText = ''; if (e) { log("e.target.value:", e.target.value); globalUserLang = e.target.value; currentLangPack = getLang(globalUserLang).langPack; log("currentLangPack:", currentLangPack); languageSelectDiv.innerText = e.target.value; // languageContainer.style.display = 'none'; languageKits.updateUIWithTranslations(); if (e.target.shouldNotSave) { return; } const newSetting = {id: "userLang", globalUserLang: globalUserLang}; dbOperations.updateUserSettings(newSetting).then(() => { ButtonOperations.showUserNotification(translate("successSavingChanges")); }).catch(error => { console.error("Error saving Change:", error); }); } }, updateUIWithTranslations: function () { // 获取optionsButtons元素 const optionsButtonsDiv = document.getElementById("optionsButtons"); controlPanelKit.updateCategorySelect(); if (!optionsButtonsDiv) { console.error("optionsButtonsDiv not found"); return; } // 更新单选按钮标签 const radioLabels = optionsButtonsDiv.querySelectorAll("label"); const optionsTranslated = [translate("searchInContent"), translate("searchInComments"), translate("searchInBoth")]; radioLabels.forEach((label, index) => { if (optionsTranslated[index]) { log("Updating label:", label); // 打印所有子节点以找到正确的文本节点索引 label.childNodes.forEach((child, idx) => { log("Child node at index", idx, ":", child); }); // 获取当前label中的文本节点并更新 const textNode = label.lastChild; // 也许我们可以直接获取最后一个子节点作为文本节点 if (textNode && textNode.nodeType === Node.TEXT_NODE) { textNode.nodeValue = optionsTranslated[index]; } else { console.error("No text node found for label", label); } } }); const navButtonsElems = optionsButtonsDiv.querySelectorAll("button"); const navButtonsTranslated = [translate("goToPrevious"), translate("goToNext")]; navButtonsElems.forEach((button, index) => { if (navButtonsTranslated[index]) { button.innerText = navButtonsTranslated[index]; } }); navPanelButton.textContent = translate("openAdminPanel"); //contentHeader.textContent = translate("nodeDetails"); commentLabel.innerText = translate("enterComment") + ":"; cancelButton.innerText = translate("userCommentCancel"); clearButton.innerText = translate("userCommentClear"); searchBtn.innerText = translate("searchButton"); panelToggleButton.innerText = translate("openAdminPanel"); searchTopicBox.setAttribute("placeholder", translate("searchPlaceholder")); searchBox.setAttribute("placeholder", translate("searchPlaceholder")); { let translatedTitle = translate('conversationTitle'); let translatedOption = translate('actionOptions'); let translatedCategory = translate('conversationCategory'); let translatedTags = translate('conversationTags'); panelHeader.innerHTML = `
${translatedTitle}${translatedCategory}
`; } { if (globalUserLang.startsWith('zh')) { feedBackPicDiv.innerHTML = ``; } else { feedBackPicDiv.innerHTML = `点击参与问卷调查 (腾讯问卷)
`; } } WeChatPicDiv.innerHTML = `Click to take the survey(Google Forms)
` TencentPicDiv.innerHTML = `作者微信
` } } function fetchRawChatDetails() { return new Promise((resolve, reject) => { chatgpt.getAccessToken().then(token => { log("get Token:",token); const xhr = new XMLHttpRequest(); xhr.open('GET', endpoints.openAI.chats, true); // `endpoints` object should be accessible from the original script xhr.setRequestHeader('Content-Type', 'application/json'); xhr.setRequestHeader('Authorization', 'Bearer ' + token); xhr.onload = () => { if (xhr.status !== 200) { reject('Request failed. Cannot retrieve chat details.'); } else { resolve(JSON.parse(xhr.responseText)); } }; xhr.onerror = () => { reject('Request error.'); }; xhr.send(); }); }); } function fetchRawChatMessages(chatId = "") { if (chatId === "") { return; } return new Promise((resolve, reject) => { chatgpt.getAccessToken().then(token => { //token = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6Ik1UaEVOVUpHTkVNMVFURTFgoLYTsrmDFyiz9d6coNcS4YLMpkufWtaNRU13UmtGRVFrRXpSZyJ9.eyJodHRwczovL2FwaS5vcGVuYWkuY29tL3Byb2ZpbGUiOnsiZW1haWwiOiJwdGN5ZGRkbjl6QHByaXZhdGVyZWxheS5hcHBsZWlkLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlfSwiaHR0cHM6Ly9hcGkub3BlbmFpLmNvbS9hdXRoIjp7InBvaWQiOiJvcmctNlZoeUlReGlGQWlPbW1hVXg5WHlETFgoLYTsrmDFyiz9d6coNcS4YLMpkufWtaFNZkU5emhHcndUdEJ1SGFheGszIn0sImlzcyI6Imh0dHBzOi8vYXV0aDAub3BlbmFpLmNvbS8iLCJzdWIiOiJhcHBsZXwwMDAxMjMuNjQ4NjIzMDE5NmZlNDhiM2I4MTFgoLYTsrmDFyiz9d6coNcS4YLMpkufWta6WyJodHRwczovL2FwaS5vcGVuYWkuY29tL3YxIiwiaHR0cHM6Ly9vcGVuYWkub3BlbmFpLmF1dGgwYXBwLmNvbS91c2VyaW5mbyJdLCJpYXQiOjE2OTc4ODYyNTFgoLYTsrmDFyiz9d6coNcS4YLMpkufWtaiVGRKSWNiZTFgoLYTsrmDFyiz9d6coNcS4YLMpkufWtaiLCJzY29wZSI6Im9wZW5pZCBlbWFpbCBwcm9maWxlIG1vZGVsLnJlYWQgbW9kZWwucmVxdWVzdCBvcmdhbml6YXRpb24ucmVhZCBvcmdhbml6YXRpb24ud3JpdGUgb2ZmbGluZV9hY2Nlc3MifQ.KDeLRadnLd9vzMzbrhJC7u65mwQHY0E7Hd3wOTzJpnAN0qLvzKTGA_tDdmglcW4qIJcZddTFU2Hn7YJt1DC3MSXfZNdC1sqKk0Uj9ep-iodiNCmCo9O1V-9JTh0GcW75BmbSOe5L4hAguJYhAhz2xaGs1zfr6gFBXrqdNxjzKiN-mrKtm4hjkWTdWdf-KZC2ZPun81h2k30x2hsBDxIJIwv8PeAYIZKzQJJdAA9V6X1WXQZX1vI79rp3tnIk-WAJgtW-U1F_UgR8bKRivfgUYSa2NCpCPimnU_LDLvipE8jZMrSTxU8amdb_0Z22YiUvTL-wFWVg6m5IKg-82x-zBQ"; const xhr = new XMLHttpRequest(); xhr.open('GET', `${endpoints.openAI.chat}/${chatId}`, true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.setRequestHeader('Authorization', 'Bearer ' + token); xhr.onload = () => { if (xhr.status !== 200) { reject('Request failed. Cannot retrieve chat messages.'); } else { resolve(JSON.parse(xhr.responseText)); // 返回整个原始数据 } }; xhr.onerror = () => { reject('Request error.'); }; xhr.send(); }); }); } function fetchAccountDetails() { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', endpoints.openAI.session, true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = () => { // if (xhr.status !== 200) return reject('? chatgpt.js >> Request failed. Cannot retrieve access token.'); // console.info('Token expiration: ' + new Date(JSON.parse(xhr.responseText).expires).toLocaleString().replace(',', ' at')); // chatgpt.openAIaccessToken = { // token: JSON.parse(xhr.responseText).accessToken, // expireDate: JSON.parse(xhr.responseText).expires // }; let getResponse = JSON.parse(xhr.responseText); return resolve(getResponse); // 直接返回响应文本或数据 //return resolve(chatgpt.openAIaccessToken.token); }; xhr.send(); }); } let pictureURL = new Map(); async function fetchPictureURL(asset_pointer = "file-P2IMiUABxJbug9oU8Vh3sBBZ") { return new Promise((resolve, reject) => { chatgpt.getAccessToken().then(token => { const xhr = new XMLHttpRequest(); let requestURL = `${domain}/backend-api/files/` + asset_pointer + "/download"; log("requestURL:", requestURL); xhr.open('GET', requestURL, true); xhr.setRequestHeader('Content-Type', 'application/json'); // 可以考虑删除此行 xhr.setRequestHeader('Authorization', 'Bearer ' + token); log("XHR sent!"); xhr.onload = () => { if (xhr.status !== 200) { reject('Request failed. Cannot retrieve the file.'); } else { let getResponse = JSON.parse(xhr.responseText); resolve(getResponse.download_url); // 直接返回响应文本或数据 } }; xhr.onerror = () => { reject('Request error.'); }; xhr.send(); }); }); } let fileHeader = `${domain}/backend-api/files`; fetchPictureURL().then(data => { log("fetchURL: ", data); // 打印原始聊天数据 }).catch(error => { console.error(error); }); // 使用上述函数 // fetchRawChatMessages().then(data => { // log(data); // 打印原始聊天数据 // const timestamp = data.create_time * 1000; // // const timestamp2 = data.update_time * 1000; // 转换为毫秒 // // const date2 = new Date(timestamp2); // // log("update_time:",timestamp2); // // log("update_time:",date2); // processChatMessage(data); // }).catch(error => { // console.error(error); // }); let conversationRootNode; // function processChatMessage1(data) { // log("In ProcessChatMessage, mapping:", data.mapping); // const tokenMap = new Map(Object.entries(data.mapping)); // // let accessToken = chatgpt.getAccessToken(); // log(tokenMap); // 这会显示一个 Map 对象，它的内容与原始的 mapping 对象相同 // fetchAccountDetails().then(userData => { // log("user DATA:", userData); // conversationData.participants.user.name = userData.user.name; // conversationData.participants.user.avatarURL = userData.user.image; // }) // conversationData.url = `${domain}/c/` + data.conversation_id; // let gptInfoDiv = document.querySelector('.flex.flex-1.flex-grow.items-center.gap-1.px-2.py-1.text-gray-600'); // log("GPTINFOR:", gptInfoDiv); // //log(gptInfoDiv); // if (gptInfoDiv) { // conversationData.participants.gpt.type = gptInfoDiv.innerText; // } // log("conversationData.participants.gpt.type:", conversationData.participants.gpt.type); // // let uuid2nodeMap = new Map(); // let uuid2pathMap = new Map(); // //我们实际上现在在做一个map到map的转换. 也就是说, 从服务器获取的map要先存储下来, 然后根据这个map来自己做一个新的map. // //所以说, 两个map的信息不能丢, 都要同时拿在手里. // // // for (let [key, value] of tokenMap) { // //log(`Key: ${key}, Value: ${value}`); // if (!value.parent) { // //log("got ParentNode:",key, value); // //得到了头节点/root节点 // let tokenRootNode = tokenMap.get(value.children[0]); // // if(tokenRootNode.message && tokenRootNode.message.weight === 0){ // // tokenRootNode = tokenMap.get(tokenRootNode.children[0]); // // } // conversationData.title = data.title; // if (tokenRootNode) { // log("rootNode:", tokenRootNode); // conversationRootNode = new DialogueNode(data.title ? data.title : Default_RootNode_Content, "chatGPT", tokenRootNode.id, -1); // uuid2nodeMap.set(tokenRootNode.id, conversationRootNode) // } else { // log("Creating RootNode Wrong! Exit Updating Map!"); // return; // } // // { // // let testChild = tokenMap.get(tokenRootNode.children[0]); // // if (testChild.message.author.role === 'system' && testChild.message.metadata.is_user_system_message) { // // tokenRootNode = testChild; // // } // // } // // function DFSFilterFirstChildren(currentRootNodeId) { // let currentRootNode = tokenMap.get(currentRootNodeId); // console.log("currentRootNode: ", currentRootNode); // // // 使用.slice()来复制数组，避免在遍历时修改原数组 // currentRootNode.children.slice().forEach(childId => { // let child = tokenMap.get(childId); // if (child && child.message && child.message.author && child.message.author.role.toLowerCase() === "user") { // // 是用户, 直接跳过 // //tokenRootNode.children.push(childId); // if (!tokenRootNode.children.includes(childId)) // tokenRootNode.children.push(childId); // return; // } // // // 不是用户, 处理其子节点 // if (child && child.children) { // child.children.forEach(grandsonId => { // let grandson = tokenMap.get(grandsonId); // if (grandson && grandson.message && grandson.message.author && grandson.message.author.role.toLowerCase() === "user") { // // 是用户, 直接跳过 // if (!tokenRootNode.children.includes(grandsonId)) // tokenRootNode.children.push(grandsonId); // return; // } // DFSFilterFirstChildren(grandsonId); // }); // } // // // 从根节点的孩子数组中删除当前非用户节点 // let index = tokenRootNode.children.indexOf(childId); // if (index > -1) { // tokenRootNode.children.splice(index, 1); // } // }); // } // // DFSFilterFirstChildren(tokenRootNode.id) // function DFSUpdateMap(tokenNode, curRootNode, parentID) { // // if(tokenNode.message.weight === 0 && tokenNode.id !== tokenRootNode.id){ // // tokenNode = tokenMap.get(tokenNode.children[0]); // // } // // for (let i = 0; i < tokenNode.children.length; i++) { // let child = tokenMap.get(tokenNode.children[i]); // // if(child.message && child.message.metadata && child.message.metadata.is_visually_hidden_from_conversation){ // // continue; // // } // // // if(tokenRootNode === tokenNode && child.message.author.role.toLowerCase() !== "user"){ // // //将这个空闲节点的孩子节点设置为父节点的孩子, 并且从父节点孩子数组中删除这个节点 // // child.children.forEach(grandson=>{ // // tokenRootNode.children.push(grandson.id) // // }) // // tokenRootNode.children.filter(anychild=>anychild.id!=child.id); // // DFSUpdateMap(tokenNode, curRootNode, parentID); // // } // let a_node_content = []; // let nodeID = child.id; // let parent = child.parent // if (child.message.author.role.toLowerCase() !== "user") { // updateChildContent(child); // a_node_content.push(child.message.content); // let grandSon; // while (child.message.author.role.toLowerCase() !== "user" && child.children.length > 0) { // grandSon = tokenMap.get(child.children[0]); // if (grandSon.message.author.role.toLowerCase() === "user") // break; // updateChildContent(grandSon); // a_node_content.push(grandSon.message.content); // child = grandSon; // } // if (child.message.author.role.toLowerCase() === "user") { // child = tokenMap.get(child.parent); // } // } else { // updateChildContent(child); // a_node_content.push(child.message.content); // } // let type = child.message.author.role.toLowerCase() === "user" ? "用户" : "chatGPT"; // let newDialogueNode = new DialogueNode(a_node_content, type, nodeID, parentID); // curRootNode.children.push(newDialogueNode); // uuid2nodeMap.set(child.id, newDialogueNode); // if (child.children.length > 0) { // DFSUpdateMap(child, newDialogueNode, nodeID); // } // } // // } // // function updateChildContent(child) { // child.message.content.author = child.message.author; // child.message.content.create_time = child.message.create_time; // child.message.content.metadata = child.message.metadata; // child.message.content.recipient = child.message.recipient; // child.message.content.status = child.message.status; // child.message.content.weight = child.message.weight; // } // // // DFSUpdateMap(tokenRootNode, conversationRootNode, tokenRootNode.id); // // // uuid2pathMap.set(conversationRootNode.uuid, ""); // DFSUpdatePathMap(conversationRootNode, [], uuid2pathMap); // // // log("uuid2nodeMap:", uuid2nodeMap); // log("uuid2pathMap:", uuid2pathMap); // root = d3.hierarchy(conversationRootNode); // const widthPerNode = 30; // const heightPerNode = 30; // treeLayout = d3.tree().nodeSize([widthPerNode, heightPerNode]); // treeLayout(root); // drawMainSVG(); // break; // } // } // // //const arrayOfEntries = [...mappingMap]; // //log("array:",arrayOfEntries); // return { // uuid2nodeMap: uuid2nodeMap, // uuid2pathMap: uuid2pathMap // }; // // } /** * 主处理函数，用于处理聊天消息。 * @param {Object} data - 包含消息映射和其他聊天相关数据的对象。 */ function processChatMessage(data) { log("In ProcessChatMessage, mapping:", data.mapping); const tokenMap = new Map(Object.entries(data.mapping)); let accessToken = chatgpt.getAccessToken(); log(tokenMap); // 显示映射对象，以便于调试 fetchAccountDetails().then(userData => { log("user DATA:", userData); conversationData.participants.user.name = userData.user.name; conversationData.participants.user.avatarURL = userData.user.image; }); conversationData.url = `${domain}/c/` + data.conversation_id; let gptInfoDiv = document.querySelector('.flex.flex-1.flex-grow.items-center.gap-1.px-2.py-1.text-gray-600'); log("GPTINFOR:", gptInfoDiv); if (gptInfoDiv) { conversationData.participants.gpt.type = gptInfoDiv.innerText; } log("conversationData.participants.gpt.type:", conversationData.participants.gpt.type); let uuid2nodeMap = new Map(); let uuid2pathMap = new Map(); for (let [key, value] of tokenMap) { if (!value.parent) { let tokenRootNode = tokenMap.get(value.children[0]); conversationData.title = data.title; if (tokenRootNode) { log("rootNode:", tokenRootNode); conversationRootNode = new DialogueNode(data.title ? data.title : Default_RootNode_Content, "chatGPT", tokenRootNode.id, -1); uuid2nodeMap.set(tokenRootNode.id, conversationRootNode) } else { log("Creating RootNode Wrong! Exit Updating Map!"); return; } /** * 深度优先搜索，过滤出第一个子节点，特别关注用户节点。 * @param {string} currentRootNodeId - 当前根节点的 ID。 */ function DFSFilterFirstChildren(currentRootNodeId) { let currentRootNode = tokenMap.get(currentRootNodeId); console.log("currentRootNode: ", currentRootNode); currentRootNode.children.slice().forEach(childId => { let child = tokenMap.get(childId); if (child && child.message && child.message.author && child.message.author.role.toLowerCase() === "user") { if (!tokenRootNode.children.includes(childId)) tokenRootNode.children.push(childId); return; } if (child && child.children) { child.children.forEach(grandsonId => { let grandson = tokenMap.get(grandsonId); if (grandson && grandson.message && grandson.message.author && grandson.message.author.role.toLowerCase() === "user") { if (!tokenRootNode.children.includes(grandsonId)) tokenRootNode.children.push(grandsonId); return; } DFSFilterFirstChildren(grandsonId); }); } let index = tokenRootNode.children.indexOf(childId); if (index > -1) { tokenRootNode.children.splice(index, 1); } }); } /** * 深度优先搜索更新映射，用于构建对话节点。 * @param {Object} tokenNode - 当前处理的token节点。 * @param {Object} curRootNode - 当前的根节点对象。 * @param {number} parentID - 父节点的ID。 */ function DFSUpdateMap(tokenNode, curRootNode, parentID) { for (let i = 0; i < tokenNode.children.length; i++) { let child = tokenMap.get(tokenNode.children[i]); let a_node_content = []; let nodeID = child.id; let parent = child.parent; if (child.message.author.role.toLowerCase() !== "user") { updateChildContent(child); a_node_content.push(child.message.content); let grandSon; while (child.message.author.role.toLowerCase() !== "user" && child.children.length > 0) { grandSon = tokenMap.get(child.children[0]); if (grandSon.message.author.role.toLowerCase() === "user") break; updateChildContent(grandSon); a_node_content.push(grandSon.message.content); child = grandSon; } if (child.message.author.role.toLowerCase() === "user") { child = tokenMap.get(child.parent); } } else { updateChildContent(child); a_node_content.push(child.message.content); } let type = child.message.author.role.toLowerCase() === "user" ? "用户" : "chatGPT"; let newDialogueNode = new DialogueNode(a_node_content, type, nodeID, parentID); curRootNode.children.push(newDialogueNode); uuid2nodeMap.set(child.id, newDialogueNode); if (child.children.length > 0) { DFSUpdateMap(child, newDialogueNode, nodeID); } } } /** * 更新子节点的内容。 * @param {Object} child - 子节点对象。 */ function updateChildContent(child) { child.message.content.author = child.message.author; child.message.content.create_time = child.message.create_time; child.message.content.metadata = child.message.metadata; child.message.content.recipient = child.message.recipient; child.message.content.status = child.message.status; child.message.content.weight = child.message.weight; } DFSFilterFirstChildren(tokenRootNode.id); DFSUpdateMap(tokenRootNode, conversationRootNode, tokenRootNode.id); uuid2pathMap.set(conversationRootNode.uuid, ""); DFSUpdatePathMap(conversationRootNode, [], uuid2pathMap); log("uuid2nodeMap:", uuid2nodeMap); log("uuid2pathMap:", uuid2pathMap); root = d3.hierarchy(conversationRootNode); const widthPerNode = 30; const heightPerNode = 30; treeLayout = d3.tree().nodeSize([widthPerNode, heightPerNode]); treeLayout(root); drawMainSVG(); break; } } return { uuid2nodeMap: uuid2nodeMap, uuid2pathMap: uuid2pathMap }; } function DFSUpdatePathMap(conversationRootNode, fatherPath, uuid2pathMap) { if (conversationRootNode.children.length > 0) { for (let i = 0; i < conversationRootNode.children.length; i++) { let child = conversationRootNode.children[i]; // 使用 slice() 创建 fatherPath 的副本，并在这个副本上 push 新元素 let childPath = fatherPath.slice(); // 先复制现有数组 childPath.push(i + 1); // 然后添加新元素 //log("passing path:", childPath); uuid2pathMap.set(child.uuid, childPath); DFSUpdatePathMap(child, childPath, uuid2pathMap); // 传递副本给递归调用 } } } function DFSUpdatePathMap_1(conversationRootNode, fatherPath, uuid2pathMap) { if (conversationRootNode.children.length > 0) { for (let i = 0; i < conversationRootNode.children.length; i++) { let child = conversationRootNode.children[i]; // 使用 slice() 创建 fatherPath 的副本，并在这个副本上 push 新元素 let childPath = fatherPath.slice(); // 先复制现有数组 childPath.push(i + 1); // 然后添加新元素 //log("passing path:", childPath); let stringPath = arrayToKey(childPath); uuid2pathMap.set(child.uuid, stringPath); DFSUpdatePathMap_1(child, childPath, uuid2pathMap); // 传递副本给递归调用 } } } function DFSUpdatePathMap_2(fatherPath, conversationRootNode, path2uuid) { //log("in DFSUpdatePathMap_2", fatherPath, conversationRootNode, path2uuid); if (conversationRootNode.children.length > 0) { for (let i = 0; i < conversationRootNode.children.length; i++) { let child = conversationRootNode.children[i]; //log("the ",i, "child:", child); // 使用 slice() 创建 fatherPath 的副本，并在这个副本上 push 新元素 let childPath = fatherPath.slice(); // 先复制现有数组 childPath.push(i + 1); // 然后添加新元素 //log("passing path:", childPath); let stringPath = arrayToKey(childPath); path2uuid.set(stringPath, child.uuid); DFSUpdatePathMap_2(childPath, child, path2uuid); // 传递副本给递归调用 } } } function conver_to_new_style() { log("in conver_to_new_style:"); log("conversationRootNode:", conversationRootNode); let path2uuid = new Map(); path2uuid.set("", conversationRootNode.uuid); path2uuid = new Map(); log("start DFSUpdatePathMap_2"); DFSUpdatePathMap_2([], conversationRootNode, path2uuid); log("stop DFSUpdatePathMap_2"); let commentMap = new Map(); let bookMarkedMap = new Map(); function transfer_comment(OldRootNode) { if (OldRootNode.children.length > 0) { for (let i = 0; i < OldRootNode.children.length; i++) { let child = OldRootNode.children[i]; if (child.comment !== "") { let path = conversationData.uuid2pathMap.get(child.uuid); let newUUID = path2uuid.get(arrayToKey(path)); commentMap.set(newUUID, child.comment); //console.log("comment:",child.comment); } transfer_comment(child); // 传递副本给递归调用 } } } //console.log("OldRootNode:",conversationData.rootNode); transfer_comment(conversationData.rootNode); log("commentMap:", commentMap); transfer_bookeMark(conversationData.rootNode); log("bookMarkedMap:", bookMarkedMap); function transfer_bookeMark(OldRootNode) { conversationData.bookMarked.forEach((value, key) => { log("conversationData:", conversationData); log("conversationData.uuid2pathMap:", conversationData.uuid2pathMap); //log(`Key: ${key}, Value: ${value}`); let path = conversationData.uuid2pathMap.get(key); log("path:", path); let newUUID = path2uuid.get(arrayToKey(path)); log("newUUID:", newUUID); bookMarkedMap.set(newUUID, true); }); } log("out conver_to_new_style"); // conversationData.uuid2nodeMap conversationData.isNovemberSeventh = true; return { rootNode: conversationRootNode, bookMarked: bookMarkedMap, commentMap: commentMap, } } function init() { ButtonOperations.createButton(); controlPanelKit.init(); ContentKit.init(); DOMOperations.initDOMOperations(); settingsKit.init(); searchKit.init(); languageKits.init({ target: { value: globalUserLang, shouldNotSave: true, } }) } function main() { //ButtonOperations.showUserNotification(translate("chatTreeRunning")); if (db) { db.close(); } dbOperations.initDatabase().then(() => { if (!db) { ButtonOperations.showUserNotification(translate("noDatabaseAndCreationFailed")); return; } dbOperations.usedatabase(); log(LogCategories.SUCCESS, "数据库加载成功!"); //console.log("database:", db); urlOperations.observeTargetChanges(); }).catch(error => { log(LogCategories.ERROR, "Error initializing database:", error); }); init(); } main(); })();QQ群二维码, 欢迎进群交流