SelectedRealtimeMessagePanel.tsx38 lines · main

1	import type { LogData } from './Messages.types'
2	import { jsonSyntaxHighlight, SelectionDetailedTimestampRow } from './MessagesFormatters'
3
4	const LogsDivider = () => {
5	return (
6	<div className="h-px w-full bg-panel-border-interior-light in-data-[theme*=dark]:bg-panel-border-interior-dark" />
7	)
8	}
9
10	export const SelectedRealtimeMessagePanel = ({ log }: { log: LogData }) => {
11	return (
12	<>
13	<div className="px-8">
14	<span className="col-span-4 text-sm text-scale-900">Message</span>
15
16	<p className="text-wrap mt-2 overflow-x-auto whitespace-pre-wrap font-mono text-xs text-scale-1200">
17	{log.message}
18	</p>
19	</div>
20	<LogsDivider />
21	<div className="px-8 space-y-2">
22	<SelectionDetailedTimestampRow hideCopy value={log.timestamp} />
23	</div>
24	<LogsDivider />
25	<div className="px-8">
26	<h3 className="mb-4 text-sm text-foreground-lighter">Payload</h3>
27	<pre className="syntax-highlight overflow-x-auto text-sm">
28	<div
29	className="text-wrap"
30	dangerouslySetInnerHTML={{
31	__html: log.metadata ? jsonSyntaxHighlight(log.metadata) : '',
32	}}
33	/>
34	</pre>
35	</div>
36	</>
37	)
38	}