AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-12 22:19:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix ui layout when in mobile mode (#16793)

Browse Source
This commit is contained in:
Good Wood 2025-03-26 11:01:13 +08:00 committed by GitHub
parent 37134c5987
commit 71edaba9df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -188,7 +188,7 @@ const ChatWrapper = () => {
return null return null
if (welcomeMessage.suggestedQuestions && welcomeMessage.suggestedQuestions?.length > 0) { if (welcomeMessage.suggestedQuestions && welcomeMessage.suggestedQuestions?.length > 0) {
return ( return (
<div className='flex h-[50vh] items-center justify-center px-4 py-12'> <div className='flex min-h-[50vh] items-center justify-center px-4 py-12'>
<div className='flex max-w-[720px] grow gap-4'> <div className='flex max-w-[720px] grow gap-4'>
<AppIcon <AppIcon
size='xl' size='xl'
@ -197,9 +197,11 @@ const ChatWrapper = () => {
background={appData?.site.icon_background} background={appData?.site.icon_background}
imageUrl={appData?.site.icon_url} imageUrl={appData?.site.icon_url}
/> />
<div className='body-lg-regular grow rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary'> <div className='w-0 grow'>
<Markdown content={welcomeMessage.content} /> <div className='body-lg-regular grow rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary'>
<SuggestedQuestions item={welcomeMessage} /> <Markdown content={welcomeMessage.content} />
<SuggestedQuestions item={welcomeMessage} />
</div>
</div> </div>
</div> </div>
</div> </div>

7
web/app/components/base/chat/chat/answer/suggested-questions.tsx
View File

@ -3,6 +3,7 @@ import { memo } from 'react'
import type { ChatItem } from '../../types' import type { ChatItem } from '../../types'
import { useChatContext } from '../context' import { useChatContext } from '../context'
import Button from '@/app/components/base/button' import Button from '@/app/components/base/button'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
type SuggestedQuestionsProps = { type SuggestedQuestionsProps = {
item: ChatItem item: ChatItem
@ -11,6 +12,10 @@ const SuggestedQuestions: FC<SuggestedQuestionsProps> = ({
item, item,
}) => { }) => {
const { onSend } = useChatContext() const { onSend } = useChatContext()
const media = useBreakpoints()
const isMobile = media === MediaType.mobile
const klassName = `mr-1 mt-1 ${isMobile ? 'block overflow-hidden text-ellipsis' : ''} max-w-full shrink-0 last:mr-0`
const { const {
isOpeningStatement, isOpeningStatement,
suggestedQuestions, suggestedQuestions,
@ -25,7 +30,7 @@ const SuggestedQuestions: FC<SuggestedQuestionsProps> = ({
<Button <Button
key={index} key={index}
variant='secondary-accent' variant='secondary-accent'
className='mr-1 mt-1 max-w-full shrink-0 last:mr-0' className={klassName}
onClick={() => onSend?.(question)} onClick={() => onSend?.(question)}
> >
{question} {question}