File size: 2,219 Bytes
fd2c364 | 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 | import React from "react";
import { useConversationWebSocket } from "#/contexts/conversation-websocket-context";
import { useEventStore } from "#/stores/use-event-store";
import { useErrorMessageStore } from "#/stores/error-message-store";
import { useOptimisticUserMessageStore } from "#/stores/optimistic-user-message-store";
import { isAgentServerEvent } from "#/types/agent-server/type-guards";
import { OpenHandsEvent } from "#/types/agent-server/core";
/**
* Test component to access and display WebSocket connection state
*/
export function ConnectionStatusComponent() {
const context = useConversationWebSocket();
return (
<div>
<div data-testid="connection-state">
{context?.connectionState || "NOT_AVAILABLE"}
</div>
</div>
);
}
/**
* Test component to access and display event store values
*/
export function EventStoreComponent() {
const { events, uiEvents } = useEventStore();
return (
<div>
<div data-testid="events-count">{events.length}</div>
<div data-testid="ui-events-count">{uiEvents.length}</div>
<div data-testid="latest-event-id">
{isAgentServerEvent(events[events.length - 1])
? (events[events.length - 1] as OpenHandsEvent).id
: "none"}
</div>
</div>
);
}
/**
* Test component to access and display the queue of pending user messages
* tracked locally until the WebSocket echoes them back.
*/
export function OptimisticUserMessageStoreComponent() {
const { pendingMessages } = useOptimisticUserMessageStore();
return (
<div>
<div data-testid="optimistic-user-message">
{pendingMessages[0]?.text || "none"}
</div>
<div data-testid="optimistic-user-message-count">
{pendingMessages.length}
</div>
<div data-testid="optimistic-user-message-statuses">
{pendingMessages.map((m) => m.status).join(",") || "none"}
</div>
</div>
);
}
/**
* Test component to access and display error message store values
*/
export function ErrorMessageStoreComponent() {
const { errorMessage } = useErrorMessageStore();
return (
<div>
<div data-testid="error-message">{errorMessage || "none"}</div>
</div>
);
}
|