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

fix: chat res table or code is very long caused ui problem (#124)

Browse Source
This commit is contained in:
Joel 2023-05-21 16:27:24 +08:00 committed by GitHub
parent 1b6e3ef964
commit 18d1f6a6c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 86 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
web/app/components/app/chat/index.tsx
View File

@ -291,74 +291,76 @@ const Answer: FC<IAnswerProps> = ({ item, feedbackDisabled = false, isHideFeedba
</div> </div>
} }
</div> </div>
<div className={`${s.answerWrap} ${showEdit ? 'w-full' : ''}`}> <div className={s.answerWrapWrap}>
<div className={`${s.answer} relative text-sm text-gray-900`}> <div className={`${s.answerWrap} ${showEdit ? 'w-full' : ''}`}>
<div className={'ml-2 py-3 px-4 bg-gray-100 rounded-tr-2xl rounded-b-2xl'}> <div className={`${s.answer} relative text-sm text-gray-900`}>
{item.isOpeningStatement && ( <div className={'ml-2 py-3 px-4 bg-gray-100 rounded-tr-2xl rounded-b-2xl'}>
<div className='flex items-center mb-1 gap-1'> {item.isOpeningStatement && (
<OpeningStatementIcon /> <div className='flex items-center mb-1 gap-1'>
<div className='text-xs text-gray-500'>{t('appDebug.openingStatement.title')}</div> <OpeningStatementIcon />
</div> <div className='text-xs text-gray-500'>{t('appDebug.openingStatement.title')}</div>
)}
{(isResponsing && !content) ? (
<div className='flex items-center justify-center w-6 h-5'>
<LoadingAnim type='text' />
</div>
) : (
<Markdown content={content} />
)}
{!showEdit
? (annotation?.content
&& <>
<Divider name={annotation?.account?.name || userProfile?.name} />
{annotation.content}
</>)
: <>
<Divider name={annotation?.account?.name || userProfile?.name} />
<AutoHeightTextarea
placeholder={t('appLog.detail.operation.annotationPlaceholder') as string}
value={inputValue}
onChange={e => setInputValue(e.target.value)}
minHeight={58}
className={`${cn(s.textArea)} !py-2 resize-none block w-full !px-3 bg-gray-50 border border-gray-200 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-gray-700 tracking-[0.2px]`}
/>
<div className="mt-2 flex flex-row">
<Button
type='primary'
className='mr-2'
loading={loading}
onClick={async () => {
if (!inputValue)
return
setLoading(true)
const res = await onSubmitAnnotation?.(id, inputValue)
if (res)
setAnnotation({ ...annotation, content: inputValue } as any)
setLoading(false)
setShowEdit(false)
}}>{t('common.operation.confirm')}</Button>
<Button
onClick={() => {
setInputValue(annotation?.content ?? '')
setShowEdit(false)
}}>{t('common.operation.cancel')}</Button>
</div> </div>
</> )}
} {(isResponsing && !content) ? (
</div> <div className='flex items-center justify-center w-6 h-5'>
<div className='absolute top-[-14px] right-[-14px] flex flex-row justify-end gap-1'> <LoadingAnim type='text' />
<CopyBtn </div>
value={content} ) : (
className={cn(s.copyBtn, 'mr-1')} <Markdown content={content} />
/> )}
{!feedbackDisabled && !item.feedbackDisabled && renderItemOperation(displayScene !== 'console')} {!showEdit
{/* Admin feedback is displayed only in the background. */} ? (annotation?.content
{!feedbackDisabled && renderFeedbackRating(localAdminFeedback?.rating, false, false)} && <>
{/* User feedback must be displayed */} <Divider name={annotation?.account?.name || userProfile?.name} />
{!feedbackDisabled && renderFeedbackRating(feedback?.rating, !isHideFeedbackEdit, displayScene !== 'console')} {annotation.content}
</>)
: <>
<Divider name={annotation?.account?.name || userProfile?.name} />
<AutoHeightTextarea
placeholder={t('appLog.detail.operation.annotationPlaceholder') as string}
value={inputValue}
onChange={e => setInputValue(e.target.value)}
minHeight={58}
className={`${cn(s.textArea)} !py-2 resize-none block w-full !px-3 bg-gray-50 border border-gray-200 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-gray-700 tracking-[0.2px]`}
/>
<div className="mt-2 flex flex-row">
<Button
type='primary'
className='mr-2'
loading={loading}
onClick={async () => {
if (!inputValue)
return
setLoading(true)
const res = await onSubmitAnnotation?.(id, inputValue)
if (res)
setAnnotation({ ...annotation, content: inputValue } as any)
setLoading(false)
setShowEdit(false)
}}>{t('common.operation.confirm')}</Button>
<Button
onClick={() => {
setInputValue(annotation?.content ?? '')
setShowEdit(false)
}}>{t('common.operation.cancel')}</Button>
</div>
</>
}
</div>
<div className='absolute top-[-14px] right-[-14px] flex flex-row justify-end gap-1'>
<CopyBtn
value={content}
className={cn(s.copyBtn, 'mr-1')}
/>
{!feedbackDisabled && !item.feedbackDisabled && renderItemOperation(displayScene !== 'console')}
{/* Admin feedback is displayed only in the background. */}
{!feedbackDisabled && renderFeedbackRating(localAdminFeedback?.rating, false, false)}
{/* User feedback must be displayed */}
{!feedbackDisabled && renderFeedbackRating(feedback?.rating, !isHideFeedbackEdit, displayScene !== 'console')}
</div>
</div> </div>
{more && <MoreInfo more={more} isQuestion={false} />}
</div> </div>
{more && <MoreInfo more={more} isQuestion={false} />}
</div> </div>
</div> </div>
</div> </div>
@ -372,7 +374,7 @@ const Question: FC<IQuestionProps> = ({ id, content, more, useCurrentUserAvatar
const userName = userProfile?.name const userName = userProfile?.name
return ( return (
<div className='flex items-start justify-end' key={id}> <div className='flex items-start justify-end' key={id}>
<div> <div className={s.questionWrapWrap}>
<div className={`${s.question} relative text-sm text-gray-900`}> <div className={`${s.question} relative text-sm text-gray-900`}>
<div <div
className={'mr-2 py-3 px-4 bg-blue-500 rounded-tl-2xl rounded-b-2xl'} className={'mr-2 py-3 px-4 bg-blue-500 rounded-tl-2xl rounded-b-2xl'}

17
web/app/components/app/chat/style.module.css
View File

@ -42,6 +42,23 @@
display: none; display: none;
} }
.answerWrapWrap,
.questionWrapWrap {
width: 0;
flex-grow: 1;
}
.questionWrapWrap {
display: flex;
justify-content: flex-end;
}
.answerWrap,
.question {
display: inline-block;
max-width: 100%;
}
.answerWrap:hover .copyBtn { .answerWrap:hover .copyBtn {
display: block; display: block;
} }

1
web/app/styles/markdown.scss
View File

@ -594,6 +594,7 @@
.markdown-body table th { .markdown-body table th {
font-weight: var(--base-text-weight-semibold, 600); font-weight: var(--base-text-weight-semibold, 600);
white-space: nowrap;
} }
.markdown-body table th, .markdown-body table th,