diff --git a/web/app/components/app/chat/index.tsx b/web/app/components/app/chat/index.tsx index 9dcf37399..4be9b424d 100644 --- a/web/app/components/app/chat/index.tsx +++ b/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 = ({ item, feedbackDisabled = false, isHideFeedbackEdit = false, onFeedback, onSubmitAnnotation, displayScene = 'web', isResponsing }) => { +const Answer: FC = ({ 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 = ({ item, feedbackDisabled = false, isHideFeedba return (
-
+
{isResponsing &&
@@ -428,6 +430,7 @@ const Chat: FC = ({ isShowSuggestion, suggestionList, isShowSpeechToText, + answerIconClassName, }) => { const { t } = useTranslation() const { notify } = useContext(ToastContext) @@ -520,6 +523,7 @@ const Chat: FC = ({ onSubmitAnnotation={onSubmitAnnotation} displayScene={displayScene ?? 'web'} isResponsing={isResponsing && isLast} + answerIconClassName={answerIconClassName} /> } return diff --git a/web/app/components/share/chatbot/icons/dify-header.svg b/web/app/components/share/chatbot/icons/dify-header.svg new file mode 100644 index 000000000..4e4f2fa24 --- /dev/null +++ b/web/app/components/share/chatbot/icons/dify-header.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/app/components/share/chatbot/icons/dify.svg b/web/app/components/share/chatbot/icons/dify.svg new file mode 100644 index 000000000..2fc6464b4 --- /dev/null +++ b/web/app/components/share/chatbot/icons/dify.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/web/app/components/share/chatbot/index.tsx b/web/app/components/share/chatbot/index.tsx index d48767683..c8bf4547b 100644 --- a/web/app/components/share/chatbot/index.tsx +++ b/web/app/components/share/chatbot/index.tsx @@ -552,6 +552,10 @@ const Main: FC = ({ ) } + const difyIcon = ( +
+ ) + if (appUnavailable) return @@ -562,7 +566,8 @@ const Main: FC = ({
= ({ suggestionList={suggestQuestions} displayScene='web' isShowSpeechToText={speechToTextConfig?.enabled} + answerIconClassName={s.difyIcon} />
) diff --git a/web/app/components/share/chatbot/style.module.css b/web/app/components/share/chatbot/style.module.css index 895860c21..e866feef3 100644 --- a/web/app/components/share/chatbot/style.module.css +++ b/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; } \ No newline at end of file diff --git a/web/app/components/share/chatbot/welcome/index.tsx b/web/app/components/share/chatbot/welcome/index.tsx index 2e440231e..bd170a403 100644 --- a/web/app/components/share/chatbot/welcome/index.tsx +++ b/web/app/components/share/chatbot/welcome/index.tsx @@ -307,7 +307,7 @@ const Welcome: FC = ({ } return ( -
+
{/* {hasSetInputs && renderHeader()} */}
{/* Has't set inputs */} diff --git a/web/app/components/share/header.tsx b/web/app/components/share/header.tsx index 39e532523..a326970a1 100644 --- a/web/app/components/share/header.tsx +++ b/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 = ({ title, isMobile, + customerIcon, icon, icon_background, isEmbedScene = false, @@ -25,7 +27,7 @@ const Header: FC = ({ >
- + {customerIcon || }