Documentation Agent

How can I help you today?

`; document.body.appendChild(panel); repositionPanel(); setupPanelResize(panel); const closeBtn = panel.querySelector('#contextual-ai-close'); const clearBtn = panel.querySelector('#contextual-ai-clear'); if (closeBtn) { closeBtn.addEventListener('click', (e) => { e.stopPropagation(); closePanel(); }); } if (clearBtn) { clearBtn.addEventListener('click', (e) => { e.stopPropagation(); window.contextualAI.clearConversation(); }); } setupNavigationObserver(); } function setupNavigationObserver() { let lastUrl = location.href; const urlObserver = new MutationObserver(() => { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(() => { repositionPanel(); const panel = document.getElementById('contextual-ai-panel'); if (panel && panel.classList.contains('open')) { const bodyContent = document.getElementById('body-content'); if (bodyContent) { bodyContent.classList.add('assistant-open'); } } }, 100); } }); urlObserver.observe(document.body, { childList: true, subtree: true }); } function setupPanelResize(panel) { const handle = panel.querySelector('#contextual-ai-resize-handle'); if (!handle) return; let isResizing = false; let startX = 0; let startWidth = 0; handle.addEventListener('mousedown', (e) => { isResizing = true; startX = e.clientX; startWidth = panel.offsetWidth; handle.classList.add('resizing'); document.body.style.cursor = 'ew-resize'; document.body.style.userSelect = 'none'; e.preventDefault(); }); document.addEventListener('mousemove', (e) => { if (!isResizing) return; if (window.innerWidth > 768) { const deltaX = startX - e.clientX; const newWidth = Math.min(Math.max(startWidth + deltaX, 350), 800); panel.style.width = newWidth + 'px'; CONFIG.panelWidth = newWidth + 'px'; } }); document.addEventListener('mouseup', () => { if (isResizing) { isResizing = false; handle.classList.remove('resizing'); document.body.style.cursor = ''; document.body.style.userSelect = ''; } }); } function attachEventListeners() { if (listenersAttached) return; listenersAttached = true; document.addEventListener('keydown', handleKeyboardShortcut, true); const floatingTrigger = document.getElementById('contextual-ai-floating-trigger'); if (floatingTrigger) { floatingTrigger.addEventListener('click', () => { const input = document.getElementById('contextual-ai-floating-input'); if (input && input.value.trim()) { openPanel(); const chatInput = document.getElementById('contextual-ai-chat-input'); if (chatInput) { chatInput.value = input.value.trim(); input.value = ''; setTimeout(() => sendMessage(), 100); } } else { openPanel(); } }); } const floatingInput = document.getElementById('contextual-ai-floating-input'); if (floatingInput) { floatingInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); document.getElementById('contextual-ai-floating-trigger')?.click(); } }); } const closeButton = document.getElementById('contextual-ai-close'); if (closeButton) { closeButton.addEventListener('click', closePanel); } const sendButton = document.getElementById('contextual-ai-send'); if (sendButton) { sendButton.addEventListener('click', () => { sendMessage(); }); } const chatInput = document.getElementById('contextual-ai-chat-input'); if (chatInput) { chatInput.addEventListener('input', () => { chatInput.style.height = 'auto'; chatInput.style.height = Math.min(chatInput.scrollHeight, 120) + 'px'; }); chatInput.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }); } document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && isOpen) { e.preventDefault(); e.stopPropagation(); closePanel(); } }, true); } function handleKeyboardShortcut(e) { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === CONFIG.keyboardShortcut) { const target = e.target; if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) { return; } e.preventDefault(); e.stopPropagation(); togglePanel(); } } function togglePanel() { if (isOpen) { closePanel(); } else { openPanel(); } } function openPanel() { const panel = document.getElementById('contextual-ai-panel'); if (!panel) return; repositionPanel(); const bodyContent = document.getElementById('body-content'); if (bodyContent) { bodyContent.classList.add('assistant-open'); } applyContentWrapperStyles(); panel.style.width = CONFIG.panelWidth; panel.classList.add('open'); isOpen = true; const floatingBar = document.getElementById('contextual-ai-floating-bar'); if (floatingBar) { floatingBar.style.display = 'none'; } const mobileIcon = document.getElementById('contextual-ai-mobile-icon'); if (mobileIcon) mobileIcon.style.display = 'none'; setTimeout(() => { const chatInput = document.getElementById('contextual-ai-chat-input'); if (chatInput) { chatInput.focus(); } }, CONFIG.animationDuration); } function applyContentWrapperStyles() { const info = getContentContainer(); if (!info || !info.insertAfter) return; info.insertAfter.style.flex = '1'; info.insertAfter.style.minWidth = '0'; info.insertAfter.style.width = 'auto'; } function removeContentWrapperStyles() { const info = getContentContainer(); if (!info || !info.insertAfter) return; info.insertAfter.style.flex = ''; info.insertAfter.style.minWidth = ''; info.insertAfter.style.width = ''; } function closePanel() { const panel = document.getElementById('contextual-ai-panel'); if (!panel) return; const bodyContent = document.getElementById('body-content'); if (bodyContent) { bodyContent.classList.remove('assistant-open'); } removeContentWrapperStyles(); panel.style.removeProperty('width'); panel.classList.remove('open'); isOpen = false; const floatingBar = document.getElementById('contextual-ai-floating-bar'); if (floatingBar) { floatingBar.style.display = 'flex'; } const mobileIcon = document.getElementById('contextual-ai-mobile-icon'); if (mobileIcon) mobileIcon.style.display = ''; } function generateConversationId() { return 'conv_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9); } async function performKeywordSearch(query, inputElement, loadingId) { if (activeKeywordSearch) { activeKeywordSearch.abort(); } activeKeywordSearch = new AbortController(); try { const response = await fetch(CONFIG.keywordSearchApi, { method: 'POST', headers: { 'Authorization': CONFIG.keywordSearchAuth, 'Content-Type': 'application/json', 'tr-dataset': CONFIG.keywordSearchDataset, 'x-api-version': 'V2', }, body: JSON.stringify({ query: query, search_type: 'fulltext', extend_results: true, highlight_options: { highlight_window: 10, highlight_max_num: 1, highlight_max_length: 2, highlight_strategy: 'exactmatch', highlight_delimiters: ['?', ',', '.', '!', '\n'], }, score_threshold: 0.2, filters: { must_not: [{ field: 'tag_set', match: ['code'] }], }, page_size: 6, group_size: 3, }), signal: activeKeywordSearch.signal, }); if (response.ok) { const data = await response.json(); displayKeywordResults(data, inputElement, loadingId); } else { console.error('Keyword search failed:', response.status); } } catch (error) { if (error.name !== 'AbortError') { console.error('Keyword search error:', error); } } } function displayKeywordResults(data, inputElement, loadingId) { const results = data.results || []; let container = getOrCreateKeywordContainer(inputElement, loadingId); if (!container) return; if (results.length === 0) { container.innerHTML = '

No results found

'; container.classList.add('visible'); return; } const totalResults = results.reduce((sum, group) => sum + (group.chunks?.length || 0), 0); let html = `

