107 lines
3.7 KiB
TypeScript
107 lines
3.7 KiB
TypeScript
import React, { useState } from "react";
|
|
import { WorkflowLog } from "./dashboardChatAreaTypes";
|
|
import messageStyles from './DashboardChatAreaStyles/DashboardChatMessages.module.css';
|
|
|
|
interface LogItemProps {
|
|
log: WorkflowLog;
|
|
index: number;
|
|
}
|
|
|
|
const LogItem: React.FC<LogItemProps> = ({ log }) => {
|
|
const [showDetails, setShowDetails] = useState(false);
|
|
|
|
// Format timestamp with robust parsing (same logic as MessageList)
|
|
const formatTimestamp = (timestamp: any) => {
|
|
|
|
|
|
if (!timestamp) {
|
|
|
|
return 'No timestamp';
|
|
}
|
|
|
|
// Handle different timestamp formats (same as safeParseDate)
|
|
let dateToTry = timestamp;
|
|
|
|
// If it's a number, check if it's in seconds or milliseconds
|
|
if (typeof timestamp === 'number') {
|
|
// If it's a 10-digit number, it's likely seconds since epoch
|
|
if (timestamp < 10000000000) {
|
|
dateToTry = timestamp * 1000; // Convert seconds to milliseconds
|
|
} else {
|
|
dateToTry = timestamp; // Already in milliseconds
|
|
}
|
|
}
|
|
// If it's a string that looks like a number, parse it and handle seconds/milliseconds
|
|
else if (typeof timestamp === 'string' && /^\d+$/.test(timestamp)) {
|
|
const numericTimestamp = parseInt(timestamp);
|
|
// If it's a 10-digit number, it's likely seconds since epoch
|
|
if (numericTimestamp < 10000000000) {
|
|
dateToTry = numericTimestamp * 1000; // Convert seconds to milliseconds
|
|
} else {
|
|
dateToTry = numericTimestamp; // Already in milliseconds
|
|
}
|
|
}
|
|
// If it's already a Date object
|
|
else if (timestamp instanceof Date) {
|
|
dateToTry = timestamp;
|
|
}
|
|
|
|
const date = new Date(dateToTry);
|
|
|
|
// Check if the date is valid
|
|
if (isNaN(date.getTime())) {
|
|
console.warn(`⚠️ LogItem: Invalid timestamp detected:`, {
|
|
originalTimestamp: timestamp,
|
|
type: typeof timestamp,
|
|
processedTimestamp: dateToTry
|
|
});
|
|
return `Invalid: ${timestamp}`;
|
|
}
|
|
|
|
|
|
|
|
const now = new Date();
|
|
const isToday = date.toDateString() === now.toDateString();
|
|
|
|
let formatted = '';
|
|
if (isToday) {
|
|
formatted = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
} else {
|
|
formatted = date.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' +
|
|
date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
}
|
|
|
|
return formatted;
|
|
};
|
|
|
|
// Determine log level for styling
|
|
const logLevel = log.level || (log.type?.toLowerCase() as 'info' | 'warning' | 'error' | 'debug') || 'info';
|
|
|
|
// Debug: Log what the LogItem is receiving
|
|
|
|
|
|
return (
|
|
<div className={`${messageStyles.log_container} ${messageStyles[logLevel]}`}>
|
|
<div className={messageStyles.log_header}>
|
|
<span className={`${messageStyles.log_level} ${messageStyles[logLevel]}`}>
|
|
{logLevel.toUpperCase()}
|
|
</span>
|
|
<span className={messageStyles.log_timestamp}>
|
|
{formatTimestamp(log.timestamp)}
|
|
</span>
|
|
</div>
|
|
|
|
<div className={messageStyles.log_message}>
|
|
{log.message}
|
|
</div>
|
|
|
|
{log.source && (
|
|
<div className={messageStyles.log_source}>
|
|
Source: {log.source}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LogItem;
|