feat: dark mode for knowledge (#15236)
Wu Tianwei
11 months ago
committed by
GitHub
parent
97eadb867c
commit
411e332f1b
@ -1,4 +0,0 @@
|
||||
.setting-icon {
|
||||
background: url(./assets/setting.svg) center center no-repeat;
|
||||
background-size: 14px 14px;
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
.arrow {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url(../assets/down-arrow.svg) center center no-repeat;
|
||||
background-size: 16px 16px;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.arrow-expand {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.preview-item {
|
||||
background-color: #eff4ff;
|
||||
border: 1px solid #D1E0FF;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
.search-icon {
|
||||
background: url(../assets/search.svg) center center;
|
||||
background-size: 14px 14px;
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
background: url(../assets/clear.svg) center center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
flex-basis: 200px;
|
||||
width: 0;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
.down-arrow {
|
||||
background: url(../assets/down-arrow.svg) center center no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.popup {
|
||||
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
||||
z-index: 10;
|
||||
}
|
||||
@ -1,54 +1,34 @@
|
||||
.filePreview {
|
||||
@apply flex flex-col border-l border-gray-200 shrink-0;
|
||||
width: 528px;
|
||||
background-color: #fcfcfd;
|
||||
}
|
||||
|
||||
.previewHeader {
|
||||
@apply border-b border-gray-200 shrink-0;
|
||||
margin: 42px 32px 0;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.previewHeader .title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #101828;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.previewHeader .fileName {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #1D2939;
|
||||
}
|
||||
|
||||
.previewHeader .filetype {
|
||||
color: #667085;
|
||||
}
|
||||
|
||||
.previewContent {
|
||||
@apply overflow-y-auto grow;
|
||||
padding: 20px 32px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #344054;
|
||||
}
|
||||
|
||||
.previewContent .loading {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
background: #f9fafb center no-repeat url(../assets/Loading.svg);
|
||||
background-size: contain;
|
||||
}
|
||||
.fileContent {
|
||||
white-space: pre-line;
|
||||
}
|
||||
@apply flex flex-col border-l border-components-panel-border shrink-0 bg-background-default-lighter;
|
||||
width: 528px;
|
||||
}
|
||||
|
||||
.previewHeader {
|
||||
@apply border-b border-divider-subtle shrink-0;
|
||||
margin: 42px 32px 0;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.previewHeader .title {
|
||||
@apply flex justify-between items-center text-text-primary;
|
||||
}
|
||||
|
||||
.previewHeader .fileName {
|
||||
@apply flex items-center text-text-tertiary;
|
||||
}
|
||||
|
||||
.previewContent {
|
||||
@apply overflow-y-auto grow text-text-secondary;
|
||||
padding: 20px 32px;
|
||||
}
|
||||
|
||||
.previewContent .loading {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
background: #f9fafb center no-repeat url(../assets/Loading.svg);
|
||||
background-size: contain;
|
||||
}
|
||||
.fileContent {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import cn from '@/utils/classnames'
|
||||
import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
|
||||
import Checkbox from '@/app/components/base/checkbox'
|
||||
|
||||
interface Props {
|
||||
payload: CrawlResultItemType
|
||||
isChecked: boolean
|
||||
isPreview: boolean
|
||||
onCheckChange: (checked: boolean) => void
|
||||
onPreview: () => void
|
||||
}
|
||||
|
||||
const CrawledResultItem: FC<Props> = ({
|
||||
isPreview,
|
||||
payload,
|
||||
isChecked,
|
||||
onCheckChange,
|
||||
onPreview,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleCheckChange = useCallback(() => {
|
||||
onCheckChange(!isChecked)
|
||||
}, [isChecked, onCheckChange])
|
||||
return (
|
||||
<div className={cn(isPreview ? 'border-[#D1E0FF] bg-primary-50 shadow-xs' : 'group hover:bg-gray-100', 'rounded-md px-2 py-[5px] cursor-pointer border border-transparent')}>
|
||||
<div className='flex items-center h-5'>
|
||||
<Checkbox className='group-hover:border-2 group-hover:border-primary-600 mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
|
||||
<div className='grow w-0 truncate text-sm font-medium text-gray-700' title={payload.title}>{payload.title}</div>
|
||||
<div onClick={onPreview} className='hidden group-hover:flex items-center h-6 px-2 text-xs rounded-md font-medium text-gray-500 uppercase hover:bg-gray-50'>{t('datasetCreation.stepOne.website.preview')}</div>
|
||||
</div>
|
||||
<div className='mt-0.5 truncate pl-6 leading-[18px] text-xs font-normal text-gray-500' title={payload.source_url}>{payload.source_url}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(CrawledResultItem)
|
||||
@ -1,87 +0,0 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import CheckboxWithLabel from './base/checkbox-with-label'
|
||||
import CrawledResultItem from './crawled-result-item'
|
||||
import cn from '@/utils/classnames'
|
||||
import type { CrawlResultItem } from '@/models/datasets'
|
||||
|
||||
const I18N_PREFIX = 'datasetCreation.stepOne.website'
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
list: CrawlResultItem[]
|
||||
checkedList: CrawlResultItem[]
|
||||
onSelectedChange: (selected: CrawlResultItem[]) => void
|
||||
onPreview: (payload: CrawlResultItem) => void
|
||||
usedTime: number
|
||||
}
|
||||
|
||||
const CrawledResult: FC<Props> = ({
|
||||
className = '',
|
||||
list,
|
||||
checkedList,
|
||||
onSelectedChange,
|
||||
onPreview,
|
||||
usedTime,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const isCheckAll = checkedList.length === list.length
|
||||
|
||||
const handleCheckedAll = useCallback(() => {
|
||||
if (!isCheckAll)
|
||||
onSelectedChange(list)
|
||||
|
||||
else
|
||||
onSelectedChange([])
|
||||
}, [isCheckAll, list, onSelectedChange])
|
||||
|
||||
const handleItemCheckChange = useCallback((item: CrawlResultItem) => {
|
||||
return (checked: boolean) => {
|
||||
if (checked)
|
||||
onSelectedChange([...checkedList, item])
|
||||
|
||||
else
|
||||
onSelectedChange(checkedList.filter(checkedItem => checkedItem.source_url !== item.source_url))
|
||||
}
|
||||
}, [checkedList, onSelectedChange])
|
||||
|
||||
const [previewIndex, setPreviewIndex] = React.useState<number>(-1)
|
||||
const handlePreview = useCallback((index: number) => {
|
||||
return () => {
|
||||
setPreviewIndex(index)
|
||||
onPreview(list[index])
|
||||
}
|
||||
}, [list, onPreview])
|
||||
|
||||
return (
|
||||
<div className={cn(className, 'border-t border-gray-200')}>
|
||||
<div className='flex items-center justify-between h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
|
||||
<CheckboxWithLabel
|
||||
isChecked={isCheckAll}
|
||||
onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
|
||||
labelClassName='!font-medium'
|
||||
/>
|
||||
<div>{t(`${I18N_PREFIX}.scrapTimeInfo`, {
|
||||
total: list.length,
|
||||
time: usedTime.toFixed(1),
|
||||
})}</div>
|
||||
</div>
|
||||
<div className='p-2'>
|
||||
{list.map((item, index) => (
|
||||
<CrawledResultItem
|
||||
key={item.source_url}
|
||||
isPreview={index === previewIndex}
|
||||
onPreview={handlePreview(index)}
|
||||
payload={item}
|
||||
isChecked={checkedList.some(checkedItem => checkedItem.source_url === item.source_url)}
|
||||
onCheckChange={handleItemCheckChange(item)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(CrawledResult)
|
||||
@ -1,37 +0,0 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import cn from '@/utils/classnames'
|
||||
import { RowStruct } from '@/app/components/base/icons/src/public/other'
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
crawledNum: number
|
||||
totalNum: number
|
||||
}
|
||||
|
||||
const Crawling: FC<Props> = ({
|
||||
className = '',
|
||||
crawledNum,
|
||||
totalNum,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className={cn(className, 'border-t border-gray-200')}>
|
||||
<div className='flex items-center h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
|
||||
{t('datasetCreation.stepOne.website.totalPageScraped')} {crawledNum}/{totalNum}
|
||||
</div>
|
||||
|
||||
<div className='p-2'>
|
||||
{['', '', '', ''].map((item, index) => (
|
||||
<div className='py-[5px]' key={index}>
|
||||
<RowStruct />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(Crawling)
|
||||
@ -1,24 +0,0 @@
|
||||
import type { CrawlResultItem } from '@/models/datasets'
|
||||
|
||||
const result: CrawlResultItem[] = [
|
||||
{
|
||||
title: 'Start the frontend Docker container separately',
|
||||
markdown: 'Markdown 1',
|
||||
description: 'Description 1',
|
||||
source_url: 'https://example.com/1',
|
||||
},
|
||||
{
|
||||
title: 'Advanced Tool Integration',
|
||||
markdown: 'Markdown 2',
|
||||
description: 'Description 2',
|
||||
source_url: 'https://example.com/2',
|
||||
},
|
||||
{
|
||||
title: 'Local Source Code Start | English | Dify',
|
||||
markdown: 'Markdown 3',
|
||||
description: 'Description 3',
|
||||
source_url: 'https://example.com/3',
|
||||
},
|
||||
]
|
||||
|
||||
export default result
|
||||
@ -1,63 +1,64 @@
|
||||
html[data-theme="light"] {
|
||||
--color-chatbot-bg: linear-gradient(180deg,
|
||||
rgba(249, 250, 251, 0.9) 0%,
|
||||
rgba(242, 244, 247, 0.9) 90.48%);
|
||||
--color-chat-bubble-bg: linear-gradient(180deg,
|
||||
#fff 0%,
|
||||
rgba(255, 255, 255, 0.6) 100%);
|
||||
--color-workflow-process-bg: linear-gradient(90deg,
|
||||
rgba(200, 206, 218, 0.2) 0%,
|
||||
rgba(200, 206, 218, 0.04) 100%);
|
||||
--color-dataset-chunk-process-success-bg: linear-gradient(92deg, rgba(23, 178, 106, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
|
||||
--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(90deg, #F2F4F7 0%, #F9FAFB 100%);
|
||||
--color-dataset-option-card-purple-gradient: linear-gradient(90deg, #F0EEFA 0%, #F9FAFB 100%);
|
||||
--color-dataset-option-card-orange-gradient: linear-gradient(90deg, #F8F2EE 0%, #F9FAFB 100%);
|
||||
--color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
|
||||
--mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg,
|
||||
rgba(200, 206, 218, 0.2) 0%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
--color-premium-yearly-tip-text-background: linear-gradient(91deg, #F79009 2.18%, #DC6803 108.79%);
|
||||
--color-premium-badge-background: linear-gradient(95deg, rgba(152, 162, 178, 0.90) 0%, rgba(103, 111, 131, 0.90) 105.58%);
|
||||
--color-premium-text-background: linear-gradient(92deg, rgba(252, 252, 253, 0.95) 0%, rgba(242, 244, 247, 0.95) 97.78%);
|
||||
--color-price-enterprise-background: linear-gradient(180deg, rgba(185, 211, 234, 0.00) 0%, rgba(180, 209, 234, 0.92) 100%);
|
||||
--color-grid-mask-background: linear-gradient(0deg, #FFF 0%, rgba(217, 217, 217, 0.10) 62.25%, rgba(217, 217, 217, 0.10) 100%);
|
||||
--color-chat-input-mask: linear-gradient(180deg,
|
||||
rgba(255, 255, 255, 0.01) 0%,
|
||||
#F2F4F7 100%);
|
||||
--color-workflow-run-failed-bg: linear-gradient(98deg,
|
||||
rgba(240, 68, 56, 0.10) 0%,
|
||||
rgba(255, 255, 255, 0) 26.01%);
|
||||
--color-workflow-batch-failed-bg: linear-gradient(92deg,
|
||||
rgba(240, 68, 56, 0.25) 0%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
--color-marketplace-divider-bg: linear-gradient(90deg,
|
||||
rgba(16, 24, 40, 0.08) 0%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
--color-marketplace-plugin-empty: linear-gradient(180deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
#fcfcfd 100%);
|
||||
--color-toast-success-bg: linear-gradient(92deg,
|
||||
rgba(23, 178, 106, 0.25) 0%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
--color-toast-warning-bg: linear-gradient(92deg,
|
||||
rgba(247, 144, 9, 0.25) 0%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
--color-toast-error-bg: linear-gradient(92deg,
|
||||
rgba(240, 68, 56, 0.25) 0%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
--color-toast-info-bg: linear-gradient(92deg,
|
||||
rgba(11, 165, 236, 0.25) 0%);
|
||||
--color-account-teams-bg: linear-gradient(271deg,
|
||||
rgba(249, 250, 251, 0.9) -0.1%,
|
||||
rgba(242, 244, 247, 0.9) 98.26%);
|
||||
--color-app-detail-bg: linear-gradient(169deg,
|
||||
#F2F4F7 1.18%,
|
||||
#F9FAFB 99.52%);
|
||||
--color-app-detail-overlay-bg: linear-gradient(270deg,
|
||||
rgba(0, 0, 0, 0.00) 0%,
|
||||
rgba(16, 24, 40, 0.01) 8%,
|
||||
rgba(16, 24, 40, 0.18) 100%);
|
||||
--color-chatbot-bg: linear-gradient(180deg,
|
||||
rgba(249, 250, 251, 0.9) 0%,
|
||||
rgba(242, 244, 247, 0.9) 90.48%);
|
||||
--color-chat-bubble-bg: linear-gradient(180deg,
|
||||
#fff 0%,
|
||||
rgba(255, 255, 255, 0.6) 100%);
|
||||
--color-workflow-process-bg: linear-gradient(90deg,
|
||||
rgba(200, 206, 218, 0.2) 0%,
|
||||
rgba(200, 206, 218, 0.04) 100%);
|
||||
--color-dataset-chunk-process-success-bg: linear-gradient(92deg, rgba(23, 178, 106, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
|
||||
--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(90deg, #F2F4F7 0%, #F9FAFB 100%);
|
||||
--color-dataset-option-card-purple-gradient: linear-gradient(90deg, #F0EEFA 0%, #F9FAFB 100%);
|
||||
--color-dataset-option-card-orange-gradient: linear-gradient(90deg, #F8F2EE 0%, #F9FAFB 100%);
|
||||
--color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
|
||||
--mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg,
|
||||
rgba(200, 206, 218, 0.2) 0%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
--color-premium-yearly-tip-text-background: linear-gradient(91deg, #F79009 2.18%, #DC6803 108.79%);
|
||||
--color-premium-badge-background: linear-gradient(95deg, rgba(152, 162, 178, 0.90) 0%, rgba(103, 111, 131, 0.90) 105.58%);
|
||||
--color-premium-text-background: linear-gradient(92deg, rgba(252, 252, 253, 0.95) 0%, rgba(242, 244, 247, 0.95) 97.78%);
|
||||
--color-price-enterprise-background: linear-gradient(180deg, rgba(185, 211, 234, 0.00) 0%, rgba(180, 209, 234, 0.92) 100%);
|
||||
--color-grid-mask-background: linear-gradient(0deg, #FFF 0%, rgba(217, 217, 217, 0.10) 62.25%, rgba(217, 217, 217, 0.10) 100%);
|
||||
--color-chat-input-mask: linear-gradient(180deg,
|
||||
rgba(255, 255, 255, 0.01) 0%,
|
||||
#F2F4F7 100%);
|
||||
--color-workflow-run-failed-bg: linear-gradient(98deg,
|
||||
rgba(240, 68, 56, 0.10) 0%,
|
||||
rgba(255, 255, 255, 0) 26.01%);
|
||||
--color-workflow-batch-failed-bg: linear-gradient(92deg,
|
||||
rgba(240, 68, 56, 0.25) 0%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
--color-marketplace-divider-bg: linear-gradient(90deg,
|
||||
rgba(16, 24, 40, 0.08) 0%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
--color-marketplace-plugin-empty: linear-gradient(180deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
#fcfcfd 100%);
|
||||
--color-toast-success-bg: linear-gradient(92deg,
|
||||
rgba(23, 178, 106, 0.25) 0%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
--color-toast-warning-bg: linear-gradient(92deg,
|
||||
rgba(247, 144, 9, 0.25) 0%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
--color-toast-error-bg: linear-gradient(92deg,
|
||||
rgba(240, 68, 56, 0.25) 0%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
--color-toast-info-bg: linear-gradient(92deg,
|
||||
rgba(11, 165, 236, 0.25) 0%);
|
||||
--color-account-teams-bg: linear-gradient(271deg,
|
||||
rgba(249, 250, 251, 0.9) -0.1%,
|
||||
rgba(242, 244, 247, 0.9) 98.26%);
|
||||
--color-app-detail-bg: linear-gradient(169deg,
|
||||
#F2F4F7 1.18%,
|
||||
#F9FAFB 99.52%);
|
||||
--color-app-detail-overlay-bg: linear-gradient(270deg,
|
||||
rgba(0, 0, 0, 0.00) 0%,
|
||||
rgba(16, 24, 40, 0.01) 8%,
|
||||
rgba(16, 24, 40, 0.18) 100%);
|
||||
--color-dataset-warning-message-bg: linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
|
||||
}
|
||||
Loading…
Reference in New Issue