Fix: webapp color theme (#6908)

web/app/components/base/chat/chat-with-history/chat-wrapper.tsx

@@ -30,6 +30,7 @@ const ChatWrapper = () => {
     handleFeedback,
     currentChatInstanceRef,
     appData,
+    themeBuilder,
   } = useChatWithHistoryContext()
   const appConfig = useMemo(() => {
     const config = appParams || {}
@@ -143,6 +144,7 @@ const ChatWrapper = () => {
       onFeedback={handleFeedback}
       suggestedQuestions={suggestedQuestions}
       hideProcessDetail
+      themeBuilder={themeBuilder}
     />
   )
 }

web/app/components/base/chat/chat-with-history/context.tsx

@@ -8,6 +8,7 @@ import type {
   ChatItem,
   Feedback,
 } from '../types'
+import type { ThemeBuilder } from '../embedded-chatbot/theme/theme-context'
 import type {
   AppConversationData,
   AppData,
@@ -46,6 +47,7 @@ export type ChatWithHistoryContextValue = {
   appId?: string
   handleFeedback: (messageId: string, feedback: Feedback) => void
   currentChatInstanceRef: RefObject<{ handleStop: () => void }>
+  themeBuilder?: ThemeBuilder
 }
 
 export const ChatWithHistoryContext = createContext<ChatWithHistoryContextValue>({

web/app/components/base/chat/chat-with-history/index.tsx

@@ -4,6 +4,7 @@ import {
   useState,
 } from 'react'
 import { useAsyncEffect } from 'ahooks'
+import { useThemeContext } from '../embedded-chatbot/theme/theme-context'
 import {
   ChatWithHistoryContext,
   useChatWithHistoryContext,
@@ -34,6 +35,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
     appChatListDataLoading,
     chatShouldReloadKey,
     isMobile,
+    themeBuilder,
   } = useChatWithHistoryContext()
 
   const chatReady = (!showConfigPanelBeforeChat || !!appPrevChatList.length)
@@ -41,13 +43,14 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
   const site = appData?.site
 
   useEffect(() => {
+    themeBuilder?.buildTheme(site?.chat_color_theme, site?.chat_color_theme_inverted)
     if (site) {
       if (customConfig)
         document.title = `${site.title}`
       else
         document.title = `${site.title} - Powered by Dify`
     }
-  }, [site, customConfig])
+  }, [site, customConfig, themeBuilder])
 
   if (appInfoLoading) {
     return (
@@ -106,6 +109,7 @@ const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
 }) => {
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
+  const themeBuilder = useThemeContext()
 
   const {
     appInfoError,
@@ -171,6 +175,7 @@ const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
       appId,
       handleFeedback,
       currentChatInstanceRef,
+      themeBuilder,
     }}>
       <ChatWithHistory className={className} />
     </ChatWithHistoryContext.Provider>

web/app/components/base/chat/embedded-chatbot/index.tsx

@@ -51,7 +51,7 @@ const Chatbot = () => {
       else
         document.title = `${site.title} - Powered by Dify`
     }
-  }, [site, customConfig])
+  }, [site, customConfig, themeBuilder])
 
   if (appInfoLoading) {
     return (