chore: refactor message store to use zustand (better React State Mana…

…gemnt) (#1495)

- reduces complexity by adding complexity

Signed-off-by: Ryan Hopper-Lowe <ryan@acorn.io>

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

@@ -15,7 +15,7 @@ import {
 	DialogTitle,
 } from "~/components/ui/dialog";
 import { Link } from "~/components/ui/link";
-import { useThreadEvents } from "~/hooks/messages/useThreadEvents";
+import { useInitMessageStore } from "~/hooks/messages/useMessageStore";
 
 type AgentAuthenticationDialogProps = {
 	threadId: Nullish<string>;
@@ -30,7 +30,7 @@ export function ToolAuthenticationDialog({
 }: AgentAuthenticationDialogProps) {
 	const { icon, label } = useToolReference(tool);
 
-	const { messages: _messages } = useThreadEvents(threadId);
+	const { messages: _messages } = useInitMessageStore(threadId);
 
 	type ItemState = {
 		isLoading?: boolean;

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

@@ -2,25 +2,23 @@ import { ReactNode, createContext, useContext } from "react";
 import { mutate } from "swr";
 
 import { AgentIcons } from "~/lib/model/agents";
-import { Message } from "~/lib/model/messages";
 import { InvokeService } from "~/lib/service/api/invokeService";
 import { ThreadsService } from "~/lib/service/api/threadsService";
+import { MessageStore } from "~/lib/store/chat/message-store";
 
-import { useThreadEvents } from "~/hooks/messages/useThreadEvents";
+import { useInitMessageStore } from "~/hooks/messages/useMessageStore";
 import { useAsync } from "~/hooks/useAsync";
 
 type Mode = "agent" | "workflow";
 
-interface ChatContextType {
-	messages: Message[];
+interface ChatContextType extends Pick<MessageStore, "messages" | "isRunning"> {
 	mode: Mode;
 	processUserMessage: (text: string) => void;
 	abortRunningThread: () => void;
 	id: string;
 	threadId: Nullish<string>;
 	invoke: (prompt?: string) => void;
 	readOnly?: boolean;
-	isRunning: boolean;
 	isInvoking: boolean;
 	introductionMessage?: string;
 	starterMessages?: string[];
@@ -73,7 +71,7 @@ export function ChatProvider({
 		},
 	});
 
-	const { messages, isRunning } = useThreadEvents(threadId);
+	const { messages, isRunning } = useInitMessageStore(threadId);
 
 	const abortRunningThread = () => {
 		if (!threadId || !isRunning) return;

ui/admin/app/hooks/messages/useMessageStore.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+import { useStore } from "zustand";
+
+import { createMessageStore } from "~/lib/store/chat/message-store";
+
+export const useInitMessageStore = (threadId: Nullish<string>) => {
+	const [storeObj] = useState(() => createMessageStore());
+	const store = useStore(storeObj);
+
+	const { init, reset } = store;
+	useEffect(() => {
+		if (!threadId) return;
+
+		init(threadId);
+
+		return () => reset();
+	}, [init, reset, threadId]);
+
+	return store;
+};