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

chore: input area highlight and moblie hide tooltip (#251)

Browse Source
This commit is contained in:
Joel 2023-05-30 11:16:31 +08:00 committed by GitHub
parent 8358d0abfa
commit c5ccf382df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,8 @@ import { UserCircleIcon } from '@heroicons/react/24/solid'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { randomString } from '../../app-sidebar/basic' import { randomString } from '../../app-sidebar/basic'
import s from './style.module.css' import s from './style.module.css'
import LoadingAnim from './loading-anim'
import CopyBtn from './copy-btn'
import Tooltip from '@/app/components/base/tooltip' import Tooltip from '@/app/components/base/tooltip'
import { ToastContext } from '@/app/components/base/toast' import { ToastContext } from '@/app/components/base/toast'
import AutoHeightTextarea from '@/app/components/base/auto-height-textarea' import AutoHeightTextarea from '@/app/components/base/auto-height-textarea'
@ -15,9 +17,8 @@ import Button from '@/app/components/base/button'
import type { Annotation, MessageRating } from '@/models/log' import type { Annotation, MessageRating } from '@/models/log'
import AppContext from '@/context/app-context' import AppContext from '@/context/app-context'
import { Markdown } from '@/app/components/base/markdown' import { Markdown } from '@/app/components/base/markdown'
import LoadingAnim from './loading-anim'
import { formatNumber } from '@/utils/format' import { formatNumber } from '@/utils/format'
import CopyBtn from './copy-btn' import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
const stopIcon = ( const stopIcon = (
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -285,8 +286,8 @@ const Answer: FC<IAnswerProps> = ({ item, feedbackDisabled = false, isHideFeedba
<div key={id}> <div key={id}>
<div className='flex items-start'> <div className='flex items-start'>
<div className={`${s.answerIcon} w-10 h-10 shrink-0`}> <div className={`${s.answerIcon} w-10 h-10 shrink-0`}>
{isResponsing && {isResponsing
<div className={s.typeingIcon}> && <div className={s.typeingIcon}>
<LoadingAnim type='avatar' /> <LoadingAnim type='avatar' />
</div> </div>
} }
@ -301,13 +302,15 @@ const Answer: FC<IAnswerProps> = ({ item, feedbackDisabled = false, isHideFeedba
<div className='text-xs text-gray-500'>{t('appDebug.openingStatement.title')}</div> <div className='text-xs text-gray-500'>{t('appDebug.openingStatement.title')}</div>
</div> </div>
)} )}
{(isResponsing && !content) ? ( {(isResponsing && !content)
<div className='flex items-center justify-center w-6 h-5'> ? (
<LoadingAnim type='text' /> <div className='flex items-center justify-center w-6 h-5'>
</div> <LoadingAnim type='text' />
) : ( </div>
<Markdown content={content} /> )
)} : (
<Markdown content={content} />
)}
{!showEdit {!showEdit
? (annotation?.content ? (annotation?.content
&& <> && <>
@ -384,13 +387,15 @@ const Question: FC<IQuestionProps> = ({ id, content, more, useCurrentUserAvatar
</div> </div>
{more && <MoreInfo more={more} isQuestion={true} />} {more && <MoreInfo more={more} isQuestion={true} />}
</div> </div>
{useCurrentUserAvatar ? ( {useCurrentUserAvatar
<div className='w-10 h-10 shrink-0 leading-10 text-center mr-2 rounded-full bg-primary-600 text-white'> ? (
{userName?.[0].toLocaleUpperCase()} <div className='w-10 h-10 shrink-0 leading-10 text-center mr-2 rounded-full bg-primary-600 text-white'>
</div> {userName?.[0].toLocaleUpperCase()}
) : ( </div>
<div className={`${s.questionIcon} w-10 h-10 shrink-0 `}></div> )
)} : (
<div className={`${s.questionIcon} w-10 h-10 shrink-0 `}></div>
)}
</div> </div>
) )
} }
@ -411,7 +416,7 @@ const Chat: FC<IChatProps> = ({
controlClearQuery, controlClearQuery,
controlFocus, controlFocus,
isShowSuggestion, isShowSuggestion,
suggestionList suggestionList,
}) => { }) => {
const { t } = useTranslation() const { t } = useTranslation()
const { notify } = useContext(ToastContext) const { notify } = useContext(ToastContext)
@ -436,27 +441,24 @@ const Chat: FC<IChatProps> = ({
} }
useEffect(() => { useEffect(() => {
if (controlClearQuery) { if (controlClearQuery)
setQuery('') setQuery('')
}
}, [controlClearQuery]) }, [controlClearQuery])
const handleSend = () => { const handleSend = () => {
if (!valid() || (checkCanSend && !checkCanSend())) if (!valid() || (checkCanSend && !checkCanSend()))
return return
onSend(query) onSend(query)
if (!isResponsing) { if (!isResponsing)
setQuery('') setQuery('')
}
} }
const handleKeyUp = (e: any) => { const handleKeyUp = (e: any) => {
if (e.code === 'Enter') { if (e.code === 'Enter') {
e.preventDefault() e.preventDefault()
// prevent send message when using input method enter // prevent send message when using input method enter
if (!e.shiftKey && !isUseInputMethod.current) { if (!e.shiftKey && !isUseInputMethod.current)
handleSend() handleSend()
}
} }
} }
@ -468,6 +470,10 @@ const Chat: FC<IChatProps> = ({
} }
} }
const media = useBreakpoints()
const isMobile = media === MediaType.mobile
const sendBtn = <div className={cn(!(!query || query.trim() === '') && s.sendBtnActive, `${s.sendBtn} w-8 h-8 cursor-pointer rounded-md`)} onClick={handleSend}></div>
return ( return (
<div className={cn(!feedbackDisabled && 'px-3.5', 'h-full')}> <div className={cn(!feedbackDisabled && 'px-3.5', 'h-full')}>
{/* Chat List */} {/* Chat List */}
@ -506,7 +512,7 @@ const Chat: FC<IChatProps> = ({
<div className='flex items-center justify-center mb-2.5'> <div className='flex items-center justify-center mb-2.5'>
<div className='grow h-[1px]' <div className='grow h-[1px]'
style={{ style={{
background: 'linear-gradient(270deg, #F3F4F6 0%, rgba(243, 244, 246, 0) 100%)' background: 'linear-gradient(270deg, #F3F4F6 0%, rgba(243, 244, 246, 0) 100%)',
}}></div> }}></div>
<div className='shrink-0 flex items-center px-3 space-x-1'> <div className='shrink-0 flex items-center px-3 space-x-1'>
{TryToAskIcon} {TryToAskIcon}
@ -514,7 +520,7 @@ const Chat: FC<IChatProps> = ({
</div> </div>
<div className='grow h-[1px]' <div className='grow h-[1px]'
style={{ style={{
background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, #F3F4F6 100%)' background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, #F3F4F6 100%)',
}}></div> }}></div>
</div> </div>
<div className='flex justify-center overflow-x-scroll pb-2'> <div className='flex justify-center overflow-x-scroll pb-2'>
@ -544,17 +550,21 @@ const Chat: FC<IChatProps> = ({
/> />
<div className="absolute top-0 right-2 flex items-center h-[48px]"> <div className="absolute top-0 right-2 flex items-center h-[48px]">
<div className={`${s.count} mr-4 h-5 leading-5 text-sm bg-gray-50 text-gray-500`}>{query.trim().length}</div> <div className={`${s.count} mr-4 h-5 leading-5 text-sm bg-gray-50 text-gray-500`}>{query.trim().length}</div>
<Tooltip {isMobile
selector='send-tip' ? sendBtn
htmlContent={ : (
<div> <Tooltip
<div>{t('common.operation.send')} Enter</div> selector='send-tip'
<div>{t('common.operation.lineBreak')} Shift Enter</div> htmlContent={
</div> <div>
} <div>{t('common.operation.send')} Enter</div>
> <div>{t('common.operation.lineBreak')} Shift Enter</div>
<div className={`${s.sendBtn} w-8 h-8 cursor-pointer rounded-md`} onClick={handleSend}></div> </div>
</Tooltip> }
>
{sendBtn}
</Tooltip>
)}
</div> </div>
</div> </div>
</div> </div>

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

@ -102,6 +102,10 @@
background: url(./icons/send.svg) center center no-repeat; background: url(./icons/send.svg) center center no-repeat;
} }
.sendBtnActive {
background-image: url(./icons/send-active.svg);
}
.sendBtn:hover { .sendBtn:hover {
background-image: url(./icons/send-active.svg); background-image: url(./icons/send-active.svg);
background-color: #EBF5FF; background-color: #EBF5FF;