Merge pull request #462 from solliancenet/jdh-branding

Branding updates

docs/deployment/app-configuration-values.md

@@ -61,6 +61,7 @@ FoundationaLLM uses Azure App Configuration to store configuration values, Key V
 | `FoundationaLLM:BlobStorageMemorySource:BlobStorageContainer` | memory-source |   |
 | `FoundationaLLM:BlobStorageMemorySource:ConfigFilePath` | BlobMemorySourceConfig.json |   |
 | `FoundationaLLM:Branding:AccentColor` | #fff |   |
+| `FoundationaLLM:Branding:AccentTextColor` | #131833 |   |
 | `FoundationaLLM:Branding:AllowAgentSelection` | default, SDZWA | These are merely sample agent names. Define one or more agents configured for your environment. **Note:** This value corresponds with the `FoundationaLLM-AllowAgentHint` feature flag. If the feature flag is `true`, then the User Portal UI uses these values to provide agent hints to the Agent Hub in completions-based requests. Otherwise, these values are ignored. |
 | `FoundationaLLM:Branding:BackgroundColor` | #fff |   |
 | `FoundationaLLM:Branding:CompanyName` | FoundationaLLM |   |
@@ -73,6 +74,10 @@ FoundationaLLM uses Azure App Configuration to store configuration values, Key V
 | `FoundationaLLM:Branding:PrimaryTextColor` | #fff |   |
 | `FoundationaLLM:Branding:SecondaryColor` | #334581 |   |
 | `FoundationaLLM:Branding:SecondaryTextColor` | #fff |   |
+| `FoundationaLLM:Branding:PrimaryButtonBackgroundColor` | #5472d4 |   |
+| `FoundationaLLM:Branding:PrimaryButtonTextColor` | #fff |   |
+| `FoundationaLLM:Branding:SecondaryButtonBackgroundColor` | #70829a |   |
+| `FoundationaLLM:Branding:SecondaryButtonTextColor` | #fff |   |
 | `FoundationaLLM:Chat:Entra:CallbackPath` | /signin-oidc |   |
 | `FoundationaLLM:Chat:Entra:ClientId` |   |   |
 | `FoundationaLLM:Chat:Entra:ClientSecret` | Key Vault secret name: `foundationallm-chat-entra-clientsecret` | This is a Key Vault reference. |

src/dotnet/Common/Constants/AppConfigurationKeys.cs

@@ -273,6 +273,26 @@ public static class AppConfigurationKeys
         /// </summary>
         public const string FoundationaLLM_Branding_AccentColor = "FoundationaLLM:Branding:AccentColor";
         /// <summary>
+        /// The key for the FoundationaLLM:Branding:AccentTextColor app configuration setting.
+        /// </summary>
+        public const string FoundationaLLM_Branding_AccentTextColor = "FoundationaLLM:Branding:AccentTextColor";
+        /// <summary>
+        /// The key for the FoundationaLLM:Branding:PrimaryButtonBackgroundColor app configuration setting.
+        /// </summary>
+        public const string FoundationLLM_Branding_PrimaryButtonBackgroundColor = "FoundationaLLM:Branding:PrimaryButtonBackgroundColor";
+        /// <summary>
+        /// The key for the FoundationaLLM:Branding:PrimaryButtonTextColor app configuration setting.
+        /// </summary>
+        public const string FoundationaLLM_Branding_PrimaryButtonTextColor = "FoundationaLLM:Branding:PrimaryButtonTextColor";
+        /// <summary>
+        /// The key for the FoundationaLLM:Branding:SecondaryButtonBackgroundColor app configuration setting.
+        /// </summary>
+        public const string FoundationLLM_Branding_SecondaryButtonBackgroundColor = "FoundationaLLM:Branding:SecondaryButtonBackgroundColor";
+        /// <summary>
+        /// The key for the FoundationaLLM:Branding:SecondaryButtonTextColor app configuration setting.
+        /// </summary>
+        public const string FoundationaLLM_Branding_SecondaryButtonTextColor = "FoundationaLLM:Branding:SecondaryButtonTextColor";
+        /// <summary>
         /// The key for the FoundationaLLM:Branding:AllowAgentSelection app configuration setting.
         /// This value corresponds with the `FoundationaLLM-AllowAgentHint` feature flag. If the feature flag is `true`,
         /// then the User Portal UI uses these values to provide agent hints to the Agent Hub in completions-based

