Display pretty alert popups when reaching data sources limits (#2371)

* Moved message alert to sparkle * Closeable alerts for managed datasources * Alert on datasources * Alert on documents * cleaning * henry review
dust-tt · Nov 3, 2023 · a5bfd4b · a5bfd4b
1 parent 07c94bb
commit a5bfd4b
Show file tree

Hide file tree

Showing 8 changed files with 265 additions and 231 deletions.
diff --git a/front/components/assistant/conversation/LimitReachedPopup.tsx b/front/components/assistant/conversation/LimitReachedPopup.tsx
diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -13,7 +13,7 @@
     "initdb": "env $(cat .env.local) npx tsx admin/db.ts"
   },
   "dependencies": {
-    "@dust-tt/sparkle": "^0.2.29",
+    "@dust-tt/sparkle": "^0.2.31",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@headlessui/react": "^1.7.7",

diff --git a/front/pages/w/[wId]/assistant/[cId]/index.tsx b/front/pages/w/[wId]/assistant/[cId]/index.tsx
@@ -6,12 +6,12 @@ import Conversation from "@app/components/assistant/conversation/Conversation";
 import { ConversationTitle } from "@app/components/assistant/conversation/ConversationTitle";
 import { GenerationContextProvider } from "@app/components/assistant/conversation/GenerationContextProvider";
 import { FixedAssistantInputBar } from "@app/components/assistant/conversation/InputBar";
-import { LimitReachedPopup } from "@app/components/assistant/conversation/LimitReachedPopup";
 import { AssistantSidebarMenu } from "@app/components/assistant/conversation/SidebarMenu";
 import AppLayout from "@app/components/sparkle/AppLayout";
 import { SendNotificationsContext } from "@app/components/sparkle/Notification";
 import { Authenticator, getSession, getUserFromSession } from "@app/lib/auth";
 import { useConversation } from "@app/lib/swr";
+import { LimitReachedPopup } from "@app/pages/w/[wId]/assistant/new";
 import { AgentMention, MentionType } from "@app/types/assistant/conversation";
 import { UserType, WorkspaceType } from "@app/types/user";
 

diff --git a/front/pages/w/[wId]/assistant/new.tsx b/front/pages/w/[wId]/assistant/new.tsx
@@ -7,6 +7,7 @@ import {
   ChevronUpIcon,
   Page,
   PlusIcon,
+  Popup,
   WrenchIcon,
 } from "@dust-tt/sparkle";
 import * as t from "io-ts";
@@ -20,7 +21,6 @@ import {
   FixedAssistantInputBar,
   InputBarContext,
 } from "@app/components/assistant/conversation/InputBar";
-import { LimitReachedPopup } from "@app/components/assistant/conversation/LimitReachedPopup";
 import { AssistantSidebarMenu } from "@app/components/assistant/conversation/SidebarMenu";
 import AppLayout from "@app/components/sparkle/AppLayout";
 import { SendNotificationsContext } from "@app/components/sparkle/Notification";
@@ -424,3 +424,25 @@ const AvatarListItem = function ({
     </div>
   );
 };
+
+export function LimitReachedPopup({
+  planLimitReached,
+  workspaceId,
+}: {
+  planLimitReached: boolean;
+  workspaceId: string;
+}) {
+  const router = useRouter();
+  return (
+    <Popup
+      show={planLimitReached}
+      chipLabel="Free plan"
+      description="Looks like you've used up all your messages. Check out our paid plans to get unlimited messages."
+      buttonLabel="Check Dust plans"
+      buttonClick={() => {
+        void router.push(`/w/${workspaceId}/subscription`);
+      }}
+      className="fixed bottom-16 right-16"
+    />
+  );
+}
diff --git a/front/pages/w/[wId]/builder/data-sources/[name]/index.tsx b/front/pages/w/[wId]/builder/data-sources/[name]/index.tsx
@@ -9,6 +9,7 @@ import {
   Page,
   PencilSquareIcon,
   PlusIcon,
+  Popup,
   SectionHeader,
   SlackLogo,
   SliderToggle,
@@ -147,6 +148,7 @@ function StandardDataSourceView({
 
   const { documents, total, isDocumentsLoading, isDocumentsError } =
     useDocuments(owner, dataSource, limit, offset);
+  const [showDocumentsLimitPopup, setShowDocumentsLimitPopup] = useState(false);
 
   const [displayNameByDocId, setDisplayNameByDocId] = useState<
     Record<string, string>
@@ -240,7 +242,21 @@ function StandardDataSourceView({
 
           {readOnly ? null : (
             <div className="">
-              <div className="mt-0 flex-none">
+              <div className="relative mt-0 flex-none">
+                <Popup
+                  show={showDocumentsLimitPopup}
+                  chipLabel="Free plan"
+                  description="You have reached the limit of documents per data source for the free plan. Upgrade to a paid plan to add more documents."
+                  buttonLabel="Check Dust plans"
+                  buttonClick={() => {
+                    void router.push(`/w/${owner.sId}/subscription`);
+                  }}
+                  onClose={() => {
+                    setShowDocumentsLimitPopup(false);
+                  }}
+                  className="absolute bottom-8 right-0"
+                />
+
                 <Button
                   variant="primary"
                   icon={PlusIcon}
@@ -251,10 +267,7 @@ function StandardDataSourceView({
                       plan.limits.dataSources.documents.count != -1 &&
                       total >= plan.limits.dataSources.documents.count
                     ) {
-                      window.alert(
-                        "Data Sources are limited to 32 documents on our free plan. Contact team@dust.tt if you want to increase this limit."
-                      );
-                      return;
+                      setShowDocumentsLimitPopup(true);
                     } else {
                       void router.push(
                         `/w/${owner.sId}/builder/data-sources/${dataSource.name}/upsert`