@ciridae/ui 0.17.0 → 1.0.1

package/dist/chat/use-chat-conversation.js

@@ -0,0 +1,156 @@
+import { skipToken, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { chatQueryKeys } from "./chat-query-keys.js";
+import { isResponseActive, } from "./contract.js";
+import { conversationItemsQueryOptions } from "./conversation-items-query-options.js";
+/** How often a running response and its new items are polled. */
+const activeResponsePollIntervalMs = 1000;
+let pendingMessageCount = 0;
+/**
+ * Loads a conversation and keeps it current: while its response is active, the response and the
+ * items after the newest one already loaded are polled about once a second, and polling stops
+ * once the response settles. With no `conversationId`, the first message creates a conversation
+ * and reports it through `onConversationCreated`.
+ */
+export function useChatConversation({ client, conversationId, onConversationCreated, }) {
+    const queryClient = useQueryClient();
+    const [pendingMessages, setPendingMessages] = useState([]);
+    const [sentResponse, setSentResponse] = useState(null);
+    const conversationListQueryKey = chatQueryKeys.conversationList(client);
+    const conversationQuery = useQuery({
+        queryKey: chatQueryKeys.conversation(client, conversationId),
+        queryFn: conversationId === null ? skipToken : () => client.getConversation(conversationId),
+        // A conversation opened from the list starts from its listed copy, so only its items gate the
+        // first paint; the conversation itself refreshes in the background.
+        initialData: () => queryClient
+            .getQueryData(conversationListQueryKey)
+            ?.pages.flatMap((page) => page.data)
+            .find((listedConversation) => listedConversation.id === conversationId),
+        initialDataUpdatedAt: () => queryClient.getQueryState(conversationListQueryKey)?.dataUpdatedAt,
+    });
+    const conversation = conversationId === null ? undefined : conversationQuery.data;
+    const latestResponse = conversation?.latest_response ?? null;
+    const responseId = (sentResponse?.conversationId === conversationId ? sentResponse?.responseId : undefined) ??
+        latestResponse?.id ??
+        null;
+    const responseQuery = useQuery({
+        queryKey: chatQueryKeys.response(client, responseId),
+        queryFn: responseId === null ? skipToken : () => client.getResponse(responseId),
+        initialData: latestResponse?.id === responseId ? (latestResponse ?? undefined) : undefined,
+        refetchInterval: (query) => query.state.data && isResponseActive(query.state.data.status)
+            ? activeResponsePollIntervalMs
+            : false,
+    });
+    const response = responseId === null ? null : (responseQuery.data ?? null);
+    const responseIsActive = response !== null && isResponseActive(response.status);
+    const itemsQuery = useQuery({
+        ...conversationItemsQueryOptions(queryClient, client, conversationId),
+        refetchInterval: responseIsActive ? activeResponsePollIntervalMs : false,
+    });
+    // The last poll can see the response settle before it sees the final items, so fetch once more
+    // when it settles, and refresh what the settled response changed: the title and the list.
+    const previousResponseRef = useRef(null);
+    useEffect(() => {
+        const previous = previousResponseRef.current;
+        previousResponseRef.current = response ? { id: response.id, active: responseIsActive } : null;
+        if (!response || !conversationId || responseIsActive)
+            return;
+        if (previous?.id !== response.id || !previous.active)
+            return;
+        void queryClient.refetchQueries({
+            queryKey: chatQueryKeys.conversationItems(client, conversationId),
+        });
+        void queryClient.invalidateQueries({
+            queryKey: chatQueryKeys.conversation(client, conversationId),
+        });
+        void queryClient.invalidateQueries({ queryKey: chatQueryKeys.conversationList(client) });
+    }, [client, conversationId, queryClient, response, responseIsActive]);
+    const sendMessage = useCallback(async (content, attachments) => {
+        const localId = `pending-${++pendingMessageCount}`;
+        setPendingMessages((existing) => [
+            ...existing,
+            {
+                type: "pending_message",
+                localId,
+                conversationId,
+                content,
+                attachments,
+                sentAt: Date.now(),
+                state: "sending",
+            },
+        ]);
+        try {
+            let targetConversationId = conversationId;
+            if (targetConversationId === null) {
+                const createdConversation = await client.createConversation();
+                targetConversationId = createdConversation.id;
+                queryClient.setQueryData(chatQueryKeys.conversation(client, createdConversation.id), createdConversation);
+                setPendingMessages((existing) => existing.map((message) => message.localId === localId
+                    ? { ...message, conversationId: createdConversation.id }
+                    : message));
+                onConversationCreated(createdConversation);
+            }
+            const created = await client.createItem(targetConversationId, {
+                content,
+                ...(attachments.length > 0 && {
+                    attachment_ids: attachments.map((attachment) => attachment.id),
+                }),
+            });
+            setSentResponse({ conversationId: targetConversationId, responseId: created.response_id });
+            setPendingMessages((existing) => existing.map((message) => message.localId === localId ? { ...message, state: "posted" } : message));
+            await queryClient.fetchQuery({
+                ...conversationItemsQueryOptions(queryClient, client, targetConversationId),
+                staleTime: 0,
+            });
+            void queryClient.invalidateQueries({ queryKey: chatQueryKeys.conversationList(client) });
+            setPendingMessages((existing) => existing.filter((message) => message.localId !== localId));
+        }
+        catch (error) {
+            setPendingMessages((existing) => existing.map((message) => message.localId === localId ? { ...message, state: "failed" } : message));
+            throw error;
+        }
+    }, [client, conversationId, onConversationCreated, queryClient]);
+    const cancelResponse = useCallback(async () => {
+        if (!response)
+            return;
+        const cancelledResponse = await client.cancelResponse(response.id);
+        queryClient.setQueryData(chatQueryKeys.response(client, response.id), cancelledResponse);
+    }, [client, queryClient, response]);
+    const decideApproval = useCallback(async (request, decision) => {
+        const approval = await client.decideApproval(request.response_id, request.approval_id, decision);
+        queryClient.setQueryData(chatQueryKeys.conversationItems(client, request.conversation_id), (existing) => existing?.map((item) => item.type === "approval_request" && item.approval_id === approval.id
+            ? { ...item, decision: approval.decision }
+            : item));
+        await queryClient.invalidateQueries({
+            queryKey: chatQueryKeys.response(client, request.response_id),
+        });
+    }, [client, queryClient]);
+    const answerQuestion = useCallback(async (question, answers) => {
+        await client.answerQuestion(question.conversation_id, question.question_id, answers);
+        queryClient.setQueryData(chatQueryKeys.conversationItems(client, question.conversation_id), (existing) => existing?.map((item) => item.type === "question" && item.question_id === question.question_id
+            ? { ...item, answers }
+            : item));
+        await queryClient.invalidateQueries({
+            queryKey: chatQueryKeys.response(client, question.response_id),
+        });
+    }, [client, queryClient]);
+    const discardPendingMessage = useCallback((localId) => {
+        setPendingMessages((existing) => existing.filter((message) => message.localId !== localId));
+    }, []);
+    const conversationPendingMessages = useMemo(() => pendingMessages.filter((message) => message.conversationId === conversationId), [conversationId, pendingMessages]);
+    return {
+        conversation,
+        items: conversationId === null ? noItems : (itemsQuery.data ?? noItems),
+        pendingMessages: conversationPendingMessages,
+        response,
+        isResponseActive: responseIsActive,
+        isLoading: conversationId !== null && (conversationQuery.isPending || itemsQuery.isPending),
+        loadError: conversationQuery.error ?? itemsQuery.error,
+        sendMessage,
+        cancelResponse,
+        decideApproval,
+        answerQuestion,
+        discardPendingMessage,
+    };
+}
+const noItems = [];

package/dist/chat/use-conversation-list.d.ts

@@ -0,0 +1,32 @@
+import type { ChatClient } from "./chat-client.js";
+/** The caller's conversations, newest first, one page at a time. */
+export declare function useConversationList(client: ChatClient, { enabled }?: {
+    enabled?: boolean;
+}): import("@tanstack/react-query/build/legacy").UseInfiniteQueryResult<import("@tanstack/react-query/build/legacy").InfiniteData<{
+    data: {
+        id: string & import("zod/index.cjs").$brand<"ConversationId">;
+        agent: string;
+        title: string | null;
+        metadata: Record<string, string>;
+        latest_response: {
+            id: string & import("zod/index.cjs").$brand<"ResponseId">;
+            conversation_id: string & import("zod/index.cjs").$brand<"ConversationId">;
+            status: "queued" | "in_progress" | "requires_action" | "completed" | "failed" | "cancelled";
+            output_item_ids: (string & import("zod/index.cjs").$brand<"ItemId">)[];
+            usage: {
+                input_tokens: number;
+                output_tokens: number;
+            } | null;
+            error: {
+                code: string;
+                message: string;
+            } | null;
+            created_at: string;
+            completed_at: string | null;
+        } | null;
+        created_at: string;
+        updated_at: string;
+        preview?: string | null | undefined;
+    }[];
+    next_cursor: string | null;
+}, unknown>, Error>;

package/dist/chat/use-conversation-list.js

@@ -0,0 +1,19 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { chatQueryKeys } from "./chat-query-keys.js";
+import { isResponseActive } from "./contract.js";
+/** How often the list refreshes while any listed conversation has a response running. */
+const activeConversationListPollIntervalMs = 3000;
+/** The caller's conversations, newest first, one page at a time. */
+export function useConversationList(client, { enabled = true } = {}) {
+    return useInfiniteQuery({
+        queryKey: chatQueryKeys.conversationList(client),
+        queryFn: ({ pageParam }) => client.listConversations({ cursor: pageParam }),
+        initialPageParam: undefined,
+        getNextPageParam: (page) => page.next_cursor ?? undefined,
+        enabled,
+        refetchInterval: (query) => query.state.data?.pages.some((page) => page.data.some((conversation) => conversation.latest_response !== null &&
+            isResponseActive(conversation.latest_response.status)))
+            ? activeConversationListPollIntervalMs
+            : false,
+    });
+}