Improved api key forms + fix non-submittable azure (#2654)

onyx-dot-app · Oct 5, 2024 · b04e9e9 · b04e9e9
1 parent 3755e57
commit b04e9e9
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 62 deletions.
diff --git a/web/src/app/admin/configuration/llm/CustomLLMProviderUpdateForm.tsx b/web/src/app/admin/configuration/llm/CustomLLMProviderUpdateForm.tsx
@@ -16,16 +16,11 @@ import {
   SubLabel,
   TextArrayField,
   TextFormField,
-  BooleanFormField,
 } from "@/components/admin/connectors/Field";
 import { useState } from "react";
-import { Bubble } from "@/components/Bubble";
-import { GroupsIcon } from "@/components/icons/icons";
 import { useSWRConfig } from "swr";
-import { useUserGroups } from "@/lib/hooks";
 import { FullLLMProvider } from "./interfaces";
 import { PopupSpec } from "@/components/admin/connectors/Popup";
-import { usePaidEnterpriseFeaturesEnabled } from "@/components/settings/usePaidEnterpriseFeaturesEnabled";
 import * as Yup from "yup";
 import isEqual from "lodash/isEqual";
 import { IsPublicGroupSelector } from "@/components/IsPublicGroupSelector";

diff --git a/web/src/app/admin/configuration/llm/LLMProviderUpdateForm.tsx b/web/src/app/admin/configuration/llm/LLMProviderUpdateForm.tsx
@@ -7,21 +7,13 @@ import { LLM_PROVIDERS_ADMIN_URL } from "./constants";
 import {
   SelectorFormField,
   TextFormField,
-  BooleanFormField,
   MultiSelectField,
 } from "@/components/admin/connectors/Field";
 import { useState } from "react";
-import { Bubble } from "@/components/Bubble";
-import { GroupsIcon } from "@/components/icons/icons";
 import { useSWRConfig } from "swr";
-import {
-  defaultModelsByProvider,
-  getDisplayNameForModel,
-  useUserGroups,
-} from "@/lib/hooks";
+import { defaultModelsByProvider, getDisplayNameForModel } from "@/lib/hooks";
 import { FullLLMProvider, WellKnownLLMProviderDescriptor } from "./interfaces";
 import { PopupSpec } from "@/components/admin/connectors/Popup";
-import { usePaidEnterpriseFeaturesEnabled } from "@/components/settings/usePaidEnterpriseFeaturesEnabled";
 import * as Yup from "yup";
 import isEqual from "lodash/isEqual";
 import { IsPublicGroupSelector } from "@/components/IsPublicGroupSelector";
@@ -43,11 +35,6 @@ export function LLMProviderUpdateForm({
 }) {
   const { mutate } = useSWRConfig();
 
-  const isPaidEnterpriseFeaturesEnabled = usePaidEnterpriseFeaturesEnabled();
-
-  // EE only
-  const { data: userGroups, isLoading: userGroupsIsLoading } = useUserGroups();
-
   const [isTesting, setIsTesting] = useState(false);
   const [testError, setTestError] = useState<string>("");
 
@@ -278,7 +265,7 @@ export function LLMProviderUpdateForm({
             </div>
           ))}
 
-          {!hideAdvanced && (
+          {!(hideAdvanced && llmProviderDescriptor.name != "azure") && (
             <>
               <Divider />
 

diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
@@ -1767,7 +1767,10 @@ export function ChatPage({
       <HealthCheckBanner />
 
       {showApiKeyModal && !shouldShowWelcomeModal && (
-        <ApiKeyModal hide={() => setShowApiKeyModal(false)} />
+        <ApiKeyModal
+          hide={() => setShowApiKeyModal(false)}
+          setPopup={setPopup}
+        />
       )}
 
       {/* ChatPopup is a custom popup that displays a admin-specified message on initial user visit. 

diff --git a/web/src/components/initialSetup/welcome/WelcomeModal.tsx b/web/src/components/initialSetup/welcome/WelcomeModal.tsx
@@ -12,6 +12,8 @@ import { checkLlmProvider } from "./lib";
 import { User } from "@/lib/types";
 import { useProviderStatus } from "@/components/chat_search/ProviderContext";
 
+import { usePopup } from "@/components/admin/connectors/Popup";
+
 function setWelcomeFlowComplete() {
   Cookies.set(COMPLETED_WELCOME_FLOW_COOKIE, "true", { expires: 365 });
 }
@@ -28,6 +30,7 @@ export function _WelcomeModal({ user }: { user: User | null }) {
   const [providerOptions, setProviderOptions] = useState<
     WellKnownLLMProviderDescriptor[]
   >([]);
+  const { popup, setPopup } = usePopup();
 
   const { refreshProviderInfo } = useProviderStatus();
   const clientSetWelcomeFlowComplete = async () => {
@@ -48,34 +51,37 @@ export function _WelcomeModal({ user }: { user: User | null }) {
   }, []);
 
   return (
-    <Modal title={"Welcome to Danswer!"} width="w-full max-w-3xl">
-      <div>
-        <Text className="mb-4">
-          Danswer brings all your company&apos;s knowledge to your fingertips,
-          ready to be accessed instantly.
-        </Text>
-        <Text className="mb-4">
-          To get started, we need to set up an API key for the Language Model
-          (LLM) provider. This key allows Danswer to interact with the AI model,
-          enabling intelligent responses to your queries.
-        </Text>
+    <>
+      {popup}
+      <Modal title={"Welcome to Danswer!"} width="w-full max-w-3xl">
+        <div>
+          <Text className="mb-4">
+            Danswer brings all your company&apos;s knowledge to your fingertips,
+            ready to be accessed instantly.
+          </Text>
+          <Text className="mb-4">
+            To get started, we need to set up an API key for the Language Model
+            (LLM) provider. This key allows Danswer to interact with the AI
+            model, enabling intelligent responses to your queries.
+          </Text>
 
-        <div className="max-h-[900px] overflow-y-scroll">
-          <ApiKeyForm
-            hidePopup
-            onSuccess={() => {
-              router.refresh();
-              refreshProviderInfo();
-              setCanBegin(true);
-            }}
-            providerOptions={providerOptions}
-          />
+          <div className="max-h-[900px] overflow-y-scroll">
+            <ApiKeyForm
+              setPopup={setPopup}
+              onSuccess={() => {
+                router.refresh();
+                refreshProviderInfo();
+                setCanBegin(true);
+              }}
+              providerOptions={providerOptions}
+            />
+          </div>
+          <Divider />
+          <Button disabled={!canBegin} onClick={clientSetWelcomeFlowComplete}>
+            Get Started
+          </Button>
         </div>
-        <Divider />
-        <Button disabled={!canBegin} onClick={clientSetWelcomeFlowComplete}>
-          Get Started
-        </Button>
-      </div>
-    </Modal>
+      </Modal>
+    </>
   );
 }
diff --git a/web/src/components/llm/ApiKeyForm.tsx b/web/src/components/llm/ApiKeyForm.tsx
@@ -1,4 +1,4 @@
-import { Popup } from "../admin/connectors/Popup";
+import { PopupSpec } from "../admin/connectors/Popup";
 import { useState } from "react";
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@tremor/react";
 import { WellKnownLLMProviderDescriptor } from "@/app/admin/configuration/llm/interfaces";
@@ -8,17 +8,12 @@ import { CustomLLMProviderUpdateForm } from "@/app/admin/configuration/llm/Custo
 export const ApiKeyForm = ({
   onSuccess,
   providerOptions,
-  hidePopup,
+  setPopup,
 }: {
   onSuccess: () => void;
   providerOptions: WellKnownLLMProviderDescriptor[];
-  hidePopup?: boolean;
+  setPopup: (popup: PopupSpec) => void;
 }) => {
-  const [popup, setPopup] = useState<{
-    message: string;
-    type: "success" | "error";
-  } | null>(null);
-
   const defaultProvider = providerOptions[0]?.name;
   const providerNameToIndexMap = new Map<string, number>();
   providerOptions.forEach((provider, index) => {
@@ -35,10 +30,6 @@ export const ApiKeyForm = ({
 
   return (
     <div>
-      {!hidePopup && popup && (
-        <Popup message={popup.message} type={popup.type} />
-      )}
-
       <TabGroup
         index={providerNameToIndexMap.get(providerName) || 0}
         onIndexChange={(index) =>

diff --git a/web/src/components/llm/ApiKeyModal.tsx b/web/src/components/llm/ApiKeyModal.tsx
@@ -4,8 +4,15 @@ import { ApiKeyForm } from "./ApiKeyForm";
 import { Modal } from "../Modal";
 import { useRouter } from "next/navigation";
 import { useProviderStatus } from "../chat_search/ProviderContext";
+import { PopupSpec } from "../admin/connectors/Popup";
 
-export const ApiKeyModal = ({ hide }: { hide: () => void }) => {
+export const ApiKeyModal = ({
+  hide,
+  setPopup,
+}: {
+  hide: () => void;
+  setPopup: (popup: PopupSpec) => void;
+}) => {
   const router = useRouter();
 
   const {
@@ -39,6 +46,7 @@ export const ApiKeyModal = ({ hide }: { hide: () => void }) => {
           </div>
 
           <ApiKeyForm
+            setPopup={setPopup}
             onSuccess={() => {
               router.refresh();
               refreshProviderInfo();

diff --git a/web/src/components/search/SearchSection.tsx b/web/src/components/search/SearchSection.tsx
@@ -597,7 +597,10 @@ export const SearchSection = ({
         {!shouldDisplayNoSources &&
           showApiKeyModal &&
           !shouldShowWelcomeModal && (
-            <ApiKeyModal hide={() => setShowApiKeyModal(false)} />
+            <ApiKeyModal
+              setPopup={setPopup}
+              hide={() => setShowApiKeyModal(false)}
+            />
           )}
 
         {deletingChatSession && (