File size: 2,256 Bytes
abcf568 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | import { memo, useCallback, useEffect, useRef, type RefObject } from 'react'
import { debugStudioMessages } from '../../agent-response/debug'
import { useCommandStoreSelector } from './use-command-store-selector'
import { selectVisibleMessageIds } from './selectors'
import type { StudioCommandPanelStore } from './store'
import { StudioCommandMessageRow } from './StudioCommandMessageRow'
interface StudioCommandMessageListProps {
store: StudioCommandPanelStore
endRef: RefObject<HTMLDivElement | null>
variant?: 'default' | 't-layout-bottom' | 'pure-minimal-bottom'
}
export const StudioCommandMessageList = memo(function StudioCommandMessageList({
store,
endRef,
variant = 'default',
}: StudioCommandMessageListProps) {
const selectIds = useCallback(
(snapshot: ReturnType<StudioCommandPanelStore['getSnapshot']>) => selectVisibleMessageIds(snapshot),
[],
)
const visibleMessageIds = useCommandStoreSelector(store, selectIds, areIdListsEqual)
const prevIdsRef = useRef<string[]>([])
useEffect(() => {
const previousIds = prevIdsRef.current
const added = visibleMessageIds.filter((id) => !previousIds.includes(id))
const removed = previousIds.filter((id) => !visibleMessageIds.includes(id))
debugStudioMessages('command-list-update', {
total: visibleMessageIds.length,
ids: visibleMessageIds,
sameReference: previousIds === visibleMessageIds,
changed: !areIdListsEqual(previousIds, visibleMessageIds),
added,
removed,
})
prevIdsRef.current = visibleMessageIds
}, [visibleMessageIds])
return (
<div
className={`flex ${variant === 'pure-minimal-bottom'
? 'flex-col gap-0 pb-4'
: 'flex-col space-y-12'}`}
>
{visibleMessageIds.map((messageId) => (
<StudioCommandMessageRow
key={messageId}
messageId={messageId}
store={store}
variant={variant}
/>
))}
<div ref={endRef} />
</div>
)
})
function areIdListsEqual(left: string[], right: string[]) {
if (left.length !== right.length) {
return false
}
for (let index = 0; index < left.length; index += 1) {
if (left[index] !== right[index]) {
return false
}
}
return true
}
|