src/dotnet/Common/Models/Configuration/Branding/ClientBrandingConfiguration.cs

@@ -44,10 +44,30 @@ public class ClientBrandingConfiguration
         /// </summary>
         public string? AccentColor { get; set; }
         /// <summary>
+        /// The accent text color of the client in hex format.
+        /// </summary>
+        public string? AccentTextColor { get; set; }
+        /// <summary>
         /// The background color of the client in hex format.
         /// </summary>
         public string? BackgroundColor { get; set; }
         /// <summary>
+        /// The background color of the client's primary button in hex format.
+        /// </summary>
+        public string? PrimaryButtonBackgroundColor { get; set; }
+        /// <summary>
+        /// The text color of the client's primary button in hex format.
+        /// </summary>
+        public string? PrimaryButtonTextColor { get; set; }
+        /// <summary>
+        /// The background color of the client's secondary button in hex format.
+        /// </summary>
+        public string? SecondaryButtonBackgroundColor { get; set; }
+        /// <summary>
+        /// The text color of the client's secondary button in hex format.
+        /// </summary>
+        public string? SecondaryButtonTextColor { get; set; }
+        /// <summary>
         /// Flag indicating whether we use kiosk mode or not.
         /// </summary>
         public bool KioskMode { get; set; }

src/ui/UserPortal/app.vue

@@ -31,6 +31,11 @@ export default {
 				'--accent-color': this.appConfigStore.accentColor,
 				'--primary-text': this.appConfigStore.primaryText,
 				'--secondary-text': this.appConfigStore.secondaryText,
+				'--accent-text': this.appConfigStore.accentText,
+				'--primary-button-bg': this.appConfigStore.primaryButtonBg,
+				'--primary-button-text': this.appConfigStore.primaryButtonText,
+				'--secondary-button-bg': this.appConfigStore.secondaryButtonBg,
+				'--secondary-button-text': this.appConfigStore.secondaryButtonText,
 			};
 		},
 	},

src/ui/UserPortal/components/ChatInput.vue

@@ -10,7 +10,7 @@
 		/>
 		<Button
 			:disabled="disabled"
-			class="submit"
+			class="primary-button submit"
 			icon="pi pi-send"
 			label="Send"
 			@click="handleSend"
@@ -55,6 +55,12 @@ export default {
 	width: 100%;
 }
 
+.primary-button {
+	background-color: var(--primary-button-bg)!important;
+	border-color: var(--primary-button-bg)!important;
+	color: var(--primary-button-text)!important;
+}
+
 .pre-input {
 	flex: 0 0 10%;
 }

src/ui/UserPortal/components/ChatMessage.vue

@@ -17,7 +17,7 @@
 						:pt="{
 							label: {
 								style: {
-									color: message.sender === 'User' ? 'var(--primary-color)' : 'var(--accent-color)',
+									color: message.sender === 'User' ? 'var(--accent-text)' : 'var(--primary-text)',
 								},
 							},
 						}"

src/ui/UserPortal/components/ChatSidebar.vue

@@ -8,6 +8,7 @@
 				:icon="appStore.isSidebarClosed ? 'pi pi-arrow-right' : 'pi pi-arrow-left'"
 				size="small"
 				severity="secondary"
+				class="secondary-button"
 				@click="appStore.toggleSidebar"
 			/>
 		</div>
@@ -62,7 +63,7 @@
 			<div>
 				<span class="chat-sidebar__username">{{ accountName }}</span>
 				<Button
-					class="chat-sidebar__sign-out"
+					class="chat-sidebar__sign-out secondary-button"
 					icon="pi pi-sign-out"
 					label="Sign Out"
 					severity="secondary"
@@ -334,6 +335,12 @@ export default {
 	width: 100%;
 }
 
