From 7de778ec1e284f746ef08626b8c00f723855f0eb Mon Sep 17 00:00:00 2001
From: Thomas Draier <thomas@dust.tt>
Date: Tue, 26 Nov 2024 17:05:02 +0100
Subject: [PATCH] [extension] Use dropdown menu for conversation switching
 (#8913)

* Use dropdown menu for conversation switching

* show selected conversation

* add chevron
---
 .../conversation/ConversationContainer.tsx    |  37 ++---
 .../conversation/ConversationsListButton.tsx  | 132 +++++++++++++--
 extension/app/src/pages/ConversationPage.tsx  |  31 ++--
 extension/app/src/pages/ConversationsPage.tsx | 151 ------------------
 extension/app/src/pages/MainPage.tsx          | 120 +++++++-------
 extension/app/src/pages/routes.tsx            |   9 --
 6 files changed, 213 insertions(+), 267 deletions(-)
 delete mode 100644 extension/app/src/pages/ConversationsPage.tsx

diff --git a/extension/app/src/components/conversation/ConversationContainer.tsx b/extension/app/src/components/conversation/ConversationContainer.tsx
index 0a975aedea4d..33aa457a855b 100644
--- a/extension/app/src/components/conversation/ConversationContainer.tsx
+++ b/extension/app/src/components/conversation/ConversationContainer.tsx
@@ -45,8 +45,6 @@ export function ConversationContainer({
   user,
 }: ConversationContainerProps) {
   const navigate = useNavigate();
-  const [activeConversationId, setActiveConversationId] =
-    useState(conversationId);
 
   const [includeContent, setIncludeContent] = useState<boolean | undefined>();
 
@@ -55,17 +53,15 @@ export function ConversationContainer({
       return;
     }
     void setConversationsContext({
-      [activeConversationId ?? "new"]: {
+      [conversationId ?? "new"]: {
         includeCurrentPage: includeContent,
       },
     });
-  }, [includeContent]);
+  }, [includeContent, conversationId]);
 
   useEffect(() => {
     const doAsync = async () => {
-      const context = await getConversationContext(
-        activeConversationId ?? "new"
-      );
+      const context = await getConversationContext(conversationId ?? "new");
       setIncludeContent(context.includeCurrentPage);
     };
     void doAsync();
@@ -88,20 +84,12 @@ export function ConversationContainer({
     }
   });
 
-  useEffect(() => {
-    if (activeConversationId) {
-      navigate(`/conversations/${activeConversationId}`, {
-        replace: true,
-      });
-    }
-  }, [activeConversationId, navigate]);
-
   const handlePostMessage = async (
     input: string,
     mentions: AgentMentionType[],
     files: UploadedFileWithKind[]
   ) => {
-    if (!activeConversationId) {
+    if (!conversationId) {
       return null;
     }
     const messageData = { input, mentions };
@@ -115,7 +103,7 @@ export function ConversationContainer({
             // Get the content fragment ID to supersede for a given file.
             // Only for tab contents, we re-use the content fragment ID based on the URL and conversation ID.
             const supersededContentFragmentId: string | undefined =
-              (await getFileContentFragmentId(activeConversationId, file)) ??
+              (await getFileContentFragmentId(conversationId, file)) ??
               undefined;
 
             contentFragmentFiles.push({
@@ -128,7 +116,7 @@ export function ConversationContainer({
 
           const result = await postMessage({
             dustAPI,
-            conversationId: activeConversationId,
+            conversationId,
             messageData,
             files: contentFragmentFiles,
           });
@@ -138,7 +126,7 @@ export function ConversationContainer({
 
             // Save content fragment IDs for tab contents to the local storage.
             await saveFilesContentFragmentIds({
-              conversationId: activeConversationId,
+              conversationId,
               uploadedFiles: files,
               createdContentFragments: contentFragments,
             });
@@ -237,10 +225,13 @@ export function ConversationContainer({
             },
             new: { includeCurrentPage: false },
           });
-          setActiveConversationId(conversationRes.value.sId);
+
+          navigate(`/conversations/${conversationRes.value.sId}`, {
+            replace: true,
+          });
         }
       },
-      [owner, sendNotification, setActiveConversationId, includeContent]
+      [owner, sendNotification, includeContent]
     )
   );
 
@@ -256,13 +247,13 @@ export function ConversationContainer({
     setGreeting(getRandomGreetingForName(user.firstName));
   }, [user]);
 
-  if (activeConversationId) {
+  if (conversationId) {
     return (
       <GenerationContextProvider>
         <div className="h-full flex flex-col">
           <div className="flex-1">
             <ConversationViewer
-              conversationId={activeConversationId}
+              conversationId={conversationId}
               owner={owner}
               user={user}
               onStickyMentionsChange={onStickyMentionsChange}
diff --git a/extension/app/src/components/conversation/ConversationsListButton.tsx b/extension/app/src/components/conversation/ConversationsListButton.tsx
index 9e688ff05eec..e96067940417 100644
--- a/extension/app/src/components/conversation/ConversationsListButton.tsx
+++ b/extension/app/src/components/conversation/ConversationsListButton.tsx
@@ -1,19 +1,131 @@
-import { Button, ChatBubbleLeftRightIcon } from "@dust-tt/sparkle";
-import { useNavigate } from "react-router-dom";
+import type { ConversationWithoutContentPublicType } from "@dust-tt/client";
+import {
+  Button,
+  ChatBubbleLeftRightIcon,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  ScrollArea,
+  Spinner,
+} from "@dust-tt/sparkle";
+import { useConversations } from "@extension/components/conversation/useConversations";
+import moment from "moment";
+import { useNavigate, useParams } from "react-router-dom";
+
+type GroupLabel =
+  | "Today"
+  | "Yesterday"
+  | "Last Week"
+  | "Last Month"
+  | "Last 12 Months"
+  | "Older";
+
+const Content = () => {
+  const { conversations, isConversationsLoading } = useConversations();
+  const { conversationId } = useParams();
+
+  const navigate = useNavigate();
+
+  const groupConversationsByDate = (
+    conversations: ConversationWithoutContentPublicType[]
+  ) => {
+    const today = moment().startOf("day");
+    const yesterday = moment().subtract(1, "days").startOf("day");
+    const lastWeek = moment().subtract(1, "weeks").startOf("day");
+    const lastMonth = moment().subtract(1, "months").startOf("day");
+    const lastYear = moment().subtract(1, "years").startOf("day");
+
+    type GroupLabel =
+      | "Today"
+      | "Yesterday"
+      | "Last Week"
+      | "Last Month"
+      | "Last 12 Months"
+      | "Older";
+
+    const groups: Record<GroupLabel, ConversationWithoutContentPublicType[]> = {
+      Today: [],
+      Yesterday: [],
+      "Last Week": [],
+      "Last Month": [],
+      "Last 12 Months": [],
+      Older: [],
+    };
+
+    conversations.forEach((conversation) => {
+      const createdDate = moment(conversation.created);
+      if (createdDate.isSameOrAfter(today)) {
+        groups["Today"].push(conversation);
+      } else if (createdDate.isSameOrAfter(yesterday)) {
+        groups["Yesterday"].push(conversation);
+      } else if (createdDate.isSameOrAfter(lastWeek)) {
+        groups["Last Week"].push(conversation);
+      } else if (createdDate.isSameOrAfter(lastMonth)) {
+        groups["Last Month"].push(conversation);
+      } else if (createdDate.isSameOrAfter(lastYear)) {
+        groups["Last 12 Months"].push(conversation);
+      } else {
+        groups["Older"].push(conversation);
+      }
+    });
+
+    return groups;
+  };
+
+  const conversationsByDate = conversations.length
+    ? groupConversationsByDate(conversations)
+    : ({} as Record<GroupLabel, ConversationWithoutContentPublicType[]>);
+
+  return isConversationsLoading ? (
+    <div className="flex items-center justify-center m-4">
+      <Spinner variant="dark" size="xs" />
+    </div>
+  ) : (
+    <ScrollArea className="h-[80vh]">
+      {Object.keys(conversationsByDate).map((dateLabel) => (
+        <>
+          <DropdownMenuLabel label={dateLabel} />
+          {conversationsByDate[dateLabel as GroupLabel].map((conversation) => (
+            <DropdownMenuItem
+              key={conversation.sId}
+              label={conversation.title || "Untitled Conversation"}
+              className={
+                conversationId === conversation.sId
+                  ? "bg-primary-50"
+                  : undefined
+              }
+              onClick={() => {
+                navigate(`/conversations/${conversation.sId}`);
+              }}
+            />
+          ))}
+        </>
+      ))}
+    </ScrollArea>
+  );
+};
 
 export const ConversationsListButton = ({
   size = "sm",
 }: {
   size?: "sm" | "md";
 }) => {
-  const navigate = useNavigate();
   return (
-    <Button
-      tooltip="View conversations"
-      icon={ChatBubbleLeftRightIcon}
-      variant="ghost"
-      onClick={() => navigate("/conversations")}
-      size={size}
-    />
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          tooltip="View conversations"
+          icon={ChatBubbleLeftRightIcon}
+          isSelect
+          variant="ghost"
+          size={size}
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-[80vw]">
+        <Content />
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };
diff --git a/extension/app/src/pages/ConversationPage.tsx b/extension/app/src/pages/ConversationPage.tsx
index fa37e3082567..fd7e31deb837 100644
--- a/extension/app/src/pages/ConversationPage.tsx
+++ b/extension/app/src/pages/ConversationPage.tsx
@@ -6,29 +6,20 @@ import {
 } from "@dust-tt/sparkle";
 import type { ProtectedRouteChildrenProps } from "@extension/components/auth/ProtectedRoute";
 import { ConversationContainer } from "@extension/components/conversation/ConversationContainer";
+import { ConversationsListButton } from "@extension/components/conversation/ConversationsListButton";
 import { FileDropProvider } from "@extension/components/conversation/FileUploaderContext";
 import { usePublicConversation } from "@extension/components/conversation/usePublicConversation";
 import { InputBarProvider } from "@extension/components/input_bar/InputBarContext";
-import { useEffect, useState } from "react";
-import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 export const ConversationPage = ({
   workspace,
   user,
 }: ProtectedRouteChildrenProps) => {
   const navigate = useNavigate();
-  const location = useLocation();
   const { conversationId } = useParams();
 
-  const [origin, setOrigin] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (location.state?.origin) {
-      setOrigin(location.state.origin);
-    }
-  }, [location.state?.origin]);
-
-  const { conversation } = usePublicConversation({
+  const { conversation, isConversationLoading } = usePublicConversation({
     conversationId: conversationId ?? null,
   });
 
@@ -37,27 +28,29 @@ export const ConversationPage = ({
     return;
   }
 
+  const title = isConversationLoading
+    ? "..."
+    : conversation?.title || "Conversation";
+
   return (
     <FileDropProvider>
       <BarHeader
-        title={conversation?.title || "Conversation"}
-        tooltip={conversation?.title || "Conversation"}
+        title={title}
+        tooltip={title}
         leftActions={
           <Button
             icon={ChevronLeftIcon}
             variant="ghost"
             onClick={() => {
-              if (origin === "conversations") {
-                navigate("/conversations");
-              } else {
-                navigate("/");
-              }
+              navigate("/");
             }}
             size="md"
           />
         }
         rightActions={
           <div className="flex flex-row items-right">
+            <ConversationsListButton size="md" />
+
             <Button
               icon={ExternalLinkIcon}
               variant="ghost"
diff --git a/extension/app/src/pages/ConversationsPage.tsx b/extension/app/src/pages/ConversationsPage.tsx
deleted file mode 100644
index 625af51c4275..000000000000
--- a/extension/app/src/pages/ConversationsPage.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import type { ConversationWithoutContentPublicType } from "@dust-tt/client";
-import {
-  BarHeader,
-  Button,
-  ChevronLeftIcon,
-  NavigationList,
-  NavigationListItem,
-  NavigationListLabel,
-  Spinner,
-} from "@dust-tt/sparkle";
-import { useConversations } from "@extension/components/conversation/useConversations";
-import moment from "moment";
-import type { NavigateFunction } from "react-router-dom";
-import { useNavigate } from "react-router-dom";
-
-type GroupLabel =
-  | "Today"
-  | "Yesterday"
-  | "Last Week"
-  | "Last Month"
-  | "Last 12 Months"
-  | "Older";
-
-export const ConversationsPage = () => {
-  const navigate = useNavigate();
-  const { conversations, isConversationsLoading } = useConversations();
-
-  if (isConversationsLoading) {
-    return (
-      <div className="flex h-screen items-center justify-center">
-        <Spinner />
-      </div>
-    );
-  }
-
-  const groupConversationsByDate = (
-    conversations: ConversationWithoutContentPublicType[]
-  ) => {
-    const today = moment().startOf("day");
-    const yesterday = moment().subtract(1, "days").startOf("day");
-    const lastWeek = moment().subtract(1, "weeks").startOf("day");
-    const lastMonth = moment().subtract(1, "months").startOf("day");
-    const lastYear = moment().subtract(1, "years").startOf("day");
-
-    const groups: Record<GroupLabel, ConversationWithoutContentPublicType[]> = {
-      Today: [],
-      Yesterday: [],
-      "Last Week": [],
-      "Last Month": [],
-      "Last 12 Months": [],
-      Older: [],
-    };
-
-    conversations.forEach((conversation) => {
-      const createdDate = moment(conversation.created);
-      if (createdDate.isSameOrAfter(today)) {
-        groups["Today"].push(conversation);
-      } else if (createdDate.isSameOrAfter(yesterday)) {
-        groups["Yesterday"].push(conversation);
-      } else if (createdDate.isSameOrAfter(lastWeek)) {
-        groups["Last Week"].push(conversation);
-      } else if (createdDate.isSameOrAfter(lastMonth)) {
-        groups["Last Month"].push(conversation);
-      } else if (createdDate.isSameOrAfter(lastYear)) {
-        groups["Last 12 Months"].push(conversation);
-      } else {
-        groups["Older"].push(conversation);
-      }
-    });
-
-    return groups;
-  };
-
-  const conversationsByDate = conversations.length
-    ? groupConversationsByDate(conversations)
-    : ({} as Record<GroupLabel, ConversationWithoutContentPublicType[]>);
-
-  return (
-    <>
-      <BarHeader
-        title="Conversations"
-        leftActions={
-          <div className="flex flex-row items-right">
-            <Button
-              icon={ChevronLeftIcon}
-              variant="ghost"
-              onClick={() => navigate("/")}
-              size="md"
-            />
-          </div>
-        }
-      />
-      <div className="h-full w-full mt-12">
-        {conversationsByDate &&
-          Object.keys(conversationsByDate).map((dateLabel) => (
-            <RenderConversations
-              key={dateLabel}
-              conversations={conversationsByDate[dateLabel as GroupLabel]}
-              dateLabel={dateLabel}
-              navigate={navigate}
-            />
-          ))}
-      </div>
-    </>
-  );
-};
-
-const RenderConversations = ({
-  conversations,
-  dateLabel,
-  navigate,
-}: {
-  conversations: ConversationWithoutContentPublicType[];
-  dateLabel: string;
-  navigate: NavigateFunction;
-}) => {
-  if (!conversations.length) {
-    return null;
-  }
-
-  const getLabel = (
-    conversation: ConversationWithoutContentPublicType
-  ): string => {
-    const conversationLabel =
-      conversation.title ||
-      (moment(conversation.created).isSame(moment(), "day")
-        ? "New Conversation"
-        : `Conversation from ${new Date(conversation.created).toLocaleDateString()}`);
-
-    return conversationLabel;
-  };
-
-  return (
-    <div>
-      <NavigationListLabel label={dateLabel} />
-      <NavigationList>
-        {conversations.map((conversation) => (
-          <NavigationListItem
-            key={conversation.sId}
-            label={getLabel(conversation)}
-            onClick={() => {
-              navigate(`/conversations/${conversation.sId}`, {
-                state: { origin: "conversations" },
-              });
-            }}
-          />
-        ))}
-      </NavigationList>
-    </div>
-  );
-};
diff --git a/extension/app/src/pages/MainPage.tsx b/extension/app/src/pages/MainPage.tsx
index 7a2b92ce8aad..73ea205e4866 100644
--- a/extension/app/src/pages/MainPage.tsx
+++ b/extension/app/src/pages/MainPage.tsx
@@ -1,5 +1,6 @@
 import {
   Avatar,
+  BarHeader,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -27,34 +28,71 @@ export const MainPage = ({
 
   return (
     <>
-      <div className="flex items-start justify-between">
-        <div className="flex flex-col gap-2 pb-6">
-          {user.workspaces.length > 1 && (
-            <div className="flex flex-row items-center gap-2">
-              <p className="text-sm text-slate-500">Workspace:</p>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    label={workspace ? workspace.name : "Select workspace"}
-                    variant="ghost"
-                    isSelect
+      <BarHeader
+        title={""}
+        tooltip={"Conversation"}
+        leftActions={
+          <div className="flex flex-col gap-2">
+            {user.workspaces.length > 1 && (
+              <div className="flex flex-row items-center gap-2">
+                <p className="text-sm text-slate-500">Workspace:</p>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      label={workspace ? workspace.name : "Select workspace"}
+                      variant="ghost"
+                      isSelect
+                    />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent>
+                    {user.workspaces.map((w) => {
+                      return (
+                        <DropdownMenuItem
+                          key={w.sId}
+                          onClick={() => void handleSelectWorkspace(w.sId)}
+                          label={w.name}
+                        />
+                      );
+                    })}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            )}
+          </div>
+        }
+        rightActions={
+          <div className="flex flex-row items-right">
+            <ConversationsListButton size="md" />
+
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <div className="px-2">
+                  <Avatar
+                    size="md"
+                    visual={
+                      user.image
+                        ? user.image
+                        : "https://gravatar.com/avatar/anonymous?d=mp"
+                    }
+                    onClick={() => {
+                      "clickable";
+                    }}
                   />
-                </DropdownMenuTrigger>
-                <DropdownMenuContent>
-                  {user.workspaces.map((w) => {
-                    return (
-                      <DropdownMenuItem
-                        key={w.sId}
-                        onClick={() => void handleSelectWorkspace(w.sId)}
-                        label={w.name}
-                      />
-                    );
-                  })}
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          )}
-        </div>
+                </div>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem
+                  icon={LogoutIcon}
+                  label="Sign out"
+                  onClick={handleLogout}
+                />
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        }
+      />
+
+      <div className="flex items-start justify-between">
         <div className="fixed bottom-0 right-0 z-10">
           <Link to="https://dust.tt" target="_blank">
             <div className="rounded-tl-2xl border-t border-l border-gray-200 bg-white p-4">
@@ -62,34 +100,6 @@ export const MainPage = ({
             </div>
           </Link>
         </div>
-        <div className="flex items-center gap-2">
-          <ConversationsListButton size="md" />
-          <DropdownMenu>
-            <DropdownMenuTrigger>
-              <>
-                <span className="sr-only">Open user menu</span>
-                <Avatar
-                  size="md"
-                  visual={
-                    user.image
-                      ? user.image
-                      : "https://gravatar.com/avatar/anonymous?d=mp"
-                  }
-                  onClick={() => {
-                    "clickable";
-                  }}
-                />
-              </>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuItem
-                icon={LogoutIcon}
-                label="Sign out"
-                onClick={handleLogout}
-              />
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
       </div>
       <div className="h-full w-full pt-28 max-w-4xl mx-auto flex justify-center">
         <FileDropProvider>
diff --git a/extension/app/src/pages/routes.tsx b/extension/app/src/pages/routes.tsx
index 50d34a37eb52..6b73bd84de27 100644
--- a/extension/app/src/pages/routes.tsx
+++ b/extension/app/src/pages/routes.tsx
@@ -1,6 +1,5 @@
 import { ProtectedRoute } from "@extension/components/auth/ProtectedRoute";
 import { ConversationPage } from "@extension/pages/ConversationPage";
-import { ConversationsPage } from "@extension/pages/ConversationsPage";
 import { LoginPage } from "@extension/pages/LoginPage";
 import { MainPage } from "@extension/pages/MainPage";
 import { RunPage } from "@extension/pages/RunPage";
@@ -38,14 +37,6 @@ export const routes = [
       </ProtectedRoute>
     ),
   },
-  {
-    path: "/conversations",
-    element: (
-      <ProtectedRoute>
-        <ConversationsPage />
-      </ProtectedRoute>
-    ),
-  },
   {
     path: "/run",
     element: <ProtectedRoute>{() => <RunPage />}</ProtectedRoute>,