feat: add openResearch and closeResearch

web/src/app/_components/message-list-view.tsx

@@ -16,6 +16,7 @@ import {
 } from "~/components/ui/card";
 import type { Message, Option } from "~/core/messages";
 import {
+  closeResearch,
   openResearch,
   useMessage,
   useResearchTitle,
@@ -209,7 +210,7 @@ function MessageListItem({
         className={cn(
           `flex w-fit max-w-[85%] flex-col rounded-2xl px-4 py-3 shadow`,
           message.role === "user" &&
-            "text-primary-foreground bg-brand rounded-ee-none",
+          "text-primary-foreground bg-brand rounded-ee-none",
           message.role === "assistant" && "bg-card rounded-es-none",
           className,
         )}
@@ -245,7 +246,7 @@ function MessageListItem({
     const title = useResearchTitle(researchId);
     const handleOpen = useCallback(() => {
       if (openResearchId === researchId) {
-        openResearch(null);
+        closeResearch();
       } else {
         openResearch(researchId);
       }
@@ -318,11 +319,10 @@ function PlanCard({
       <CardHeader>
         <CardTitle>
           <Markdown animate>
-            {`### ${
-              plan.title !== undefined && plan.title !== ""
-                ? plan.title
-                : "Deep Research"
-            }`}
+            {`### ${plan.title !== undefined && plan.title !== ""
+              ? plan.title
+              : "Deep Research"
+              }`}
           </Markdown>
         </CardTitle>
       </CardHeader>

web/src/app/_components/research-block.tsx

@@ -8,7 +8,7 @@ import { Button } from "~/components/ui/button";
 import { Card } from "~/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
 import { useReplay } from "~/core/replay";
-import { listenToPodcast, openResearch, useStore } from "~/core/store";
+import { closeResearch, listenToPodcast, useStore } from "~/core/store";
 import { cn } from "~/lib/utils";
 
 import { ResearchActivitiesBlock } from "./research-activities-block";
@@ -102,9 +102,7 @@ export function ResearchBlock({
               className="text-gray-400"
               size="sm"
               variant="ghost"
-              onClick={() => {
-                openResearch(null);
-              }}
+              onClick={() => { closeResearch(); }}
             >
               <X />
             </Button>

web/src/core/store/store.ts

@@ -28,7 +28,9 @@ export const useStore = create<{
   appendMessage: (message: Message) => void;
   updateMessage: (message: Message) => void;
   updateMessages: (messages: Message[]) => void;
-  setOngoingResearchId: (value: string | null) => void;
+  openResearch: (researchId: string | null) => void;
+  closeResearch: () => void;
+  setOngoingResearch: (researchId: string | null) => void;
 }>((set) => ({
   responding: false,
   threadId: THREAD_ID,
@@ -57,8 +59,14 @@ export const useStore = create<{
       return { messages: newMessages };
     });
   },
-  setOngoingResearchId(value: string | null) {
-    set({ ongoingResearchId: value });
+  openResearch(researchId: string | null) {
+    set({ openResearchId: researchId });
+  },
+  closeResearch() {
+    set({ openResearchId: null });
+  },
+  setOngoingResearch(researchId: string | null) {
+    set({ ongoingResearchId: researchId });
   }
 }));
 
@@ -133,7 +141,7 @@ export async function sendMessage(
         useStore.getState().updateMessage(message);
       }
     }
-    useStore.getState().setOngoingResearchId(null);
+    useStore.getState().setOngoingResearch(null);
   } finally {
     setResponding(false);
   }
@@ -191,7 +199,7 @@ function updateMessage(message: Message) {
     message.agent === "reporter" &&
     !message.isStreaming
   ) {
-    useStore.getState().setOngoingResearchId(null);
+    useStore.getState().setOngoingResearch(null);
   }
   useStore.getState().updateMessage(message);
 }
@@ -248,9 +256,11 @@ function appendResearchActivity(message: Message) {
 }
 
 export function openResearch(researchId: string | null) {
-  useStore.setState({
-    openResearchId: researchId,
-  });
+  useStore.getState().openResearch(researchId);
+}
+
+export function closeResearch() {
+  useStore.getState().closeResearch();
 }
 
 export async function listenToPodcast(researchId: string) {