chore: further abstract message streaming hook to reduce redundant code

ui/admin/app/components/agent/shared/ToolAuthenticationDialog.tsx

@@ -1,8 +1,6 @@
 import { CheckIcon, CircleAlert } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 
-import { ThreadsService } from "~/lib/service/api/threadsService";
-
 import { useToolReference } from "~/components/agent/ToolEntry";
 import { PromptAuthForm } from "~/components/chat/Message";
 import { LoadingSpinner } from "~/components/ui/LoadingSpinner";
@@ -17,7 +15,7 @@ import {
 	DialogTitle,
 } from "~/components/ui/dialog";
 import { Link } from "~/components/ui/link";
-import { useMessageStream } from "~/hooks/messages/useMessageSource";
+import { useThreadEvents } from "~/hooks/messages/useThreadEvents";
 
 type AgentAuthenticationDialogProps = {
 	threadId: Nullish<string>;
@@ -32,11 +30,7 @@ export function ToolAuthenticationDialog({
 }: AgentAuthenticationDialogProps) {
 	const { icon, label } = useToolReference(tool);
 
-	const source = useMemo(
-		() => (threadId ? ThreadsService.getThreadEventSource(threadId) : null),
-		[threadId]
-	);
-	const { messages: _messages } = useMessageStream(source);
+	const { messages: _messages } = useThreadEvents(threadId);
 
 	type ItemState = {
 		isLoading?: boolean;

ui/admin/app/components/chat/ChatContext.tsx

@@ -1,11 +1,11 @@
-import { ReactNode, createContext, useContext, useMemo } from "react";
+import { ReactNode, createContext, useContext } from "react";
 import { mutate } from "swr";
 
 import { Message } from "~/lib/model/messages";
 import { InvokeService } from "~/lib/service/api/invokeService";
 import { ThreadsService } from "~/lib/service/api/threadsService";
 
-import { useMessageStream } from "~/hooks/messages/useMessageSource";
+import { useThreadEvents } from "~/hooks/messages/useThreadEvents";
 import { useAsync } from "~/hooks/useAsync";
 
 type Mode = "agent" | "workflow";
@@ -60,12 +60,7 @@ export function ChatProvider({
 		},
 	});
 
-	const source = useMemo(
-		() => (threadId ? ThreadsService.getThreadEventSource(threadId) : null),
-		[threadId]
-	);
-
-	const { messages, isRunning } = useMessageStream(source);
+	const { messages, isRunning } = useThreadEvents(threadId);
 
 	const abortRunningThread = () => {
 		if (!threadId || !isRunning) return;

ui/admin/app/hooks/messages/useMessageSource.ts → ui/admin/app/hooks/messages/useThreadEvents.ts

@@ -2,8 +2,9 @@ import { useCallback, useEffect, useState } from "react";
 
 import { ChatEvent } from "~/lib/model/chatEvents";
 import { Message, promptMessage, toolCallMessage } from "~/lib/model/messages";
+import { ThreadsService } from "~/lib/service/api/threadsService";
 
-export function useMessageStream(source: Nullish<EventSource>) {
+export function useThreadEvents(threadId?: Nullish<string>) {
 	const [messages, setMessages] = useState<Message[]>([]);
 	const [isRunning, setIsRunning] = useState(false);
 
@@ -99,7 +100,9 @@ export function useMessageStream(source: Nullish<EventSource>) {
 	useEffect(() => {
 		setMessages([]);
 
-		if (!source) return;
+		if (!threadId) return;
+
+		const source = ThreadsService.getThreadEventSource(threadId);
 
 		let replayComplete = false;
 		let replayMessages: ChatEvent[] = [];
@@ -127,7 +130,7 @@ export function useMessageStream(source: Nullish<EventSource>) {
 			source.close();
 			setIsRunning(false);
 		};
-	}, [source, addContent]);
+	}, [threadId, addContent]);
 
 	return { messages, isRunning };
 }