import { useState, useRef, useMemo } from 'react'; export default function AskAgent() { const [message, setMessage] = useState(''); const [response, setResponse] = useState(''); const [loading, setLoading] = useState(false); const [elapsedTime, setElapsedTime] = useState(0); const [error, setError] = useState(''); const [cooldown, setCooldown] = useState(false); // CHANGE #2: submit cooldown const timerRef = useRef(null); // CHANGE #4: cap response length before parsing to protect the markdown parser const MAX_RESPONSE_LENGTH = 50000; // CHANGE #1: mirror the input maxLength on the client side before sending const MAX_INPUT_LENGTH = 500; const handleSubmit = async () => { if (!message.trim() || cooldown) return; setLoading(true); setResponse(''); setError(''); setElapsedTime(0); const startTime = Date.now(); timerRef.current = setInterval(() => { setElapsedTime(((Date.now() - startTime) / 1000).toFixed(1)); }, 100); try { const res = await fetch('https://ragbot-ltslloihca-uc.a.run.app', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ msg: message.slice(0, MAX_INPUT_LENGTH) }), }); const data = await res.text(); // CHANGE #4: truncate oversized responses before they reach the parser const safeData = data.length > MAX_RESPONSE_LENGTH ? data.slice(0, MAX_RESPONSE_LENGTH) + '\n\n*(Response truncated.)*' : data; setResponse(safeData); } catch (err) { // CHANGE #3: log the real error for ourselves, show a generic message to the user console.error('RAG request failed:', err); setError('Something went wrong. Please try again.'); } finally { clearInterval(timerRef.current); setLoading(false); // CHANGE #2: 2s cooldown after each completed request setCooldown(true); setTimeout(() => setCooldown(false), 2000); } }; const handleKeyPress = (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSubmit(); } }; const parsedResponse = useMemo(() => { if (!response) return null; const parseInline = (text, lineKey) => { const parts = []; let remaining = text; let partIndex = 0; while (remaining.length > 0) { const boldStart = remaining.indexOf('**'); const codeStart = remaining.indexOf('`'); const italicStart = remaining.indexOf('*'); const httpStart = remaining.indexOf('http://'); const httpsStart = remaining.indexOf('https://'); const urlStart = httpStart === -1 ? httpsStart : (httpsStart === -1 ? httpStart : Math.min(httpStart, httpsStart)); const positions = [ { type: 'bold', pos: boldStart }, { type: 'code', pos: codeStart }, { type: 'italic', pos: italicStart }, { type: 'url', pos: urlStart } ].filter(p => p.pos !== -1).sort((a, b) => a.pos - b.pos); if (positions.length === 0) { parts.push(remaining); break; } const first = positions[0]; if (first.pos > 0) { parts.push(remaining.slice(0, first.pos)); remaining = remaining.slice(first.pos); partIndex++; continue; } if (first.type === 'url') { let endPos = remaining.length; const spacePos = remaining.indexOf(' '); const newlinePos = remaining.indexOf('\n'); if (spacePos !== -1) endPos = Math.min(endPos, spacePos); if (newlinePos !== -1) endPos = Math.min(endPos, newlinePos); let url = remaining.slice(0, endPos); while (url.length > 0 && '.,;:!?)'.includes(url[url.length - 1])) { url = url.slice(0, -1); endPos--; } // CHANGE #5: explicit protocol validation — only http/https are renderable as links. // Anything else (javascript:, data:, vbscript:, file:, malformed) falls through to plain text. let isSafeUrl = false; try { const parsed = new URL(url); isSafeUrl = parsed.protocol === 'http:' || parsed.protocol === 'https:'; } catch { isSafeUrl = false; } if (isSafeUrl) { parts.push( {url} ); } else { parts.push(url); // render as plain text, never as an } remaining = remaining.slice(endPos); partIndex++; continue; } if (first.type === 'bold') { const endPos = remaining.indexOf('**', 2); if (endPos !== -1) { const content = remaining.slice(2, endPos); parts.push({content}); remaining = remaining.slice(endPos + 2); partIndex++; continue; } } if (first.type === 'code') { // Skip triple backticks - they should be handled as code blocks if (remaining.startsWith('```')) { parts.push(remaining.slice(0, 3)); remaining = remaining.slice(3); continue; } const endPos = remaining.indexOf('`', 1); if (endPos !== -1) { const content = remaining.slice(1, endPos); parts.push({content}); remaining = remaining.slice(endPos + 1); partIndex++; continue; } } if (first.type === 'italic' && !remaining.startsWith('**')) { const endPos = remaining.indexOf('*', 1); if (endPos !== -1 && remaining[endPos - 1] !== '*' && (endPos + 1 >= remaining.length || remaining[endPos + 1] !== '*')) { const content = remaining.slice(1, endPos); parts.push({content}); remaining = remaining.slice(endPos + 1); partIndex++; continue; } } parts.push(remaining[0]); remaining = remaining.slice(1); } return parts; }; // Helper function to check if a line is a table row const isTableRow = (line) => { const trimmed = line.trim(); return trimmed.startsWith('|') && trimmed.endsWith('|'); }; // Helper function to check if a line is a table separator (e.g., |---|---|) const isTableSeparator = (line) => { const trimmed = line.trim(); if (!trimmed.startsWith('|') || !trimmed.endsWith('|')) return false; const inner = trimmed.slice(1, -1); const cells = inner.split('|'); return cells.every(cell => /^[\s:-]+$/.test(cell) && cell.includes('-')); }; // Helper function to parse table cells from a row const parseTableCells = (line) => { const trimmed = line.trim(); const inner = trimmed.slice(1, -1); // Remove leading and trailing | return inner.split('|').map(cell => cell.trim()); }; // Helper function to render a table const renderTable = (tableLines, tableIndex) => { if (tableLines.length < 2) return null; const headerCells = parseTableCells(tableLines[0]); let bodyStartIndex = 1; // Check if second line is a separator if (tableLines.length > 1 && isTableSeparator(tableLines[1])) { bodyStartIndex = 2; } const bodyRows = tableLines.slice(bodyStartIndex); return (

{headerCells.map((cell, cellIndex) => ( ))} {bodyRows.map((row, rowIndex) => { const cells = parseTableCells(row); return ( {cells.map((cell, cellIndex) => ( ))} ); })}

{parseInline(cell, 'th-' + tableIndex + '-' + cellIndex)}
{parseInline(cell, 'td-' + tableIndex + '-' + rowIndex + '-' + cellIndex)}

); }; const lines = response.replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n'); const elements = []; let inCodeBlock = false; let codeBlockContent = []; let codeBlockLanguage = ''; let codeBlockIndex = 0; let tableLines = []; let tableIndex = 0; for (let i = 0; i < lines.length; i++) { const line = lines[i]; // Handle code blocks const trimmedLine = line.trim(); if (trimmedLine.startsWith('```')) { // If we were collecting table lines, render the table first if (tableLines.length > 0) { const table = renderTable(tableLines, tableIndex); if (table) elements.push(table); tableLines = []; tableIndex++; } if (inCodeBlock) { elements.push(

              {codeBlockLanguage && (
                
                  {codeBlockLanguage}
                
              )}
              {codeBlockContent.join('\n')}

); codeBlockContent = []; codeBlockLanguage = ''; codeBlockIndex++; inCodeBlock = false; } else { // Extract language identifier if present (e.g., ```json -> "json") codeBlockLanguage = trimmedLine.slice(3).trim(); inCodeBlock = true; } continue; } if (inCodeBlock) { codeBlockContent.push(line); continue; } // Handle table rows if (isTableRow(line)) { tableLines.push(line); continue; } // If we were collecting table lines but this line isn't a table row, render the table if (tableLines.length > 0) { const table = renderTable(tableLines, tableIndex); if (table) elements.push(table); tableLines = []; tableIndex++; } if (line.startsWith('### ')) { elements.push(