fix: change chatbot avart to dify icon (#571)

web/app/components/app/chat/index.tsx

@@ -65,6 +65,7 @@ export type IChatProps = {
   isShowSuggestion?: boolean
   suggestionList?: string[]
   isShowSpeechToText?: boolean
+  answerIconClassName?: string
 }
 
 export type MessageMore = {
@@ -174,10 +175,11 @@ type IAnswerProps = {
   onSubmitAnnotation?: SubmitAnnotationFunc
   displayScene: DisplayScene
   isResponsing?: boolean
+  answerIconClassName?: string
 }
 
 // The component needs to maintain its own state to control whether to display input component
-const Answer: FC<IAnswerProps> = ({ item, feedbackDisabled = false, isHideFeedbackEdit = false, onFeedback, onSubmitAnnotation, displayScene = 'web', isResponsing }) => {
+const Answer: FC<IAnswerProps> = ({ item, feedbackDisabled = false, isHideFeedbackEdit = false, onFeedback, onSubmitAnnotation, displayScene = 'web', isResponsing, answerIconClassName }) => {
   const { id, content, more, feedback, adminFeedback, annotation: initAnnotation } = item
   const [showEdit, setShowEdit] = useState(false)
   const [loading, setLoading] = useState(false)
@@ -292,7 +294,7 @@ const Answer: FC<IAnswerProps> = ({ item, feedbackDisabled = false, isHideFeedba
   return (
     <div key={id}>
       <div className='flex items-start'>
-        <div className={`${s.answerIcon} w-10 h-10 shrink-0`}>
+        <div className={`${s.answerIcon} ${answerIconClassName} w-10 h-10 shrink-0`}>
           {isResponsing
             && <div className={s.typeingIcon}>
               <LoadingAnim type='avatar' />
@@ -428,6 +430,7 @@ const Chat: FC<IChatProps> = ({
   isShowSuggestion,
   suggestionList,
   isShowSpeechToText,
+  answerIconClassName,
 }) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
@@ -520,6 +523,7 @@ const Chat: FC<IChatProps> = ({
               onSubmitAnnotation={onSubmitAnnotation}
               displayScene={displayScene ?? 'web'}
               isResponsing={isResponsing && isLast}
+              answerIconClassName={answerIconClassName}
             />
           }
           return <Question key={item.id} id={item.id} content={item.content} more={item.more} useCurrentUserAvatar={useCurrentUserAvatar} />

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

@@ -552,6 +552,10 @@ const Main: FC<IMainProps> = ({
     )
   }
 
+  const difyIcon = (
+    <div className={s.difyHeader}></div>
+  )
+
   if (appUnavailable)
     return <AppUnavailable isUnknwonReason={isUnknwonReason} />
 
@@ -562,7 +566,8 @@ const Main: FC<IMainProps> = ({
     <div>
       <Header
         title={siteInfo.title}
-        icon={siteInfo.icon || ''}
+        icon=''
+        customerIcon={difyIcon}
         icon_background={siteInfo.icon_background}
         isEmbedScene={true}
         isMobile={isMobile}
@@ -624,6 +629,7 @@ const Main: FC<IMainProps> = ({
                     suggestionList={suggestQuestions}
                     displayScene='web'
                     isShowSpeechToText={speechToTextConfig?.enabled}
+                    answerIconClassName={s.difyIcon}
                   />
                 </div>
               </div>)

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

@@ -1,3 +1,14 @@
 .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/index.tsx

@@ -307,7 +307,7 @@ const Welcome: FC<IWelcomeProps> = ({
   }
 
   return (
-    <div className='relative mobile:min-h-[48px] tablet:min-h-[64px]'>
+    <div className='relative tablet:min-h-[64px]'>
       {/* {hasSetInputs && renderHeader()} */}
       <div className='mx-auto pc:w-[794px] max-w-full mobile:w-full px-3.5'>
         {/*  Has't set inputs  */}

web/app/components/share/header.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import AppIcon from '@/app/components/base/app-icon'
 export type IHeaderProps = {
   title: string
+  customerIcon?: React.ReactNode
   icon: string
   icon_background: string
   isMobile?: boolean
@@ -11,6 +12,7 @@ export type IHeaderProps = {
 const Header: FC<IHeaderProps> = ({
   title,
   isMobile,
+  customerIcon,
   icon,
   icon_background,
   isEmbedScene = false,
@@ -25,7 +27,7 @@ const Header: FC<IHeaderProps> = ({
       >
         <div></div>
         <div className="flex items-center space-x-2">
-          <AppIcon size="small" icon={icon} background={icon_background} />
+          {customerIcon || <AppIcon size="small" icon={icon} background={icon_background} />}
           <div
             className={`text-sm text-gray-800 font-bold ${
               isEmbedScene ? 'text-white' : ''