95 lines
3 KiB
TypeScript
95 lines
3 KiB
TypeScript
import React from 'react';
|
|
import { Message } from '../../Messages/MessagesTypes';
|
|
import { DocumentItem, MessageMetadata, ActionInfo } from '../../Messages/MessageParts';
|
|
import { WorkflowFile } from '../../../../hooks/usePlayground';
|
|
import styles from '../../Messages/Messages.module.css';
|
|
import logStyles from './LogMessage.module.css';
|
|
|
|
export interface LogMessageProps {
|
|
message: Message;
|
|
showDocuments?: boolean;
|
|
showMetadata?: boolean;
|
|
showProgress?: boolean;
|
|
renderDocument?: (document: any, message: Message) => React.ReactNode;
|
|
onFileDelete?: (file: WorkflowFile) => Promise<void>;
|
|
onFileRemove?: (file: WorkflowFile) => Promise<void>;
|
|
onFileView?: (file: WorkflowFile) => Promise<void>;
|
|
deletingFiles?: Set<string>;
|
|
previewingFiles?: Set<string>;
|
|
removingFiles?: Set<string>;
|
|
workflowId?: string;
|
|
}
|
|
|
|
/**
|
|
* Renders a single message in log style (list/table UI)
|
|
*/
|
|
export const LogMessage: React.FC<LogMessageProps> = ({
|
|
message,
|
|
showDocuments = true,
|
|
showMetadata = true,
|
|
showProgress = true,
|
|
renderDocument,
|
|
onFileDelete,
|
|
onFileRemove,
|
|
onFileView,
|
|
deletingFiles,
|
|
previewingFiles,
|
|
removingFiles,
|
|
workflowId
|
|
}) => {
|
|
return (
|
|
<div className={`${logStyles.logMessage} ${styles.messageWrapper}`}>
|
|
{/* Metadata row */}
|
|
{showMetadata && (
|
|
<div className={logStyles.logMetadata}>
|
|
<MessageMetadata message={message} showProgress={showProgress} />
|
|
</div>
|
|
)}
|
|
|
|
{/* Content row */}
|
|
<div className={logStyles.logContent}>
|
|
{message.message && (
|
|
<div className={logStyles.logText}>{message.message}</div>
|
|
)}
|
|
|
|
{message.summary && message.summary !== message.message && (
|
|
<div className={logStyles.logSummary}>
|
|
<strong>Summary:</strong> {message.summary}
|
|
</div>
|
|
)}
|
|
|
|
{/* Action information */}
|
|
<ActionInfo message={message} />
|
|
</div>
|
|
|
|
{/* Documents row */}
|
|
{showDocuments && message.documents && Array.isArray(message.documents) && message.documents.length > 0 && (
|
|
<div className={logStyles.logDocuments}>
|
|
{message.documentsLabel && (
|
|
<div className={styles.documentsLabel}>{message.documentsLabel}</div>
|
|
)}
|
|
<div className={styles.documentsList}>
|
|
{message.documents.map((doc) => (
|
|
<div key={doc.id}>
|
|
{renderDocument ? renderDocument(doc, message) : (
|
|
<DocumentItem
|
|
document={doc}
|
|
message={message}
|
|
onFileDelete={onFileDelete}
|
|
onFileRemove={onFileRemove}
|
|
onFileView={onFileView}
|
|
deletingFiles={deletingFiles}
|
|
previewingFiles={previewingFiles}
|
|
removingFiles={removingFiles}
|
|
workflowId={workflowId}
|
|
/>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|