+.secondary-button {
+	background-color: var(--secondary-button-bg)!important;
+	border-color: var(--secondary-button-bg)!important;
+	color: var(--secondary-button-text)!important;
+}
+
 .chat-sidebar__username {
 	color: var(--primary-text);
 	font-weight: 600;

src/ui/UserPortal/components/NavBar.vue

@@ -10,6 +10,7 @@
 					:icon="appStore.isSidebarClosed ? 'pi pi-arrow-right' : 'pi pi-arrow-left'"
 					size="small"
 					severity="secondary"
+					class="secondary-button"
 					@click="appStore.toggleSidebar"
 				/>
 			</template>
@@ -244,6 +245,12 @@ export default {
 	margin-left: 24px;
 }
 
+.secondary-button {
+	background-color: var(--secondary-button-bg)!important;
+	border-color: var(--secondary-button-bg)!important;
+	color: var(--secondary-button-text)!important;
+}
+
 .header__dropdown {
 	display: flex;
 	align-items: center;

src/ui/UserPortal/server/api/config.ts

@@ -19,6 +19,11 @@ const allowedKeys = [
 	'FoundationaLLM:Branding:AccentColor',
 	'FoundationaLLM:Branding:PrimaryTextColor',
 	'FoundationaLLM:Branding:SecondaryTextColor',
+	'FoundationaLLM:Branding:AccentTextColor',
+	'FoundationaLLM:Branding:PrimaryButtonBackgroundColor',
+	'FoundationaLLM:Branding:PrimaryButtonTextColor',
+	'FoundationaLLM:Branding:SecondaryButtonBackgroundColor',
+	'FoundationaLLM:Branding:SecondaryButtonTextColor',
 	'FoundationaLLM:Chat:Entra:ClientId',
 	'FoundationaLLM:Chat:Entra:Instance',
 	'FoundationaLLM:Chat:Entra:TenantId',
@@ -61,7 +66,8 @@ export default defineEventHandler(async (event) => {
 	} catch (error) {
 		// Respond with a 404 (Not Found) if the key does not exist in the Azure config service.
 		console.error(`Failed to load config value for "${key}", please ensure it exists and is the correct format.`);
-		setResponseStatus(event, 404, `Config value "${key}" not found.`);
-		return '404';
+		//setResponseStatus(event, 404, `Config value "${key}" not found.`);
+		//return '404';
+		return null;
 	}
 });

src/ui/UserPortal/stores/appConfigStore.ts

@@ -22,6 +22,11 @@ export const useAppConfigStore = defineStore('appConfig', {
 		accentColor: null,
 		primaryText: null,
 		secondaryText: null,
+		accentText: null,
+		primaryButtonBg: null,
+		primaryButtonText: null,
+		secondaryButtonBg: null,
+		secondaryButtonText: null,
 
 		// Auth: These settings configure the MSAL authentication.
 		auth: {
@@ -49,6 +54,11 @@ export const useAppConfigStore = defineStore('appConfig', {
 				accentColor,
 				primaryText,
 				secondaryText,
+				accentText,
+				primaryButtonBg,
+				primaryButtonText,
+				secondaryButtonBg,
+				secondaryButtonText,
 				authClientId,
 				authInstance,
 				authTenantId,
@@ -68,6 +78,11 @@ export const useAppConfigStore = defineStore('appConfig', {
 				api.getConfigValue('FoundationaLLM:Branding:AccentColor'),
 				api.getConfigValue('FoundationaLLM:Branding:PrimaryTextColor'),
 				api.getConfigValue('FoundationaLLM:Branding:SecondaryTextColor'),
+				api.getConfigValue('FoundationaLLM:Branding:AccentTextColor'),
+				api.getConfigValue('FoundationaLLM:Branding:PrimaryButtonBackgroundColor'),
+				api.getConfigValue('FoundationaLLM:Branding:PrimaryButtonTextColor'),
+				api.getConfigValue('FoundationaLLM:Branding:SecondaryButtonBackgroundColor'),
+				api.getConfigValue('FoundationaLLM:Branding:SecondaryButtonTextColor'),
 				api.getConfigValue('FoundationaLLM:Chat:Entra:ClientId'),
 				api.getConfigValue('FoundationaLLM:Chat:Entra:Instance'),
 				api.getConfigValue('FoundationaLLM:Chat:Entra:TenantId'),
@@ -96,6 +111,11 @@ export const useAppConfigStore = defineStore('appConfig', {
 			this.accentColor = accentColor;
 			this.primaryText = primaryText;
 			this.secondaryText = secondaryText;
+			this.accentText = accentText;
+			this.primaryButtonBg = primaryButtonBg;
+			this.primaryButtonText = primaryButtonText;
+			this.secondaryButtonBg = secondaryButtonBg;
+			this.secondaryButtonText = secondaryButtonText;
 		},
 	},
 });