feat: allow users to use the app icon as the answer icon (#7888)

Co-authored-by: crazywoola <427733928@qq.com>

web/app/components/base/answer-icon/index.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import type { FC } from 'react'
+import { init } from 'emoji-mart'
+import data from '@emoji-mart/data'
+import classNames from '@/utils/classnames'
+import type { AppIconType } from '@/types/app'
+
+init({ data })
+
+export type AnswerIconProps = {
+  iconType?: AppIconType | null
+  icon?: string | null
+  background?: string | null
+  imageUrl?: string | null
+}
+
+const AnswerIcon: FC<AnswerIconProps> = ({
+  iconType,
+  icon,
+  background,
+  imageUrl,
+}) => {
+  const wrapperClassName = classNames(
+    'flex',
+    'items-center',
+    'justify-center',
+    'w-full',
+    'h-full',
+    'rounded-full',
+    'border-[0.5px]',
+    'border-black/5',
+    'text-xl',
+  )
+  const isValidImageIcon = iconType === 'image' && imageUrl
+  return <div
+    className={wrapperClassName}
+    style={{ background: background || '#D5F5F6' }}
+  >
+    {isValidImageIcon
+      ? <img src={imageUrl} className="w-full h-full rounded-full" alt="answer icon" />
+      : (icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />
+    }
+  </div>
+}
+
+export default AnswerIcon

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

@@ -13,6 +13,7 @@ import {
   getUrl,
   stopChatMessageResponding,
 } from '@/service/share'
+import AnswerIcon from '@/app/components/base/answer-icon'
 
 const ChatWrapper = () => {
   const {
@@ -128,6 +129,15 @@ const ChatWrapper = () => {
     isMobile,
   ])
 
+  const answerIcon = (appData?.site && appData.site.use_icon_as_answer_icon)
+    ? <AnswerIcon
+      iconType={appData.site.icon_type}
+      icon={appData.site.icon}
+      background={appData.site.icon_background}
+      imageUrl={appData.site.icon_url}
+    />
+    : null
+
   return (
     <Chat
       appData={appData}
@@ -143,6 +153,7 @@ const ChatWrapper = () => {
       allToolIcons={appMeta?.tool_icons || {}}
       onFeedback={handleFeedback}
       suggestedQuestions={suggestedQuestions}
+      answerIcon={answerIcon}
       hideProcessDetail
       themeBuilder={themeBuilder}
     />

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

@@ -65,6 +65,7 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
           prompt_public: false,
           copyright: '',
           show_workflow_steps: true,
+          use_icon_as_answer_icon: app.use_icon_as_answer_icon,
         },
         plan: 'basic',
       } as AppData

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

@@ -22,6 +22,7 @@ import Citation from '@/app/components/base/chat/chat/citation'
 import { EditTitle } from '@/app/components/app/annotation/edit-annotation-modal/edit-item'
 import type { Emoji } from '@/app/components/tools/types'
 import type { AppData } from '@/models/share'
+import AnswerIcon from '@/app/components/base/answer-icon'
 
 type AnswerProps = {
   item: ChatItem
@@ -89,11 +90,7 @@ const Answer: FC<AnswerProps> = ({
     <div className='flex mb-2 last:mb-0'>
       <div className='shrink-0 relative w-10 h-10'>
         {
-          answerIcon || (
-            <div className='flex items-center justify-center w-full h-full rounded-full bg-[#d5f5f6] border-[0.5px] border-black/5 text-xl'>
-              🤖
-            </div>
-          )
+          answerIcon || <AnswerIcon />
         }
         {
           responding && (

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

@@ -15,6 +15,7 @@ import {
   stopChatMessageResponding,
 } from '@/service/share'
 import LogoAvatar from '@/app/components/base/logo/logo-embeded-chat-avatar'
+import AnswerIcon from '@/app/components/base/answer-icon'
 
 const ChatWrapper = () => {
   const {
@@ -114,6 +115,17 @@ const ChatWrapper = () => {
     return null
   }, [currentConversationId, inputsForms, isMobile])
 
+  const answerIcon = isDify()
+    ? <LogoAvatar className='relative shrink-0' />
+    : (appData?.site && appData.site.use_icon_as_answer_icon)
+      ? <AnswerIcon
+        iconType={appData.site.icon_type}
+        icon={appData.site.icon}
+        background={appData.site.icon_background}
+        imageUrl={appData.site.icon_url}
+      />
+      : null
+
   return (
     <Chat
       appData={appData}
@@ -129,7 +141,7 @@ const ChatWrapper = () => {
       allToolIcons={appMeta?.tool_icons || {}}
       onFeedback={handleFeedback}
       suggestedQuestions={suggestedQuestions}
-      answerIcon={isDify() ? <LogoAvatar className='relative shrink-0' /> : null}
+      answerIcon={answerIcon}
       hideProcessDetail
       themeBuilder={themeBuilder}
     />