poke: useSwr for Conversation (#5727)

* poke: useSwr for Conversation

* with the route

front/pages/api/poke/workspaces/[wId]/conversations/[cId]/index.ts

@@ -0,0 +1,70 @@
+import type { ConversationType, WithAPIErrorReponse } from "@dust-tt/types";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import { getConversation } from "@app/lib/api/assistant/conversation";
+import { Authenticator, getSession } from "@app/lib/auth";
+import { apiError, withLogging } from "@app/logger/withlogging";
+
+export type GetConversationResponseBody = {
+  conversation: ConversationType;
+};
+
+async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<WithAPIErrorReponse<GetConversationResponseBody>>
+): Promise<void> {
+  const session = await getSession(req, res);
+  const auth = await Authenticator.fromSuperUserSession(
+    session,
+    req.query.wId as string
+  );
+
+  if (!auth.isDustSuperUser()) {
+    return apiError(req, res, {
+      status_code: 404,
+      api_error: {
+        type: "user_not_found",
+        message: "Could not find the user.",
+      },
+    });
+  }
+
+  const { cId } = req.query;
+  if (!cId || typeof cId !== "string") {
+    return apiError(req, res, {
+      status_code: 400,
+      api_error: {
+        type: "invalid_request_error",
+        message: "The request query is invalid, expects { cId: string }.",
+      },
+    });
+  }
+
+  switch (req.method) {
+    case "GET":
+      const conversation = await getConversation(auth, cId, true);
+
+      if (!conversation) {
+        return apiError(req, res, {
+          status_code: 404,
+          api_error: {
+            type: "conversation_not_found",
+            message: "Could not find the conversation.",
+          },
+        });
+      }
+
+      return res.status(200).json({ conversation });
+
+    default:
+      return apiError(req, res, {
+        status_code: 405,
+        api_error: {
+          type: "method_not_supported_error",
+          message: "The method passed is not supported, GET is expected.",
+        },
+      });
+  }
+}
+
+export default withLogging(handler);

front/pages/poke/[wId]/conversations/[cId]/index.tsx

@@ -2,36 +2,37 @@ import { Page } from "@dust-tt/sparkle";
 import type {
   AgentMessageType,
   ContentFragmentType,
-  ConversationType,
   UserMessageType,
 } from "@dust-tt/types";
 import { assertNever } from "@dust-tt/types";
 import type { InferGetServerSidePropsType } from "next";
 
 import PokeNavbar from "@app/components/poke/PokeNavbar";
-import { getConversation } from "@app/lib/api/assistant/conversation";
 import { withSuperUserAuthRequirements } from "@app/lib/iam/session";
+import { useConversation } from "@app/poke/swr";
 
 export const getServerSideProps = withSuperUserAuthRequirements<{
-  conversation: string;
-}>(async (context, auth) => {
+  workspaceId: string;
+  conversationId: string;
+}>(async (context) => {
   const cId = context.params?.cId;
   if (!cId || typeof cId !== "string") {
     return {
       notFound: true,
     };
   }
 
-  const conversation = await getConversation(auth, cId, true);
-  if (!conversation) {
+  const wId = context.params?.wId;
+  if (!wId || typeof wId !== "string") {
     return {
       notFound: true,
     };
   }
 
   return {
     props: {
-      conversation: JSON.stringify(conversation),
+      workspaceId: wId,
+      conversationId: cId,
     },
   };
 });
@@ -73,52 +74,56 @@ const ContentFragmentView = ({ message }: { message: ContentFragmentType }) => {
 };
 
 const ConversationPage = ({
-  conversation,
+  workspaceId,
+  conversationId,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
-  const c = JSON.parse(conversation) as ConversationType;
+  const { conversation } = useConversation({ workspaceId, conversationId });
+
   return (
     <div className="min-h-screen bg-structure-50">
       <PokeNavbar />
-      <div className="mx-auto max-w-4xl pt-8">
-        <Page.Vertical align="stretch">
-          {c.content.map((messages, i) => {
-            return (
-              <div key={`messages-${i}`}>
-                {messages.map((m, j) => {
-                  switch (m.type) {
-                    case "agent_message": {
-                      return (
-                        <AgentMessageView
-                          message={m}
-                          key={`message-${i}-${j}`}
-                        />
-                      );
-                    }
-                    case "user_message": {
-                      return (
-                        <UserMessageView
-                          message={m}
-                          key={`message-${i}-${j}`}
-                        />
-                      );
+      {conversation && (
+        <div className="mx-auto max-w-4xl pt-8">
+          <Page.Vertical align="stretch">
+            {conversation.content.map((messages, i) => {
+              return (
+                <div key={`messages-${i}`}>
+                  {messages.map((m, j) => {
+                    switch (m.type) {
+                      case "agent_message": {
+                        return (
+                          <AgentMessageView
+                            message={m}
+                            key={`message-${i}-${j}`}
+                          />
+                        );
+                      }
+                      case "user_message": {
+                        return (
+                          <UserMessageView
+                            message={m}
+                            key={`message-${i}-${j}`}
+                          />
+                        );
+                      }
+                      case "content_fragment": {
+                        return (
+                          <ContentFragmentView
+                            message={m}
+                            key={`message-${i}-${j}`}
+                          />
+                        );
+                      }
+                      default:
+                        assertNever(m);
                     }
-                    case "content_fragment": {
-                      return (
-                        <ContentFragmentView
-                          message={m}
-                          key={`message-${i}-${j}`}
-                        />
-                      );
-                    }
-                    default:
-                      assertNever(m);
-                  }
-                })}
-              </div>
-            );
-          })}
-        </Page.Vertical>
-      </div>
+                  })}
+                </div>
+              );
+            })}
+          </Page.Vertical>
+        </div>
+      )}
     </div>
   );
 };

front/poke/swr.ts

@@ -1,3 +1,4 @@
+import type { ConversationType } from "@dust-tt/types";
 import { useMemo } from "react";
 import type { Fetcher } from "swr";
 import useSWR from "swr";
@@ -45,3 +46,28 @@ export function usePokeAssistantTemplate({
     mutateAssistantTemplate: mutate,
   };
 }
+
+export function useConversation({
+  workspaceId,
+  conversationId,
+}: {
+  workspaceId: string;
+  conversationId: string | null;
+}) {
+  const conversationFetcher: Fetcher<{ conversation: ConversationType }> =
+    fetcher;
+
+  const { data, error, mutate } = useSWR(
+    conversationId
+      ? `/api/poke/workspaces/${workspaceId}/conversations/${conversationId}`
+      : null,
+    conversationFetcher
+  );
+
+  return {
+    conversation: data ? data.conversation : null,
+    isConversationLoading: !error && !data,
+    isConversationError: error,
+    mutateConversation: mutate,
+  };
+}