polish

langgenius · Jun 24, 2024 · 4f6f2f1 · 4f6f2f1
1 parent af4be6b
commit 4f6f2f1
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 24 deletions.
diff --git a/web/app/components/app/overview/embedded/index.tsx b/web/app/components/app/overview/embedded/index.tsx
@@ -75,7 +75,7 @@ const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, classNam
 
   const { langeniusVersionInfo } = useAppContext()
   const themeBuilder = useThemeContext()
-  themeBuilder.buildTheme(siteInfo?.chat_color_theme ?? '#1C64F2', siteInfo?.chat_color_theme_inverted ?? false)
+  themeBuilder.buildTheme(siteInfo?.chat_color_theme ?? null, siteInfo?.chat_color_theme_inverted ?? false)
   const isTestEnv = langeniusVersionInfo.current_env === 'TESTING' || langeniusVersionInfo.current_env === 'DEVELOPMENT'
   const onClickCopy = () => {
     if (option === 'chromePlugin') {

diff --git a/web/app/components/base/chat/chat/chat-input.tsx b/web/app/components/base/chat/chat/chat-input.tsx
@@ -30,20 +30,20 @@ import {
   useDraggableUploader,
   useImageFiles,
 } from '@/app/components/base/image-uploader/hooks'
-import { ThemeBuilder } from '../embedded-chatbot/theme/theme-context'
+import { Theme } from '../embedded-chatbot/theme/theme-context'
 import { CssTransform } from '../embedded-chatbot/theme/utils'
 
 type ChatInputProps = {
   visionConfig?: VisionConfig
   speechToTextConfig?: EnableType
   onSend?: OnSend
-  themeBuilder: ThemeBuilder | null
+  theme?: Theme | null
 }
 const ChatInput: FC<ChatInputProps> = ({
   visionConfig,
   speechToTextConfig,
   onSend,
-  themeBuilder,
+  theme,
 }) => {
   const { appData } = useChatWithHistoryContext()
   const { t } = useTranslation()
@@ -120,9 +120,9 @@ const ChatInput: FC<ChatInputProps> = ({
 
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
-  const sendIconThemeStyle = themeBuilder?.theme
+  const sendIconThemeStyle = theme
     ? {
-      color: (isActiveIconFocused || query || (query.trim() !== '')) ? themeBuilder.theme.primaryColor : '#d1d5db',
+      color: (isActiveIconFocused || query || (query.trim() !== '')) ? theme.primaryColor : '#d1d5db',
     }
     : {}
   const sendBtn = (
@@ -131,7 +131,7 @@ const ChatInput: FC<ChatInputProps> = ({
       onMouseEnter={() => setActiveIconFocused(true)}
       onMouseLeave={() => setActiveIconFocused(false)}
       onClick={handleSend}
-      style={isActiveIconFocused ? CssTransform(themeBuilder?.theme?.chatBubbleColorStyle ?? '') : {}}
+      style={isActiveIconFocused ? CssTransform(theme?.chatBubbleColorStyle ?? '') : {}}
     >
       <Send03
         style={sendIconThemeStyle}

diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
@@ -59,8 +59,9 @@ export type ChatProps = {
   chatAnswerContainerInner?: string
   hideProcessDetail?: boolean
   hideLogModal?: boolean
-  themeBuilder: ThemeBuilder | null
+  themeBuilder?: ThemeBuilder
 }
+
 const Chat: FC<ChatProps> = ({
   appData,
   config,
@@ -266,7 +267,7 @@ const Chat: FC<ChatProps> = ({
                   visionConfig={config?.file_upload?.image}
                   speechToTextConfig={config?.speech_to_text}
                   onSend={onSend}
-                  themeBuilder={themeBuilder}
+                  theme={themeBuilder?.theme}
                 />
               )
             }

diff --git a/web/app/components/base/chat/embedded-chatbot/context.tsx b/web/app/components/base/chat/embedded-chatbot/context.tsx
@@ -41,7 +41,7 @@ export type EmbeddedChatbotContextValue = {
   appId?: string
   handleFeedback: (messageId: string, feedback: Feedback) => void
   currentChatInstanceRef: RefObject<{ handleStop: () => void }>
-  themeBuilder: ThemeBuilder | null
+  themeBuilder?: ThemeBuilder
 }
 
 export const EmbeddedChatbotContext = createContext<EmbeddedChatbotContextValue>({
@@ -62,6 +62,5 @@ export const EmbeddedChatbotContext = createContext<EmbeddedChatbotContextValue>
   isInstalledApp: false,
   handleFeedback: () => {},
   currentChatInstanceRef: { current: { handleStop: () => {} } },
-  themeBuilder: null,
 })
 export const useEmbeddedChatbotContext = () => useContext(EmbeddedChatbotContext)
diff --git a/web/app/components/base/chat/embedded-chatbot/header.tsx b/web/app/components/base/chat/embedded-chatbot/header.tsx
@@ -3,23 +3,29 @@ import React from 'react'
 import { RiRefreshLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
-import { useThemeContext } from './theme/theme-context'
+import { Theme } from './theme/theme-context'
 import { CssTransform } from './theme/utils'
 
+
 export type IHeaderProps = {
   isMobile?: boolean
   customerIcon?: React.ReactNode
   title: string
+  theme?: Theme
+  // icon: string
+  // icon_background: string
   onCreateNewChat?: () => void
 }
 const Header: FC<IHeaderProps> = ({
   isMobile,
   customerIcon,
   title,
+  theme,
+  // icon,
+  // icon_background,
   onCreateNewChat,
 }) => {
   const { t } = useTranslation()
-  const themeBuilder = useThemeContext()
   if (!isMobile)
     return null
 
@@ -28,13 +34,13 @@ const Header: FC<IHeaderProps> = ({
       className={`
         shrink-0 flex items-center justify-between h-14 px-4 
       `}
-      style={Object.assign({}, CssTransform(themeBuilder.theme?.backgroundHeaderColorStyle ?? ''), CssTransform(themeBuilder.theme?.headerBorderBottomStyle ?? '')) }
+      style={Object.assign({}, CssTransform(theme?.backgroundHeaderColorStyle ?? ''), CssTransform(theme?.headerBorderBottomStyle ?? '')) }
     >
       <div className="flex items-center space-x-2">
         {customerIcon}
         <div
           className={'text-sm font-bold text-white'}
-          style={CssTransform(themeBuilder.theme?.colorFontOnHeaderStyle ?? '')}
+          style={CssTransform(theme?.colorFontOnHeaderStyle ?? '')}
         >
           {title}
         </div>
@@ -47,7 +53,7 @@ const Header: FC<IHeaderProps> = ({
         <div className='flex cursor-pointer hover:rounded-lg hover:bg-black/5 w-8 h-8 items-center justify-center' onClick={() => {
           onCreateNewChat?.()
         }}>
-          <RiRefreshLine className="h-4 w-4 text-sm font-bold text-white" color={themeBuilder.theme?.colorPathOnHeader}/>
+          <RiRefreshLine className="h-4 w-4 text-sm font-bold text-white" color={theme?.colorPathOnHeader}/>
         </div>
       </Tooltip>
     </div>

diff --git a/web/app/components/base/chat/embedded-chatbot/index.tsx b/web/app/components/base/chat/embedded-chatbot/index.tsx
@@ -30,19 +30,18 @@ const Chatbot = () => {
     showConfigPanelBeforeChat,
     appChatListDataLoading,
     handleNewConversation,
+    themeBuilder,
   } = useEmbeddedChatbotContext()
 
   const chatReady = (!showConfigPanelBeforeChat || !!appPrevChatList.length)
   const customConfig = appData?.custom_config
   const site = appData?.site
 
-  const themeBuilder = useThemeContext()
-
   const difyIcon = <LogoHeader />
 
   useEffect(() => {
+    themeBuilder?.buildTheme(site?.chat_color_theme, site?.chat_color_theme_inverted)
     if (site) {
-      themeBuilder.buildTheme(site.chat_color_theme, site.chat_color_theme_inverted)
       if (customConfig)
         document.title = `${site.title}`
       else
@@ -67,6 +66,7 @@ const Chatbot = () => {
         isMobile={isMobile}
         title={site?.title || ''}
         customerIcon={isDify() ? difyIcon : ''}
+        theme={themeBuilder?.theme}
         onCreateNewChat={handleNewConversation}
       />
       <div className='flex bg-white overflow-hidden'>

diff --git a/web/app/components/base/chat/embedded-chatbot/theme/theme-context.ts b/web/app/components/base/chat/embedded-chatbot/theme/theme-context.ts
@@ -44,17 +44,24 @@ export class Theme {
 }
 
 export class ThemeBuilder {
-  public theme: Theme | null = null
+  private _theme?: Theme
   private buildChecker = false
 
+  public get theme() {
+    if (this._theme === undefined)
+      throw new Error('The theme should be built first and then accessed')
+    else
+      return this._theme
+  }
+
   public buildTheme(chatColorTheme: string | null = null, chatColorThemeInverted = false) {
     if (!this.buildChecker) {
-      this.theme = new Theme(chatColorTheme, chatColorThemeInverted)
+      this._theme = new Theme(chatColorTheme, chatColorThemeInverted)
       this.buildChecker = true
     }
     else {
       if (this.theme?.chatColorTheme !== chatColorTheme || this.theme?.chatColorThemeInverted !== chatColorThemeInverted) {
-        this.theme = new Theme(chatColorTheme, chatColorThemeInverted)
+        this._theme = new Theme(chatColorTheme, chatColorThemeInverted)
         this.buildChecker = true
       }
     }

diff --git a/web/models/share.ts b/web/models/share.ts
@@ -11,8 +11,8 @@ export type ConversationItem = {
 
 export type SiteInfo = {
   title: string
-  chat_color_theme: string
-  chat_color_theme_inverted: boolean
+  chat_color_theme?: string
+  chat_color_theme_inverted?: boolean
   icon?: string
   icon_background?: string
   description?: string