feat: logo (#1356)

web/app/components/share/chat/welcome/massive-component.tsx

@@ -9,6 +9,7 @@ import {
 import s from './style.module.css'
 import type { SiteInfo } from '@/models/share'
 import Button from '@/app/components/base/button'
+import LogoSite from '@/app/components/base/logo/logo-site'
 
 export const AppInfo: FC<{ siteInfo: SiteInfo }> = ({ siteInfo }) => {
   return (
@@ -69,5 +70,5 @@ export const EditBtn = ({ className, onClick }: { className?: string; onClick: (
 }
 
 export const FootLogo = () => (
-  <div className={s.logo} />
+  <LogoSite className='!h-5' />
 )

web/app/components/share/chat/welcome/style.module.css

@@ -19,11 +19,4 @@
 
 .customBtn {
   width: 136px;
-}
-
-.logo {
-  width: 48px;
-  height: 20px;
-  background: url(./icons/logo.png) center center no-repeat;
-  background-size: contain;
 }

web/app/components/share/chatbot/index.tsx

@@ -26,6 +26,8 @@ import { replaceStringWithValues } from '@/app/components/app/configuration/prom
 import { userInputsFormToPromptVariables } from '@/utils/model-config'
 import type { InstalledApp } from '@/models/explore'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import LogoHeader from '@/app/components/base/logo/logo-embeded-chat-header'
+import LogoAvatar from '@/app/components/base/logo/logo-embeded-chat-avatar'
 
 export type IMainProps = {
   isInstalledApp?: boolean
@@ -488,7 +490,7 @@ const Main: FC<IMainProps> = ({
   }
 
   const difyIcon = (
-    <div className={s.difyHeader}></div>
+    <LogoHeader />
   )
 
   if (appUnavailable)
@@ -567,7 +569,7 @@ const Main: FC<IMainProps> = ({
                     suggestionList={suggestQuestions}
                     displayScene='web'
                     isShowSpeechToText={speechToTextConfig?.enabled}
-                    answerIconClassName={s.difyIcon}
+                    answerIcon={<LogoAvatar className='relative shrink-0' />}
                   />
                 </div>
               </div>)

web/app/components/share/chatbot/style.module.css

@@ -1,14 +1,3 @@
 .installedApp {
   height: calc(100vh - 74px);
-}
-
-.difyIcon {
-  background-image: url(./icons/dify.svg);
-}
-
-.difyHeader {
-  width: 24px;
-  height: 24px;
-  background: url(./icons/dify-header.svg) center center no-repeat;
-  background-size: contain;
 }

web/app/components/share/chatbot/welcome/massive-component.tsx

@@ -9,6 +9,7 @@ import {
 import s from './style.module.css'
 import type { SiteInfo } from '@/models/share'
 import Button from '@/app/components/base/button'
+import LogoSite from '@/app/components/base/logo/logo-site'
 
 export const AppInfo: FC<{ siteInfo: SiteInfo }> = ({ siteInfo }) => {
   const { t } = useTranslation()
@@ -70,5 +71,5 @@ export const EditBtn = ({ className, onClick }: { className?: string; onClick: (
 }
 
 export const FootLogo = () => (
-  <div className={s.logo} />
+  <LogoSite className='!h-5' />
 )

web/app/components/share/chatbot/welcome/style.module.css

@@ -19,11 +19,4 @@
 
 .customBtn {
   width: 136px;
-}
-
-.logo {
-  width: 48px;
-  height: 20px;
-  background: url(./icons/logo.png) center center no-repeat;
-  background-size: contain;
 }