| 762 | } |
| 763 | |
| 764 | export function SessionDetail(props: { |
| 765 | data: any; |
| 766 | onOpenNode: (id: any) => void; |
| 767 | onOpenMessage: (m: any) => void; |
| 768 | onLoadMore: () => void; |
| 769 | loadingMore?: boolean; |
| 770 | activeMessageId?: any; |
| 771 | }): React.ReactElement { |
| 772 | const d = props.data || {}; |
| 773 | const onOpenNode = props.onOpenNode; |
| 774 | const onOpenMessage = props.onOpenMessage; |
| 775 | const c = d.counts || {}; |
| 776 | const [page, setPage] = useState(1); |
| 777 | const sessionId = d.session_id; |
| 778 | useEffect(function () { |
| 779 | setPage(1); |
| 780 | }, [sessionId]); |
| 781 | const loadedMessages = d.messages || []; |
| 782 | const shownCount = Math.min(loadedMessages.length, page * SESSION_MESSAGE_PAGE_SIZE); |
| 783 | const visibleMessages = loadedMessages.slice(0, shownCount); |
| 784 | return ( |
| 785 | <div className="hermes-lcm-detail"> |
| 786 | <div className="hermes-lcm-statrow"> |
| 787 | <Stat variant="compact" value={fmtInt(c.message_count)} label="messages" /> |
| 788 | <Stat variant="compact" value={fmtInt(c.summary_node_count)} label="summaries" /> |
| 789 | <Stat variant="compact" value={fmtInt(c.token_estimate_total)} label="msg tokens" /> |
| 790 | <Stat |
| 791 | variant="compact" |
| 792 | value={ratioStr(c.source_token_count, c.summary_token_count)} |
| 793 | label="compression" |
| 794 | /> |
| 795 | </div> |
| 796 | {(d.summary_nodes && d.summary_nodes.length) ? ( |
| 797 | <div> |
| 798 | <h4>{`Summary nodes (${d.summary_nodes.length})`}</h4> |
| 799 | <div className="hermes-lcm-stream"> |
| 800 | {d.summary_nodes.map(function (n: any) { |
| 801 | return <NodeRef key={n.node_id} n={n} onOpen={onOpenNode} />; |
| 802 | })} |
| 803 | </div> |
| 804 | </div> |
| 805 | ) : null} |
| 806 | <div className="hermes-lcm-section-head"> |
| 807 | <h4>{`Messages (${fmtInt(c.message_count || loadedMessages.length)})`}</h4> |
| 808 | <div className="hermes-lcm-dim"> |
| 809 | {`Showing ${fmtInt(visibleMessages.length)} of ${fmtInt(c.message_count || loadedMessages.length)}`} |
| 810 | </div> |
| 811 | </div> |
| 812 | <div className="hermes-lcm-stream"> |
| 813 | {visibleMessages.map(function (m: any) { |
| 814 | return ( |
| 815 | <MessageItem |
| 816 | key={m.store_id} |
| 817 | m={m} |
| 818 | onOpenMessage={onOpenMessage} |
| 819 | active={props.activeMessageId != null && Number(props.activeMessageId) === Number(m.store_id)} |
| 820 | /> |
| 821 | ); |