mirror of
https://github.com/langgenius/dify.git
synced 2026-05-02 16:38:04 +08:00
merge plugin/beta
This commit is contained in:
Joel
@ -81,26 +81,26 @@ const AgentLogDetail: FC<AgentLogDetailProps> = ({
|
||||
return (
|
||||
<div className='grow relative flex flex-col'>
|
||||
{/* tab */}
|
||||
<div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-[rgba(0,0,0,0.05)]'>
|
||||
<div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-divider-regular'>
|
||||
<div
|
||||
className={cn(
|
||||
'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
|
||||
currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-gray-700',
|
||||
'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-text-tertiary cursor-pointer',
|
||||
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-gray-400 cursor-pointer',
|
||||
currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-gray-700',
|
||||
'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-text-tertiary cursor-pointer',
|
||||
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-white h-0 overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-gray-50')}>
|
||||
<div className={cn('grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-background-section')}>
|
||||
{loading && (
|
||||
<div className='flex h-full items-center justify-center bg-white'>
|
||||
<div className='flex h-full items-center justify-center bg-components-panel-bg'>
|
||||
<Loading />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -35,7 +35,7 @@ const AgentLogModal: FC<AgentLogModalProps> = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn('relative flex flex-col py-3 bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl z-10')}
|
||||
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')}
|
||||
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-gray-900'>{t('appLog.runDetail.workflowTitle')}</h1>
|
||||
<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-gray-500' />
|
||||
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||
</span>
|
||||
<AgentLogDetail
|
||||
conversationID={currentLogItem.conversationId}
|
||||
|
||||
@ -2,8 +2,9 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { FC } from 'react'
|
||||
import ToolCall from './tool-call'
|
||||
import cn from '@/utils/classnames'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import type { AgentIteration } from '@/models/log'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type Props = {
|
||||
isFinal: boolean
|
||||
@ -18,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-gray-500 text-xs leading-[18px] font-semibold'>{t('appLog.agentLogDetail.finalProcessing')}</div>
|
||||
<div className='shrink-0 mr-3 text-text-tertiary text-xs leading-[18px] font-semibold'>{t('appLog.agentLogDetail.finalProcessing')}</div>
|
||||
)}
|
||||
{!isFinal && (
|
||||
<div className='shrink-0 mr-3 text-gray-500 text-xs leading-[18px] font-semibold'>{`${t('appLog.agentLogDetail.iteration').toUpperCase()} ${index}`}</div>
|
||||
<div className='shrink-0 mr-3 text-text-tertiary text-xs leading-[18px] font-semibold'>{`${t('appLog.agentLogDetail.iteration').toUpperCase()} ${index}`}</div>
|
||||
)}
|
||||
<div className='grow h-[1px] bg-gradient-to-r from-[#f3f4f6] to-gray-50'></div>
|
||||
<Divider bgStyle='gradient' className='grow h-[1px] mx-0'/>
|
||||
</div>
|
||||
<ToolCall
|
||||
isLLM
|
||||
|
||||
@ -36,7 +36,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
|
||||
const { formatTime } = useTimestamp()
|
||||
|
||||
return (
|
||||
<div className='bg-white py-2'>
|
||||
<div className='bg-components-panel-bg py-2'>
|
||||
<div className='px-4 py-2'>
|
||||
<StatusPanel
|
||||
status='succeeded'
|
||||
@ -62,57 +62,57 @@ const ResultPanel: FC<ResultPanelProps> = ({
|
||||
/>
|
||||
</div>
|
||||
<div className='px-4 py-2'>
|
||||
<div className='h-[0.5px] bg-black opacity-5' />
|
||||
<div className='h-[0.5px] bg-divider-regular opacity-5' />
|
||||
</div>
|
||||
<div className='px-4 py-2'>
|
||||
<div className='relative'>
|
||||
<div className='h-6 leading-6 text-gray-500 text-xs font-medium'>{t('runLog.meta.title')}</div>
|
||||
<div className='h-6 leading-6 text-text-tertiary text-xs font-medium'>{t('runLog.meta.title')}</div>
|
||||
<div className='py-1'>
|
||||
<div className='flex'>
|
||||
<div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.status')}</div>
|
||||
<div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
|
||||
<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]'>
|
||||
<span>SUCCESS</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.executor')}</div>
|
||||
<div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
|
||||
<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]'>
|
||||
<span>{created_by || 'N/A'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.startTime')}</div>
|
||||
<div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
|
||||
<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]'>
|
||||
<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-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.time')}</div>
|
||||
<div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
|
||||
<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]'>
|
||||
<span>{`${elapsed_time?.toFixed(3)}s`}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.tokens')}</div>
|
||||
<div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
|
||||
<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]'>
|
||||
<span>{`${total_tokens || 0} Tokens`}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('appLog.agentLogDetail.agentMode')}</div>
|
||||
<div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
|
||||
<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]'>
|
||||
<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-gray-500 text-xs leading-[18px] truncate'>{t('appLog.agentLogDetail.toolUsed')}</div>
|
||||
<div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
|
||||
<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]'>
|
||||
<span>{tools?.length ? tools?.join(', ') : 'Null'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('appLog.agentLogDetail.iterations')}</div>
|
||||
<div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
|
||||
<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]'>
|
||||
<span>{iterations}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -33,7 +33,7 @@ const ToolCallItem: FC<Props> = ({ toolCall, isLLM = false, isFinal, tokens, obs
|
||||
if (time < 1)
|
||||
return `${(time * 1000).toFixed(3)} ms`
|
||||
if (time > 60)
|
||||
return `${parseInt(Math.round(time / 60).toString())} m ${(time % 60).toFixed(3)} s`
|
||||
return `${Number.parseInt(Math.round(time / 60).toString())} m ${(time % 60).toFixed(3)} s`
|
||||
return `${time.toFixed(3)} s`
|
||||
}
|
||||
|
||||
@ -41,14 +41,14 @@ const ToolCallItem: FC<Props> = ({ toolCall, isLLM = false, isFinal, tokens, obs
|
||||
if (tokens < 1000)
|
||||
return tokens
|
||||
if (tokens >= 1000 && tokens < 1000000)
|
||||
return `${parseFloat((tokens / 1000).toFixed(3))}K`
|
||||
return `${Number.parseFloat((tokens / 1000).toFixed(3))}K`
|
||||
if (tokens >= 1000000)
|
||||
return `${parseFloat((tokens / 1000000).toFixed(3))}M`
|
||||
return `${Number.parseFloat((tokens / 1000000).toFixed(3))}M`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('py-1')}>
|
||||
<div className={cn('group transition-all bg-white border border-gray-100 rounded-2xl shadow-xs hover:shadow-md')}>
|
||||
<div className={cn('group transition-all bg-background-default border border-components-panel-border rounded-2xl shadow-xs hover:shadow-md')}>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center py-3 pl-[6px] pr-3 cursor-pointer',
|
||||
@ -58,15 +58,15 @@ const ToolCallItem: FC<Props> = ({ toolCall, isLLM = false, isFinal, tokens, obs
|
||||
>
|
||||
<ChevronRight
|
||||
className={cn(
|
||||
'shrink-0 w-3 h-3 mr-1 text-gray-400 transition-all group-hover:text-gray-500',
|
||||
'shrink-0 w-3 h-3 mr-1 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} />
|
||||
<div className={cn(
|
||||
'grow text-gray-700 text-[13px] leading-[16px] font-semibold truncate',
|
||||
'grow text-text-secondary text-[13px] leading-[16px] font-semibold truncate',
|
||||
)} title={toolName}>{toolName}</div>
|
||||
<div className='shrink-0 text-gray-500 text-xs leading-[18px]'>
|
||||
<div className='shrink-0 text-text-tertiary text-xs leading-[18px]'>
|
||||
{toolCall.time_cost && (
|
||||
<span>{getTime(toolCall.time_cost || 0)}</span>
|
||||
)}
|
||||
|
||||
@ -9,7 +9,7 @@ type TracingPanelProps = {
|
||||
|
||||
const TracingPanel: FC<TracingPanelProps> = ({ list }) => {
|
||||
return (
|
||||
<div className='bg-gray-50'>
|
||||
<div className='bg-background-section'>
|
||||
{list.map((iteration, index) => (
|
||||
<Iteration
|
||||
key={index}
|
||||
|
||||
@ -76,7 +76,7 @@ export const CopyFeedbackNew = ({ content, className }: Pick<Props, 'className'
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={`w-8 h-8 cursor-pointer hover:bg-gray-100 rounded-lg ${
|
||||
className={`w-8 h-8 cursor-pointer hover:bg-components-button-ghost-bg-hover rounded-lg ${
|
||||
className ?? ''
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -6,12 +6,14 @@ import { ReactSortable } from 'react-sortablejs'
|
||||
import { RiAddLine, RiAsterisk, RiCloseLine, RiDeleteBinLine, RiDraggable } from '@remixicon/react'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import ConfirmAddVar from '@/app/components/app/configuration/config-prompt/confirm-add-var'
|
||||
import type { OpeningStatement } from '@/app/components/base/features/types'
|
||||
import { getInputKeys } from '@/app/components/base/block-input'
|
||||
import type { PromptVariable } from '@/models/debug'
|
||||
import type { InputVar } from '@/app/components/workflow/types'
|
||||
import { getNewVar } from '@/utils/var'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type OpeningSettingModalProps = {
|
||||
data: OpeningStatement
|
||||
@ -86,16 +88,19 @@ const OpeningSettingModal = ({
|
||||
handleSave(true)
|
||||
}, [handleSave, hideConfirmAddVar, notIncludeKeys, onAutoAddPromptVariable])
|
||||
|
||||
const [focusID, setFocusID] = useState<number | null>(null)
|
||||
const [deletingID, setDeletingID] = useState<number | null>(null)
|
||||
|
||||
const renderQuestions = () => {
|
||||
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-gray-500'>
|
||||
<div className='shrink-0 flex space-x-0.5 leading-[18px] text-xs font-medium text-text-tertiary'>
|
||||
<div className='uppercase'>{t('appDebug.openingStatement.openingQuestion')}</div>
|
||||
<div>·</div>
|
||||
<div>{tempSuggestedQuestions.length}/{MAX_QUESTION_NUM}</div>
|
||||
</div>
|
||||
<div className='ml-3 grow w-0 h-px bg-[#243, 244, 246]'></div>
|
||||
<Divider bgStyle='gradient' className='ml-3 grow w-0 h-px'/>
|
||||
</div>
|
||||
<ReactSortable
|
||||
className="space-y-1"
|
||||
@ -112,8 +117,15 @@ const OpeningSettingModal = ({
|
||||
>
|
||||
{tempSuggestedQuestions.map((question, index) => {
|
||||
return (
|
||||
<div className='group relative rounded-lg border border-gray-200 flex items-center pl-2.5 hover:border-gray-300 hover:bg-white' key={index}>
|
||||
<RiDraggable className='handle w-4 h-4 cursor-grab' />
|
||||
<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',
|
||||
)}
|
||||
key={index}
|
||||
>
|
||||
<RiDraggable className='handle w-4 h-4 text-text-quaternary cursor-grab' />
|
||||
<input
|
||||
type="input"
|
||||
value={question || ''}
|
||||
@ -126,14 +138,18 @@ const OpeningSettingModal = ({
|
||||
return item
|
||||
}))
|
||||
}}
|
||||
className={'w-full overflow-x-auto pl-1.5 pr-8 text-sm leading-9 text-gray-900 border-0 grow h-9 bg-transparent focus:outline-none cursor-pointer rounded-lg'}
|
||||
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'}
|
||||
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 hover:bg-[#FEE4E2] hover:text-[#D92D20]'
|
||||
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'
|
||||
onClick={() => {
|
||||
setTempSuggestedQuestions(tempSuggestedQuestions.filter((_, i) => index !== i))
|
||||
}}
|
||||
onMouseEnter={() => setDeletingID(index)}
|
||||
onMouseLeave={() => setDeletingID(null)}
|
||||
>
|
||||
<RiDeleteBinLine className='w-3.5 h-3.5' />
|
||||
</div>
|
||||
@ -143,9 +159,9 @@ 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-gray-400 bg-gray-100 hover:bg-gray-200'>
|
||||
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' />
|
||||
<div className='text-gray-500 text-[13px]'>{t('appDebug.variableConfig.addOption')}</div>
|
||||
<div className='system-sm-medium text-[13px]'>{t('appDebug.variableConfig.addOption')}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -30,14 +30,14 @@ const FormGeneration: FC<FormGenerationProps> = ({
|
||||
key={index}
|
||||
className='py-2'
|
||||
>
|
||||
<div className='flex items-center h-9 text-sm font-medium text-gray-900'>
|
||||
<div className='flex items-center h-9 text-sm font-medium text-text-primary'>
|
||||
{locale === 'zh-Hans' ? form.label['zh-Hans'] : form.label['en-US']}
|
||||
</div>
|
||||
{
|
||||
form.type === 'text-input' && (
|
||||
<input
|
||||
value={value?.[form.variable] || ''}
|
||||
className='block px-3 w-full h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
|
||||
className='block px-3 w-full h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-primary outline-none appearance-none'
|
||||
placeholder={form.placeholder}
|
||||
onChange={e => handleFormChange(form.variable, e.target.value)}
|
||||
/>
|
||||
|
||||
@ -27,13 +27,13 @@ const ModerationContent: FC<ModerationContentProps> = ({
|
||||
|
||||
return (
|
||||
<div className='py-2'>
|
||||
<div className='rounded-lg bg-gray-50 border border-gray-200'>
|
||||
<div className='rounded-lg bg-components-panel-bg border border-components-panel-border'>
|
||||
<div className='flex items-center justify-between px-3 h-10 rounded-lg'>
|
||||
<div className='shrink-0 text-sm font-medium text-gray-900'>{title}</div>
|
||||
<div className='shrink-0 text-sm font-medium text-text-primary'>{title}</div>
|
||||
<div className='grow flex items-center justify-end'>
|
||||
{
|
||||
info && (
|
||||
<div className='mr-2 text-xs text-gray-500 truncate' title={info}>{info}</div>
|
||||
<div className='mr-2 text-xs text-text-tertiary truncate' title={info}>{info}</div>
|
||||
)
|
||||
}
|
||||
<Switch
|
||||
@ -45,20 +45,20 @@ const ModerationContent: FC<ModerationContentProps> = ({
|
||||
</div>
|
||||
{
|
||||
config.enabled && showPreset && (
|
||||
<div className='px-3 pt-1 pb-3 bg-white rounded-lg'>
|
||||
<div className='flex items-center justify-between h-8 text-[13px] font-medium text-gray-700'>
|
||||
<div className='px-3 pt-1 pb-3 bg-components-panel-bg rounded-lg'>
|
||||
<div className='flex items-center justify-between h-8 text-[13px] font-medium text-text-secondary'>
|
||||
{t('appDebug.feature.moderation.modal.content.preset')}
|
||||
<span className='text-xs font-normal text-gray-500'>{t('appDebug.feature.moderation.modal.content.supportMarkdown')}</span>
|
||||
<span className='text-xs font-normal text-text-tertiary'>{t('appDebug.feature.moderation.modal.content.supportMarkdown')}</span>
|
||||
</div>
|
||||
<div className='relative px-3 py-2 h-20 rounded-lg bg-gray-100'>
|
||||
<div className='relative px-3 py-2 h-20 rounded-lg bg-components-input-bg-normal'>
|
||||
<textarea
|
||||
value={config.preset_response || ''}
|
||||
className='block w-full h-full bg-transparent text-sm outline-none appearance-none resize-none'
|
||||
className='block w-full h-full bg-transparent text-sm text-text-secondary outline-none appearance-none resize-none'
|
||||
placeholder={t('appDebug.feature.moderation.modal.content.placeholder') || ''}
|
||||
onChange={e => handleConfigChange('preset_response', e.target.value)}
|
||||
/>
|
||||
<div className='absolute bottom-2 right-2 flex items-center px-1 h-5 rounded-md bg-gray-50 text-xs font-medium text-gray-300'>
|
||||
<span>{(config.preset_response || '').length}</span>/<span className='text-gray-500'>100</span>
|
||||
<div className='absolute bottom-2 right-2 flex items-center px-1 h-5 rounded-md bg-background-section text-xs font-medium text-text-quaternary'>
|
||||
<span>{(config.preset_response || '').length}</span>/<span className='text-text-tertiary'>100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -9,6 +9,7 @@ import FormGeneration from './form-generation'
|
||||
import ApiBasedExtensionSelector from '@/app/components/header/account-setting/api-based-extension-page/selector'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
|
||||
import type { ModerationConfig, ModerationContentConfig } from '@/models/debug'
|
||||
import { useToastContext } from '@/app/components/base/toast'
|
||||
@ -22,6 +23,7 @@ import { LanguagesSupported } from '@/i18n/language'
|
||||
import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
|
||||
import { useModalContext } from '@/context/modal-context'
|
||||
import { CustomConfigurationStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
const systemTypes = ['openai_moderation', 'keywords', 'api']
|
||||
|
||||
@ -245,7 +247,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
|
||||
<div className='p-1 cursor-pointer' onClick={onCancel}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
|
||||
</div>
|
||||
<div className='py-2'>
|
||||
<div className='leading-9 text-sm font-medium text-gray-900'>
|
||||
<div className='leading-9 text-sm font-medium text-text-primary'>
|
||||
{t('appDebug.feature.moderation.modal.provider.title')}
|
||||
</div>
|
||||
<div className='grid gap-2.5 grid-cols-3'>
|
||||
@ -253,16 +255,18 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
|
||||
providers.map(provider => (
|
||||
<div
|
||||
key={provider.key}
|
||||
className={`
|
||||
flex items-center px-3 py-2 rounded-lg text-sm text-gray-900 cursor-pointer
|
||||
${localeData.type === provider.key ? 'bg-white border-[1.5px] border-primary-400 shadow-sm' : 'border border-gray-100 bg-gray-25'}
|
||||
${localeData.type === 'openai_moderation' && provider.key === 'openai_moderation' && !isOpenAIProviderConfigured && 'opacity-50'}
|
||||
`}
|
||||
className={cn(
|
||||
'flex items-center px-2 h-8 rounded-md system-sm-regular bg-components-option-card-option-bg border border-components-option-card-option-border text-text-secondary cursor-default',
|
||||
localeData.type !== provider.key && 'hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs cursor-pointer',
|
||||
localeData.type === provider.key && 'bg-components-option-card-option-selected-bg border-[1.5px] border-components-option-card-option-selected-border system-sm-medium shadow-xs',
|
||||
localeData.type === 'openai_moderation' && provider.key === 'openai_moderation' && !isOpenAIProviderConfigured && 'text-text-disabled',
|
||||
)}
|
||||
onClick={() => handleDataTypeChange(provider.key)}
|
||||
>
|
||||
<div className={`
|
||||
mr-2 w-4 h-4 rounded-full border
|
||||
${localeData.type === provider.key ? 'border-[5px] border-primary-600' : 'border border-gray-300'}`} />
|
||||
<div className={cn(
|
||||
'mr-2 w-4 h-4 border border-components-radio-border bg-components-radio-bg shadow-xs rounded-full',
|
||||
localeData.type === provider.key && 'border-[5px] border-components-radio-border-checked',
|
||||
)}></div>
|
||||
{provider.name}
|
||||
</div>
|
||||
))
|
||||
@ -289,17 +293,17 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
|
||||
{
|
||||
localeData.type === 'keywords' && (
|
||||
<div className='py-2'>
|
||||
<div className='mb-1 text-sm font-medium text-gray-900'>{t('appDebug.feature.moderation.modal.provider.keywords')}</div>
|
||||
<div className='mb-2 text-xs text-gray-500'>{t('appDebug.feature.moderation.modal.keywords.tip')}</div>
|
||||
<div className='relative px-3 py-2 h-[88px] bg-gray-100 rounded-lg'>
|
||||
<div className='mb-1 text-sm font-medium text-text-primary'>{t('appDebug.feature.moderation.modal.provider.keywords')}</div>
|
||||
<div className='mb-2 text-xs text-text-tertiary'>{t('appDebug.feature.moderation.modal.keywords.tip')}</div>
|
||||
<div className='relative px-3 py-2 h-[88px] bg-components-input-bg-normal rounded-lg'>
|
||||
<textarea
|
||||
value={localeData.config?.keywords || ''}
|
||||
onChange={handleDataKeywordsChange}
|
||||
className='block w-full h-full bg-transparent text-sm outline-none appearance-none resize-none'
|
||||
className='block w-full h-full bg-transparent text-sm text-text-secondary outline-none appearance-none resize-none'
|
||||
placeholder={t('appDebug.feature.moderation.modal.keywords.placeholder') || ''}
|
||||
/>
|
||||
<div className='absolute bottom-2 right-2 flex items-center px-1 h-5 rounded-md bg-gray-50 text-xs font-medium text-gray-300'>
|
||||
<span>{(localeData.config?.keywords || '').split('\n').filter(Boolean).length}</span>/<span className='text-gray-500'>100 {t('appDebug.feature.moderation.modal.keywords.line')}</span>
|
||||
<div className='absolute bottom-2 right-2 flex items-center px-1 h-5 rounded-md bg-background-section text-xs font-medium text-text-quaternary'>
|
||||
<span>{(localeData.config?.keywords || '').split('\n').filter(Boolean).length}</span>/<span className='text-text-tertiary'>100 {t('appDebug.feature.moderation.modal.keywords.line')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -309,13 +313,13 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
|
||||
localeData.type === 'api' && (
|
||||
<div className='py-2'>
|
||||
<div className='flex items-center justify-between h-9'>
|
||||
<div className='text-sm font-medium text-gray-900'>{t('common.apiBasedExtension.selector.title')}</div>
|
||||
<div className='text-sm font-medium text-text-primary'>{t('common.apiBasedExtension.selector.title')}</div>
|
||||
<a
|
||||
href={t('common.apiBasedExtension.linkUrl') || '/'}
|
||||
target='_blank' rel='noopener noreferrer'
|
||||
className='group flex items-center text-xs text-gray-500 hover:text-primary-600'
|
||||
className='group flex items-center text-xs text-text-tertiary hover:text-primary-600'
|
||||
>
|
||||
<BookOpen01 className='mr-1 w-3 h-3 text-gray-500 group-hover:text-primary-600' />
|
||||
<BookOpen01 className='mr-1 w-3 h-3 text-text-tertiary group-hover:text-primary-600' />
|
||||
{t('common.apiBasedExtension.link')}
|
||||
</a>
|
||||
</div>
|
||||
@ -337,7 +341,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
|
||||
/>
|
||||
)
|
||||
}
|
||||
<div className='my-3 h-[1px] bg-gradient-to-r from-[#F3F4F6]'></div>
|
||||
<Divider bgStyle='gradient' className='my-3 h-px' />
|
||||
<ModerationContent
|
||||
title={t('appDebug.feature.moderation.modal.content.input') || ''}
|
||||
config={localeData.config?.inputs_config || { enabled: false, preset_response: '' }}
|
||||
@ -352,7 +356,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
|
||||
info={(localeData.type === 'api' && t('appDebug.feature.moderation.modal.content.fromApi')) || ''}
|
||||
showPreset={!(localeData.type === 'api')}
|
||||
/>
|
||||
<div className='mt-1 mb-8 text-xs font-medium text-gray-500'>{t('appDebug.feature.moderation.modal.content.condition')}</div>
|
||||
<div className='mt-1 mb-8 text-xs font-medium text-text-tertiary'>{t('appDebug.feature.moderation.modal.content.condition')}</div>
|
||||
<div className='flex items-center justify-end'>
|
||||
<Button
|
||||
onClick={onCancel}
|
||||
|
||||
@ -93,13 +93,13 @@ const VoiceParamConfig = ({
|
||||
>
|
||||
<div className='relative h-8'>
|
||||
<ListboxButton
|
||||
className={'w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 cursor-pointer'}>
|
||||
<span className={classNames('block truncate text-left', !languageItem?.name && 'text-gray-400')}>
|
||||
className={'w-full h-full rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover group-hover:bg-state-base-hover cursor-pointer'}>
|
||||
<span className={classNames('block truncate text-left text-text-secondary', !languageItem?.name && 'text-text-tertiary')}>
|
||||
{languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder}
|
||||
</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronDownIcon
|
||||
className="h-5 w-5 text-gray-400"
|
||||
className="h-4 w-4 text-text-tertiary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
@ -112,11 +112,11 @@ const VoiceParamConfig = ({
|
||||
>
|
||||
|
||||
<ListboxOptions
|
||||
className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
|
||||
className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm">
|
||||
{languages.map((item: Item) => (
|
||||
<ListboxOption
|
||||
key={item.value}
|
||||
className='relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 data-[active]:bg-gray-100'
|
||||
className='relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-state-base-hover text-text-secondary data-[active]:bg-state-base-active'
|
||||
value={item}
|
||||
disabled={false}
|
||||
>
|
||||
@ -127,21 +127,21 @@ const VoiceParamConfig = ({
|
||||
{(selected || item.value === text2speech?.language) && (
|
||||
<span
|
||||
className={classNames(
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary',
|
||||
)}
|
||||
>
|
||||
<CheckIcon className="h-5 w-5" aria-hidden="true" />
|
||||
</span>
|
||||
<CheckIcon className="h-4 w-4" aria-hidden="true" />
|
||||
</span >
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</ListboxOption>
|
||||
</ListboxOption >
|
||||
))}
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
</ListboxOptions >
|
||||
</Transition >
|
||||
</div >
|
||||
</Listbox >
|
||||
</div >
|
||||
<div className='mb-3'>
|
||||
<div className='mb-1 py-1 text-text-secondary system-sm-semibold'>
|
||||
{t('appDebug.voice.voiceSettings.voice')}
|
||||
@ -158,12 +158,12 @@ const VoiceParamConfig = ({
|
||||
>
|
||||
<div className={'grow relative h-8'}>
|
||||
<ListboxButton
|
||||
className={'w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 cursor-pointer'}>
|
||||
className={'w-full h-full rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover group-hover:bg-state-base-hover cursor-pointer'}>
|
||||
<span
|
||||
className={classNames('block truncate text-left', !voiceItem?.name && 'text-gray-400')}>{voiceItem?.name ?? localVoicePlaceholder}</span>
|
||||
className={classNames('block truncate text-left text-text-secondary', !voiceItem?.name && 'text-text-tertiary')}>{voiceItem?.name ?? localVoicePlaceholder}</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronDownIcon
|
||||
className="h-5 w-5 text-gray-400"
|
||||
className="h-4 w-4 text-text-tertiary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
@ -176,11 +176,11 @@ const VoiceParamConfig = ({
|
||||
>
|
||||
|
||||
<ListboxOptions
|
||||
className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm">
|
||||
className="absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm">
|
||||
{voiceItems?.map((item: Item) => (
|
||||
<ListboxOption
|
||||
key={item.value}
|
||||
className='relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 data-[active]:bg-gray-100'
|
||||
className='relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-state-base-hover text-text-secondary data-[active]:bg-state-base-active'
|
||||
value={item}
|
||||
disabled={false}
|
||||
>
|
||||
@ -190,20 +190,20 @@ const VoiceParamConfig = ({
|
||||
{(selected || item.value === text2speech?.voice) && (
|
||||
<span
|
||||
className={classNames(
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
|
||||
'absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary',
|
||||
)}
|
||||
>
|
||||
<CheckIcon className="h-5 w-5" aria-hidden="true" />
|
||||
</span>
|
||||
<CheckIcon className="h-4 w-4" aria-hidden="true" />
|
||||
</span >
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</ListboxOption>
|
||||
</ListboxOption >
|
||||
))}
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
</ListboxOptions >
|
||||
</Transition >
|
||||
</div >
|
||||
</Listbox >
|
||||
{languageItem?.example && (
|
||||
<div className='shrink-0 h-8 p-1 rounded-lg bg-components-button-tertiary-bg'>
|
||||
<AudioBtn
|
||||
@ -214,8 +214,8 @@ const VoiceParamConfig = ({
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
</div >
|
||||
<div>
|
||||
<div className='mb-1 py-1 text-text-secondary system-sm-semibold'>
|
||||
{t('appDebug.voice.voiceSettings.autoPlay')}
|
||||
|
||||
@ -9,7 +9,7 @@ import RemarkGfm from 'remark-gfm'
|
||||
import RehypeRaw from 'rehype-raw'
|
||||
import SyntaxHighlighter from 'react-syntax-highlighter'
|
||||
import { atelierHeathLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'
|
||||
import { Component, createContext, memo, useContext, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { Component, createContext, memo, useContext, useMemo, useRef, useState } from 'react'
|
||||
import cn from '@/utils/classnames'
|
||||
import CopyBtn from '@/app/components/base/copy-btn'
|
||||
import SVGBtn from '@/app/components/base/svg'
|
||||
@ -241,7 +241,7 @@ const Link: Components['a'] = ({ node, ...props }) => {
|
||||
export function Markdown(props: { content: string; className?: string }) {
|
||||
const latexContent = preprocessLaTeX(props.content)
|
||||
return (
|
||||
<div className={cn(props.className, 'markdown-body')}>
|
||||
<div className={cn('markdown-body', props.className)}>
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[RemarkGfm, RemarkMath, RemarkBreaks]}
|
||||
rehypePlugins={[
|
||||
|
||||
@ -12,7 +12,7 @@ const Card: FC<CardProps> = ({
|
||||
{
|
||||
log.length === 1 && (
|
||||
<div className='px-4 py-2'>
|
||||
<div className='whitespace-pre-line text-gray-700'>
|
||||
<div className='whitespace-pre-line text-text-secondary'>
|
||||
{log[0].text}
|
||||
</div>
|
||||
</div>
|
||||
@ -23,12 +23,12 @@ const Card: FC<CardProps> = ({
|
||||
<div>
|
||||
{
|
||||
log.map((item, index) => (
|
||||
<div key={index} className='group/card mb-2 px-4 pt-2 pb-4 rounded-xl hover:bg-gray-50 last-of-type:mb-0'>
|
||||
<div key={index} className='group/card mb-2 px-4 pt-2 pb-4 rounded-xl hover:bg-state-base-hover last-of-type:mb-0'>
|
||||
<div className='flex justify-between items-center h-8'>
|
||||
<div className='font-semibold text-[#2D31A6]'>{item.role.toUpperCase()}</div>
|
||||
<CopyFeedbackNew className='hidden w-6 h-6 group-hover/card:block' content={item.text} />
|
||||
</div>
|
||||
<div className='whitespace-pre-line text-gray-700'>{item.text}</div>
|
||||
<div className='whitespace-pre-line text-text-secondary'>{item.text}</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@ const PromptLogModal: FC<PromptLogModalProps> = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
className='relative flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl z-10'
|
||||
className='relative flex flex-col bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xl z-10'
|
||||
style={{
|
||||
width: 480,
|
||||
position: 'fixed',
|
||||
@ -43,14 +43,14 @@ const PromptLogModal: FC<PromptLogModalProps> = ({
|
||||
}}
|
||||
ref={ref}
|
||||
>
|
||||
<div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-b-gray-100'>
|
||||
<div className='text-base font-semibold text-gray-900'>PROMPT LOG</div>
|
||||
<div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-divider-regular'>
|
||||
<div className='text-base font-semibold text-text-primary'>PROMPT LOG</div>
|
||||
<div className='flex items-center'>
|
||||
{
|
||||
currentLogItem.log?.length === 1 && (
|
||||
<>
|
||||
<CopyFeedbackNew className='w-6 h-6' content={currentLogItem.log[0].text} />
|
||||
<div className='mx-2.5 w-[1px] h-[14px] bg-gray-200' />
|
||||
<div className='mx-2.5 w-[1px] h-[14px] bg-divider-regular' />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -58,7 +58,7 @@ const PromptLogModal: FC<PromptLogModalProps> = ({
|
||||
onClick={onCancel}
|
||||
className='flex justify-center items-center w-6 h-6 cursor-pointer'
|
||||
>
|
||||
<RiCloseLine className='w-4 h-4 text-gray-500' />
|
||||
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -20,7 +20,7 @@ const Switch = (
|
||||
disabled = false,
|
||||
className,
|
||||
}: SwitchProps & {
|
||||
ref: React.RefObject<HTMLButtonElement>;
|
||||
ref?: React.RefObject<HTMLButtonElement>;
|
||||
},
|
||||
) => {
|
||||
const [enabled, setEnabled] = useState(defaultValue)
|
||||
|
||||
Reference in New Issue
Block a user