import { Clock, X } from 'lucide-react'; import { Highlight, themes, type Language } from 'prism-react-renderer'; import { useState } from 'react'; import { ISessionLogs } from '../../../../interfaces/ISessionLogs'; import '../../style.css'; interface TextLogsProps { sessionLogs: ISessionLogs[]; showImages: boolean; showErrorsOnly: boolean; baseUrl: any; } const isValidJSON = (str: string): boolean => { if (typeof str !== 'string') return false; try { JSON.parse(str); return true; } catch (e) { return false; } }; const isXMLLike = (str: string): boolean => { if (typeof str !== 'string') return false; return /^\s*<[^>]+>/.test(str); }; const formatXML = (xml: string): string => { let formatted = ''; const reg = /(>)(<)(\/*)/g; xml = xml.replace(reg, '$1\r\n$2$3'); let pad = 0; xml.split('\r\n').forEach((node) => { let indent = 0; if (node.match(/.+<\/\w[^>]*>$/)) { indent = 0; } else if (node.match(/^<\/\w/)) { if (pad !== 0) pad -= 1; } else if (node.match(new RegExp('^<\\w[^>]*[^/]>.*$'))) { indent = 1; } else { indent = 0; } let padding = ''; for (let i = 0; i < pad; i++) padding += ' '; formatted += padding + node + '\r\n'; pad += indent; }); return formatted.trim(); }; const formatData = (data: any): any => { if (!data) return ''; if (typeof data === 'object') { return JSON.stringify(data, null, 2); } try { if (isValidJSON(data)) { return JSON.stringify(JSON.parse(data), null, 2); } if (isXMLLike(data)) { return formatXML(data); } return data; } catch (e) { return data; } }; interface Token { types: string[]; content: string; empty?: boolean; } interface LineInputProps { line: Token[]; key?: number; style?: React.CSSProperties; className?: string; } interface TokenInputProps { token: Token; key?: number; style?: React.CSSProperties; className?: string; } const CodeBlock = ({ code, language }: { code: string; language: string }) => { // Helper function to check if a line contains error-related content const isErrorLine = (line: string): boolean => { const errorKeywords = ['error', 'exception', 'failed', 'failure', 'fatal', 'crash']; return errorKeywords.some((keyword) => line.toLowerCase().includes(keyword)); }; return ( {({ className, style, tokens, getLineProps, getTokenProps }) => (

          {tokens.map((line, i) => {
            const lineContent = line.map((token) => token.content).join('');
            const isError = isErrorLine(lineContent);

            return (
              
                
                  {i + 1}
                
                
                  {line.map((token, key) => (
                    
                  ))}
                
              
            );
          })}

)} ); }; const DataViewer = ({ data }: { data: any }) => { const formattedData = formatData(data); if (typeof data === 'object' && data !== null && data.error) { return (

{data.error}

{data.message}

{data.stacktrace && (

)}

); } if (typeof data === 'object' && data !== null) { return (

); } if (isXMLLike(formattedData)) { return (

); } if (isValidJSON(formattedData)) { return (

); } return (

      {String(formattedData)}

); }; interface ImageModalProps { src: string; alt: string; onClose: () => void; } const ImageModal = ({ src, alt, onClose }: ImageModalProps) => { return (

); }; function TextLogs({ sessionLogs, showImages, showErrorsOnly, baseUrl }: TextLogsProps) { const [expandedIndex, setExpandedIndex] = useState(null); const [selectedImage, setSelectedImage] = useState(null); const isEmptyObject = (obj: any) => { if (!obj) return true; return Object.keys(obj).length === 0; }; const hasError = (response: any) => { try { const parsedResponse = typeof response === 'string' ? JSON.parse(response) : response; return parsedResponse?.value?.error !== undefined; } catch (e) { return false; } }; return ( <>

{sessionLogs .sort((a, b) => (a.createdAt > b.createdAt ? 1 : -1)) .filter((sessionLog) => (showErrorsOnly ? hasError(sessionLog.response) : true)) .map((sessionLog, index, array) => { const currentTime = new Date(sessionLog.createdAt); const nextTime = index < array.length - 1 ? new Date(array[index + 1].createdAt) : null; const timeDifference = nextTime ? nextTime.getTime() - currentTime.getTime() : null; const formattedBody = sessionLog.body ? JSON.parse(sessionLog.body) : null; const formattedResponse = sessionLog.response ? JSON.parse(sessionLog.response)?.value : null; const isExpanded = expandedIndex === index; const isError = hasError(sessionLog.response); return (

{isExpanded && (

{showImages && sessionLog.screenshot && (

)}

Response

{!isEmptyObject(formattedBody) && (

Parameters

)}

); })}

{selectedImage && ( setSelectedImage(null)} /> )} ); } export default TextLogs;