diff --git a/pages/content/src/render_prescript/src/core/config.ts b/pages/content/src/render_prescript/src/core/config.ts index c1484ed1..a66433da 100644 --- a/pages/content/src/render_prescript/src/core/config.ts +++ b/pages/content/src/render_prescript/src/core/config.ts @@ -33,7 +33,6 @@ export const DEFAULT_CONFIG: FunctionCallRendererConfig = { targetSelectors: ['pre', 'code'], enableDirectMonitoring: true, streamingContainerSelectors: ['.pre', '.code'], - function_result_selector: [], // Empty by default, will be populated by website-specific configs // streamingContainerSelectors: ['.message-content', '.chat-message', '.message-body', '.message'], updateThrottle: 25, streamingMonitoringInterval: 100, @@ -65,7 +64,6 @@ export const WEBSITE_CONFIGS: Array<{ config: { targetSelectors: ['pre'], streamingContainerSelectors: ['.pre'], - function_result_selector: ['div.chat-turn-container'], }, }, { @@ -73,7 +71,6 @@ export const WEBSITE_CONFIGS: Array<{ config: { targetSelectors: ['pre'], streamingContainerSelectors: ['.pre'], - function_result_selector: ['div.group\\/query', '.group\\/query', 'div[class*="group/query"]'], }, }, { @@ -81,15 +78,6 @@ export const WEBSITE_CONFIGS: Array<{ config: { targetSelectors: ['code-block'], streamingContainerSelectors: ['.code-block'], - function_result_selector: ['div.query-content'], - }, - }, - { - urlPattern: 'grok.com', - config: { - targetSelectors: ['code'], - streamingContainerSelectors: ['code'], - function_result_selector: ['div.relative.items-end'], }, }, { @@ -97,11 +85,6 @@ export const WEBSITE_CONFIGS: Array<{ config: { targetSelectors: ['pre'], streamingContainerSelectors: ['pre'], - function_result_selector: [ - 'div.flex.max-w-full.flex-col.relative.overflow-auto.gap-1.items-end', - 'div.flex', - 'div.flex.items-end' - ], }, }, { @@ -109,7 +92,6 @@ export const WEBSITE_CONFIGS: Array<{ config: { targetSelectors: ['pre'], streamingContainerSelectors: ['pre'], - function_result_selector: ['div[data-message-author-role="user"]'], }, }, { @@ -117,7 +99,6 @@ export const WEBSITE_CONFIGS: Array<{ config: { targetSelectors: ['pre'], streamingContainerSelectors: ['pre'], - function_result_selector: ['div[data-message-author-role="user"]'], }, }, { @@ -125,15 +106,6 @@ export const WEBSITE_CONFIGS: Array<{ config: { targetSelectors: ['.codehilite'], streamingContainerSelectors: ['pre'], - function_result_selector: ['div[data-author="user"]'], - }, - }, - { - urlPattern: 'chat.deepseek.com', - config: { - targetSelectors: ['pre'], - streamingContainerSelectors: ['pre'], - function_result_selector: ['div._9663006'], }, }, { @@ -141,7 +113,6 @@ export const WEBSITE_CONFIGS: Array<{ config: { targetSelectors: ['pre'], streamingContainerSelectors: ['pre'], - function_result_selector: ['div[aria-label="Your message"]'], }, }, // Add more website-specific configurations as needed diff --git a/pages/content/src/render_prescript/src/core/types.ts b/pages/content/src/render_prescript/src/core/types.ts index bab6ac0e..e88f2a08 100644 --- a/pages/content/src/render_prescript/src/core/types.ts +++ b/pages/content/src/render_prescript/src/core/types.ts @@ -10,7 +10,6 @@ export interface FunctionCallRendererConfig { targetSelectors: string[]; enableDirectMonitoring: boolean; streamingContainerSelectors: string[]; - function_result_selector?: string[]; updateThrottle: number; streamingMonitoringInterval: number; largeContentThreshold: number; diff --git a/pages/content/src/render_prescript/src/index.ts b/pages/content/src/render_prescript/src/index.ts index 17d043cf..f831b5fe 100644 --- a/pages/content/src/render_prescript/src/index.ts +++ b/pages/content/src/render_prescript/src/index.ts @@ -7,11 +7,6 @@ import { startDirectMonitoring, stopDirectMonitoring, initializeObserver, - processFunctionResults, - checkForUnprocessedFunctionResults, - startFunctionResultMonitoring, - stopFunctionResultMonitoring, - initializeFunctionResultObserver, processUpdateQueue, checkStreamingUpdates, checkStalledStreams, @@ -48,11 +43,6 @@ const initializeRenderer = () => { injectStyles(); processFunctionCalls(); // Initial processing of existing blocks - - // Process function results if selectors are configured - if (CONFIG.function_result_selector && CONFIG.function_result_selector.length > 0) { - processFunctionResults(); // Initial processing of existing function results - } // Register the global event listener for function call rendering before starting the observer // document.addEventListener('render-function-call', (event: Event) => { @@ -70,11 +60,6 @@ const initializeRenderer = () => { // Initialize the mutation observer initializeObserver(); // Start the main MutationObserver startDirectMonitoring(); // Start direct monitoring if enabled - - // Initialize the function result observer if selectors are configured - if (CONFIG.function_result_selector && CONFIG.function_result_selector.length > 0) { - initializeFunctionResultObserver(); // Start the function result observer - } // Make sure stalled stream detection is explicitly started startStalledStreamDetection(); @@ -120,17 +105,6 @@ const configure = (options: Partial) => { } if (userOptions.streamingContainerSelectors !== undefined) CONFIG.streamingContainerSelectors = [...userOptions.streamingContainerSelectors]; - if (userOptions.function_result_selector !== undefined) { - const oldLength = CONFIG.function_result_selector?.length || 0; - CONFIG.function_result_selector = [...userOptions.function_result_selector]; - - // If function_result_selector was empty before and now has items, or vice versa, - // we need to restart monitoring - if ((oldLength === 0 && CONFIG.function_result_selector.length > 0) || - (oldLength > 0 && CONFIG.function_result_selector.length === 0)) { - monitoringRestart = true; - } - } if (userOptions.streamingMonitoringInterval !== undefined) { CONFIG.streamingMonitoringInterval = userOptions.streamingMonitoringInterval; monitoringRestart = true; @@ -162,17 +136,10 @@ const configure = (options: Partial) => { } if (monitoringRestart) { - // Restart function call monitoring stopDirectMonitoring(); if (CONFIG.enableDirectMonitoring) { startDirectMonitoring(); } - - // Restart function result monitoring if selectors are configured - stopFunctionResultMonitoring(); - if (CONFIG.function_result_selector && CONFIG.function_result_selector.length > 0) { - startFunctionResultMonitoring(); - } } console.debug('Function call renderer configuration updated:', CONFIG); @@ -208,12 +175,8 @@ export { styles, processFunctionCalls, checkForUnprocessedFunctionCalls, - processFunctionResults, - checkForUnprocessedFunctionResults, startDirectMonitoring, stopDirectMonitoring, - startFunctionResultMonitoring, - stopFunctionResultMonitoring, configure as configureFunctionCallRenderer, initializeRenderer as initialize, processUpdateQueue as forceStreamingUpdate, diff --git a/pages/content/src/render_prescript/src/observer/functionResultObserver.ts b/pages/content/src/render_prescript/src/observer/functionResultObserver.ts deleted file mode 100644 index 413a2880..00000000 --- a/pages/content/src/render_prescript/src/observer/functionResultObserver.ts +++ /dev/null @@ -1,328 +0,0 @@ -import { CONFIG } from '../core/config'; -import { renderFunctionResult, processedResultElements } from '../renderer/functionResult'; - -// State for processing and observers -let isProcessing = false; -let functionResultObserver: MutationObserver | null = null; - -/** - * Process all function results in the document - * @returns Number of processed function results - */ -export const processFunctionResults = (): number => { - if (!CONFIG.function_result_selector || CONFIG.function_result_selector.length === 0) { - return 0; - } - - return checkForUnprocessedFunctionResults(); -}; - -/** - * Check for unprocessed function results in the document - * @returns Number of processed function results - */ -export const checkForUnprocessedFunctionResults = (): number => { - if (!CONFIG.function_result_selector || CONFIG.function_result_selector.length === 0) { - return 0; - } - - const targetElements = getTargetElements(); - let processedCount = 0; - - // Process each target element - for (const element of targetElements) { - if (!processedResultElements.has(element)) { - const isProcessingRef = { current: isProcessing }; - const success = renderFunctionResult(element, isProcessingRef); - if (success) { - processedCount++; - } - } - } - - if (CONFIG.debug && processedCount > 0) { - console.debug(`Processed ${processedCount} function results`); - } - - return processedCount; -}; - -/** - * Get all elements in the document that might contain function results - * @returns Array of HTML elements - */ -const getTargetElements = (): HTMLElement[] => { - if (!CONFIG.function_result_selector || CONFIG.function_result_selector.length === 0) { - return []; - } - - const elements: HTMLElement[] = []; - - // Get all elements matching the function result selectors - for (const selector of CONFIG.function_result_selector) { - try { - // Handle standard CSS selector - const matches = document.querySelectorAll(selector); - for (const match of matches) { - if (match instanceof HTMLElement) { - elements.push(match); - } - } - - // If the selector contains multiple classes, also try to find elements by individual classes - if (selector.includes('.') && selector.includes(' ')) { - // This might be a complex selector with multiple classes - handleComplexSelector(selector, elements); - } else if (selector.startsWith('div.') && selector.split('.').length > 2) { - // This is a div with multiple classes like 'div.class1.class2.class3' - handleMultiClassSelector(selector, elements); - } - } catch (e) { - console.error(`Invalid selector: ${selector}`, e); - // Try alternative approach for complex selectors - if (selector.includes('.')) { - handleFallbackSelector(selector, elements); - } - } - } - - return elements; -}; - -/** - * Handle a complex selector with multiple parts - * @param selector The complex CSS selector - * @param elements Array to add found elements to - */ -const handleComplexSelector = (selector: string, elements: HTMLElement[]): void => { - // Split by spaces to get individual parts - const parts = selector.split(' '); - - // Start with all elements matching the first part - let currentMatches: Element[] = Array.from(document.querySelectorAll(parts[0])); - - // For each subsequent part, filter the matches - for (let i = 1; i < parts.length; i++) { - const nextPart = parts[i]; - const nextMatches: Element[] = []; - - for (const match of currentMatches) { - // Find children matching the next part - const children = match.querySelectorAll(nextPart); - children.forEach(child => nextMatches.push(child)); - } - - currentMatches = nextMatches; - } - - // Add the final matches to the elements array - for (const match of currentMatches) { - if (match instanceof HTMLElement && !elements.includes(match)) { - elements.push(match); - } - } -}; - -/** - * Handle a selector with multiple classes on a single element - * @param selector The multi-class selector (e.g., 'div.class1.class2.class3') - * @param elements Array to add found elements to - */ -const handleMultiClassSelector = (selector: string, elements: HTMLElement[]): void => { - // Parse the selector to get element type and classes - const [elementType, ...classNames] = selector.split('.'); - - // Find all elements of the specified type - const allElements = document.querySelectorAll(elementType); - - // Filter elements that have all the specified classes - for (const element of allElements) { - if (classNames.every(className => element.classList.contains(className))) { - if (element instanceof HTMLElement && !elements.includes(element)) { - elements.push(element); - } - } - } -}; - -/** - * Fallback method for handling selectors that might be causing errors - * @param selector The problematic selector - * @param elements Array to add found elements to - */ -const handleFallbackSelector = (selector: string, elements: HTMLElement[]): void => { - if (CONFIG.debug) { - console.debug(`Using fallback method for selector: ${selector}`); - } - - // Try to extract the element type and classes - const match = selector.match(/^([a-z]+)\.(.*)/i); - if (!match) return; - - const [, elementType, classesStr] = match; - const classes = classesStr.split('.'); - - // Find all elements of the specified type - const allElements = document.querySelectorAll(elementType); - - // Check each element for the required classes - for (const element of allElements) { - // For complex selectors, we'll be more lenient and match if ANY of the classes match - const hasAnyClass = classes.some(cls => element.classList.contains(cls)); - - if (hasAnyClass && element instanceof HTMLElement && !elements.includes(element)) { - elements.push(element); - } - } -}; - -/** - * Handle DOM changes by checking for new function results - */ -const handleDomChanges = (): void => { - setTimeout(() => { - processFunctionResults(); - }, 0); -}; - -/** - * Start direct monitoring of content for function results - */ -export const startFunctionResultMonitoring = (): void => { - if (!CONFIG.function_result_selector || CONFIG.function_result_selector.length === 0) { - if (CONFIG.debug) { - console.debug('Function result monitoring disabled: no selectors configured'); - } - return; - } - - if (functionResultObserver) { - stopFunctionResultMonitoring(); - } - - if (CONFIG.debug) { - console.debug('Starting function result monitoring'); - } - - // Initial processing - processFunctionResults(); - - // Create a new mutation observer - functionResultObserver = new MutationObserver((mutations) => { - let shouldProcess = false; - let potentialFunctionResult = false; - - // Check if any mutation might contain a function result - for (const mutation of mutations) { - if (mutation.type === 'childList') { - for (const node of Array.from(mutation.addedNodes)) { - if (node.nodeType === Node.ELEMENT_NODE) { - const element = node as Element; - - // Check if the element matches any function result selector - const isTargetElement = CONFIG.function_result_selector?.some(selector => { - try { - return element.matches(selector); - } catch (e) { - return false; - } - }); - - // Check if the element contains any elements matching the function result selectors - const hasTargetElements = CONFIG.function_result_selector?.some(selector => { - try { - return element.querySelectorAll(selector).length > 0; - } catch (e) { - return false; - } - }); - - // Also check if the content of any text nodes might contain function result patterns - if ( - element.textContent && - (element.textContent.includes('')) - ) { - potentialFunctionResult = true; - } - - if (isTargetElement || hasTargetElements || potentialFunctionResult) { - shouldProcess = true; - break; - } - } else if (node.nodeType === Node.TEXT_NODE) { - // Also check text nodes for function result patterns - const textContent = node.textContent || ''; - if ( - textContent.includes('') - ) { - potentialFunctionResult = true; - shouldProcess = true; - break; - } - } - } - } else if (mutation.type === 'characterData') { - // Check if the characterData mutation might be adding function result content - const textContent = mutation.target.textContent || ''; - if ( - textContent.includes('') - ) { - potentialFunctionResult = true; - shouldProcess = true; - } - } - - if (shouldProcess) break; - } - - if (shouldProcess) { - if (potentialFunctionResult && CONFIG.debug) { - console.debug('Potential function result detected, processing DOM changes'); - } - handleDomChanges(); - } - }); - - // Configure the observer to watch for changes to the document - functionResultObserver.observe(document.body, { - childList: true, - subtree: true, - characterData: true, - characterDataOldValue: true, - }); - - if (CONFIG.debug) { - console.debug('Function result monitoring started'); - } -}; - -/** - * Stop direct monitoring of content for function results - */ -export const stopFunctionResultMonitoring = (): void => { - if (functionResultObserver) { - functionResultObserver.disconnect(); - functionResultObserver = null; - - if (CONFIG.debug) { - console.debug('Function result monitoring stopped'); - } - } -}; - -/** - * Initialize the observer for function results - */ -export const initializeFunctionResultObserver = (): void => { - if (!CONFIG.function_result_selector || CONFIG.function_result_selector.length === 0) { - if (CONFIG.debug) { - console.debug('Function result observer not initialized: no selectors configured'); - } - return; - } - - startFunctionResultMonitoring(); -}; diff --git a/pages/content/src/render_prescript/src/observer/index.ts b/pages/content/src/render_prescript/src/observer/index.ts index 60607351..7fa0f432 100644 --- a/pages/content/src/render_prescript/src/observer/index.ts +++ b/pages/content/src/render_prescript/src/observer/index.ts @@ -7,13 +7,6 @@ import { stopDirectMonitoring, initializeObserver, } from './mutationObserver'; -import { - processFunctionResults, - checkForUnprocessedFunctionResults, - startFunctionResultMonitoring, - stopFunctionResultMonitoring, - initializeFunctionResultObserver, -} from './functionResultObserver'; import { checkStalledStreams, detectPreExistingIncompleteBlocks, @@ -33,13 +26,6 @@ export { stopDirectMonitoring, initializeObserver, - // Function result functions - processFunctionResults, - checkForUnprocessedFunctionResults, - startFunctionResultMonitoring, - stopFunctionResultMonitoring, - initializeFunctionResultObserver, - // Streaming and updates processUpdateQueue, checkStreamingUpdates, diff --git a/pages/content/src/render_prescript/src/renderer/functionResult.ts b/pages/content/src/render_prescript/src/renderer/functionResult.ts deleted file mode 100644 index adcf9094..00000000 --- a/pages/content/src/render_prescript/src/renderer/functionResult.ts +++ /dev/null @@ -1,292 +0,0 @@ -import { CONFIG } from '../core/config'; -import { safelySetContent } from '../utils/index'; -import { applyThemeClass } from '../utils/themeDetector'; -import { isDarkTheme } from '../utils/themeDetector'; - -// State management for rendered elements -export const processedResultElements = new WeakSet(); -export const renderedFunctionResults = new Map(); -/** - * Renders a system message box - * - * @param block HTML element to render the system message in - * @param content The system message content - */ -const renderSystemMessageBox = (block: HTMLElement, content: string): void => { - try { - // Generate a unique ID for this block - const blockId = `system-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`; - block.setAttribute('data-block-id', blockId); - - // Create a container for the system message - const systemContainer = document.createElement('div'); - systemContainer.className = 'function-block system-message-container'; - systemContainer.setAttribute('data-block-id', blockId); - - // Apply theme class - if (CONFIG.useHostTheme) { - applyThemeClass(systemContainer); - // Add theme-specific class - if (isDarkTheme()) { - systemContainer.classList.add('theme-dark'); - } else { - systemContainer.classList.add('theme-light'); - } - } - - // Create header - const header = document.createElement('div'); - header.className = 'function-name system-header'; - - // Add system message label - const nameText = document.createElement('div'); - nameText.className = 'function-name-text'; - nameText.textContent = 'MCP SuperAssistant'; - header.appendChild(nameText); - - // Create content area - const contentArea = document.createElement('div'); - contentArea.className = 'param-value system-message-content'; - - // Apply theme-specific styles to content area - if (isDarkTheme()) { - contentArea.style.backgroundColor = '#2d2d2d'; - contentArea.style.border = 'solid rgba(255, 255, 255, 0.1)'; - contentArea.style.color = '#e8eaed'; - // systemContainer.style.borderLeft = 'solid #8ab4f8'; - } else { - contentArea.style.backgroundColor = '#f8f9fa'; - contentArea.style.border = 'solid rgba(0, 0, 0, 0.1)'; - contentArea.style.color = '#202124'; - // systemContainer.style.borderLeft = 'solid #1a73e8'; - } - - // Add the system message content - contentArea.textContent = content; - - // Add components to container - systemContainer.appendChild(header); - systemContainer.appendChild(contentArea); - - // Replace the original block with our rendered version - while (block.firstChild) { - block.removeChild(block.firstChild); - } - - // Append our rendered container - block.appendChild(systemContainer); - } catch (e) { - console.error('[renderSystemMessageBox] Error rendering system message:', e); - } -}; - - -/** - * Main function to render a function result block - * - * @param block HTML element containing a function result - * @param isProcessingRef Reference to processing state - * @returns Boolean indicating whether rendering was successful - */ -export const renderFunctionResult = (block: HTMLElement, isProcessingRef: { current: boolean }): boolean => { - try { - // Skip if already processed - if (processedResultElements.has(block)) { - return false; - } - - // Mark as processed to avoid duplicate processing - processedResultElements.add(block); - - // Get the content of the block - const content = block.textContent || ''; - - // //check if it contains system message tags - // if (content.includes('') || content.includes('')) { - // return false; - // } - - // Check if it contains MCP SuperAssistant system message tags - if (content.includes('') || content.includes('')) { - // Extract content between SYSTEM tags - const systemMatch = content; - // const systemMatch = content.match(/([\s\S]*?)<\/SYSTEM>/); - if (systemMatch) { - const systemContent = systemMatch.trim(); - renderSystemMessageBox(block, systemContent); - return true; - } - } - - // Check if it's a function result - if (!content.includes('')) { - return false; - } - - // Generate a unique ID for this block - const blockId = `result-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`; - block.setAttribute('data-block-id', blockId); - - // Parse the function result content - let resultContent = ''; - try { - // Extract content between function_result tags - const resultMatch = content.match(/]*>([\s\S]*?)<\/function_result>/); - if (resultMatch && resultMatch[1]) { - resultContent = resultMatch[1].trim(); - } - - // Extract call_id if available - const callIdMatch = content.match(/call_id="([^"]*)"/); - const callId = callIdMatch ? callIdMatch[1] : ''; - - // Create a container for the function result - const resultContainer = document.createElement('div'); - resultContainer.className = 'function-block function-result-container'; - resultContainer.setAttribute('data-block-id', blockId); - - // Apply theme class - if (CONFIG.useHostTheme) { - applyThemeClass(resultContainer); - // Add theme-specific class - if (isDarkTheme()) { - resultContainer.classList.add('theme-dark'); - } else { - resultContainer.classList.add('theme-light'); - } - } - - // Create header - const header = document.createElement('div'); - header.className = 'function-name'; - - // Add function result label - const nameText = document.createElement('div'); - nameText.className = 'function-name-text'; - nameText.textContent = 'Function Result'; - header.appendChild(nameText); - - // Add call ID if available - if (callId) { - const callIdElement = document.createElement('div'); - callIdElement.className = 'call-id'; - callIdElement.textContent = callId; - header.appendChild(callIdElement); - } - - // Create content area - const contentArea = document.createElement('div'); - contentArea.className = 'param-value function-result-content'; - - // Apply theme-specific styles to content area - if (isDarkTheme()) { - contentArea.style.backgroundColor = '#2d2d2d'; - contentArea.style.border = '1px solid rgba(255, 255, 255, 0.1)'; - contentArea.style.color = '#e8eaed'; - } else { - contentArea.style.backgroundColor = '#f8f9fa'; - contentArea.style.border = '1px solid rgba(0, 0, 0, 0.1)'; - contentArea.style.color = '#202124'; - } - - // Try to parse the result as JSON - try { - const jsonResult = JSON.parse(resultContent); - - // If it's JSON and has content array, render it properly - if (jsonResult && jsonResult.content && Array.isArray(jsonResult.content)) { - // Render each content item - jsonResult.content.forEach((item: any) => { - if (item.type === 'text') { - const textDiv = document.createElement('div'); - textDiv.className = 'function-result-text'; - textDiv.style.margin = '0 0 10px 0'; - textDiv.textContent = item.text; - contentArea.appendChild(textDiv); - } else if (item.type === 'image' && item.url) { - const imgContainer = document.createElement('div'); - imgContainer.className = 'function-result-image'; - imgContainer.style.margin = '10px 0'; - - const img = document.createElement('img'); - img.src = item.url; - img.alt = item.alt || 'Image'; - img.style.maxWidth = '100%'; - img.style.borderRadius = '4px'; - - imgContainer.appendChild(img); - contentArea.appendChild(imgContainer); - } else if (item.type === 'code' && item.code) { - const codeContainer = document.createElement('div'); - codeContainer.className = 'function-result-code'; - codeContainer.style.margin = '10px 0'; - codeContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.05)'; - codeContainer.style.borderRadius = '4px'; - codeContainer.style.padding = '10px'; - - const pre = document.createElement('pre'); - pre.style.margin = '0'; - pre.style.whiteSpace = 'pre-wrap'; - pre.style.wordBreak = 'break-word'; - pre.style.fontFamily = 'monospace'; - pre.textContent = item.code; - - codeContainer.appendChild(pre); - contentArea.appendChild(codeContainer); - } else { - // For unknown types, just render as JSON - const unknownDiv = document.createElement('div'); - unknownDiv.className = 'function-result-unknown'; - unknownDiv.style.margin = '5px 0'; - unknownDiv.style.fontFamily = 'monospace'; - unknownDiv.style.fontSize = '12px'; - unknownDiv.textContent = JSON.stringify(item, null, 2); - contentArea.appendChild(unknownDiv); - } - }); - } else { - // If it's JSON but not in the expected format, format it nicely - const pre = document.createElement('pre'); - pre.style.margin = '0'; - pre.style.whiteSpace = 'pre-wrap'; - pre.style.wordBreak = 'break-word'; - pre.style.fontFamily = 'monospace'; - pre.textContent = JSON.stringify(jsonResult, null, 2); - contentArea.appendChild(pre); - } - } catch (e) { - // If not JSON, just display as text - contentArea.textContent = resultContent; - } - - // Add components to container - resultContainer.appendChild(header); - resultContainer.appendChild(contentArea); - - // Replace the original block with our rendered version - // Don't use safelySetContent here as it might be causing the [object HTMLDivElement] issue - // Clear the original content first - while (block.firstChild) { - block.removeChild(block.firstChild); - // block. - } - - // Append our rendered container - block.appendChild(resultContainer); - - // Store the rendered block for future reference - renderedFunctionResults.set(blockId, resultContainer); - - return true; - } catch (e) { - console.error('Error parsing function result:', e); - return false; - } - } catch (e) { - console.error('Error rendering function result:', e); - return false; - } finally { - // Reset processing state - isProcessingRef.current = false; - } -}; diff --git a/pages/content/src/render_prescript/src/renderer/index.ts b/pages/content/src/render_prescript/src/renderer/index.ts index 4e435a98..338d1a75 100644 --- a/pages/content/src/render_prescript/src/renderer/index.ts +++ b/pages/content/src/render_prescript/src/renderer/index.ts @@ -1,6 +1,5 @@ // Re-export renderer functionality export * from './functionBlock'; -export * from './functionResult'; export * from './components'; export * from './styles'; diff --git a/pages/content/src/render_prescript/src/renderer/styles.ts b/pages/content/src/render_prescript/src/renderer/styles.ts index 1042ee33..2fe30b78 100644 --- a/pages/content/src/render_prescript/src/renderer/styles.ts +++ b/pages/content/src/render_prescript/src/renderer/styles.ts @@ -423,7 +423,9 @@ export const styles = ` } /* Function results panel styles */ - .mcp-function-results-panel { + .function-results-panel { + background-color: #f8f9fa; + border: 1px solid #dadce0; border-radius: 6px; margin-top: 10px; overflow: auto; @@ -520,10 +522,8 @@ export const styles = ` color: #ffcb6b; } - .function-block.theme-light .mcp-function-results-panel, - .function-block.theme-light .xml-results-panel, - .function-block:not(.theme-dark) .mcp-function-results-panel, - .function-block:not(.theme-dark) .xml-results-panel { + .function-block.theme-light .function-results-panel, + .function-block:not(.theme-dark) .function-results-panel { background-color: #f8f9fa; border: 1px solid #eaecef; color: #202124; @@ -532,13 +532,12 @@ export const styles = ` margin-top: 12px; } - .function-block.theme-dark .mcp-function-results-panel, - .function-block.theme-dark .xml-results-panel { - background-color: #1e1e1e; - border: 1px solid rgba(255,255,255,0.03); + .function-block.theme-dark .function-results-panel { + background-color: #2d2d2d; + border: 1px solid #444; color: #e8eaed; border-radius: 8px; - box-shadow: 0 3px 12px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.15); + box-shadow: 0 2px 6px rgba(0,0,0,0.2); margin-top: 12px; } @@ -553,16 +552,6 @@ export const styles = ` background-color: rgba(242, 139, 130, 0.1); } - /* XML pre element styles */ - .xml-pre { - white-space: pre-wrap; - margin: 0; - padding: 12px; - font-family: inherit; - font-size: 13px; - line-height: 1.5; - } - /* Small layout adjustments for mobile */ @media (max-width: 768px) { .function-block {