From 1581d354760723b97cb1786f91c4be68949709e6 Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Thu, 10 Oct 2024 12:34:30 -0700
Subject: [PATCH] account for no visible assistants (#2765)

---
 web/src/app/chat/ChatPage.tsx                 | 16 +++++++-
 web/src/components/BasicClickable.tsx         |  6 ++-
 .../components/modals/NoAssistantModal.tsx    | 37 +++++++++++++++++++
 3 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 web/src/components/modals/NoAssistantModal.tsx

diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
index 4f7363a3b6..8c7eccc067 100644
--- a/web/src/app/chat/ChatPage.tsx
+++ b/web/src/app/chat/ChatPage.tsx
@@ -106,6 +106,7 @@ import {
   orderAssistantsForUser,
 } from "@/lib/assistants/utils";
 import BlurBackground from "./shared_chat_search/BlurBackground";
+import { NoAssistantModal } from "@/components/modals/NoAssistantModal";
 
 const TEMP_USER_MESSAGE_ID = -1;
 const TEMP_ASSISTANT_MESSAGE_ID = -2;
@@ -139,7 +140,7 @@ export function ChatPage({
 
   const [showApiKeyModal, setShowApiKeyModal] = useState(true);
 
-  const { user, refreshUser, isLoadingUser } = useUser();
+  const { user, refreshUser, isAdmin, isLoadingUser } = useUser();
 
   const existingChatIdRaw = searchParams.get("chatId");
   const currentPersonaId = searchParams.get(SEARCH_PARAM_NAMES.PERSONA_ID);
@@ -191,6 +192,7 @@ export function ChatPage({
   const search_param_temperature = searchParams.get(
     SEARCH_PARAM_NAMES.TEMPERATURE
   );
+
   const defaultTemperature = search_param_temperature
     ? parseFloat(search_param_temperature)
     : selectedAssistant?.tools.some(
@@ -225,6 +227,8 @@ export function ChatPage({
     finalAssistants[0] ||
     availableAssistants[0];
 
+  const noAssistants = liveAssistant == null || liveAssistant == undefined;
+
   useEffect(() => {
     if (!loadedIdSessionRef.current && !currentPersonaId) {
       return;
@@ -1695,6 +1699,9 @@ export function ChatPage({
   };
 
   useEffect(() => {
+    if (noAssistants) {
+      return;
+    }
     const includes = checkAnyAssistantHasSearch(
       messageHistory,
       availableAssistants,
@@ -1704,6 +1711,9 @@ export function ChatPage({
   }, [messageHistory, availableAssistants, liveAssistant]);
 
   const [retrievalEnabled, setRetrievalEnabled] = useState(() => {
+    if (noAssistants) {
+      return false;
+    }
     return checkAnyAssistantHasSearch(
       messageHistory,
       availableAssistants,
@@ -1774,11 +1784,13 @@ export function ChatPage({
     <>
       <HealthCheckBanner />
 
-      {showApiKeyModal && !shouldShowWelcomeModal && (
+      {showApiKeyModal && !shouldShowWelcomeModal ? (
         <ApiKeyModal
           hide={() => setShowApiKeyModal(false)}
           setPopup={setPopup}
         />
+      ) : (
+        noAssistants && <NoAssistantModal isAdmin={isAdmin} />
       )}
 
       {/* ChatPopup is a custom popup that displays a admin-specified message on initial user visit. 
diff --git a/web/src/components/BasicClickable.tsx b/web/src/components/BasicClickable.tsx
index 650baf7dc9..34132c7bce 100644
--- a/web/src/components/BasicClickable.tsx
+++ b/web/src/components/BasicClickable.tsx
@@ -3,11 +3,13 @@ export function BasicClickable({
   onClick,
   fullWidth = false,
   inset,
+  className,
 }: {
   children: string | JSX.Element;
   onClick?: () => void;
   inset?: boolean;
   fullWidth?: boolean;
+  className?: string;
 }) {
   return (
     <button
@@ -26,7 +28,9 @@ export function BasicClickable({
         select-none
         overflow-hidden
         hover:bg-hover-light
-        ${fullWidth ? "w-full" : ""}`}
+        ${fullWidth ? "w-full" : ""}
+        ${className ? className : ""}
+        `}
     >
       {children}
     </button>
diff --git a/web/src/components/modals/NoAssistantModal.tsx b/web/src/components/modals/NoAssistantModal.tsx
new file mode 100644
index 0000000000..0eed887662
--- /dev/null
+++ b/web/src/components/modals/NoAssistantModal.tsx
@@ -0,0 +1,37 @@
+import { ModalWrapper } from "@/components/modals/ModalWrapper";
+
+export const NoAssistantModal = ({ isAdmin }: { isAdmin: boolean }) => {
+  return (
+    <ModalWrapper modalClassName="bg-white max-w-2xl rounded-lg shadow-xl text-center">
+      <>
+        <h2 className="text-3xl font-bold text-gray-800 mb-4">
+          No Assistant Available
+        </h2>
+        <p className="text-gray-600 mb-6">
+          You currently have no assistant configured. To use this feature, you
+          need to take action.
+        </p>
+        {isAdmin ? (
+          <>
+            <p className="text-gray-600 mb-6">
+              As an administrator, you can create a new assistant by visiting
+              the admin panel.
+            </p>
+            <button
+              onClick={() => {
+                window.location.href = "/admin/assistants";
+              }}
+              className="inline-flex flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-background-800 text-center focus:outline-none focus:ring-2 focus:ring-offset-2 "
+            >
+              Go to Admin Panel
+            </button>
+          </>
+        ) : (
+          <p className="text-gray-600 mb-2">
+            Please contact your administrator to configure an assistant for you.
+          </p>
+        )}
+      </>
+    </ModalWrapper>
+  );
+};