SelectedRealtimeMessagePanel() — supabase Function Reference

Architecture documentation for the SelectedRealtimeMessagePanel() function in SelectedRealtimeMessagePanel.tsx from the supabase codebase.

Function tsx ContentManagement Migrations calls 1

Entity Profile

ContentManagement→ Migrations→ SelectedRealtimeMessagePanel() — supabase Function Reference

Dependency Diagram

graph TD
  52e4ced8_0359_1fa3_4adc_58ea9cc603b7["SelectedRealtimeMessagePanel()"]
  f5f30398_eee0_fbad_600b_52693490bc83["jsonSyntaxHighlight()"]
  52e4ced8_0359_1fa3_4adc_58ea9cc603b7 -->|calls| f5f30398_eee0_fbad_600b_52693490bc83
  style 52e4ced8_0359_1fa3_4adc_58ea9cc603b7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Realtime/Inspector/SelectedRealtimeMessagePanel.tsx lines 10–38

export const SelectedRealtimeMessagePanel = ({ log }: { log: LogData }) => {
  return (
    <>
      <div className="px-8">
        <span className="col-span-4 text-sm text-scale-900">Message</span>

        <p className="text-wrap mt-2 overflow-x-auto whitespace-pre-wrap font-mono text-xs text-scale-1200">
          {log.message}
        </p>
      </div>
      <LogsDivider />
      <div className="px-8 space-y-2">
        <SelectionDetailedTimestampRow hideCopy value={log.timestamp} />
      </div>
      <LogsDivider />
      <div className="px-8">
        <h3 className="mb-4 text-sm text-foreground-lighter">Payload</h3>
        <pre className="syntax-highlight overflow-x-auto text-sm">
          <div
            className="text-wrap"
            dangerouslySetInnerHTML={{
              __html: log.metadata ? jsonSyntaxHighlight(log.metadata) : '',
            }}
          />
        </pre>
      </div>
    </>
  )
}