'); // Line breaks if (this.scoreTextElement.innerHTML !== formattedScoreText) { this.scoreTextElement.innerHTML = formattedScoreText; contentChanged = true; } this.scoreTextElement.style.display = 'block'; } else { if (this.scoreTextElement.style.display !== 'none') { this.scoreTextElement.style.display = 'none'; this.scoreTextElement.innerHTML = ''; contentChanged = true; // Hiding/showing counts as change } } // Update Follow-up Questions display (using followUpQuestionsTextElement - always hidden) if (questionsContent) { const formattedQuestionsText = questionsContent.replace(//g, '>').replace(/\n/g, '
'); if (this.followUpQuestionsTextElement.innerHTML !== formattedQuestionsText) { this.followUpQuestionsTextElement.innerHTML = formattedQuestionsText; // No contentChanged = true needed as it's always hidden } } else { if (this.followUpQuestionsTextElement.innerHTML !== '') { this.followUpQuestionsTextElement.innerHTML = ''; } } this.followUpQuestionsTextElement.style.display = 'none'; // Ensure it's always hidden // --- Update Reasoning Display --- const formattedReasoning = formatTooltipDescription("", this.reasoning).reasoning; if (this.reasoningTextElement.innerHTML !== formattedReasoning) { this.reasoningTextElement.innerHTML = formattedReasoning; contentChanged = true; } const showReasoning = !!formattedReasoning; if ((this.reasoningDropdown.style.display === 'none') === showReasoning) { this.reasoningDropdown.style.display = showReasoning ? 'block' : 'none'; contentChanged = true; // Hiding/showing counts as change } // --- Update Conversation History Display --- const renderedHistory = this._renderConversationHistory(); if (this.conversationContainerElement.innerHTML !== renderedHistory) { this.conversationContainerElement.innerHTML = renderedHistory; this.conversationContainerElement.style.display = this.conversationHistory.length > 0 ? 'block' : 'none'; contentChanged = true; } // --- Update Follow-Up Questions Buttons Display --- let questionsButtonsChanged = false; // Simple check: compare number of buttons to number of questions if (this.followUpQuestionsElement.children.length !== (this.questions?.length || 0)) { questionsButtonsChanged = true; } else { // More thorough check: compare text of each question this.questions?.forEach((q, i) => { const button = this.followUpQuestionsElement.children[i]; if (!button || button.dataset.questionText !== q) { questionsButtonsChanged = true; } }); } if (questionsButtonsChanged) { this.followUpQuestionsElement.innerHTML = ''; // Clear previous questions if (this.questions && this.questions.length > 0) { this.questions.forEach((question, index) => { const questionButton = document.createElement('button'); questionButton.className = 'follow-up-question-button'; questionButton.textContent = `🤔 ${question}`; questionButton.dataset.questionIndex = index; questionButton.dataset.questionText = question; // Store text for handler // Prevent focus scrolling on mobile if (isMobileDevice()) { // Track if this specific button has been tapped before let hasBeenTapped = false; questionButton.addEventListener('touchstart', (e) => { if (!hasBeenTapped) { hasBeenTapped = true; const scrollTop = this.tooltipScrollableContentElement?.scrollTop || 0; requestAnimationFrame(() => { if (this.tooltipScrollableContentElement) { this.tooltipScrollableContentElement.scrollTop = scrollTop; } }); } }, { passive: true }); questionButton.addEventListener('focus', (e) => { // Blur immediately to prevent focus styling and scrolling e.target.blur(); }, { passive: true }); } this.followUpQuestionsElement.appendChild(questionButton); }); this.followUpQuestionsElement.style.display = 'block'; } else { this.followUpQuestionsElement.style.display = 'none'; } contentChanged = true; } // --- Update Metadata Display (now in a dropdown) --- let metadataHTML = ''; let showMetadataDropdown = false; // Renamed from showMetadata for clarity const hasFullMetadata = this.metadata && Object.keys(this.metadata).length > 1 && this.metadata.model; const hasOnlyGenId = this.metadata && this.metadata.generationId && Object.keys(this.metadata).length === 1; if (hasFullMetadata) { // No
here, reasoning-dropdown class provides border-top styling if needed if (this.metadata.providerName && this.metadata.providerName !== 'N/A') { metadataHTML += ``; } metadataHTML += ``; metadataHTML += ``; if (this.metadata.reasoningTokens > 0) { metadataHTML += ``; } metadataHTML += ``; if (this.metadata.mediaInputs > 0) { metadataHTML += ``; } metadataHTML += ``; showMetadataDropdown = true; } else if (hasOnlyGenId) { metadataHTML += ``; showMetadataDropdown = true; } if (this.metadataElement.innerHTML !== metadataHTML) { // this.metadataElement is the inner content holder this.metadataElement.innerHTML = metadataHTML; contentChanged = true; } // Show/hide the entire dropdown based on whether there's metadata if (this.metadataDropdown) { const currentDisplay = this.metadataDropdown.style.display; const newDisplay = showMetadataDropdown ? 'block' : 'none'; if (currentDisplay !== newDisplay) { this.metadataDropdown.style.display = newDisplay; contentChanged = true; } } // --- End Metadata Display Update --- // Add/remove streaming class const isStreaming = this.status === 'streaming'; if (this.tooltipElement.classList.contains('streaming-tooltip') !== isStreaming) { this.tooltipElement.classList.toggle('streaming-tooltip', isStreaming); contentChanged = true; // Class change might affect layout/appearance } // Show/hide rate button based on status if (this.rateButton) { const showRateButton = this.status === 'manual'; const currentDisplay = this.rateButton.style.display; const newDisplay = showRateButton ? 'inline-block' : 'none'; if (currentDisplay !== newDisplay) { this.rateButton.style.display = newDisplay; contentChanged = true; } } // Handle scrolling after content update if (contentChanged) { requestAnimationFrame(() => { // Check conditions again inside RAF, as state might have changed // (e.g. visibility, or if tooltipScrollableContentElement was somehow removed) if (this.tooltipScrollableContentElement && this.isVisible) { if (this.autoScroll) { // Use the current this.autoScroll state this._performAutoScroll(); } else { // If autoScroll is false, it means user scrolled away or streaming ended // and wasn't at the very bottom. Restore their previous position // to prevent the browser from defaulting to scroll_top=0 after large DOM changes. this.tooltipScrollableContentElement.scrollTop = previousScrollTop; } } this._updateScrollButtonVisibility(); // Always update button visibility }); } else { // Ensure scroll button visibility is correct even if content didn't change significantly this._updateScrollButtonVisibility(); } } /** Renders the conversation history into HTML string */ _renderConversationHistory() { if (!this.conversationHistory || this.conversationHistory.length === 0) { return ''; } // Store current expanded states before re-rendering const expandedStates = new Map(); if (this.conversationContainerElement) { this.conversationContainerElement.querySelectorAll('.conversation-reasoning').forEach((dropdown, index) => { expandedStates.set(index, dropdown.classList.contains('expanded')); }); } let historyHtml = ''; this.conversationHistory.forEach((turn, index) => { const formattedQuestion = turn.question .replace(//g, '>'); // Basic escaping let uploadedImageHtml = ''; if (turn.uploadedImages && turn.uploadedImages.length > 0) { uploadedImageHtml = `
${turn.uploadedImages.map(url => {
if (url.startsWith('data:application/pdf')) {
// Display PDF icon for PDFs
return `
`;
}
}).join('')}
`;
}
let formattedAnswer;
if (turn.answer === 'pending') {
formattedAnswer = 'Answering...';
} else {
// Apply formatting similar to the main description/reasoning
formattedAnswer = turn.answer
.replace(/```([\s\S]*?)```/g, (m, code) => `
📄
`;
} else {
// Display image preview
return `PDF Document
${code.replace(//g,'>')}$1')
// Process Markdown Tables before line breaks
.replace(/^\|(.+)\|\r?\n\|([\s\|\-:]+)\|\r?\n(\|(?:.+)\|\r?\n?)+/gm, (match) => {
const rows = match.trim().split('\n');
const headerRow = rows[0];
// const separatorRow = rows[1]; // Not strictly needed here for formatting
const bodyRows = rows.slice(2);
let html = '| ${cell.trim()} | `; }); html += '
|---|
| ${cell.trim()} | `; }); html += '
'); } // Add a separator before each Q&A pair except the first one if (index > 0) { historyHtml += '
'; } // --- Add Reasoning Dropdown (if present) --- let reasoningHtml = ''; if (turn.reasoning && turn.reasoning.trim() !== '' && turn.answer !== 'pending') { const formattedReasoning = formatTooltipDescription("", turn.reasoning).reasoning; // Check if this dropdown was expanded const wasExpanded = expandedStates.get(index); const expandedClass = wasExpanded ? ' expanded' : ''; const arrowChar = wasExpanded ? '▼' : '▶'; const contentStyle = wasExpanded ? 'style="max-height: 200px; padding: 8px;"' : 'style="max-height: 0; padding: 0 8px;"'; reasoningHtml = ` `; } historyHtml += `
You: ${formattedQuestion}
${uploadedImageHtml}
${reasoningHtml}
AI: ${formattedAnswer}
${fileName || 'PDF'}`; pdfIcon.style.textAlign = 'center'; pdfIcon.style.padding = '8px'; pdfIcon.style.width = '60px'; pdfIcon.style.height = '60px'; pdfIcon.style.display = 'flex'; pdfIcon.style.flexDirection = 'column'; pdfIcon.style.justifyContent = 'center'; pdfIcon.style.alignItems = 'center'; previewItem.appendChild(pdfIcon); } else { // Existing image preview const img = document.createElement('img'); img.src = dataUrl; img.className = 'follow-up-image-preview-thumbnail'; previewItem.appendChild(img); } const removeBtn = document.createElement('button'); removeBtn.textContent = '×'; // 'X' character for close removeBtn.className = 'follow-up-image-remove-btn'; removeBtn.title = 'Remove this file'; removeBtn.addEventListener('click', (e) => { e.preventDefault(); // Add this e.stopPropagation(); this._removeSpecificUploadedImage(dataUrl); }); previewItem.appendChild(removeBtn); this.followUpImageContainer.appendChild(previewItem); } _removeSpecificUploadedImage(imageDataUrl) { this.uploadedImageDataUrls = this.uploadedImageDataUrls.filter(url => url !== imageDataUrl); if (this.followUpImageContainer) { const previewItemToRemove = this.followUpImageContainer.querySelector(`div.follow-up-image-preview-item[data-image-data-url="${CSS.escape(imageDataUrl)}"]`); if (previewItemToRemove) { previewItemToRemove.remove(); } // Hide container if no images are left if (this.uploadedImageDataUrls.length === 0) { this.followUpImageContainer.style.display = 'none'; } } } _clearFollowUpImage() { this.uploadedImageDataUrls = []; // Reset the array if (this.followUpImageContainer) { this.followUpImageContainer.innerHTML = ''; // Clear all preview items this.followUpImageContainer.style.display = 'none'; // Hide the container } if (this.followUpImageInput) { this.followUpImageInput.value = null; // Clear the file input } } // --- End New --- _finalizeFollowUpInteraction() { // Re-enable suggested question buttons if they exist (new ones might have been rendered) if (this.followUpQuestionsElement) { this.followUpQuestionsElement.querySelectorAll('.follow-up-question-button').forEach(btn => { btn.disabled = false; // Note: Text content of suggested buttons is reset when new questions are rendered // by _updateTooltipUI, so no need to reset text like "Asking..." here. }); } // Re-enable custom question UI if it was the source if (this.currentFollowUpSource === 'custom') { if (this.customQuestionInput) { this.customQuestionInput.disabled = false; } if (this.customQuestionButton) { this.customQuestionButton.disabled = false; this.customQuestionButton.textContent = 'Ask'; } } // this._clearFollowUpImage(); // Clear any uploaded images for the follow-up -- MOVED this.currentFollowUpSource = null; // Reset the source tracker } // --- Public API --- /** * Finds a pending entry in the conversation history by question text and updates its answer. * Also updates the UI. * @param {string} question - The text of the question that was asked. * @param {string} answer - The new answer (or error message). * @param {string} [reasoning=''] - Optional reasoning text associated with the answer. */ _updateConversationHistory(question, answer, reasoning = '') { const entryIndex = this.conversationHistory.findIndex(turn => turn.question === question && turn.answer === 'pending'); if (entryIndex !== -1) { this.conversationHistory[entryIndex].answer = answer; this.conversationHistory[entryIndex].reasoning = reasoning; // Store reasoning this._updateTooltipUI(); // Refresh the view to show the updated answer } else { console.warn(`[ScoreIndicator ${this.tweetId}] Could not find pending history entry for question: "${question}"`); // Optionally, append as a new entry if not found, though this might indicate a logic error // this.conversationHistory.push({ question: question, answer: answer }); // this._updateTooltipUI(); } } /** * Updates the visual display of the last answer element during streaming * without changing the underlying conversationHistory state. * @param {string} streamingText - The current aggregated text from the stream. * @param {string} [reasoningText=''] - Optional reasoning text from the stream. */ _renderStreamingAnswer(streamingText, reasoningText = '') { if (!this.conversationContainerElement) return; // Find the last conversation turn element const conversationTurns = this.conversationContainerElement.querySelectorAll('.conversation-turn'); const lastTurnElement = conversationTurns.length > 0 ? conversationTurns[conversationTurns.length - 1] : null; if (!lastTurnElement) { console.warn(`[ScoreIndicator ${this.tweetId}] Could not find last conversation turn to render streaming answer.`); return; } // Ensure the corresponding state is actually pending before updating visuals const lastHistoryEntry = this.conversationHistory.length > 0 ? this.conversationHistory[this.conversationHistory.length -1] : null; if (!(lastHistoryEntry && lastHistoryEntry.answer === 'pending')) { console.warn(`[ScoreIndicator ${this.tweetId}] Attempted to render streaming answer, but last history entry is not pending.`); return; } // --- Handle Streaming Reasoning Container --- let streamingReasoningContainer = lastTurnElement.querySelector('.streaming-reasoning-container'); const hasReasoning = reasoningText && reasoningText.trim() !== ''; if (hasReasoning && !streamingReasoningContainer) { // Create streaming reasoning container if it doesn't exist streamingReasoningContainer = document.createElement('div'); streamingReasoningContainer.className = 'streaming-reasoning-container active'; streamingReasoningContainer.style.display = 'block'; const streamingReasoningText = document.createElement('div'); streamingReasoningText.className = 'streaming-reasoning-text'; streamingReasoningContainer.appendChild(streamingReasoningText); // Insert before the answer element const answerElement = lastTurnElement.querySelector('.conversation-answer'); if (answerElement) { lastTurnElement.insertBefore(streamingReasoningContainer, answerElement); } else { lastTurnElement.appendChild(streamingReasoningContainer); } } // Update streaming reasoning text if present if (streamingReasoningContainer && hasReasoning) { const streamingTextElement = streamingReasoningContainer.querySelector('.streaming-reasoning-text'); if (streamingTextElement) { // Show only the rightmost N characters if too long const maxDisplayLength = 200; // Characters to display let displayText = reasoningText; if (reasoningText.length > maxDisplayLength) { displayText = reasoningText.slice(-maxDisplayLength); } streamingTextElement.textContent = displayText; } } // --- Handle Reasoning Dropdown (hidden during streaming, will be shown on completion) --- let reasoningDropdown = lastTurnElement.querySelector('.reasoning-dropdown'); if (reasoningDropdown) { // Hide the dropdown during streaming reasoningDropdown.style.display = 'none'; } // --- Handle Answer Text --- const lastAnswerElement = lastTurnElement.querySelector('.conversation-answer'); if (lastAnswerElement) { // Format the streaming answer const formattedStreamingAnswer = streamingText .replace(/```([\s\S]*?)```/g, (m, code) => `
${code.replace(//g,'>')}$1')
// Process Markdown Tables before line breaks
.replace(/^\|(.+)\|\r?\n\|([\s\|\-:]+)\|\r?\n(\|(?:.+)\|\r?\n?)+/gm, (match) => {
const rows = match.trim().split('\n');
const headerRow = rows[0];
// const separatorRow = rows[1]; // Not strictly needed here for formatting
const bodyRows = rows.slice(2);
let html = '| ${cell.trim()} | `; }); html += '
|---|
| ${cell.trim()} | `; }); html += '
'); // Update the innerHTML directly, adding the cursor lastAnswerElement.innerHTML = `AI: ${formattedStreamingAnswer}|`; } else { console.warn(`[ScoreIndicator ${this.tweetId}] Could not find answer element in last conversation turn.`); } // Ensure autoscroll if needed if (this.autoScroll) { this._performAutoScroll(); } // In _renderStreamingAnswer, after updating the answer, call this._performConversationAutoScroll() instead of this._performAutoScroll(). // Remove or comment out the call to this._performAutoScroll() in _renderStreamingAnswer. this._performConversationAutoScroll(); } /** * Updates the indicator's state and refreshes the UI. * @param {object} options * @param {string} [options.status] - New status ('pending', 'streaming', 'rated', 'error', 'cached', 'blacklisted'). * @param {number|null} [options.score] - New score. * @param {string} [options.description] - New description text. * @param {string} [options.reasoning] - New reasoning text. * @param {object|null} [options.metadata] - New metadata object. * @param {string[]} [options.questions] - New follow-up questions. */ update({ status, score = null, description = '', reasoning = '', metadata = null, questions = undefined }) { // console.log(`[ScoreIndicator ${this.tweetId}] Updating state - Status: ${status}, Score: ${score}`); const statusChanged = status !== undefined && this.status !== status; const scoreChanged = score !== null && this.score !== score; const descriptionChanged = description !== '' && this.description !== description; const reasoningChanged = reasoning !== '' && this.reasoning !== reasoning; const metadataChanged = metadata !== null && JSON.stringify(this.metadata) !== JSON.stringify(metadata); const questionsChanged = questions !== undefined && JSON.stringify(this.questions) !== JSON.stringify(questions); // Conversation history updates are handled separately now // Only update if something actually changed if (!statusChanged && !scoreChanged && !descriptionChanged && !reasoningChanged && !metadataChanged && !questionsChanged) { // console.log(`[ScoreIndicator ${this.tweetId}] No state change detected.`); return; } if (statusChanged) this.status = status; // Ensure score is null if status implies it (e.g., pending without previous score) if (scoreChanged || statusChanged) { this.score = (this.status === 'pending' || this.status === 'error') ? score : // Allow score display for error state if provided (this.status === 'streaming' && score === null) ? this.score : // Keep existing score during streaming if new one is null score; } if (descriptionChanged) this.description = description; if (reasoningChanged) this.reasoning = reasoning; if (metadataChanged) this.metadata = metadata; if (questionsChanged) this.questions = questions; // Update autoScroll state based on new status BEFORE UI updates if (statusChanged) { const shouldAutoScroll = (this.status === 'pending' || this.status === 'streaming'); if (this.autoScroll !== shouldAutoScroll) { this.autoScroll = shouldAutoScroll; // Add null check before accessing dataset if (this.tooltipElement) { this.tooltipElement.dataset.autoScroll = this.autoScroll ? 'true' : 'false'; } } } // Update UI elements if (statusChanged || scoreChanged) { this._updateIndicatorUI(); } // Update tooltip if content changed or if visibility/scrolling might need adjustment if (descriptionChanged || reasoningChanged || statusChanged || metadataChanged || questionsChanged) { this._updateTooltipUI(); // This handles content and auto-scroll if visible } else { // If only score changed, ensure scroll button visibility is correct this._updateScrollButtonVisibility(); } } /** Shows the tooltip and positions it correctly. */ show() { if (!this.tooltipElement) return; // console.log(`[ScoreIndicator ${this.tweetId}] Showing tooltip`); this.isVisible = true; this.tooltipElement.style.display = 'flex'; // MODIFIED: Was 'block', needs to be 'flex' for new layout this._setPosition(); // Calculate and apply position // Handle auto-scroll on show if needed if (this.autoScroll && (this.status === 'streaming' || this.status === 'pending')) { this._performAutoScroll(); } // Ensure scroll button visibility is correct on show this._updateScrollButtonVisibility(); } /** Hides the tooltip unless it's pinned. */ hide() { if (!this.isPinned && this.tooltipElement) { // console.log(`[ScoreIndicator ${this.tweetId}] Hiding tooltip`); this.isVisible = false; this.tooltipElement.style.display = 'none'; } else if (this.isPinned) { // console.log(`[ScoreIndicator ${this.tweetId}] Attempted to hide pinned tooltip`); } } /** Toggles the tooltip's visibility. */ toggle() { if (this.isVisible && !this.isPinned) { this.hide(); } else { // If pinned and visible, clicking should maybe unpin? Decided against for now. this.show(); // show() handles positioning and makes it visible } } /** Pins the tooltip open. */ pin() { if (!this.tooltipElement || !this.pinButton) return; // console.log(`[ScoreIndicator ${this.tweetId}] Pinning tooltip`); this.isPinned = true; this.tooltipElement.classList.add('pinned'); this.pinButton.innerHTML = '📍'; // Use the filled pin icon this.pinButton.title = 'Unpin tooltip'; // Tooltip remains visible even if mouse leaves } /** Unpins the tooltip, allowing it to be hidden automatically. */ unpin() { if (!this.tooltipElement || !this.pinButton) return; // console.log(`[ScoreIndicator ${this.tweetId}] Unpinning tooltip`); this.isPinned = false; this.tooltipElement.classList.remove('pinned'); this.pinButton.innerHTML = '📌'; // Use the outline pin icon this.pinButton.title = 'Pin tooltip (prevents auto-closing)'; // Check if mouse is currently outside the tooltip/indicator; if so, hide it now setTimeout(() => { if (this.tooltipElement && !this.tooltipElement.matches(':hover') && this.indicatorElement && !this.indicatorElement.matches(':hover')) { this.hide(); } }, 0); } // --- New Event Handler for Close Button --- _handleCloseClick(e) { if (e) { e.stopPropagation(); } this.hide(); // Simply hide the tooltip } // --- End New Event Handler --- /** Removes the indicator, tooltip, and listeners from the DOM and registry. */ destroy() { // console.log(`[ScoreIndicator ${this.tweetId}] Destroying...`); // Clean up any active streaming request for this tweet if (window.activeStreamingRequests && window.activeStreamingRequests[this.tweetId]) { console.log(`Cleaning up active streaming request for tweet ${this.tweetId}`); window.activeStreamingRequests[this.tweetId].abort(); delete window.activeStreamingRequests[this.tweetId]; } // Remove event listeners first to prevent errors during removal this.indicatorElement?.removeEventListener('mouseenter', this._handleMouseEnter); this.indicatorElement?.removeEventListener('mouseleave', this._handleMouseLeave); this.indicatorElement?.removeEventListener('click', this._handleIndicatorClick); this.tooltipElement?.removeEventListener('mouseenter', this._handleTooltipMouseEnter); this.tooltipElement?.removeEventListener('mouseleave', this._handleTooltipMouseLeave); this.tooltipScrollableContentElement?.removeEventListener('scroll', this._handleTooltipScroll.bind(this)); this.pinButton?.removeEventListener('click', this._handlePinClick.bind(this)); this.copyButton?.removeEventListener('click', this._handleCopyClick.bind(this)); this.tooltipCloseButton?.removeEventListener('click', this._handleCloseClick.bind(this)); this.reasoningToggle?.removeEventListener('click', this._handleReasoningToggleClick.bind(this)); this.scrollButton?.removeEventListener('click', this._handleScrollButtonClick.bind(this)); this.followUpQuestionsElement?.removeEventListener('click', this._handleFollowUpQuestionClick.bind(this)); this.customQuestionButton?.removeEventListener('click', this._handleCustomQuestionClick.bind(this)); this.customQuestionInput?.removeEventListener('keydown', this._boundHandlers.handleKeyDown); // Remove mobile-specific event listeners if (isMobileDevice()) { if (this.customQuestionInput && this._boundHandlers.handleMobileFocus) { this.customQuestionInput.removeEventListener('focus', this._boundHandlers.handleMobileFocus); this.customQuestionInput.removeEventListener('touchstart', this._boundHandlers.handleMobileTouchStart, { passive: false }); } // Remove follow-up questions touch handlers if (this.followUpQuestionsElement && this._boundHandlers.handleFollowUpTouchStart) { this.followUpQuestionsElement.removeEventListener('touchstart', this._boundHandlers.handleFollowUpTouchStart, { passive: false }); this.followUpQuestionsElement.removeEventListener('touchend', this._boundHandlers.handleFollowUpTouchEnd, { passive: false }); } } this.metadataToggle?.removeEventListener('click', this._handleMetadataToggleClick.bind(this)); this.refreshButton?.removeEventListener('click', this._handleRefreshClick.bind(this)); this.rateButton?.removeEventListener('click', this._handleRateClick.bind(this)); // Remove image button listeners if (this.attachImageButton) { this.attachImageButton.removeEventListener('click', this._boundHandlers.handleAttachImageClick); } if (this.followUpImageInput) { this.followUpImageInput.removeEventListener('change', this._handleFollowUpImageSelect.bind(this)); } // Remove conversation reasoning toggle listener if (this.conversationContainerElement && this._boundHandlers.handleConversationReasoningToggle) { this.conversationContainerElement.removeEventListener('click', this._boundHandlers.handleConversationReasoningToggle); } this.indicatorElement?.remove(); this.tooltipElement?.remove(); // Remove from registry ScoreIndicatorRegistry.remove(this.tweetId); // Update dataset attribute on article (if it still exists) const currentArticle = this.findCurrentArticleElement(); // Find before nullifying if (currentArticle) { delete currentArticle.dataset.hasScoreIndicator; // delete currentArticle.dataset.indicatorManaged; // No longer using this } // Nullify references to help garbage collection this.tweetArticle = null; this.indicatorElement = null; this.tooltipElement = null; this.pinButton = null; this.copyButton = null; this.tooltipCloseButton = null; this.reasoningToggle = null; this.scrollButton = null; this.conversationContainerElement = null; this.followUpQuestionsElement = null; this.customQuestionContainer = null; this.customQuestionInput = null; this.customQuestionButton = null; // --- New: Nullify Image Upload Elements --- this.followUpImageContainer = null; this.followUpImageInput = null; this.uploadedImageDataUrls = []; // Ensure it's reset here too this.refreshButton = null; // Nullify refresh button this.rateButton = null; // Nullify rate button // --- End New --- // --- Nullify Metadata Dropdown Elements --- this.metadataDropdown = null; this.metadataToggle = null; this.metadataArrow = null; this.metadataContent = null; // this.metadataElement is already nulled above as part of original cleanup this.tooltipScrollableContentElement = null; // NEW: cleanup } /** Ensures the indicator element is attached to the correct current article element. */ ensureIndicatorAttached() { if (!this.indicatorElement) return; // Nothing to attach const currentArticle = this.findCurrentArticleElement(); if (!currentArticle) { return; } // Check if the indicator is already in the *correct* article if (this.indicatorElement.parentElement !== currentArticle) { // console.log(`[ScoreIndicator ${this.tweetId}] Re-attaching indicator to current article.`); // Ensure parent is positioned const currentPosition = window.getComputedStyle(currentArticle).position; if (currentPosition !== 'relative' && currentPosition !== 'absolute' && currentPosition !== 'fixed' && currentPosition !== 'sticky') { currentArticle.style.position = 'relative'; } currentArticle.appendChild(this.indicatorElement); } } /** Finds the current DOM element for the tweet article based on tweetId. */ findCurrentArticleElement() { const timeline = document.querySelector('main') || document.querySelector('div[data-testid="primaryColumn"]'); if (!timeline) return null; // Try finding via a link containing the tweetId first const linkSelector = `a[href*="/status/${this.tweetId}"]`; const linkElement = timeline.querySelector(linkSelector); const article = linkElement?.closest('article[data-testid="tweet"]'); if (article) { // Verify the found article's ID matches, just in case the link wasn't the permalink if (getTweetID(article) === this.tweetId) { return article; } } // Fallback: Iterate through all articles if specific link not found // This is less efficient but necessary if the ID isn't easily queryable const articles = timeline.querySelectorAll('article[data-testid="tweet"]'); for (const art of articles) { if (getTweetID(art) === this.tweetId) { return art; } } return null; // Not found } /** * Updates the indicator's state after an initial review and builds the conversation history. * @param {object} params * @param {string} params.fullContext - The full text context of the tweet. * @param {string[]} params.mediaUrls - Array of media URLs from the tweet. * @param {string} params.apiResponseContent - The raw content from the API response. * @param {string} params.reviewSystemPrompt - The system prompt used for the initial review. * @param {string} params.followUpSystemPrompt - The system prompt to be used for follow-ups. * @param {string} [params.userInstructions] - The user's custom instructions for rating tweets. */ updateInitialReviewAndBuildHistory({ fullContext, mediaUrls, apiResponseContent, reviewSystemPrompt, followUpSystemPrompt, userInstructions = '' }) { // Parse apiResponseContent for analysis, score, and initial questions const analysisMatch = apiResponseContent.match(/
${code.replace(//g,'>')}$1
') .replace(/^## (.*$)/gm, '$1
') .replace(/^### (.*$)/gm, '$1
') .replace(/^#### (.*$)/gm, '$1
') .replace(/\*\*(.*?)\*\*/g, '$1') // Bold .replace(/\*(.*?)\*/g, '$1') // Italic .replace(/`([^`]+)`/g, '$1') // Inline code
.replace(/SCORE_(\d+)/g, 'SCORE: $1') // Score highlight class
// Process Markdown Tables before line breaks
.replace(/^\|(.+)\|\r?\n\|([\s\|\-:]+)\|\r?\n(\|(?:.+)\|\r?\n?)+/gm, (match) => {
const rows = match.trim().split('\n');
const headerRow = rows[0];
const separatorRow = rows[1]; // We use this to confirm it's a table
const bodyRows = rows.slice(2);
let html = '| ${cell.trim()} | `; }); html += '
|---|
| ${cell.trim()} | `; }); html += '
') // Paragraph breaks .replace(/\n/g, '
'); // Line breaks let formattedReasoning = ''; if (reasoning && reasoning.trim()) { formattedReasoning = reasoning .replace(/\\n/g, '\n') // Convert literal '\n' to actual newline characters // Format fenced code blocks ```code``` .replace(/```([\s\S]*?)```/g, (m, code) => `
${code.replace(//g,'>')}$1')
.replace(/\n\n/g, '') .replace(/\n/g, '
'); } // Return both, even though caller might only use one return { description: formattedDescription, reasoning: formattedReasoning }; } // ----- ui/ui.js ----- /** * Toggles the visibility of an element and updates the corresponding toggle button text. * @param {HTMLElement} element - The element to toggle. * @param {HTMLElement} toggleButton - The button that controls the toggle. * @param {string} openText - Text for the button when the element is open. * @param {string} closedText - Text for the button when the element is closed. */ function toggleElementVisibility(element, toggleButton, openText, closedText) { if (!element || !toggleButton) return; const isCurrentlyHidden = element.classList.contains('hidden'); // Update button text immediately toggleButton.innerHTML = isCurrentlyHidden ? openText : closedText; if (isCurrentlyHidden) { // Opening element.style.display = 'flex'; // Force reflow element.offsetHeight; element.classList.remove('hidden'); } else { // Closing element.classList.add('hidden'); // Wait for animation to complete before changing display setTimeout(() => { if (element.classList.contains('hidden')) { element.style.display = 'none'; } }, 500); // Match the CSS transition duration } // Update opacity for settings-toggle on mobile based on settings-container state if (element.id === 'settings-container' && toggleButton.id === 'settings-toggle') { if (isMobileDevice()) { // isMobileDevice() is from utils.js if (element.classList.contains('hidden')) { // Settings panel is NOW hidden (i.e., "collapsed") toggleButton.style.opacity = '0.3'; } else { // Settings panel is NOW visible (i.e., "open") toggleButton.style.opacity = ''; // Revert to default CSS opacity (effectively 1) } } else { // On non-mobile, ensure opacity always reverts to default CSS regardless of panel state toggleButton.style.opacity = ''; } } // Special case for filter slider button if (element.id === 'tweet-filter-container') { const filterToggle = document.getElementById('filter-toggle'); if (filterToggle) { if (!isCurrentlyHidden) { // We're closing the filter setTimeout(() => { filterToggle.style.display = 'block'; }, 500); // Match the CSS transition duration } else { filterToggle.style.display = 'none'; } } } } // --- Core UI Logic --- /** * Injects the UI elements from the HTML resource into the page. */ function injectUI() { //combined userscript has a const named MENU. If it exists, use it. let menuHTML; if (MENU) { menuHTML = MENU; } else { menuHTML = browserGet('menuHTML'); } if (!menuHTML) { console.error('Failed to load Menu.html resource!'); showStatus('Error: Could not load UI components.'); return null; } // Create a container to inject HTML const containerId = 'tweetfilter-root-container'; // Use the ID from the updated HTML let uiContainer = document.getElementById(containerId); if (uiContainer) { console.warn('UI container already exists. Skipping injection.'); return uiContainer; // Return existing container } uiContainer = document.createElement('div'); uiContainer.id = containerId; uiContainer.innerHTML = menuHTML; // Append the rest of the UI elements document.body.appendChild(uiContainer); console.log('TweetFilter UI Injected from HTML resource.'); // Set version number const versionInfo = uiContainer.querySelector('#version-info'); if (versionInfo) { versionInfo.textContent = `Twitter De-Sloppifier v${VERSION}`; } return uiContainer; // Return the newly created container } /** * Initializes all UI event listeners using event delegation. * @param {HTMLElement} uiContainer - The root container element for the UI. */ function initializeEventListeners(uiContainer) { if (!uiContainer) { console.error('UI Container not found for event listeners.'); return; } console.log('Wiring UI events...'); const settingsContainer = uiContainer.querySelector('#settings-container'); const filterContainer = uiContainer.querySelector('#tweet-filter-container'); const settingsToggleBtn = uiContainer.querySelector('#settings-toggle'); const filterToggleBtn = uiContainer.querySelector('#filter-toggle'); // --- Delegated Event Listener for Clicks --- uiContainer.addEventListener('click', (event) => { const target = event.target; const actionElement = target.closest('[data-action]'); const action = actionElement?.dataset.action; const setting = target.dataset.setting; const paramName = target.closest('.parameter-row')?.dataset.paramName; const tab = target.dataset.tab; const toggleTargetId = target.closest('[data-toggle]')?.dataset.toggle; // Button Actions if (action) { switch (action) { case 'close-filter': toggleElementVisibility(filterContainer, filterToggleBtn, 'Filter Slider', 'Filter Slider'); break; case 'toggle-settings': case 'close-settings': toggleElementVisibility(settingsContainer, settingsToggleBtn, '✕ Close', '⚙️ Settings'); break; case 'save-api-key': saveApiKey(); break; case 'clear-cache': clearTweetRatingsAndRefreshUI(); break; case 'reset-settings': resetSettings(isMobileDevice()); break; case 'save-instructions': saveInstructions(); break; case 'add-handle': addHandleFromInput(); break; case 'clear-instructions-history': clearInstructionsHistory(); break; case 'export-cache': exportCacheToJson(); break; } } // Handle List Removal (delegated) if (target.classList.contains('remove-handle')) { const handleItem = target.closest('.handle-item'); const handleTextElement = handleItem?.querySelector('.handle-text'); if (handleTextElement) { const handle = handleTextElement.textContent.substring(1); // Remove '@' removeHandleFromBlacklist(handle); } } // Tab Switching if (tab) { switchTab(tab); } // Advanced Options Toggle if (toggleTargetId) { toggleAdvancedOptions(toggleTargetId); } }); // --- Delegated Event Listener for Input/Change --- uiContainer.addEventListener('input', (event) => { const target = event.target; const setting = target.dataset.setting; const paramName = target.closest('.parameter-row')?.dataset.paramName; // Settings Inputs / Toggles if (setting) { handleSettingChange(target, setting); } // Parameter Controls (Sliders/Number Inputs) if (paramName) { handleParameterChange(target, paramName); } // Filter Slider if (target.id === 'tweet-filter-slider') { handleFilterSliderChange(target); } if (target.id === 'tweet-filter-value') { handleFilterValueInput(target); } }); uiContainer.addEventListener('change', (event) => { const target = event.target; const setting = target.dataset.setting; // Settings Inputs / Toggles (for selects like sort order) if (setting === 'modelSortOrder') { handleSettingChange(target, setting); fetchAvailableModels(); // Refresh models on sort change } // Settings Checkbox toggle (need change event for checkboxes) if (setting === 'enableImageDescriptions') { handleSettingChange(target, setting); } }); // --- Direct Event Listeners (Less common cases) --- // Filter Toggle Button if (filterToggleBtn) { filterToggleBtn.onclick = () => { if (filterContainer) { filterContainer.style.display = 'flex'; // Force a reflow filterContainer.offsetHeight; filterContainer.classList.remove('hidden'); } filterToggleBtn.style.display = 'none'; }; } // Close custom selects when clicking outside document.addEventListener('click', closeAllSelectBoxes); // Add handlers for new controls const showFreeModelsCheckbox = uiContainer.querySelector('#show-free-models'); if (showFreeModelsCheckbox) { showFreeModelsCheckbox.addEventListener('change', function () { showFreeModels = this.checked; browserSet('showFreeModels', showFreeModels); refreshModelsUI(); }); } const sortDirectionBtn = uiContainer.querySelector('#sort-direction'); if (sortDirectionBtn) { sortDirectionBtn.addEventListener('click', function () { const currentDirection = browserGet('sortDirection', 'default'); const newDirection = currentDirection === 'default' ? 'reverse' : 'default'; browserSet('sortDirection', newDirection); this.dataset.value = newDirection; refreshModelsUI(); }); } const modelSortSelect = uiContainer.querySelector('#model-sort-order'); if (modelSortSelect) { modelSortSelect.addEventListener('change', function () { browserSet('modelSortOrder', this.value); // Set default direction for latency and age if (this.value === 'latency-low-to-high') { browserSet('sortDirection', 'default'); // Show lowest latency first } else if (this.value === '') { // Age browserSet('sortDirection', 'default'); // Show newest first } refreshModelsUI(); }); } const providerSortSelect = uiContainer.querySelector('#provider-sort'); if (providerSortSelect) { providerSortSelect.addEventListener('change', function () { providerSort = this.value; browserSet('providerSort', providerSort); }); } console.log('UI events wired.'); } // --- Event Handlers --- /** Saves the API key from the input field. */ function saveApiKey() { const apiKeyInput = document.getElementById('openrouter-api-key'); const apiKey = apiKeyInput.value.trim(); let previousAPIKey = browserGet('openrouter-api-key', '').length > 0 ? true : false; if (apiKey) { if (!previousAPIKey) { resetSettings(true); //jank hack to get the UI defaults to load correctly } browserSet('openrouter-api-key', apiKey); showStatus('API key saved successfully!'); fetchAvailableModels(); // Refresh model list //refresh the website location.reload(); } else { showStatus('Please enter a valid API key'); } } /** * Exports the current tweet cache to a JSON file. */ function exportCacheToJson() { if (!tweetCache) { showStatus('Error: Tweet cache not found.', 'error'); return; } try { const cacheData = tweetCache.cache; // Access the raw cache object if (!cacheData || Object.keys(cacheData).length === 0) { showStatus('Cache is empty. Nothing to export.', 'warning'); return; } const jsonString = JSON.stringify(cacheData, null, 2); // Pretty print JSON const blob = new Blob([jsonString], { type: 'application/json;charset=utf-8;' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.setAttribute('href', url); const timestamp = new Date().toISOString().replace(/[:.]/g, '-'); link.setAttribute('download', `tweet-filter-cache-${timestamp}.json`); link.style.visibility = 'hidden'; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); showStatus(`Cache exported successfully (${Object.keys(cacheData).length} items).`); } catch (error) { console.error('Error exporting cache:', error); showStatus('Error exporting cache. Check console for details.', 'error'); } } /** Clears tweet ratings and updates the relevant UI parts. */ function clearTweetRatingsAndRefreshUI() { if (isMobileDevice() || confirm('Are you sure you want to clear all cached tweet ratings?')) { // Clear all ratings tweetCache.clear(true); // Reset pending requests counter pendingRequests = 0; // Clear thread relationships cache if (window.threadRelationships) { window.threadRelationships = {}; browserSet('threadRelationships', '{}'); console.log('Cleared thread relationships cache'); } showStatus('All cached ratings and thread relationships cleared!'); console.log('Cleared all tweet ratings and thread relationships'); // Reset all tweet elements to unrated state and reprocess them if (observedTargetNode) { observedTargetNode.querySelectorAll('article[data-testid="tweet"]').forEach(tweet => { tweet.removeAttribute('data-sloppiness-score'); tweet.removeAttribute('data-rating-status'); tweet.removeAttribute('data-rating-description'); tweet.removeAttribute('data-cached-rating'); const indicator = tweet.querySelector('.score-indicator'); if (indicator) { indicator.remove(); } // Remove from processed set and schedule reprocessing const tweetId = getTweetID(tweet); // Get ID *before* potential errors if (tweetId) { // Ensure we have an ID processedTweets.delete(tweetId); // Explicitly destroy the old ScoreIndicator instance from the registry const indicatorInstance = ScoreIndicatorRegistry.get(tweetId); if (indicatorInstance) { indicatorInstance.destroy(); } scheduleTweetProcessing(tweet); // Now schedule processing } }); } // Reset thread mapping on any conversation containers document.querySelectorAll('div[aria-label="Timeline: Conversation"], div[aria-label^="Timeline: Conversation"]').forEach(conversation => { delete conversation.dataset.threadMapping; delete conversation.dataset.threadMappedAt; delete conversation.dataset.threadMappingInProgress; delete conversation.dataset.threadHist; delete conversation.dataset.threadMediaUrls; }); } } /** Adds a handle from the input field to the blacklist. */ function addHandleFromInput() { const handleInput = document.getElementById('handle-input'); const handle = handleInput.value.trim(); if (handle) { addHandleToBlacklist(handle); handleInput.value = ''; } } /** * Handles changes to general setting inputs/toggles. * @param {HTMLElement} target - The input/toggle element that changed. * @param {string} settingName - The name of the setting (from data-setting). */ function handleSettingChange(target, settingName) { let value; if (target.type === 'checkbox') { value = target.checked; } else { value = target.value; } // Update global variable if it exists if (window[settingName] !== undefined) { window[settingName] = value; } // Save to GM storage browserSet(settingName, value); // Special UI updates for specific settings if (settingName === 'enableImageDescriptions') { const imageModelContainer = document.getElementById('image-model-container'); if (imageModelContainer) { imageModelContainer.style.display = value ? 'block' : 'none'; } showStatus('Image descriptions ' + (value ? 'enabled' : 'disabled')); } if (settingName === 'enableWebSearch') { showStatus('Web search for rating model ' + (value ? 'enabled' : 'disabled')); } if (settingName === 'enableAutoRating') { showStatus('Auto-rating ' + (value ? 'enabled' : 'disabled')); } } /** * Handles changes to parameter control sliders/number inputs. * @param {HTMLElement} target - The slider or number input element. * @param {string} paramName - The name of the parameter (from data-param-name). */ function handleParameterChange(target, paramName) { const row = target.closest('.parameter-row'); if (!row) return; const slider = row.querySelector('.parameter-slider'); const valueInput = row.querySelector('.parameter-value'); const min = parseFloat(slider.min); const max = parseFloat(slider.max); let newValue = parseFloat(target.value); // Clamp value if it's from the number input if (target.type === 'number' && !isNaN(newValue)) { newValue = Math.max(min, Math.min(max, newValue)); } // Update both slider and input if (slider && valueInput) { slider.value = newValue; valueInput.value = newValue; } // Update global variable if (window[paramName] !== undefined) { window[paramName] = newValue; } // Save to GM storage browserSet(paramName, newValue); } /** * Handles changes to the main filter slider. * @param {HTMLElement} slider - The filter slider element. */ function handleFilterSliderChange(slider) { const valueInput = document.getElementById('tweet-filter-value'); currentFilterThreshold = parseInt(slider.value, 10); if (valueInput) { valueInput.value = currentFilterThreshold.toString(); } // Update the gradient position based on the slider value const percentage = (currentFilterThreshold / 10) * 100; slider.style.setProperty('--slider-percent', `${percentage}%`); browserSet('filterThreshold', currentFilterThreshold); applyFilteringToAll(); } /** * Handles changes to the numeric input for filter threshold. * @param {HTMLElement} input - The numeric input element. */ function handleFilterValueInput(input) { let value = parseInt(input.value, 10); // Clamp value between 0 and 10 value = Math.max(0, Math.min(10, value)); input.value = value.toString(); // Update input to clamped value const slider = document.getElementById('tweet-filter-slider'); if (slider) { slider.value = value.toString(); // Update the gradient position const percentage = (value / 10) * 100; slider.style.setProperty('--slider-percent', `${percentage}%`); } currentFilterThreshold = value; browserSet('filterThreshold', currentFilterThreshold); applyFilteringToAll(); } /** * Switches the active tab in the settings panel. * @param {string} tabName - The name of the tab to activate (from data-tab). */ function switchTab(tabName) { const settingsContent = document.querySelector('#settings-container .settings-content'); if (!settingsContent) return; const tabs = settingsContent.querySelectorAll('.tab-content'); const buttons = settingsContent.querySelectorAll('.tab-navigation .tab-button'); tabs.forEach(tab => tab.classList.remove('active')); buttons.forEach(btn => btn.classList.remove('active')); const tabToShow = settingsContent.querySelector(`#${tabName}-tab`); const buttonToActivate = settingsContent.querySelector(`.tab-navigation .tab-button[data-tab="${tabName}"]`); if (tabToShow) tabToShow.classList.add('active'); if (buttonToActivate) buttonToActivate.classList.add('active'); } /** * Toggles the visibility of advanced options sections. * @param {string} contentId - The ID of the content element to toggle. */ function toggleAdvancedOptions(contentId) { const content = document.getElementById(contentId); const toggle = document.querySelector(`[data-toggle="${contentId}"]`); if (!content || !toggle) return; const icon = toggle.querySelector('.advanced-toggle-icon'); const isExpanded = content.classList.toggle('expanded'); if (icon) { icon.classList.toggle('expanded', isExpanded); } // Adjust max-height for smooth animation if (isExpanded) { content.style.maxHeight = content.scrollHeight + 'px'; } else { content.style.maxHeight = '0'; } } /** * Refreshes the entire settings UI to reflect current settings. */ function refreshSettingsUI() { // Update general settings inputs/toggles document.querySelectorAll('[data-setting]').forEach(input => { const settingName = input.dataset.setting; const value = browserGet(settingName, window[settingName]); // Get saved or default value if (input.type === 'checkbox') { input.checked = value; // Trigger change handler for side effects (like hiding/showing image model section) handleSettingChange(input, settingName); } else { input.value = value; } }); // Update parameter controls (sliders/number inputs) document.querySelectorAll('.parameter-row[data-param-name]').forEach(row => { const paramName = row.dataset.paramName; const slider = row.querySelector('.parameter-slider'); const valueInput = row.querySelector('.parameter-value'); const value = browserGet(paramName, window[paramName]); if (slider) slider.value = value; if (valueInput) valueInput.value = value; }); // Update filter slider and value input const filterSlider = document.getElementById('tweet-filter-slider'); const filterValueInput = document.getElementById('tweet-filter-value'); const currentThreshold = browserGet('filterThreshold', '5'); if (filterSlider && filterValueInput) { filterSlider.value = currentThreshold; filterValueInput.value = currentThreshold; // Initialize the gradient position const percentage = (parseInt(currentThreshold, 10) / 10) * 100; filterSlider.style.setProperty('--slider-percent', `${percentage}%`); } // Refresh dynamically populated lists/dropdowns refreshHandleList(document.getElementById('handle-list')); refreshModelsUI(); // Refreshes model dropdowns // Set initial state for advanced sections (collapsed by default unless CSS specifies otherwise) document.querySelectorAll('.advanced-content').forEach(content => { if (!content.classList.contains('expanded')) { content.style.maxHeight = '0'; } }); document.querySelectorAll('.advanced-toggle-icon.expanded').forEach(icon => { // Ensure icon matches state if CSS defaults to expanded if (!icon.closest('.advanced-toggle')?.nextElementSibling?.classList.contains('expanded')) { icon.classList.remove('expanded'); } }); // Refresh instructions history refreshInstructionsHistory(); } /** * Refreshes the handle list UI. * @param {HTMLElement} listElement - The list element to refresh. */ function refreshHandleList(listElement) { if (!listElement) return; listElement.innerHTML = ''; // Clear existing list if (blacklistedHandles.length === 0) { const emptyMsg = document.createElement('div'); emptyMsg.style.cssText = 'padding: 8px; opacity: 0.7; font-style: italic;'; emptyMsg.textContent = 'No handles added yet'; listElement.appendChild(emptyMsg); return; } blacklistedHandles.forEach(handle => { const item = document.createElement('div'); item.className = 'handle-item'; const handleText = document.createElement('div'); handleText.className = 'handle-text'; handleText.textContent = '@' + handle; item.appendChild(handleText); const removeBtn = document.createElement('button'); removeBtn.className = 'remove-handle'; removeBtn.textContent = '×'; removeBtn.title = 'Remove from list'; // removeBtn listener is handled by delegation in initializeEventListeners item.appendChild(removeBtn); listElement.appendChild(item); }); } /** * Updates the model selection dropdowns based on availableModels. */ function refreshModelsUI() { const modelSelectContainer = document.getElementById('model-select-container'); const imageModelSelectContainer = document.getElementById('image-model-select-container'); // Filter and sort models listedModels = [...availableModels]; // Filter free models if needed if (!showFreeModels) { listedModels = listedModels.filter(model => !model.slug.endsWith(':free')); } // Sort models based on current sort order and direction const sortDirection = browserGet('sortDirection', 'default'); const sortOrder = browserGet('modelSortOrder', 'throughput-high-to-low'); // Update toggle button text based on sort order const toggleBtn = document.getElementById('sort-direction'); if (toggleBtn) { switch (sortOrder) { case 'latency-low-to-high': toggleBtn.textContent = sortDirection === 'default' ? 'High-Low' : 'Low-High'; if (sortDirection === 'reverse') listedModels.reverse(); break; case '': // Age toggleBtn.textContent = sortDirection === 'default' ? 'New-Old' : 'Old-New'; if (sortDirection === 'reverse') listedModels.reverse(); break; case 'top-weekly': toggleBtn.textContent = sortDirection === 'default' ? 'Most Popular' : 'Least Popular'; if (sortDirection === 'reverse') listedModels.reverse(); break; default: toggleBtn.textContent = sortDirection === 'default' ? 'High-Low' : 'Low-High'; if (sortDirection === 'reverse') listedModels.reverse(); } } // Update main model selector if (modelSelectContainer) { modelSelectContainer.innerHTML = ''; createCustomSelect( modelSelectContainer, 'model-selector', listedModels.map(model => ({ value: model.endpoint?.model_variant_slug || model.id, label: formatModelLabel(model) })), selectedModel, (newValue) => { selectedModel = newValue; browserSet('selectedModel', selectedModel); showStatus('Rating model updated'); }, 'Search rating models...' ); } // Update image model selector if (imageModelSelectContainer) { const visionModels = listedModels.filter(model => model.input_modalities?.includes('image') || model.architecture?.input_modalities?.includes('image') || model.architecture?.modality?.includes('image') ); imageModelSelectContainer.innerHTML = ''; createCustomSelect( imageModelSelectContainer, 'image-model-selector', visionModels.map(model => ({ value: model.endpoint?.model_variant_slug || model.id, label: formatModelLabel(model) })), selectedImageModel, (newValue) => { selectedImageModel = newValue; browserSet('selectedImageModel', selectedImageModel); showStatus('Image model updated'); }, 'Search vision models...' ); } } /** * Formats a model object into a string for display in dropdowns. * @param {Object} model - The model object from the API. * @returns {string} A formatted label string. */ function formatModelLabel(model) { let label = model.endpoint?.model_variant_slug || model.id || model.name || 'Unknown Model'; let pricingInfo = ''; // Extract pricing const pricing = model.endpoint?.pricing || model.pricing; if (pricing) { const promptPrice = parseFloat(pricing.prompt); const completionPrice = parseFloat(pricing.completion); if (!isNaN(promptPrice)) { pricingInfo += ` - $${(promptPrice * 1e6).toFixed(4)}/mil. tok.-in`; if (!isNaN(completionPrice) && completionPrice !== promptPrice) { pricingInfo += ` $${(completionPrice * 1e6).toFixed(4)}/mil. tok.-out`; } } else if (!isNaN(completionPrice)) { // Handle case where only completion price is available (less common) pricingInfo += ` - $${(completionPrice * 1e6).toFixed(4)}/mil. tok.-out`; } } // Add vision icon const isVision = model.input_modalities?.includes('image') || model.architecture?.input_modalities?.includes('image') || model.architecture?.modality?.includes('image'); if (isVision) { label = '🖼️ ' + label; } return label + pricingInfo; } // --- Custom Select Dropdown Logic (largely unchanged, but included for completeness) --- /** * Creates a custom select dropdown with search functionality. * @param {HTMLElement} container - Container to append the custom select to. * @param {string} id - ID for the root custom-select div. * @param {Array<{value: string, label: string}>} options - Options for the dropdown. * @param {string} initialSelectedValue - Initially selected value. * @param {Function} onChange - Callback function when selection changes. * @param {string} searchPlaceholder - Placeholder text for the search input. */ function createCustomSelect(container, id, options, initialSelectedValue, onChange, searchPlaceholder) { let currentSelectedValue = initialSelectedValue; const customSelect = document.createElement('div'); customSelect.className = 'custom-select'; customSelect.id = id; const selectSelected = document.createElement('div'); selectSelected.className = 'select-selected'; const selectItems = document.createElement('div'); selectItems.className = 'select-items'; selectItems.style.display = 'none'; // Initially hidden const searchField = document.createElement('div'); searchField.className = 'search-field'; const searchInput = document.createElement('input'); searchInput.type = 'text'; searchInput.className = 'search-input'; searchInput.placeholder = searchPlaceholder || 'Search...'; searchField.appendChild(searchInput); selectItems.appendChild(searchField); // Function to render options function renderOptions(filter = '') { // Clear previous options (excluding search field) while (selectItems.childNodes.length > 1) { selectItems.removeChild(selectItems.lastChild); } const filteredOptions = options.filter(opt => opt.label.toLowerCase().includes(filter.toLowerCase()) ); if (filteredOptions.length === 0) { const noResults = document.createElement('div'); noResults.textContent = 'No matches found'; noResults.style.cssText = 'opacity: 0.7; font-style: italic; padding: 10px; text-align: center; cursor: default;'; selectItems.appendChild(noResults); } filteredOptions.forEach(option => { const optionDiv = document.createElement('div'); optionDiv.textContent = option.label; optionDiv.dataset.value = option.value; if (option.value === currentSelectedValue) { optionDiv.classList.add('same-as-selected'); } optionDiv.addEventListener('click', (e) => { e.stopPropagation(); // Prevent closing immediately currentSelectedValue = option.value; selectSelected.textContent = option.label; selectItems.style.display = 'none'; selectSelected.classList.remove('select-arrow-active'); // Update classes for all items selectItems.querySelectorAll('div[data-value]').forEach(div => { div.classList.toggle('same-as-selected', div.dataset.value === currentSelectedValue); }); onChange(currentSelectedValue); }); selectItems.appendChild(optionDiv); }); } // Set initial display text const initialOption = options.find(opt => opt.value === currentSelectedValue); selectSelected.textContent = initialOption ? initialOption.label : 'Select an option'; customSelect.appendChild(selectSelected); customSelect.appendChild(selectItems); container.appendChild(customSelect); // Initial rendering renderOptions(); // Event listeners searchInput.addEventListener('input', () => renderOptions(searchInput.value)); searchInput.addEventListener('click', e => e.stopPropagation()); // Prevent closing selectSelected.addEventListener('click', (e) => { e.stopPropagation(); closeAllSelectBoxes(customSelect); // Close others const isHidden = selectItems.style.display === 'none'; selectItems.style.display = isHidden ? 'block' : 'none'; selectSelected.classList.toggle('select-arrow-active', isHidden); if (isHidden) { searchInput.focus(); searchInput.select(); // Select text for easy replacement renderOptions(searchInput.value); // Re-render in case options changed AND filter by current search term } }); } /** Closes all custom select dropdowns except the one passed in. */ function closeAllSelectBoxes(exceptThisOne = null) { document.querySelectorAll('.custom-select').forEach(select => { if (select === exceptThisOne) return; const items = select.querySelector('.select-items'); const selected = select.querySelector('.select-selected'); if (items) items.style.display = 'none'; if (selected) selected.classList.remove('select-arrow-active'); }); } /** * Resets all configurable settings to their default values. */ function resetSettings(noconfirm = false) { if (noconfirm || confirm('Are you sure you want to reset all settings to their default values? This will not clear your cached ratings, blacklisted handles, or instruction history.')) { tweetCache.clear(); // Define defaults (should match config.js ideally) const defaults = { selectedModel: 'openai/gpt-4.1-nano', selectedImageModel: 'openai/gpt-4.1-nano', enableImageDescriptions: false, enableStreaming: true, enableWebSearch: false, enableAutoRating: true, modelTemperature: 0.5, modelTopP: 0.9, imageModelTemperature: 0.5, imageModelTopP: 0.9, maxTokens: 0, filterThreshold: 5, userDefinedInstructions: 'Rate the tweet on a scale from 1 to 10 based on its clarity, insight, creativity, and overall quality.', modelSortOrder: 'throughput-high-to-low', sortDirection: 'default' }; // Apply defaults for (const key in defaults) { if (window[key] !== undefined) { window[key] = defaults[key]; } browserSet(key, defaults[key]); } refreshSettingsUI(); fetchAvailableModels(); showStatus('Settings reset to defaults'); } } // --- Blacklist/Whitelist Logic --- /** * Adds a handle to the blacklist, saves, and refreshes the UI. * @param {string} handle - The Twitter handle to add (with or without @). */ function addHandleToBlacklist(handle) { handle = handle.trim().replace(/^@/, ''); // Clean handle if (handle === '' || blacklistedHandles.includes(handle)) { showStatus(handle === '' ? 'Handle cannot be empty.' : `@${handle} is already on the list.`); return; } blacklistedHandles.push(handle); browserSet('blacklistedHandles', blacklistedHandles.join('\n')); refreshHandleList(document.getElementById('handle-list')); showStatus(`Added @${handle} to auto-rate list.`); } /** * Removes a handle from the blacklist, saves, and refreshes the UI. * @param {string} handle - The Twitter handle to remove (without @). */ function removeHandleFromBlacklist(handle) { const index = blacklistedHandles.indexOf(handle); if (index > -1) { blacklistedHandles.splice(index, 1); browserSet('blacklistedHandles', blacklistedHandles.join('\n')); refreshHandleList(document.getElementById('handle-list')); showStatus(`Removed @${handle} from auto-rate list.`); } else console.warn(`Attempted to remove non-existent handle: ${handle}`); } // --- Initialization --- /** * Main initialization function for the UI module. */ function initialiseUI() { const uiContainer = injectUI(); if (!uiContainer) return; initializeEventListeners(uiContainer); refreshSettingsUI(); fetchAvailableModels(); // Initialize the floating cache stats badge initializeFloatingCacheStats(); setInterval(updateCacheStatsUI, 3000); // Initialize tracking object for streaming requests if it doesn't exist if (!window.activeStreamingRequests) window.activeStreamingRequests = {}; } /** * Initializes event listeners and functionality for the floating cache stats badge. * This provides real-time feedback when tweets are rated and cached, * even when the settings panel is not open. */ function initializeFloatingCacheStats() { const statsBadge = document.getElementById('tweet-filter-stats-badge'); if (!statsBadge) return; // Add tooltip functionality statsBadge.title = 'Click to open settings'; // Add click event to open settings statsBadge.addEventListener('click', () => { const settingsToggle = document.getElementById('settings-toggle'); if (settingsToggle) { settingsToggle.click(); } }); // Auto-hide after 5 seconds of inactivity let fadeTimeout; const resetFadeTimeout = () => { clearTimeout(fadeTimeout); statsBadge.style.opacity = '1'; fadeTimeout = setTimeout(() => { statsBadge.style.opacity = '0.3'; }, 5000); }; statsBadge.addEventListener('mouseenter', () => { statsBadge.style.opacity = '1'; clearTimeout(fadeTimeout); }); statsBadge.addEventListener('mouseleave', resetFadeTimeout); resetFadeTimeout(); updateCacheStatsUI(); } // ----- ratingEngine.js ----- //src/ratingEngine.js /** * Applies filtering to a single tweet by replacing its contents with a minimal placeholder. * Also updates the rating indicator. * @param {Element} tweetArticle - The tweet element. */ function filterSingleTweet(tweetArticle) { const cell = tweetArticle.closest('div[data-testid="cellInnerDiv"]'); if (!cell) { console.warn("Couldn't find cellInnerDiv for tweet"); return; } const handles = getUserHandles(tweetArticle); const authorHandle = handles.length > 0 ? handles[0] : ''; const isAuthorActuallyBlacklisted = authorHandle && isUserBlacklisted(authorHandle); // Always store tweet data in dataset regardless of filtering const tweetText = getTweetText(tweetArticle) || ''; const mediaUrls = extractMediaLinksSync(tweetArticle); const tid = getTweetID(tweetArticle); cell.dataset.tweetText = tweetText; cell.dataset.authorHandle = authorHandle; cell.dataset.mediaUrls = JSON.stringify(mediaUrls); cell.dataset.tweetId = tid; const cacheUpdateData = { authorHandle: authorHandle, // Ensure authorHandle is cached for fallback individualTweetText: tweetText, individualMediaUrls: mediaUrls, // Use the synchronously extracted mediaUrls timestamp: Date.now() // Update timestamp to reflect new data }; tweetCache.set(tid, cacheUpdateData, false); // Use debounced save if (authorHandle && adAuthorCache.has(authorHandle)) { const tweetId = getTweetID(tweetArticle); if (tweetId) { ScoreIndicatorRegistry.get(tweetId)?.destroy(); } cell.innerHTML = ''; cell.dataset.filtered = 'true'; cell.dataset.isAd = 'true'; return; } const score = parseInt(tweetArticle.dataset.sloppinessScore || '9', 10); const tweetId = getTweetID(tweetArticle); const indicatorInstance = ScoreIndicatorRegistry.get(tweetId, tweetArticle); indicatorInstance?.ensureIndicatorAttached(); const currentFilterThreshold = parseInt(browserGet('filterThreshold', '1')); const ratingStatus = tweetArticle.dataset.ratingStatus; if (indicatorInstance) { indicatorInstance.isAuthorBlacklisted = isAuthorActuallyBlacklisted; } if (isAuthorActuallyBlacklisted) { delete cell.dataset.filtered; cell.dataset.authorBlacklisted = 'true'; if (indicatorInstance) { indicatorInstance._updateIndicatorUI(); } } else { delete cell.dataset.authorBlacklisted; if (ratingStatus === 'pending' || ratingStatus === 'streaming') { delete cell.dataset.filtered; } else if (isNaN(score) || score < currentFilterThreshold) { const existingInstanceToDestroy = ScoreIndicatorRegistry.get(tweetId, tweetArticle); if (existingInstanceToDestroy) { existingInstanceToDestroy.destroy(); } cell.innerHTML = ''; cell.dataset.filtered = 'true'; } else { delete cell.dataset.filtered; if (indicatorInstance) { indicatorInstance._updateIndicatorUI(); } } } } /** * Applies a cached rating (if available) to a tweet article. * Also sets the rating status to 'rated' and updates the indicator. * @param {Element} tweetArticle - The tweet element. * @returns {boolean} True if a cached rating was applied. */ async function applyTweetCachedRating(tweetArticle) { const tweetId = getTweetID(tweetArticle); const handles = getUserHandles(tweetArticle); const userHandle = handles.length > 0 ? handles[0] : ''; // Check cache for rating const cachedRating = tweetCache.get(tweetId); if (cachedRating) { // Skip incomplete streaming entries that don't have a score yet if (cachedRating.streaming === true && (cachedRating.score === undefined || cachedRating.score === null)) { // console.log(`Skipping incomplete streaming cache for ${tweetId}`); return false; } // Ensure the score exists before applying it if (cachedRating.score !== undefined && cachedRating.score !== null) { // Update tweet article dataset properties - this is crucial for filterSingleTweet to work tweetArticle.dataset.sloppinessScore = cachedRating.score.toString(); tweetArticle.dataset.ratingStatus = cachedRating.fromStorage ? 'cached' : 'rated'; tweetArticle.dataset.ratingDescription = cachedRating.description || "not available"; tweetArticle.dataset.ratingReasoning = cachedRating.reasoning || ''; const indicatorInstance = ScoreIndicatorRegistry.get(tweetId, tweetArticle); if (indicatorInstance) { indicatorInstance.rehydrateFromCache(cachedRating); } else { console.warn(`[applyTweetCachedRating] Could not get/create ScoreIndicator for ${tweetId} to apply cached rating.`); return false; // Cannot apply if indicator doesn't exist } filterSingleTweet(tweetArticle); return true; } else if (!cachedRating.streaming) { // Invalid cache entry - missing score console.warn(`Invalid cache entry for tweet ${tweetId}: missing score`); tweetCache.delete(tweetId); return false; } } return false; } // ----- UI Helper Functions ----- /** * Checks if a given user handle is in the blacklist. * @param {string} handle - The Twitter handle. * @returns {boolean} True if blacklisted, false otherwise. */ function isUserBlacklisted(handle) { if (!handle) return false; handle = handle.toLowerCase().trim(); return blacklistedHandles.some(h => h.toLowerCase().trim() === handle); } // Add near the top with other globals const VALID_FINAL_STATES = ['rated', 'cached', 'blacklisted', 'manual']; const VALID_INTERIM_STATES = ['pending', 'streaming']; // Add near other global variables const getFullContextPromises = new Map(); function isValidFinalState(status) { return VALID_FINAL_STATES.includes(status); } function isValidInterimState(status) { return VALID_INTERIM_STATES.includes(status); } async function delayedProcessTweet(tweetArticle, tweetId, authorHandle) { let processingSuccessful = false; try { const apiKey = browserGet('openrouter-api-key', ''); if (!apiKey) { // Just set a default state and stop - no point retrying without an API key tweetArticle.dataset.ratingStatus = 'error'; tweetArticle.dataset.ratingDescription = "No API key"; ScoreIndicatorRegistry.get(tweetId, tweetArticle)?.update({ status: 'error', score: 9, description: "No API key", questions: [], lastAnswer: "" }); filterSingleTweet(tweetArticle); // Don't remove from processedTweets - we don't want to reprocess until they add a key and refresh return; } // Check if this is from a known ad author if (authorHandle && adAuthorCache.has(authorHandle)) { tweetArticle.dataset.ratingStatus = 'rated'; tweetArticle.dataset.ratingDescription = "Advertisement"; tweetArticle.dataset.sloppinessScore = '0'; ScoreIndicatorRegistry.get(tweetId, tweetArticle)?.update({ status: 'rated', score: 0, description: "Advertisement from known ad author", questions: [], lastAnswer: "" }); filterSingleTweet(tweetArticle); processingSuccessful = true; return; } // Check if this is an ad if (isAd(tweetArticle)) { if (authorHandle) { adAuthorCache.add(authorHandle); } tweetArticle.dataset.ratingStatus = 'rated'; tweetArticle.dataset.ratingDescription = "Advertisement"; tweetArticle.dataset.sloppinessScore = '0'; ScoreIndicatorRegistry.get(tweetId, tweetArticle)?.update({ status: 'rated', score: 0, description: "Advertisement", questions: [], lastAnswer: "" }); filterSingleTweet(tweetArticle); processingSuccessful = true; return; } let score = 5; // Default score if rating fails let description = ""; let reasoning = ""; let questions = []; // Initialize questions let lastAnswer = ""; // Initialize lastAnswer try { const cachedRating = tweetCache.get(tweetId); if (cachedRating) { // Handle incomplete streaming entries specifically if (cachedRating.streaming === true && (cachedRating.score === undefined || cachedRating.score === null)) { console.log(`Tweet ${tweetId} has incomplete streaming cache entry, continuing with processing`); } else if (!cachedRating.streaming && (cachedRating.score === undefined || cachedRating.score === null)) { // Invalid cache entry (non-streaming but missing score), delete it console.warn(`Invalid cache entry for tweet ${tweetId}, removing from cache`, cachedRating); tweetCache.delete(tweetId); } } const fullContextWithImageDescription = await getFullContext(tweetArticle, tweetId, apiKey); if (!fullContextWithImageDescription) { throw new Error("Failed to get tweet context"); } let mediaURLs = []; // Add thread relationship context only if is conversation if (document.querySelector('div[aria-label="Timeline: Conversation"]')) { const replyInfo = getTweetReplyInfo(tweetId); if (replyInfo && replyInfo.replyTo) { // Add thread context to cache entry if we process this tweet if (!tweetCache.has(tweetId)) { tweetCache.set(tweetId, {}); } if (!tweetCache.get(tweetId).threadContext) { tweetCache.get(tweetId).threadContext = { replyTo: replyInfo.to, replyToId: replyInfo.replyTo, isRoot: false }; } } } // Get all media URLs and video descriptions from any section const mediaMatches1 = fullContextWithImageDescription.matchAll(/(?:\[MEDIA_URLS\]:\s*\n)(.*?)(?:\n|$)/g); const mediaMatches2 = fullContextWithImageDescription.matchAll(/(?:\[QUOTED_TWEET_MEDIA_URLS\]:\s*\n)(.*?)(?:\n|$)/g); const videoMatches1 = fullContextWithImageDescription.matchAll(/(?:\[VIDEO_DESCRIPTIONS\]:\s*\n)([\s\S]*?)(?:\n\[|$)/g); const videoMatches2 = fullContextWithImageDescription.matchAll(/(?:\[QUOTED_TWEET_VIDEO_DESCRIPTIONS\]:\s*\n)([\s\S]*?)(?:\n\[|$)/g); // Extract image URLs for (const match of mediaMatches1) { if (match[1]) { mediaURLs.push(...match[1].split(', ').filter(url => url.trim())); } } for (const match of mediaMatches2) { if (match[1]) { mediaURLs.push(...match[1].split(', ').filter(url => url.trim())); } } // Extract video descriptions and add them back as formatted items for (const match of videoMatches1) { if (match[1]) { const videoLines = match[1].trim().split('\n').filter(line => line.trim()); videoLines.forEach(line => { if (line.startsWith('[VIDEO ')) { const desc = line.replace(/^\[VIDEO \d+\]: /, ''); mediaURLs.push(`[VIDEO_DESCRIPTION]: ${desc}`); } }); } } for (const match of videoMatches2) { if (match[1]) { const videoLines = match[1].trim().split('\n').filter(line => line.trim()); videoLines.forEach(line => { if (line.startsWith('[VIDEO ')) { const desc = line.replace(/^\[VIDEO \d+\]: /, ''); mediaURLs.push(`[VIDEO_DESCRIPTION]: ${desc}`); } }); } } // Remove duplicates and empty items mediaURLs = [...new Set(mediaURLs.filter(item => item.trim()))]; // ---- Start of new check for media extraction failure ---- const hasPotentialImageContainers = tweetArticle.querySelector('div[data-testid="tweetPhoto"], div[data-testid="videoPlayer"]'); // Check for photo or video containers const imageDescriptionsEnabled = browserGet('enableImageDescriptions', false); if (hasPotentialImageContainers && mediaURLs.length === 0 && (imageDescriptionsEnabled || modelSupportsImages(selectedModel))) { // Heuristic: If image/video containers are in the DOM, but we extracted no media content (URLs or video descriptions), // and either image descriptions are on OR the model supports images (meaning URLs are important), // then it's likely an extraction failure. const warningMessage = `Tweet ${tweetId}: Potential media containers found in DOM, but no media content (URLs or video descriptions) was extracted by getFullContext. Forcing error for retry.`; console.warn(warningMessage); // Throw an error that will be caught by the generic catch block below, // which will set the status to 'error' and trigger the retry mechanism. throw new Error("Media content not extracted despite presence of media containers."); } // ---- End of new check ---- // --- API Call or Fallback --- if (fullContextWithImageDescription) { try { // Check if there's already a complete entry in the cache before calling the API // This handles cases where cache appeared/completed *after* scheduling const currentCache = tweetCache.get(tweetId); // Re-fetch fresh cache state const isCached = currentCache && !currentCache.streaming && currentCache.score !== undefined && currentCache.score !== null; if (isCached) { // Use cached data instead of calling API score = currentCache.score; description = currentCache.description || ""; reasoning = currentCache.reasoning || ""; questions = currentCache.questions || []; // Get questions from cache lastAnswer = currentCache.lastAnswer || ""; // Get answer from cache const mediaUrls = currentCache.mediaUrls || []; // Get mediaUrls from cache processingSuccessful = true; console.log(`Using valid cache entry found for ${tweetId} before API call.`); // Update UI using cached data ScoreIndicatorRegistry.get(tweetId, tweetArticle)?.update({ status: currentCache.fromStorage ? 'cached' : 'rated', score: score, description: description, reasoning: reasoning, questions: questions, lastAnswer: lastAnswer, metadata: currentCache.metadata || null, mediaUrls: mediaUrls // Pass mediaUrls to indicator }); filterSingleTweet(tweetArticle); return; // Exit after using cache } // If not cached, proceed with API call // Filter out video descriptions from mediaURLs before passing to API const filteredMediaURLs = mediaURLs.filter(item => !item.startsWith('[VIDEO_DESCRIPTION]:')); // rateTweetWithOpenRouter now returns questions as well const rating = await rateTweetWithOpenRouter(fullContextWithImageDescription, tweetId, apiKey, filteredMediaURLs, 3, tweetArticle, authorHandle); score = rating.score; description = rating.content; reasoning = rating.reasoning || ''; questions = rating.questions || []; // Get questions from API result lastAnswer = ""; // Reset lastAnswer on new rating // Determine status based on cache/error state let finalStatus = rating.error ? 'error' : 'rated'; if (!rating.error) { const cacheEntry = tweetCache.get(tweetId); if (cacheEntry && cacheEntry.fromStorage) { finalStatus = 'cached'; } else if (rating.cached) { finalStatus = 'cached'; } } // Update tweet dataset tweetArticle.dataset.ratingStatus = finalStatus; tweetArticle.dataset.ratingDescription = description || "not available"; tweetArticle.dataset.sloppinessScore = score?.toString() || ''; tweetArticle.dataset.ratingReasoning = reasoning; // Optionally store questions/answer in dataset if needed // tweetArticle.dataset.ratingQuestions = JSON.stringify(questions); // tweetArticle.dataset.ratingLastAnswer = lastAnswer; // Update UI via ScoreIndicator ScoreIndicatorRegistry.get(tweetId, tweetArticle)?.update({ status: finalStatus, score: score, description: description, reasoning: reasoning, questions: questions, lastAnswer: lastAnswer, metadata: rating.data?.id ? { generationId: rating.data.id } : null, // Pass metadata mediaUrls: mediaURLs // Pass mediaUrls to indicator }); processingSuccessful = !rating.error; // Cache is already updated by rateTweetWithOpenRouter, no need to duplicate here // We rely on rateTweetWithOpenRouter (or its sub-functions) to set the cache correctly, // including score, description, reasoning, questions, lastAnswer, metadata ID etc. filterSingleTweet(tweetArticle); return; // Return after API call attempt } catch (apiError) { console.error(`API error processing tweet ${tweetId}:`, apiError); score = 5; // Fallback score on API error description = `API Error: ${apiError.message}`; reasoning = ''; questions = []; // Clear questions on error lastAnswer = ''; // Clear answer on error processingSuccessful = false; // Update UI to reflect API error state ScoreIndicatorRegistry.get(tweetId, tweetArticle)?.update({ status: 'error', score: score, description: description, questions: [], lastAnswer: "" }); // Update cache error state const errorCacheEntry = tweetCache.get(tweetId) || {}; // Get existing const errorUpdate = { ...errorCacheEntry, // Preserve existing fields like fullContext score: score, // Fallback score description: description, // Error message reasoning: reasoning, questions: questions, lastAnswer: lastAnswer, streaming: false, // error: true, // Consider standardizing 'error' field in TweetCache if used extensively timestamp: Date.now() // Update timestamp }; tweetCache.set(tweetId, errorUpdate, true); // Original used immediate save, retain for errors. filterSingleTweet(tweetArticle); return; // Return after API error handling } } filterSingleTweet(tweetArticle); } catch (error) { console.error(`Generic error processing tweet ${tweetId}: ${error}`, error.stack); if (error.message === "Media content not extracted despite presence of media containers.") { if (tweetCache.has(tweetId)) { tweetCache.delete(tweetId); console.log(`[delayedProcessTweet] Deleted cache for ${tweetId} due to media extraction failure.`); } } // Ensure some error state is shown if processing fails unexpectedly ScoreIndicatorRegistry.get(tweetId, tweetArticle)?.update({ status: 'error', score: 5, description: "Error during processing: " + error.message, questions: [], lastAnswer: "" }); filterSingleTweet(tweetArticle); // Apply filtering even on generic error processingSuccessful = false; } finally { if (!processingSuccessful) { processedTweets.delete(tweetId); } } } catch (error) { console.error(`Error processing tweet ${tweetId}:`, error); const indicatorInstance = ScoreIndicatorRegistry.get(tweetId); if (indicatorInstance) { indicatorInstance.update({ status: 'error', score: 5, description: "Error during processing: " + error.message, questions: [], lastAnswer: "" }); } filterSingleTweet(tweetArticle); processingSuccessful = false; } finally { // Always clean up the processed state if we didn't succeed if (!processingSuccessful) { processedTweets.delete(tweetId); // Check if we need to retry const indicatorInstance = ScoreIndicatorRegistry.get(tweetId); if (indicatorInstance && !isValidFinalState(indicatorInstance.status)) { console.log(`Tweet ${tweetId} processing failed, will retry later`); setTimeout(() => { if (!isValidFinalState(ScoreIndicatorRegistry.get(tweetId)?.status)) { scheduleTweetProcessing(tweetArticle); } }, PROCESSING_DELAY_MS * 2); } } } } // Add near the top with other global variables const MAPPING_INCOMPLETE_TWEETS = new Set(); // Modify scheduleTweetProcessing to check for incomplete mapping async function scheduleTweetProcessing(tweetArticle, rateAnyway = false) { // First, ensure the tweet has a valid ID const tweetId = getTweetID(tweetArticle); if (!tweetId) { return; } // Check if there's already an active streaming request if (window.activeStreamingRequests && window.activeStreamingRequests[tweetId]) { console.log(`Tweet ${tweetId} has an active streaming request, skipping processing`); return; } // Get the author handle const handles = getUserHandles(tweetArticle); const authorHandle = handles.length > 0 ? handles[0] : ''; // Check if this is from a known ad author if (authorHandle && adAuthorCache.has(authorHandle)) { filterSingleTweet(tweetArticle); // This will hide it return; } // Check if this is an ad if (isAd(tweetArticle)) { if (authorHandle) { adAuthorCache.add(authorHandle); } filterSingleTweet(tweetArticle); // This will hide it return; } const existingInstance = ScoreIndicatorRegistry.get(tweetId); if (existingInstance) { existingInstance.ensureIndicatorAttached(); // If we have a valid final state, just filter and return if (isValidFinalState(existingInstance.status)) { filterSingleTweet(tweetArticle); return; } // If we're in a valid interim state and marked as processed, keep waiting if (isValidInterimState(existingInstance.status) && processedTweets.has(tweetId)) { filterSingleTweet(tweetArticle); return; } // If we get here, we either have an error state or invalid state // Remove from processed set to allow reprocessing processedTweets.delete(tweetId); } // Check if we're in a conversation view const conversation = document.querySelector('div[aria-label="Timeline: Conversation"]') || document.querySelector('div[aria-label^="Timeline: Conversation"]'); if (conversation) { // If we're in a conversation and mapping is not complete, mark this tweet for later processing if (!conversation.dataset.threadMapping) { console.log(`[scheduleTweetProcessing] Tweet ${tweetId} waiting for thread mapping`); MAPPING_INCOMPLETE_TWEETS.add(tweetId); const indicatorInstance = ScoreIndicatorRegistry.get(tweetId, tweetArticle); if (indicatorInstance) { indicatorInstance.update({ status: 'pending', score: null, description: 'Waiting for thread context...', questions: [], lastAnswer: "" }); } return; } // If we have thread mapping, check if this tweet is in it try { const mapping = JSON.parse(conversation.dataset.threadMapping); const tweetMapping = mapping.find(m => m.tweetId === tweetId); if (!tweetMapping) { console.log(`[scheduleTweetProcessing] Tweet ${tweetId} not found in thread mapping, waiting`); MAPPING_INCOMPLETE_TWEETS.add(tweetId); const indicatorInstance = ScoreIndicatorRegistry.get(tweetId, tweetArticle); if (indicatorInstance) { indicatorInstance.update({ status: 'pending', score: null, description: 'Waiting for thread context...', questions: [], lastAnswer: "" }); } return; } } catch (e) { console.error("Error parsing thread mapping:", e); } } // Check for a cached rating, but be careful with streaming cache entries if (tweetCache.has(tweetId)) { // Only apply cached rating if it has a valid score and isn't an incomplete streaming entry const isIncompleteStreaming = tweetCache.get(tweetId).streaming === true && (tweetCache.get(tweetId).score === undefined || tweetCache.get(tweetId).score === null); if (!isIncompleteStreaming) { const wasApplied = await applyTweetCachedRating(tweetArticle); if (wasApplied) { return; } } } // Skip if already being processed in this session if (processedTweets.has(tweetId)) { const instance = ScoreIndicatorRegistry.get(tweetId); if (instance) { instance.ensureIndicatorAttached(); if (instance.status === 'pending' || instance.status === 'streaming') { filterSingleTweet(tweetArticle); return; } } // If we get here, the tweet is marked as processed but doesn't have a valid state // Remove it from processed set to allow reprocessing processedTweets.delete(tweetId); } // Immediately mark as pending before scheduling actual processing const indicatorInstance = ScoreIndicatorRegistry.get(tweetId, tweetArticle); if (indicatorInstance) { if (indicatorInstance.status !== 'blacklisted' && indicatorInstance.status !== 'cached' && indicatorInstance.status !== 'rated') { indicatorInstance.update({ status: 'pending', score: null, description: 'Rating scheduled...', questions: [], lastAnswer: "" }); } else { // If already in a final state, ensure it's attached and filtered indicatorInstance.ensureIndicatorAttached(); filterSingleTweet(tweetArticle); return; } } else { console.error(`Failed to get/create indicator instance for tweet ${tweetId} during scheduling.`); } // Add to processed set *after* successfully getting/creating instance if (!processedTweets.has(tweetId)) { processedTweets.add(tweetId); } // Now schedule the actual rating processing setTimeout(() => { try { // Check if auto-rating is enabled, unless we're forcing a manual rate if (!browserGet('enableAutoRating', true) && !rateAnyway) { // If auto-rating is disabled, set status to manual instead of processing const indicatorInstance = ScoreIndicatorRegistry.get(tweetId, tweetArticle); if (indicatorInstance) { indicatorInstance.update({ status: 'manual', score: null, description: 'Click the Rate button to rate this tweet', reasoning: '', questions: [], lastAnswer: "" }); filterSingleTweet(tweetArticle); } return; } delayedProcessTweet(tweetArticle, tweetId, authorHandle); } catch (e) { console.error(`Error in delayed processing of tweet ${tweetId}:`, e); processedTweets.delete(tweetId); } }, PROCESSING_DELAY_MS); } // Add this near the beginning of the file with other global variables // Store reply relationships across sessions let threadRelationships = {}; const THREAD_CHECK_INTERVAL = 500; // Reduce from 2500ms to 500ms const SWEEP_INTERVAL = 500; // Check for unrated tweets twice as often const THREAD_MAPPING_TIMEOUT = 1000; // Reduce from 5000ms to 1000ms let threadMappingInProgress = false; // Add a memory-based flag for more reliable state tracking // Load thread relationships from storage on script initialization function loadThreadRelationships() { try { const savedRelationships = browserGet('threadRelationships', '{}'); threadRelationships = JSON.parse(savedRelationships); console.log(`Loaded ${Object.keys(threadRelationships).length} thread relationships`); } catch (e) { console.error('Error loading thread relationships:', e); threadRelationships = {}; } } // Save thread relationships to persistent storage function saveThreadRelationships() { try { // Limit size to prevent storage issues const relationshipCount = Object.keys(threadRelationships).length; if (relationshipCount > 1000) { // If over 1000, keep only the most recent 500 const entries = Object.entries(threadRelationships); // Sort by timestamp if available, otherwise keep newest entries by default key order entries.sort((a, b) => (b[1].timestamp || 0) - (a[1].timestamp || 0)); const recent = entries.slice(0, 500); threadRelationships = Object.fromEntries(recent); } browserSet('threadRelationships', JSON.stringify(threadRelationships)); } catch (e) { console.error('Error saving thread relationships:', e); } } // Initialize thread relationships on load loadThreadRelationships(); // Add this function to build a complete chain of replies with no depth limit async function buildReplyChain(tweetId, maxDepth = Infinity) { if (!tweetId || maxDepth <= 0) return []; // Start with empty chain const chain = []; // Current tweet ID to process let currentId = tweetId; let depth = 0; // Traverse up the chain recursively while (currentId && depth < maxDepth) { const replyInfo = threadRelationships[currentId]; if (!replyInfo || !replyInfo.replyTo) break; // Add this link in the chain chain.push({ fromId: currentId, toId: replyInfo.replyTo, from: replyInfo.from, to: replyInfo.to }); // Move up the chain currentId = replyInfo.replyTo; depth++; } return chain; } /** * Extracts the full context of a tweet article and returns a formatted string. * * Schema: * [TWEET]: * @[the author of the tweet] * [the text of the tweet] * [MEDIA_DESCRIPTION]: * [IMAGE 1]: [description], [IMAGE 2]: [description], etc. * [QUOTED_TWEET]: * [the text of the quoted tweet] * [QUOTED_TWEET_MEDIA_DESCRIPTION]: * [IMAGE 1]: [description], [IMAGE 2]: [description], etc. * * @param {Element} tweetArticle - The tweet article element. * @param {string} tweetId - The tweet's ID. * @param {string} apiKey - API key used for getting image descriptions. * @returns {Promise