Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow UI configuration via environment variables #563

Merged
merged 16 commits into from
Feb 9, 2024
Merged

Allow UI configuration via environment variables #563

merged 16 commits into from
Feb 9, 2024

Conversation

iMicknl
Copy link
Member

@iMicknl iMicknl commented Jan 31, 2024 •
edited
Loading

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:

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"

Screenshot:
image

Changes

The changes allow users to modify the title, logo, and descriptions of the chat application via environment variables. These changes affect the .env.sample, README.md, app.py, frontend/index.html, frontend/src/api/models.ts, frontend/src/pages/chat/Chat.module.css, frontend/src/pages/chat/Chat.tsx, frontend/src/pages/layout/Layout.module.css, and frontend/src/pages/layout/Layout.tsx files.

UI Customization:

  • .env.sample: Added environment variables for UI customization including UI_TITLE, UI_LOGO, UI_CHAT_LOGO, UI_CHAT_TITLE, and UI_CHAT_DESCRIPTION.
  • README.md: Updated the documentation to reflect the new environment variables for UI customization and removed the section about updating the logo and headers in the Chat.tsx file. [1] [2] [3]
  • app.py: Imported the render_template function and added new variables for the UI configuration. The index function now uses render_template to render the index.html file with the title. The assets function includes the UI configuration in the frontend_settings. [1] [2] [3] [4]
  • frontend/index.html: Updated the title to use the title variable.
  • frontend/src/api/models.ts: Added a new UI type and updated the FrontendSettings type to include the ui property.
  • frontend/src/pages/chat/Chat.module.css: Updated the chatIcon class to have an auto width.
  • frontend/src/pages/chat/Chat.tsx: Updated the chat page to use the UI configuration from the frontend settings. The chat logo, title, and description are now customizable. [1] [2]
  • frontend/src/pages/layout/Layout.module.css: Updated the headerIcon class to have an auto width.
  • frontend/src/pages/layout/Layout.tsx: Updated the layout to use the UI configuration from the frontend settings. The logo and title in the header are now customizable. [1] [2]

@sarah-widder
Copy link
Contributor

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
Copy link
Member Author

iMicknl commented Feb 1, 2024

@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 iMicknl force-pushed the feature/custom_branding branch 2 times, most recently from bd8b6c9 to 2b12886 Compare February 2, 2024 20:34
@iMicknl
Copy link
Member Author

iMicknl commented Feb 4, 2024

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
Copy link
Contributor

@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 iMicknl force-pushed the feature/custom_branding branch from 16f1169 to a4b24b0 Compare February 7, 2024 10:59
@iMicknl iMicknl changed the title Allow branding configuration via environment variables Allow UI configuration via environment variables Feb 7, 2024
@iMicknl
Copy link
Member Author

iMicknl commented Feb 7, 2024

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
Copy link

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
Copy link
Contributor

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

@iMicknl iMicknl force-pushed the feature/custom_branding branch from 1fe0769 to a5ccde4 Compare February 9, 2024 08:57
@iMicknl
Copy link
Member Author

iMicknl commented Feb 9, 2024

Done + rebased on main.

sarah-widder
sarah-widder approved these changes Feb 9, 2024
View reviewed changes
Copy link
Contributor

@sarah-widder sarah-widder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really nice work, thanks @iMicknl !

@sarah-widder sarah-widder merged commit 627c4a2 into microsoft:main Feb 9, 2024
1 check passed
@iMicknl iMicknl mentioned this pull request Feb 13, 2024
Closed
@mdsa3d
Copy link

mdsa3d commented Apr 29, 2024

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

sudo-init pushed a commit to sudo-init/sample-app-chatGPT that referenced this pull request Sep 20, 2024
@iMicknl
Allow UI configuration via environment variables (microsoft#563)
05fb04c
nikhilnagaraj pushed a commit to Admin-bh-Edge/Edge-Comp-Policies that referenced this pull request Oct 2, 2024
@iMicknl
Allow UI configuration via environment variables (microsoft#563)
38a4c4c
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@federel federel federel approved these changes

@sarah-widder sarah-widder sarah-widder approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
5 participants
@iMicknl @sarah-widder @RylandDeGregory @mdsa3d @federel