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

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";

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 {
+import { defaultModelsByProvider, getDisplayNameForModel } from "@/lib/hooks";
-  defaultModelsByProvider,
-  getDisplayNameForModel,
-  useUserGroups,
-} 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 />
 

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. 

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,6 +51,8 @@ export function _WelcomeModal({ user }: { user: User | null }) {
   }, []);
 
   return (
+    <>
+      {popup}
       <Modal title={"Welcome to Danswer!"} width="w-full max-w-3xl">
         <div>
           <Text className="mb-4">
@@ -56,13 +61,13 @@ export function _WelcomeModal({ user }: { user: User | null }) {
           </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,
+            (LLM) provider. This key allows Danswer to interact with the AI
-          enabling intelligent responses to your queries.
+            model, enabling intelligent responses to your queries.
           </Text>
 
           <div className="max-h-[900px] overflow-y-scroll">
             <ApiKeyForm
-            hidePopup
+              setPopup={setPopup}
               onSuccess={() => {
                 router.refresh();
                 refreshProviderInfo();
@@ -77,5 +82,6 @@ export function _WelcomeModal({ user }: { user: User | null }) {
           </Button>
         </div>
       </Modal>
+    </>
   );
 }

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) =>

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();

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 && (