Allow branding configuration via environment variables

[iMicknl]

Many customers like this accelerator / sample because it is easy to set up and very clean. However, many customers struggle with making small branding changes. Especially since the sample has been rebranded to use Contoso + logo's, the demand for branding has risen.

This pull request primarily introduces branding customization to the application. The changes allow users to customize the title, logo, chat title, and chat description by setting environment variables. The most significant changes include the addition of new environment variables in the .env.sample file, the modification of the app.py file to use these variables, and the adjustment of frontend components to use these new settings.

Related discussions: #269, #438, #498, Fixes #522 Fixes #553 Fixes #558 Fixes #277.

Preview:

Example configuration:

BRANDING_TITLE = "MicrosoftGPT"
BRANDING_CHAT_TITLE = "Your safe and secure environment"
BRANDING_CHAT_DESCRIPTION = "Start chatting with your own data now."
BRANDING_LOGO = "https://upload.wikimedia.org/wikipedia/commons/9/96/Microsoft_logo_%282012%29.svg"

Screenshot:

Changes

Environment variable additions:

• .env.sample: Added BRANDING_TITLE, BRANDING_LOGO, BRANDING_CHAT_LOGO, and BRANDING_CHAT_DESCRIPTION environment variables for branding customization.

Backend changes:

• app.py: Imported render_template from Flask and set template_folder in the Flask app initialization. Added new variables for branding settings using the new environment variables. Modified the index() function to use render_template and pass the title for branding. Added a new "branding" dictionary to frontend_settings in the assets(path): function. [1] [2]

Frontend changes:

• frontend/index.html: Changed the title to use a variable for branding customization.
• frontend/src/api/models.ts: Added a new Branding type and added it as an optional property to FrontendSettings.
• frontend/src/pages/chat/Chat.module.css: Changed the width of .chatIcon to auto for better logo display.
• frontend/src/pages/chat/Chat.tsx: Added a new branding constant from frontend settings. Modified the chat empty state to use branding settings for the logo, chat title, and chat description. [1] [2]
• frontend/src/pages/layout/Layout.module.css: Changed the width of .headerIcon to auto for better logo display.
• frontend/src/pages/layout/Layout.tsx: Added a new branding constant from frontend settings. Modified the header to use branding settings for the logo and title. [1] [2]

[sarah-widder]

Hi @iMicknl , thank you for this delightfully thorough and well-documented PR! I'm just getting ready to merge #460 which would require adjusting this to use the async render_template function from Quart. Do you see any additional issues with migrating this over to Quart?

[iMicknl]

@sarah-widder haven't tried it yet with Quart, but will rebase on main when #460 is merged and adapt to the new changes. Shouldn't be too difficult!

Would you agree with the current proposal in this PR? I was hesitating to add a JSON based format, which can contain more branding options easily, but this might be too difficult for starting users. The current proposal is only to allow a few small changes. Customers can still change the code for more changes.

[iMicknl]

Rebased on main! My latest thought is that branding is maybe not the right prefix, especially if there will be additions in the future like HIDE_SHARE_BUTTON.

Perhaps we should prefix it with UI or INTERFACE? What do you think.

UI_TITLE = "MicrosoftGPT"
UI_CHAT_TITLE = "Your safe and secure environment"
UI_CHAT_DESCRIPTION = "Start chatting with your own data now."
UI_LOGO = "https://upload.wikimedia.org/wikipedia/commons/9/96/Microsoft_logo_%282012%29.svg"

[sarah-widder]

@iMicknl that's a great point - let's use UI_* instead of BRANDING_. Maybe adjust the frontend settings section to something like ui_constants as well?

[iMicknl]

Rebased on main and changed the naming to UI. Regarding frontend_settings, for now I think this would sufficient since there are more settings here that will be sent to the front-end.

[RylandDeGregory]

I love the idea of this PR, and think the proposed implementation is both clean and user-friendly. However, I would like to see 1 more setting be added in order to set the favicon to a user-defined image.

[sarah-widder]

Hi @iMicknl - would you mind adding in the suggested setting for the Favicon? Otherwise this is looking great.

[iMicknl]

Done + rebased on main.

[mdsa3d]

I think there is bug in favicon icon implementation, it doesnt update in the browser tab.