From 50ec0cb13d79eb1cf343612a531f683c83e30d45 Mon Sep 17 00:00:00 2001
From: filou <philipperolet@gmail.com>
Date: Fri, 22 Dec 2023 15:17:02 +0100
Subject: [PATCH] [Ahuna] Test assistants in side modal from gallery

---
 .../components/assistant/AssistantPreview.tsx |  26 ++-
 .../assistant/TryAssistantModal.tsx           | 166 ++++++++++++++++++
 front/components/sparkle/Notification.tsx     |   2 +-
 front/lib/conversation.ts                     | 131 ++++++++++++++
 front/pages/w/[wId]/assistant/[cId]/index.tsx | 110 +++---------
 front/pages/w/[wId]/assistant/gallery.tsx     |  12 ++
 6 files changed, 359 insertions(+), 88 deletions(-)
 create mode 100644 front/components/assistant/TryAssistantModal.tsx
 create mode 100644 front/lib/conversation.ts

diff --git a/front/components/assistant/AssistantPreview.tsx b/front/components/assistant/AssistantPreview.tsx
index 11c7e0516a58..8b7a6d29aae3 100644
--- a/front/components/assistant/AssistantPreview.tsx
+++ b/front/components/assistant/AssistantPreview.tsx
@@ -4,6 +4,7 @@ import {
   Chip,
   DashIcon,
   MoreIcon,
+  PlayIcon,
   PlusIcon,
 } from "@dust-tt/sparkle";
 import {
@@ -28,6 +29,7 @@ interface AssistantPreviewProps {
   onUpdate: () => void;
   variant: AssistantPreviewVariant;
   flow: AssistantPreviewFlow;
+  setTestModalAssistant?: (agentConfiguration: AgentConfigurationType) => void;
 }
 
 function getDescriptionClassName(variant: AssistantPreviewVariant): string {
@@ -55,6 +57,7 @@ export function AssistantPreview({
   onUpdate,
   variant,
   flow,
+  setTestModalAssistant,
 }: AssistantPreviewProps) {
   const [isUpdatingList, setIsUpdatingList] = useState<boolean>(false);
   // TODO(flav) Move notification logic to the caller. This maintains the purity of the component by
@@ -200,7 +203,24 @@ export function AssistantPreview({
     default:
       assertNever(flow);
   }
-
+  let testButton = null;
+  if (
+    setTestModalAssistant &&
+    ((flow === "workspace" && agentConfiguration.scope === "published") ||
+      (flow === "personal" &&
+        agentConfiguration.userListStatus === "not-in-list"))
+  ) {
+    testButton = (
+      <Button
+        key="test"
+        variant="tertiary"
+        icon={PlayIcon}
+        size="xs"
+        label={"Test"}
+        onClick={() => setTestModalAssistant(agentConfiguration)}
+      />
+    );
+  }
   const showAssistantButton = (
     <Button
       key="show_details"
@@ -268,7 +288,9 @@ export function AssistantPreview({
 
   // Define button groups with JSX elements, including default buttons
   const buttonGroups: Record<AssistantPreviewVariant, JSX.Element[]> = {
-    gallery: [addButton, showAssistantButton].filter(Boolean) as JSX.Element[],
+    gallery: [addButton, testButton, showAssistantButton].filter(
+      Boolean
+    ) as JSX.Element[],
     home: defaultButtons,
   };
 
diff --git a/front/components/assistant/TryAssistantModal.tsx b/front/components/assistant/TryAssistantModal.tsx
new file mode 100644
index 000000000000..4c20efc909bf
--- /dev/null
+++ b/front/components/assistant/TryAssistantModal.tsx
@@ -0,0 +1,166 @@
+import { Modal } from "@dust-tt/sparkle";
+import {
+  AgentConfigurationType,
+  AgentMention,
+  ConversationType,
+  InternalPostConversationsRequestBodySchema,
+  MentionType,
+  UserType,
+} from "@dust-tt/types";
+import { WorkspaceType } from "@dust-tt/types";
+import * as t from "io-ts";
+import { useContext, useEffect, useState } from "react";
+
+import Conversation from "@app/components/assistant/conversation/Conversation";
+import { GenerationContextProvider } from "@app/components/assistant/conversation/GenerationContextProvider";
+import { FixedAssistantInputBar } from "@app/components/assistant/conversation/input_bar/InputBar";
+import { SendNotificationsContext } from "@app/components/sparkle/Notification";
+import { NotificationType } from "@app/components/sparkle/Notification";
+import { deleteConversation, submitMessage } from "@app/lib/conversation";
+import { PostConversationsResponseBody } from "@app/pages/api/w/[wId]/assistant/conversations";
+
+export function TryAssistantModal({
+  owner,
+  user,
+  assistant,
+  onClose,
+}: {
+  owner: WorkspaceType;
+  user: UserType;
+  assistant: AgentConfigurationType;
+  onClose: () => void;
+}) {
+  const [stickyMentions, setStickyMentions] = useState<AgentMention[]>([
+    { configurationId: assistant?.sId as string },
+  ]);
+  const [conversation, setConversation] = useState<
+    ConversationType | null | { errorMessage: string }
+  >(null);
+  const sendNotification = useContext(SendNotificationsContext);
+
+  const handleSubmit = async (
+    input: string,
+    mentions: MentionType[],
+    contentFragment?: {
+      title: string;
+      content: string;
+    }
+  ) => {
+    if (!conversation || "errorMessage" in conversation) return;
+    const messageData = { input, mentions, contentFragment };
+    const result = await submitMessage({
+      owner,
+      user,
+      conversationId: conversation.sId as string,
+      messageData,
+    });
+    if (result.isOk()) return;
+    sendNotification({
+      title: result.error.title,
+      description: result.error.message,
+      type: "error",
+    });
+  };
+
+  useEffect(() => {
+    setStickyMentions([{ configurationId: assistant?.sId as string }]);
+    if (assistant && !conversation) {
+      createEmptyConversation(owner.sId, assistant, sendNotification)
+        .then(async (conv) => {
+          await submitMessage({
+            owner,
+            user,
+            conversationId: conv.sId,
+            messageData: {
+              input: "Hi, I'd like to try you out!",
+              mentions: [{ configurationId: assistant.sId }],
+            },
+          });
+          setConversation(conv);
+        })
+        .catch((e) => setConversation({ errorMessage: e.message }));
+    }
+  }, [assistant, conversation, owner, sendNotification, user]);
+
+  return (
+    <Modal
+      isOpen={!!assistant}
+      title={`Trying @${assistant?.name}`}
+      onClose={async () => {
+        onClose();
+        if (conversation && "sId" in conversation) {
+          await deleteConversation({
+            workspaceId: owner.sId,
+            conversationId: conversation?.sId as string,
+            sendNotification,
+          });
+          setConversation(null);
+        }
+      }}
+      hasChanged={false}
+      variant="side-md"
+    >
+      {conversation && !("errorMessage" in conversation) && (
+        <GenerationContextProvider>
+          <Conversation
+            owner={owner}
+            user={user}
+            conversationId={conversation.sId}
+            onStickyMentionsChange={setStickyMentions}
+          />
+          <FixedAssistantInputBar
+            owner={owner}
+            onSubmit={handleSubmit}
+            stickyMentions={stickyMentions}
+            conversationId={conversation.sId}
+          />{" "}
+        </GenerationContextProvider>
+      )}
+      {conversation && "errorMessage" in conversation && (
+        <div className="flex h-full flex-col items-center justify-center">
+          <div className="text-center">
+            <h2 className="text-2xl font-semibold">
+              Error creating conversation
+            </h2>
+            <p className="text-structure-500 text-lg">
+              {conversation.errorMessage}
+            </p>
+          </div>
+        </div>
+      )}
+    </Modal>
+  );
+}
+
+async function createEmptyConversation(
+  workspaceId: string,
+  agentConfiguration: AgentConfigurationType,
+  sendNotification: (notification: NotificationType) => void
+): Promise<ConversationType> {
+  const body: t.TypeOf<typeof InternalPostConversationsRequestBodySchema> = {
+    title: `Trying out ${agentConfiguration.name}`,
+    visibility: "unlisted",
+    message: null,
+    contentFragment: undefined,
+  };
+
+  const cRes = await fetch(`/api/w/${workspaceId}/assistant/conversations`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(body),
+  });
+
+  if (!cRes.ok) {
+    const data = await cRes.json();
+    sendNotification({
+      title: "Error creating conversation.",
+      description: data.error.message || "Please try again or contact us.",
+      type: "error",
+    });
+    throw new Error(data.error.message);
+  }
+
+  return ((await cRes.json()) as PostConversationsResponseBody).conversation;
+}
diff --git a/front/components/sparkle/Notification.tsx b/front/components/sparkle/Notification.tsx
index 0c34a00e998f..000d398d42ee 100644
--- a/front/components/sparkle/Notification.tsx
+++ b/front/components/sparkle/Notification.tsx
@@ -11,7 +11,7 @@ import { createPortal } from "react-dom";
 
 import { classNames } from "@app/lib/utils";
 
-type NotificationType = {
+export type NotificationType = {
   title?: string;
   description?: string;
   type: "success" | "error";
diff --git a/front/lib/conversation.ts b/front/lib/conversation.ts
new file mode 100644
index 000000000000..04efdc0ea12e
--- /dev/null
+++ b/front/lib/conversation.ts
@@ -0,0 +1,131 @@
+import {
+  Err,
+  MentionType,
+  Ok,
+  Result,
+  UserType,
+  WorkspaceType,
+} from "@dust-tt/types";
+
+import { NotificationType } from "@app/components/sparkle/Notification";
+
+export type ConversationErrorType = {
+  type:
+    | "attachment_upload_error"
+    | "message_send_error"
+    | "plan_limit_reached_error";
+  title: string;
+  message: string;
+};
+
+export async function submitMessage({
+  owner,
+  user,
+  conversationId,
+  messageData,
+}: {
+  owner: WorkspaceType;
+  user: UserType;
+  conversationId: string;
+  messageData: {
+    input: string;
+    mentions: MentionType[];
+    contentFragment?: {
+      title: string;
+      content: string;
+    };
+  };
+}): Promise<Result<void, ConversationErrorType>> {
+  const { input, mentions, contentFragment } = messageData;
+  // Create a new content fragment.
+  if (contentFragment) {
+    const mcfRes = await fetch(
+      `/api/w/${owner.sId}/assistant/conversations/${conversationId}/content_fragment`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          title: contentFragment.title,
+          content: contentFragment.content,
+          url: null,
+          contentType: "file_attachment",
+          context: {
+            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC",
+            profilePictureUrl: user.image,
+          },
+        }),
+      }
+    );
+
+    if (!mcfRes.ok) {
+      const data = await mcfRes.json();
+      console.error("Error creating content fragment", data);
+      return new Err({
+        type: "attachment_upload_error",
+        title: "Error uploading file.",
+        message: data.error.message || "Please try again or contact us.",
+      });
+    }
+  }
+
+  // Create a new user message.
+  const mRes = await fetch(
+    `/api/w/${owner.sId}/assistant/conversations/${conversationId}/messages`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        content: input,
+        context: {
+          timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC",
+          profilePictureUrl: user.image,
+        },
+        mentions,
+      }),
+    }
+  );
+
+  if (!mRes.ok) {
+    const data = await mRes.json();
+    return new Err({
+      type:
+        data.error.type === "test_plan_message_limit_reached"
+          ? "plan_limit_reached_error"
+          : "message_send_error",
+      title: "Your message could not be sent.",
+      message: data.error.message || "Please try again or contact us.",
+    });
+  }
+  return new Ok(undefined);
+}
+
+export async function deleteConversation({
+  workspaceId,
+  conversationId,
+  sendNotification,
+}: {
+  workspaceId: string;
+  conversationId: string;
+  sendNotification: (notification: NotificationType) => void;
+}) {
+  const res = await fetch(
+    `/api/w/${workspaceId}/assistant/conversations/${conversationId}`,
+    {
+      method: "DELETE",
+    }
+  );
+
+  if (!res.ok) {
+    const data = await res.json();
+    sendNotification({
+      title: "Error deleting conversation.",
+      description: data.error.message || "Please try again or contact us.",
+      type: "error",
+    });
+    return;
+  }
+}
diff --git a/front/pages/w/[wId]/assistant/[cId]/index.tsx b/front/pages/w/[wId]/assistant/[cId]/index.tsx
index abd6d4f0a81a..1f3d6c6176cd 100644
--- a/front/pages/w/[wId]/assistant/[cId]/index.tsx
+++ b/front/pages/w/[wId]/assistant/[cId]/index.tsx
@@ -14,6 +14,7 @@ import AppLayout from "@app/components/sparkle/AppLayout";
 import { subNavigationConversations } from "@app/components/sparkle/navigation";
 import { SendNotificationsContext } from "@app/components/sparkle/Notification";
 import { Authenticator, getSession, getUserFromSession } from "@app/lib/auth";
+import { deleteConversation, submitMessage } from "@app/lib/conversation";
 import { useConversation } from "@app/lib/swr";
 import { LimitReachedPopup } from "@app/pages/w/[wId]/assistant/new";
 
@@ -89,6 +90,7 @@ export default function AssistantConversation({
     conversationId,
     workspaceId: owner.sId,
   });
+
   const handleSubmit = async (
     input: string,
     mentions: MentionType[],
@@ -97,90 +99,23 @@ export default function AssistantConversation({
       content: string;
     }
   ) => {
-    // Create a new content fragment.
-    if (contentFragment) {
-      const mcfRes = await fetch(
-        `/api/w/${owner.sId}/assistant/conversations/${conversationId}/content_fragment`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            title: contentFragment.title,
-            content: contentFragment.content,
-            url: null,
-            contentType: "file_attachment",
-            context: {
-              timezone:
-                Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC",
-              profilePictureUrl: user.image,
-            },
-          }),
-        }
-      );
-
-      if (!mcfRes.ok) {
-        const data = await mcfRes.json();
-        console.error("Error creating content fragment", data);
-        sendNotification({
-          title: "Error uploading file.",
-          description: data.error.message || "Please try again or contact us.",
-          type: "error",
-        });
-        return;
-      }
-    }
-
-    // Create a new user message.
-    const mRes = await fetch(
-      `/api/w/${owner.sId}/assistant/conversations/${conversationId}/messages`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          content: input,
-          context: {
-            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC",
-            profilePictureUrl: user.image,
-          },
-          mentions,
-        }),
-      }
-    );
-
-    if (!mRes.ok) {
-      const data = await mRes.json();
-      if (data.error.type === "test_plan_message_limit_reached") {
-        setPlanLimitReached(true);
-      } else {
-        sendNotification({
-          title: "Your message could not be sent",
-          description: data.error.message || "Please try again or contact us.",
-          type: "error",
-        });
-      }
-      return;
-    }
-  };
-
-  const handdleDeleteConversation = async () => {
-    const res = await fetch(
-      `/api/w/${owner.sId}/assistant/conversations/${conversationId}`,
-      {
-        method: "DELETE",
-      }
-    );
-
-    if (!res.ok) {
-      const data = await res.json();
-      window.alert(`Error deleting conversation: ${data.error.message}`);
-      return;
+    const messageData = { input, mentions, contentFragment };
+    const result = await submitMessage({
+      owner,
+      user,
+      conversationId,
+      messageData,
+    });
+    if (result.isOk()) return;
+    if (result.error.type === "plan_limit_reached_error") {
+      setPlanLimitReached(true);
+    } else {
+      sendNotification({
+        title: result.error.title,
+        description: result.error.message,
+        type: "error",
+      });
     }
-
-    await router.push(`/w/${owner.sId}/assistant/new`);
   };
 
   return (
@@ -207,8 +142,13 @@ export default function AssistantConversation({
               owner={owner}
               conversation={conversation}
               shareLink={`${baseUrl}/w/${owner.sId}/assistant/${conversationId}`}
-              onDelete={() => {
-                void handdleDeleteConversation();
+              onDelete={async () => {
+                await deleteConversation({
+                  workspaceId: owner.sId,
+                  conversationId,
+                  sendNotification,
+                });
+                void router.push(`/w/${owner.sId}/assistant/new`);
               }}
             />
           )
diff --git a/front/pages/w/[wId]/assistant/gallery.tsx b/front/pages/w/[wId]/assistant/gallery.tsx
index 06895241efb6..dff83c049366 100644
--- a/front/pages/w/[wId]/assistant/gallery.tsx
+++ b/front/pages/w/[wId]/assistant/gallery.tsx
@@ -13,6 +13,7 @@ import { useState } from "react";
 
 import { AssistantDetails } from "@app/components/assistant/AssistantDetails";
 import { AssistantPreview } from "@app/components/assistant/AssistantPreview";
+import { TryAssistantModal } from "@app/components/assistant/TryAssistantModal";
 import AppLayout from "@app/components/sparkle/AppLayout";
 import { AppLayoutSimpleCloseTitle } from "@app/components/sparkle/AppLayoutTitle";
 import { subNavigationConversations } from "@app/components/sparkle/navigation";
@@ -144,6 +145,8 @@ export default function AssistantsGallery({
   const [showDetails, setShowDetails] = useState<AgentConfigurationType | null>(
     null
   );
+  const [testModalAssistant, setTestModalAssistant] =
+    useState<AgentConfigurationType | null>(null);
 
   const tabs = [
     {
@@ -217,6 +220,14 @@ export default function AssistantsGallery({
           flow={flow === "workspace_add" ? "workspace" : "personal"}
         />
       )}
+      {testModalAssistant && (
+        <TryAssistantModal
+          owner={owner}
+          user={user}
+          assistant={testModalAssistant}
+          onClose={() => setTestModalAssistant(null)}
+        />
+      )}
       <div className="pb-16">
         <Page.Vertical gap="xl" align="stretch">
           <Tab tabs={tabs} />
@@ -275,6 +286,7 @@ export default function AssistantsGallery({
                   }}
                   variant="gallery"
                   flow={flow === "workspace_add" ? "workspace" : "personal"}
+                  setTestModalAssistant={setTestModalAssistant}
                 />
               ))}
             </div>