+
+ {/* Research Sources & Citations Count Chips */}
+ {researchSources && researchSources.length > 0 && (
+
+ {/* Research Sources Count Chip */}
+
{
+ // Create and show research sources tooltip
+ const tooltip = document.createElement('div');
+ tooltip.style.cssText = `
+ position: fixed;
+ z-index: 100000;
+ background: white;
+ border: 1px solid #cfe9f7;
+ border-radius: 8px;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+ padding: 16px;
+ max-width: 500px;
+ max-height: 400px;
+ overflow-y: auto;
+ font-size: 12px;
+ `;
+
+ tooltip.innerHTML = `
+
+ Research Sources (${researchSources.length})
+
+ ${researchSources.map((source, idx) => `
+
+
${source.title || 'Untitled'}
+
${source.content || 'No description'}
+
+ ${source.relevance_score ? `Relevance: ${Math.round(source.relevance_score * 100)}%` : ''}
+ ${source.credibility_score ? `Credibility: ${Math.round(source.credibility_score * 100)}%` : ''}
+ ${source.domain_authority ? `Authority: ${Math.round(source.domain_authority * 100)}%` : ''}
+
+
+ `).join('')}
+ `;
+
+ document.body.appendChild(tooltip);
+ const rect = e.currentTarget.getBoundingClientRect();
+ tooltip.style.left = Math.min(rect.left, window.innerWidth - 520) + 'px';
+ tooltip.style.top = (rect.bottom + 8) + 'px';
+
+ (e.currentTarget as ExtendedDivElement)._researchTooltip = tooltip;
+ }}
+ onMouseLeave={(e) => {
+ const target = e.currentTarget as ExtendedDivElement;
+ if (target._researchTooltip) {
+ target._researchTooltip.remove();
+ target._researchTooltip = null;
+ }
+ }}
+ >
+
+ Sources: {researchSources.length}
+
+
+ {/* Citations Count Chip */}
+ {citations && citations.length > 0 && (
+
{
+ // Create and show citations tooltip
+ const tooltip = document.createElement('div');
+ tooltip.style.cssText = `
+ position: fixed;
+ z-index: 100000;
+ background: white;
+ border: 1px solid #cfe9f7;
+ border-radius: 8px;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+ padding: 16px;
+ max-width: 500px;
+ max-height: 400px;
+ overflow-y: auto;
+ font-size: 12px;
+ `;
+
+ tooltip.innerHTML = `
+
+ Citations (${citations.length})
+
+ ${citations.map((citation, idx) => `
+
+
Citation ${idx + 1}
+
Type: ${citation.type || 'inline'}
+ ${citation.reference ? `
Reference: ${citation.reference}
` : ''}
+
+ `).join('')}
+ `;
+
+ document.body.appendChild(tooltip);
+ const rect = e.currentTarget.getBoundingClientRect();
+ tooltip.style.left = Math.min(rect.left, window.innerWidth - 520) + 'px';
+ tooltip.style.top = (rect.bottom + 8) + 'px';
+
+ (e.currentTarget as ExtendedDivElement)._citationsTooltip = tooltip;
+ }}
+ onMouseLeave={(e) => {
+ const target = e.currentTarget as ExtendedDivElement;
+ if (target._citationsTooltip) {
+ target._citationsTooltip.remove();
+ target._citationsTooltip = null;
+ }
+ }}
+ >
+
+ Citations: {citations.length}
+
+ )}
+
+ {/* Search Queries Count Chip */}
+ {searchQueries && searchQueries.length > 0 && (
+
{
+ // Create and show search queries tooltip
+ const tooltip = document.createElement('div');
+ tooltip.style.cssText = `
+ position: fixed;
+ z-index: 100000;
+ background: white;
+ border: 1px solid #cfe9f7;
+ border-radius: 8px;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+ padding: 16px;
+ max-width: 500px;
+ max-height: 400px;
+ overflow-y: auto;
+ font-size: 12px;
+ `;
+
+ tooltip.innerHTML = `
+
+ Search Queries Used (${searchQueries.length})
+
+ ${searchQueries.map((query, idx) => `
+
+
Query ${idx + 1}
+
${query}
+
+ `).join('')}
+ `;
+
+ document.body.appendChild(tooltip);
+ const rect = e.currentTarget.getBoundingClientRect();
+ tooltip.style.left = Math.min(rect.left, window.innerWidth - 520) + 'px';
+ tooltip.style.top = (rect.bottom + 8) + 'px';
+
+ (e.currentTarget as ExtendedDivElement)._searchQueriesTooltip = tooltip;
+ }}
+ onMouseLeave={(e) => {
+ const target = e.currentTarget as ExtendedDivElement;
+ if (target._searchQueriesTooltip) {
+ target._searchQueriesTooltip.remove();
+ target._searchQueriesTooltip = null;
+ }
+ }}
+ >
+
+ Queries: {searchQueries.length}
+
+ )}
+