Chore: frontend infrastructure upgrade (#16420)
Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
@@ -8,7 +8,7 @@ import Thought from '@/app/components/base/chat/chat/thought'
|
||||
import { FileList } from '@/app/components/base/file-uploader'
|
||||
import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
|
||||
|
||||
interface AgentContentProps {
|
||||
type AgentContentProps = {
|
||||
item: ChatItem
|
||||
responding?: boolean
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ import type { ChatItem } from '../../types'
|
||||
import { Markdown } from '@/app/components/base/markdown'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
interface BasicContentProps {
|
||||
type BasicContentProps = {
|
||||
item: ChatItem
|
||||
}
|
||||
const BasicContent: FC<BasicContentProps> = ({
|
||||
|
||||
@@ -101,20 +101,20 @@ const Answer: FC<AnswerProps> = ({
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className='flex mb-2 last:mb-0'>
|
||||
<div className='shrink-0 relative w-10 h-10'>
|
||||
<div className='mb-2 flex last:mb-0'>
|
||||
<div className='relative h-10 w-10 shrink-0'>
|
||||
{answerIcon || <AnswerIcon />}
|
||||
{responding && (
|
||||
<div className='absolute -top-[3px] -left-[3px] pl-[6px] flex items-center w-4 h-4 bg-background-section-burn rounded-full shadow-xs border-[0.5px] border-divider-subtle'>
|
||||
<div className='absolute -left-[3px] -top-[3px] flex h-4 w-4 items-center rounded-full border-[0.5px] border-divider-subtle bg-background-section-burn pl-[6px] shadow-xs'>
|
||||
<LoadingAnim type='avatar' />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='chat-answer-container group grow w-0 ml-4 pb-4' ref={containerRef}>
|
||||
<div className='chat-answer-container group ml-4 w-0 grow pb-4' ref={containerRef}>
|
||||
<div className={cn('group relative pr-10', chatAnswerContainerInner)}>
|
||||
<div
|
||||
ref={contentRef}
|
||||
className={cn('relative inline-block px-4 py-3 max-w-full bg-chat-bubble-bg rounded-2xl body-lg-regular text-text-primary', workflowProcess && 'w-full')}
|
||||
className={cn('body-lg-regular relative inline-block max-w-full rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary', workflowProcess && 'w-full')}
|
||||
>
|
||||
{
|
||||
!responding && (
|
||||
@@ -153,7 +153,7 @@ const Answer: FC<AnswerProps> = ({
|
||||
}
|
||||
{
|
||||
responding && !content && !hasAgentThoughts && (
|
||||
<div className='flex items-center justify-center w-6 h-5'>
|
||||
<div className='flex h-5 w-6 items-center justify-center'>
|
||||
<LoadingAnim type='text' />
|
||||
</div>
|
||||
)
|
||||
@@ -207,13 +207,13 @@ const Answer: FC<AnswerProps> = ({
|
||||
<Citation data={citation} showHitInfo={config?.supportCitationHitInfo} />
|
||||
)
|
||||
}
|
||||
{item.siblingCount && item.siblingCount > 1 && item.siblingIndex !== undefined && <div className="pt-3.5 flex justify-center items-center text-sm">
|
||||
{item.siblingCount && item.siblingCount > 1 && item.siblingIndex !== undefined && <div className="flex items-center justify-center pt-3.5 text-sm">
|
||||
<button
|
||||
className={`${item.prevSibling ? 'opacity-100' : 'opacity-30'}`}
|
||||
disabled={!item.prevSibling}
|
||||
onClick={() => item.prevSibling && switchSibling?.(item.prevSibling)}
|
||||
>
|
||||
<ChevronRight className="w-[14px] h-[14px] rotate-180 text-text-primary" />
|
||||
<ChevronRight className="h-[14px] w-[14px] rotate-180 text-text-primary" />
|
||||
</button>
|
||||
<span className="px-2 text-xs text-text-primary">{item.siblingIndex + 1} / {item.siblingCount}</span>
|
||||
<button
|
||||
@@ -221,7 +221,7 @@ const Answer: FC<AnswerProps> = ({
|
||||
disabled={!item.nextSibling}
|
||||
onClick={() => item.nextSibling && switchSibling?.(item.nextSibling)}
|
||||
>
|
||||
<ChevronRight className="w-[14px] h-[14px] text-text-primary" />
|
||||
<ChevronRight className="h-[14px] w-[14px] text-text-primary" />
|
||||
</button>
|
||||
</div>}
|
||||
</div>
|
||||
|
||||
@@ -13,25 +13,25 @@ const More: FC<MoreProps> = ({
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='mt-1 flex items-center system-xs-regular text-text-quaternary opacity-0 group-hover:opacity-100'>
|
||||
<div className='system-xs-regular mt-1 flex items-center text-text-quaternary opacity-0 group-hover:opacity-100'>
|
||||
{
|
||||
more && (
|
||||
<>
|
||||
<div
|
||||
className='mr-2 shrink-0 truncate max-w-[33.3%]'
|
||||
className='mr-2 max-w-[33.3%] shrink-0 truncate'
|
||||
title={`${t('appLog.detail.timeConsuming')} ${more.latency}${t('appLog.detail.second')}`}
|
||||
>
|
||||
{`${t('appLog.detail.timeConsuming')} ${more.latency}${t('appLog.detail.second')}`}
|
||||
</div>
|
||||
<div
|
||||
className='shrink-0 truncate max-w-[33.3%]'
|
||||
className='max-w-[33.3%] shrink-0 truncate'
|
||||
title={`${t('appLog.detail.tokenCost')} ${formatNumber(more.tokens)}`}
|
||||
>
|
||||
{`${t('appLog.detail.tokenCost')} ${formatNumber(more.tokens)}`}
|
||||
</div>
|
||||
<div className='shrink-0 mx-2'>·</div>
|
||||
<div className='mx-2 shrink-0'>·</div>
|
||||
<div
|
||||
className='shrink-0 truncate max-w-[33.3%]'
|
||||
className='max-w-[33.3%] shrink-0 truncate'
|
||||
title={more.time}
|
||||
>
|
||||
{more.time}
|
||||
|
||||
@@ -108,13 +108,13 @@ const Operation: FC<OperationProps> = ({
|
||||
)}
|
||||
style={(!hasWorkflowProcess && positionRight) ? { left: contentWidth + 8 } : {}}
|
||||
>
|
||||
{showPromptLog && (
|
||||
{showPromptLog && !isOpeningStatement && (
|
||||
<div className='hidden group-hover:block'>
|
||||
<Log logItem={item} />
|
||||
</div>
|
||||
)}
|
||||
{!isOpeningStatement && (
|
||||
<div className='hidden group-hover:flex ml-1 items-center gap-0.5 p-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-md backdrop-blur-sm'>
|
||||
<div className='ml-1 hidden items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex'>
|
||||
{(config?.text_to_speech?.enabled) && (
|
||||
<NewAudioButton
|
||||
id={id}
|
||||
@@ -126,40 +126,40 @@ const Operation: FC<OperationProps> = ({
|
||||
copy(content)
|
||||
Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
|
||||
}}>
|
||||
<RiClipboardLine className='w-4 h-4' />
|
||||
<RiClipboardLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
{!noChatInput && (
|
||||
<ActionButton onClick={() => onRegenerate?.(item)}>
|
||||
<RiResetLeftLine className='w-4 h-4' />
|
||||
<RiResetLeftLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
{(config?.supportAnnotation && config.annotation_reply?.enabled) && (
|
||||
<ActionButton onClick={() => setIsShowReplyModal(true)}>
|
||||
<RiEditLine className='w-4 h-4' />
|
||||
<RiEditLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{!isOpeningStatement && config?.supportFeedback && onFeedback && (
|
||||
<div className='hidden group-hover:flex ml-1 items-center gap-0.5 p-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-md backdrop-blur-sm'>
|
||||
<div className='ml-1 hidden items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex'>
|
||||
{!localFeedback?.rating && (
|
||||
<>
|
||||
<ActionButton onClick={() => handleFeedback('like')}>
|
||||
<RiThumbUpLine className='w-4 h-4' />
|
||||
<RiThumbUpLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
<ActionButton onClick={() => handleFeedback('dislike')}>
|
||||
<RiThumbDownLine className='w-4 h-4' />
|
||||
<RiThumbDownLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
</>
|
||||
)}
|
||||
{localFeedback?.rating === 'like' && (
|
||||
<ActionButton state={ActionButtonState.Active} onClick={() => handleFeedback(null)}>
|
||||
<RiThumbUpLine className='w-4 h-4' />
|
||||
<RiThumbUpLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
{localFeedback?.rating === 'dislike' && (
|
||||
<ActionButton state={ActionButtonState.Destructive} onClick={() => handleFeedback(null)}>
|
||||
<RiThumbDownLine className='w-4 h-4' />
|
||||
<RiThumbDownLine className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -25,7 +25,7 @@ const SuggestedQuestions: FC<SuggestedQuestionsProps> = ({
|
||||
<Button
|
||||
key={index}
|
||||
variant='secondary-accent'
|
||||
className='mt-1 mr-1 max-w-full last:mr-0 shrink-0'
|
||||
className='mr-1 mt-1 max-w-full shrink-0 last:mr-0'
|
||||
onClick={() => onSend?.(question)}
|
||||
>
|
||||
{question}
|
||||
|
||||
@@ -30,34 +30,34 @@ const ToolDetail = ({
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center system-xs-medium text-text-tertiary px-2.5 py-2 cursor-pointer',
|
||||
'system-xs-medium flex cursor-pointer items-center px-2.5 py-2 text-text-tertiary',
|
||||
expand && 'pb-1.5',
|
||||
)}
|
||||
onClick={() => setExpand(!expand)}
|
||||
>
|
||||
{isFinished && <RiHammerFill className='mr-1 w-3.5 h-3.5' />}
|
||||
{!isFinished && <RiLoader2Line className='mr-1 w-3.5 h-3.5 animate-spin' />}
|
||||
{isFinished && <RiHammerFill className='mr-1 h-3.5 w-3.5' />}
|
||||
{!isFinished && <RiLoader2Line className='mr-1 h-3.5 w-3.5 animate-spin' />}
|
||||
{t(`tools.thought.${isFinished ? 'used' : 'using'}`)}
|
||||
<div className='mx-1 text-text-secondary'>{toolLabel}</div>
|
||||
{!expand && <RiArrowRightSLine className='w-4 h-4' />}
|
||||
{expand && <RiArrowDownSLine className='ml-auto w-4 h-4' />}
|
||||
{!expand && <RiArrowRightSLine className='h-4 w-4' />}
|
||||
{expand && <RiArrowDownSLine className='ml-auto h-4 w-4' />}
|
||||
</div>
|
||||
{
|
||||
expand && (
|
||||
<>
|
||||
<div className='mb-0.5 mx-1 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary'>
|
||||
<div className='flex items-center justify-between px-2 pt-1 h-7 system-xs-semibold-uppercase'>
|
||||
<div className='mx-1 mb-0.5 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary'>
|
||||
<div className='system-xs-semibold-uppercase flex h-7 items-center justify-between px-2 pt-1'>
|
||||
{t('tools.thought.requestTitle')}
|
||||
</div>
|
||||
<div className='pt-1 px-3 pb-2 code-xs-regular break-words'>
|
||||
<div className='code-xs-regular break-words px-3 pb-2 pt-1'>
|
||||
{input}
|
||||
</div>
|
||||
</div>
|
||||
<div className='mx-1 mb-1 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary'>
|
||||
<div className='flex items-center justify-between px-2 pt-1 h-7 system-xs-semibold-uppercase'>
|
||||
<div className='system-xs-semibold-uppercase flex h-7 items-center justify-between px-2 pt-1'>
|
||||
{t('tools.thought.responseTitle')}
|
||||
</div>
|
||||
<div className='pt-1 px-3 pb-2 code-xs-regular break-words'>
|
||||
<div className='code-xs-regular break-words px-3 pb-2 pt-1'>
|
||||
{output}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -42,8 +42,8 @@ const WorkflowProcessItem = ({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'-mx-1 px-2.5 rounded-xl',
|
||||
collapse ? 'py-[7px] border-l-[0.25px] border-components-panel-border' : 'pt-[7px] px-1 pb-1 border-[0.5px] border-components-panel-border-subtle',
|
||||
'-mx-1 rounded-xl px-2.5',
|
||||
collapse ? 'border-l-[0.25px] border-components-panel-border py-[7px]' : 'border-[0.5px] border-components-panel-border-subtle px-1 pb-1 pt-[7px]',
|
||||
running && !collapse && 'bg-background-section-burn',
|
||||
succeeded && !collapse && 'bg-state-success-hover',
|
||||
failed && !collapse && 'bg-state-destructive-hover',
|
||||
@@ -51,28 +51,28 @@ const WorkflowProcessItem = ({
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn('flex items-center cursor-pointer', !collapse && 'px-1.5', readonly && 'cursor-default')}
|
||||
className={cn('flex cursor-pointer items-center', !collapse && 'px-1.5', readonly && 'cursor-default')}
|
||||
onClick={() => !readonly && setCollapse(!collapse)}
|
||||
>
|
||||
{
|
||||
running && (
|
||||
<RiLoader2Line className='shrink-0 mr-1 w-3.5 h-3.5 animate-spin text-text-tertiary' />
|
||||
<RiLoader2Line className='mr-1 h-3.5 w-3.5 shrink-0 animate-spin text-text-tertiary' />
|
||||
)
|
||||
}
|
||||
{
|
||||
succeeded && (
|
||||
<CheckCircle className='shrink-0 mr-1 w-3.5 h-3.5 text-text-success' />
|
||||
<CheckCircle className='mr-1 h-3.5 w-3.5 shrink-0 text-text-success' />
|
||||
)
|
||||
}
|
||||
{
|
||||
failed && (
|
||||
<RiErrorWarningFill className='shrink-0 mr-1 w-3.5 h-3.5 text-text-destructive' />
|
||||
<RiErrorWarningFill className='mr-1 h-3.5 w-3.5 shrink-0 text-text-destructive' />
|
||||
)
|
||||
}
|
||||
<div className={cn('system-xs-medium text-text-secondary', !collapse && 'grow')}>
|
||||
{t('workflow.common.workflowProcess')}
|
||||
</div>
|
||||
{!readonly && <RiArrowRightSLine className={cn('ml-1 w-4 h-4 text-text-tertiary', !collapse && 'rotate-90')} />}
|
||||
{!readonly && <RiArrowRightSLine className={cn('ml-1 h-4 w-4 text-text-tertiary', !collapse && 'rotate-90')} />}
|
||||
</div>
|
||||
{
|
||||
!collapse && !readonly && (
|
||||
|
||||
@@ -155,28 +155,28 @@ const ChatInputArea = ({
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
'relative pb-[9px] bg-components-panel-bg-blur border border-components-chat-input-border rounded-xl shadow-md z-10',
|
||||
'relative z-10 rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pb-[9px] shadow-md',
|
||||
isDragActive && 'border border-dashed border-components-option-card-option-selected-border',
|
||||
disabled && 'opacity-50 pointer-events-none border-components-panel-border shadow-none',
|
||||
disabled && 'pointer-events-none border-components-panel-border opacity-50 shadow-none',
|
||||
)}
|
||||
>
|
||||
<div className='relative px-[9px] pt-[9px] max-h-[158px] overflow-x-hidden overflow-y-auto'>
|
||||
<div className='relative max-h-[158px] overflow-y-auto overflow-x-hidden px-[9px] pt-[9px]'>
|
||||
<FileListInChatInput fileConfig={visionConfig!} />
|
||||
<div
|
||||
ref={wrapperRef}
|
||||
className='flex items-center justify-between'
|
||||
>
|
||||
<div className='flex items-center relative grow w-full'>
|
||||
<div className='relative flex w-full grow items-center'>
|
||||
<div
|
||||
ref={textValueRef}
|
||||
className='absolute w-auto h-auto p-1 leading-6 body-lg-regular pointer-events-none whitespace-pre invisible'
|
||||
className='body-lg-regular pointer-events-none invisible absolute h-auto w-auto whitespace-pre p-1 leading-6'
|
||||
>
|
||||
{query}
|
||||
</div>
|
||||
<Textarea
|
||||
ref={textareaRef}
|
||||
className={cn(
|
||||
'p-1 w-full leading-6 body-lg-regular text-text-tertiary bg-transparent outline-none',
|
||||
'body-lg-regular w-full bg-transparent p-1 leading-6 text-text-tertiary outline-none',
|
||||
)}
|
||||
placeholder={t('common.chat.inputPlaceholder') || ''}
|
||||
autoFocus
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
import {
|
||||
forwardRef,
|
||||
memo,
|
||||
} from 'react'
|
||||
import { memo } from 'react'
|
||||
import {
|
||||
RiMicLine,
|
||||
RiSendPlane2Fill,
|
||||
@@ -23,17 +20,22 @@ type OperationProps = {
|
||||
onSend: () => void
|
||||
theme?: Theme | null
|
||||
}
|
||||
const Operation = forwardRef<HTMLDivElement, OperationProps>(({
|
||||
fileConfig,
|
||||
speechToTextConfig,
|
||||
onShowVoiceInput,
|
||||
onSend,
|
||||
theme,
|
||||
}, ref) => {
|
||||
const Operation = (
|
||||
{
|
||||
ref,
|
||||
fileConfig,
|
||||
speechToTextConfig,
|
||||
onShowVoiceInput,
|
||||
onSend,
|
||||
theme,
|
||||
}: OperationProps & {
|
||||
ref: React.RefObject<HTMLDivElement>;
|
||||
},
|
||||
) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'shrink-0 flex items-center justify-end',
|
||||
'flex shrink-0 items-center justify-end',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
@@ -48,13 +50,13 @@ const Operation = forwardRef<HTMLDivElement, OperationProps>(({
|
||||
size='l'
|
||||
onClick={onShowVoiceInput}
|
||||
>
|
||||
<RiMicLine className='w-5 h-5' />
|
||||
<RiMicLine className='h-5 w-5' />
|
||||
</ActionButton>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<Button
|
||||
className='ml-3 px-0 w-8'
|
||||
className='ml-3 w-8 px-0'
|
||||
variant='primary'
|
||||
onClick={onSend}
|
||||
style={
|
||||
@@ -65,12 +67,12 @@ const Operation = forwardRef<HTMLDivElement, OperationProps>(({
|
||||
: {}
|
||||
}
|
||||
>
|
||||
<RiSendPlane2Fill className='w-4 h-4' />
|
||||
<RiSendPlane2Fill className='h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
Operation.displayName = 'Operation'
|
||||
|
||||
export default memo(Operation)
|
||||
|
||||
@@ -76,17 +76,17 @@ const Citation: FC<CitationProps> = ({
|
||||
const resourcesLength = resources.length
|
||||
|
||||
return (
|
||||
<div className='mt-3 -mb-1'>
|
||||
<div className='flex items-center mb-2 system-xs-medium text-text-tertiary'>
|
||||
<div className='-mb-1 mt-3'>
|
||||
<div className='system-xs-medium mb-2 flex items-center text-text-tertiary'>
|
||||
{t('common.chat.citation.title')}
|
||||
<div className='grow ml-2 h-[1px] bg-divider-regular' />
|
||||
<div className='ml-2 h-[1px] grow bg-divider-regular' />
|
||||
</div>
|
||||
<div className='relative flex flex-wrap'>
|
||||
{
|
||||
resources.map((res, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className='absolute top-0 left-0 w-auto mr-1 mb-1 pl-7 pr-2 max-w-[240px] h-7 text-xs whitespace-nowrap opacity-0 -z-10'
|
||||
className='absolute left-0 top-0 -z-10 mb-1 mr-1 h-7 w-auto max-w-[240px] whitespace-nowrap pl-7 pr-2 text-xs opacity-0'
|
||||
ref={(ele: any) => (elesRef.current[index] = ele!)}
|
||||
>
|
||||
{res.documentName}
|
||||
@@ -95,7 +95,7 @@ const Citation: FC<CitationProps> = ({
|
||||
}
|
||||
{
|
||||
resources.slice(0, showMore ? resourcesLength : limitNumberInOneLine).map((res, index) => (
|
||||
<div key={index} className='mr-1 mb-1 cursor-pointer'>
|
||||
<div key={index} className='mb-1 mr-1 cursor-pointer'>
|
||||
<Popup
|
||||
data={res}
|
||||
showHitInfo={showHitInfo}
|
||||
@@ -106,13 +106,13 @@ const Citation: FC<CitationProps> = ({
|
||||
{
|
||||
limitNumberInOneLine < resourcesLength && (
|
||||
<div
|
||||
className='flex items-center px-2 h-7 bg-components-panel-bg rounded-lg text-text-tertiary system-xs-medium cursor-pointer'
|
||||
className='system-xs-medium flex h-7 cursor-pointer items-center rounded-lg bg-components-panel-bg px-2 text-text-tertiary'
|
||||
onClick={() => setShowMore(v => !v)}
|
||||
>
|
||||
{
|
||||
!showMore
|
||||
? `+ ${resourcesLength - limitNumberInOneLine}`
|
||||
: <RiArrowDownSLine className='w-4 h-4 text-text-tertiary rotate-180' />
|
||||
: <RiArrowDownSLine className='h-4 w-4 rotate-180 text-text-tertiary' />
|
||||
}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -47,28 +47,28 @@ const Popup: FC<PopupProps> = ({
|
||||
}}
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
|
||||
<div className='flex items-center px-2 max-w-[240px] h-7 bg-components-button-secondary-bg rounded-lg'>
|
||||
<FileIcon type={fileType} className='shrink-0 mr-1 w-4 h-4' />
|
||||
<div className='text-xs text-text-tertiary truncate'>{data.documentName}</div>
|
||||
<div className='flex h-7 max-w-[240px] items-center rounded-lg bg-components-button-secondary-bg px-2'>
|
||||
<FileIcon type={fileType} className='mr-1 h-4 w-4 shrink-0' />
|
||||
<div className='truncate text-xs text-text-tertiary'>{data.documentName}</div>
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent style={{ zIndex: 1000 }}>
|
||||
<div className='max-w-[360px] bg-background-section-burn rounded-xl shadow-lg'>
|
||||
<div className='px-4 pt-3 pb-2'>
|
||||
<div className='flex items-center h-[18px]'>
|
||||
<FileIcon type={fileType} className='shrink-0 mr-1 w-4 h-4' />
|
||||
<div className='system-xs-medium text-text-tertiary truncate'>{data.documentName}</div>
|
||||
<div className='max-w-[360px] rounded-xl bg-background-section-burn shadow-lg'>
|
||||
<div className='px-4 pb-2 pt-3'>
|
||||
<div className='flex h-[18px] items-center'>
|
||||
<FileIcon type={fileType} className='mr-1 h-4 w-4 shrink-0' />
|
||||
<div className='system-xs-medium truncate text-text-tertiary'>{data.documentName}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-4 py-0.5 max-h-[450px] bg-components-panel-bg rounded-lg overflow-y-auto'>
|
||||
<div className='max-h-[450px] overflow-y-auto rounded-lg bg-components-panel-bg px-4 py-0.5'>
|
||||
<div className='w-full'>
|
||||
{
|
||||
data.sources.map((source, index) => (
|
||||
<Fragment key={index}>
|
||||
<div className='group py-3'>
|
||||
<div className='flex items-center justify-between mb-2'>
|
||||
<div className='flex items-center px-1.5 h-5 border border-divider-subtle rounded-md'>
|
||||
<Hash02 className='mr-0.5 w-3 h-3 text-text-quaternary' />
|
||||
<div className='mb-2 flex items-center justify-between'>
|
||||
<div className='flex h-5 items-center rounded-md border border-divider-subtle px-1.5'>
|
||||
<Hash02 className='mr-0.5 h-3 w-3 text-text-quaternary' />
|
||||
<div className='text-[11px] font-medium text-text-tertiary'>
|
||||
{source.segment_position || index + 1}
|
||||
</div>
|
||||
@@ -77,31 +77,31 @@ const Popup: FC<PopupProps> = ({
|
||||
showHitInfo && (
|
||||
<Link
|
||||
href={`/datasets/${source.dataset_id}/documents/${source.document_id}`}
|
||||
className='hidden items-center h-[18px] text-xs text-text-accent group-hover:flex'>
|
||||
className='hidden h-[18px] items-center text-xs text-text-accent group-hover:flex'>
|
||||
{t('common.chat.citation.linkToDataset')}
|
||||
<ArrowUpRight className='ml-1 w-3 h-3' />
|
||||
<ArrowUpRight className='ml-1 h-3 w-3' />
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div className='text-[13px] text-text-secondary break-words'>{source.content}</div>
|
||||
<div className='break-words text-[13px] text-text-secondary'>{source.content}</div>
|
||||
{
|
||||
showHitInfo && (
|
||||
<div className='flex items-center mt-2 system-xs-medium text-text-quaternary flex-wrap'>
|
||||
<div className='system-xs-medium mt-2 flex flex-wrap items-center text-text-quaternary'>
|
||||
<Tooltip
|
||||
text={t('common.chat.citation.characters')}
|
||||
data={source.word_count}
|
||||
icon={<TypeSquare className='mr-1 w-3 h-3' />}
|
||||
icon={<TypeSquare className='mr-1 h-3 w-3' />}
|
||||
/>
|
||||
<Tooltip
|
||||
text={t('common.chat.citation.hitCount')}
|
||||
data={source.hit_count}
|
||||
icon={<Target04 className='mr-1 w-3 h-3' />}
|
||||
icon={<Target04 className='mr-1 h-3 w-3' />}
|
||||
/>
|
||||
<Tooltip
|
||||
text={t('common.chat.citation.vectorHash')}
|
||||
data={source.index_node_hash?.substring(0, 7)}
|
||||
icon={<BezierCurve03 className='mr-1 w-3 h-3' />}
|
||||
icon={<BezierCurve03 className='mr-1 h-3 w-3' />}
|
||||
/>
|
||||
{
|
||||
source.score && (
|
||||
|
||||
@@ -27,15 +27,15 @@ const ProgressTooltip: FC<ProgressTooltipProps> = ({
|
||||
onMouseEnter={() => setOpen(true)}
|
||||
onMouseLeave={() => setOpen(false)}
|
||||
>
|
||||
<div className='grow flex items-center'>
|
||||
<div className='mr-1 w-16 h-1.5 rounded-[3px] border border-components-progress-gray-border overflow-hidden'>
|
||||
<div className='bg-components-progress-gray-progress h-full' style={{ width: `${data * 100}%` }}></div>
|
||||
<div className='flex grow items-center'>
|
||||
<div className='mr-1 h-1.5 w-16 overflow-hidden rounded-[3px] border border-components-progress-gray-border'>
|
||||
<div className='h-full bg-components-progress-gray-progress' style={{ width: `${data * 100}%` }}></div>
|
||||
</div>
|
||||
{data}
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent style={{ zIndex: 1001 }}>
|
||||
<div className='p-3 bg-components-tooltip-bg system-xs-medium text-text-quaternary rounded-lg shadow-lg'>
|
||||
<div className='system-xs-medium rounded-lg bg-components-tooltip-bg p-3 text-text-quaternary shadow-lg'>
|
||||
{t('common.chat.citation.hitScore')} {data}
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
|
||||
@@ -29,13 +29,13 @@ const Tooltip: FC<TooltipProps> = ({
|
||||
onMouseEnter={() => setOpen(true)}
|
||||
onMouseLeave={() => setOpen(false)}
|
||||
>
|
||||
<div className='flex items-center mr-6'>
|
||||
<div className='mr-6 flex items-center'>
|
||||
{icon}
|
||||
{data}
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent style={{ zIndex: 1001 }}>
|
||||
<div className='p-3 bg-components-tooltip-bg system-xs-medium text-text-quaternary rounded-lg shadow-lg'>
|
||||
<div className='system-xs-medium rounded-lg bg-components-tooltip-bg p-3 text-text-quaternary shadow-lg'>
|
||||
{text} {data}
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
|
||||
@@ -166,19 +166,28 @@ const Chat: FC<ChatProps> = ({
|
||||
|
||||
useEffect(() => {
|
||||
if (chatFooterRef.current && chatContainerRef.current) {
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
// container padding bottom
|
||||
const resizeContainerObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
const { blockSize } = entry.borderBoxSize[0]
|
||||
|
||||
chatContainerRef.current!.style.paddingBottom = `${blockSize}px`
|
||||
handleScrollToBottom()
|
||||
}
|
||||
})
|
||||
resizeContainerObserver.observe(chatFooterRef.current)
|
||||
|
||||
resizeObserver.observe(chatFooterRef.current)
|
||||
// footer width
|
||||
const resizeFooterObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
const { inlineSize } = entry.borderBoxSize[0]
|
||||
chatFooterRef.current!.style.width = `${inlineSize}px`
|
||||
}
|
||||
})
|
||||
resizeFooterObserver.observe(chatContainerRef.current)
|
||||
|
||||
return () => {
|
||||
resizeObserver.disconnect()
|
||||
resizeContainerObserver.disconnect()
|
||||
resizeFooterObserver.disconnect()
|
||||
}
|
||||
}
|
||||
}, [handleScrollToBottom])
|
||||
@@ -262,7 +271,7 @@ const Chat: FC<ChatProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`absolute bottom-0 bg-chat-input-mask flex justify-center ${(hasTryToAsk || !noChatInput || !noStopResponding) && chatFooterClassName}`}
|
||||
className={`absolute bottom-0 flex justify-center bg-chat-input-mask ${(hasTryToAsk || !noChatInput || !noStopResponding) && chatFooterClassName}`}
|
||||
ref={chatFooterRef}
|
||||
>
|
||||
<div
|
||||
@@ -271,10 +280,10 @@ const Chat: FC<ChatProps> = ({
|
||||
>
|
||||
{
|
||||
!noStopResponding && isResponding && (
|
||||
<div className='flex justify-center mb-2'>
|
||||
<div className='mb-2 flex justify-center'>
|
||||
<Button onClick={onStopResponding}>
|
||||
<StopCircle className='mr-[5px] w-3.5 h-3.5 text-gray-500' />
|
||||
<span className='text-xs text-gray-500 font-normal'>{t('appDebug.operation.stopResponding')}</span>
|
||||
<StopCircle className='mr-[5px] h-3.5 w-3.5 text-gray-500' />
|
||||
<span className='text-xs font-normal text-gray-500'>{t('appDebug.operation.stopResponding')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -19,7 +19,7 @@ const Log: FC<LogProps> = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
className='ml-1 flex items-center gap-0.5 p-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-md backdrop-blur-sm'
|
||||
className='ml-1 flex items-center gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
e.nativeEvent.stopImmediatePropagation()
|
||||
@@ -33,7 +33,7 @@ const Log: FC<LogProps> = ({
|
||||
}}
|
||||
>
|
||||
<ActionButton>
|
||||
<RiFileList3Line className='w-4 h-4' />
|
||||
<RiFileList3Line className='h-4 w-4' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -26,8 +26,8 @@ export const Default: Story = {
|
||||
content: 'You are a helpful assistant.',
|
||||
} satisfies ChatItem,
|
||||
theme: undefined,
|
||||
questionIcon: <div className='w-full h-full rounded-full border-[0.5px] border-black/5'>
|
||||
<User className='w-full h-full' />
|
||||
questionIcon: <div className='h-full w-full rounded-full border-[0.5px] border-black/5'>
|
||||
<User className='h-full w-full' />
|
||||
</div>,
|
||||
},
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@ import { User } from '@/app/components/base/icons/src/public/avatar'
|
||||
import { Markdown } from '@/app/components/base/markdown'
|
||||
import { FileList } from '@/app/components/base/file-uploader'
|
||||
|
||||
interface QuestionProps {
|
||||
type QuestionProps = {
|
||||
item: ChatItem
|
||||
questionIcon?: ReactNode
|
||||
theme: Theme | null | undefined
|
||||
@@ -28,10 +28,10 @@ const Question: FC<QuestionProps> = ({
|
||||
} = item
|
||||
|
||||
return (
|
||||
<div className='flex justify-end mb-2 last:mb-0 pl-14'>
|
||||
<div className='mb-2 flex justify-end pl-14 last:mb-0'>
|
||||
<div className='group relative mr-4 max-w-full'>
|
||||
<div
|
||||
className='px-4 py-3 bg-[#D1E9FF]/50 rounded-2xl text-sm text-gray-900'
|
||||
className='rounded-2xl bg-[#D1E9FF]/50 px-4 py-3 text-sm text-gray-900'
|
||||
style={theme?.chatBubbleColorStyle ? CssTransform(theme.chatBubbleColorStyle) : {}}
|
||||
>
|
||||
{
|
||||
@@ -47,11 +47,11 @@ const Question: FC<QuestionProps> = ({
|
||||
</div>
|
||||
<div className='mt-1 h-[18px]' />
|
||||
</div>
|
||||
<div className='shrink-0 w-10 h-10'>
|
||||
<div className='h-10 w-10 shrink-0'>
|
||||
{
|
||||
questionIcon || (
|
||||
<div className='w-full h-full rounded-full border-[0.5px] border-black/5'>
|
||||
<User className='w-full h-full' />
|
||||
<div className='h-full w-full rounded-full border-[0.5px] border-black/5'>
|
||||
<User className='h-full w-full' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ import React from 'react'
|
||||
import type { ThoughtItem, ToolInfoInThought } from '../type'
|
||||
import ToolDetail from '@/app/components/base/chat/chat/answer/tool-detail'
|
||||
|
||||
export interface IThoughtProps {
|
||||
export type IThoughtProps = {
|
||||
thought: ThoughtItem
|
||||
isFinished: boolean
|
||||
}
|
||||
|
||||
@@ -17,11 +17,11 @@ const Panel: FC<Props> = ({
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='rounded-md bg-gray-100 overflow-hidden border border-black/5'>
|
||||
<div className='flex items-center px-2 py-1 leading-[18px] bg-gray-50 uppercase text-xs font-medium text-gray-500'>
|
||||
<div className='overflow-hidden rounded-md border border-black/5 bg-gray-100'>
|
||||
<div className='flex items-center bg-gray-50 px-2 py-1 text-xs font-medium uppercase leading-[18px] text-gray-500'>
|
||||
{t(`tools.thought.${isRequest ? 'requestTitle' : 'responseTitle'}`)} {toolName}
|
||||
</div>
|
||||
<div className='p-2 border-t border-black/5 leading-4 text-xs text-gray-700'>{content}</div>
|
||||
<div className='border-t border-black/5 p-2 text-xs leading-4 text-gray-700'>{content}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@ const getIcon = (toolName: string, allToolIcons: Record<string, string | Emoji>)
|
||||
typeof icon === 'string'
|
||||
? (
|
||||
<div
|
||||
className='w-3 h-3 bg-cover bg-center rounded-[3px] shrink-0'
|
||||
className='h-3 w-3 shrink-0 rounded-[3px] bg-cover bg-center'
|
||||
style={{
|
||||
backgroundImage: `url(${icon})`,
|
||||
}}
|
||||
@@ -38,7 +38,7 @@ const getIcon = (toolName: string, allToolIcons: Record<string, string | Emoji>)
|
||||
)
|
||||
: (
|
||||
<AppIcon
|
||||
className='rounded-[3px] shrink-0'
|
||||
className='shrink-0 rounded-[3px]'
|
||||
size='xs'
|
||||
icon={icon?.content}
|
||||
background={icon?.background}
|
||||
@@ -58,35 +58,35 @@ const Tool: FC<Props> = ({
|
||||
const icon = getIcon(name, allToolIcons) as any
|
||||
return (
|
||||
<div>
|
||||
<div className={cn(!isShowDetail && 'shadow-sm', !isShowDetail && 'inline-block', 'max-w-full overflow-x-auto bg-white rounded-md')}>
|
||||
<div className={cn(!isShowDetail && 'shadow-sm', !isShowDetail && 'inline-block', 'max-w-full overflow-x-auto rounded-md bg-white')}>
|
||||
<div
|
||||
className={cn('flex items-center h-7 px-2 cursor-pointer')}
|
||||
className={cn('flex h-7 cursor-pointer items-center px-2')}
|
||||
onClick={() => setIsShowDetail(!isShowDetail)}
|
||||
>
|
||||
{!isFinished && (
|
||||
<RiLoader2Line className='w-3 h-3 text-gray-500 animate-spin shrink-0' />
|
||||
<RiLoader2Line className='h-3 w-3 shrink-0 animate-spin text-gray-500' />
|
||||
)}
|
||||
{isFinished && !isShowDetail && (
|
||||
<CheckCircle className='w-3 h-3 text-[#12B76A] shrink-0' />
|
||||
<CheckCircle className='h-3 w-3 shrink-0 text-[#12B76A]' />
|
||||
)}
|
||||
{isFinished && isShowDetail && (
|
||||
icon
|
||||
)}
|
||||
<span className='mx-1 text-xs font-medium text-gray-500 shrink-0'>
|
||||
<span className='mx-1 shrink-0 text-xs font-medium text-gray-500'>
|
||||
{t(`tools.thought.${isFinished ? 'used' : 'using'}`)}
|
||||
</span>
|
||||
<span
|
||||
className='text-xs font-medium text-gray-700 truncate'
|
||||
className='truncate text-xs font-medium text-gray-700'
|
||||
title={toolLabel}
|
||||
>
|
||||
{toolLabel}
|
||||
</span>
|
||||
<RiArrowDownSLine
|
||||
className={cn(isShowDetail && 'rotate-180', 'ml-1 w-3 h-3 text-gray-500 select-none cursor-pointer shrink-0')}
|
||||
className={cn(isShowDetail && 'rotate-180', 'ml-1 h-3 w-3 shrink-0 cursor-pointer select-none text-gray-500')}
|
||||
/>
|
||||
</div>
|
||||
{isShowDetail && (
|
||||
<div className='border-t border-black/5 p-2 space-y-2 '>
|
||||
<div className='space-y-2 border-t border-black/5 p-2 '>
|
||||
<Panel
|
||||
isRequest={true}
|
||||
toolName={toolName}
|
||||
|
||||
@@ -20,10 +20,10 @@ const TryToAsk: FC<TryToAskProps> = ({
|
||||
|
||||
return (
|
||||
<div className='mb-2 py-2'>
|
||||
<div className={cn('flex items-center justify-between gap-2 mb-2.5', isMobile && 'justify-end')}>
|
||||
<Divider bgStyle='gradient' className='grow h-px rotate-180' />
|
||||
<div className='shrink-0 text-text-tertiary system-xs-medium-uppercase'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.tryToAsk')}</div>
|
||||
{!isMobile && <Divider bgStyle='gradient' className='grow h-px' />}
|
||||
<div className={cn('mb-2.5 flex items-center justify-between gap-2', isMobile && 'justify-end')}>
|
||||
<Divider bgStyle='gradient' className='h-px grow rotate-180' />
|
||||
<div className='system-xs-medium-uppercase shrink-0 text-text-tertiary'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.tryToAsk')}</div>
|
||||
{!isMobile && <Divider bgStyle='gradient' className='h-px grow' />}
|
||||
</div>
|
||||
<div className={cn('flex flex-wrap justify-center', isMobile && 'justify-end')}>
|
||||
{
|
||||
|
||||
@@ -4,13 +4,13 @@ import type { FileEntity } from '@/app/components/base/file-uploader/types'
|
||||
import type { InputVarType } from '@/app/components/workflow/types'
|
||||
import type { FileResponse } from '@/types/workflow'
|
||||
|
||||
export interface MessageMore {
|
||||
export type MessageMore = {
|
||||
time: string
|
||||
tokens: number
|
||||
latency: number | string
|
||||
}
|
||||
|
||||
export interface FeedbackType {
|
||||
export type FeedbackType = {
|
||||
rating: MessageRating
|
||||
content?: string | null
|
||||
}
|
||||
@@ -26,7 +26,7 @@ export type SubmitAnnotationFunc = (
|
||||
|
||||
export type DisplayScene = 'web' | 'console'
|
||||
|
||||
export interface ToolInfoInThought {
|
||||
export type ToolInfoInThought = {
|
||||
name: string
|
||||
label: string
|
||||
input: string
|
||||
@@ -34,7 +34,7 @@ export interface ToolInfoInThought {
|
||||
isFinished: boolean
|
||||
}
|
||||
|
||||
export interface ThoughtItem {
|
||||
export type ThoughtItem = {
|
||||
id: string
|
||||
tool: string // plugin or dataset. May has multi.
|
||||
thought: string
|
||||
@@ -47,7 +47,7 @@ export interface ThoughtItem {
|
||||
message_files?: FileEntity[]
|
||||
}
|
||||
|
||||
export interface CitationItem {
|
||||
export type CitationItem = {
|
||||
content: string
|
||||
data_source_type: string
|
||||
dataset_name: string
|
||||
@@ -62,7 +62,7 @@ export interface CitationItem {
|
||||
word_count: number
|
||||
}
|
||||
|
||||
export interface IChatItem {
|
||||
export type IChatItem = {
|
||||
id: string
|
||||
content: string
|
||||
citation?: CitationItem[]
|
||||
@@ -104,7 +104,7 @@ export interface IChatItem {
|
||||
nextSibling?: string
|
||||
}
|
||||
|
||||
export interface Metadata {
|
||||
export type Metadata = {
|
||||
retriever_resources?: CitationItem[]
|
||||
annotation_reply: {
|
||||
id: string
|
||||
@@ -115,20 +115,20 @@ export interface Metadata {
|
||||
}
|
||||
}
|
||||
|
||||
export interface MessageEnd {
|
||||
export type MessageEnd = {
|
||||
id: string
|
||||
metadata: Metadata
|
||||
files?: FileResponse[]
|
||||
}
|
||||
|
||||
export interface MessageReplace {
|
||||
export type MessageReplace = {
|
||||
id: string
|
||||
task_id: string
|
||||
answer: string
|
||||
conversation_id: string
|
||||
}
|
||||
|
||||
export interface AnnotationReply {
|
||||
export type AnnotationReply = {
|
||||
id: string
|
||||
task_id: string
|
||||
answer: string
|
||||
@@ -137,7 +137,7 @@ export interface AnnotationReply {
|
||||
annotation_author_name: string
|
||||
}
|
||||
|
||||
export interface InputForm {
|
||||
export type InputForm = {
|
||||
type: InputVarType
|
||||
label: string
|
||||
variable: any
|
||||
|
||||
Reference in New Issue
Block a user