apply theme to new components

langgenius · Jun 24, 2024 · 97154db · 97154db
1 parent 0b86b69
commit 97154db
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 10 deletions.
diff --git a/web/app/components/app/overview/embedded/index.tsx b/web/app/components/app/overview/embedded/index.tsx
@@ -74,8 +74,8 @@ const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, classNam
   const [isCopied, setIsCopied] = useState<OptionStatus>({ iframe: false, scripts: false, chromePlugin: false })
 
   const { langeniusVersionInfo } = useAppContext()
-  const themeContext = useThemeContext()
-  themeContext.buildTheme(siteInfo?.chat_color_theme ?? '#1C64F2', siteInfo?.chat_color_theme_inverted ?? false)
+  const themeBuilder = useThemeContext()
+  themeBuilder.buildTheme(siteInfo?.chat_color_theme ?? '#1C64F2', siteInfo?.chat_color_theme_inverted ?? false)
   const isTestEnv = langeniusVersionInfo.current_env === 'TESTING' || langeniusVersionInfo.current_env === 'DEVELOPMENT'
   const onClickCopy = () => {
     if (option === 'chromePlugin') {
@@ -84,7 +84,7 @@ const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, classNam
         copy(splitUrl[1])
     }
     else {
-      copy(OPTION_MAP[option].getContent(appBaseUrl, accessToken, themeContext.theme?.primaryColor ?? '#1C64F2', isTestEnv))
+      copy(OPTION_MAP[option].getContent(appBaseUrl, accessToken, themeBuilder.theme?.primaryColor ?? '#1C64F2', isTestEnv))
     }
     setIsCopied({ ...isCopied, [option]: true })
   }
