From b36cd4937fa658a541adc712e2b58add4c972cd8 Mon Sep 17 00:00:00 2001 From: pablodanswer Date: Tue, 27 Aug 2024 09:01:57 -0700 Subject: [PATCH] Cleaner + cleaner assistants creation flow etc. (#2232) * rework assistants creation flow + components * remove unnecessary padding + validate each page * remove additional spacing * rebase + form --- .../app/admin/assistants/AssistantEditor.tsx | 945 ++++++++++-------- .../admin/assistants/CollapsibleSection.tsx | 1 - web/src/app/admin/assistants/new/page.tsx | 1 + .../llm/CustomLLMProviderUpdateForm.tsx | 4 +- .../llm/LLMProviderUpdateForm.tsx | 6 +- .../app/admin/connector/[ccPairId]/page.tsx | 2 +- .../[connector]/AddConnectorPage.tsx | 294 ++++-- .../admin/connectors/[connector]/Sidebar.tsx | 2 +- .../connectors/[connector]/pages/Advanced.tsx | 140 +-- .../pages/ConnectorInput/FileInput.tsx | 37 + .../pages/ConnectorInput/ListInput.tsx | 74 ++ .../pages/ConnectorInput/NumberInput.tsx | 42 + .../pages/ConnectorInput/SelectInput.tsx | 45 + .../connectors/[connector]/pages/Create.tsx | 440 -------- .../pages/DynamicConnectorCreationForm.tsx | 115 +++ .../pages/formelements/NumberInput.tsx | 42 + .../[connector]/pages/utils/files.ts | 4 +- .../[connector]/pages/utils/google_site.ts | 4 +- .../sets/DocumentSetCreationForm.tsx | 240 ++--- .../EmbeddingModelSelectionForm.tsx | 6 +- .../admin/embeddings/RerankingFormPage.tsx | 15 +- .../pages/AdvancedEmbeddingFormPage.tsx | 95 +- .../embeddings/pages/EmbeddingFormPage.tsx | 1 - .../prompt-library/modals/AddPromptModal.tsx | 36 +- .../StandardAnswerCreationForm.tsx | 12 +- .../CreateRateLimitModal.tsx | 19 +- web/src/app/admin/users/page.tsx | 1 + .../assistants/gallery/AssistantsGallery.tsx | 5 +- .../app/assistants/mine/AssistantsList.tsx | 159 ++- web/src/app/chat/ChatBanner.tsx | 2 +- web/src/app/chat/ChatPage.tsx | 11 +- .../documentSidebar/ChatDocumentDisplay.tsx | 2 +- .../chat/documentSidebar/DocumentSidebar.tsx | 2 +- web/src/app/chat/input/ChatInputBar.tsx | 14 +- web/src/app/chat/input/ChatInputOption.tsx | 10 +- web/src/app/chat/message/CodeBlock.tsx | 4 +- web/src/app/chat/message/Messages.tsx | 18 +- .../app/chat/modal/configuration/LlmTab.tsx | 89 +- .../shared/[chatId]/SharedChatDisplay.tsx | 2 +- .../ee/admin/api-key/DanswerApiKeyForm.tsx | 21 +- .../admin/groups/[groupId]/GroupDisplay.tsx | 2 +- .../admin/whitelabeling/WhitelabelingForm.tsx | 186 ++-- web/src/app/globals.css | 7 + web/src/components/AdvancedOptionsToggle.tsx | 22 +- web/src/components/Hoverable.tsx | 2 +- .../admin/connectors/AdminSidebar.tsx | 2 +- web/src/components/admin/connectors/Field.tsx | 96 +- web/src/components/admin/users/BulkAdd.tsx | 30 +- .../components/assistants/AssistantIcon.tsx | 2 +- .../assistants/AssistantIconCreation.tsx | 144 --- .../credentials/CredentialFields.tsx | 9 +- .../components/credentials/EditingValue.tsx | 221 ---- .../credentials/actions/CreateCredential.tsx | 2 +- .../credentials/actions/EditCredential.tsx | 11 +- .../credentials/actions/ModifyCredential.tsx | 2 +- .../components/embedding/EmbeddingSidebar.tsx | 2 +- web/src/components/icons/icons.tsx | 26 + web/src/components/llm/LLMList.tsx | 84 ++ .../modals/DeleteEntityModal.tsx} | 12 +- web/src/components/search/SearchAnswer.tsx | 2 +- .../components/search/filtering/Filters.tsx | 4 +- web/src/lib/assistantIconUtils.tsx | 7 +- web/src/lib/assistants/orderAssistants.ts | 1 + web/src/lib/connectors/connectors.ts | 4 +- web/tailwind-themes/tailwind.config.js | 14 +- 65 files changed, 1896 insertions(+), 1960 deletions(-) create mode 100644 web/src/app/admin/connectors/[connector]/pages/ConnectorInput/FileInput.tsx create mode 100644 web/src/app/admin/connectors/[connector]/pages/ConnectorInput/ListInput.tsx create mode 100644 web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx create mode 100644 web/src/app/admin/connectors/[connector]/pages/ConnectorInput/SelectInput.tsx delete mode 100644 web/src/app/admin/connectors/[connector]/pages/Create.tsx create mode 100644 web/src/app/admin/connectors/[connector]/pages/DynamicConnectorCreationForm.tsx create mode 100644 web/src/app/admin/connectors/[connector]/pages/formelements/NumberInput.tsx delete mode 100644 web/src/components/assistants/AssistantIconCreation.tsx delete mode 100644 web/src/components/credentials/EditingValue.tsx create mode 100644 web/src/components/llm/LLMList.tsx rename web/src/{app/chat/modal/DeleteChatModal.tsx => components/modals/DeleteEntityModal.tsx} (78%) diff --git a/web/src/app/admin/assistants/AssistantEditor.tsx b/web/src/app/admin/assistants/AssistantEditor.tsx index 8d6e81006..d478922e5 100644 --- a/web/src/app/admin/assistants/AssistantEditor.tsx +++ b/web/src/app/admin/assistants/AssistantEditor.tsx @@ -2,8 +2,8 @@ import { generateRandomIconShape, createSVG } from "@/lib/assistantIconUtils"; -import { CCPairBasicInfo, DocumentSet, User } from "@/lib/types"; -import { Button, Divider, Italic, Text } from "@tremor/react"; +import { CCPairBasicInfo, DocumentSet, User, UserRole } from "@/lib/types"; +import { Button, Divider, Italic } from "@tremor/react"; import { IsPublicGroupSelector } from "@/components/IsPublicGroupSelector"; import { ArrayHelpers, @@ -31,6 +31,7 @@ import { useUserGroups } from "@/lib/hooks"; import { checkLLMSupportsImageInput, destructureValue } from "@/lib/llm/utils"; import { ToolSnapshot } from "@/lib/tools/interfaces"; import { checkUserIsNoAuthUser } from "@/lib/user"; + import { Tooltip, TooltipContent, @@ -47,7 +48,16 @@ import CollapsibleSection from "./CollapsibleSection"; import { SuccessfulPersonaUpdateRedirectType } from "./enums"; import { Persona, StarterMessage } from "./interfaces"; import { buildFinalPrompt, createPersona, updatePersona } from "./lib"; -import { IconImageSelection } from "@/components/assistants/AssistantIconCreation"; +import { Popover } from "@/components/popover/Popover"; +import { + CameraIcon, + NewChatIcon, + SwapIcon, + TrashIcon, +} from "@/components/icons/icons"; +import { AdvancedOptionsToggle } from "@/components/AdvancedOptionsToggle"; +import { buildImgUrl } from "@/app/chat/files/images/utils"; +import { LlmList } from "@/components/llm/LLMList"; function findSearchTool(tools: ToolSnapshot[]) { return tools.find((tool) => tool.in_code_tool_id === "SearchTool"); @@ -62,7 +72,11 @@ function findInternetSearchTool(tools: ToolSnapshot[]) { } function SubLabel({ children }: { children: string | JSX.Element }) { - return
{children}
; + return ( +
+ {children} +
+ ); } export function AssistantEditor({ @@ -75,6 +89,7 @@ export function AssistantEditor({ llmProviders, tools, shouldAddAssistantToUserPreferences, + admin, }: { existingPersona?: Persona | null; ccPairs: CCPairBasicInfo[]; @@ -85,6 +100,7 @@ export function AssistantEditor({ llmProviders: FullLLMProvider[]; tools: ToolSnapshot[]; shouldAddAssistantToUserPreferences?: boolean; + admin?: boolean; }) { const router = useRouter(); const { popup, setPopup } = usePopup(); @@ -99,13 +115,22 @@ export function AssistantEditor({ "#6FFFFF", ]; + const [showAdvancedOptions, setShowAdvancedOptions] = useState(false); + // state to persist across formik reformatting const [defautIconColor, _setDeafultIconColor] = useState( colorOptions[Math.floor(Math.random() * colorOptions.length)] ); - const [defaultIconShape, _setDeafultIconShape] = useState( - generateRandomIconShape().encodedGrid - ); + + const [defaultIconShape, setDefaultIconShape] = useState(null); + + useEffect(() => { + if (defaultIconShape === null) { + setDefaultIconShape(generateRandomIconShape().encodedGrid); + } + }, []); + + const [isIconDropdownOpen, setIsIconDropdownOpen] = useState(false); const isPaidEnterpriseFeaturesEnabled = usePaidEnterpriseFeaturesEnabled(); @@ -219,20 +244,10 @@ export function AssistantEditor({ icon_shape: existingPersona?.icon_shape ?? defaultIconShape, uploaded_image: null, - // search_tool_enabled: existingPersona - // ? personaCurrentToolIds.includes(searchTool!.id) - // : ccPairs.length > 0, - // image_generation_tool_enabled: imageGenerationTool - // ? personaCurrentToolIds.includes(imageGenerationTool.id) - // : false, // EE Only groups: existingPersona?.groups ?? [], }; - const [existingPersonaImageId, setExistingPersonaImageId] = useState< - string | null - >(existingPersona?.uploaded_image_id || null); - const [isRequestSuccessful, setIsRequestSuccessful] = useState(false); return ( @@ -260,9 +275,15 @@ export function AssistantEditor({ llm_model_provider_override: Yup.string().nullable(), starter_messages: Yup.array().of( Yup.object().shape({ - name: Yup.string().required(), - description: Yup.string().required(), - message: Yup.string().required(), + name: Yup.string().required( + "Each starter message must have a name" + ), + description: Yup.string().required( + "Each starter message must have a description" + ), + message: Yup.string().required( + "Each starter message must have a message" + ), }) ), icon_color: Yup.string(), @@ -273,7 +294,7 @@ export function AssistantEditor({ }) .test( "system-prompt-or-task-prompt", - "Must provide either System Prompt or Additional Instructions", + "Must provide either Instructions or Reminders (Advanced)", function (values) { const systemPromptSpecified = values.system_prompt && values.system_prompt.trim().length > 0; @@ -287,7 +308,7 @@ export function AssistantEditor({ return this.createError({ path: "system_prompt", message: - "Must provide either System Prompt or Additional Instructions", + "Must provide either Instructions or Reminders (Advanced)", }); } )} @@ -442,122 +463,212 @@ export function AssistantEditor({ } return ( -
-
- +
+ setIsIconDropdownOpen(!isIconDropdownOpen)} + > + {values.uploaded_image ? ( + Uploaded assistant icon + ) : existingPersona?.uploaded_image_id && + !removePersonaImage ? ( + Uploaded assistant icon + ) : ( + createSVG( + { + encodedGrid: values.icon_shape, + filledSquares: 0, + }, + values.icon_color, + undefined, + true + ) + )} +
+ } + popover={ +
+ + + {values.uploaded_image && ( + + )} + + {!values.uploaded_image && + (!existingPersona?.uploaded_image_id || + removePersonaImage) && ( + + )} + + {existingPersona?.uploaded_image_id && + removePersonaImage && + !values.uploaded_image && ( + + )} + + {existingPersona?.uploaded_image_id && + !removePersonaImage && + !values.uploaded_image && ( + + )} +
+ } + align="start" + side="bottom" /> -
-
-
- Assistant Icon{" "} -
- - - - - - -

- Choose an icon to visually represent your Assistant - (optional) -

- - - + + + + + + +

+ This icon will visually represent your Assistant +

+ + + +
+ + + + + + { + setFieldValue("system_prompt", e.target.value); + triggerFinalPromptUpdate( + e.target.value, + values.task_prompt, + searchToolEnabled() + ); + }} + error={finalPromptError} + /> + +
+
+
+ Default AI Model{" "}
- -
- {createSVG( - { - encodedGrid: values.icon_shape, - filledSquares: 0, - }, - values.icon_color - )} - -
- -
-
- - + + + + + + +

+ Select a Large Language Model (Generative AI model) to + power this Assistant +

+ + +
- - - - { - setFieldValue("system_prompt", e.target.value); - triggerFinalPromptUpdate( - e.target.value, - values.task_prompt, - searchToolEnabled() - ); - }} - error={finalPromptError} - /> - -
-
-
- LLM Override{" "} -
- - - - - - -

- Select a Large Language Model (Generative AI model) - to power this Assistant -

- - - -
-

- Your assistant will use the user's set default unless - otherwise specified below. - {user?.preferences.default_model && - ` Your current (user-specific) default model is ${getDisplayNameForModel(destructureValue(user?.preferences?.default_model!).modelName)}`} -

+

+ Your assistant will use the user's set default unless + otherwise specified below. + {admin && + user?.preferences.default_model && + ` Your current (user-specific) default model is ${getDisplayNameForModel(destructureValue(user?.preferences?.default_model!).modelName)}`} +

+ {admin ? (
)}
+ ) : ( +
+ { + if (value !== null) { + const { modelName, provider, name } = + destructureValue(value); + setFieldValue( + "llm_model_version_override", + modelName + ); + setFieldValue("llm_model_provider_override", name); + } else { + setFieldValue("llm_model_version_override", null); + setFieldValue("llm_model_provider_override", null); + } + }} + /> +
+ )} +
+
+
+
+ Capabilities{" "} +
+ + + + + + +

