opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feat/parent-child-retrieval' of https://github.com/langgenius/dify into feat/parent-child-retrieval

This commit is contained in:
twwu 2024-12-13 14:45:39 +08:00
parent a4c66e3659 ab76266993
commit 44929133a4
32 changed files with 301 additions and 380 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,7 +33,7 @@ const AppIcon: FC<AppIconProps> = ({
onClick,
}) => {
const wrapperClassName = classNames(
style.appIcon,
'flex items-center justify-center relative w-9 h-9 text-lg rounded-lg grow-0 shrink-0',
size !== 'medium' && style[size],
rounded && style.rounded,
className ?? '',

6
web/app/components/base/app-icon/style.module.css
View File

@ -1,7 +1,3 @@
.appIcon {
@apply flex items-center justify-center relative w-9 h-9 text-lg rounded-lg grow-0 shrink-0;
}
.appIcon.large {
@apply w-10 h-10;
}
@ -20,4 +16,4 @@
.appIcon.rounded {
@apply rounded-full;
}
}

2
web/app/components/base/input-number/index.tsx
View File

@ -39,7 +39,7 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
}}
/>
{unit && <div className='flex items-center bg-components-input-bg-normal text-[13px] text-text-placeholder pr-2'>{unit}</div>}
<div className='flex flex-col bg-components-input-bg-normal rounded-r-md border-l text-text-tertiary focus:shadow-xs'>
<div className='flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs'>
<button onClick={inc} className={classNames(
size === 'sm' ? 'pt-1' : 'pt-1.5',
'px-1.5 hover:bg-components-input-bg-hover',

3
web/app/components/base/param-item/index.tsx
View File

@ -35,7 +35,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
}}
/>
)}
<span className="mx-1 text-gray-900 text-[13px] leading-[18px] font-medium">{name}</span>
<span className="mx-1 text-text-secondary text-[13px] leading-[18px] font-medium">{name}</span>
{!noTooltip && (
<Tooltip
triggerClassName='w-4 h-4 shrink-0'
@ -59,6 +59,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
onChange={(value) => {
onChange(id, value)
}}
className='w-8'
/>
</div>
<div className="flex items-center h-7 grow">

6
web/app/components/base/radio-card/index.tsx
View File

@ -41,8 +41,8 @@ const RadioCard: FC<Props> = ({
{icon}
</div>
<div className='grow'>
<div className='leading-5 text-sm font-medium text-gray-900'>{title}</div>
<div className='leading-[18px] text-xs font-normal text-[#667085]'>{description}</div>
<div className='leading-5 text-sm font-medium text-text-secondary'>{title}</div>
<div className='leading-[18px] text-xs font-normal text-text-tertiary'>{description}</div>
</div>
{!noRadio && (
<div className='shrink-0 flex items-center h-8'>
@ -54,7 +54,7 @@ const RadioCard: FC<Props> = ({
)}
</div>
{((isChosen && chosenConfig) || noRadio) && (
<div className={cn(chosenConfigWrapClassName, 'p-3 border-t border-gray-200')}>
<div className={cn(chosenConfigWrapClassName, 'p-3')}>
{chosenConfig}
</div>
)}

7
web/app/components/base/simple-pie-chart/index.tsx
View File

@ -10,10 +10,11 @@ export type SimplePieChartProps = {
fill?: string
stroke?: string
size?: number
animationDuration?: number
className?: string
}
const SimplePieChart = ({ percentage = 80, fill = '#fdb022', stroke = '#f79009', size = 12, className }: SimplePieChartProps) => {
const SimplePieChart = ({ percentage = 80, fill = '#fdb022', stroke = '#f79009', size = 12, animationDuration, className }: SimplePieChartProps) => {
const option: EChartsOption = useMemo(() => ({
series: [
{
@ -34,7 +35,7 @@ const SimplePieChart = ({ percentage = 80, fill = '#fdb022', stroke = '#f79009',
{
type: 'pie',
radius: '83%',
animationDuration: 600,
animationDuration: animationDuration ?? 600,
data: [
{ value: percentage, itemStyle: { color: fill } },
{ value: 100 - percentage, itemStyle: { color: '#fff' } },
@ -48,7 +49,7 @@ const SimplePieChart = ({ percentage = 80, fill = '#fdb022', stroke = '#f79009',
cursor: 'default',
},
],
}), [stroke, fill, percentage])
}), [stroke, fill, percentage, animationDuration])
return (
<ReactECharts

8
web/app/components/billing/priority-label/index.tsx
View File

@ -38,17 +38,17 @@ const PriorityLabel = () => {
</div>
}>
<span className={`
flex items-center ml-1 px-[5px] h-[18px] rounded border border-[#C7D7FE]
text-[10px] font-medium text-[#3538CD]
shrink-0 flex items-center ml-1 px-1 h-[18px] rounded-[5px] border border-text-accent-secondary
text-2xs font-medium text-text-accent-secondary
`}>
{
plan.type === Plan.professional && (
<ZapNarrow className='mr-0.5 w-3 h-3' />
<ZapNarrow className='mr-0.5 size-3' />
)
}
{
(plan.type === Plan.team || plan.type === Plan.enterprise) && (
<ZapFast className='mr-0.5 w-3 h-3' />
<ZapFast className='mr-0.5 size-3' />
)
}
{t(`billing.plansCommon.priority.${priority}`)}

2
web/app/components/datasets/common/document-picker/preview-document-picker.tsx
View File

@ -54,7 +54,7 @@ const PreviewDocumentPicker: FC<Props> = ({
<FileIcon name={name} extension={extension} size='md' />
<div className='flex flex-col items-start ml-1'>
<div className='flex items-center space-x-0.5'>
<span className={cn('system-md-semibold max-w-[200px] overflow-clip')}> {name || '--'}</span>
<span className={cn('system-md-semibold max-w-[200px] overflow-clip text-text-primary')}> {name || '--'}</span>
<ArrowIcon className={'h-[18px] w-[18px] text-text-primary'} />
</div>
</div>

2
web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
View File

@ -25,7 +25,7 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
<OptionCard icon={<Image className='w-4 h-4' src={retrievalIcon.vector} alt='' />}
title={t('dataset.retrieval.invertedIndex.title')}
description={t('dataset.retrieval.invertedIndex.description')} isActive
activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]'
activeHeaderClassName='dataset-option-card-purple-gradient'
>
<RetrievalParamConfig
type={RETRIEVE_METHOD.invertedIndex}

6
web/app/components/datasets/common/retrieval-method-config/index.tsx
View File

@ -69,7 +69,7 @@ const RetrievalMethodConfig: FC<Props> = ({
search_method: RETRIEVE_METHOD.semantic,
})}
effectImg={Effect.src}
activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]'
activeHeaderClassName='dataset-option-card-purple-gradient'
>
<RetrievalParamConfig
type={RETRIEVE_METHOD.semantic}
@ -90,7 +90,7 @@ const RetrievalMethodConfig: FC<Props> = ({
search_method: RETRIEVE_METHOD.fullText,
})}
effectImg={Effect.src}
activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]'
activeHeaderClassName='dataset-option-card-purple-gradient'
>
<RetrievalParamConfig
type={RETRIEVE_METHOD.fullText}
@ -116,7 +116,7 @@ const RetrievalMethodConfig: FC<Props> = ({
reranking_enable: true,
})}
effectImg={Effect.src}
activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]'
activeHeaderClassName='bg-dataset-option-card-purple-gradient'
>
<RetrievalParamConfig
type={RETRIEVE_METHOD.hybrid}

2
web/app/components/datasets/common/retrieval-param-config/index.tsx
View File

@ -140,7 +140,7 @@ const RetrievalParamConfig: FC<Props> = ({
</div>
)}
<div className='flex items-center'>
<span className='mr-0.5'>{t('common.modelProvider.rerankModel.key')}</span>
<span className='mr-0.5 text-text-secondary'>{t('common.modelProvider.rerankModel.key')}</span>
<Tooltip
popupContent={
<div className="w-[200px]">{t('common.modelProvider.rerankModel.tip')}</div>

52
web/app/components/datasets/create/embedding-process/index.module.css
View File

@ -14,24 +14,7 @@
border-radius: 6px;
overflow: hidden;
}
.sourceItem.error {
background: #FEE4E2;
}
.sourceItem.success {
background: #D1FADF;
}
.progressbar {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #B2CCFF;
}
.sourceItem .info {
display: flex;
align-items: center;
z-index: 1;
}
.sourceItem .info .name {
font-weight: 500;
font-size: 12px;
@ -55,13 +38,6 @@
color: #05603A;
}
.cost {
@apply flex justify-between items-center text-xs text-gray-700;
}
.embeddingStatus {
@apply flex items-center justify-between text-gray-900 font-medium text-sm mr-2;
}
.commonIcon {
@apply w-3 h-3 mr-1 inline-block align-middle;
}
@ -81,35 +57,33 @@
@apply text-xs font-medium;
}
.fileIcon {
@apply w-4 h-4 mr-1 bg-center bg-no-repeat;
.unknownFileIcon {
background-image: url(../assets/unknown.svg);
background-size: 16px;
}
.fileIcon.csv {
.csv {
background-image: url(../assets/csv.svg);
}
.fileIcon.docx {
.docx {
background-image: url(../assets/docx.svg);
}
.fileIcon.xlsx,
.fileIcon.xls {
.xlsx,
.xls {
background-image: url(../assets/xlsx.svg);
}
.fileIcon.pdf {
.pdf {
background-image: url(../assets/pdf.svg);
}
.fileIcon.html,
.fileIcon.htm {
.html,
.htm {
background-image: url(../assets/html.svg);
}
.fileIcon.md,
.fileIcon.markdown {
.md,
.markdown {
background-image: url(../assets/md.svg);
}
.fileIcon.txt {
.txt {
background-image: url(../assets/txt.svg);
}
.fileIcon.json {
.json {
background-image: url(../assets/json.svg);
}

109
web/app/components/datasets/create/embedding-process/index.tsx
View File

@ -6,13 +6,15 @@ import { useTranslation } from 'react-i18next'
import { omit } from 'lodash-es'
import { ArrowRightIcon } from '@heroicons/react/24/solid'
import {
RiCheckboxCircleFill,
RiErrorWarningFill,
RiLoader2Fill,
RiTerminalBoxLine,
} from '@remixicon/react'
import Image from 'next/image'
import { indexMethodIcon, retrievalIcon } from '../icons'
import s from './index.module.css'
import { IndexingType } from '../step-two'
import DocumentFileIcon from '../../common/document-file-icon'
import cn from '@/utils/classnames'
import { FieldInfo } from '@/app/components/datasets/documents/detail/metadata'
import Button from '@/app/components/base/button'
@ -25,7 +27,6 @@ import { Plan } from '@/app/components/billing/type'
import { ZapFast } from '@/app/components/base/icons/src/vender/solid/general'
import UpgradeBtn from '@/app/components/billing/upgrade-btn'
import { useProviderContext } from '@/context/provider-context'
import Tooltip from '@/app/components/base/tooltip'
import { sleep } from '@/utils'
import { RETRIEVE_METHOD } from '@/types/app'
@ -83,7 +84,7 @@ const RuleDetail: FC<{
return value
}, [sourceData])
return <div className='flex flex-col pt-8 pb-10 first:mt-0'>
return <div className='flex flex-col gap-1'>
{Object.keys(segmentationRuleMap).map((field) => {
return <FieldInfo
key={field}
@ -93,11 +94,12 @@ const RuleDetail: FC<{
})}
<FieldInfo
label={t('datasetCreation.stepTwo.indexMode')}
displayedValue={t(`datasetCreation.stepTwo.${indexingType}`) as string}
displayedValue={t(`datasetCreation.stepTwo.${indexingType === IndexingType.ECONOMICAL ? 'economical' : 'qualified'}`) as string}
valueIcon={
<Image
className='size-4'
src={
indexingType === 'economy'
indexingType === IndexingType.ECONOMICAL
? indexMethodIcon.economical
: indexMethodIcon.high_quality
}
@ -107,15 +109,17 @@ const RuleDetail: FC<{
/>
<FieldInfo
label={t('datasetSettings.form.retrievalSetting.title')}
displayedValue={t(`datasetSettings.form.retrievalSetting.${retrievalMethod}`) as string}
// displayedValue={t(`datasetSettings.form.retrievalSetting.${retrievalMethod}`) as string}
displayedValue={t(`dataset.retrieval.${indexingType === IndexingType.ECONOMICAL ? 'invertedIndex' : retrievalMethod}.title`) as string}
valueIcon={
<Image
className='size-4'
src={
retrievalMethod === RETRIEVE_METHOD.fullText
? retrievalIcon.fullText
: RETRIEVE_METHOD.semantic
? retrievalIcon.vector
: retrievalIcon.hybrid
: retrievalMethod === RETRIEVE_METHOD.hybrid
? retrievalIcon.hybrid
: retrievalIcon.vector
}
alt=''
/>
@ -167,6 +171,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
}
useEffect(() => {
setIsStopQuery(false)
startQueryStatus()
return () => {
stopQueryStatus()
@ -225,8 +230,8 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
return (
<>
<div className='h-5 flex items-center mb-5'>
<div className={s.embeddingStatus}>
<div className="h-5 flex items-center mb-3">
<div className="flex items-center justify-between text-gray-900 font-medium text-sm mr-2">
{isEmbedding && <div className='flex items-center'>
<RiLoader2Fill className='size-4 mr-1 animate-spin' />
{t('datasetDocuments.embedding.processing')}
@ -247,68 +252,68 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
</div>
)
}
<div className={s.progressContainer}>
<div className="flex flex-col gap-0.5 pb-2">
{indexingStatusBatchDetail.map(indexingStatusDetail => (
<div key={indexingStatusDetail.id} className={cn(
s.sourceItem,
indexingStatusDetail.indexing_status === 'error' && s.error,
indexingStatusDetail.indexing_status === 'completed' && s.success,
'relative h-[26px] bg-components-progress-bar-bg rounded-md overflow-hidden',
indexingStatusDetail.indexing_status === 'error' && 'bg-state-destructive-hover-alt',
// indexingStatusDetail.indexing_status === 'completed' && 's.success',
)}>
{isSourceEmbedding(indexingStatusDetail) && (
<div className={s.progressbar} style={{ width: `${getSourcePercent(indexingStatusDetail)}%` }} />
<div className="absolute top-0 left-0 h-full min-w-0.5 bg-components-progress-bar-progress border-r-[2px] border-r-components-progress-bar-progress-highlight" style={{ width: `${getSourcePercent(indexingStatusDetail)}%` }} />
)}
<div className={`${s.info} grow`}>
<div className="flex gap-1 pl-[6px] pr-2 h-full items-center z-[1]">
{getSourceType(indexingStatusDetail.id) === DataSourceType.FILE && (
<div className={cn(s.fileIcon, s[getFileType(getSourceName(indexingStatusDetail.id))])} />
// <div className={cn(
// 'shrink-0 marker:size-4 bg-center bg-no-repeat bg-contain',
// s[getFileType(getSourceName(indexingStatusDetail.id))] || s.unknownFileIcon,
// )} />
<DocumentFileIcon
className="shrink-0 size-4"
name={getSourceName(indexingStatusDetail.id)}
extension={getFileType(getSourceName(indexingStatusDetail.id))}
/>
)}
{getSourceType(indexingStatusDetail.id) === DataSourceType.NOTION && (
<NotionIcon
className='shrink-0 mr-1'
className='shrink-0'
type='page'
src={getIcon(indexingStatusDetail.id)}
/>
)}
<div className={`${s.name} truncate`} title={getSourceName(indexingStatusDetail.id)}>{getSourceName(indexingStatusDetail.id)}</div>
{
enableBilling && (
<PriorityLabel />
)
}
</div>
<div className='shrink-0'>
{isSourceEmbedding(indexingStatusDetail) && (
<div className={s.percent}>{`${getSourcePercent(indexingStatusDetail)}%`}</div>
)}
{indexingStatusDetail.indexing_status === 'error' && indexingStatusDetail.error && (
<Tooltip
popupContent={(
<div className='max-w-[400px]'>
{indexingStatusDetail.error}
</div>
)}
>
<div className={cn(s.percent, s.error, 'flex items-center')}>
Error
<RiErrorWarningFill className='ml-1 w-4 h-4' />
</div>
</Tooltip>
)}
{indexingStatusDetail.indexing_status === 'error' && !indexingStatusDetail.error && (
<div className={cn(s.percent, s.error, 'flex items-center')}>
Error
<div className="grow flex items-center gap-1" title={getSourceName(indexingStatusDetail.id)}>
<div className="text-xs truncate">
{getSourceName(indexingStatusDetail.id)}
</div>
{
enableBilling && (
<PriorityLabel />
)
}
</div>
{isSourceEmbedding(indexingStatusDetail) && (
<div className="shrink-0 text-xs">{`${getSourcePercent(indexingStatusDetail)}%`}</div>
)}
{indexingStatusDetail.indexing_status === 'error' && (
<>
<span className="flex items-center max-w-[200px] text-xs text-text-destructive truncate" title={indexingStatusDetail.error || ''}>
{indexingStatusDetail.error || 'Error'}
</span>
<RiErrorWarningFill className='shrink-0 size-4 text-text-destructive' />
</>
)}
{indexingStatusDetail.indexing_status === 'completed' && (
<div className={cn(s.percent, s.success)}>100%</div>
<RiCheckboxCircleFill className='shrink-0 size-4' />
)}
</div>
</div>
))}
</div>
<RuleDetail sourceData={ruleDetail} indexingType={
indexingType
}
retrievalMethod={retrievalMethod}
<hr className="my-3 h-[1px] bg-divider-subtle border-0" />
<RuleDetail
sourceData={ruleDetail}
indexingType={indexingType}
retrievalMethod={retrievalMethod}
/>
<div className='flex items-center gap-2 my-10'>
<Button className='w-fit' onClick={navToApiDocs}>

55
web/app/components/datasets/create/file-uploader/index.module.css
View File

@ -1,58 +1,3 @@
.fileUploader {
@apply mb-6;
}
.fileUploader .title {
@apply mb-2;
font-weight: 500;
font-size: 16px;
line-height: 24px;
}
.fileUploader .tip {
font-weight: 400;
font-size: 12px;
line-height: 18px;
}
.uploader {
@apply relative box-border flex justify-center items-center mb-2 p-3;
flex-direction: column;
max-width: 640px;
min-height: 80px;
border-radius: 12px;
font-weight: 400;
font-size: 14px;
line-height: 20px;
}
.uploader .draggingCover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.uploader .uploadIcon {
content: '';
display: block;
margin-right: 8px;
width: 24px;
height: 24px;
background: center no-repeat url(../assets/upload-cloud-01.svg);
background-size: contain;
}
.uploader .browse {
@apply pl-1 cursor-pointer;
color: #155eef;
}
.fileList {
@apply space-y-2;
}
.file {
@apply box-border relative flex items-center justify-between;
padding: 8px 12px 8px 8px;

82
web/app/components/datasets/create/file-uploader/index.tsx
View File

@ -3,11 +3,12 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import useSWR from 'swr'
import classNames from 'classnames'
import s from './index.module.css'
import { RiDeleteBinLine, RiUploadCloud2Line } from '@remixicon/react'
import DocumentFileIcon from '../../common/document-file-icon'
import cn from '@/utils/classnames'
import type { CustomFile as File, FileItem } from '@/models/datasets'
import { ToastContext } from '@/app/components/base/toast'
import SimplePieChart from '@/app/components/base/simple-pie-chart'
import { upload } from '@/service/base'
import { fetchFileUploadConfig } from '@/service/common'
@ -15,6 +16,8 @@ import { fetchSupportFileTypes } from '@/service/datasets'
import I18n from '@/context/i18n'
import { LanguagesSupported } from '@/i18n/language'
import { IS_CE_EDITION } from '@/config'
import { useAppContext } from '@/context/app-context'
import { Theme } from '@/types/app'
const FILES_NUMBER_LIMIT = 20
@ -223,6 +226,9 @@ const FileUploader = ({
initialUpload(files.filter(isValid))
}, [isValid, initialUpload])
const { theme } = useAppContext()
const chartColor = useMemo(() => theme === Theme.dark ? '#5289ff' : '#296dff', [theme])
useEffect(() => {
dropRef.current?.addEventListener('dragenter', handleDragEnter)
dropRef.current?.addEventListener('dragover', handleDragOver)
@ -237,12 +243,12 @@ const FileUploader = ({
}, [handleDrop])
return (
<div className={s.fileUploader}>
<div className="mb-5">
{!hideUpload && (
<input
ref={fileUploader}
id="fileUploader"
style={{ display: 'none' }}
className="hidden"
type="file"
multiple={!notSupportBatchUpload}
accept={ACCEPTS.join(',')}
@ -250,52 +256,66 @@ const FileUploader = ({
/>
)}
<div className={cn(s.title, titleClassName, 'text-text-secondary')}>{t('datasetCreation.stepOne.uploader.title')}</div>
{!hideUpload && (
<div className={cn('text-text-tertiary text-sm font-semibold leading-6 mb-1', titleClassName)}>{t('datasetCreation.stepOne.uploader.title')}</div>
<div ref={dropRef} className={cn(s.uploader, dragging && '', 'bg-components-dropzone-bg border border-components-dropzone-border')}>
<div className='flex justify-center items-center min-h-6 mb-2'>
<span className={classNames(s.uploadIcon, 'text-text-tertiary')} />
<span className='text-text-secondary'>
{!hideUpload && (
<div ref={dropRef} className={cn('relative box-border flex flex-col justify-center items-center gap-1 mb-2 px-4 py-3 max-w-[640px] min-h-20 leading-4 text-xs text-text-tertiary bg-components-dropzone-bg border border-dashed border-components-dropzone-border rounded-xl', dragging && 'bg-components-dropzone-bg-accent border-components-dropzone-border-accent')}>
<div className="flex justify-center items-center min-h-5 text-sm leading-4 text-text-secondary">
<RiUploadCloud2Line className='mr-2 size-5' />
<span>
{t('datasetCreation.stepOne.uploader.button')}
<label className={s.browse} onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
<label className="ml-1 text-text-accent cursor-pointer" onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
</span>
</div>
<div className={classNames(s.tip, 'text-text-tertiary')}>{t('datasetCreation.stepOne.uploader.tip', {
<div>{t('datasetCreation.stepOne.uploader.tip', {
size: fileUploadConfig.file_size_limit,
supportTypes: supportTypesShowNames,
})}</div>
{dragging && <div ref={dragRef} className={s.draggingCover} />}
{dragging && <div ref={dragRef} className='absolute top-0 left-0 w-full h-full' />}
</div>
)}
<div className={s.fileList}>
<div className='space-y-1 max-w-[640px] cursor-default'>
{fileList.map((fileItem, index) => (
<div
key={`${fileItem.fileID}-${index}`}
onClick={() => fileItem.file?.id && onPreview(fileItem.file)}
className={cn(
s.file,
fileItem.progress < 100 && s.uploading,
'flex items-center h-12 bg-components-panel-on-panel-item-bg text-xs leading-3 text-text-tertiary border border-components-panel-border rounded-lg shadow-xs',
// 'border-state-destructive-border bg-state-destructive-hover',
)}
>
{fileItem.progress < 100 && (
<div className={s.progressbar} style={{ width: `${fileItem.progress}%` }} />
)}
<div className={s.fileInfo}>
<div className={cn(s.fileIcon, s[getFileType(fileItem.file)])} />
<div className={s.filename}>{fileItem.file.name}</div>
<div className={s.size}>{getFileSize(fileItem.file.size)}</div>
<div className="shrink-0 flex justify-center items-center w-12">
<DocumentFileIcon
className="shrink-0 size-6"
name={fileItem.file.name}
extension={getFileType(fileItem.file)}
/>
</div>
<div className={s.actionWrapper}>
<div className="grow shrink flex flex-col gap-0.5 pr-8">
<div className="text-sm leading-4 text-text-secondary w-full whitespace-nowrap text-ellipsis overflow-hidden">{fileItem.file.name}</div>
<div className="w-full leading-3 truncate text-text-tertiary">
<span className='uppercase'>{getFileType(fileItem.file)}</span>
<span className='px-1 text-text-quaternary'>·</span>
<span>{getFileSize(fileItem.file.size)}</span>
{/* <span className='px-1 text-text-quaternary'>·</span>
<span>10k characters</span> */}
</div>
</div>
<div className="shrink-0 flex items-center justify-end gap-1 pr-3 w-16">
{/* <span className="flex justify-center items-center w-6 h-6 cursor-pointer">
<RiErrorWarningFill className='size-4 text-text-warning' />
</span> */}
{(fileItem.progress < 100 && fileItem.progress >= 0) && (
<div className={s.percent}>{`${fileItem.progress}%`}</div>
)}
{fileItem.progress === 100 && (
<div className={s.remove} onClick={(e) => {
e.stopPropagation()
removeFile(fileItem.fileID)
}} />
// <div className={s.percent}>{`${fileItem.progress}%`}</div>
<SimplePieChart percentage={fileItem.progress} stroke={chartColor} fill={chartColor} animationDuration={0} />
)}
<span className="flex justify-center items-center w-6 h-6 cursor-pointer" onClick={(e) => {
e.stopPropagation()
removeFile(fileItem.fileID)
}}>
<RiDeleteBinLine className='size-4 text-text-tertiary' />
</span>
</div>
</div>
))}

17
web/app/components/datasets/create/step-one/index.module.css
View File

@ -88,23 +88,6 @@
background-color: #eaecf0;
}
.OtherCreationOption {
@apply flex items-center cursor-pointer;
font-weight: 500;
font-size: 13px;
line-height: 18px;
color: #155EEF;
}
.OtherCreationOption::before {
content: '';
display: block;
margin-right: 4px;
width: 16px;
height: 16px;
background: center no-repeat url(../assets/folder-plus.svg);
background-size: contain;
}
.notionConnectionTip {
display: flex;
flex-direction: column;

16
web/app/components/datasets/create/step-one/index.tsx
View File

@ -1,6 +1,7 @@
'use client'
import React, { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { RiArrowRightLine, RiFolder6Line } from '@remixicon/react'
import FilePreview from '../file-preview'
import FileUploader from '../file-uploader'
import NotionPagePreview from '../notion-page-preview'
@ -200,7 +201,15 @@ const StepOne = ({
<VectorSpaceFull />
</div>
)}
<Button disabled={nextDisabled} className={s.submitButton} variant='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
<div className="flex justify-end gap-2 max-w-[640px]">
{/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
<Button disabled={!nextDisabled} variant='primary' onClick={onStepChange}>
<span className="flex gap-0.5 px-[10px]">
<span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
<RiArrowRightLine className="size-4" />
</span>
</Button>
</div>
</>
)}
{dataSourceType === DataSourceType.NOTION && (
@ -249,7 +258,10 @@ const StepOne = ({
{!datasetId && (
<>
<div className={s.dividerLine} />
<div onClick={modalShowHandle} className={s.OtherCreationOption}>{t('datasetCreation.stepOne.emptyDatasetCreation')}</div>
<span className="inline-flex items-center cursor-pointer text-[13px] leading-4 text-text-accent" onClick={modalShowHandle}>
<RiFolder6Line className="size-4 mr-1" />
{t('datasetCreation.stepOne.emptyDatasetCreation')}
</span>
</>
)}
</div>

30
web/app/components/datasets/create/step-three/index.tsx
View File

@ -24,29 +24,29 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
const isMobile = media === MediaType.mobile
return (
<div className='flex w-full max-h-full h-full overflow-y-auto'>
<div className={'h-full w-full overflow-y-scroll px-6 sm:px-16'}>
<div className='max-w-[636px]'>
<div className="flex justify-center w-full max-h-full h-full overflow-y-auto">
<div className="grow shrink-0 h-full max-w-[960px] overflow-y-scroll px-14 sm:px-16">
<div className="mx-auto max-w-[640px]">
{!datasetId && (
<>
<div className={s.creationInfo}>
<div className={s.title}>{t('datasetCreation.stepThree.creationTitle')}</div>
<div className={s.content}>{t('datasetCreation.stepThree.creationContent')}</div>
<div className='flex gap-4'>
<AppIcon {...creationCache?.dataset} className='size-14' />
<div className='w-full'>
<div className={s.label}>{t('datasetCreation.stepThree.label')}</div>
<div className={s.datasetName}>{datasetName || creationCache?.dataset?.name}</div>
<div className="pt-10">
<div className="mb-1 text-xl leading-[22px] font-semibold text-text-primary">{t('datasetCreation.stepThree.creationTitle')}</div>
<div className="mb-7 text-[13px] leading-4 text-text-tertiary">{t('datasetCreation.stepThree.creationContent')}</div>
<div className="flex gap-4">
<AppIcon {...creationCache?.dataset} className="size-14 text-2xl self-center" />
<div className="grow flex flex-col gap-1">
<div className="text-[13px] leading-6 font-semibold">{t('datasetCreation.stepThree.label')}</div>
<div className="w-full px-3 py-2 text-[13px] leading-4 bg-components-input-bg-normal rounded-lg truncate">{datasetName || creationCache?.dataset?.name}</div>
</div>
</div>
</div>
<div className={s.dividerLine} />
<hr className="my-6 h-[1px] bg-divider-subtle border-0" />
</>
)}
{datasetId && (
<div className={s.creationInfo}>
<div className={s.title}>{t('datasetCreation.stepThree.additionTitle')}</div>
<div className={s.content}>{`${t('datasetCreation.stepThree.additionP1')} ${datasetName || creationCache?.dataset?.name} ${t('datasetCreation.stepThree.additionP2')}`}</div>
<div className="pt-10">
<div className="mb-1 text-xl leading-[22px] font-semibold text-text-primary">{t('datasetCreation.stepThree.additionTitle')}</div>
<div className="mb-7 text-[13px] leading-4 text-text-tertiary">{`${t('datasetCreation.stepThree.additionP1')} ${datasetName || creationCache?.dataset?.name} ${t('datasetCreation.stepThree.additionP2')}`}</div>
</div>
)}
<EmbeddingProcess

6
web/app/components/datasets/create/step-two/index.module.css
View File

@ -18,11 +18,10 @@
}
.form .label {
@apply pb-2 flex items-center;
@apply pb-2 flex items-center text-text-secondary;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #344054;
}
.segmentationItem {
@ -91,8 +90,7 @@
}
.radioItem {
@apply relative mb-2 rounded-xl border border-gray-100 cursor-pointer;
background-color: #fcfcfd;
@apply relative mb-2 rounded-xl border border-components-option-card-option-border cursor-pointer bg-components-option-card-option-bg;
}
.radioItem.segmentationItem.custom {

169
web/app/components/datasets/create/step-two/index.tsx
View File

@ -588,7 +588,7 @@ const StepTwo = ({
&& <OptionCard
title={t('datasetCreation.stepTwo.general')}
icon={<Image src={SettingCog} alt={t('datasetCreation.stepTwo.general')} />}
activeHeaderClassName='bg-gradient-to-r from-[#EFF0F9] to-[#F9FAFB]'
activeHeaderClassName='bg-dataset-option-card-blue-gradient'
description={t('datasetCreation.stepTwo.generalTip')}
isActive={
[ChuckingMode.text, ChuckingMode.qa].includes(
@ -638,7 +638,7 @@ const StepTwo = ({
<Checkbox
checked={rule.enabled}
/>
<label className="ml-2 text-sm font-normal cursor-pointer text-gray-800">{getRuleName(rule.id)}</label>
<label className="ml-2 text-sm font-normal cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
</div>
))}
</div>
@ -692,7 +692,7 @@ const StepTwo = ({
title={t('datasetCreation.stepTwo.parentChild')}
icon={<Image src={FamilyMod} alt={t('datasetCreation.stepTwo.parentChild')} />}
effectImg={OrangeEffect.src}
activeHeaderClassName='bg-gradient-to-r from-[#F9F1EE] to-[#F9FAFB]'
activeHeaderClassName='bg-dataset-option-card-orange-gradient'
description={t('datasetCreation.stepTwo.parentChildTip')}
isActive={
datasetId ? currentDataset!.doc_form === ChuckingMode.parentChild : docForm === ChuckingMode.parentChild
@ -805,7 +805,7 @@ const StepTwo = ({
<Checkbox
checked={rule.enabled}
/>
<label className="ml-2 text-sm font-normal cursor-pointer text-gray-800">{getRuleName(rule.id)}</label>
<label className="ml-2 text-sm font-normal cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
</div>
))}
</div>
@ -820,105 +820,82 @@ const StepTwo = ({
<div className='max-w-[640px]'>
<div className='flex items-center gap-3 flex-wrap sm:flex-nowrap'>
{(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.QUALIFIED)) && (
<div
className={cn(
s.radioItem,
s.indexItem,
!isAPIKeySet && s.disabled,
!hasSetIndexType && indexType === IndexingType.QUALIFIED && s.active,
hasSetIndexType && s.disabled,
hasSetIndexType && '!w-full !min-h-[96px]',
)}
onClick={() => {
<OptionCard
title={<p className='flex items-center'>
{t('datasetCreation.stepTwo.qualified')}
{!hasSetIndexType && <Badge className='ml-1' uppercase>{t('datasetCreation.stepTwo.recommend')}</Badge>}
<span className='ml-auto'>
{!hasSetIndexType && <span className={cn(s.radio)} />}
</span>
</p>}
description={t('datasetCreation.stepTwo.qualifiedTip')}
icon={<Image src={indexMethodIcon.high_quality} alt='' />}
isActive={!hasSetIndexType && indexType === IndexingType.QUALIFIED}
disabled={!isAPIKeySet || hasSetIndexType}
onSwitched={() => {
if (isAPIKeySet)
setIndexType(IndexingType.QUALIFIED)
}}
>
<div className='h-8 p-1.5 bg-white rounded-lg border border-components-panel-border-subtle justify-center items-center inline-flex absolute left-5 top-[18px]'>
<Image src={indexMethodIcon.high_quality} alt='Gold Icon' width={20} height={20} />
</div>
{!hasSetIndexType && <span className={cn(s.radio)} />}
<div className={s.typeHeader}>
<div className={s.title}>
{t('datasetCreation.stepTwo.qualified')}
{!hasSetIndexType && <span className={s.recommendTag}>{t('datasetCreation.stepTwo.recommend')}</span>}
</div>
<div className={s.tip}>{t('datasetCreation.stepTwo.qualifiedTip')}</div>
</div>
{!isAPIKeySet && (
<div className={s.warningTip}>
<span>{t('datasetCreation.stepTwo.warning')}&nbsp;</span>
<span className={s.click} onClick={onSetting}>{t('datasetCreation.stepTwo.click')}</span>
</div>
)}
</div>
/>
)}
{(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.ECONOMICAL)) && (
<PortalToFollowElem
open={
isHoveringEconomy && docForm !== ChuckingMode.text
}
placement={'top'}
>
<PortalToFollowElemTrigger>
<div
className={cn(
s.radioItem,
s.indexItem,
!hasSetIndexType && indexType === IndexingType.ECONOMICAL && s.active,
hasSetIndexType && s.disabled,
hasSetIndexType && '!w-full !min-h-[96px]',
docForm !== ChuckingMode.text && s.disabled,
)}
onClick={changeToEconomicalType}
ref={economyDomRef}
>
<CustomDialog show={isQAConfirmDialogOpen} onClose={() => setIsQAConfirmDialogOpen(false)} className='w-[432px]'>
<header className='pt-6 mb-4'>
<h2 className='text-lg font-semibold'>
{t('datasetCreation.stepTwo.qaSwitchHighQualityTipTitle')}
</h2>
<p className='font-normal text-sm mt-2'>
{t('datasetCreation.stepTwo.qaSwitchHighQualityTipContent')}
</p>
</header>
<div className='flex gap-2 pb-6'>
<Button className='ml-auto' onClick={() => {
setIsQAConfirmDialogOpen(false)
}}>
{t('datasetCreation.stepTwo.cancel')}
</Button>
<Button variant={'primary'} onClick={() => {
setIsQAConfirmDialogOpen(false)
setIndexType(IndexingType.QUALIFIED)
setDocForm(ChuckingMode.qa)
}}>
{t('datasetCreation.stepTwo.switch')}
</Button>
</div>
</CustomDialog>
<div className='h-8 p-1.5 bg-white rounded-lg border border-components-panel-border-subtle justify-center items-center inline-flex absolute left-5 top-[18px]'>
<Image src={indexMethodIcon.economical} alt='Economical Icon' width={20} height={20} />
</div>
{!hasSetIndexType && <span className={cn(s.radio)} />}
<div className={s.typeHeader}>
<div className={s.title}>{t('datasetCreation.stepTwo.economical')}</div>
<div className={s.tip}>{t('datasetCreation.stepTwo.economicalTip')}</div>
</div>
<>
<CustomDialog show={isQAConfirmDialogOpen} onClose={() => setIsQAConfirmDialogOpen(false)} className='w-[432px]'>
<header className='pt-6 mb-4'>
<h2 className='text-lg font-semibold'>
{t('datasetCreation.stepTwo.qaSwitchHighQualityTipTitle')}
</h2>
<p className='font-normal text-sm mt-2'>
{t('datasetCreation.stepTwo.qaSwitchHighQualityTipContent')}
</p>
</header>
<div className='flex gap-2 pb-6'>
<Button className='ml-auto' onClick={() => {
setIsQAConfirmDialogOpen(false)
}}>
{t('datasetCreation.stepTwo.cancel')}
</Button>
<Button variant={'primary'} onClick={() => {
setIsQAConfirmDialogOpen(false)
setIndexType(IndexingType.QUALIFIED)
setDocForm(ChuckingMode.qa)
}}>
{t('datasetCreation.stepTwo.switch')}
</Button>
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent>
<div className='p-3 bg-white text-xs font-medium text-text-secondary rounded-lg shadow-lg'>
{
docForm === ChuckingMode.qa
? t('datasetCreation.stepTwo.notAvailableForQA')
: t('datasetCreation.stepTwo.notAvailableForParentChild')
}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
)}
</CustomDialog>
<PortalToFollowElem
open={
isHoveringEconomy && docForm !== ChuckingMode.text
}
placement={'top'}
>
<PortalToFollowElemTrigger>
<OptionCard
title={t('datasetCreation.stepTwo.economical')}
description={t('datasetCreation.stepTwo.economicalTip')}
icon={<Image src={indexMethodIcon.economical} alt='' />}
isActive={!hasSetIndexType && indexType === IndexingType.ECONOMICAL}
disabled={!isAPIKeySet || hasSetIndexType || docForm !== ChuckingMode.text}
ref={economyDomRef}
onSwitched={() => {
if (isAPIKeySet && docForm === ChuckingMode.text)
setIndexType(IndexingType.ECONOMICAL)
}}
/>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent>
<div className='p-3 bg-components-tooltip-bg border-components-panel-border text-xs font-medium text-text-secondary rounded-lg shadow-lg'>
{
docForm === ChuckingMode.qa
? t('datasetCreation.stepTwo.notAvailableForQA')
: t('datasetCreation.stepTwo.notAvailableForParentChild')
}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
</>)}
</div>
{hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
<div className='mt-2 text-xs text-gray-500 font-medium'>

4
web/app/components/datasets/create/step-two/language-select/index.tsx
View File

@ -28,7 +28,7 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
{languages.filter(language => language.supported).map(({ prompt_name }) => (
<div
key={prompt_name}
className='py-2 px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer text-gray-700 text-sm'
className='py-2 px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer text-text-secondary text-sm'
onClick={() => onSelect(prompt_name)}>{prompt_name}
</div>
))}
@ -40,7 +40,7 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
<RiArrowDownSLine className='w-3 h-3 opacity-60' />
</div>
}
btnClassName={open => cn('!border-0 !px-0 !py-0 !bg-inherit !hover:bg-inherit', open ? 'text-blue-600' : 'text-gray-500')}
btnClassName={() => cn('!border-0 !px-0 !py-0 !bg-inherit !hover:bg-inherit text-components-button-tertiary-text')}
className='!w-[120px] h-fit !z-20 !translate-x-0 !left-[-16px]'
/>
)

37
web/app/components/datasets/create/step-two/option-card.tsx
View File

@ -1,12 +1,11 @@
import { type ComponentProps, type FC, type ReactNode } from 'react'
import { type ComponentProps, type FC, type ReactNode, forwardRef } from 'react'
import Image from 'next/image'
import piggyBank from '../assets/piggy-bank-01.svg'
import Effect from '../assets/option-card-effect-blue.svg'
import classNames from '@/utils/classnames'
const TriangleArrow: FC<ComponentProps<'svg'>> = props => (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11" fill="none" {...props}>
<path d="M9.87868 1.12132C11.0503 -0.0502525 12.9497 -0.0502525 14.1213 1.12132L23.3137 10.3137H0.686292L9.87868 1.12132Z" fill="white"/>
<path d="M9.87868 1.12132C11.0503 -0.0502525 12.9497 -0.0502525 14.1213 1.12132L23.3137 10.3137H0.686292L9.87868 1.12132Z" fill="currentColor"/>
</svg>
)
@ -27,12 +26,12 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
)}>
<div className='size-14 flex items-center justify-center relative overflow-hidden'>
{isActive && <Image src={effectImg || Effect.src} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
<div className='size-8 rounded-lg border p-1.5 shadow border-components-panel-border-subtle justify-center flex bg-white'>
{icon || <Image src={piggyBank.src} className='size-5' alt={description} width={20} height={20} />}
<div className='size-8 rounded-lg border p-1.5 shadow border-components-panel-border-subtle justify-center flex bg-background-default-dodge'>
{icon}
</div>
</div>
<TriangleArrow
className='absolute left-4 -bottom-1.5'
className='absolute left-4 -bottom-1.5 text-components-panel-bg'
/>
<div className='flex-1 space-y-1 py-3 pr-4'>
<div className='text-text-secondary text-sm font-semibold leading-tight'>{title}</div>
@ -52,14 +51,18 @@ type OptionCardProps = {
effectImg?: string
onSwitched?: () => void
noHighlight?: boolean
disabled?: boolean
} & Omit<ComponentProps<'div'>, 'title'>
export const OptionCard: FC<OptionCardProps> = (props) => {
const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, ...rest } = props
export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, disabled, ...rest } = props
return <div
className={classNames(
'rounded-xl',
(isActive && !noHighlight) ? 'border-components-option-card-option-selected-border bg-components-panel-bg' : 'border-components-option-card-option-border bg-components-option-card-option-bg',
'rounded-xl border',
(isActive && !noHighlight)
? 'border-components-option-card-option-selected-border bg-components-panel-bg'
: 'border-components-option-card-option-border bg-components-option-card-option-bg',
disabled && 'opacity-50',
className,
)}
style={{
@ -71,7 +74,9 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
onSwitched?.()
onClick?.(e)
}}
{...rest}>
{...rest}
ref={ref}
>
<OptionCardHeader
icon={icon}
title={title}
@ -81,10 +86,14 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
effectImg={effectImg}
/>
{/** Body */}
{isActive && <div className='p-3'>{children}
{isActive && (children || actions) && <div className='p-3'>
{children}
{actions && <div className='flex gap-2 mt-4'>
{actions}
</div>}
</div>
}
</div>}
</div>
}
})
OptionCard.displayName = 'OptionCard'

7
web/app/components/datasets/documents/detail/metadata/index.tsx
View File

@ -24,7 +24,6 @@ import type { DocType, FullDocumentDetail } from '@/models/datasets'
import { CUSTOMIZABLE_DOC_TYPES } from '@/models/datasets'
import type { inputType, metadataType } from '@/hooks/use-metadata'
import { useBookCategories, useBusinessDocCategories, useLanguages, useMetadataMap, usePersonalDocCategories } from '@/hooks/use-metadata'
import classNames from '@/utils/classnames'
const map2Options = (map: { [key: string]: string }) => {
return Object.keys(map).map(key => ({ value: key, name: map[key] }))
@ -59,9 +58,9 @@ export const FieldInfo: FC<IFieldInfoProps> = ({
const readAlignTop = !showEdit && textNeedWrap
return (
<div className={cn(s.fieldInfo, editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
<div className={cn(s.label, editAlignTop && 'pt-1')}>{label}</div>
<div className={classNames(s.value, 'flex items-center gap-1')}>
<div className={cn('flex items-center gap-1 py-0.5 min-h-5 text-xs', editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
<div className={cn('w-[200px] text-text-tertiary font-medium overflow-hidden text-ellipsis whitespace-nowrap', editAlignTop && 'pt-1')}>{label}</div>
<div className="grow flex items-center gap-1 text-text-secondary">
{valueIcon}
{!showEdit
? displayedValue

13
web/app/components/datasets/documents/detail/metadata/style.module.css
View File

@ -53,18 +53,7 @@
.desc {
@apply text-gray-500 text-xs;
}
.fieldInfo {
/* height: 1.75rem; */
min-height: 1.75rem;
@apply flex flex-row items-center gap-4;
}
.fieldInfo > .label {
@apply w-2/5 max-w-[128px] text-gray-500 text-xs font-medium overflow-hidden text-ellipsis whitespace-nowrap;
}
.fieldInfo > .value {
overflow-wrap: anywhere;
@apply w-3/5 text-gray-700 font-normal text-xs;
}
.changeTip {
@apply text-[#D92D20] text-xs text-center;
}

2
web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
View File

@ -39,7 +39,7 @@ const ModelName: FC<ModelNameProps> = ({
return (
<div
className={`
flex items-center truncate text-[13px] font-medium text-gray-800
flex items-center truncate text-[13px] font-medium text-components-input-text-filled
${className}
`}
>

16
web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
View File

@ -13,6 +13,7 @@ import ModelIcon from '../model-icon'
import ModelName from '../model-name'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import Tooltip from '@/app/components/base/tooltip'
import classNames from '@/utils/classnames'
type ModelTriggerProps = {
open: boolean
@ -32,13 +33,13 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
return (
<div
className={`
group flex items-center px-2 h-8 rounded-lg bg-gray-100
${!readonly && 'hover:bg-gray-200 cursor-pointer'}
${className}
${open && '!bg-gray-200'}
${model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]'}
`}
className={classNames(
'group flex items-center px-2 h-8 rounded-lg bg-components-input-bg-normal',
!readonly && 'hover:bg-components-input-bg-hover cursor-pointer',
className,
open && '!bg-components-input-bg-hover',
model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]',
)}
>
<ModelIcon
className='shrink-0 mr-1.5'
@ -68,7 +69,6 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
}
</div>
)}
</div>
)
}

1
web/i18n/en-US/dataset-creation.ts
View File

@ -47,6 +47,7 @@ const translation = {
notionSyncTitle: 'Notion is not connected',
notionSyncTip: 'To sync with Notion, connection to Notion must be established first.',
connect: 'Go to connect',
cancel: 'Cancel',
button: 'Next',
emptyDatasetCreation: 'I want to create an empty Knowledge',
modal: {

1
web/i18n/zh-Hans/dataset-creation.ts
View File

@ -47,6 +47,7 @@ const translation = {
notionSyncTitle: 'Notion 未绑定',
notionSyncTip: '同步 Notion 内容前，须先绑定 Notion 空间',
connect: '去绑定',
cancel: '取消',
button: '下一步',
emptyDatasetCreation: '创建一个空知识库',
modal: {

1
web/i18n/zh-Hant/dataset-creation.ts
View File

@ -37,6 +37,7 @@ const translation = {
notionSyncTitle: 'Notion 未繫結',
notionSyncTip: '同步 Notion 內容前，須先繫結 Notion 空間',
connect: '去繫結',
cancel: '取消',
button: '下一步',
emptyDatasetCreation: '建立一個空知識庫',
modal: {

7
web/tailwind.config.js
View File

@ -1,6 +1,7 @@
/** @type {import('tailwindcss').Config} */
import tailwindThemeVarDefine from './themes/tailwind-theme-var-define'
module.exports = {
/** @type {import('tailwindcss').Config} */
const config = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
@ -115,3 +116,5 @@ module.exports = {
preflight: false,
},
}
export default config

5
web/themes/manual-dark.css
View File

@ -6,4 +6,7 @@ html[data-theme="dark"] {
--color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
--color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #1D1D20 0%, #222225 100%);
--color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
}
--color-dataset-option-card-blue-gradient: linear-gradient(180deg, #24252E 0%, #1E1E21 100%);
--color-dataset-option-card-purple-gradient: linear-gradient(180deg, #25242E 0%, #1E1E21 100%);
--color-dataset-option-card-orange-gradient: linear-gradient(180deg, #2B2322 0%, #1E1E21 100%);
}

5
web/themes/manual-light.css
View File

@ -6,4 +6,7 @@ html[data-theme="light"] {
--color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
--color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
--color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
}
--color-dataset-option-card-blue-gradient: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
--color-dataset-option-card-purple-gradient: linear-gradient(180deg, #F0EEFA 0%, #F9FAFB 100%);
--color-dataset-option-card-orange-gradient: linear-gradient(180deg, #F8F2EE 0%, #F9FAFB 100%);
}