@@ -164,7 +164,7 @@ const Embedded = ({ siteInfo, isShow, onClose, appBaseUrl, accessToken, classNam
         </div>
         <div className="flex items-start justify-start w-full gap-2 p-3 overflow-x-auto">
           <div className="grow shrink basis-0 text-slate-700 text-[13px] leading-tight font-mono">
-            <pre className='select-text'>{OPTION_MAP[option].getContent(appBaseUrl, accessToken, themeContext.theme?.primaryColor ?? '#1C64F2', isTestEnv)}</pre>
+            <pre className='select-text'>{OPTION_MAP[option].getContent(appBaseUrl, accessToken, themeBuilder.theme?.primaryColor ?? '#1C64F2', isTestEnv)}</pre>
           </div>
         </div>
       </div>

diff --git a/web/app/components/base/chat/chat/chat-input.tsx b/web/app/components/base/chat/chat/chat-input.tsx
@@ -30,16 +30,20 @@ import {
   useDraggableUploader,
   useImageFiles,
 } from '@/app/components/base/image-uploader/hooks'
+import { ThemeBuilder } from '../embedded-chatbot/theme/theme-context'
+import { CssTransform } from '../embedded-chatbot/theme/utils'
 
 type ChatInputProps = {
   visionConfig?: VisionConfig
   speechToTextConfig?: EnableType
   onSend?: OnSend
+  themeBuilder: ThemeBuilder | null
 }
 const ChatInput: FC<ChatInputProps> = ({
   visionConfig,
   speechToTextConfig,
   onSend,
+  themeBuilder,
 }) => {
   const { appData } = useChatWithHistoryContext()
   const { t } = useTranslation()
@@ -112,14 +116,25 @@ const ChatInput: FC<ChatInputProps> = ({
     })
   }
 
+  const [isActiveIconFocused, setActiveIconFocused] = useState(false)
+
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
+  const sendIconThemeStyle = themeBuilder?.theme
+    ? {
+      color: (isActiveIconFocused || query || (query.trim() !== '')) ? themeBuilder.theme.primaryColor : '#d1d5db',
+    }
+    : {}
   const sendBtn = (
     <div
       className='group flex items-center justify-center w-8 h-8 rounded-lg hover:bg-[#EBF5FF] cursor-pointer'
+      onMouseEnter={() => setActiveIconFocused(true)}
+      onMouseLeave={() => setActiveIconFocused(false)}
       onClick={handleSend}
+      style={isActiveIconFocused ? CssTransform(themeBuilder?.theme?.chatBubbleColorStyle ?? '') : {}}
     >
       <Send03
+        style={sendIconThemeStyle}
         className={`
           w-5 h-5 text-gray-300 group-hover:text-primary-600
           ${!!query.trim() && 'text-primary-600'}

diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
@@ -31,6 +31,7 @@ import AgentLogModal from '@/app/components/base/agent-log-modal'
 import PromptLogModal from '@/app/components/base/prompt-log-modal'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import type { AppData } from '@/models/share'
+import { ThemeBuilder } from '../embedded-chatbot/theme/theme-context'
 
 export type ChatProps = {
   appData?: AppData
@@ -58,6 +59,7 @@ export type ChatProps = {
   chatAnswerContainerInner?: string
   hideProcessDetail?: boolean
   hideLogModal?: boolean
+  themeBuilder: ThemeBuilder | null
 }
 const Chat: FC<ChatProps> = ({
   appData,
@@ -85,6 +87,7 @@ const Chat: FC<ChatProps> = ({
   chatAnswerContainerInner,
   hideProcessDetail,
   hideLogModal,
+  themeBuilder
 }) => {
   const { t } = useTranslation()
   const { currentLogItem, setCurrentLogItem, showPromptLogModal, setShowPromptLogModal, showAgentLogModal, setShowAgentLogModal } = useAppStore(useShallow(state => ({
@@ -221,6 +224,7 @@ const Chat: FC<ChatProps> = ({
                     key={item.id}
                     item={item}
                     questionIcon={questionIcon}
+                    theme={themeBuilder?.theme}
                   />
                 )
               })
@@ -262,6 +266,7 @@ const Chat: FC<ChatProps> = ({
                   visionConfig={config?.file_upload?.image}
                   speechToTextConfig={config?.speech_to_text}
                   onSend={onSend}
+                  themeBuilder={themeBuilder}
                 />
               )
             }

diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
@@ -10,27 +10,36 @@ import { QuestionTriangle } from '@/app/components/base/icons/src/vender/solid/g
 import { User } from '@/app/components/base/icons/src/public/avatar'
 import { Markdown } from '@/app/components/base/markdown'
 import ImageGallery from '@/app/components/base/image-gallery'
+import { Theme } from '../embedded-chatbot/theme/theme-context'
+import { CssTransform } from '../embedded-chatbot/theme/utils'
 
 type QuestionProps = {
   item: ChatItem
   questionIcon?: ReactNode
+  theme: Theme | null | undefined
 }
 const Question: FC<QuestionProps> = ({
   item,
   questionIcon,
+  theme,
 }) => {
   const {
     content,
     message_files,
   } = item
 
   const imgSrcs = message_files?.length ? message_files.map(item => item.url) : []
-
   return (
     <div className='flex justify-end mb-2 last:mb-0 pl-10'>
       <div className='group relative mr-4'>
-        <QuestionTriangle className='absolute -right-2 top-0 w-2 h-3 text-[#D1E9FF]/50' />
-        <div className='px-4 py-3 bg-[#D1E9FF]/50 rounded-b-2xl rounded-tl-2xl text-sm text-gray-900'>
+        <QuestionTriangle
+          className='absolute -right-2 top-0 w-2 h-3 text-[#D1E9FF]/50'
+          style={theme ? { color: theme.chatBubbleColor } : {}}
+        />
+        <div
+          className='px-4 py-3 bg-[#D1E9FF]/50 rounded-b-2xl rounded-tl-2xl text-sm text-gray-900'
+          style={theme?.chatBubbleColorStyle ? CssTransform(theme.chatBubbleColorStyle) : {}}
+        >
           {
             !!imgSrcs.length && (
               <ImageGallery srcs={imgSrcs} />

diff --git a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@@ -32,6 +32,7 @@ const ChatWrapper = () => {
     appMeta,
     handleFeedback,
     currentChatInstanceRef,
+    themeBuilder,
   } = useEmbeddedChatbotContext()
   const appConfig = useMemo(() => {
     const config = appParams || {}
@@ -130,6 +131,7 @@ const ChatWrapper = () => {
       suggestedQuestions={suggestedQuestions}
       answerIcon={isDify() ? <LogoAvatar className='relative shrink-0' /> : null}
       hideProcessDetail
+      themeBuilder={themeBuilder}
     />
   )
 }

diff --git a/web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx b/web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx
@@ -9,6 +9,8 @@ import { MessageDotsCircle } from '@/app/components/base/icons/src/vender/solid/
 import { Edit02 } from '@/app/components/base/icons/src/vender/line/general'
 import { Star06 } from '@/app/components/base/icons/src/vender/solid/shapes'
 import LogoSite from '@/app/components/base/logo/logo-site'
+import { useThemeContext } from '../theme/theme-context'
+import { CssTransform } from '../theme/utils'
 
 const ConfigPanel = () => {
   const { t } = useTranslation()
@@ -22,6 +24,7 @@ const ConfigPanel = () => {
   const [collapsed, setCollapsed] = useState(true)
   const customConfig = appData?.custom_config
   const site = appData?.site
+  const themeBuilder = useThemeContext()
 
   return (
     <div className='flex flex-col max-h-[80%] w-full max-w-[720px]'>
@@ -34,6 +37,7 @@ const ConfigPanel = () => {
         )}
       >
         <div
+          style={CssTransform(themeBuilder.theme?.roundedBackgroundColorStyle ?? '')}
           className={`
             flex flex-wrap px-6 py-4 rounded-t-xl bg-indigo-25
             ${isMobile && '!px-4 !py-3'}
@@ -68,6 +72,7 @@ const ConfigPanel = () => {
                   {t('share.chat.configStatusDes')}
                 </div>
                 <Button
+                  styleCss={CssTransform(themeBuilder.theme?.backgroundButtonDefaultColorStyle ?? '')}
                   variant='secondary-accent'
                   size='small'
                   className='shrink-0'
@@ -96,6 +101,7 @@ const ConfigPanel = () => {
               <Form />
               <div className={cn('pl-[136px] flex items-center', isMobile && '!pl-0')}>
                 <Button
+                  styleCss={CssTransform(themeBuilder.theme?.backgroundButtonDefaultColorStyle ?? '')}
                   variant='primary'
                   className='mr-2'
                   onClick={() => {
@@ -119,6 +125,7 @@ const ConfigPanel = () => {
             <div className='p-6 rounded-b-xl'>
               <Form />
               <Button
+                styleCss={CssTransform(themeBuilder.theme?.backgroundButtonDefaultColorStyle ?? '')}
                 className={cn(inputsForms.length && !isMobile && 'ml-[136px]')}
                 variant='primary'
                 size='large'

diff --git a/web/app/components/base/chat/embedded-chatbot/context.tsx b/web/app/components/base/chat/embedded-chatbot/context.tsx
@@ -13,6 +13,7 @@ import type {
   AppMeta,
   ConversationItem,
 } from '@/models/share'
+import { ThemeBuilder } from './theme/theme-context'
 
 export type EmbeddedChatbotContextValue = {
   appInfoError?: any
@@ -40,6 +41,7 @@ export type EmbeddedChatbotContextValue = {
   appId?: string
   handleFeedback: (messageId: string, feedback: Feedback) => void
   currentChatInstanceRef: RefObject<{ handleStop: () => void }>
+  themeBuilder: ThemeBuilder | null
 }
 
 export const EmbeddedChatbotContext = createContext<EmbeddedChatbotContextValue>({
@@ -60,5 +62,6 @@ 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,6 +3,8 @@ 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 { CssTransform } from './theme/utils'
 
 export type IHeaderProps = {
   isMobile?: boolean
@@ -17,20 +19,22 @@ const Header: FC<IHeaderProps> = ({
   onCreateNewChat,
 }) => {
   const { t } = useTranslation()
+  const themeBuilder = useThemeContext()
   if (!isMobile)
     return null
 
   return (
     <div
       className={`
-        shrink-0 flex items-center justify-between h-14 px-4 bg-gray-100 
-        bg-gradient-to-r from-blue-600 to-sky-500
+        shrink-0 flex items-center justify-between h-14 px-4 
       `}
+      style={Object.assign({}, CssTransform(themeBuilder.theme?.backgroundHeaderColorStyle ?? ''), CssTransform(themeBuilder.theme?.headerBorderBottomStyle ?? '')) }
     >
       <div className="flex items-center space-x-2">
         {customerIcon}
         <div
           className={'text-sm font-bold text-white'}
+          style={CssTransform(themeBuilder.theme?.colorFontOnHeaderStyle ?? '')}
         >
           {title}
         </div>
@@ -43,7 +47,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" />
+          <RiRefreshLine className="h-4 w-4 text-sm font-bold text-white" color={themeBuilder.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
@@ -18,6 +18,7 @@ import LogoHeader from '@/app/components/base/logo/logo-embeded-chat-header'
 import Header from '@/app/components/base/chat/embedded-chatbot/header'
 import ConfigPanel from '@/app/components/base/chat/embedded-chatbot/config-panel'
 import ChatWrapper from '@/app/components/base/chat/embedded-chatbot/chat-wrapper'
+import { useThemeContext } from './theme/theme-context'
 
 const Chatbot = () => {
   const {
@@ -35,10 +36,13 @@ const Chatbot = () => {
   const customConfig = appData?.custom_config
   const site = appData?.site
 
+  const themeBuilder = useThemeContext()
+
   const difyIcon = <LogoHeader />
 
   useEffect(() => {
     if (site) {
+      themeBuilder.buildTheme(site.chat_color_theme, site.chat_color_theme_inverted)
       if (customConfig)
         document.title = `${site.title}`
       else
@@ -87,6 +91,7 @@ const Chatbot = () => {
 const EmbeddedChatbotWrapper = () => {
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
+  const themeBuilder = useThemeContext()
 
   const {
     appInfoError,
@@ -141,6 +146,7 @@ const EmbeddedChatbotWrapper = () => {
     appId,
     handleFeedback,
     currentChatInstanceRef,
+    themeBuilder,
   }}>
     <Chatbot />
   </EmbeddedChatbotContext.Provider>