hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-09 10:56:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Chore: frontend infrastructure upgrade (#16420)

Browse Source 
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
2025-03-21 17:41:03 +08:00
committed by GitHub
parent e61415223b
commit 7709d9df20
1435 changed files with 13372 additions and 11612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/app/components/base/agent-log-modal/detail.tsx
View File

@@ -79,26 +79,26 @@ const AgentLogDetail: FC<AgentLogDetailProps> = ({
}, [appDetail, conversationID, messageID])
return (
<div className='grow relative flex flex-col'>
<div className='relative flex grow flex-col'>
{/* tab */}
<div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-divider-regular'>
<div className='flex shrink-0 items-center border-b-[0.5px] border-divider-regular px-4'>
<div
className={cn(
'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-text-tertiary cursor-pointer',
'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-text-secondary',
)}
onClick={() => switchTab('DETAIL')}
>{t('runLog.detail')}</div>
<div
className={cn(
'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-text-tertiary cursor-pointer',
'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-text-secondary',
)}
onClick={() => switchTab('TRACING')}
>{t('runLog.tracing')}</div>
</div>
{/* panel detail */}
<div className={cn('grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-background-section')}>
<div className={cn('h-0 grow overflow-y-auto rounded-b-2xl bg-components-panel-bg', currentTab !== 'DETAIL' && '!bg-background-section')}>
{loading && (
<div className='flex h-full items-center justify-center bg-components-panel-bg'>
<Loading />

8
web/app/components/base/agent-log-modal/index.tsx
View File

@@ -35,7 +35,7 @@ const AgentLogModal: FC<AgentLogModalProps> = ({
return (
<div
className={cn('relative flex flex-col py-3 bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xl z-10')}
className={cn('relative z-10 flex flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg py-3 shadow-xl')}
style={{
width: 480,
position: 'fixed',
@@ -45,9 +45,9 @@ const AgentLogModal: FC<AgentLogModalProps> = ({
}}
ref={ref}
>
<h1 className='shrink-0 px-4 py-1 text-md font-semibold text-text-primary'>{t('appLog.runDetail.workflowTitle')}</h1>
<span className='absolute right-3 top-4 p-1 cursor-pointer z-20' onClick={onCancel}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<h1 className='text-md shrink-0 px-4 py-1 font-semibold text-text-primary'>{t('appLog.runDetail.workflowTitle')}</h1>
<span className='absolute right-3 top-4 z-20 cursor-pointer p-1' onClick={onCancel}>
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</span>
<AgentLogDetail
conversationID={currentLogItem.conversationId}

6
web/app/components/base/agent-log-modal/iteration.tsx
View File

@@ -19,12 +19,12 @@ const Iteration: FC<Props> = ({ iterationInfo, isFinal, index }) => {
<div className={cn('px-4 py-2')}>
<div className='flex items-center'>
{isFinal && (
<div className='shrink-0 mr-3 text-text-tertiary text-xs leading-[18px] font-semibold'>{t('appLog.agentLogDetail.finalProcessing')}</div>
<div className='mr-3 shrink-0 text-xs font-semibold leading-[18px] text-text-tertiary'>{t('appLog.agentLogDetail.finalProcessing')}</div>
)}
{!isFinal && (
<div className='shrink-0 mr-3 text-text-tertiary text-xs leading-[18px] font-semibold'>{`${t('appLog.agentLogDetail.iteration').toUpperCase()} ${index}`}</div>
<div className='mr-3 shrink-0 text-xs font-semibold leading-[18px] text-text-tertiary'>{`${t('appLog.agentLogDetail.iteration').toUpperCase()} ${index}`}</div>
)}
<Divider bgStyle='gradient' className='grow h-[1px] mx-0'/>
<Divider bgStyle='gradient' className='mx-0 h-[1px] grow'/>
</div>
<ToolCall
isLLM

36
web/app/components/base/agent-log-modal/result.tsx
View File

@@ -45,7 +45,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
error={error}
/>
</div>
<div className='px-4 py-2 flex flex-col gap-2'>
<div className='flex flex-col gap-2 px-4 py-2'>
<CodeEditor
readOnly
title={<div>INPUT</div>}
@@ -66,53 +66,53 @@ const ResultPanel: FC<ResultPanelProps> = ({
</div>
<div className='px-4 py-2'>
<div className='relative'>
<div className='h-6 leading-6 text-text-tertiary text-xs font-medium'>{t('runLog.meta.title')}</div>
<div className='h-6 text-xs font-medium leading-6 text-text-tertiary'>{t('runLog.meta.title')}</div>
<div className='py-1'>
<div className='flex'>
<div className='shrink-0 w-[104px] px-2 py-[5px] text-text-tertiary text-xs leading-[18px] truncate'>{t('runLog.meta.status')}</div>
<div className='grow px-2 py-[5px] text-text-primary text-xs leading-[18px]'>
<div className='w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary'>{t('runLog.meta.status')}</div>
<div className='grow px-2 py-[5px] text-xs leading-[18px] text-text-primary'>
<span>SUCCESS</span>
</div>
</div>
<div className='flex'>
<div className='shrink-0 w-[104px] px-2 py-[5px] text-text-tertiary text-xs leading-[18px] truncate'>{t('runLog.meta.executor')}</div>
<div className='grow px-2 py-[5px] text-text-primary text-xs leading-[18px]'>
<div className='w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary'>{t('runLog.meta.executor')}</div>
<div className='grow px-2 py-[5px] text-xs leading-[18px] text-text-primary'>
<span>{created_by || 'N/A'}</span>
</div>
</div>
<div className='flex'>
<div className='shrink-0 w-[104px] px-2 py-[5px] text-text-tertiary text-xs leading-[18px] truncate'>{t('runLog.meta.startTime')}</div>
<div className='grow px-2 py-[5px] text-text-primary text-xs leading-[18px]'>
<div className='w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary'>{t('runLog.meta.startTime')}</div>
<div className='grow px-2 py-[5px] text-xs leading-[18px] text-text-primary'>
<span>{formatTime(Date.parse(created_at) / 1000, t('appLog.dateTimeFormat') as string)}</span>
</div>
</div>
<div className='flex'>
<div className='shrink-0 w-[104px] px-2 py-[5px] text-text-tertiary text-xs leading-[18px] truncate'>{t('runLog.meta.time')}</div>
<div className='grow px-2 py-[5px] text-text-primary text-xs leading-[18px]'>
<div className='w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary'>{t('runLog.meta.time')}</div>
<div className='grow px-2 py-[5px] text-xs leading-[18px] text-text-primary'>
<span>{`${elapsed_time?.toFixed(3)}s`}</span>
</div>
</div>
<div className='flex'>
<div className='shrink-0 w-[104px] px-2 py-[5px] text-text-tertiary text-xs leading-[18px] truncate'>{t('runLog.meta.tokens')}</div>
<div className='grow px-2 py-[5px] text-text-primary text-xs leading-[18px]'>
<div className='w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary'>{t('runLog.meta.tokens')}</div>
<div className='grow px-2 py-[5px] text-xs leading-[18px] text-text-primary'>
<span>{`${total_tokens || 0} Tokens`}</span>
</div>
</div>
<div className='flex'>
<div className='shrink-0 w-[104px] px-2 py-[5px] text-text-tertiary text-xs leading-[18px] truncate'>{t('appLog.agentLogDetail.agentMode')}</div>
<div className='grow px-2 py-[5px] text-text-primary text-xs leading-[18px]'>
<div className='w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary'>{t('appLog.agentLogDetail.agentMode')}</div>
<div className='grow px-2 py-[5px] text-xs leading-[18px] text-text-primary'>
<span>{agentMode === 'function_call' ? t('appDebug.agent.agentModeType.functionCall') : t('appDebug.agent.agentModeType.ReACT')}</span>
</div>
</div>
<div className='flex'>
<div className='shrink-0 w-[104px] px-2 py-[5px] text-text-tertiary text-xs leading-[18px] truncate'>{t('appLog.agentLogDetail.toolUsed')}</div>
<div className='grow px-2 py-[5px] text-text-primary text-xs leading-[18px]'>
<div className='w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary'>{t('appLog.agentLogDetail.toolUsed')}</div>
<div className='grow px-2 py-[5px] text-xs leading-[18px] text-text-primary'>
<span>{tools?.length ? tools?.join(', ') : 'Null'}</span>
</div>
</div>
<div className='flex'>
<div className='shrink-0 w-[104px] px-2 py-[5px] text-text-tertiary text-xs leading-[18px] truncate'>{t('appLog.agentLogDetail.iterations')}</div>
<div className='grow px-2 py-[5px] text-text-primary text-xs leading-[18px]'>
<div className='w-[104px] shrink-0 truncate px-2 py-[5px] text-xs leading-[18px] text-text-tertiary'>{t('appLog.agentLogDetail.iterations')}</div>
<div className='grow px-2 py-[5px] text-xs leading-[18px] text-text-primary'>
<span>{iterations}</span>
</div>
</div>

18
web/app/components/base/agent-log-modal/tool-call.tsx
View File

@@ -48,25 +48,25 @@ const ToolCallItem: FC<Props> = ({ toolCall, isLLM = false, isFinal, tokens, obs
return (
<div className={cn('py-1')}>
<div className={cn('group transition-all bg-background-default border border-components-panel-border rounded-2xl shadow-xs hover:shadow-md')}>
<div className={cn('group rounded-2xl border border-components-panel-border bg-background-default shadow-xs transition-all hover:shadow-md')}>
<div
className={cn(
'flex items-center py-3 pl-[6px] pr-3 cursor-pointer',
'flex cursor-pointer items-center py-3 pl-[6px] pr-3',
!collapseState && '!pb-2',
)}
onClick={() => setCollapseState(!collapseState)}
>
<ChevronRight
className={cn(
'shrink-0 w-3 h-3 mr-1 text-text-quaternary transition-all group-hover:text-text-tertiary',
'mr-1 h-3 w-3 shrink-0 text-text-quaternary transition-all group-hover:text-text-tertiary',
!collapseState && 'rotate-90',
)}
/>
<BlockIcon className={cn('shrink-0 mr-2')} type={isLLM ? BlockEnum.LLM : BlockEnum.Tool} toolIcon={toolCall.tool_icon} />
<BlockIcon className={cn('mr-2 shrink-0')} type={isLLM ? BlockEnum.LLM : BlockEnum.Tool} toolIcon={toolCall.tool_icon} />
<div className={cn(
'grow text-text-secondary text-[13px] leading-[16px] font-semibold truncate',
'grow truncate text-[13px] font-semibold leading-[16px] text-text-secondary',
)} title={toolName}>{toolName}</div>
<div className='shrink-0 text-text-tertiary text-xs leading-[18px]'>
<div className='shrink-0 text-xs leading-[18px] text-text-tertiary'>
{toolCall.time_cost && (
<span>{getTime(toolCall.time_cost || 0)}</span>
)}
@@ -75,17 +75,17 @@ const ToolCallItem: FC<Props> = ({ toolCall, isLLM = false, isFinal, tokens, obs
)}
</div>
{toolCall.status === 'success' && (
<RiCheckboxCircleLine className='shrink-0 ml-2 w-3.5 h-3.5 text-[#12B76A]' />
<RiCheckboxCircleLine className='ml-2 h-3.5 w-3.5 shrink-0 text-[#12B76A]' />
)}
{toolCall.status === 'error' && (
<RiErrorWarningLine className='shrink-0 ml-2 w-3.5 h-3.5 text-[#F04438]' />
<RiErrorWarningLine className='ml-2 h-3.5 w-3.5 shrink-0 text-[#F04438]' />
)}
</div>
{!collapseState && (
<div className='pb-2'>
<div className={cn('px-[10px] py-1')}>
{toolCall.status === 'error' && (
<div className='px-3 py-[10px] bg-[#fef3f2] rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] text-xs leading-[18px] text-[#d92d20] shadow-xs'>{toolCall.error}</div>
<div className='rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] bg-[#fef3f2] px-3 py-[10px] text-xs leading-[18px] text-[#d92d20] shadow-xs'>{toolCall.error}</div>
)}
</div>
{toolCall.tool_input && (

2
web/app/components/base/answer-icon/index.tsx
View File

@@ -38,7 +38,7 @@ const AnswerIcon: FC<AnswerIconProps> = ({
style={{ background: background || '#D5F5F6' }}
>
{isValidImageIcon
? <img src={imageUrl} className="w-full h-full rounded-full" alt="answer icon" />
? <img src={imageUrl} className="h-full w-full rounded-full" alt="answer icon" />
: (icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />
}
</div>

6
web/app/components/base/app-icon-picker/ImageInput.tsx
View File

@@ -101,8 +101,8 @@ const ImageInput: FC<UploaderProps> = ({
{
!inputImage
? <>
<ImagePlus className="w-[30px] h-[30px] mb-3 pointer-events-none" />
<div className="text-sm font-medium mb-[2px]">
<ImagePlus className="pointer-events-none mb-3 h-[30px] w-[30px]" />
<div className="mb-[2px] text-sm font-medium">
<span className="pointer-events-none">Drop your image here, or&nbsp;</span>
<button className="text-components-button-primary-bg" onClick={() => inputRef.current?.click()}>browse</button>
<input
@@ -112,7 +112,7 @@ const ImageInput: FC<UploaderProps> = ({
onChange={handleLocalFileInput}
/>
</div>
<div className="text-xs pointer-events-none">Supports PNG, JPG, JPEG, WEBP and GIF</div>
<div className="pointer-events-none text-xs">Supports PNG, JPG, JPEG, WEBP and GIF</div>
</>
: handleShowImage()
}

8
web/app/components/base/app-icon-picker/index.tsx
View File

@@ -113,13 +113,13 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
wrapperClassName={className}
className={cn(s.container, '!w-[362px] !p-0')}
>
{!DISABLE_UPLOAD_IMAGE_AS_ICON && <div className="p-2 pb-0 w-full">
<div className='p-1 flex items-center justify-center gap-2 bg-background-body rounded-xl'>
{!DISABLE_UPLOAD_IMAGE_AS_ICON && <div className="w-full p-2 pb-0">
<div className='flex items-center justify-center gap-2 rounded-xl bg-background-body p-1'>
{tabs.map(tab => (
<button
key={tab.key}
className={`
p-2 flex-1 flex justify-center items-center h-8 rounded-xl text-sm shrink-0 font-medium
flex h-8 flex-1 shrink-0 items-center justify-center rounded-xl p-2 text-sm font-medium
${activeTab === tab.key && 'bg-components-main-nav-nav-button-bg-active shadow-md'}
`}
onClick={() => setActiveTab(tab.key as AppIconType)}
@@ -134,7 +134,7 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
<ImageInput className={activeTab === 'image' ? 'block' : 'hidden'} onImageInput={handleImageInput} />
<Divider className='m-0' />
<div className='w-full flex items-center justify-center p-3 gap-2'>
<div className='flex w-full items-center justify-center gap-2 p-3'>
<Button className='w-full' onClick={() => onClose?.()}>
{t('app.iconPicker.cancel')}
</Button>

4
web/app/components/base/app-icon/index.tsx
View File

@@ -61,8 +61,8 @@ const AppIcon: FC<AppIconProps> = ({
onClick={onClick}
>
{isValidImageIcon
// eslint-disable-next-line @next/next/no-img-element
? <img src={imageUrl} className="w-full h-full" alt="app icon" />
? <img src={imageUrl} className="h-full w-full" alt="app icon" />
: (innerIcon || ((icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />))
}
</span>

4
web/app/components/base/app-unavailable.tsx
View File

@@ -17,8 +17,8 @@ const AppUnavailable: FC<IAppUnavailableProps> = ({
const { t } = useTranslation()
return (
<div className='flex items-center justify-center w-screen h-screen'>
<h1 className='mr-5 h-[50px] leading-[50px] pr-5 text-[24px] font-medium'
<div className='flex h-screen w-screen items-center justify-center'>
<h1 className='mr-5 h-[50px] pr-5 text-[24px] font-medium leading-[50px]'
style={{
borderRight: '1px solid rgba(0,0,0,.3)',
}}>{code}</h1>

1
web/app/components/base/audio-btn/audio.player.manager.ts
View File

@@ -12,7 +12,6 @@ export class AudioPlayerManager {
private audioPlayers: AudioPlayer | null = null
private msgId: string | undefined
// eslint-disable-next-line
private constructor() {
}

10
web/app/components/base/audio-btn/index.tsx
View File

@@ -7,7 +7,7 @@ import Tooltip from '@/app/components/base/tooltip'
import Loading from '@/app/components/base/loading'
import { AudioPlayerManager } from '@/app/components/base/audio-btn/audio.player.manager'
interface AudioBtnProps {
type AudioBtnProps = {
id?: string
voice?: string
value?: string
@@ -87,18 +87,18 @@ const AudioBtn = ({
>
<button
disabled={audioState === 'loading'}
className={`box-border w-6 h-6 flex items-center justify-center cursor-pointer ${isAudition ? 'p-0.5' : 'p-0 rounded-md bg-white'}`}
className={`box-border flex h-6 w-6 cursor-pointer items-center justify-center ${isAudition ? 'p-0.5' : 'rounded-md bg-white p-0'}`}
onClick={handleToggle}
>
{audioState === 'loading'
? (
<div className='w-full h-full rounded-md flex items-center justify-center'>
<div className='flex h-full w-full items-center justify-center rounded-md'>
<Loading />
</div>
)
: (
<div className={`w-full h-full rounded-md flex items-center justify-center ${!isAudition ? 'hover:bg-gray-50' : 'hover:bg-gray-50'}`}>
<div className={`w-4 h-4 ${(audioState === 'playing') ? s.pauseIcon : s.playIcon}`}></div>
<div className={`flex h-full w-full items-center justify-center rounded-md ${!isAudition ? 'hover:bg-gray-50' : 'hover:bg-gray-50'}`}>
<div className={`h-4 w-4 ${(audioState === 'playing') ? s.pauseIcon : s.playIcon}`}></div>
</div>
)}
</button>

18
web/app/components/base/audio-gallery/AudioPlayer.tsx
View File

@@ -286,32 +286,32 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({ src }) => {
}, [duration])
return (
<div className='flex items-end gap-2 h-9 min-w-[240px] max-w-[420px] p-2 bg-components-chat-input-audio-bg-alt backdrop-blur-sm rounded-[10px] border border-components-panel-border-subtle shadow-xs'>
<div className='flex h-9 min-w-[240px] max-w-[420px] items-end gap-2 rounded-[10px] border border-components-panel-border-subtle bg-components-chat-input-audio-bg-alt p-2 shadow-xs backdrop-blur-sm'>
<audio ref={audioRef} src={src} preload="auto"/>
<button className='shrink-0 inline-flex items-center justify-center border-none text-text-accent hover:text-text-accent-secondary transition-all cursor-pointer disabled:text-components-button-primary-bg-disabled' onClick={togglePlay} disabled={!isAudioAvailable}>
<button className='inline-flex shrink-0 cursor-pointer items-center justify-center border-none text-text-accent transition-all hover:text-text-accent-secondary disabled:text-components-button-primary-bg-disabled' onClick={togglePlay} disabled={!isAudioAvailable}>
{isPlaying
? (
<RiPauseCircleFill className='w-5 h-5' />
<RiPauseCircleFill className='h-5 w-5' />
)
: (
<RiPlayLargeFill className='w-5 h-5' />
<RiPlayLargeFill className='h-5 w-5' />
)}
</button>
<div className={cn(isAudioAvailable && 'grow')} hidden={!isAudioAvailable}>
<div className='h-8 flex items-center justify-center'>
<div className='flex h-8 items-center justify-center'>
<canvas
ref={canvasRef}
className='relative grow h-6 w-full flex items-center justify-center cursor-pointer'
className='relative flex h-6 w-full grow cursor-pointer items-center justify-center'
onClick={handleCanvasInteraction}
onMouseMove={handleMouseMove}
onMouseDown={handleCanvasInteraction}
/>
<div className='inline-flex items-center justify-center min-w-[50px] text-text-accent-secondary system-xs-medium'>
<span className='px-0.5 py-1 rounded-[10px]'>{formatTime(duration)}</span>
<div className='system-xs-medium inline-flex min-w-[50px] items-center justify-center text-text-accent-secondary'>
<span className='rounded-[10px] px-0.5 py-1'>{formatTime(duration)}</span>
</div>
</div>
</div>
<div className='absolute top-0 left-0 w-full h-full flex items-center justify-center text-text-quaternary' hidden={isAudioAvailable}>{t('common.operation.audioSourceUnavailable')}</div>
<div className='absolute left-0 top-0 flex h-full w-full items-center justify-center text-text-quaternary' hidden={isAudioAvailable}>{t('common.operation.audioSourceUnavailable')}</div>
</div>
)
}

86
web/app/components/base/auto-height-textarea/common.tsx
View File

@@ -1,53 +1,53 @@
import { forwardRef, useEffect, useRef } from 'react'
import { useEffect, useRef } from 'react'
import cn from '@/utils/classnames'
type AutoHeightTextareaProps =
& React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>
& { outerClassName?: string }
const AutoHeightTextarea = forwardRef<HTMLTextAreaElement, AutoHeightTextareaProps>(
(
{
outerClassName,
value,
className,
placeholder,
autoFocus,
disabled,
...rest
},
outRef,
) => {
const innerRef = useRef<HTMLTextAreaElement>(null)
const ref = outRef || innerRef
useEffect(() => {
if (autoFocus && !disabled && value) {
if (typeof ref !== 'function') {
ref.current?.setSelectionRange(`${value}`.length, `${value}`.length)
ref.current?.focus()
}
}
}, [autoFocus, disabled, ref])
return (
<div className={outerClassName}>
<div className='relative'>
<div className={cn(className, 'invisible whitespace-pre-wrap break-all')}>
{!value ? placeholder : `${value}`.replace(/\n$/, '\n ')}
</div>
<textarea
ref={ref}
placeholder={placeholder}
className={cn(className, 'disabled:bg-transparent absolute inset-0 outline-none border-none appearance-none resize-none w-full h-full')}
value={value}
disabled={disabled}
{...rest}
/>
</div>
</div>
)
const AutoHeightTextarea = (
{
ref: outRef,
outerClassName,
value,
className,
placeholder,
autoFocus,
disabled,
...rest
}: AutoHeightTextareaProps & {
ref: React.RefObject<HTMLTextAreaElement>;
},
)
) => {
const innerRef = useRef<HTMLTextAreaElement>(null)
const ref = outRef || innerRef
useEffect(() => {
if (autoFocus && !disabled && value) {
if (typeof ref !== 'function') {
ref.current?.setSelectionRange(`${value}`.length, `${value}`.length)
ref.current?.focus()
}
}
}, [autoFocus, disabled, ref])
return (
(<div className={outerClassName}>
<div className='relative'>
<div className={cn(className, 'invisible whitespace-pre-wrap break-all')}>
{!value ? placeholder : `${value}`.replace(/\n$/, '\n ')}
</div>
<textarea
ref={ref}
placeholder={placeholder}
className={cn(className, 'absolute inset-0 h-full w-full resize-none appearance-none border-none outline-none disabled:bg-transparent')}
value={value}
disabled={disabled}
{...rest}
/>
</div>
</div>)
)
}
AutoHeightTextarea.displayName = 'AutoHeightTextarea'

136
web/app/components/base/auto-height-textarea/index.tsx
View File

@@ -1,4 +1,4 @@
import { forwardRef, useEffect, useRef } from 'react'
import { useEffect, useRef } from 'react'
import cn from '@/utils/classnames'
import { sleep } from '@/utils'
@@ -16,68 +16,80 @@ type IProps = {
onKeyUp?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
}
const AutoHeightTextarea = forwardRef(
(
{ value, onChange, placeholder, className, wrapperClassName, minHeight = 36, maxHeight = 96, autoFocus, controlFocus, onKeyDown, onKeyUp }: IProps,
outerRef: any,
) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const ref = outerRef || useRef<HTMLTextAreaElement>(null)
const doFocus = () => {
if (ref.current) {
ref.current.setSelectionRange(value.length, value.length)
ref.current.focus()
return true
}
return false
}
const focus = async () => {
if (!doFocus()) {
let hasFocus = false
await sleep(100)
hasFocus = doFocus()
if (!hasFocus)
focus()
}
}
useEffect(() => {
if (autoFocus)
focus()
}, [])
useEffect(() => {
if (controlFocus)
focus()
}, [controlFocus])
return (
<div className={`relative ${wrapperClassName}`}>
<div className={cn(className, 'invisible whitespace-pre-wrap break-all overflow-y-auto')} style={{
minHeight,
maxHeight,
paddingRight: (value && value.trim().length > 10000) ? 140 : 130,
}}>
{!value ? placeholder : value.replace(/\n$/, '\n ')}
</div>
<textarea
ref={ref}
autoFocus={autoFocus}
className={cn(className, 'absolute inset-0 resize-none overflow-auto')}
style={{
paddingRight: (value && value.trim().length > 10000) ? 140 : 130,
}}
placeholder={placeholder}
onChange={onChange}
onKeyDown={onKeyDown}
onKeyUp={onKeyUp}
value={value}
/>
</div>
)
const AutoHeightTextarea = (
{
ref: outerRef,
value,
onChange,
placeholder,
className,
wrapperClassName,
minHeight = 36,
maxHeight = 96,
autoFocus,
controlFocus,
onKeyDown,
onKeyUp,
}: IProps & {
ref: React.RefObject<unknown>;
},
)
) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const ref = outerRef || useRef<HTMLTextAreaElement>(null)
const doFocus = () => {
if (ref.current) {
ref.current.setSelectionRange(value.length, value.length)
ref.current.focus()
return true
}
return false
}
const focus = async () => {
if (!doFocus()) {
let hasFocus = false
await sleep(100)
hasFocus = doFocus()
if (!hasFocus)
focus()
}
}
useEffect(() => {
if (autoFocus)
focus()
}, [])
useEffect(() => {
if (controlFocus)
focus()
}, [controlFocus])
return (
(<div className={`relative ${wrapperClassName}`}>
<div className={cn(className, 'invisible overflow-y-auto whitespace-pre-wrap break-all')} style={{
minHeight,
maxHeight,
paddingRight: (value && value.trim().length > 10000) ? 140 : 130,
}}>
{!value ? placeholder : value.replace(/\n$/, '\n ')}
</div>
<textarea
ref={ref}
autoFocus={autoFocus}
className={cn(className, 'absolute inset-0 resize-none overflow-auto')}
style={{
paddingRight: (value && value.trim().length > 10000) ? 140 : 130,
}}
placeholder={placeholder}
onChange={onChange}
onKeyDown={onKeyDown}
onKeyUp={onKeyUp}
value={value}
/>
</div>)
)
}
AutoHeightTextarea.displayName = 'AutoHeightTextarea'

2
web/app/components/base/avatar/index.tsx
View File

@@ -42,7 +42,7 @@ const Avatar = ({
style={style}
>
<div
className={cn(textClassName, 'text-center text-white scale-[0.4]')}
className={cn(textClassName, 'scale-[0.4] text-center text-white')}
style={style}
>
{name[0].toLocaleUpperCase()}

4
web/app/components/base/badge.tsx
View File

@@ -20,13 +20,13 @@ const Badge = ({
return (
<div
className={cn(
'relative inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep leading-3 text-text-tertiary',
'relative inline-flex h-5 items-center rounded-[5px] border border-divider-deep px-[5px] leading-3 text-text-tertiary',
uppercase ? 'system-2xs-medium-uppercase' : 'system-xs-medium',
className,
)}
>
{hasRedCornerMark && (
<div className='absolute top-[-2px] right-[-2px] w-1.5 h-1.5 border border-components-badge-status-light-error-border-inner bg-components-badge-status-light-error-bg rounded-[2px] shadow-sm'>
<div className='absolute right-[-2px] top-[-2px] h-1.5 w-1.5 rounded-[2px] border border-components-badge-status-light-error-border-inner bg-components-badge-status-light-error-bg shadow-sm'>
</div>
)}
{children || text}

4
web/app/components/base/block-input/index.tsx
View File

@@ -134,8 +134,8 @@ const BlockInput: FC<IBlockInputProps> = ({
{textAreaContent}
{/* footer */}
{!readonly && (
<div className='pl-4 pb-2 flex'>
<div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{currentValue?.length}</div>
<div className='flex pb-2 pl-4'>
<div className="h-[18px] rounded-md bg-gray-100 px-1 text-xs leading-[18px] text-gray-500">{currentValue?.length}</div>
</div>
)}

6
web/app/components/base/button/add-button.tsx
View File

@@ -4,7 +4,7 @@ import React from 'react'
import { RiAddLine } from '@remixicon/react'
import cn from '@/utils/classnames'
interface Props {
type Props = {
className?: string
onClick: () => void
}
@@ -14,8 +14,8 @@ const AddButton: FC<Props> = ({
onClick,
}) => {
return (
<div className={cn(className, 'p-1 rounded-md cursor-pointer hover:bg-state-base-hover select-none')} onClick={onClick}>
<RiAddLine className='w-4 h-4 text-text-tertiary' />
<div className={cn(className, 'cursor-pointer select-none rounded-md p-1 hover:bg-state-base-hover')} onClick={onClick}>
<RiAddLine className='h-4 w-4 text-text-tertiary' />
</div>
)
}

2
web/app/components/base/button/index.stories.tsx
View File

@@ -99,7 +99,7 @@ export const WithIcon: Story = {
variant: 'primary',
children: (
<>
<RocketLaunchIcon className="h-4 w-4 mr-1.5 stroke-[1.8px]" />
<RocketLaunchIcon className="mr-1.5 h-4 w-4 stroke-[1.8px]" />
Launch
</>
),

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

@@ -188,8 +188,8 @@ const ChatWrapper = () => {
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'>
<div className='flex h-[50vh] items-center justify-center px-4 py-12'>
<div className='flex max-w-[720px] grow gap-4'>
<AppIcon
size='xl'
iconType={appData?.site.icon_type}
@@ -197,7 +197,7 @@ const ChatWrapper = () => {
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'>
<div className='body-lg-regular grow rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary'>
<Markdown content={welcomeMessage.content} />
<SuggestedQuestions item={welcomeMessage} />
</div>
@@ -206,7 +206,7 @@ const ChatWrapper = () => {
)
}
return (
<div className={cn('h-[50vh] py-12 flex flex-col items-center justify-center gap-3')}>
<div className={cn('flex h-[50vh] flex-col items-center justify-center gap-3 py-12')}>
<AppIcon
size='xl'
iconType={appData?.site.icon_type}
@@ -214,8 +214,8 @@ const ChatWrapper = () => {
background={appData?.site.icon_background}
imageUrl={appData?.site.icon_url}
/>
<div className='px-4 max-w-[768px]'>
<Markdown className='!text-text-tertiary !body-2xl-regular' content={welcomeMessage.content} />
<div className='max-w-[768px] px-4'>
<Markdown className='!body-2xl-regular !text-text-tertiary' content={welcomeMessage.content} />
</div>
</div>
)
@@ -232,7 +232,7 @@ const ChatWrapper = () => {
return (
<div
className='h-full bg-chatbot-bg overflow-hidden'
className='h-full overflow-hidden bg-chatbot-bg'
>
<Chat
appData={appData}

22
web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
View File

@@ -64,11 +64,11 @@ const HeaderInMobile = () => {
return (
<>
<div className='shrink-0 flex items-center px-2 py-3 gap-1 bg-mask-top2bottom-gray-50-to-transparent'>
<div className='flex shrink-0 items-center gap-1 bg-mask-top2bottom-gray-50-to-transparent px-2 py-3'>
<ActionButton size='l' className='shrink-0' onClick={() => setShowSidebar(true)}>
<RiMenuLine className='w-[18px] h-[18px]' />
<RiMenuLine className='h-[18px] w-[18px]' />
</ActionButton>
<div className='grow flex justify-center items-center'>
<div className='flex grow items-center justify-center'>
{!currentConversationId && (
<>
<AppIcon
@@ -79,7 +79,7 @@ const HeaderInMobile = () => {
imageUrl={appData?.site.icon_url}
background={appData?.site.icon_background}
/>
<div className='text-text-secondary system-md-semibold truncate'>
<div className='system-md-semibold truncate text-text-secondary'>
{appData?.site.title}
</div>
</>
@@ -102,22 +102,22 @@ const HeaderInMobile = () => {
/>
</div>
{showSidebar && (
<div className='fixed inset-0 z-50 flex p-1 bg-background-overlay'
<div className='fixed inset-0 z-50 flex bg-background-overlay p-1'
onClick={() => setShowSidebar(false)}
>
<div className='flex h-full w-[calc(100vw_-_40px)] bg-components-panel-bg backdrop-blur-sm rounded-xl shadow-lg' onClick={e => e.stopPropagation()}>
<div className='flex h-full w-[calc(100vw_-_40px)] rounded-xl bg-components-panel-bg shadow-lg backdrop-blur-sm' onClick={e => e.stopPropagation()}>
<Sidebar />
</div>
</div>
)}
{showChatSettings && (
<div className='fixed inset-0 z-50 flex justify-end p-1 bg-background-overlay'
<div className='fixed inset-0 z-50 flex justify-end bg-background-overlay p-1'
onClick={() => setShowChatSettings(false)}
>
<div className='flex flex-col h-full w-[calc(100vw_-_40px)] bg-components-panel-bg backdrop-blur-sm rounded-xl shadow-lg' onClick={e => e.stopPropagation()}>
<div className='flex items-center gap-3 px-4 py-3 rounded-t-2xl border-b border-divider-subtle'>
<Message3Fill className='shrink-0 w-6 h-6' />
<div className='grow text-text-secondary system-xl-semibold'>{t('share.chat.chatSettingsTitle')}</div>
<div className='flex h-full w-[calc(100vw_-_40px)] flex-col rounded-xl bg-components-panel-bg shadow-lg backdrop-blur-sm' onClick={e => e.stopPropagation()}>
<div className='flex items-center gap-3 rounded-t-2xl border-b border-divider-subtle px-4 py-3'>
<Message3Fill className='h-6 w-6 shrink-0' />
<div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
</div>
<div className='p-4'>
<InputsFormContent showTip />

16
web/app/components/base/chat/chat-with-history/header/index.tsx
View File

@@ -72,12 +72,12 @@ const Header = () => {
return (
<>
<div className='shrink-0 h-14 p-3 flex items-center justify-between'>
<div className={cn('flex items-center gap-1 transition-all duration-200 ease-in-out', !isSidebarCollapsed && 'opacity-0 user-select-none')}>
<div className='flex h-14 shrink-0 items-center justify-between p-3'>
<div className={cn('flex items-center gap-1 transition-all duration-200 ease-in-out', !isSidebarCollapsed && 'user-select-none opacity-0')}>
<ActionButton className={cn(!isSidebarCollapsed && 'cursor-default')} size='l' onClick={() => handleSidebarCollapse(false)}>
<RiLayoutRight2Line className='w-[18px] h-[18px]' />
<RiLayoutRight2Line className='h-[18px] w-[18px]' />
</ActionButton>
<div className='shrink-0 mr-1'>
<div className='mr-1 shrink-0'>
<AppIcon
size='large'
iconType={appData?.site.icon_type}
@@ -87,7 +87,7 @@ const Header = () => {
/>
</div>
{!currentConversationId && (
<div className={cn('grow text-text-secondary system-md-semibold truncate')}>{appData?.site.title}</div>
<div className={cn('system-md-semibold grow truncate text-text-secondary')}>{appData?.site.title}</div>
)}
{currentConversationId && currentConversationItem && isSidebarCollapsed && (
<>
@@ -103,7 +103,7 @@ const Header = () => {
/>
</>
)}
<div className='px-1 flex items-center'>
<div className='flex items-center px-1'>
<div className='h-[14px] w-px bg-divider-regular'></div>
</div>
{isSidebarCollapsed && (
@@ -118,7 +118,7 @@ const Header = () => {
disabled={!currentConversationId || isResponding}
onClick={handleNewConversation}
>
<RiEditBoxLine className='w-[18px] h-[18px]' />
<RiEditBoxLine className='h-[18px] w-[18px]' />
</ActionButton>
</div>
</Tooltip>
@@ -130,7 +130,7 @@ const Header = () => {
popupContent={t('share.chat.resetChat')}
>
<ActionButton size='l' onClick={handleNewConversation}>
<RiResetLeftLine className='w-[18px] h-[18px]' />
<RiResetLeftLine className='h-[18px] w-[18px]' />
</ActionButton>
</Tooltip>
)}

8
web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
View File

@@ -32,17 +32,17 @@ const MobileOperationDropdown = ({
onClick={() => setOpen(v => !v)}
>
<ActionButton size='l' state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
<RiMoreFill className='w-[18px] h-[18px]' />
<RiMoreFill className='h-[18px] w-[18px]' />
</ActionButton>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-40">
<div
className={'min-w-[160px] p-1 bg-components-panel-bg-blur backdrop-blur-sm rounded-xl border-[0.5px] border-components-panel-border shadow-lg'}
className={'min-w-[160px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-sm'}
>
<div className='flex items-center space-x-1 px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover' onClick={handleResetChat}>
<div className='system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover' onClick={handleResetChat}>
<span className='grow'>{t('share.chat.resetChat')}</span>
</div>
<div className='flex items-center space-x-1 px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover' onClick={handleViewChatSettings}>
<div className='system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover' onClick={handleViewChatSettings}>
<span className='grow'>{t('share.chat.viewChatSettings')}</span>
</div>
</div>

12
web/app/components/base/chat/chat-with-history/header/operation.tsx
View File

@@ -43,25 +43,25 @@ const Operation: FC<Props> = ({
<PortalToFollowElemTrigger
onClick={() => setOpen(v => !v)}
>
<div className={cn('flex items-center p-1.5 pl-2 rounded-lg text-text-secondary cursor-pointer hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
<div className={cn('flex cursor-pointer items-center rounded-lg p-1.5 pl-2 text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
<div className='system-md-semibold'>{title}</div>
<RiArrowDownSLine className='w-4 h-4 ' />
<RiArrowDownSLine className='h-4 w-4 ' />
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-50">
<div
className={'min-w-[120px] p-1 bg-components-panel-bg-blur backdrop-blur-sm rounded-xl border-[0.5px] border-components-panel-border shadow-lg'}
className={'min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-sm'}
>
<div className={cn('flex items-center space-x-1 px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover')} onClick={togglePin}>
<div className={cn('system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover')} onClick={togglePin}>
<span className='grow'>{isPinned ? t('explore.sidebar.action.unpin') : t('explore.sidebar.action.pin')}</span>
</div>
{isShowRenameConversation && (
<div className={cn('flex items-center space-x-1 px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover')} onClick={onRenameConversation}>
<div className={cn('system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover')} onClick={onRenameConversation}>
<span className='grow'>{t('explore.sidebar.action.rename')}</span>
</div>
)}
{isShowDelete && (
<div className={cn('group flex items-center space-x-1 px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete} >
<div className={cn('system-md-regular group flex cursor-pointer items-center space-x-1 rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete} >
<span className='grow'>{t('explore.sidebar.action.delete')}</span>
</div>
)}

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

@@ -67,14 +67,14 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
return (
<div className={cn(
'h-full flex bg-background-default-burn',
'flex h-full bg-background-default-burn',
isMobile && 'flex-col',
className,
)}>
{!isMobile && (
<div className={cn(
'flex flex-col w-[236px] p-1 pr-0 transition-all duration-200 ease-in-out',
isSidebarCollapsed && 'w-0 !p-0 overflow-hidden',
'flex w-[236px] flex-col p-1 pr-0 transition-all duration-200 ease-in-out',
isSidebarCollapsed && 'w-0 overflow-hidden !p-0',
)}>
<Sidebar />
</div>
@@ -86,7 +86,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
{isSidebarCollapsed && (
<div
className={cn(
'z-20 absolute top-0 w-[256px] h-full flex flex-col p-2 transition-all duration-500 ease-in-out',
'absolute top-0 z-20 flex h-full w-[256px] flex-col p-2 transition-all duration-500 ease-in-out',
showSidePanel ? 'left-0' : 'left-[-248px]',
)}
onMouseEnter={() => setShowSidePanel(true)}
@@ -95,7 +95,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
<Sidebar isPanel />
</div>
)}
<div className={cn('h-full flex flex-col bg-chatbot-bg border-[0,5px] border-components-panel-border-subtle overflow-hidden', isMobile ? 'rounded-t-2xl' : 'rounded-2xl')}>
<div className={cn('flex h-full flex-col overflow-hidden border-[0,5px] border-components-panel-border-subtle bg-chatbot-bg', isMobile ? 'rounded-t-2xl' : 'rounded-2xl')}>
{!isMobile && <Header />}
{appChatListDataLoading && (
<Loading type='app' />

8
web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
View File

@@ -36,10 +36,10 @@ const InputsFormContent = ({ showTip }: Props) => {
<div className='space-y-4'>
{inputsForms.map(form => (
<div key={form.variable} className='space-y-1'>
<div className='h-6 flex items-center gap-1'>
<div className='text-text-secondary system-md-semibold'>{form.label}</div>
<div className='flex h-6 items-center gap-1'>
<div className='system-md-semibold text-text-secondary'>{form.label}</div>
{!form.required && (
<div className='text-text-tertiary system-xs-regular'>{t('appDebug.variableTable.optional')}</div>
<div className='system-xs-regular text-text-tertiary'>{t('appDebug.variableTable.optional')}</div>
)}
</div>
{form.type === InputVarType.textInput && (
@@ -109,7 +109,7 @@ const InputsFormContent = ({ showTip }: Props) => {
</div>
))}
{showTip && (
<div className='text-text-tertiary system-xs-regular'>{t('share.chat.chatFormTip')}</div>
<div className='system-xs-regular text-text-tertiary'>{t('share.chat.chatFormTip')}</div>
)}
</div>
)

22
web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
View File

@@ -25,23 +25,23 @@ const InputsFormNode = ({
} = useChatWithHistoryContext()
return (
<div className={cn('pt-6 px-4 flex flex-col items-center', isMobile && 'pt-4')}>
<div className={cn('flex flex-col items-center px-4 pt-6', isMobile && 'pt-4')}>
<div className={cn(
'w-full max-w-[672px] bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-md',
collapsed && 'bg-components-card-bg border border-components-card-border shadow-none',
'w-full max-w-[672px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-md',
collapsed && 'border border-components-card-border bg-components-card-bg shadow-none',
)}>
<div className={cn(
'flex items-center gap-3 px-6 py-4 rounded-t-2xl',
'flex items-center gap-3 rounded-t-2xl px-6 py-4',
!collapsed && 'border-b border-divider-subtle',
isMobile && 'px-4 py-3',
)}>
<Message3Fill className='shrink-0 w-6 h-6' />
<div className='grow text-text-secondary system-xl-semibold'>{t('share.chat.chatSettingsTitle')}</div>
<Message3Fill className='h-6 w-6 shrink-0' />
<div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
{collapsed && (
<Button className='text-text-tertiary uppercase' size='small' variant='ghost' onClick={() => setCollapsed(false)}>{currentConversationId ? t('common.operation.view') : t('common.operation.edit')}</Button>
<Button className='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(false)}>{currentConversationId ? t('common.operation.view') : t('common.operation.edit')}</Button>
)}
{!collapsed && currentConversationId && (
<Button className='text-text-tertiary uppercase' size='small' variant='ghost' onClick={() => setCollapsed(true)}>{t('common.operation.close')}</Button>
<Button className='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(true)}>{t('common.operation.close')}</Button>
)}
</div>
{!collapsed && (
@@ -67,9 +67,9 @@ const InputsFormNode = ({
)}
</div>
{collapsed && (
<div className='py-4 flex items-center w-full max-w-[720px]'>
<Divider bgStyle='gradient' className='basis-1/2 h-px rotate-180' />
<Divider bgStyle='gradient' className='basis-1/2 h-px' />
<div className='flex w-full max-w-[720px] items-center py-4'>
<Divider bgStyle='gradient' className='h-px basis-1/2 rotate-180' />
<Divider bgStyle='gradient' className='h-px basis-1/2' />
</div>
)}
</div>

10
web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx
View File

@@ -26,14 +26,14 @@ const ViewFormDropdown = () => {
onClick={() => setOpen(v => !v)}
>
<ActionButton size='l' state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
<RiChatSettingsLine className='w-[18px] h-[18px]' />
<RiChatSettingsLine className='h-[18px] w-[18px]' />
</ActionButton>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-50">
<div className='w-[400px] bg-components-panel-bg backdrop-blur-sm rounded-2xl border-[0.5px] border-components-panel-border shadow-lg'>
<div className='flex items-center gap-3 px-6 py-4 rounded-t-2xl border-b border-divider-subtle'>
<Message3Fill className='shrink-0 w-6 h-6' />
<div className='grow text-text-secondary system-xl-semibold'>{t('share.chat.chatSettingsTitle')}</div>
<div className='w-[400px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-sm'>
<div className='flex items-center gap-3 rounded-t-2xl border-b border-divider-subtle px-6 py-4'>
<Message3Fill className='h-6 w-6 shrink-0' />
<div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
</div>
<div className='p-6'>
<InputsFormContent showTip />

24
web/app/components/base/chat/chat-with-history/sidebar/index.tsx
View File

@@ -78,11 +78,11 @@ const Sidebar = ({ isPanel }: Props) => {
return (
<div className={cn(
'grow flex flex-col',
isPanel && 'rounded-xl bg-components-panel-bg border-[0.5px] border-components-panel-border-subtle shadow-lg',
'flex grow flex-col',
isPanel && 'rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-bg shadow-lg',
)}>
<div className={cn(
'shrink-0 flex items-center gap-3 p-3 pr-2',
'flex shrink-0 items-center gap-3 p-3 pr-2',
)}>
<div className='shrink-0'>
<AppIcon
@@ -93,25 +93,25 @@ const Sidebar = ({ isPanel }: Props) => {
imageUrl={appData?.site.icon_url}
/>
</div>
<div className={cn('grow text-text-secondary system-md-semibold truncate')}>{appData?.site.title}</div>
<div className={cn('system-md-semibold grow truncate text-text-secondary')}>{appData?.site.title}</div>
{!isMobile && isSidebarCollapsed && (
<ActionButton size='l' onClick={() => handleSidebarCollapse(false)}>
<RiExpandRightLine className='w-[18px] h-[18px]' />
<RiExpandRightLine className='h-[18px] w-[18px]' />
</ActionButton>
)}
{!isMobile && !isSidebarCollapsed && (
<ActionButton size='l' onClick={() => handleSidebarCollapse(true)}>
<RiLayoutLeft2Line className='w-[18px] h-[18px]' />
<RiLayoutLeft2Line className='h-[18px] w-[18px]' />
</ActionButton>
)}
</div>
<div className='shrink-0 px-3 py-4'>
<Button variant='secondary-accent' disabled={isResponding} className='w-full justify-center' onClick={handleNewConversation}>
<RiEditBoxLine className='w-4 h-4 mr-1' />
<RiEditBoxLine className='mr-1 h-4 w-4' />
{t('share.chat.newChat')}
</Button>
</div>
<div className='grow h-0 pt-4 px-3 space-y-2 overflow-y-auto'>
<div className='h-0 grow space-y-2 overflow-y-auto px-3 pt-4'>
{/* pinned list */}
{!!pinnedConversationList.length && (
<div className='mb-4'>
@@ -135,17 +135,17 @@ const Sidebar = ({ isPanel }: Props) => {
/>
)}
</div>
<div className='shrink-0 p-3 flex items-center justify-between'>
<div className='flex shrink-0 items-center justify-between p-3'>
<MenuDropdown placement='top-start' data={appData?.site} />
{/* powered by */}
<div className='shrink-0'>
{!appData?.custom_config?.remove_webapp_brand && (
<div className={cn(
'shrink-0 px-2 flex items-center gap-1.5',
'flex shrink-0 items-center gap-1.5 px-2',
)}>
<div className='text-text-tertiary system-2xs-medium-uppercase'>{t('share.chat.poweredBy')}</div>
<div className='system-2xs-medium-uppercase text-text-tertiary'>{t('share.chat.poweredBy')}</div>
{appData?.custom_config?.replace_webapp_logo && (
<img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block w-auto h-5' />
<img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
)}
{!appData?.custom_config?.replace_webapp_logo && (
<LogoSite className='!h-5' />

6
web/app/components/base/chat/chat-with-history/sidebar/item.tsx
View File

@@ -31,12 +31,12 @@ const Item: FC<ItemProps> = ({
ref={ref}
key={item.id}
className={cn(
'group flex p-1 pl-3 rounded-lg cursor-pointer text-components-menu-item-text system-sm-medium hover:bg-state-base-hover',
isSelected && 'bg-state-accent-active hover:bg-state-accent-active text-text-accent',
'system-sm-medium group flex cursor-pointer rounded-lg p-1 pl-3 text-components-menu-item-text hover:bg-state-base-hover',
isSelected && 'bg-state-accent-active text-text-accent hover:bg-state-accent-active',
)}
onClick={() => onChangeConversation(item.id)}
>
<div className='grow p-1 pl-0 truncate' title={item.name}>{item.name}</div>
<div className='grow truncate p-1 pl-0' title={item.name}>{item.name}</div>
{item.id !== '' && (
<div className='shrink-0' onClick={e => e.stopPropagation()}>
<Operation

2
web/app/components/base/chat/chat-with-history/sidebar/list.tsx
View File

@@ -21,7 +21,7 @@ const List: FC<ListProps> = ({
return (
<div className='space-y-0.5'>
{title && (
<div className='px-3 pt-2 pb-1 text-text-tertiary system-xs-medium-uppercase'>{title}</div>
<div className='system-xs-medium-uppercase px-3 pb-1 pt-2 text-text-tertiary'>{title}</div>
)}
{list.map(item => (
<Item

18
web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
View File

@@ -63,33 +63,33 @@ const Operation: FC<Props> = ({
: ActionButtonState.Default
}
>
<RiMoreFill className='w-4 h-4' />
<RiMoreFill className='h-4 w-4' />
</ActionButton>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-50">
<div
ref={ref}
className={'min-w-[120px] p-1 bg-components-panel-bg-blur backdrop-blur-sm rounded-xl border-[0.5px] border-components-panel-border shadow-lg'}
className={'min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-sm'}
onMouseEnter={setIsHovering}
onMouseLeave={setNotHovering}
onClick={(e) => {
e.stopPropagation()
}}
>
<div className={cn('flex items-center space-x-1 px-2 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover')} onClick={togglePin}>
{isPinned && <RiUnpinLine className='shrink-0 w-4 h-4 text-text-tertiary' />}
{!isPinned && <RiPushpinLine className='shrink-0 w-4 h-4 text-text-tertiary' />}
<div className={cn('system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover')} onClick={togglePin}>
{isPinned && <RiUnpinLine className='h-4 w-4 shrink-0 text-text-tertiary' />}
{!isPinned && <RiPushpinLine className='h-4 w-4 shrink-0 text-text-tertiary' />}
<span className='grow'>{isPinned ? t('explore.sidebar.action.unpin') : t('explore.sidebar.action.pin')}</span>
</div>
{isShowRenameConversation && (
<div className={cn('flex items-center space-x-1 px-2 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover')} onClick={onRenameConversation}>
<RiEditLine className='shrink-0 w-4 h-4 text-text-tertiary' />
<div className={cn('system-md-regular flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover')} onClick={onRenameConversation}>
<RiEditLine className='h-4 w-4 shrink-0 text-text-tertiary' />
<span className='grow'>{t('explore.sidebar.action.rename')}</span>
</div>
)}
{isShowDelete && (
<div className={cn('group flex items-center space-x-1 px-2 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete} >
<RiDeleteBinLine className={cn('shrink-0 w-4 h-4 text-text-tertiary group-hover:text-text-destructive')} />
<div className={cn('system-md-regular group flex cursor-pointer items-center space-x-1 rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive')} onClick={onDelete} >
<RiDeleteBinLine className={cn('h-4 w-4 shrink-0 text-text-tertiary group-hover:text-text-destructive')} />
<span className='grow'>{t('explore.sidebar.action.delete')}</span>
</div>
)}

4
web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
View File

@@ -30,8 +30,8 @@ const RenameModal: FC<IRenameModalProps> = ({
isShow={isShow}
onClose={onClose}
>
<div className={'mt-6 font-medium text-sm leading-[21px] text-text-primary'}>{t('common.chat.conversationName')}</div>
<Input className='mt-2 w-full h-10'
<div className={'mt-6 text-sm font-medium leading-[21px] text-text-primary'}>{t('common.chat.conversationName')}</div>
<Input className='mt-2 h-10 w-full'
value={tempName}
onChange={e => setTempName(e.target.value)}
placeholder={t('common.chat.conversationNamePlaceholder') || ''}

2
web/app/components/base/chat/chat/answer/agent-content.tsx
View File

@@ -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
}

2
web/app/components/base/chat/chat/answer/basic-content.tsx
View File

@@ -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> = ({

18
web/app/components/base/chat/chat/answer/index.tsx
View File

@@ -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>

10
web/app/components/base/chat/chat/answer/more.tsx
View File

@@ -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}

20
web/app/components/base/chat/chat/answer/operation.tsx
View File

@@ -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>

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

@@ -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}

20
web/app/components/base/chat/chat/answer/tool-detail.tsx
View File

@@ -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>

14
web/app/components/base/chat/chat/answer/workflow-process.tsx
View File

@@ -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 && (

12
web/app/components/base/chat/chat/chat-input-area/index.tsx
View File

@@ -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

34
web/app/components/base/chat/chat/chat-input-area/operation.tsx
View File

@@ -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)

14
web/app/components/base/chat/chat/citation/index.tsx
View File

@@ -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>
)

38
web/app/components/base/chat/chat/citation/popup.tsx
View File

@@ -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 && (

8
web/app/components/base/chat/chat/citation/progress-tooltip.tsx
View File

@@ -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>

4
web/app/components/base/chat/chat/citation/tooltip.tsx
View File

@@ -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>

25
web/app/components/base/chat/chat/index.tsx
View File

@@ -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>
)

4
web/app/components/base/chat/chat/log/index.tsx
View File

@@ -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>
)

4
web/app/components/base/chat/chat/question.stories.tsx
View File

@@ -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
web/app/components/base/chat/chat/question.tsx
View File

@@ -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>
)
}

2
web/app/components/base/chat/chat/thought/index.tsx
View File

@@ -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
}

6
web/app/components/base/chat/chat/thought/panel.tsx
View File

@@ -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>
)
}

20
web/app/components/base/chat/chat/thought/tool.tsx
View File

@@ -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}

8
web/app/components/base/chat/chat/try-to-ask.tsx
View File

@@ -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')}>
{

22
web/app/components/base/chat/chat/type.ts
View File

@@ -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

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

@@ -187,8 +187,8 @@ const ChatWrapper = () => {
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'>
<div className='flex h-[50vh] items-center justify-center px-4 py-12'>
<div className='flex max-w-[720px] grow gap-4'>
<AppIcon
size='xl'
iconType={appData?.site.icon_type}
@@ -196,7 +196,7 @@ const ChatWrapper = () => {
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'>
<div className='body-lg-regular grow rounded-2xl bg-chat-bubble-bg px-4 py-3 text-text-primary'>
<Markdown content={welcomeMessage.content} />
<SuggestedQuestions item={welcomeMessage} />
</div>
@@ -205,7 +205,7 @@ const ChatWrapper = () => {
)
}
return (
<div className={cn('h-[50vh] py-12 flex flex-col items-center justify-center gap-3')}>
<div className={cn('flex h-[50vh] flex-col items-center justify-center gap-3 py-12')}>
<AppIcon
size='xl'
iconType={appData?.site.icon_type}
@@ -213,8 +213,8 @@ const ChatWrapper = () => {
background={appData?.site.icon_background}
imageUrl={appData?.site.icon_url}
/>
<div className='px-4 max-w-[768px]'>
<Markdown className='!text-text-tertiary !body-2xl-regular' content={welcomeMessage.content} />
<div className='max-w-[768px] px-4'>
<Markdown className='!body-2xl-regular !text-text-tertiary' content={welcomeMessage.content} />
</div>
</div>
)

16
web/app/components/base/chat/embedded-chatbot/header/index.tsx
View File

@@ -36,17 +36,17 @@ const Header: FC<IHeaderProps> = ({
} = useEmbeddedChatbotContext()
if (!isMobile) {
return (
<div className='shrink-0 h-14 p-3 flex items-center justify-end'>
<div className='flex h-14 shrink-0 items-center justify-end p-3'>
<div className='flex items-center gap-1'>
{/* powered by */}
<div className='shrink-0'>
{!appData?.custom_config?.remove_webapp_brand && (
<div className={cn(
'shrink-0 px-2 flex items-center gap-1.5',
'flex shrink-0 items-center gap-1.5 px-2',
)}>
<div className='text-text-tertiary system-2xs-medium-uppercase'>{t('share.chat.poweredBy')}</div>
<div className='system-2xs-medium-uppercase text-text-tertiary'>{t('share.chat.poweredBy')}</div>
{appData?.custom_config?.replace_webapp_logo && (
<img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block w-auto h-5' />
<img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
)}
{!appData?.custom_config?.replace_webapp_logo && (
<LogoSite className='!h-5' />
@@ -62,7 +62,7 @@ const Header: FC<IHeaderProps> = ({
popupContent={t('share.chat.resetChat')}
>
<ActionButton size='l' onClick={onCreateNewChat}>
<RiResetLeftLine className='w-[18px] h-[18px]' />
<RiResetLeftLine className='h-[18px] w-[18px]' />
</ActionButton>
</Tooltip>
)}
@@ -76,10 +76,10 @@ const Header: FC<IHeaderProps> = ({
return (
<div
className={cn('shrink-0 flex items-center justify-between h-14 px-3 rounded-t-2xl')}
className={cn('flex h-14 shrink-0 items-center justify-between rounded-t-2xl px-3')}
style={Object.assign({}, CssTransform(theme?.backgroundHeaderColorStyle ?? ''), CssTransform(theme?.headerBorderBottomStyle ?? '')) }
>
<div className="grow flex items-center space-x-3">
<div className="flex grow items-center space-x-3">
{customerIcon}
<div
className='system-md-semibold truncate'
@@ -94,7 +94,7 @@ const Header: FC<IHeaderProps> = ({
popupContent={t('share.chat.resetChat')}
>
<ActionButton size='l' onClick={onCreateNewChat}>
<RiResetLeftLine className={cn('w-[18px] h-[18px]', theme?.colorPathOnHeader)} />
<RiResetLeftLine className={cn('h-[18px] w-[18px]', theme?.colorPathOnHeader)} />
</ActionButton>
</Tooltip>
)}

16
web/app/components/base/chat/embedded-chatbot/index.tsx
View File

@@ -56,7 +56,7 @@ const Chatbot = () => {
{!isMobile && <Loading type='app' />}
{isMobile && (
<div className={cn('relative')}>
<div className={cn('flex flex-col h-[calc(100vh_-_60px)] border-[0.5px] border-components-panel-border rounded-2xl shadow-xs')}>
<div className={cn('flex h-[calc(100vh_-_60px)] flex-col rounded-2xl border-[0.5px] border-components-panel-border shadow-xs')}>
<Loading type='app' />
</div>
</div>
@@ -71,7 +71,7 @@ const Chatbot = () => {
{!isMobile && <AppUnavailable />}
{isMobile && (
<div className={cn('relative')}>
<div className={cn('flex flex-col h-[calc(100vh_-_60px)] border-[0.5px] border-components-panel-border rounded-2xl shadow-xs')}>
<div className={cn('flex h-[calc(100vh_-_60px)] flex-col rounded-2xl border-[0.5px] border-components-panel-border shadow-xs')}>
<AppUnavailable />
</div>
</div>
@@ -83,7 +83,7 @@ const Chatbot = () => {
<div className='relative'>
<div
className={cn(
'flex flex-col border border-components-panel-border-subtle rounded-2xl',
'flex flex-col rounded-2xl border border-components-panel-border-subtle',
isMobile ? 'h-[calc(100vh_-_60px)] border-[0.5px] border-components-panel-border shadow-xs' : 'h-[100vh] bg-chatbot-bg',
)}
style={isMobile ? Object.assign({}, CssTransform(themeBuilder?.theme?.backgroundHeaderColorStyle ?? '')) : {}}
@@ -95,7 +95,7 @@ const Chatbot = () => {
theme={themeBuilder?.theme}
onCreateNewChat={handleNewConversation}
/>
<div className={cn('grow flex flex-col overflow-y-auto', isMobile && '!h-[calc(100vh_-_3rem)] bg-chatbot-bg rounded-2xl')}>
<div className={cn('flex grow flex-col overflow-y-auto', isMobile && '!h-[calc(100vh_-_3rem)] rounded-2xl bg-chatbot-bg')}>
{appChatListDataLoading && (
<Loading type='app' />
)}
@@ -106,14 +106,14 @@ const Chatbot = () => {
</div>
{/* powered by */}
{isMobile && (
<div className='shrink-0 h-[60px] pl-2 flex items-center'>
<div className='flex h-[60px] shrink-0 items-center pl-2'>
{!appData?.custom_config?.remove_webapp_brand && (
<div className={cn(
'shrink-0 px-2 flex items-center gap-1.5',
'flex shrink-0 items-center gap-1.5 px-2',
)}>
<div className='text-text-tertiary system-2xs-medium-uppercase'>{t('share.chat.poweredBy')}</div>
<div className='system-2xs-medium-uppercase text-text-tertiary'>{t('share.chat.poweredBy')}</div>
{appData?.custom_config?.replace_webapp_logo && (
<img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block w-auto h-5' />
<img src={appData?.custom_config?.replace_webapp_logo} alt='logo' className='block h-5 w-auto' />
)}
{!appData?.custom_config?.replace_webapp_logo && (
<LogoSite className='!h-5' />

8
web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
View File

@@ -36,10 +36,10 @@ const InputsFormContent = ({ showTip }: Props) => {
<div className='space-y-4'>
{inputsForms.map(form => (
<div key={form.variable} className='space-y-1'>
<div className='h-6 flex items-center gap-1'>
<div className='text-text-secondary system-md-semibold'>{form.label}</div>
<div className='flex h-6 items-center gap-1'>
<div className='system-md-semibold text-text-secondary'>{form.label}</div>
{!form.required && (
<div className='text-text-tertiary system-xs-regular'>{t('appDebug.variableTable.optional')}</div>
<div className='system-xs-regular text-text-tertiary'>{t('appDebug.variableTable.optional')}</div>
)}
</div>
{form.type === InputVarType.textInput && (
@@ -109,7 +109,7 @@ const InputsFormContent = ({ showTip }: Props) => {
</div>
))}
{showTip && (
<div className='text-text-tertiary system-xs-regular'>{t('share.chat.chatFormTip')}</div>
<div className='system-xs-regular text-text-tertiary'>{t('share.chat.chatFormTip')}</div>
)}
</div>
)

22
web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
View File

@@ -25,23 +25,23 @@ const InputsFormNode = ({
} = useEmbeddedChatbotContext()
return (
<div className={cn('mb-6 pt-6 px-4 flex flex-col items-center', isMobile && 'mb-4 pt-4')}>
<div className={cn('mb-6 flex flex-col items-center px-4 pt-6', isMobile && 'mb-4 pt-4')}>
<div className={cn(
'w-full max-w-[672px] bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-md',
collapsed && 'bg-components-card-bg border border-components-card-border shadow-none',
'w-full max-w-[672px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-md',
collapsed && 'border border-components-card-border bg-components-card-bg shadow-none',
)}>
<div className={cn(
'flex items-center gap-3 px-6 py-4 rounded-t-2xl',
'flex items-center gap-3 rounded-t-2xl px-6 py-4',
!collapsed && 'border-b border-divider-subtle',
isMobile && 'px-4 py-3',
)}>
<Message3Fill className='shrink-0 w-6 h-6' />
<div className='grow text-text-secondary system-xl-semibold'>{t('share.chat.chatSettingsTitle')}</div>
<Message3Fill className='h-6 w-6 shrink-0' />
<div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
{collapsed && (
<Button className='text-text-tertiary uppercase' size='small' variant='ghost' onClick={() => setCollapsed(false)}>{currentConversationId ? t('common.operation.view') : t('common.operation.edit')}</Button>
<Button className='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(false)}>{currentConversationId ? t('common.operation.view') : t('common.operation.edit')}</Button>
)}
{!collapsed && currentConversationId && (
<Button className='text-text-tertiary uppercase' size='small' variant='ghost' onClick={() => setCollapsed(true)}>{t('common.operation.close')}</Button>
<Button className='uppercase text-text-tertiary' size='small' variant='ghost' onClick={() => setCollapsed(true)}>{t('common.operation.close')}</Button>
)}
</div>
{!collapsed && (
@@ -67,9 +67,9 @@ const InputsFormNode = ({
)}
</div>
{collapsed && (
<div className='py-4 flex items-center w-full max-w-[720px]'>
<Divider bgStyle='gradient' className='basis-1/2 h-px rotate-180' />
<Divider bgStyle='gradient' className='basis-1/2 h-px' />
<div className='flex w-full max-w-[720px] items-center py-4'>
<Divider bgStyle='gradient' className='h-px basis-1/2 rotate-180' />
<Divider bgStyle='gradient' className='h-px basis-1/2' />
</div>
)}
</div>

10
web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
View File

@@ -30,14 +30,14 @@ const ViewFormDropdown = ({ iconColor }: Props) => {
onClick={() => setOpen(v => !v)}
>
<ActionButton size='l' state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
<RiChatSettingsLine className={cn('w-[18px] h-[18px]', iconColor)} />
<RiChatSettingsLine className={cn('h-[18px] w-[18px]', iconColor)} />
</ActionButton>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-50">
<div className='w-[400px] bg-components-panel-bg backdrop-blur-sm rounded-2xl border-[0.5px] border-components-panel-border shadow-lg'>
<div className='flex items-center gap-3 px-6 py-4 rounded-t-2xl border-b border-divider-subtle'>
<Message3Fill className='shrink-0 w-6 h-6' />
<div className='grow text-text-secondary system-xl-semibold'>{t('share.chat.chatSettingsTitle')}</div>
<div className='w-[400px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-sm'>
<div className='flex items-center gap-3 rounded-t-2xl border-b border-divider-subtle px-6 py-4'>
<Message3Fill className='h-6 w-6 shrink-0' />
<div className='system-xl-semibold grow text-text-secondary'>{t('share.chat.chatSettingsTitle')}</div>
</div>
<div className='p-6'>
<InputsFormContent showTip />

6
web/app/components/base/chat/embedded-chatbot/theme/utils.ts
View File

@@ -1,9 +1,9 @@
export function hexToRGBA(hex: string, opacity: number): string {
hex = hex.replace('#', '')
const r = parseInt(hex.slice(0, 2), 16)
const g = parseInt(hex.slice(2, 4), 16)
const b = parseInt(hex.slice(4, 6), 16)
const r = Number.parseInt(hex.slice(0, 2), 16)
const g = Number.parseInt(hex.slice(2, 4), 16)
const b = Number.parseInt(hex.slice(4, 6), 16)
// Returning an RGB color object
return `rgba(${r},${g},${b},${opacity.toString()})`

12
web/app/components/base/checkbox/index.tsx
View File

@@ -15,9 +15,9 @@ const Checkbox = ({ checked, onCheck, className, disabled, mixed }: CheckboxProp
return (
<div
className={cn(
'w-4 h-4 rounded-[4px] bg-components-checkbox-bg-unchecked border border-components-checkbox-border hover:bg-components-checkbox-bg-unchecked-hover hover:border-components-checkbox-border-hover shadow-xs cursor-pointer',
disabled && 'border-components-checkbox-border-disabled bg-components-checkbox-bg-disabled hover:border-components-checkbox-border-disabled hover:bg-components-checkbox-bg-disabled cursor-not-allowed',
mixed && s.mixed,
'h-4 w-4 cursor-pointer rounded-[4px] border border-components-checkbox-border bg-components-checkbox-bg-unchecked shadow-xs hover:border-components-checkbox-border-hover',
mixed ? s.mixed : 'hover:bg-components-checkbox-bg-unchecked-hover',
disabled && 'cursor-not-allowed border-components-checkbox-border-disabled bg-components-checkbox-bg-disabled hover:border-components-checkbox-border-disabled hover:bg-components-checkbox-bg-disabled',
className,
)}
onClick={() => {
@@ -31,8 +31,8 @@ const Checkbox = ({ checked, onCheck, className, disabled, mixed }: CheckboxProp
return (
<div
className={cn(
'w-4 h-4 flex items-center justify-center rounded-[4px] bg-components-checkbox-bg hover:bg-components-checkbox-bg-hover text-components-checkbox-icon shadow-xs cursor-pointer',
disabled && 'bg-components-checkbox-bg-disabled-checked hover:bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled cursor-not-allowed',
'flex h-4 w-4 cursor-pointer items-center justify-center rounded-[4px] bg-components-checkbox-bg text-components-checkbox-icon shadow-xs hover:bg-components-checkbox-bg-hover',
disabled && 'cursor-not-allowed bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled hover:bg-components-checkbox-bg-disabled-checked',
className,
)}
onClick={() => {
@@ -42,7 +42,7 @@ const Checkbox = ({ checked, onCheck, className, disabled, mixed }: CheckboxProp
onCheck?.()
}}
>
<RiCheckLine className={cn('w-3 h-3')} />
<RiCheckLine className={cn('h-3 w-3')} />
</div>
)
}

20
web/app/components/base/chip/index.tsx
View File

@@ -52,10 +52,10 @@ const Chip: FC<Props> = ({
className='block'
>
<div className={cn(
'flex items-center min-h-8 px-2 py-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal cursor-pointer hover:bg-state-base-hover-alt',
'flex min-h-8 cursor-pointer items-center rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt',
open && !value && '!bg-state-base-hover-alt hover:bg-state-base-hover-alt',
!open && !!value && '!bg-components-button-secondary-bg shadow-xs !border-components-button-secondary-border hover:!bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover',
open && !!value && '!bg-components-button-secondary-bg-hover !border-components-button-secondary-border-hover shadow-xs hover:!bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover',
!open && !!value && '!border-components-button-secondary-border !bg-components-button-secondary-bg shadow-xs hover:border-components-button-secondary-border-hover hover:!bg-components-button-secondary-bg-hover',
open && !!value && '!border-components-button-secondary-border-hover !bg-components-button-secondary-bg-hover shadow-xs hover:border-components-button-secondary-border-hover hover:!bg-components-button-secondary-bg-hover',
className,
)}>
{showLeftIcon && (
@@ -65,14 +65,14 @@ const Chip: FC<Props> = ({
)}
</div>
)}
<div className='grow first-line:p-1 flex items-center gap-0.5'>
<div className='flex grow items-center gap-0.5 first-line:p-1'>
<div className={cn('system-sm-regular text-text-tertiary', !!value && 'text-text-secondary')}>
{triggerContent}
</div>
</div>
{!value && <RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />}
{!!value && (
<div className='p-[1px] cursor-pointer group/clear' onClick={(e) => {
<div className='group/clear cursor-pointer p-[1px]' onClick={(e) => {
e.stopPropagation()
onClear()
}}>
@@ -82,19 +82,19 @@ const Chip: FC<Props> = ({
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1002]'>
<div className={cn('relative w-[240px] bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg', panelClassName)}>
<div className='p-1 max-h-72 overflow-auto'>
<div className={cn('relative w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg', panelClassName)}>
<div className='max-h-72 overflow-auto p-1'>
{items.map(item => (
<div
key={item.value}
className='flex items-center gap-2 pl-3 py-[6px] px-2 rounded-lg cursor-pointer hover:bg-state-base-hover'
className='flex cursor-pointer items-center gap-2 rounded-lg px-2 py-[6px] pl-3 hover:bg-state-base-hover'
onClick={() => {
onSelect(item)
setOpen(false)
}}
>
<div title={item.name} className='grow text-text-secondary system-sm-medium truncate'>{item.name}</div>
{value === item.value && <RiCheckLine className='shrink-0 w-4 h-4 text-util-colors-blue-light-blue-light-600' />}
<div title={item.name} className='system-sm-medium grow truncate text-text-secondary'>{item.name}</div>
{value === item.value && <RiCheckLine className='h-4 w-4 shrink-0 text-util-colors-blue-light-blue-light-600' />}
</div>
))}
</div>

10
web/app/components/base/confirm/index.tsx
View File

@@ -84,18 +84,18 @@ function Confirm({
return null
return createPortal(
<div className={'fixed inset-0 flex items-center justify-center z-[10000000] bg-background-overlay'}
<div className={'fixed inset-0 z-[10000000] flex items-center justify-center bg-background-overlay'}
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
}}>
<div ref={dialogRef} className={'relative w-full max-w-[480px] overflow-hidden'}>
<div className='flex flex-col items-start max-w-full rounded-2xl border-[0.5px] border-solid border-components-panel-border shadows-shadow-lg bg-components-panel-bg'>
<div className='flex pt-6 pl-6 pr-6 pb-4 flex-col items-start gap-2 self-stretch'>
<div className='shadows-shadow-lg flex max-w-full flex-col items-start rounded-2xl border-[0.5px] border-solid border-components-panel-border bg-components-panel-bg'>
<div className='flex flex-col items-start gap-2 self-stretch pb-4 pl-6 pr-6 pt-6'>
<div className='title-2xl-semi-bold text-text-primary'>{title}</div>
<div className='system-md-regular text-text-tertiary w-full'>{content}</div>
<div className='system-md-regular w-full text-text-tertiary'>{content}</div>
</div>
<div className='flex p-6 gap-2 justify-end items-start self-stretch'>
<div className='flex items-start justify-end gap-2 self-stretch p-6'>
{showCancel && <Button onClick={onCancel}>{cancelTxt}</Button>}
{showConfirm && <Button variant={'primary'} destructive={type !== 'info'} loading={isLoading} disabled={isDisabled} onClick={onConfirm}>{confirmTxt}</Button>}
</div>

40
web/app/components/base/content-dialog/index.tsx
View File

@@ -1,5 +1,5 @@
import { Fragment, type ReactNode } from 'react'
import { Transition } from '@headlessui/react'
import type { ReactNode } from 'react'
import { Transition, TransitionChild } from '@headlessui/react'
import classNames from '@/utils/classnames'
type ContentDialogProps = {
@@ -19,39 +19,31 @@ const ContentDialog = ({
<Transition
show={show}
as="div"
className="absolute left-0 top-0 w-full h-full z-20 p-2 box-border"
className="absolute left-0 top-0 z-20 box-border h-full w-full p-2"
>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<TransitionChild>
<div
className="absolute left-0 inset-0 w-full bg-app-detail-overlay-bg"
className={classNames(
'absolute left-0 inset-0 w-full bg-app-detail-overlay-bg',
'duration-300 ease-in data-[closed]:opacity-0',
'data-[enter]:opacity-100',
'data-[leave]:opacity-0',
)}
onClick={onClose}
/>
</Transition.Child>
</TransitionChild>
<Transition.Child
as={Fragment}
enter="transform transition ease-out duration-300"
enterFrom="-translate-x-full"
enterTo="translate-x-0"
leave="transform transition ease-in duration-200"
leaveFrom="translate-x-0"
leaveTo="-translate-x-full"
>
<TransitionChild>
<div className={classNames(
'absolute left-0 w-full bg-app-detail-bg border-r border-divider-burn',
'duration-100 ease-in data-[closed]:-translate-x-full',
'data-[enter]:ease-out data-[enter]:duration-300 data-[enter]:translate-x-0',
'data-[leave]:ease-in data-[leave]:duration-200 data-[leave]:-translate-x-full',
className,
)}>
{children}
</div>
</Transition.Child>
</TransitionChild>
</Transition>
)
}

4
web/app/components/base/copy-btn/index.tsx
View File

@@ -36,7 +36,7 @@ const CopyBtn = ({
>
<div
onMouseLeave={onMouseLeave}
className={'box-border p-0.5 flex items-center justify-center rounded-md bg-components-button-secondary-bg cursor-pointer'}
className={'box-border flex cursor-pointer items-center justify-center rounded-md bg-components-button-secondary-bg p-0.5'}
style={!isPlain
? {
boxShadow: '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
@@ -44,7 +44,7 @@ const CopyBtn = ({
: {}}
onClick={onClickCopy}
>
<div className={`w-6 h-6 rounded-md hover:bg-components-button-secondary-bg-hover ${s.copyIcon} ${isCopied ? s.copied : ''}`}></div>
<div className={`h-6 w-6 rounded-md hover:bg-components-button-secondary-bg-hover ${s.copyIcon} ${isCopied ? s.copied : ''}`}></div>
</div>
</Tooltip>
</div>

8
web/app/components/base/copy-feedback/index.tsx
View File

@@ -44,8 +44,8 @@ const CopyFeedback = ({ content }: Props) => {
onClick={onClickCopy}
onMouseLeave={onMouseLeave}
>
{isCopied && <RiClipboardFill className='w-4 h-4' />}
{!isCopied && <RiClipboardLine className='w-4 h-4' />}
{isCopied && <RiClipboardFill className='h-4 w-4' />}
{!isCopied && <RiClipboardLine className='h-4 w-4' />}
</div>
</ActionButton>
</Tooltip>
@@ -76,13 +76,13 @@ export const CopyFeedbackNew = ({ content, className }: Pick<Props, 'className'
}
>
<div
className={`w-8 h-8 cursor-pointer hover:bg-components-button-ghost-bg-hover rounded-lg ${className ?? ''
className={`h-8 w-8 cursor-pointer rounded-lg hover:bg-components-button-ghost-bg-hover ${className ?? ''
}`}
>
<div
onClick={onClickCopy}
onMouseLeave={onMouseLeave}
className={`w-full h-full ${copyStyle.copyIcon} ${isCopied ? copyStyle.copied : ''
className={`h-full w-full ${copyStyle.copyIcon} ${isCopied ? copyStyle.copied : ''
}`}
></div>
</div>

4
web/app/components/base/copy-icon/index.tsx
View File

@@ -39,10 +39,10 @@ export const CopyIcon = ({ content }: Props) => {
<div onMouseLeave={onMouseLeave}>
{!isCopied
? (
<Clipboard className='mx-1 w-3.5 h-3.5 text-text-tertiary cursor-pointer' onClick={onClickCopy} />
<Clipboard className='mx-1 h-3.5 w-3.5 cursor-pointer text-text-tertiary' onClick={onClickCopy} />
)
: (
<ClipboardCheck className='mx-1 w-3.5 h-3.5 text-text-tertiary' />
<ClipboardCheck className='mx-1 h-3.5 w-3.5 text-text-tertiary' />
)
}
</div>

6
web/app/components/base/corner-label/index.tsx
View File

@@ -10,9 +10,9 @@ type CornerLabelProps = {
const CornerLabel: React.FC<CornerLabelProps> = ({ label, className, labelClassName }) => {
return (
<div className={cn('group/corner-label inline-flex items-start', className)}>
<Corner className='w-[13px] h-5 text-background-section group-hover/corner-label:text-background-section-burn' />
<div className={cn('flex py-1 pr-2 items-center gap-0.5 bg-background-section group-hover/corner-label:bg-background-section-burn', labelClassName)}>
<div className='text-text-tertiary system-2xs-medium-uppercase'>{label}</div>
<Corner className='h-5 w-[13px] text-background-section group-hover/corner-label:text-background-section-burn' />
<div className={cn('flex items-center gap-0.5 bg-background-section py-1 pr-2 group-hover/corner-label:bg-background-section-burn', labelClassName)}>
<div className='system-2xs-medium-uppercase text-text-tertiary'>{label}</div>
</div>
</div>
)

4
web/app/components/base/date-and-time-picker/calendar/days-of-week.tsx
View File

@@ -5,11 +5,11 @@ export const DaysOfWeek = () => {
const daysOfWeek = useDaysOfWeek()
return (
<div className='grid grid-cols-7 gap-x-0.5 p-2 border-b-[0.5px] border-divider-regular'>
<div className='grid grid-cols-7 gap-x-0.5 border-b-[0.5px] border-divider-regular p-2'>
{daysOfWeek.map(day => (
<div
key={day}
className='flex items-center justify-center text-text-tertiary system-2xs-medium'
className='system-2xs-medium flex items-center justify-center text-text-tertiary'
>
{day}
</div>

6
web/app/components/base/date-and-time-picker/calendar/item.tsx
View File

@@ -16,13 +16,13 @@ const Item: FC<CalendarItemProps> = ({
<button
onClick={() => onClick(date)}
className={cn(
'relative px-1 py-2 rounded-lg flex items-center justify-center system-sm-medium',
'system-sm-medium relative flex items-center justify-center rounded-lg px-1 py-2',
isCurrentMonth ? 'text-text-secondary' : 'text-text-quaternary hover:text-text-secondary',
isSelected ? 'text-components-button-primary-text system-sm-medium bg-components-button-primary-bg' : 'hover:bg-state-base-hover',
isSelected ? 'system-sm-medium bg-components-button-primary-bg text-components-button-primary-text' : 'hover:bg-state-base-hover',
)}
>
{date.date()}
{isToday && <div className='absolute bottom-1 mx-auto w-1 h-1 rounded-full bg-components-button-primary-bg' />}
{isToday && <div className='absolute bottom-1 mx-auto h-1 w-1 rounded-full bg-components-button-primary-bg' />}
</button>
)
}

2
web/app/components/base/date-and-time-picker/common/option-list-item.tsx
View File

@@ -22,7 +22,7 @@ const OptionListItem: FC<OptionListItemProps> = ({
<li
ref={listItemRef}
className={cn(
'px-1.5 py-1 rounded-md flex items-center justify-center text-components-button-ghost-text system-xs-medium cursor-pointer',
'system-xs-medium flex cursor-pointer items-center justify-center rounded-md px-1.5 py-1 text-components-button-ghost-text',
isSelected ? 'bg-components-button-ghost-bg-hover' : 'hover:bg-components-button-ghost-bg-hover',
)}
onClick={() => {

10
web/app/components/base/date-and-time-picker/date-picker/footer.tsx
View File

@@ -17,18 +17,18 @@ const Footer: FC<DatePickerFooterProps> = ({
return (
<div className={cn(
'flex justify-between items-center p-2 border-t-[0.5px] border-divider-regular',
'flex items-center justify-between border-t-[0.5px] border-divider-regular p-2',
!needTimePicker && 'justify-end',
)}>
{/* Time Picker */}
{needTimePicker && (
<button
type='button'
className='flex items-center rounded-md px-1.5 py-1 gap-x-[1px] border-[0.5px] border-components-button-secondary-border system-xs-medium
bg-components-button-secondary-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] text-components-button-secondary-accent-text'
className='system-xs-medium flex items-center gap-x-[1px] rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1.5
py-1 text-components-button-secondary-accent-text shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'
onClick={handleClickTimePicker}
>
<RiTimeLine className='w-3.5 h-3.5' />
<RiTimeLine className='h-3.5 w-3.5' />
{view === ViewType.date && <span>{displayTime}</span>}
{view === ViewType.time && <span>{t('time.operation.pickDate')}</span>}
</button>
@@ -37,7 +37,7 @@ const Footer: FC<DatePickerFooterProps> = ({
{/* Now */}
<button
type='button'
className='flex items-center justify-center px-1.5 py-1 text-components-button-secondary-accent-text system-xs-medium'
className='system-xs-medium flex items-center justify-center px-1.5 py-1 text-components-button-secondary-accent-text'
onClick={handleSelectCurrentDate}
>
<span className='px-[3px]'>{t('time.operation.now')}</span>

14
web/app/components/base/date-and-time-picker/date-picker/header.tsx
View File

@@ -12,27 +12,27 @@ const Header: FC<DatePickerHeaderProps> = ({
const months = useMonths()
return (
<div className='flex items-center mx-2 mt-2'>
<div className='mx-2 mt-2 flex items-center'>
<div className='flex-1'>
<button
onClick={handleOpenYearMonthPicker}
className='flex items-center gap-x-0.5 px-2 py-1.5 rounded-lg hover:bg-state-base-hover text-text-primary system-md-semibold'
className='system-md-semibold flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 text-text-primary hover:bg-state-base-hover'
>
<span>{`${months[currentDate.month()]} ${currentDate.year()}`}</span>
<RiArrowDownSLine className='w-4 h-4 text-text-tertiary' />
<RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />
</button>
</div>
<button
onClick={onClickPrevMonth}
className='p-1.5 hover:bg-state-base-hover rounded-lg'
className='rounded-lg p-1.5 hover:bg-state-base-hover'
>
<RiArrowUpSLine className='w-[18px] h-[18px] text-text-secondary' />
<RiArrowUpSLine className='h-[18px] w-[18px] text-text-secondary' />
</button>
<button
onClick={onClickNextMonth}
className='p-1.5 hover:bg-state-base-hover rounded-lg'
className='rounded-lg p-1.5 hover:bg-state-base-hover'
>
<RiArrowDownSLine className='w-[18px] h-[18px] text-text-secondary' />
<RiArrowDownSLine className='h-[18px] w-[18px] text-text-secondary' />
</button>
</div>
)

14
web/app/components/base/date-and-time-picker/date-picker/index.tsx
View File

@@ -213,25 +213,25 @@ const DatePicker = ({
handleClickTrigger,
})) : (
<div
className='w-[252px] flex items-center gap-x-0.5 rounded-lg px-2 py-1 bg-components-input-bg-normal cursor-pointer group hover:bg-state-base-hover-alt'
className='group flex w-[252px] cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt'
onClick={handleClickTrigger}
>
<input
className='flex-1 p-1 bg-transparent text-components-input-text-filled placeholder:text-components-input-text-placeholder truncate system-xs-regular
outline-none appearance-none cursor-pointer'
className='system-xs-regular flex-1 cursor-pointer appearance-none truncate bg-transparent p-1
text-components-input-text-filled outline-none placeholder:text-components-input-text-placeholder'
readOnly
value={isOpen ? '' : displayValue}
placeholder={placeholderDate}
/>
<RiCalendarLine className={cn(
'shrink-0 w-4 h-4 text-text-quaternary',
'h-4 w-4 shrink-0 text-text-quaternary',
isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary',
(displayValue || (isOpen && selectedDate)) && 'group-hover:hidden',
)} />
<RiCloseCircleFill
className={cn(
'hidden shrink-0 w-4 h-4 text-text-quaternary',
(displayValue || (isOpen && selectedDate)) && 'group-hover:inline-block hover:text-text-secondary',
'hidden h-4 w-4 shrink-0 text-text-quaternary',
(displayValue || (isOpen && selectedDate)) && 'hover:text-text-secondary group-hover:inline-block',
)}
onClick={handleClear}
/>
@@ -239,7 +239,7 @@ const DatePicker = ({
)}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className={popupZIndexClassname}>
<div className='w-[252px] mt-1 bg-components-panel-bg rounded-xl shadow-lg shadow-shadow-shadow-5 border-[0.5px] border-components-panel-border'>
<div className='mt-1 w-[252px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5'>
{/* Header */}
{view === ViewType.date ? (
<DatePickerHeader

4
web/app/components/base/date-and-time-picker/time-picker/footer.tsx
View File

@@ -10,12 +10,12 @@ const Footer: FC<TimePickerFooterProps> = ({
const { t } = useTranslation()
return (
<div className='flex justify-end items-center p-2 border-t-[0.5px] border-divider-regular'>
<div className='flex items-center justify-end border-t-[0.5px] border-divider-regular p-2'>
<div className='flex items-center gap-x-1'>
{/* Now */}
<button
type='button'
className='flex items-center justify-center px-1.5 py-1 text-components-button-secondary-accent-text system-xs-medium'
className='system-xs-medium flex items-center justify-center px-1.5 py-1 text-components-button-secondary-accent-text'
onClick={handleSelectCurrentTime}
>
<span className='px-[3px]'>{t('time.operation.now')}</span>

2
web/app/components/base/date-and-time-picker/time-picker/header.tsx
View File

@@ -6,7 +6,7 @@ const Header = () => {
return (
<div className='flex flex-col border-b-[0.5px] border-divider-regular'>
<div className='flex items-center px-2 py-1.5 text-text-primary system-md-semibold'>
<div className='system-md-semibold flex items-center px-2 py-1.5 text-text-primary'>
{t('time.title.pickTime')}
</div>
</div>

14
web/app/components/base/date-and-time-picker/time-picker/index.tsx
View File

@@ -117,25 +117,25 @@ const TimePicker = ({
<PortalToFollowElemTrigger>
{renderTrigger ? (renderTrigger()) : (
<div
className='w-[252px] flex items-center gap-x-0.5 rounded-lg px-2 py-1 bg-components-input-bg-normal cursor-pointer group hover:bg-state-base-hover-alt'
className='group flex w-[252px] cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt'
onClick={handleClickTrigger}
>
<input
className='flex-1 p-1 bg-transparent text-components-input-text-filled placeholder:text-components-input-text-placeholder truncate system-xs-regular
outline-none appearance-none cursor-pointer'
className='system-xs-regular flex-1 cursor-pointer appearance-none truncate bg-transparent p-1
text-components-input-text-filled outline-none placeholder:text-components-input-text-placeholder'
readOnly
value={isOpen ? '' : displayValue}
placeholder={placeholderDate}
/>
<RiTimeLine className={cn(
'shrink-0 w-4 h-4 text-text-quaternary',
'h-4 w-4 shrink-0 text-text-quaternary',
isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary',
(displayValue || (isOpen && selectedTime)) && 'group-hover:hidden',
)} />
<RiCloseCircleFill
className={cn(
'hidden shrink-0 w-4 h-4 text-text-quaternary',
(displayValue || (isOpen && selectedTime)) && 'group-hover:inline-block hover:text-text-secondary',
'hidden h-4 w-4 shrink-0 text-text-quaternary',
(displayValue || (isOpen && selectedTime)) && 'hover:text-text-secondary group-hover:inline-block',
)}
onClick={handleClear}
/>
@@ -143,7 +143,7 @@ const TimePicker = ({
)}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-50'>
<div className='w-[252px] mt-1 bg-components-panel-bg rounded-xl shadow-lg shadow-shadow-shadow-5 border-[0.5px] border-components-panel-border'>
<div className='mt-1 w-[252px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5'>
{/* Header */}
<Header />

6
web/app/components/base/date-and-time-picker/time-picker/options.tsx
View File

@@ -14,7 +14,7 @@ const Options: FC<TimeOptionsProps> = ({
return (
<div className='grid grid-cols-3 gap-x-1 p-2'>
{/* Hour */}
<ul className='flex flex-col gap-y-0.5 h-[208px] overflow-y-auto no-scrollbar pb-[184px]'>
<ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
{
hourOptions.map((hour) => {
const isSelected = selectedTime?.format('hh') === hour
@@ -31,7 +31,7 @@ const Options: FC<TimeOptionsProps> = ({
}
</ul>
{/* Minute */}
<ul className='flex flex-col gap-y-0.5 h-[208px] overflow-y-auto no-scrollbar pb-[184px]'>
<ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
{
minuteOptions.map((minute) => {
const isSelected = selectedTime?.format('mm') === minute
@@ -48,7 +48,7 @@ const Options: FC<TimeOptionsProps> = ({
}
</ul>
{/* Period */}
<ul className='flex flex-col gap-y-0.5 h-[208px] overflow-y-auto no-scrollbar pb-[184px]'>
<ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
{
periodOptions.map((period) => {
const isSelected = selectedTime?.format('A') === period

6
web/app/components/base/date-and-time-picker/year-and-month-picker/header.tsx
View File

@@ -11,14 +11,14 @@ const Header: FC<YearAndMonthPickerHeaderProps> = ({
const months = useMonths()
return (
<div className='flex p-2 pb-1 border-b-[0.5px] border-divider-regular'>
<div className='flex border-b-[0.5px] border-divider-regular p-2 pb-1'>
{/* Year and Month */}
<button
onClick={onClick}
className='flex items-center gap-x-0.5 px-2 py-1.5 rounded-lg hover:bg-state-base-hover text-text-primary system-md-semibold'
className='system-md-semibold flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 text-text-primary hover:bg-state-base-hover'
>
<span>{`${months[selectedMonth]} ${selectedYear}`}</span>
<RiArrowUpSLine className='w-4 h-4 text-text-tertiary' />
<RiArrowUpSLine className='h-4 w-4 text-text-tertiary' />
</button>
</div>
)

4
web/app/components/base/date-and-time-picker/year-and-month-picker/options.tsx
View File

@@ -15,7 +15,7 @@ const Options: FC<YearAndMonthPickerOptionsProps> = ({
return (
<div className='grid grid-cols-2 gap-x-1 p-2'>
{/* Month Picker */}
<ul className='flex flex-col gap-y-0.5 h-[208px] overflow-y-auto no-scrollbar pb-[184px]'>
<ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
{
months.map((month, index) => {
const isSelected = selectedMonth === index
@@ -32,7 +32,7 @@ const Options: FC<YearAndMonthPickerOptionsProps> = ({
}
</ul>
{/* Year Picker */}
<ul className='flex flex-col gap-y-0.5 h-[208px] overflow-y-auto no-scrollbar pb-[184px]'>
<ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
{
yearOptions.map((year) => {
const isSelected = selectedYear === year

49
web/app/components/base/dialog/index.tsx
View File

@@ -1,6 +1,6 @@
import { Fragment, useCallback } from 'react'
import type { ElementType, ReactNode } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
import classNames from '@/utils/classnames'
// https://headlessui.com/react/dialog
@@ -34,37 +34,32 @@ const CustomDialog = ({
return (
<Transition appear show={show} as={Fragment}>
<Dialog as="div" className="relative z-40" onClose={close}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child>
<TransitionChild>
<div className={classNames(
'fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]',
'duration-300 ease-in data-[closed]:opacity-0',
'data-[enter]:opacity-100',
'data-[leave]:opacity-0',
)} />
</TransitionChild>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex items-center justify-center min-h-full">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className={classNames('w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl', className)}>
<div className="flex min-h-full items-center justify-center">
<TransitionChild>
<DialogPanel className={classNames(
'w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl',
'duration-100 ease-in data-[closed]:opacity-0 data-[closed]:scale-95',
'data-[enter]:opacity-100 data-[enter]:scale-100',
'data-[leave]:opacity-0 data-[enter]:scale-95',
className,
)}>
{Boolean(title) && (
<Dialog.Title
<DialogTitle
as={titleAs || 'h3'}
className={classNames('pr-8 pb-3 title-2xl-semi-bold text-text-primary', titleClassName)}
>
{title}
</Dialog.Title>
</DialogTitle>
)}
<div className={classNames(bodyClassName)}>
{children}
@@ -74,8 +69,8 @@ const CustomDialog = ({
{footer}
</div>
)}
</Dialog.Panel>
</Transition.Child>
</DialogPanel>
</TransitionChild>
</div>
</div>
</Dialog>

4
web/app/components/base/divider/with-label.tsx
View File

@@ -10,10 +10,10 @@ export type DividerWithLabelProps = DividerProps & {
export const DividerWithLabel: FC<DividerWithLabelProps> = (props) => {
const { label, className, ...rest } = props
return <div
className="flex items-center gap-2 my-2"
className="my-2 flex items-center gap-2"
>
<Divider {...rest} className={classNames('flex-1', className)} />
<span className="text-text-tertiary text-xs">
<span className="text-xs text-text-tertiary">
{label}
</span>
<Divider {...rest} className={classNames('flex-1', className)} />

20
web/app/components/base/drawer-plus/index.tsx
View File

@@ -14,10 +14,10 @@ type Props = {
contentClassName?: string
headerClassName?: string
height?: number | string
title: string | JSX.Element
titleDescription?: string | JSX.Element
body: JSX.Element
foot?: JSX.Element
title: string | React.JSX.Element
titleDescription?: string | React.JSX.Element
body: React.JSX.Element
foot?: React.JSX.Element
isShowMask?: boolean
clickOutsideNotOpen?: boolean
positionCenter?: boolean
@@ -55,31 +55,31 @@ const DrawerPlus: FC<Props> = ({
footer={null}
mask={isMobile || isShowMask}
positionCenter={positionCenter}
panelClassname={cn('mt-16 mx-2 sm:mr-2 mb-3 !p-0 rounded-xl', panelClassName, maxWidthClassName)}
panelClassname={cn('mx-2 mb-3 mt-16 rounded-xl !p-0 sm:mr-2', panelClassName, maxWidthClassName)}
>
<div
className={cn(contentClassName, 'w-full flex flex-col bg-components-panel-bg border-[0.5px] border-divider-subtle rounded-xl shadow-xl')}
className={cn(contentClassName, 'flex w-full flex-col rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-bg shadow-xl')}
style={{
height,
}}
ref={ref}
>
<div className={cn(headerClassName, 'shrink-0 border-b border-divider-subtle py-4')}>
<div className='flex justify-between items-center pl-6 pr-5 h-6'>
<div className='flex h-6 items-center justify-between pl-6 pr-5'>
<div className='system-xl-semibold text-text-primary'>
{title}
</div>
<div className='flex items-center'>
<div
onClick={onHide}
className='flex justify-center items-center w-6 h-6 cursor-pointer'
className='flex h-6 w-6 cursor-pointer items-center justify-center'
>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
</div>
{titleDescription && (
<div className='pl-6 pr-10 system-xs-regular text-text-tertiary'>
<div className='system-xs-regular pl-6 pr-10 text-text-tertiary'>
{titleDescription}
</div>
)}

27
web/app/components/base/drawer/index.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import { Dialog } from '@headlessui/react'
import { Dialog, DialogBackdrop, DialogTitle } from '@headlessui/react'
import { useTranslation } from 'react-i18next'
import { XMarkIcon } from '@heroicons/react/24/outline'
import Button from '../button'
@@ -44,27 +44,30 @@ export default function Drawer({
unmount={unmount}
open={isOpen}
onClose={() => !clickOutsideNotOpen && onClose()}
className="fixed z-30 inset-0 overflow-y-auto"
className="fixed inset-0 z-30 overflow-y-auto"
>
<div className={cn('flex w-screen h-screen justify-end', positionCenter && '!justify-center')}>
<div className={cn('flex h-screen w-screen justify-end', positionCenter && '!justify-center')}>
{/* mask */}
<Dialog.Overlay
className={cn('z-40 fixed inset-0', mask && 'bg-black bg-opacity-30')}
<DialogBackdrop
className={cn('fixed inset-0 z-40', mask && 'bg-black bg-opacity-30')}
onClick={() => {
!clickOutsideNotOpen && onClose()
}}
/>
<div className={cn('relative z-50 flex flex-col justify-between bg-components-panel-bg w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl', panelClassname)}>
<div className={cn('relative z-50 flex w-full max-w-sm flex-col justify-between overflow-hidden bg-components-panel-bg p-6 text-left align-middle shadow-xl', panelClassname)}>
<>
<div className='flex justify-between'>
{title && <Dialog.Title
{title && <DialogTitle
as="h3"
className="text-lg font-medium leading-6 text-text-primary"
>
{title}
</Dialog.Title>}
{showClose && <Dialog.Title className="flex items-center mb-4 cursor-pointer" as="div">
<XMarkIcon className='w-4 h-4 text-text-tertiary' onClick={onClose} />
</Dialog.Title>}
</DialogTitle>}
{showClose && <DialogTitle className="mb-4 flex cursor-pointer items-center" as="div">
<XMarkIcon className='h-4 w-4 text-text-tertiary' onClick={onClose} />
</DialogTitle>}
</div>
{description && <Dialog.Description className='text-text-tertiary text-xs font-normal mt-2'>{description}</Dialog.Description>}
{description && <div className='mt-2 text-xs font-normal text-text-tertiary'>{description}</div>}
{children}
</>
{footer || (footer === null

12
web/app/components/base/dropdown/index.tsx
View File

@@ -11,7 +11,7 @@ import {
export type Item = {
value: string | number
text: string | JSX.Element
text: string | React.JSX.Element
}
type DropdownProps = {
items: Item[]
@@ -47,17 +47,17 @@ const Dropdown: FC<DropdownProps> = ({
: (
<div
className={`
flex items-center justify-center w-6 h-6 cursor-pointer rounded-md
flex h-6 w-6 cursor-pointer items-center justify-center rounded-md
${open && 'bg-divider-regular'}
`}
>
<RiMoreFill className='w-4 h-4 text-text-tertiary' />
<RiMoreFill className='h-4 w-4 text-text-tertiary' />
</div>
)
}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className={popupClassName}>
<div className='rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg text-sm text-text-secondary'>
<div className='rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg text-sm text-text-secondary shadow-lg'>
{
!!items.length && (
<div className='p-1'>
@@ -65,7 +65,7 @@ const Dropdown: FC<DropdownProps> = ({
items.map(item => (
<div
key={item.value}
className='flex items-center px-3 h-8 rounded-lg cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'
className='flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover'
onClick={() => handleSelect(item)}
>
{item.text}
@@ -87,7 +87,7 @@ const Dropdown: FC<DropdownProps> = ({
secondItems.map(item => (
<div
key={item.value}
className='flex items-center px-3 h-8 rounded-lg cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'
className='flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover'
onClick={() => handleSelect(item)}
>
{item.text}

36
web/app/components/base/emoji-picker/Inner.tsx
View File

@@ -17,7 +17,7 @@ declare global {
namespace JSX {
// eslint-disable-next-line ts/consistent-type-definitions
interface IntrinsicElements {
'em-emoji': React.DetailedHTMLProps< React.HTMLAttributes<HTMLElement>, HTMLElement >
'em-emoji': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
}
}
}
@@ -70,10 +70,10 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
}, [onSelect, selectedEmoji, selectedBackground])
return <div className={cn(className)}>
<div className='flex flex-col items-center w-full px-3 pb-2'>
<div className='flex w-full flex-col items-center px-3 pb-2'>
<div className="relative w-full">
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<MagnifyingGlassIcon className="w-5 h-5 text-text-quaternary" aria-hidden="true" />
<div className="pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3">
<MagnifyingGlassIcon className="h-5 w-5 text-text-quaternary" aria-hidden="true" />
</div>
<Input
className="pl-10"
@@ -95,20 +95,20 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
</div>
<Divider className='my-3' />
<div className="w-full max-h-[200px] overflow-x-hidden overflow-y-auto px-3">
<div className="max-h-[200px] w-full overflow-y-auto overflow-x-hidden px-3">
{isSearching && <>
<div key={'category-search'} className='flex flex-col'>
<p className='system-xs-medium-uppercase text-text-primary mb-1'>Search</p>
<div className='w-full h-full grid grid-cols-8 gap-1'>
<p className='system-xs-medium-uppercase mb-1 text-text-primary'>Search</p>
<div className='grid h-full w-full grid-cols-8 gap-1'>
{searchedEmojis.map((emoji: string, index: number) => {
return <div
key={`emoji-search-${index}`}
className='inline-flex w-10 h-10 rounded-lg items-center justify-center'
className='inline-flex h-10 w-10 items-center justify-center rounded-lg'
onClick={() => {
setSelectedEmoji(emoji)
}}
>
<div className='cursor-pointer w-8 h-8 p-1 flex items-center justify-center rounded-lg hover:ring-1 ring-offset-1 ring-components-input-border-hover'>
<div className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1'>
<em-emoji id={emoji} />
</div>
</div>
@@ -119,17 +119,17 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
{categories.map((category, index: number) => {
return <div key={`category-${index}`} className='flex flex-col'>
<p className='system-xs-medium-uppercase text-text-primary mb-1'>{category.id}</p>
<div className='w-full h-full grid grid-cols-8 gap-1'>
<p className='system-xs-medium-uppercase mb-1 text-text-primary'>{category.id}</p>
<div className='grid h-full w-full grid-cols-8 gap-1'>
{category.emojis.map((emoji, index: number) => {
return <div
key={`emoji-${index}`}
className='inline-flex w-10 h-10 rounded-lg items-center justify-center'
className='inline-flex h-10 w-10 items-center justify-center rounded-lg'
onClick={() => {
setSelectedEmoji(emoji)
}}
>
<div className='cursor-pointer w-8 h-8 p-1 flex items-center justify-center rounded-lg hover:ring-1 ring-offset-1 ring-components-input-border-hover'>
<div className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg p-1 ring-components-input-border-hover ring-offset-1 hover:ring-1'>
<em-emoji id={emoji} />
</div>
</div>
@@ -142,16 +142,16 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
{/* Color Select */}
<div className={cn('p-3 pb-0', selectedEmoji === '' ? 'opacity-25' : '')}>
<p className='system-xs-medium-uppercase text-text-primary mb-2'>Choose Style</p>
<div className='w-full h-full grid grid-cols-8 gap-1'>
<p className='system-xs-medium-uppercase mb-2 text-text-primary'>Choose Style</p>
<div className='grid h-full w-full grid-cols-8 gap-1'>
{backgroundColors.map((color) => {
return <div
key={color}
className={
cn(
'cursor-pointer',
'hover:ring-1 ring-offset-1',
'inline-flex w-10 h-10 rounded-lg items-center justify-center',
'ring-offset-1 hover:ring-1',
'inline-flex h-10 w-10 items-center justify-center rounded-lg',
color === selectedBackground ? 'ring-1 ring-components-input-border-hover' : '',
)}
onClick={() => {
@@ -159,7 +159,7 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
}}
>
<div className={cn(
'w-8 h-8 p-1 flex items-center justify-center rounded-lg',
'flex h-8 w-8 items-center justify-center rounded-lg p-1',
)
} style={{ background: color }}>
{selectedEmoji !== '' && <em-emoji id={selectedEmoji} />}

4
web/app/components/base/emoji-picker/index.tsx
View File

@@ -36,13 +36,13 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
isShow
closable={false}
wrapperClassName={className}
className={cn('flex flex-col max-h-[552px] border-[0.5px] border-divider-subtle rounded-xl shadow-xl p-0')}
className={cn('flex max-h-[552px] flex-col rounded-xl border-[0.5px] border-divider-subtle p-0 shadow-xl')}
>
<EmojiPickerInner
className="pt-3"
onSelect={handleSelectEmoji} />
<Divider className='mb-0 mt-3' />
<div className='w-full flex items-center justify-center p-3 gap-2'>
<div className='flex w-full items-center justify-center gap-2 p-3'>
<Button className='w-full' onClick={() => {
onClose && onClose()
}}>

2
web/app/components/base/features/context.tsx
View File

@@ -14,7 +14,7 @@ type FeaturesProviderProps = {
children: React.ReactNode
} & Partial<FeaturesState>
export const FeaturesProvider = ({ children, ...props }: FeaturesProviderProps) => {
const storeRef = useRef<FeaturesStore>()
const storeRef = useRef<FeaturesStore | undefined>(undefined)
if (!storeRef.current)
storeRef.current = createFeaturesStore(props)

6
web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
View File

@@ -77,9 +77,9 @@ const ConfigParamModal: FC<Props> = ({
<Modal
isShow={isShow}
onClose={onHide}
className='!p-6 !mt-14 !max-w-none !w-[640px]'
className='!mt-14 !w-[640px] !max-w-none !p-6'
>
<div className='mb-2 title-2xl-semi-bold text-text-primary'>
<div className='title-2xl-semi-bold mb-2 text-text-primary'>
{t(`appAnnotation.initSetup.${isInit ? 'title' : 'configTitle'}`)}
</div>
@@ -122,7 +122,7 @@ const ConfigParamModal: FC<Props> = ({
</Item>
</div>
<div className='mt-6 flex gap-2 justify-end'>
<div className='mt-6 flex justify-end gap-2'>
<Button onClick={onHide}>{t('common.operation.cancel')}</Button>
<Button
variant='primary'

8
web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx
View File

@@ -3,18 +3,18 @@ import type { FC } from 'react'
import React from 'react'
import Tooltip from '@/app/components/base/tooltip'
export const Item: FC<{ title: string; tooltip: string; children: JSX.Element }> = ({
export const Item: FC<{ title: string; tooltip: string; children: React.JSX.Element }> = ({
title,
tooltip,
children,
}) => {
return (
<div>
<div className='flex items-center space-x-1 mb-1'>
<div className='py-1 system-sm-semibold text-text-secondary'>{title}</div>
<div className='mb-1 flex items-center space-x-1'>
<div className='system-sm-semibold py-1 text-text-secondary'>{title}</div>
<Tooltip
popupContent={
<div className='max-w-[200px] system-sm-regular text-text-secondary'>{tooltip}</div>
<div className='system-sm-regular max-w-[200px] text-text-secondary'>{tooltip}</div>
}
/>
</div>

22
web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
View File

@@ -77,8 +77,8 @@ const AnnotationReply = ({
<>
<FeatureCard
icon={
<div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
<MessageFast className='w-4 h-4 text-text-primary-on-surface' />
<div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs'>
<MessageFast className='h-4 w-4 text-text-primary-on-surface' />
</div>
}
title={t('appDebug.feature.annotation.title')}
@@ -90,33 +90,33 @@ const AnnotationReply = ({
>
<>
{!annotationReply?.enabled && (
<div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.annotation.description')}</div>
<div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>{t('appDebug.feature.annotation.description')}</div>
)}
{!!annotationReply?.enabled && (
<>
{!isHovering && (
<div className='pt-0.5 flex items-center gap-4'>
<div className='flex items-center gap-4 pt-0.5'>
<div className=''>
<div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.annotation.scoreThreshold.title')}</div>
<div className='text-text-secondary system-xs-regular'>{annotationReply.score_threshold || '-'}</div>
<div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.feature.annotation.scoreThreshold.title')}</div>
<div className='system-xs-regular text-text-secondary'>{annotationReply.score_threshold || '-'}</div>
</div>
<div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
<div className='h-[27px] w-px rotate-12 bg-divider-subtle'></div>
<div className=''>
<div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('common.modelProvider.embeddingModel.key')}</div>
<div className='text-text-secondary system-xs-regular'>{annotationReply.embedding_model?.embedding_model_name}</div>
<div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('common.modelProvider.embeddingModel.key')}</div>
<div className='system-xs-regular text-text-secondary'>{annotationReply.embedding_model?.embedding_model_name}</div>
</div>
</div>
)}
{isHovering && (
<div className='flex items-center justify-between'>
<Button className='w-[178px]' onClick={() => setIsShowAnnotationConfigInit(true)} disabled={disabled}>
<RiEqualizer2Line className='mr-1 w-4 h-4' />
<RiEqualizer2Line className='mr-1 h-4 w-4' />
{t('common.operation.params')}
</Button>
<Button className='w-[178px]' onClick={() => {
router.push(`/app/${appId}/annotations`)
}}>
<RiExternalLinkLine className='mr-1 w-4 h-4' />
<RiExternalLinkLine className='mr-1 h-4 w-4' />
{t('appDebug.feature.annotation.cacheManagement')}
</Button>
</div>

6
web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx
View File

@@ -20,13 +20,13 @@ const Slider: React.FC<ISliderProps> = ({ className, max, min, step, value, disa
max={max || 100}
step={step || 1}
className={cn(className, s.slider)}
thumbClassName={cn(s['slider-thumb'], 'top-[-7px] w-2 h-[18px] bg-white border !border-black/8 rounded-[36px] shadow-md cursor-pointer')}
thumbClassName={cn(s['slider-thumb'], 'top-[-7px] h-[18px] w-2 cursor-pointer rounded-[36px] border !border-black/8 bg-white shadow-md')}
trackClassName={s['slider-track']}
onChange={onChange}
renderThumb={(props, state) => (
<div {...props}>
<div className='relative w-full h-full'>
<div className='absolute top-[-16px] left-[50%] translate-x-[-50%] system-sm-semibold text-text-primary'>
<div className='relative h-full w-full'>
<div className='system-sm-semibold absolute left-[50%] top-[-16px] translate-x-[-50%] text-text-primary'>
{(state.valueNow / 100).toFixed(2)}
</div>
</div>

4
web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
View File

@@ -19,7 +19,7 @@ const ScoreSlider: FC<Props> = ({
return (
<div className={className}>
<div className='h-[1px] mt-[14px]'>
<div className='mt-[14px] h-[1px]'>
<Slider
max={100}
min={80}
@@ -28,7 +28,7 @@ const ScoreSlider: FC<Props> = ({
onChange={onChange}
/>
</div>
<div className='mt-[10px] flex justify-between items-center system-xs-semibold-uppercase'>
<div className='system-xs-semibold-uppercase mt-[10px] flex items-center justify-between'>
<div className='flex space-x-1 text-util-colors-cyan-cyan-500'>
<div>0.8</div>
<div>·</div>

4
web/app/components/base/features/new-feature-panel/citation.tsx
View File

@@ -40,8 +40,8 @@ const Citation = ({
return (
<FeatureCard
icon={
<div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-warning-warning-500'>
<Citations className='w-4 h-4 text-text-primary-on-surface' />
<div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-warning-warning-500 p-1 shadow-xs'>
<Citations className='h-4 w-4 text-text-primary-on-surface' />
</div>
}
title={t('appDebug.feature.citation.title')}

10
web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
View File

@@ -81,8 +81,8 @@ const ConversationOpener = ({
return (
<FeatureCard
icon={
<div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
<LoveMessage className='w-4 h-4 text-text-primary-on-surface' />
<div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'>
<LoveMessage className='h-4 w-4 text-text-primary-on-surface' />
</div>
}
title={t('appDebug.feature.conversationOpener.title')}
@@ -94,18 +94,18 @@ const ConversationOpener = ({
>
<>
{!opening?.enabled && (
<div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.conversationOpener.description')}</div>
<div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>{t('appDebug.feature.conversationOpener.description')}</div>
)}
{!!opening?.enabled && (
<>
{!isHovering && (
<div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>
<div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>
{opening.opening_statement || t('appDebug.openingStatement.placeholder')}
</div>
)}
{isHovering && (
<Button className='w-full' onClick={handleOpenOpeningModal} disabled={disabled}>
<RiEditLine className='mr-1 w-4 h-4' />
<RiEditLine className='mr-1 h-4 w-4' />
{t('appDebug.openingStatement.writeOpener')}
</Button>
)}

40
web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
View File

@@ -95,12 +95,12 @@ const OpeningSettingModal = ({
return (
<div>
<div className='flex items-center py-2'>
<div className='shrink-0 flex space-x-0.5 leading-[18px] text-xs font-medium text-text-tertiary'>
<div className='flex shrink-0 space-x-0.5 text-xs font-medium leading-[18px] text-text-tertiary'>
<div className='uppercase'>{t('appDebug.openingStatement.openingQuestion')}</div>
<div>·</div>
<div>{tempSuggestedQuestions.length}/{MAX_QUESTION_NUM}</div>
</div>
<Divider bgStyle='gradient' className='ml-3 grow w-0 h-px'/>
<Divider bgStyle='gradient' className='ml-3 h-px w-0 grow'/>
</div>
<ReactSortable
className="space-y-1"
@@ -119,13 +119,13 @@ const OpeningSettingModal = ({
return (
<div
className={cn(
'group relative rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg flex items-center pl-2.5 hover:bg-components-panel-on-panel-item-bg-hover',
focusID === index && 'border-components-input-border-active hover:border-components-input-border-active bg-components-input-bg-active hover:bg-components-input-bg-active',
deletingID === index && 'border-components-input-border-destructive hover:border-components-input-border-destructive bg-state-destructive-hover hover:bg-state-destructive-hover',
'group relative flex items-center rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-2.5 hover:bg-components-panel-on-panel-item-bg-hover',
focusID === index && 'border-components-input-border-active bg-components-input-bg-active hover:border-components-input-border-active hover:bg-components-input-bg-active',
deletingID === index && 'border-components-input-border-destructive bg-state-destructive-hover hover:border-components-input-border-destructive hover:bg-state-destructive-hover',
)}
key={index}
>
<RiDraggable className='handle w-4 h-4 text-text-quaternary cursor-grab' />
<RiDraggable className='handle h-4 w-4 cursor-grab text-text-quaternary' />
<input
type="input"
value={question || ''}
@@ -138,20 +138,20 @@ const OpeningSettingModal = ({
return item
}))
}}
className={'w-full overflow-x-auto pl-1.5 pr-8 text-sm leading-9 text-text-secondary border-0 grow h-9 bg-transparent focus:outline-none cursor-pointer rounded-lg'}
className={'h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pl-1.5 pr-8 text-sm leading-9 text-text-secondary focus:outline-none'}
onFocus={() => setFocusID(index)}
onBlur={() => setFocusID(null)}
/>
<div
className='block absolute top-1/2 translate-y-[-50%] right-1.5 p-1 rounded-md cursor-pointer text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
className='absolute right-1.5 top-1/2 block translate-y-[-50%] cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
onClick={() => {
setTempSuggestedQuestions(tempSuggestedQuestions.filter((_, i) => index !== i))
}}
onMouseEnter={() => setDeletingID(index)}
onMouseLeave={() => setDeletingID(null)}
>
<RiDeleteBinLine className='w-3.5 h-3.5' />
<RiDeleteBinLine className='h-3.5 w-3.5' />
</div>
</div>
)
@@ -159,8 +159,8 @@ const OpeningSettingModal = ({
{tempSuggestedQuestions.length < MAX_QUESTION_NUM && (
<div
onClick={() => { setTempSuggestedQuestions([...tempSuggestedQuestions, '']) }}
className='mt-1 flex items-center h-9 px-3 gap-2 rounded-lg cursor-pointer text-components-button-tertiary-text bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover'>
<RiAddLine className='w-4 h-4' />
className='mt-1 flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-components-button-tertiary-bg px-3 text-components-button-tertiary-text hover:bg-components-button-tertiary-bg-hover'>
<RiAddLine className='h-4 w-4' />
<div className='system-sm-medium text-[13px]'>{t('appDebug.variableConfig.addOption')}</div>
</div>
)}
@@ -172,22 +172,22 @@ const OpeningSettingModal = ({
<Modal
isShow
onClose={() => { }}
className='!p-6 !mt-14 !max-w-none !w-[640px] !bg-components-panel-bg-blur'
className='!mt-14 !w-[640px] !max-w-none !bg-components-panel-bg-blur !p-6'
>
<div className='flex items-center justify-between mb-6'>
<div className='text-text-primary title-2xl-semi-bold'>{t('appDebug.feature.conversationOpener.title')}</div>
<div className='p-1 cursor-pointer' onClick={onCancel}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
<div className='mb-6 flex items-center justify-between'>
<div className='title-2xl-semi-bold text-text-primary'>{t('appDebug.feature.conversationOpener.title')}</div>
<div className='cursor-pointer p-1' onClick={onCancel}><RiCloseLine className='h-4 w-4 text-text-tertiary'/></div>
</div>
<div className='flex gap-2 mb-8'>
<div className='shrink-0 mt-1.5 w-8 h-8 p-1.5 rounded-lg border-components-panel-border bg-util-colors-orange-dark-orange-dark-500'>
<RiAsterisk className='w-5 h-5 text-text-primary-on-surface' />
<div className='mb-8 flex gap-2'>
<div className='mt-1.5 h-8 w-8 shrink-0 rounded-lg border-components-panel-border bg-util-colors-orange-dark-orange-dark-500 p-1.5'>
<RiAsterisk className='h-5 w-5 text-text-primary-on-surface' />
</div>
<div className='grow p-3 bg-chat-bubble-bg rounded-2xl border-t border-divider-subtle shadow-xs'>
<div className='grow rounded-2xl border-t border-divider-subtle bg-chat-bubble-bg p-3 shadow-xs'>
<textarea
value={tempValue}
rows={3}
onChange={e => setTempValue(e.target.value)}
className="w-full px-0 text-text-secondary system-md-regular border-0 bg-transparent focus:outline-none"
className="system-md-regular w-full border-0 bg-transparent px-0 text-text-secondary focus:outline-none"
placeholder={t('appDebug.openingStatement.placeholder') as string}
/>
{renderQuestions()}

Some files were not shown because too many files have changed in this diff Show More