| 557 | } |
| 558 | |
| 559 | export function NodeRef(props: { key?: React.Key; n: any; onOpen: (id: any) => void; active?: boolean }): React.ReactElement { |
| 560 | const n = props.n; |
| 561 | const onOpen = props.onOpen; |
| 562 | return ( |
| 563 | <button |
| 564 | type="button" |
| 565 | className={"hermes-lcm-noderef hermes-lcm-clk" + (props.active ? " hermes-lcm-selected" : "")} |
| 566 | onClick={function () { onOpen(n.node_id); }} |
| 567 | > |
| 568 | <div className="hermes-lcm-msg-meta"> |
| 569 | <span className="hermes-lcm-tag">{`D${n.depth}`}</span> |
| 570 | {n.category ? <span className="hermes-lcm-tag">{n.category}</span> : null} |
| 571 | <span className="hermes-lcm-dim">{`#${n.node_id}`}</span> |
| 572 | {n.source_type ? <span className="hermes-lcm-dim">{n.source_type}</span> : null} |
| 573 | {(n.token_count != null) ? <span className="hermes-lcm-dim">{`${fmtInt(n.token_count)} tok`}</span> : null} |
| 574 | <TimeText className="hermes-lcm-dim" epoch={n.latest_at || n.created_at} /> |
| 575 | </div> |
| 576 | <div className="hermes-lcm-msg-body">{short(stripMd(n.summary), 320)}</div> |
| 577 | </button> |
| 578 | ); |
| 579 | } |
| 580 | |
| 581 | // --- detail panels --------------------------------------------------------- |
| 582 | |