[fix] Flashing Contoso logo when custom logo is present (#962)

Co-authored-by: Ian Seabock (Centific Technologies Inc) <[email protected]>

frontend/src/pages/chat/Chat.tsx

@@ -63,6 +63,7 @@ const Chat = () => {
   const [clearingChat, setClearingChat] = useState<boolean>(false)
   const [hideErrorDialog, { toggle: toggleErrorDialog }] = useBoolean(true)
   const [errorMsg, setErrorMsg] = useState<ErrorMessage | null>()
+  const [logo, setLogo] = useState('')
 
   const errorDialogContentProps = {
     type: DialogType.close,
@@ -104,6 +105,12 @@ const Chat = () => {
     }, 500)
   }
 
+  useEffect(() => {
+    if (!appStateContext?.state.isLoading) {
+      setLogo(ui?.chat_logo || ui?.logo || Contoso)
+    }
+  }, [appStateContext?.state.isLoading])
+
   useEffect(() => {
     setIsLoading(appStateContext?.state.chatHistoryLoadingState === ChatHistoryLoadingState.Loading)
   }, [appStateContext?.state.chatHistoryLoadingState])
@@ -766,7 +773,7 @@ const Chat = () => {
           <div className={styles.chatContainer}>
             {!messages || messages.length < 1 ? (
               <Stack className={styles.chatEmptyState}>
-                <img src={ui?.chat_logo ? ui.chat_logo : Contoso} className={styles.chatIcon} aria-hidden="true" />
+                <img src={logo} className={styles.chatIcon} aria-hidden="true" />
                 <h1 className={styles.chatEmptyStateTitle}>{ui?.chat_title}</h1>
                 <h2 className={styles.chatEmptyStateSubtitle}>{ui?.chat_description}</h2>
               </Stack>

frontend/src/pages/layout/Layout.tsx

@@ -17,6 +17,7 @@ const Layout = () => {
   const [shareLabel, setShareLabel] = useState<string | undefined>('Share')
   const [hideHistoryLabel, setHideHistoryLabel] = useState<string>('Hide chat history')
   const [showHistoryLabel, setShowHistoryLabel] = useState<string>('Show chat history')
+  const [logo, setLogo] = useState('')
   const appStateContext = useContext(AppStateContext)
   const ui = appStateContext?.state.frontendSettings?.ui
 
@@ -39,6 +40,12 @@ const Layout = () => {
     appStateContext?.dispatch({ type: 'TOGGLE_CHAT_HISTORY' })
   }
 
+  useEffect(() => {
+    if (!appStateContext?.state.isLoading) {
+      setLogo(ui?.logo || Contoso)
+    }
+  }, [appStateContext?.state.isLoading])
+
   useEffect(() => {
     if (copyClicked) {
       setCopyText('Copied URL')
@@ -71,7 +78,7 @@ const Layout = () => {
       <header className={styles.header} role={'banner'}>
         <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
           <Stack horizontal verticalAlign="center">
-            <img src={ui?.logo ? ui.logo : Contoso} className={styles.headerIcon} aria-hidden="true" alt="" />
+            <img src={logo} className={styles.headerIcon} aria-hidden="true" alt="" />
             <Link to="/" className={styles.headerTitleContainer}>
               <h1 className={styles.headerTitle}>{ui?.title}</h1>
             </Link>

frontend/src/state/AppProvider.tsx

@@ -1,5 +1,9 @@
-import React, { createContext, ReactNode, useEffect, 
-  useReducer } from 'react'
+import React, {
+  createContext,
+  ReactNode,
+  useEffect,
+  useReducer
+} from 'react'
 
 import {
   ChatHistoryLoadingState,
@@ -24,6 +28,7 @@ export interface AppState {
   currentChat: Conversation | null
   frontendSettings: FrontendSettings | null
   feedbackState: { [answerId: string]: Feedback.Neutral | Feedback.Positive | Feedback.Negative }
+  isLoading: boolean;
 }
 
 export type Action =
@@ -40,9 +45,9 @@ export type Action =
   | { type: 'FETCH_CHAT_HISTORY'; payload: Conversation[] | null }
   | { type: 'FETCH_FRONTEND_SETTINGS'; payload: FrontendSettings | null }
   | {
-      type: 'SET_FEEDBACK_STATE'
-      payload: { answerId: string; feedback: Feedback.Positive | Feedback.Negative | Feedback.Neutral }
-    }
+    type: 'SET_FEEDBACK_STATE'
+    payload: { answerId: string; feedback: Feedback.Positive | Feedback.Negative | Feedback.Neutral }
+  }
   | { type: 'GET_FEEDBACK_STATE'; payload: string }
 
 const initialState: AppState = {
@@ -56,14 +61,15 @@ const initialState: AppState = {
     status: CosmosDBStatus.NotConfigured
   },
   frontendSettings: null,
-  feedbackState: {}
+  feedbackState: {},
+  isLoading: true
 }
 
 export const AppStateContext = createContext<
   | {
-      state: AppState
-      dispatch: React.Dispatch<Action>
-    }
+    state: AppState
+    dispatch: React.Dispatch<Action>
+  }
   | undefined
 >(undefined)
 

frontend/src/state/AppReducer.tsx

@@ -65,7 +65,7 @@ export const appStateReducer = (state: AppState, action: Action): AppState => {
     case 'SET_COSMOSDB_STATUS':
       return { ...state, isCosmosDBAvailable: action.payload }
     case 'FETCH_FRONTEND_SETTINGS':
-      return { ...state, frontendSettings: action.payload }
+      return { ...state, isLoading: false, frontendSettings: action.payload }
     case 'SET_FEEDBACK_STATE':
       return {
         ...state,