${totalResults} ${totalResults === 1 ? 'result' : 'results'}

`; results.forEach(group => { if (!group.chunks || group.chunks.length === 0) return; group.chunks.forEach(item => { const chunk = item.chunk; const link = normalizeDocLink(chunk.link) || '#'; const metadata = chunk.metadata || {}; const breadcrumbs = metadata.breadcrumbs || []; const title = metadata.title || group.group.name || 'Document'; const chunkHtml = chunk.chunk_html || ''; const openapiMatch = metadata.openapi?.match(/(GET|POST|PUT|DELETE|PATCH)/i); const httpMethod = openapiMatch ? openapiMatch[1].toUpperCase() : null; const isApiEndpoint = breadcrumbs[0] === 'API' || metadata.openapi; const iconClass = isApiEndpoint ? 'api-icon' : ''; const iconSvg = isApiEndpoint ? `` : ``; const breadcrumbHtml = breadcrumbs .map((crumb, idx) => { const separator = idx < breadcrumbs.length - 1 ? '' : ''; return `${separator}`; }) .join(''); const methodPillHtml = httpMethod ? `

${httpMethod}

` : ''; html += ` ${iconSvg}

`; }); }); html += '

'; container.innerHTML = html; container.classList.add('visible'); } function getOrCreateKeywordContainer(inputElement, loadingId) { const isFloatingInput = inputElement && inputElement.id === 'contextual-ai-floating-input'; const isChatInput = inputElement && inputElement.id === 'contextual-ai-chat-input'; if (isFloatingInput) { const floatingBar = document.getElementById('contextual-ai-floating-bar'); if (!floatingBar) return null; let container = floatingBar.querySelector('.contextual-ai-keyword-search-results'); if (!container) { container = document.createElement('div'); container.className = 'contextual-ai-keyword-search-results'; floatingBar.appendChild(container); } return container; } else if (isChatInput) { const loadingDiv = loadingId ? document.getElementById(loadingId) : null; if (!loadingDiv) return null; const container = document.createElement('div'); container.className = 'contextual-ai-keyword-search-results contextual-ai-keyword-inline'; loadingDiv.appendChild(container); return container; } return null; } function clearKeywordResults(inputElement) { const isFloatingInput = !inputElement || inputElement.id === 'contextual-ai-floating-input'; const isChatInput = !inputElement || inputElement.id === 'contextual-ai-chat-input'; if (isFloatingInput) { const floatingBar = document.getElementById('contextual-ai-floating-bar'); if (floatingBar) { const container = floatingBar.querySelector('.contextual-ai-keyword-search-results'); if (container) { container.classList.remove('visible'); container.innerHTML = ''; } } } if (isChatInput) { // Inline results are fresh nodes each time — just remove them from the DOM const messagesContainer = document.getElementById('contextual-ai-messages'); if (messagesContainer) { messagesContainer.querySelectorAll('.contextual-ai-keyword-inline').forEach(c => c.remove()); } } } async function sendMessage() { const chatInput = document.getElementById('contextual-ai-chat-input'); if (!chatInput) return; const message = chatInput.value.trim(); if (!message) return; chatInput.value = ''; chatInput.style.height = 'auto'; const welcome = document.querySelector('.contextual-ai-welcome'); if (welcome) { welcome.remove(); } // Clear any previous keyword results before showing fresh ones clearKeywordResults(chatInput); conversationHistory.push({ role: 'user', content: message }); addMessage('user', message); if (!conversationId) { conversationId = generateConversationId(); } const loadingId = addMessage('assistant', '', true); // Run keyword search in parallel — results appear between user msg and AI dots performKeywordSearch(message, chatInput, loadingId); try { await streamResponse(loadingId); } catch (error) { console.error('Error streaming response:', error); updateMessage(loadingId, 'assistant', 'Sorry, I encountered an error. Please try again.', [], true); } } async function streamResponse(messageId) { const url = `${CONFIG.apiBaseUrl}/v1/agents/${CONFIG.agentId}/query/acl`; const response = await fetch(url, { method: 'POST', headers: { 'Authorization': `Bearer ${CONFIG.apiKey}`, 'Content-Type': 'application/json', }, body: JSON.stringify({ messages: conversationHistory, stream: true, }), }); if (!response.ok) { const errorText = await response.text(); console.error('API Error Response:', errorText); throw new Error(`API responded with ${response.status}: ${errorText}`); } const reader = response.body.getReader(); const decoder = new TextDecoder(); let buffer = ''; let accumulatedContent = ''; let retrievals = []; let apiMessageId = null; let workflowState = { currentStage: null, activities: [], isComplete: false }; function updateWorkflow() { updateMessage(messageId, 'assistant', accumulatedContent, retrievals, false, apiMessageId, workflowState); } while (true) { const { done, value } = await reader.read(); if (done) break; buffer += decoder.decode(value, { stream: true }); const lines = buffer.split('\n'); buffer = lines.pop() || ''; for (const line of lines) { if (!line.trim() || line.startsWith(':')) continue; if (line.startsWith('data: ')) { try { const data = JSON.parse(line.slice(6)); const eventType = data.event; const eventData = data.data || {}; if (eventType === 'metadata') { if (eventData.message_id) { apiMessageId = eventData.message_id; const messageDiv = document.getElementById(messageId); if (messageDiv) { messageDiv.setAttribute('data-api-message-id', apiMessageId); } if (retrievals.length > 0) { updateMessage(messageId, 'assistant', accumulatedContent, retrievals, false, apiMessageId, workflowState); } } } else if (eventType === 'retrievals') { const contents = eventData.contents || []; if (contents.length > 0) { retrievals = contents.map(r => ({ title: r.doc_name || r.ctxl_metadata?.file_name || r.document_name || 'Source', url: normalizeDocLink(r.url) || '#', contentId: r.content_id, datastoreId: r.datastore_id || r.ctxl_metadata?.datastore_id, })); updateMessage(messageId, 'assistant', accumulatedContent, retrievals, false, apiMessageId, workflowState); // Prefetch preview data in background for instant access retrievals.forEach(source => { if (source.datastoreId && source.contentId) { window.contextualAI.prefetchSourcePreview(source.datastoreId, source.contentId); } }); } } else if (eventType === 'message_delta') { const delta = eventData.delta || ''; if (delta) { accumulatedContent += delta; updateMessage(messageId, 'assistant', accumulatedContent, retrievals, false, apiMessageId, workflowState); } } else if (eventType === 'stepping') { workflowState.currentStage = eventData.type; updateWorkflow(); } else if (eventType === 'tool_call_start') { workflowState.activities.push({ id: eventData.tool_id, type: 'tool', name: eventData.tool_name, status: 'running', args: eventData.tool_args, timestamp: Date.now() }); updateWorkflow(); } else if (eventType === 'tool_call_end') { const activity = workflowState.activities.find(a => a.id === eventData.tool_id); if (activity) { activity.status = eventData.successful ? 'completed' : 'failed'; activity.output = eventData.tool_output; activity.error = eventData.successful ? null : eventData.error; } updateWorkflow(); } else if (eventType === 'thinking_start') { workflowState.activities.push({ id: eventData.think_id, type: 'thinking', name: 'Thinking', status: 'running', content: '', timestamp: Date.now() }); updateWorkflow(); } else if (eventType === 'thinking_delta') { const activity = workflowState.activities.find(a => a.id === eventData.think_id); if (activity) { activity.content += eventData.delta; } updateWorkflow(); } else if (eventType === 'thinking_end') { const activity = workflowState.activities.find(a => a.id === eventData.think_id); if (activity) { activity.status = 'completed'; activity.summary = eventData.thinking_summary; } updateWorkflow(); } else if (eventType === 'step_start') { workflowState.activities.push({ id: eventData.step_id, type: 'workflow', name: eventData.step_name || 'Workflow Step', status: 'running', timestamp: Date.now() }); updateWorkflow(); } else if (eventType === 'step_end') { const activity = workflowState.activities.find(a => a.id === eventData.step_id); if (activity) { activity.status = eventData.status || 'completed'; } updateWorkflow(); } else if (eventType === 'message_complete' || eventType === 'end') { workflowState.isComplete = true; updateWorkflow(); if (accumulatedContent) { conversationHistory.push({ role: 'assistant', content: accumulatedContent }); } break; } else if (eventType === 'error') { const errorMsg = eventData.message || 'Unknown error'; throw new Error(errorMsg); } } catch (e) { console.warn('Failed to parse SSE event:', e); } } } } if (accumulatedContent) { updateMessage(messageId, 'assistant', accumulatedContent, retrievals, false, apiMessageId, workflowState); } else { updateMessage(messageId, 'assistant', 'No response received from the agent.', [], true, apiMessageId, workflowState); } } function formatActivityName(name) { if (!name) return 'Step'; return name .replace(/_/g, ' ') .replace(/step$/i, '') .trim() .split(' ') .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) .join(' ') || 'Step'; } function getActivityIcon(type, name) { const lower = (name || '').toLowerCase(); if (type === 'thinking' || lower.includes('thinking')) { return ``; } if (lower.includes('search') || lower.includes('document')) { return ``; } if (lower.includes('database') || lower.includes('sql') || lower.includes('query')) { return ``; } return ``; } function addMessage(role, content, isLoading = false) { const messagesContainer = document.getElementById('contextual-ai-messages'); if (!messagesContainer) return null; const messageId = `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`; const messageDiv = document.createElement('div'); messageDiv.id = messageId; messageDiv.className = `contextual-ai-message contextual-ai-message-${role}`; const loadingPhrases = [ "Searching docs...", "Analyzing user request..", "Reformulating query...", ]; if (isLoading) { const phrase = loadingPhrases[Math.floor(Math.random() * loadingPhrases.length)]; messageDiv.innerHTML = `