+ You can give your assistant advanced capabilities like + image generation +

+ + + +
+ Advanced +
-
-
-
- Capabilities{" "} -
+ +
+ {imageGenerationTool && ( - - - - -

- You can give your assistant advanced capabilities - like image generation -

- - - -
- Advanced -
-
- -
- {imageGenerationTool && ( - - - -
+
+ { + toggleToolInValues(imageGenerationTool.id); + }} + disabled={ !checkLLMSupportsImageInput( providerDisplayNameToProviderName.get( values.llm_model_provider_override || "" ) || "", values.llm_model_version_override || "" ) - ? "opacity-50 cursor-not-allowed" - : "" - }`} - > - { - toggleToolInValues(imageGenerationTool.id); - }} - disabled={ - !checkLLMSupportsImageInput( - providerDisplayNameToProviderName.get( - values.llm_model_provider_override || "" - ) || "", - values.llm_model_version_override || "" - ) - } - /> -
- - {!checkLLMSupportsImageInput( - providerDisplayNameToProviderName.get( - values.llm_model_provider_override || "" - ) || "", - values.llm_model_version_override || "" - ) && ( - -

- To use Image Generation, select GPT-4o as the - default model for this Assistant. -

- - )} - - - )} + } + /> +
+ + {!checkLLMSupportsImageInput( + providerDisplayNameToProviderName.get( + values.llm_model_provider_override || "" + ) || "", + values.llm_model_version_override || "" + ) && ( + +

+ To use Image Generation, select GPT-4o or another + image compatible model as the default model for + this Assistant. +

+ + )} + + + )} - {searchTool && ( - - - -
- { - setFieldValue("num_chunks", null); - toggleToolInValues(searchTool.id); - }} - disabled={ccPairs.length === 0} - /> -
- - {ccPairs.length === 0 && ( - -

- To use the Search Tool, you need to have at - least one Connector-Credential pair configured. -

- - )} - - - )} + {searchTool && ( + + + +
+ { + setFieldValue("num_chunks", null); + toggleToolInValues(searchTool.id); + }} + disabled={ccPairs.length === 0} + /> +
+ + {ccPairs.length === 0 && ( + +

+ To use the Search Tool, you need to have at least + one Connector-Credential pair configured. +

+ + )} + + + )} - {ccPairs.length > 0 && searchTool && ( - <> - {searchToolEnabled() && ( - -
- {ccPairs.length > 0 && ( - <> - -
- - <> - Select which{" "} - {!user || user.role === "admin" ? ( - - Document Sets - - ) : ( - "Document Sets" - )}{" "} - that this Assistant should search - through. If none are specified, the - Assistant will search through all - available documents in order to try and - respond to queries. - - -
+ {ccPairs.length > 0 && searchTool && ( + <> + {searchToolEnabled() && ( + +
+ {ccPairs.length > 0 && ( + <> + +
+ + <> + Select which{" "} + {!user || user.role === "admin" ? ( + + Document Sets + + ) : ( + "Document Sets" + )}{" "} + this Assistant should search through. If + none are specified, the Assistant will + search through all available documents in + order to try and respond to queries. + + +
- {documentSets.length > 0 ? ( - ( -
-
- {documentSets.map((documentSet) => { - const ind = - values.document_set_ids.indexOf( - documentSet.id - ); - let isSelected = ind !== -1; - return ( - { - if (isSelected) { - arrayHelpers.remove(ind); - } else { - arrayHelpers.push( - documentSet.id - ); - } - }} - /> + {documentSets.length > 0 ? ( + ( +
+
+ {documentSets.map((documentSet) => { + const ind = + values.document_set_ids.indexOf( + documentSet.id ); - })} -
+ let isSelected = ind !== -1; + return ( + { + if (isSelected) { + arrayHelpers.remove(ind); + } else { + arrayHelpers.push( + documentSet.id + ); + } + }} + /> + ); + })}
- )} - /> - ) : ( - - No Document Sets available.{" "} - {user?.role !== "admin" && ( - <> - If this functionality would be useful, - reach out to the administrators of - Danswer for assistance. - - )} - - )} +
+ )} + /> + ) : ( + + No Document Sets available.{" "} + {user?.role !== "admin" && ( + <> + If this functionality would be useful, + reach out to the administrators of + Danswer for assistance. + + )} + + )} -
- { - const value = e.target.value; - if ( - value === "" || - /^[0-9]+$/.test(value) - ) { - setFieldValue("num_chunks", value); - } - }} - /> - - + { + const value = e.target.value; + if ( + value === "" || + /^[0-9]+$/.test(value) + ) { + setFieldValue("num_chunks", value); } - /> + }} + /> - + + -
- - )} -
- - )} - - )} + /> +
+ + )} +
+ + )} + + )} - {internetSearchTool && ( - { - toggleToolInValues(internetSearchTool.id); - }} - /> - )} + {internetSearchTool && ( + { + toggleToolInValues(internetSearchTool.id); + }} + /> + )} - {customTools.length > 0 && ( - <> - {customTools.map((tool) => ( - { - toggleToolInValues(tool.id); - }} - /> - ))} - - )} -
+ {customTools.length > 0 && ( + <> + {customTools.map((tool) => ( + { + toggleToolInValues(tool.id); + }} + /> + ))} + + )} +
+
+ + + {showAdvancedOptions && ( + <> {llmProviders.length > 0 && ( <> - - { @@ -886,10 +1032,11 @@ export function AssistantEditor({ /> )} -
+ +
- Add Starter Messages (Optional){" "} + Starter Messages (Optional){" "}
Add New @@ -1051,19 +1198,19 @@ export function AssistantEditor({ enforceGroupSelection={false} /> )} + + )} -
- -
-
+
+
); diff --git a/web/src/app/admin/assistants/CollapsibleSection.tsx b/web/src/app/admin/assistants/CollapsibleSection.tsx index d442efea8..139f93d26 100644 --- a/web/src/app/admin/assistants/CollapsibleSection.tsx +++ b/web/src/app/admin/assistants/CollapsibleSection.tsx @@ -40,7 +40,6 @@ const CollapsibleSection: React.FC = ({ onClick={toggleCollapse} > {" "} - Great and also a {isCollapsed ? ( diff --git a/web/src/app/admin/assistants/new/page.tsx b/web/src/app/admin/assistants/new/page.tsx index ee6b28328..c77005632 100644 --- a/web/src/app/admin/assistants/new/page.tsx +++ b/web/src/app/admin/assistants/new/page.tsx @@ -20,6 +20,7 @@ export default async function Page() { diff --git a/web/src/app/admin/configuration/llm/CustomLLMProviderUpdateForm.tsx b/web/src/app/admin/configuration/llm/CustomLLMProviderUpdateForm.tsx index 4b39d8dd3..80ff1f456 100644 --- a/web/src/app/admin/configuration/llm/CustomLLMProviderUpdateForm.tsx +++ b/web/src/app/admin/configuration/llm/CustomLLMProviderUpdateForm.tsx @@ -219,8 +219,6 @@ export function CustomLLMProviderUpdateForm({ placeholder="Display Name" /> - - {({ values, setFieldValue }) => ( -
+ - - {llmProviderDescriptor.api_key_required && (
-
+
diff --git a/web/src/app/admin/connectors/[connector]/AddConnectorPage.tsx b/web/src/app/admin/connectors/[connector]/AddConnectorPage.tsx index 0afc30f47..0d99eda08 100644 --- a/web/src/app/admin/connectors/[connector]/AddConnectorPage.tsx +++ b/web/src/app/admin/connectors/[connector]/AddConnectorPage.tsx @@ -1,11 +1,12 @@ "use client"; +import * as Yup from "yup"; import { TrashIcon } from "@/components/icons/icons"; import { errorHandlingFetcher } from "@/lib/fetcher"; import useSWR, { mutate } from "swr"; import { HealthCheckBanner } from "@/components/health/healthcheck"; -import { Card, Title } from "@tremor/react"; +import { Card, Divider, Title } from "@tremor/react"; import { AdminPageTitle } from "@/components/admin/Title"; import { buildSimilarCredentialInfoURL } from "@/app/admin/connector/[ccPairId]/lib"; import { usePopup } from "@/components/admin/connectors/Popup"; @@ -18,7 +19,7 @@ import { deleteCredential, linkCredential } from "@/lib/credential"; import { submitFiles } from "./pages/utils/files"; import { submitGoogleSite } from "./pages/utils/google_site"; import AdvancedFormPage from "./pages/Advanced"; -import DynamicConnectionForm from "./pages/Create"; +import DynamicConnectionForm from "./pages/DynamicConnectorCreationForm"; import CreateCredential from "@/components/credentials/actions/CreateCredential"; import ModifyCredential from "@/components/credentials/actions/ModifyCredential"; import { ValidSources } from "@/lib/types"; @@ -37,10 +38,15 @@ import { useGmailCredentials, useGoogleDriveCredentials, } from "./pages/utils/hooks"; -import { FormikProps } from "formik"; -import { useUser } from "@/components/user/UserProvider"; +import { Formik, FormikProps } from "formik"; +import { + IsPublicGroupSelector, + IsPublicGroupSelectorFormType, +} from "@/components/IsPublicGroupSelector"; +import { usePaidEnterpriseFeaturesEnabled } from "@/components/settings/usePaidEnterpriseFeaturesEnabled"; +import { AdminBooleanFormField } from "@/components/credentials/CredentialFields"; -export type AdvancedConfig = { +export type AdvancedConfigFinal = { pruneFreq: number | null; refreshFreq: number | null; indexingStart: Date | null; @@ -51,7 +57,6 @@ export default function AddConnector({ }: { connector: ValidSources; }) { - const [name, setName] = useState(""); const [currentCredential, setCurrentCredential] = useState | null>(null); @@ -60,6 +65,7 @@ export default function AddConnector({ errorHandlingFetcher, { refreshInterval: 5000 } ); + const { data: editableCredentials } = useSWR[]>( buildSimilarCredentialInfoURL(connector, true), errorHandlingFetcher, @@ -69,50 +75,54 @@ export default function AddConnector({ const credentialTemplate = credentialTemplates[connector]; - const { setFormStep, setAlowCreate, formStep, nextFormStep, prevFormStep } = - useFormContext(); + const { + setFormStep, + setAllowAdvanced, + setAlowCreate, + formStep, + nextFormStep, + prevFormStep, + } = useFormContext(); const { popup, setPopup } = usePopup(); const configuration: ConnectionConfiguration = connectorConfigs[connector]; + const [formValues, setFormValues] = useState< + Record & IsPublicGroupSelectorFormType + >({ + name: "", + groups: [], + is_public: false, + ...configuration.values.reduce( + (acc, field) => { + if (field.type === "list") { + acc[field.name] = field.default || []; + } else if (field.type === "checkbox") { + acc[field.name] = field.default || false; + } else if (field.default !== undefined) { + acc[field.name] = field.default; + } + return acc; + }, + {} as { [record: string]: any } + ), + }); - const initialValues = configuration.values.reduce( - (acc, field) => { - if (field.type === "list") { - acc[field.name] = field.default || []; - } else if (field.default !== undefined) { - acc[field.name] = field.default; - } - return acc; - }, - {} as { [record: string]: any } - ); - - const [values, setValues] = useState<{ [record: string]: any } | null>( - Object.keys(initialValues).length > 0 ? initialValues : null - ); + const isPaidEnterpriseFeaturesEnabled = usePaidEnterpriseFeaturesEnabled(); // Default to 10 minutes unless otherwise specified - const defaultRefresh = configuration.overrideDefaultFreq || 10; - // Default is 30 days - const defaultPrune = 30; + const defaultAdvancedSettings = { + refreshFreq: formValues.overrideDefaultFreq || 10, + pruneFreq: 30, + indexingStart: null as string | null, + }; - const [refreshFreq, setRefreshFreq] = useState(defaultRefresh || 0); - const [pruneFreq, setPruneFreq] = useState(defaultPrune); - const [indexingStart, setIndexingStart] = useState(null); - const { isAdmin, isLoadingUser } = useUser(); + const [advancedSettings, setAdvancedSettings] = useState( + defaultAdvancedSettings + ); - const [isPublic, setIsPublic] = useState(isAdmin); - useEffect(() => { - if (!isLoadingUser) { - setIsPublic(isAdmin); - } - }, [isLoadingUser, isAdmin]); - - const [groups, setGroups] = useState([]); const [createConnectorToggle, setCreateConnectorToggle] = useState(false); const formRef = useRef>(null); - const [advancedFormPageState, setAdvancedFormPageState] = useState(true); const [isFormValid, setIsFormValid] = useState(false); @@ -130,6 +140,7 @@ export default function AddConnector({ currentCredential; const noCredentials = credentialTemplate == null; + if (noCredentials && 1 != formStep) { setFormStep(Math.max(1, formStep)); } @@ -138,39 +149,35 @@ export default function AddConnector({ setFormStep(Math.min(formStep, 0)); } - if (isLoadingUser) { - return <>; - } + const resetAdvancedConfigs = (formikProps: FormikProps) => { + formikProps.resetForm({ values: defaultAdvancedSettings }); + setAdvancedSettings(defaultAdvancedSettings); + }; - const resetAdvancedConfigs = () => { - const resetRefreshFreq = defaultRefresh || 0; - const resetPruneFreq = defaultPrune; - const resetIndexingStart = null; - - setRefreshFreq(resetRefreshFreq); - setPruneFreq(resetPruneFreq); - setIndexingStart(resetIndexingStart); - setAdvancedFormPageState((advancedFormPageState) => !advancedFormPageState); - // Update the form values - if (formRef.current) { - formRef.current.setFieldValue("refreshFreq", resetRefreshFreq); - formRef.current.setFieldValue("pruneFreq", resetPruneFreq); - formRef.current.setFieldValue("indexingStart", resetIndexingStart); - } + const convertStringToDateTime = (indexingStart: string | null) => { + return indexingStart ? new Date(indexingStart) : null; }; const createConnector = async () => { - const AdvancedConfig: AdvancedConfig = { - pruneFreq: pruneFreq * 60 * 60 * 24, - indexingStart, - refreshFreq: refreshFreq * 60, + const { + name, + groups, + is_public: isPublic, + ...connector_specific_config + } = formValues; + const { pruneFreq, indexingStart, refreshFreq } = advancedSettings; + + const AdvancedConfig: AdvancedConfigFinal = { + pruneFreq: advancedSettings.pruneFreq * 60 * 60 * 24, + indexingStart: convertStringToDateTime(indexingStart), + refreshFreq: advancedSettings.refreshFreq * 60, }; // google sites-specific handling if (connector == "google_site") { const response = await submitGoogleSite( selectedFiles, - values?.base_url, + formValues?.base_url, setPopup, AdvancedConfig, name @@ -204,13 +211,13 @@ export default function AddConnector({ const { message, isSuccess, response } = await submitConnector( { - connector_specific_config: values, + connector_specific_config: connector_specific_config, input_type: connector == "web" ? "load_state" : "poll", // single case name: name, source: connector, refresh_freq: refreshFreq * 60 || null, prune_freq: pruneFreq * 60 * 60 * 24 || null, - indexing_start: indexingStart, + indexing_start: convertStringToDateTime(indexingStart), is_public: isPublic, groups: groups, }, @@ -218,7 +225,6 @@ export default function AddConnector({ credentialActivated ? false : true, isPublic ); - // If no credential if (!credentialActivated) { if (isSuccess) { @@ -305,17 +311,41 @@ export default function AddConnector({ refresh(); }; - const updateValues = (field: string, value: any) => { - if (field == "name") { - return; - } - setValues((values) => { - if (!values) { - return { [field]: value }; - } else { - return { ...values, [field]: value }; - } - }); + const validationSchema = Yup.object().shape({ + name: Yup.string().required("Connector Name is required"), + ...configuration.values.reduce( + (acc, field) => { + let schema: any = + field.type === "list" + ? Yup.array().of(Yup.string()) + : field.type === "checkbox" + ? Yup.boolean() + : Yup.string(); + + if (!field.optional) { + schema = schema.required(`${field.label} is required`); + } + acc[field.name] = schema; + return acc; + }, + {} as Record + ), + }); + + const advancedValidationSchema = Yup.object().shape({ + indexingStart: Yup.string().nullable(), + pruneFreq: Yup.number().min(0, "Prune frequency must be non-negative"), + refreshFreq: Yup.number().min(0, "Refresh frequency must be non-negative"), + }); + + const isFormSubmittable = (values: any) => { + return ( + values.name.trim() !== "" && + Object.keys(values).every((key) => { + const field = configuration.values.find((f) => f.name === key); + return field?.optional || values[key] !== ""; + }) + ); }; return ( @@ -429,20 +459,60 @@ export default function AddConnector({ {formStep == 1 && ( <> - + { + // Can be utilized for logging purposes + }} + > + {(formikProps) => { + setFormValues(formikProps.values); + console.log(formikProps.values); + handleFormStatusChange( + formikProps.isValid && isFormSubmittable(formikProps.values) + ); + setAllowAdvanced( + formikProps.isValid && isFormSubmittable(formikProps.values) + ); + + return ( +
+ + {isPaidEnterpriseFeaturesEnabled && ( + <> + + {formikProps.values.groups.length > 0 ? ( + + ) : ( + { + const value = e.target.checked; + formikProps.setFieldValue("is_public", value); + if (value) { + formikProps.setFieldValue("groups", []); + } + }} + label={"Documents are Public?"} + name={"is_public"} + /> + )} + + )} +
+ ); + }} +
{!noCredentials ? ( @@ -491,26 +561,32 @@ export default function AddConnector({ {formStep === 2 && ( <> - + {}} + > + {(formikProps) => { + setAdvancedSettings(formikProps.values); -
- -
+ return ( + <> + +
+ +
+ + ); + }} +
+
+ ))} + + +
+ )} + + ); +} diff --git a/web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx b/web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx new file mode 100644 index 000000000..5a9f5041b --- /dev/null +++ b/web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx @@ -0,0 +1,42 @@ +import { SubLabel } from "@/components/admin/connectors/Field"; +import { Field } from "formik"; + +export default function NumberInput({ + label, + value, + optional, + description, + name, + showNeverIfZero, +}: { + value?: number; + label: string; + name: string; + optional?: boolean; + description?: string; + showNeverIfZero?: boolean; +}) { + return ( +
+ + {description && {description}} + + +
+ ); +} diff --git a/web/src/app/admin/connectors/[connector]/pages/ConnectorInput/SelectInput.tsx b/web/src/app/admin/connectors/[connector]/pages/ConnectorInput/SelectInput.tsx new file mode 100644 index 000000000..e01a02dc3 --- /dev/null +++ b/web/src/app/admin/connectors/[connector]/pages/ConnectorInput/SelectInput.tsx @@ -0,0 +1,45 @@ +import CredentialSubText from "@/components/credentials/CredentialFields"; +import { ListOption, SelectOption } from "@/lib/connectors/connectors"; +import { Field } from "formik"; + +export default function SelectInput({ + field, + value, + onChange, +}: { + field: SelectOption; + value: any; + onChange?: (e: Event) => void; +}) { + return ( + <> + + {field.description && ( + {field.description} + )} + + + + {field.options?.map((option: any) => ( + + ))} + + + ); +} diff --git a/web/src/app/admin/connectors/[connector]/pages/Create.tsx b/web/src/app/admin/connectors/[connector]/pages/Create.tsx deleted file mode 100644 index 8935307f0..000000000 --- a/web/src/app/admin/connectors/[connector]/pages/Create.tsx +++ /dev/null @@ -1,440 +0,0 @@ -import React, { Dispatch, SetStateAction, useEffect, useState } from "react"; -import { Formik, Form, Field, FieldArray } from "formik"; -import * as Yup from "yup"; -import { FaPlus } from "react-icons/fa"; -import { useUserGroups } from "@/lib/hooks"; -import { UserGroup, User, UserRole } from "@/lib/types"; -import { EditingValue } from "@/components/credentials/EditingValue"; -import { Divider } from "@tremor/react"; -import CredentialSubText from "@/components/credentials/CredentialFields"; -import { TrashIcon } from "@/components/icons/icons"; -import { FileUpload } from "@/components/admin/connectors/FileUpload"; -import { ConnectionConfiguration } from "@/lib/connectors/connectors"; -import { useFormContext } from "@/components/context/FormContext"; -import { usePaidEnterpriseFeaturesEnabled } from "@/components/settings/usePaidEnterpriseFeaturesEnabled"; -import { Text } from "@tremor/react"; - -import { FiUsers } from "react-icons/fi"; -import { useUser } from "@/components/user/UserProvider"; - -export interface DynamicConnectionFormProps { - config: ConnectionConfiguration; - selectedFiles: File[]; - initialName?: string; - setSelectedFiles: Dispatch>; - setIsPublic: Dispatch>; - defaultValues: any; - setName: Dispatch>; - updateValues: (field: string, value: any) => void; - isPublic: boolean; - groups: number[]; - setGroups: Dispatch>; - onFormStatusChange: (isValid: boolean) => void; // New prop -} - -const DynamicConnectionForm: React.FC = ({ - config, - setName, - updateValues, - defaultValues, - selectedFiles, - setSelectedFiles, - isPublic, - setIsPublic, - groups, - setGroups, - initialName, - onFormStatusChange, -}) => { - const isPaidEnterpriseFeaturesEnabled = usePaidEnterpriseFeaturesEnabled(); - const { setAllowAdvanced } = useFormContext(); - const { data: userGroups, isLoading: userGroupsIsLoading } = useUserGroups(); - - const { isLoadingUser, isAdmin, user } = useUser(); - - if (isLoadingUser) { - return <>; - } - - const initialValues = { - name: initialName || "", - groups: [], // Initialize groups as an empty array - ...(defaultValues || - config.values.reduce( - (acc, field, ind) => { - acc[field.name] = defaultValues - ? defaultValues[field.name] - : config.values[ind].hidden - ? config.values[ind].default - : field.type === "list" - ? [""] - : field.type === "checkbox" - ? false - : ""; - return acc; - }, - {} as Record - )), - }; - - const validationSchema = Yup.object().shape({ - name: Yup.string().required("Connector Name is required"), - ...config.values.reduce( - (acc, field) => { - let schema: any = - field.type === "list" - ? Yup.array().of(Yup.string()) - : field.type === "checkbox" - ? Yup.boolean() - : Yup.string(); - - if (!field.optional) { - schema = schema.required(`${field.label} is required`); - } - acc[field.name] = schema; - return acc; - }, - {} as Record - ), - }); - - const updateValue = - (setFieldValue: Function) => (field: string, value: any) => { - setFieldValue(field, value); - updateValues(field, value); - }; - - const isFormSubmittable = (values: any) => { - return ( - values.name.trim() !== "" && - Object.keys(values).every((key) => { - const field = config.values.find((f) => f.name === key); - return field?.optional || values[key] !== ""; - }) - ); - }; - - return ( -
-

- {config.description} -

- {config.subtext && ( - {config.subtext} - )} - { - // Can be used for logging - }} - > - {({ setFieldValue, values, isValid }) => { - onFormStatusChange(isValid && isFormSubmittable(values)); - setAllowAdvanced(isValid && isFormSubmittable(values)); - return ( -
- setName(value)} - /> - {config.values.map((field) => { - if (!field.hidden) { - return ( -
- {field.type == "file" ? ( - - ) : field.type == "zip" ? ( - <> - - {field.description && ( - - {field.description} - - )} - - - ) : field.type === "list" ? ( - - {({ push, remove }) => ( -
- - {field.description && ( - - {field.description} - - )} - - {values[field.name].map( - (_: any, index: number) => ( -
- - ) => { - const newValue = [ - ...values[field.name], - ]; - newValue[index] = e.target.value; - updateValue(setFieldValue)( - field.name, - newValue - ); - }} - value={values[field.name][index]} - /> - - -
- ) - )} - - -
- )} - - ) : field.type === "select" ? ( - <> - - {field.description && ( - - {field.description} - - )} - - - ) => - updateValue(setFieldValue)( - field.name, - e.target.value - ) - } - as="select" - value={values[field.name]} - name={field.name} - className="w-full p-2 border bg-input border-border-medium rounded-md bg-black - focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" - > - - {field.options?.map((option) => ( - - ))} - - - ) : ( - - )} -
- ); - } - })} - {isPaidEnterpriseFeaturesEnabled && ( - <> - - {isAdmin && ( - { - setIsPublic(value); - if (value) { - setGroups([]); // Clear groups when setting to public - } - }} - type={"checkbox"} - label={"Documents are Public?"} - name={"public"} - currentValue={isPublic} - /> - )} - - {userGroups ? ( - <> - {!isPublic && - ((isAdmin && userGroups.length > 0) || - (!isAdmin && userGroups.length > 1)) ? ( -
-
-
- Assign group access for this Connector -
-
- - {isAdmin ? ( - <> - This Connector will be visible/accessible by the - groups selected below - - ) : ( - <> - Curators must select one or more groups to give - access to this Connector - - )} - - ( -
- {!userGroupsIsLoading && - userGroups.map((userGroup: UserGroup) => { - const isSelected = - groups?.includes(userGroup.id) || - (!isAdmin && userGroups.length === 1); - - // Auto-select the only group for non-admin users - if ( - !isAdmin && - userGroups.length === 1 && - groups.length === 0 - ) { - setGroups([userGroup.id]); - } - - return ( -
{ - if (setGroups) { - if ( - isSelected && - (isAdmin || userGroups.length > 1) - ) { - setGroups( - groups?.filter( - (id) => id !== userGroup.id - ) || [] - ); - } else if (!isSelected) { - setGroups([ - ...(groups || []), - userGroup.id, - ]); - } - } - }} - > -
- {" "} - {userGroup.name} -
-
- ); - })} -
- )} - /> -
- ) : userGroups && userGroups.length > 0 ? ( - - These documents will be assigned to group:{" "} - {userGroups[0].name}. - - ) : ( - <> - )} - - ) : ( - <> - )} - - )} - - ); - }} -
-
- ); -}; - -export default DynamicConnectionForm; diff --git a/web/src/app/admin/connectors/[connector]/pages/DynamicConnectorCreationForm.tsx b/web/src/app/admin/connectors/[connector]/pages/DynamicConnectorCreationForm.tsx new file mode 100644 index 000000000..507b976f9 --- /dev/null +++ b/web/src/app/admin/connectors/[connector]/pages/DynamicConnectorCreationForm.tsx @@ -0,0 +1,115 @@ +import React, { + ChangeEvent, + Dispatch, + FC, + SetStateAction, + useEffect, + useState, +} from "react"; +import { Formik, Form, Field, FieldArray, FormikProps } from "formik"; +import * as Yup from "yup"; +import { FaPlus } from "react-icons/fa"; +import { useUserGroups } from "@/lib/hooks"; +import { UserGroup, User, UserRole } from "@/lib/types"; +import { Divider } from "@tremor/react"; +import CredentialSubText, { + AdminBooleanFormField, +} from "@/components/credentials/CredentialFields"; +import { TrashIcon } from "@/components/icons/icons"; +import { FileUpload } from "@/components/admin/connectors/FileUpload"; +import { ConnectionConfiguration } from "@/lib/connectors/connectors"; +import { useFormContext } from "@/components/context/FormContext"; +import { usePaidEnterpriseFeaturesEnabled } from "@/components/settings/usePaidEnterpriseFeaturesEnabled"; +import { Text } from "@tremor/react"; +import { getCurrentUser } from "@/lib/user"; +import { FiUsers } from "react-icons/fi"; +import SelectInput from "./ConnectorInput/SelectInput"; +import NumberInput from "./ConnectorInput/NumberInput"; +import { TextFormField } from "@/components/admin/connectors/Field"; +import ListInput from "./ConnectorInput/ListInput"; +import FileInput from "./ConnectorInput/FileInput"; + +export interface DynamicConnectionFormProps { + config: ConnectionConfiguration; + selectedFiles: File[]; + setSelectedFiles: Dispatch>; + values: any; +} + +const DynamicConnectionForm: FC = ({ + config, + selectedFiles, + setSelectedFiles, + values, +}) => { + return ( + <> +

{config.description}

+ + {config.subtext && ( + {config.subtext} + )} + + + + {config.values.map((field) => { + if (!field.hidden) { + return ( +
+ {field.type == "file" ? ( + + ) : field.type == "zip" ? ( + + ) : field.type === "list" ? ( + + ) : field.type === "select" ? ( + + ) : field.type === "number" ? ( + + ) : field.type === "checkbox" ? ( + + ) : ( + + )} +
+ ); + } + })} + + ); +}; + +export default DynamicConnectionForm; diff --git a/web/src/app/admin/connectors/[connector]/pages/formelements/NumberInput.tsx b/web/src/app/admin/connectors/[connector]/pages/formelements/NumberInput.tsx new file mode 100644 index 000000000..5a9f5041b --- /dev/null +++ b/web/src/app/admin/connectors/[connector]/pages/formelements/NumberInput.tsx @@ -0,0 +1,42 @@ +import { SubLabel } from "@/components/admin/connectors/Field"; +import { Field } from "formik"; + +export default function NumberInput({ + label, + value, + optional, + description, + name, + showNeverIfZero, +}: { + value?: number; + label: string; + name: string; + optional?: boolean; + description?: string; + showNeverIfZero?: boolean; +}) { + return ( +
+ + {description && {description}} + + +
+ ); +} diff --git a/web/src/app/admin/connectors/[connector]/pages/utils/files.ts b/web/src/app/admin/connectors/[connector]/pages/utils/files.ts index bd7ee8bd5..d847efe89 100644 --- a/web/src/app/admin/connectors/[connector]/pages/utils/files.ts +++ b/web/src/app/admin/connectors/[connector]/pages/utils/files.ts @@ -2,14 +2,14 @@ import { PopupSpec } from "@/components/admin/connectors/Popup"; import { createConnector, runConnector } from "@/lib/connector"; import { createCredential, linkCredential } from "@/lib/credential"; import { FileConfig } from "@/lib/connectors/connectors"; -import { AdvancedConfig } from "../../AddConnectorPage"; +import { AdvancedConfigFinal } from "../../AddConnectorPage"; export const submitFiles = async ( selectedFiles: File[], setPopup: (popup: PopupSpec) => void, setSelectedFiles: (files: File[]) => void, name: string, - advancedConfig: AdvancedConfig, + advancedConfig: AdvancedConfigFinal, isPublic: boolean, groups?: number[] ) => { diff --git a/web/src/app/admin/connectors/[connector]/pages/utils/google_site.ts b/web/src/app/admin/connectors/[connector]/pages/utils/google_site.ts index 2dd220af7..f1689e8fc 100644 --- a/web/src/app/admin/connectors/[connector]/pages/utils/google_site.ts +++ b/web/src/app/admin/connectors/[connector]/pages/utils/google_site.ts @@ -2,13 +2,13 @@ import { PopupSpec } from "@/components/admin/connectors/Popup"; import { createConnector, runConnector } from "@/lib/connector"; import { linkCredential } from "@/lib/credential"; import { GoogleSitesConfig } from "@/lib/connectors/connectors"; -import { AdvancedConfig } from "../../AddConnectorPage"; +import { AdvancedConfigFinal } from "../../AddConnectorPage"; export const submitGoogleSite = async ( selectedFiles: File[], base_url: any, setPopup: (popup: PopupSpec) => void, - advancedConfig: AdvancedConfig, + advancedConfig: AdvancedConfigFinal, name?: string ) => { const uploadCreateAndTriggerConnector = async () => { diff --git a/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx b/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx index e8f3d5199..c934af61e 100644 --- a/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx +++ b/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx @@ -128,51 +128,51 @@ export const DocumentSetCreationForm = ({ )} +
+

+ These are the connectors available to{" "} + {userGroups && userGroups.length > 1 + ? "the selected group" + : "the group you curate"} + : +

+

+ All documents indexed by these selected connectors will be a + part of this document set. +

+ { + // Filter visible cc pairs + const visibleCcPairs = localCcPairs.filter( + (ccPair) => + ccPair.public_doc || + (ccPair.groups.length > 0 && + props.values.groups.every((group) => + ccPair.groups.includes(group) + )) + ); -

- These are the connectors available to{" "} - {userGroups && userGroups.length > 1 - ? "the selected group" - : "the group you curate"} - : -

-

- All documents indexed by these selected connectors will be a - part of this document set. -

- { - // Filter visible cc pairs - const visibleCcPairs = localCcPairs.filter( - (ccPair) => - ccPair.public_doc || - (ccPair.groups.length > 0 && - props.values.groups.every((group) => - ccPair.groups.includes(group) - )) - ); + // Deselect filtered out cc pairs + const visibleCcPairIds = visibleCcPairs.map( + (ccPair) => ccPair.cc_pair_id + ); + props.values.cc_pair_ids = props.values.cc_pair_ids.filter( + (id) => visibleCcPairIds.includes(id) + ); - // Deselect filtered out cc pairs - const visibleCcPairIds = visibleCcPairs.map( - (ccPair) => ccPair.cc_pair_id - ); - props.values.cc_pair_ids = props.values.cc_pair_ids.filter( - (id) => visibleCcPairIds.includes(id) - ); - - return ( -
- {visibleCcPairs.map((ccPair) => { - const ind = props.values.cc_pair_ids.indexOf( - ccPair.cc_pair_id - ); - let isSelected = ind !== -1; - return ( -
+ {visibleCcPairs.map((ccPair) => { + const ind = props.values.cc_pair_ids.indexOf( + ccPair.cc_pair_id + ); + let isSelected = ind !== -1; + return ( +
{ - if (isSelected) { - arrayHelpers.remove(ind); - } else { - arrayHelpers.push(ccPair.cc_pair_id); + (isSelected + ? " bg-background-strong" + : " hover:bg-hover") } - }} - > -
- + onClick={() => { + if (isSelected) { + arrayHelpers.remove(ind); + } else { + arrayHelpers.push(ccPair.cc_pair_id); + } + }} + > +
+ +
-
- ); - })} -
- ); - }} - /> - - { - // Filter non-visible cc pairs - const nonVisibleCcPairs = localCcPairs.filter( - (ccPair) => - !ccPair.public_doc && - (ccPair.groups.length === 0 || - !props.values.groups.every((group) => - ccPair.groups.includes(group) - )) - ); - - return nonVisibleCcPairs.length > 0 ? ( - <> - -

- These connectors are not available to the{" "} - {userGroups && userGroups.length > 1 - ? `group${props.values.groups.length > 1 ? "s" : ""} you have selected` - : "group you curate"} - : -

-

- Only connectors that are directly assigned to the group - you are trying to add the document set to will be - available. -

-
- {nonVisibleCcPairs.map((ccPair) => ( -
-
- -
-
- ))} + ); + })}
- - ) : null; - }} - /> + ); + }} + /> +
+
+ { + // Filter non-visible cc pairs + const nonVisibleCcPairs = localCcPairs.filter( + (ccPair) => + !ccPair.public_doc && + (ccPair.groups.length === 0 || + !props.values.groups.every((group) => + ccPair.groups.includes(group) + )) + ); + + return nonVisibleCcPairs.length > 0 ? ( + <> + +

+ These connectors are not available to the{" "} + {userGroups && userGroups.length > 1 + ? `group${props.values.groups.length > 1 ? "s" : ""} you have selected` + : "group you curate"} + : +

+

+ Only connectors that are directly assigned to the + group you are trying to add the document set to will + be available. +

+
+ {nonVisibleCcPairs.map((ccPair) => ( +
+
+ +
+
+ ))} +
+ + ) : null; + }} + /> +
-
+
-
+
-
+
-
-
+ )} diff --git a/web/src/app/admin/standard-answer/StandardAnswerCreationForm.tsx b/web/src/app/admin/standard-answer/StandardAnswerCreationForm.tsx index 682c43a9a..9e4ea1cb9 100644 --- a/web/src/app/admin/standard-answer/StandardAnswerCreationForm.tsx +++ b/web/src/app/admin/standard-answer/StandardAnswerCreationForm.tsx @@ -93,11 +93,13 @@ export const StandardAnswerCreationForm = ({ placeholder="e.g. Wifi Password" autoCompleteDisabled={true} /> - +
+ +
-
- -
+ )} diff --git a/web/src/app/admin/users/page.tsx b/web/src/app/admin/users/page.tsx index 441c9f923..0c258cd85 100644 --- a/web/src/app/admin/users/page.tsx +++ b/web/src/app/admin/users/page.tsx @@ -194,6 +194,7 @@ const AddUserButton = ({ Invite Users
+ {modal && ( setModal(false)}>
diff --git a/web/src/app/assistants/gallery/AssistantsGallery.tsx b/web/src/app/assistants/gallery/AssistantsGallery.tsx index 386811c10..d4882aa60 100644 --- a/web/src/app/assistants/gallery/AssistantsGallery.tsx +++ b/web/src/app/assistants/gallery/AssistantsGallery.tsx @@ -22,6 +22,7 @@ export function AssistantsGallery({ user, }: { assistants: Persona[]; + user: User | null; }) { function filterAssistants(assistants: Persona[], query: string): Persona[] { @@ -150,9 +151,9 @@ export function AssistantsGallery({ } }} size="xs" - color="red" + color="blue" > - Remove + Deselect ) : (
- +
); @@ -77,24 +92,25 @@ function AssistantListItem({ user, allAssistantIds, allUsers, - isFirst, - isLast, isVisible, setPopup, + deleteAssistant, }: { assistant: Persona; user: User | null; allUsers: MinimalUserSnapshot[]; allAssistantIds: string[]; - isFirst: boolean; - isLast: boolean; isVisible: boolean; + deleteAssistant: Dispatch>; + setPopup: (popupSpec: PopupSpec | null) => void; }) { const router = useRouter(); const [showSharingModal, setShowSharingModal] = useState(false); const isOwnedByUser = checkUserOwnsAssistant(user, assistant); + const currentChosenAssistants = user?.preferences + ?.chosen_assistants as number[]; return ( <> @@ -158,6 +174,92 @@ function AssistantListItem({ > + + + +
+ } + side="bottom" + align="start" + sideOffset={5} + > + {[ + isVisible ? ( +
{ + if ( + currentChosenAssistants && + currentChosenAssistants.length === 1 + ) { + setPopup({ + message: `Cannot remove "${assistant.name}" - you must have at least one assistant.`, + type: "error", + }); + return; + } + const success = await removeAssistantFromList( + assistant.id, + currentChosenAssistants || allAssistantIds + ); + if (success) { + setPopup({ + message: `"${assistant.name}" has been removed from your list.`, + type: "success", + }); + router.refresh(); + } else { + setPopup({ + message: `"${assistant.name}" could not be removed from your list.`, + type: "error", + }); + } + }} + > + {isOwnedByUser ? "Hide" : "Remove"} +
+ ) : ( +
{ + const success = await addAssistantToList( + assistant.id, + currentChosenAssistants || allAssistantIds + ); + if (success) { + setPopup({ + message: `"${assistant.name}" has been added to your list.`, + type: "success", + }); + router.refresh(); + } else { + setPopup({ + message: `"${assistant.name}" could not be added to your list.`, + type: "error", + }); + } + }} + > + Add +
+ ), + isOwnedByUser ? ( +
deleteAssistant(assistant)} + > + Delete +
+ ) : ( + <> + ), + ]} +
)}
@@ -172,9 +274,11 @@ export function AssistantsList({ user: User | null; assistants: Persona[]; }) { - const [filteredAssistants, setFilteredAssistants] = useState( - orderAssistantsForUser(assistants, user) - ); + const [filteredAssistants, setFilteredAssistants] = useState([]); + + useEffect(() => { + setFilteredAssistants(orderAssistantsForUser(assistants, user)); + }, [user, assistants, orderAssistantsForUser]); const ownedButHiddenAssistants = assistants.filter( (assistant) => @@ -185,9 +289,10 @@ export function AssistantsList({ const allAssistantIds = assistants.map((assistant) => assistant.id.toString() ); + const [deletingPersona, setDeletingPersona] = useState(null); const { popup, setPopup } = usePopup(); - + const router = useRouter(); const { data: users } = useSWR( "/api/users", errorHandlingFetcher @@ -222,6 +327,30 @@ export function AssistantsList({ return ( <> {popup} + {deletingPersona && ( + setDeletingPersona(null)} + onSubmit={async () => { + const success = await deletePersona(deletingPersona.id); + if (success) { + setPopup({ + message: `"${deletingPersona.name}" has been deleted.`, + type: "success", + }); + router.refresh(); + } else { + setPopup({ + message: `"${deletingPersona.name}" could not be deleted.`, + type: "error", + }); + } + setDeletingPersona(null); + }} + /> + )} +
My Assistants @@ -273,13 +402,12 @@ export function AssistantsList({
{filteredAssistants.map((assistant, index) => ( @@ -302,13 +430,12 @@ export function AssistantsList({
{ownedButHiddenAssistants.map((assistant, index) => ( diff --git a/web/src/app/chat/ChatBanner.tsx b/web/src/app/chat/ChatBanner.tsx index bdd53617f..4cf0f5fb5 100644 --- a/web/src/app/chat/ChatBanner.tsx +++ b/web/src/app/chat/ChatBanner.tsx @@ -94,7 +94,7 @@ export function ChatBanner() { content={settings.enterpriseSettings.custom_header_content} />
-
+
{isOverflowing && ( setDeletingChatSession(null)} onSubmit={async () => { const response = await deleteChatSession(deletingChatSession.id); @@ -1583,7 +1585,6 @@ export function ChatPage({ alert("Failed to delete chat session"); } }} - chatSessionName={deletingChatSession.name} /> )} @@ -1706,7 +1707,7 @@ export function ChatPage({ > {/* */}
{/* ChatBanner is a custom banner that displays a admin-specified message at @@ -1722,7 +1723,7 @@ export function ChatPage({ )}
)} -

+

{document.semantic_identifier || document.document_id}

diff --git a/web/src/app/chat/documentSidebar/DocumentSidebar.tsx b/web/src/app/chat/documentSidebar/DocumentSidebar.tsx index 428101730..57bfee363 100644 --- a/web/src/app/chat/documentSidebar/DocumentSidebar.tsx +++ b/web/src/app/chat/documentSidebar/DocumentSidebar.tsx @@ -69,7 +69,7 @@ export const DocumentSidebar = forwardRef( width: initialWidth, }} > -
+
{popup}
{dedupedDocuments.length} Documents diff --git a/web/src/app/chat/input/ChatInputBar.tsx b/web/src/app/chat/input/ChatInputBar.tsx index 3f9e37da3..b579abefe 100644 --- a/web/src/app/chat/input/ChatInputBar.tsx +++ b/web/src/app/chat/input/ChatInputBar.tsx @@ -273,12 +273,10 @@ export function ChatInputBar({ return (
-
+
{currentPrompt.prompt}

+

{currentPrompt.prompt}

{currentPrompt.id == selectedAssistant.id && "(default) "} {currentPrompt.content} @@ -485,8 +483,7 @@ export function ChatInputBar({ outline-none placeholder-subtle resize-none - pl-4 - pr-12 + px-5 py-4 h-14 `} @@ -514,7 +511,7 @@ export function ChatInputBar({ }} suppressContentEditableWarning={true} /> -

+
( @@ -558,7 +555,6 @@ export function ChatInputBar({ ref={ref} llmOverrideManager={llmOverrideManager} chatSessionId={chatSessionId} - currentAssistant={selectedAssistant} /> )} position="top" diff --git a/web/src/app/chat/input/ChatInputOption.tsx b/web/src/app/chat/input/ChatInputOption.tsx index 5cd89e66e..d2d7bc5fd 100644 --- a/web/src/app/chat/input/ChatInputOption.tsx +++ b/web/src/app/chat/input/ChatInputOption.tsx @@ -1,5 +1,9 @@ import React, { useState, useRef, useEffect } from "react"; -import { ChevronRightIcon, IconProps } from "@/components/icons/icons"; +import { + ChevronDownIcon, + ChevronRightIcon, + IconProps, +} from "@/components/icons/icons"; interface ChatInputOptionProps { name?: string; @@ -75,7 +79,9 @@ export const ChatInputOption: React.FC = ({
{name && {name}} - {toggle && } + {toggle && ( + + )}
{isTooltipVisible && tooltipContent && ( diff --git a/web/src/app/chat/message/CodeBlock.tsx b/web/src/app/chat/message/CodeBlock.tsx index d7007ce42..7da83195b 100644 --- a/web/src/app/chat/message/CodeBlock.tsx +++ b/web/src/app/chat/message/CodeBlock.tsx @@ -133,9 +133,7 @@ export function CodeBlock({ )} 
-        
-          {children}
-        
+        {children}
); diff --git a/web/src/app/chat/message/Messages.tsx b/web/src/app/chat/message/Messages.tsx index 8a2b4b354..09cacd1b9 100644 --- a/web/src/app/chat/message/Messages.tsx +++ b/web/src/app/chat/message/Messages.tsx @@ -272,12 +272,12 @@ export const AIMessage = ({
-
+
{typeof content === "string" ? ( -
+
{ const { node, ...rest } = props; @@ -446,7 +446,7 @@ export const AIMessage = ({ className="text-sm flex w-full pt-1 gap-x-1.5 overflow-hidden justify-between font-semibold text-text-700" > -

+

{doc.semantic_identifier || doc.document_id}

@@ -727,14 +727,12 @@ export const HumanMessage = ({ onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > -
+
-
+
{isEditing ? (
void; chatSessionId?: number; @@ -22,14 +19,7 @@ interface LlmTabProps { export const LlmTab = forwardRef( ( - { - llmOverrideManager, - currentAssistant, - chatSessionId, - currentLlm, - close, - openModelSettings, - }, + { llmOverrideManager, chatSessionId, currentLlm, close, openModelSettings }, ref ) => { const { llmProviders } = useChatContext(); @@ -51,40 +41,10 @@ export const LlmTab = forwardRef( debouncedSetTemperature(value); }; - const llmOptionsByProvider: { - [provider: string]: { name: string; value: string }[]; - } = {}; - const uniqueModelNames = new Set(); - - llmProviders.forEach((llmProvider) => { - if (!llmOptionsByProvider[llmProvider.provider]) { - llmOptionsByProvider[llmProvider.provider] = []; - } - - (llmProvider.display_model_names || llmProvider.model_names).forEach( - (modelName) => { - if (!uniqueModelNames.has(modelName)) { - uniqueModelNames.add(modelName); - llmOptionsByProvider[llmProvider.provider].push({ - name: modelName, - value: structureValue( - llmProvider.name, - llmProvider.provider, - modelName - ), - }); - } - } - ); - }); - - const llmOptions = Object.entries(llmOptionsByProvider).flatMap( - ([provider, options]) => [...options] - ); return (
- +
-
- {llmOptions.map(({ name, value }, index) => { - return ( - - ); - })} -
+ { + if (value == null) { + return; + } + setLlmOverride(destructureValue(value)); + if (chatSessionId) { + updateModelOverrideForChatSession(chatSessionId, value as string); + } + close(); + }} + /> +
-
+ )} diff --git a/web/src/app/ee/admin/groups/[groupId]/GroupDisplay.tsx b/web/src/app/ee/admin/groups/[groupId]/GroupDisplay.tsx index 1c4ae7420..680685858 100644 --- a/web/src/app/ee/admin/groups/[groupId]/GroupDisplay.tsx +++ b/web/src/app/ee/admin/groups/[groupId]/GroupDisplay.tsx @@ -94,7 +94,7 @@ const UserRoleDropdown = ({ if (isEditable) { return ( -
+
-

- Upload a .png or .jpg file -

-
- )} - {tmpImageUrl && ( -
- Uploaded Image: - -
- )} - {selectedFile && ( - - )} - - )} - - - ); -} diff --git a/web/src/components/credentials/CredentialFields.tsx b/web/src/components/credentials/CredentialFields.tsx index 4ea926017..3d25fcb75 100644 --- a/web/src/components/credentials/CredentialFields.tsx +++ b/web/src/components/credentials/CredentialFields.tsx @@ -125,27 +125,27 @@ export function AdminTextField({ interface BooleanFormFieldProps { name: string; label: string; + checked: boolean; subtext?: string | JSX.Element; - onChange?: (e: React.ChangeEvent) => void; small?: boolean; alignTop?: boolean; noLabel?: boolean; - checked: boolean; + onChange?: (e: React.ChangeEvent) => void; } export const AdminBooleanFormField = ({ name, label, subtext, - onChange, noLabel, small, checked, alignTop, + onChange, }: BooleanFormFieldProps) => { return (
-