Fix SSE event selection

This commit is contained in:
Gregory Schier
2024-10-17 11:28:10 -07:00
parent c8342fb0a9
commit c652df82a3
2 changed files with 38 additions and 14 deletions

View File

@@ -364,7 +364,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
changes: cm.current.view.state.changes({ changes: cm.current.view.state.changes({
from: 0, from: 0,
to: currentDoc.length, to: currentDoc.length,
insert: currentDoc, insert: defaultValue,
}), }),
}); });
} }

View File

@@ -65,7 +65,14 @@ function ActualEventStreamViewer({ response }: Props) {
<Separator /> <Separator />
</div> </div>
<div className="pl-2 overflow-y-auto"> <div className="pl-2 overflow-y-auto">
<div className="mb-2 select-text cursor-text font-semibold">Message Received</div> <HStack space={1.5} className="mb-2 select-text cursor-text font-semibold">
<EventLabels
className="text-sm"
event={activeEvent}
index={activeEventIndex ?? 0}
/>
Message Received
</HStack>
{!showLarge && activeEvent.data.length > 1000 * 1000 ? ( {!showLarge && activeEvent.data.length > 1000 * 1000 ? (
<VStack space={2} className="italic text-text-subtlest"> <VStack space={2} className="italic text-text-subtlest">
Message previews larger than 1MB are hidden Message previews larger than 1MB are hidden
@@ -148,6 +155,7 @@ function EventStreamEventsVirtual({
<EventStreamEvent <EventStreamEvent
event={event} event={event}
isActive={virtualItem.index === activeEventIndex} isActive={virtualItem.index === activeEventIndex}
index={virtualItem.index}
onClick={() => { onClick={() => {
if (virtualItem.index === activeEventIndex) setActiveEventIndex(null); if (virtualItem.index === activeEventIndex) setActiveEventIndex(null);
else setActiveEventIndex(virtualItem.index); else setActiveEventIndex(virtualItem.index);
@@ -166,11 +174,13 @@ function EventStreamEvent({
isActive, isActive,
event, event,
className, className,
index,
}: { }: {
onClick: () => void; onClick: () => void;
isActive: boolean; isActive: boolean;
event: ServerSentEvent; event: ServerSentEvent;
className?: string; className?: string;
index: number;
}) { }) {
return ( return (
<motion.button <motion.button
@@ -186,19 +196,33 @@ function EventStreamEvent({
)} )}
> >
<Icon className={classNames('text-info')} title="Server Message" icon="arrow_big_down_dash" /> <Icon className={classNames('text-info')} title="Server Message" icon="arrow_big_down_dash" />
<HStack space={1.5} className="text-sm"> <EventLabels className="text-sm" event={event} isActive={isActive} index={index} />
{event.eventType && (
<InlineCode className={classNames('py-0', isActive && 'bg-text-subtlest text-text')}>
{event.eventType}
</InlineCode>
)}
{event.id && (
<InlineCode className={classNames('py-0', isActive && 'bg-text-subtlest text-text')}>
{event.id}
</InlineCode>
)}
</HStack>
<div className={classNames('w-full truncate text-xs')}>{event.data.slice(0, 1000)}</div> <div className={classNames('w-full truncate text-xs')}>{event.data.slice(0, 1000)}</div>
</motion.button> </motion.button>
); );
} }
function EventLabels({
className,
event,
index,
isActive,
}: {
event: ServerSentEvent;
index: number;
className: string;
isActive?: boolean;
}) {
return (
<HStack space={1.5} alignItems="center" className={className}>
<InlineCode className={classNames('py-0', isActive && 'bg-text-subtlest text-text')}>
{event.id ?? index}
</InlineCode>
{event.eventType && (
<InlineCode className={classNames('py-0', isActive && 'bg-text-subtlest text-text')}>
{event.eventType}
</InlineCode>
)}
</HStack>
);
}