${phrase}

`; } else { messageDiv.innerHTML = `

${formatMessage(content)}

`; } messagesContainer.appendChild(messageDiv); scrollToBottom(); return messageId; } function updateMessage(messageId, role, content, sources = [], isError = false, apiMessageId = null, workflowState = null) { const messageDiv = document.getElementById(messageId); if (!messageDiv) return; const errorClass = isError ? ' contextual-ai-message-error' : ''; let workflowHtml = ''; if (workflowState && (workflowState.currentStage || workflowState.activities.length > 0)) { const stageLabels = { retrieval: "Retrieving documents...", generation: "Generating response...", attribution: "Adding citations...", post_processing: "Processing...", finalization: "Finalizing...", }; const stageText = stageLabels[workflowState.currentStage] || workflowState.currentStage || ''; const isRunning = !workflowState.isComplete; const completedCount = workflowState.activities.filter(a => a.status === 'completed' || a.status === 'failed').length; const totalCount = workflowState.activities.length; const activityItems = workflowState.activities.map((activity, index) => { const isActRunning = activity.status === 'running'; const formattedName = formatActivityName(activity.name); const icon = getActivityIcon(activity.type, activity.name); const activityContent = activity.content || activity.summary || activity.output || ''; const hasContent = activityContent.trim().length > 0; return `

