mirror of
https://github.com/danswer-ai/danswer.git
synced 2025-07-12 14:12:53 +02:00
Update white-labelling to be clearer (advanced settings) (#2228)
* update white labelling to be somewhat clearer * ensure logotype set to null post submission
This commit is contained in:
pablodanswer
GitHub
@ -11,14 +11,18 @@ import {
|
||||
SubLabel,
|
||||
TextFormField,
|
||||
} from "@/components/admin/connectors/Field";
|
||||
import { Button, Divider } from "@tremor/react";
|
||||
import { Button, Divider, Text } from "@tremor/react";
|
||||
import { ImageUpload } from "./ImageUpload";
|
||||
import { AdvancedOptionsToggle } from "@/components/AdvancedOptionsToggle";
|
||||
import Link from "next/link";
|
||||
|
||||
export function WhitelabelingForm() {
|
||||
const router = useRouter();
|
||||
const [selectedLogo, setSelectedLogo] = useState<File | null>(null);
|
||||
const [selectedLogotype, setSelectedLogotype] = useState<File | null>(null);
|
||||
|
||||
const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
|
||||
|
||||
const settings = useContext(SettingsContext);
|
||||
if (!settings) {
|
||||
return null;
|
||||
@ -97,7 +101,7 @@ export function WhitelabelingForm() {
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", selectedLogotype);
|
||||
setSelectedLogo(null);
|
||||
setSelectedLogotype(null);
|
||||
const response = await fetch(
|
||||
"/api/admin/enterprise-settings/logo?is_logotype=true",
|
||||
{
|
||||
@ -166,103 +170,129 @@ export function WhitelabelingForm() {
|
||||
Specify your own logo to replace the standard Danswer logo.
|
||||
</SubLabel>
|
||||
)}
|
||||
|
||||
<ImageUpload
|
||||
selectedFile={selectedLogo}
|
||||
setSelectedFile={setSelectedLogo}
|
||||
/>
|
||||
<br />
|
||||
<Label>Custom Logotype</Label>
|
||||
|
||||
{values.use_custom_logotype ? (
|
||||
<div className="mt-3">
|
||||
<SubLabel>Current Custom Logotype: </SubLabel>
|
||||
<img
|
||||
src={"/api/enterprise-settings/logotype?u=" + Date.now()}
|
||||
alt="logotype"
|
||||
style={{ objectFit: "contain" }}
|
||||
className="w-32 h-32 mb-10 mt-4"
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
<Button
|
||||
color="red"
|
||||
size="xs"
|
||||
type="button"
|
||||
className="mb-8"
|
||||
onClick={async () => {
|
||||
const valuesWithoutLogotype = {
|
||||
...values,
|
||||
use_custom_logotype: false,
|
||||
};
|
||||
await updateEnterpriseSettings(valuesWithoutLogotype);
|
||||
setValues(valuesWithoutLogotype);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
|
||||
<SubLabel>
|
||||
Override the current custom logotype by uploading a new image
|
||||
below and clicking the Update button. This logotype is the
|
||||
text-based logo that will be rendered at the bottom right of
|
||||
the chat screen.
|
||||
</SubLabel>
|
||||
</div>
|
||||
) : (
|
||||
<SubLabel>Specify your own logotype</SubLabel>
|
||||
)}
|
||||
<ImageUpload
|
||||
selectedFile={selectedLogotype}
|
||||
setSelectedFile={setSelectedLogotype}
|
||||
<AdvancedOptionsToggle
|
||||
showAdvancedOptions={showAdvancedOptions}
|
||||
setShowAdvancedOptions={setShowAdvancedOptions}
|
||||
/>
|
||||
|
||||
<Divider />
|
||||
<br />
|
||||
|
||||
<div className="mt-4">
|
||||
<TextFormField
|
||||
label="Custom Chat Header Content"
|
||||
name="custom_header_content"
|
||||
subtext={`Custom Markdown content that will be displayed as a banner at the top of the Chat page.`}
|
||||
placeholder="Your header content..."
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
{showAdvancedOptions && (
|
||||
<>
|
||||
<Text>
|
||||
Read{" "}
|
||||
<Link
|
||||
href={"https://docs.danswer.dev/enterprise_edition/theming"}
|
||||
className="text-link cursor-pointer"
|
||||
>
|
||||
the docs
|
||||
</Link>{" "}
|
||||
to see whitelabelling examples in action.
|
||||
</Text>
|
||||
<div className="mt-4">
|
||||
<TextFormField
|
||||
label="Chat Header Content"
|
||||
name="custom_header_content"
|
||||
subtext={`Custom Markdown content that will be displayed as a banner at the top of the Chat page.`}
|
||||
placeholder="Your header content..."
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
<Divider />
|
||||
|
||||
<div className="mt-4">
|
||||
<TextFormField
|
||||
label="Custom Popup Header"
|
||||
name="custom_popup_header"
|
||||
subtext={`The title for the popup that will be displayed for each user on their initial visit
|
||||
to the application. If left blank AND Custom Popup Content is specified, will use "Welcome to ${
|
||||
values.application_name || "Danswer"
|
||||
}!".`}
|
||||
placeholder="Initial Popup Header"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<TextFormField
|
||||
label="Popup Header"
|
||||
name="custom_popup_header"
|
||||
subtext={`The title for the popup that will be displayed for each user on their initial visit
|
||||
to the application. If left blank AND Custom Popup Content is specified, will use "Welcome to ${
|
||||
values.application_name || "Danswer"
|
||||
}!".`}
|
||||
placeholder="Initial Popup Header"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<TextFormField
|
||||
label="Custom Popup Content"
|
||||
name="custom_popup_content"
|
||||
subtext={`Custom Markdown content that will be displayed as a popup on initial visit to the application.`}
|
||||
placeholder="Your popup content..."
|
||||
isTextArea
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<TextFormField
|
||||
label="Popup Content"
|
||||
name="custom_popup_content"
|
||||
subtext={`Custom Markdown content that will be displayed as a popup on initial visit to the application.`}
|
||||
placeholder="Your popup content..."
|
||||
isTextArea
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<TextFormField
|
||||
label="Custom Footer"
|
||||
name="custom_lower_disclaimer_content"
|
||||
subtext={`Custom Markdown content that will be displayed at the bottom of the Chat page.`}
|
||||
placeholder="Your disclaimer content..."
|
||||
isTextArea
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<TextFormField
|
||||
label="Chat Footer Text"
|
||||
name="custom_lower_disclaimer_content"
|
||||
subtext={`Custom Markdown content that will be displayed at the bottom of the Chat page.`}
|
||||
placeholder="Your disclaimer content..."
|
||||
isTextArea
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
<Label>Chat Footer Logotype</Label>
|
||||
|
||||
{values.use_custom_logotype ? (
|
||||
<div className="mt-3">
|
||||
<SubLabel>Current Custom Logotype: </SubLabel>
|
||||
<img
|
||||
src={"/api/enterprise-settings/logotype?u=" + Date.now()}
|
||||
alt="logotype"
|
||||
style={{ objectFit: "contain" }}
|
||||
className="w-32 h-32 mb-10 mt-4"
|
||||
/>
|
||||
|
||||
<Button
|
||||
color="red"
|
||||
size="xs"
|
||||
type="button"
|
||||
className="mb-8"
|
||||
onClick={async () => {
|
||||
const valuesWithoutLogotype = {
|
||||
...values,
|
||||
use_custom_logotype: false,
|
||||
};
|
||||
await updateEnterpriseSettings(valuesWithoutLogotype);
|
||||
setValues(valuesWithoutLogotype);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
|
||||
<SubLabel>
|
||||
Override your uploaded custom logotype by uploading a new
|
||||
image below and clicking the Update button. This logotype
|
||||
is the text-based logo that will be rendered at the bottom
|
||||
right of the chat screen.
|
||||
</SubLabel>
|
||||
</div>
|
||||
) : (
|
||||
<SubLabel>
|
||||
Add a custom logotype by uploading a new image below and
|
||||
clicking the Update button. This logotype is the text-based
|
||||
logo that will be rendered at the bottom right of the chat
|
||||
screen.
|
||||
</SubLabel>
|
||||
)}
|
||||
<ImageUpload
|
||||
selectedFile={selectedLogotype}
|
||||
setSelectedFile={setSelectedLogotype}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button type="submit" className="mt-4">
|
||||
Update
|
||||
|
||||
Reference in New Issue
Block a user