admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix：webapp UI issues (#15601)

Browse Source
This commit is contained in:
KVOJJJin
2025-03-13 14:23:41 +08:00
committed by GitHub
parent 5e035a4209
commit efebbffe96
17 changed files with 182 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,6 +21,8 @@ import {
import AppIcon from '@/app/components/base/app-icon'
import LogoAvatar from '@/app/components/base/logo/logo-embedded-chat-avatar'
import AnswerIcon from '@/app/components/base/answer-icon'
import SuggestedQuestions from '@/app/components/base/chat/chat/answer/suggested-questions'
import { Markdown } from '@/app/components/base/markdown'
import cn from '@/utils/classnames'
const ChatWrapper = () => {
@@ -41,6 +43,9 @@ const ChatWrapper = () => {
handleFeedback,
currentChatInstanceRef,
themeBuilder,
clearChatList,
setClearChatList,
setIsResponding,
} = useEmbeddedChatbotContext()
const appConfig = useMemo(() => {
const config = appParams || {}
@@ -60,7 +65,7 @@ const ChatWrapper = () => {
setTargetMessageId,
handleSend,
handleStop,
isResponding,
isResponding: respondingState,
suggestedQuestions,
} = useChat(
appConfig,
@@ -70,6 +75,8 @@ const ChatWrapper = () => {
},
appPrevChatList,
taskId => stopChatMessageResponding('', taskId, isInstalledApp, appId),
clearChatList,
setClearChatList,
)
const inputsFormValue = currentConversationId ? currentConversationItem?.inputs : newConversationInputsRef?.current
const inputDisabled = useMemo(() => {
@@ -108,6 +115,9 @@ const ChatWrapper = () => {
if (currentChatInstanceRef.current)
currentChatInstanceRef.current.handleStop = handleStop
}, [currentChatInstanceRef, handleStop])
useEffect(() => {
setIsResponding(respondingState)
}, [respondingState, setIsResponding])
const doSend: OnSend = useCallback((message, files, isRegenerate = false, parentAnswer: ChatItem | null = null) => {
const data: any = {
@@ -167,12 +177,33 @@ const ChatWrapper = () => {
const welcome = useMemo(() => {
const welcomeMessage = chatList.find(item => item.isOpeningStatement)
if (respondingState)
return null
if (currentConversationId)
return null
if (!welcomeMessage)
return null
if (!collapsed && inputsForms.length > 0)
return null
if (welcomeMessage.suggestedQuestions && welcomeMessage.suggestedQuestions?.length > 0) {
return (
<div className='h-[50vh] py-12 px-4 flex items-center justify-center'>
<div className='grow max-w-[720px] flex gap-4'>
<AppIcon
size='xl'
iconType={appData?.site.icon_type}
icon={appData?.site.icon}
background={appData?.site.icon_background}
imageUrl={appData?.site.icon_url}
/>
<div className='grow px-4 py-3 bg-chat-bubble-bg text-text-primary rounded-2xl body-lg-regular'>
<Markdown content={welcomeMessage.content} />
<SuggestedQuestions item={welcomeMessage} />
</div>
</div>
</div>
)
}
return (
<div className={cn('h-[50vh] py-12 flex flex-col items-center justify-center gap-3')}>
<AppIcon
@@ -182,10 +213,10 @@ const ChatWrapper = () => {
background={appData?.site.icon_background}
imageUrl={appData?.site.icon_url}
/>
<div className='text-text-tertiary body-2xl-regular'>{welcomeMessage.content}</div>
<Markdown className='!text-text-tertiary !body-2xl-regular' content={welcomeMessage.content} />
</div>
)
}, [appData?.site.icon, appData?.site.icon_background, appData?.site.icon_type, appData?.site.icon_url, chatList, collapsed, currentConversationId, inputsForms.length])
}, [appData?.site.icon, appData?.site.icon_background, appData?.site.icon_type, appData?.site.icon_url, chatList, collapsed, currentConversationId, inputsForms.length, respondingState])
const answerIcon = isDify()
? <LogoAvatar className='relative shrink-0' />
@@ -203,10 +234,10 @@ const ChatWrapper = () => {
appData={appData}
config={appConfig}
chatList={messageList}
isResponding={isResponding}
chatContainerInnerClassName={cn('mx-auto w-full max-w-full tablet:px-4', isMobile && 'px-4')}
isResponding={respondingState}
chatContainerInnerClassName={cn('mx-auto w-full max-w-full pt-4 tablet:px-4', isMobile && 'px-4')}
chatFooterClassName={cn('pb-4', !isMobile && 'rounded-b-2xl')}
chatFooterInnerClassName={cn('mx-auto w-full max-w-full tablet:px-4', isMobile && 'px-2')}
chatFooterInnerClassName={cn('mx-auto w-full max-w-full px-4', isMobile && 'px-2')}
onSend={doSend}
inputs={currentConversationId ? currentConversationItem?.inputs as any : newConversationInputs}
inputsForm={inputsForms}