supabase/apps/database-new/components/AllThreadsModal/MessageNode.tsx

import { Handle, NodeProps, Position } from 'reactflow'
import { NODE_HEIGHT, NODE_WIDTH } from './AllThreadsModal.constants'

export interface MessageNodeData {
  id: string
  text: string
  isStart: boolean
  isEnd: boolean
  onSelectMessage: () => void
}

const MessageNode = ({ data }: NodeProps<MessageNodeData>) => {
  const { id, text, isStart, isEnd, onSelectMessage } = data
  return (
    <>
      {!isStart && (
        <Handle
          type="target"
          id="handle-t"
          position={Position.Top}
          style={{ background: 'transparent' }}
        />
      )}
      <div
        className="flex flex-col gap-y-1 rounded bg-surface-100 border border-default p-3 hover:bg-surface-200 transition cursor-pointer"
        style={{ width: NODE_WIDTH / 2 - 10, height: NODE_HEIGHT / 2 }}
        onClick={() => onSelectMessage()}
      >
        <p className="text-xs text-foreground-light font-mono">{id}</p>
        <p className="text-sm">{text}</p>
      </div>
      {!isEnd && (
        <Handle
          type="source"
          id="handle-s"
          position={Position.Bottom}
          style={{ background: 'transparent' }}
        />
      )}
    </>
  )
}

export default MessageNode