${icon} ${formattedName} ${isActRunning ? '

' : ''} ${hasContent ? ` ` : ''}

${hasContent ? `

${escapeHtml(activityContent)}

` : ''}

`; }).join(''); workflowHtml = `

${stageText && isRunning ? `

${stageText}

` : ''} ${totalCount > 0 ? `

${completedCount} of ${totalCount} steps

` : ''}

${activityItems}

`; } let sourcesHtml = ''; if (sources && sources.length > 0) { const sourceItems = sources .map((src, index) => ` `) .join(''); sourcesHtml = `

${sourceItems}

`; } const formattedContent = formatMessage(content); const showContent = formattedContent.trim().length > 0; let workflowContainer = document.getElementById(`workflow-container-${messageId}`); let sourcesContainer = document.getElementById(`sources-container-${messageId}`); let contentContainer = document.getElementById(`content-container-${messageId}`); if (!contentContainer) { messageDiv.innerHTML = `

${formattedContent}

`; workflowContainer = document.getElementById(`workflow-container-${messageId}`); sourcesContainer = document.getElementById(`sources-container-${messageId}`); contentContainer = document.getElementById(`content-container-${messageId}`); } const currentWorkflowDetails = document.getElementById(`workflow-details-${messageId}`); const isWorkflowExpanded = currentWorkflowDetails?.classList.contains('expanded'); const expandedActivities = new Set(); if (currentWorkflowDetails) { currentWorkflowDetails.querySelectorAll('.contextual-ai-activity-item.expanded').forEach(item => { const id = item.getAttribute('data-activity-id'); if (id) expandedActivities.add(id); }); } if (workflowContainer && workflowHtml) { const stateHash = JSON.stringify(workflowState); if (workflowContainer.getAttribute('data-state-hash') !== stateHash) { const existingSection = workflowContainer.querySelector('.contextual-ai-workflow-section'); if (existingSection) { const isRunning = !workflowState.isComplete; const stageLabel = existingSection.querySelector('.contextual-ai-workflow-stage span'); if (stageLabel) { const stageLabels = { retrieval: "Retrieving docs...", generation: "Generating response...", attribution: "Adding citations...", post_processing: "Processing...", finalization: "Finalizing..." }; stageLabel.textContent = stageLabels[workflowState.currentStage] || workflowState.currentStage || ''; } const summary = existingSection.querySelector('.contextual-ai-workflow-summary'); if (summary) { const completedCount = workflowState.activities.filter(a => a.status === 'completed' || a.status === 'failed').length; summary.textContent = `${completedCount} of ${workflowState.activities.length} steps`; } const iconContainer = existingSection.querySelector('.contextual-ai-workflow-status-icon'); if (iconContainer) { const wasRunning = iconContainer.classList.contains('running'); if (wasRunning !== isRunning) { iconContainer.className = `contextual-ai-workflow-status-icon ${isRunning ? 'running' : 'completed'}`; iconContainer.innerHTML = isRunning ? '

' : ''; } } const details = existingSection.querySelector('.contextual-ai-workflow-details'); if (details) { details.innerHTML = workflowState.activities.map((activity) => { const isActRunning = activity.status === 'running'; const formattedName = formatActivityName(activity.name); const icon = getActivityIcon(activity.type, activity.name); const activityContent = activity.content || activity.summary || activity.output || ''; const hasContent = activityContent.trim().length > 0; const isExpanded = expandedActivities.has(activity.id); return `

${icon} ${formattedName} ${isActRunning ? '

' : ''} ${hasContent ? ` ` : ''}

${hasContent ? `

${escapeHtml(activityContent)}

` : ''}

`; }).join(''); if (isWorkflowExpanded) details.classList.add('expanded'); } } else { workflowContainer.innerHTML = workflowHtml; } workflowContainer.setAttribute('data-state-hash', stateHash); } } if (sourcesContainer) { const sourcesHash = JSON.stringify(sources); if (sourcesContainer.getAttribute('data-sources-hash') !== sourcesHash) { sourcesContainer.innerHTML = sourcesHtml; sourcesContainer.setAttribute('data-sources-hash', sourcesHash); } } if (contentContainer) { if (contentContainer.innerHTML !== formattedContent) { contentContainer.innerHTML = formattedContent; contentContainer.className = `contextual-ai-message-content${errorClass}`; contentContainer.style.display = showContent ? 'block' : 'none'; } } if (sources && sources.length > 0) { messageDiv.setAttribute('data-sources', JSON.stringify(sources)); } if (apiMessageId) { messageDiv.setAttribute('data-api-message-id', apiMessageId); } const citations = messageDiv.querySelectorAll('.contextual-ai-citation'); citations.forEach(citation => { citation.addEventListener('click', () => { const citationNumber = parseInt(citation.getAttribute('data-citation-number'), 10); const sourceIndex = citationNumber - 1; if (sourceIndex >= 0 && sourceIndex < sources.length) { window.contextualAI.showSourcePreview(messageId, sourceIndex); } }); }); scrollToBottom(); } function formatMessage(content) { if (!content) return ''; const codeBlocks = []; let formatted = content.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, lang, code) => { const placeholder = `__CODE_BLOCK_${codeBlocks.length}__`; codeBlocks.push({ lang: lang || '', code: code }); return placeholder; }); const tables = []; formatted = formatted.replace(/(\|.+\|[\r\n]+\|[-:\s|]+\|[\r\n]+(?:\|.+\|[\r\n]+)+)/g, (match) => { const placeholder = `__TABLE_${tables.length}__`; tables.push(match.trim()); return '\n' + placeholder + '\n'; }); formatted = formatted .replace(/^#### +(.+)$/gm, '$1') .replace(/^### +(.+)$/gm, '$1') .replace(/^## +(.+)$/gm, '$1') .replace(/^# +(.+)$/gm, '$1') .replace(/\*\*(.*?)\*\*/g, '$1') .replace(/\*(.*?)\*/g, '$1') .replace(/`([^`]+)`/g, '$1'); formatted = formatted.replace( /(^|\s)(https?:\/\/[^\s<]+)/g, '$1$2' ); formatted = formatted.replace(/\n/g, '
'); formatted = formatted.replace( /\[(\d+)\]/g, '[$1]' ); tables.forEach((tableMarkdown, index) => { const tableHtml = parseMarkdownTable(tableMarkdown); formatted = formatted.replace(`__TABLE_${index}__`, tableHtml); }); codeBlocks.forEach((block, index) => { const langClass = block.lang ? ` class="language-${block.lang}"` : ''; const codeHtml = `

${escapeHtml(block.code.trim())}

`; formatted = formatted.replace(`__CODE_BLOCK_${index}__`, codeHtml); }); return formatted; } function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } function parseMarkdownTable(markdown) { const lines = markdown.trim().split(/[\r\n]+/); if (lines.length < 3) return markdown; const headerLine = lines[0]; const separatorLine = lines[1]; const dataLines = lines.slice(2); const headers = headerLine.split('|').map(h => h.trim()).filter(h => h); const alignments = separatorLine.split('|').map(s => { s = s.trim(); if (s.startsWith(':') && s.endsWith(':')) return 'center'; if (s.endsWith(':')) return 'right'; return 'left'; }).filter((_, i) => i < headers.length); const rows = dataLines.map(line => line.split('|').map(cell => cell.trim()).filter(cell => cell) ); function formatCell(content) { let formatted = content .replace(/\*\*(.*?)\*\*/g, '$1') .replace(/\*(.*?)\*/g, '$1') .replace(/\[(\d+)\]/g, '[$1]'); return formatted; } let html = '

'; headers.forEach((header, i) => { const align = alignments[i] || 'left'; html += ``; }); html += ''; rows.forEach(row => { html += ''; row.forEach((cell, i) => { const align = alignments[i] || 'left'; html += ``; }); html += ''; }); html += '

${formatCell(header)}
${formatCell(cell)}

'; return html; } function scrollToBottom() { const messagesContainer = document.getElementById('contextual-ai-messages'); if (!messagesContainer) return; const lastMsg = messagesContainer.querySelector('.contextual-ai-message:last-child'); if (lastMsg?.querySelector('.contextual-ai-keyword-inline')) { const contentDiv = lastMsg.querySelector('.contextual-ai-message-content'); if (contentDiv) { const contentRect = contentDiv.getBoundingClientRect(); const containerRect = messagesContainer.getBoundingClientRect(); const delta = contentRect.bottom - containerRect.bottom; if (delta > 0) { messagesContainer.scrollTop += delta; } return; } } messagesContainer.scrollTop = messagesContainer.scrollHeight; } window.contextualAI = window.contextualAI || {}; window.contextualAI.toggleSources = function(messageId) { const messageDiv = document.getElementById(messageId); if (!messageDiv) return; const sourcesDiv = messageDiv.querySelector('.contextual-ai-sources'); if (!sourcesDiv) return; sourcesDiv.classList.toggle('expanded'); }; window.contextualAI.toggleWorkflow = function(messageId) { const details = document.getElementById(`workflow-details-${messageId}`); if (details) { details.classList.toggle('expanded'); } }; window.contextualAI.toggleActivity = function(messageId, activityId) { const details = document.getElementById(`workflow-details-${messageId}`); if (!details) return; const item = details.querySelector(`[data-activity-id="${activityId}"]`); if (item) { item.classList.toggle('expanded'); } }; window.contextualAI.prefetchSourcePreview = async function(datastoreId, contentId) { const cacheKey = `${datastoreId}-${contentId}`; if (previewCache.has(cacheKey)) return; // Already cached try { const url = `${CONFIG.apiBaseUrl}/v1/datastores/${datastoreId}/contents/${contentId}/metadata`; const response = await fetch(url, { headers: { 'Authorization': `Bearer ${CONFIG.apiKey}`, }, }); if (response.ok) { const data = await response.json(); previewCache.set(cacheKey, { content_metadatas: [data], fromFallback: true }); } } catch (e) { // Silent fail for prefetch } }; let _previewOpen = false; window.contextualAI.showSourcePreview = async function(messageId, sourceIndex) { if (_previewOpen || document.querySelector('.contextual-ai-modal-overlay')) return; _previewOpen = true; const messageDiv = document.getElementById(messageId); if (!messageDiv) return; const sourcesData = messageDiv.getAttribute('data-sources'); const apiMessageId = messageDiv.getAttribute('data-api-message-id'); if (!sourcesData) return; try { const sources = JSON.parse(sourcesData); const source = sources[sourceIndex]; if (!source) return; const modal = document.createElement('div'); modal.className = 'contextual-ai-modal-overlay'; modal.innerHTML = ` `; document.body.appendChild(modal); modal.addEventListener('click', (e) => { if (e.target === modal) { window.contextualAI.closeModal(); } }); if (source.contentId && apiMessageId) { try { let data = null; // Check cache first (from prefetch) if (source.datastoreId) { const cacheKey = `${source.datastoreId}-${source.contentId}`; const cached = previewCache.get(cacheKey); if (cached) { console.log('Using cached preview data'); data = cached; } } // If not cached, fetch from API if (!data) { const url = new URL(`${CONFIG.apiBaseUrl}/v1/agents/${CONFIG.agentId}/query/${apiMessageId}/retrieval/info`); url.searchParams.append('content_ids', source.contentId); const response = await fetch(url.toString(), { headers: { 'Authorization': `Bearer ${CONFIG.apiKey}`, }, }); if (response.ok) { data = await response.json(); } else if (response.status === 404 && source.datastoreId) { // Fallback: Try datastore endpoint (works during streaming) console.log('Message endpoint returned 404, trying datastore fallback...'); const fallbackUrl = `${CONFIG.apiBaseUrl}/v1/datastores/${source.datastoreId}/contents/${source.contentId}/metadata`; const fallbackResponse = await fetch(fallbackUrl, { headers: { 'Authorization': `Bearer ${CONFIG.apiKey}`, }, }); if (fallbackResponse.ok) { const fallbackData = await fallbackResponse.json(); // Transform to match expected format from retrieval/info endpoint data = { content_metadatas: [fallbackData], fromFallback: true }; } else { throw new Error(`Both endpoints failed. Datastore endpoint: ${fallbackResponse.status}`); } } else { throw new Error(`API responded with ${response.status}`); } } const contentDiv = modal.querySelector('.contextual-ai-modal-loading'); if (contentDiv && data && data.content_metadatas && data.content_metadatas.length > 0) { const metadata = data.content_metadatas[0]; const contentText = metadata.content_text || metadata.text || ''; const documentName = metadata.document_name || source.title || 'Unknown'; const pageNumber = metadata.page_number; const pageImg = metadata.page_img; let contentHtml = ''; if (pageNumber) { contentHtml += `

Page: ${pageNumber}

`; } if (pageImg) { contentHtml += `

`; } else if (contentText) { contentHtml += `

${contentText.replace(/\n/g, '
')}

`; } else { contentHtml += ``; } contentDiv.innerHTML = contentHtml; const imageContainer = contentDiv.querySelector('.contextual-ai-preview-image'); if (imageContainer) { imageContainer.style.cursor = 'zoom-in'; imageContainer.addEventListener('click', () => { imageContainer.classList.toggle('zoomed'); imageContainer.style.cursor = imageContainer.classList.contains('zoomed') ? 'zoom-out' : 'zoom-in'; }); } } else { throw new Error('No content metadata returned'); } } catch (error) { console.error('Failed to fetch content preview:', error); const contentDiv = modal.querySelector('.contextual-ai-modal-loading'); if (contentDiv) { contentDiv.innerHTML = ` `; } } } else { const contentDiv = modal.querySelector('.contextual-ai-modal-loading'); if (contentDiv) { contentDiv.innerHTML = ` `; } } } catch (e) { _previewOpen = false; console.error('Failed to show source preview:', e); } }; window.contextualAI.closeModal = function() { document.querySelectorAll('.contextual-ai-modal-overlay').forEach(m => m.remove()); _previewOpen = false; }; window.contextualAI.scrollToSources = function(event) { event.preventDefault(); const messagesContainer = document.getElementById('contextual-ai-messages'); if (!messagesContainer) return; const sourcesSections = messagesContainer.querySelectorAll('.contextual-ai-sources'); if (sourcesSections.length > 0) { const lastSources = sourcesSections[sourcesSections.length - 1]; lastSources.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); if (!lastSources.classList.contains('expanded')) { lastSources.classList.add('expanded'); } } }; window.contextualAI.copyCode = function(button) { const pre = button.parentElement; const code = pre.querySelector('code'); if (!code) return; const text = code.textContent; navigator.clipboard.writeText(text).then(() => { const originalText = button.textContent; button.textContent = 'Copied!'; button.classList.add('copied'); setTimeout(() => { button.textContent = originalText; button.classList.remove('copied'); }, 2000); }).catch(err => { console.error('Failed to copy code:', err); }); }; window.contextualAI.closePanel = function() { closePanel(); }; window.contextualAI.clearConversation = function() { conversationId = null; conversationHistory = []; const messagesContainer = document.getElementById('contextual-ai-messages'); if (messagesContainer) { messagesContainer.innerHTML = `

How can I help you today?

`; } const chatInput = document.getElementById('contextual-ai-chat-input'); if (chatInput) { chatInput.value = ''; chatInput.style.height = 'auto'; } }; let resizeTimeout; window.addEventListener('resize', () => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { const panel = document.getElementById('contextual-ai-panel'); if (!panel) return; const isMobile = window.innerWidth <= 768; const isInBodyContent = panel.parentElement?.id === 'body-content'; if (isMobile && isInBodyContent) { const wasOpen = panel.classList.contains('open'); panel.remove(); document.body.appendChild(panel); if (wasOpen) { panel.classList.add('open'); } } else if (!isMobile && !isInBodyContent) { const bodyContent = document.getElementById('body-content'); if (bodyContent) { const wasOpen = panel.classList.contains('open'); panel.remove(); bodyContent.appendChild(panel); if (wasOpen) { panel.classList.add('open'); bodyContent.classList.add('assistant-open'); } } } }, 250); }); init(); })();

How can I help you today?

Document: ${source.title || 'Source Preview'}

How can I help you today?

Library

Open Source

SDKs

Documentation Index

​Available Integrations

Available Integrations