diff --git a/web/src/components/document-preview/document-header.tsx b/web/src/components/document-preview/document-header.tsx index f6656da86d..d5d47d72b1 100644 --- a/web/src/components/document-preview/document-header.tsx +++ b/web/src/components/document-preview/document-header.tsx @@ -1,21 +1,35 @@ import { formatDate } from '@/utils/date'; import { formatBytes } from '@/utils/file-util'; +import { useTranslation } from 'react-i18next'; type Props = { size: number; name: string; create_date: string; + className?: string; }; -export default ({ size, name, create_date }: Props) => { +export default ({ size, name, create_date, className }: Props) => { const sizeName = formatBytes(size); const dateStr = formatDate(create_date); + + const { t } = useTranslation(); + return ( -
-

{name}

-
- Size：{sizeName} Uploaded Time：{dateStr} -
-
+
+

{name}

+
+
{t('chunk.size')}
+
{sizeName}
+ +
{t('chunk.uploadedTime')}
+
{dateStr}
+
+
); }; diff --git a/web/src/components/document-preview/index.tsx b/web/src/components/document-preview/index.tsx index 62a9078c43..9e31111d30 100644 --- a/web/src/components/document-preview/index.tsx +++ b/web/src/components/document-preview/index.tsx @@ -25,7 +25,7 @@ const Preview = ({ return ( <> {fileType === 'pdf' && highlights && setWidthAndHeight && ( -
+
& { httpHeaders?: Record; }; @@ -69,7 +69,11 @@ const PdfPreview = ({ return (
void; @@ -59,28 +56,35 @@ const EditTag = React.forwardRef( const forMap = (tag: string) => { return ( - - {tag} - -
+ + {tag} + +
{tag}
{!disabled && ( - { e.preventDefault(); handleClose(tag); }} - /> + > + + )}
- - + + ); }; @@ -107,10 +111,11 @@ const EditTag = React.forwardRef( )}
{Array.isArray(tagChild) && tagChild.length > 0 && <>{tagChild}} + {!inputVisible && !disabled && ( + ); + })} + +
handleOnChange(actualValue)} - > - {isObject ? option.label : option} - - ); - })} -
- ); - }, + style={{ + positionAnchor: `--${anchorNamePrefix}-${String(selectedValue).replace('/', '')}`, + width: 'anchor-size(width)', + height: 'anchor-size(height)', + top: 'anchor(top)', + left: 'anchor(left)', + }} + /> +
+ ); + } + : ( + { + options, + value, + onChange, + className, + activeClassName, + itemClassName, + rounded = 'default', + sizeType = 'default', + buttonSize = 'default', + }, + ref, + ) => { + const [selectedValue, setSelectedValue] = React.useState< + SegmentedValue | undefined + >(value); + React.useEffect(() => { + setSelectedValue(value); + }, [value]); + const handleOnChange = (e: SegmentedValue) => { + if (onChange) { + onChange(e); + } + setSelectedValue(e); + }; + return ( +
+ {options.map((option) => { + const isObject = typeof option === 'object'; + const actualValue = isObject ? option.value : option; + + return ( + + ); + })} +
+ ); + }, ); -Segmented.displayName = 'Segmented'; +export { Segmented }; diff --git a/web/src/components/ui/tooltip.tsx b/web/src/components/ui/tooltip.tsx index 8f68720989..7042d11cf1 100644 --- a/web/src/components/ui/tooltip.tsx +++ b/web/src/components/ui/tooltip.tsx @@ -16,15 +16,17 @@ const TooltipContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( - + + + )); TooltipContent.displayName = TooltipPrimitive.Content.displayName; @@ -35,11 +37,12 @@ export const FormTooltip = ({ tooltip }: { tooltip: React.ReactNode }) => { { e.preventDefault(); // Prevent clicking the tooltip from triggering form save }} > - + {tooltip} diff --git a/web/src/less/mixins.less b/web/src/less/mixins.less index e6c99f601a..c77eac838c 100644 --- a/web/src/less/mixins.less +++ b/web/src/less/mixins.less @@ -17,8 +17,8 @@ caption { color: @blurBackground; font-size: 14px; - height: 20px; - line-height: 20px; + // height: 20px; + line-height: 1.25; font-weight: 600; margin-bottom: 6px; } diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index debbcf593c..99c7955a91 100644 --- a/web/src/locales/en.ts +++ b/web/src/locales/en.ts @@ -584,8 +584,9 @@ Example: A 1 KB message with 1024-dim embedding uses ~9 KB. The 5 MB default lim naive: `

Supported file formats are MD, MDX, DOCX, XLSX, XLS (Excel 97-2003), PPTX, PDF, TXT, JPEG, JPG, PNG, TIF, GIF, CSV, JSON, EML, HTML.

This method chunks files using a 'naive' method:

+

  • Use vision detection model to split the texts into smaller segments.
    • -
  • Then, combine adjacent segments until the token count exceeds the threshold specified by 'Chunk token number for text', at which point a chunk is created.

    • `, +
  • Then, combine adjacent segments until the token count exceeds the threshold specified by 'Chunk token number for text', at which point a chunk is created.

`, paper: `

Only PDF file is supported.

Papers will be split by section, such as abstract, 1.1, 1.2.

This approach enables the LLM to summarize the paper more effectively and to provide more comprehensive, understandable responses. @@ -597,6 +598,7 @@ Example: A 1 KB message with 1024-dim embedding uses ~9 KB. The 5 MB default lim

This chunking method supports XLSX and CSV/TXT file formats.

+
  • If a file is in XLSX or XLS (Excel 97-2003) format, it should contain two columns without headers: one for questions and the other for answers, with the question column preceding the answer column. Multiple sheets are acceptable, provided the columns are properly structured. @@ -604,6 +606,7 @@ Example: A 1 KB message with 1024-dim embedding uses ~9 KB. The 5 MB default lim
  • If a file is in CSV/TXT format, it must be UTF-8 encoded with TAB as the delimiter to separate questions and answers.
    • +

Lines of texts that fail to follow the above rules will be ignored, and @@ -726,6 +729,8 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s table: 'Table', text: 'Text', }, + size: 'Size', + uploadedTime: 'Uploaded time', chunk: 'Chunk', bulk: 'Bulk', selectAll: 'Select all', diff --git a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx index 32f7dd2ed1..4372c42154 100644 --- a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx +++ b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx @@ -73,10 +73,11 @@ const ChunkCard = ({ return ( - +

+ {/* Using instead of to avoid flickering when hovering over the image */} {item.image_id && ( @@ -98,41 +103,44 @@ const ChunkCard = ({ + )}
+ className={classNames( + // Keep whitespaces? + 'text-wrap break-words whitespace-pre', + textMode === ChunkTextMode.Ellipse && 'line-clamp-3', + )} + />
-
+
void; removeChunk: (e?: any) => void; switchChunk: (available: number) => void; @@ -13,6 +20,7 @@ type ICheckboxSetProps = { }; export default (props: ICheckboxSetProps) => { const { + className, selectAllChunk, removeChunk, switchChunk, @@ -45,39 +53,28 @@ export default (props: ICheckboxSetProps) => { }, [selectedChunkIds]); return ( -
-
- - -
+
+ + {isSelected && ( <> -
- - {t('chunk.enable')} -
-
- + + +
-
- - {t('chunk.delete')} -
+ + + )}
diff --git a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/index.tsx b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/index.tsx index e5221a15c9..e05c4c121a 100644 --- a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/index.tsx +++ b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/index.tsx @@ -8,7 +8,8 @@ import { import { Radio } from '@/components/ui/radio'; import { Segmented } from '@/components/ui/segmented'; import { useTranslate } from '@/hooks/common-hooks'; -import { ListFilter, Plus } from 'lucide-react'; +import { cn } from '@/lib/utils'; +import { LucideFilter, Plus } from 'lucide-react'; import { useState } from 'react'; import { ChunkTextMode } from '../../constant'; interface ChunkResultBarProps { @@ -21,6 +22,7 @@ interface ChunkResultBarProps { searchString: string; } export default function ChunkResultBar({ + className, changeChunkTextMode, available, selectAllChunk, @@ -59,42 +61,46 @@ export default function ChunkResultBar({ changeChunkTextMode(value); }; return ( -
+
-
-
- } - onChange={handleInputChange} - value={searchString} - /> - - - - - - {filterContent} - - - -
+ + + + + + + {filterContent} + + + + + + {/*
*/}
diff --git a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx index 5c3a840404..3e53d6171e 100644 --- a/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx +++ b/web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx @@ -24,6 +24,7 @@ import DocumentHeader from '@/components/document-preview/document-header'; import { useGetDocumentUrl } from '@/components/document-preview/hooks'; import { PageHeader } from '@/components/page-header'; import { Button } from '@/components/ui/button'; +import { Card, CardContent } from '@/components/ui/card'; import message from '@/components/ui/message'; import { RAGFlowPagination, @@ -174,7 +175,7 @@ const Chunk = () => { }, [documentInfo]); return ( - <> +
-
-
-
-
- -
-
+ + + +
+ + +
-
-
-
+
+ + +
- -
-
-

{t('chunk.chunkResult')}

-
- {t('chunk.chunkResultTip')} -
-
+
+

{t('chunk.chunkResult')}

+
+ {t('chunk.chunkResultTip')}
-
- -
+
+ + +
+
+ + { selectedChunkIds={selectedChunkIds} />
-
-
- {chunkList.map((item) => ( - x === item.chunk_id, - )} - handleCheckboxClick={handleSingleCheckboxClick} - switchChunk={handleSwitchChunk} - clickChunkCard={handleChunkCardClick} - selected={item.chunk_id === selectedChunkId} - textMode={textMode} - t={dataUpdatedAt} - > - ))} -
+ +
+ {chunkList.map((item) => ( + x === item.chunk_id, + )} + handleCheckboxClick={handleSingleCheckboxClick} + switchChunk={handleSwitchChunk} + clickChunkCard={handleChunkCardClick} + selected={item.chunk_id === selectedChunkId} + textMode={textMode} + t={dataUpdatedAt} + /> + ))}
-
+ +
{ onChange={(page, pageSize) => { onPaginationChange(page, pageSize); }} - > -
+ /> +
-
-
-
+ + + + {chunkUpdatingVisible && ( { parserId={documentInfo.parser_id} /> )} - +
); }; diff --git a/web/src/pages/dataflow-result/components/time-line/index.tsx b/web/src/pages/dataflow-result/components/time-line/index.tsx index 92a1d236d1..e153d92502 100644 --- a/web/src/pages/dataflow-result/components/time-line/index.tsx +++ b/web/src/pages/dataflow-result/components/time-line/index.tsx @@ -1,11 +1,11 @@ import { CustomTimeline, TimelineNode } from '@/components/originui/timeline'; import { - Blocks, - File, - FilePlay, - FileStack, - Heading, - ListPlus, + LucideBlocks, + LucideFile, + LucideFilePlay, + LucideFileStack, + LucideHeading, + LucideListPlus, } from 'lucide-react'; import { useMemo } from 'react'; import { TimelineNodeType } from '../../constant'; @@ -21,28 +21,28 @@ export type ITimelineNodeObj = { export const TimelineNodeObj = { [TimelineNodeType.begin]: { title: 'File', - icon: , + icon: , clickable: false, }, [TimelineNodeType.parser]: { title: 'Parser', - icon: , + icon: , }, [TimelineNodeType.contextGenerator]: { title: 'Context Generator', - icon: , + icon: , }, [TimelineNodeType.titleSplitter]: { title: 'Title Splitter', - icon: , + icon: , }, [TimelineNodeType.characterSplitter]: { title: 'Character Splitter', - icon: , + icon: , }, [TimelineNodeType.tokenizer]: { title: 'Tokenizer', - icon: , + icon: , clickable: false, }, }; @@ -80,6 +80,7 @@ const TimelineDataFlow = ({ onStepChange={handleStepChange} orientation="horizontal" lineStyle="solid" + lineColor="rgb(var(--))" nodeSize={24} activeStyle={{ nodeSize: 30, diff --git a/web/src/pages/dataflow-result/index.tsx b/web/src/pages/dataflow-result/index.tsx index 5b7819d475..ada172a17a 100644 --- a/web/src/pages/dataflow-result/index.tsx +++ b/web/src/pages/dataflow-result/index.tsx @@ -19,27 +19,21 @@ import { useGetDocumentUrl } from '@/components/document-preview/hooks'; import { TimelineNode } from '@/components/originui/timeline'; import { PageHeader } from '@/components/page-header'; import Spotlight from '@/components/spotlight'; -import { - Breadcrumb, - BreadcrumbItem, - BreadcrumbLink, - BreadcrumbList, - BreadcrumbPage, - BreadcrumbSeparator, -} from '@/components/ui/breadcrumb'; import { Button } from '@/components/ui/button'; import { Modal } from '@/components/ui/modal/modal'; -import { AgentCategory } from '@/constants/agent'; +import { AgentCategory, AgentQuery } from '@/constants/agent'; import { Images } from '@/constants/common'; import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks'; import { useGetKnowledgeSearchParams } from '@/hooks/route-hook'; +import { Routes } from '@/routes'; +import { LucideArrowBigLeft } from 'lucide-react'; import TimelineDataFlow from './components/time-line'; import { TimelineNodeType } from './constant'; import styles from './index.module.less'; import { IDslComponent, IPipelineFileLogDetail } from './interface'; import ParserContainer from './parser'; -const Chunk = () => { +const DataflowResult = () => { const { isReadOnly, knowledgeId, agentId, agentTitle, documentExtension } = useGetPipelineResultSearchParams(); @@ -158,46 +152,22 @@ const Chunk = () => { return ( <> - - - - { - if (knowledgeId) { - navigateToDatasetList(); - } - if (agentId) { - navigateToAgents(); - } - }} - > - {knowledgeId ? t('knowledgeDetails.dataset') : t('header.flow')} - - - - - { - if (knowledgeId) { - navigateToDatasetOverview(knowledgeId)(); - } - if (isAgent) { - navigateToAgent(agentId, AgentCategory.DataflowCanvas)(); - } - }} - > - {knowledgeId ? t('knowledgeDetails.overview') : agentTitle} - - - - - - {knowledgeId ? documentInfo?.name : t('flow.viewResult')} - - - - + + {type === 'dataflow' && (
{ ); }; -export default Chunk; +export default DataflowResult; diff --git a/web/src/pages/dataset/components/metedata/manage-modal-column.tsx b/web/src/pages/dataset/components/metedata/manage-modal-column.tsx index 266fba9775..bae956c3a1 100644 --- a/web/src/pages/dataset/components/metedata/manage-modal-column.tsx +++ b/web/src/pages/dataset/components/metedata/manage-modal-column.tsx @@ -4,7 +4,7 @@ import { DatePicker } from '@/components/ui/date-picker'; import { Input } from '@/components/ui/input'; import { formatDate } from '@/utils/date'; import { ColumnDef, Row, Table } from '@tanstack/react-table'; -import { ListChevronsDownUp, Settings, Trash2 } from 'lucide-react'; +import { ListChevronsDownUp, LucidePencil, Trash2 } from 'lucide-react'; import { useCallback, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { @@ -147,7 +147,7 @@ export const useMetadataColumns = ({ header: () => {t('knowledgeDetails.metadata.description')}, cell: ({ row }) => (
- {row.getValue('description')} + {row.getValue('description') || '-'}
), }, @@ -347,17 +347,17 @@ export const useMetadataColumns = ({ cell: ({ row }) => (
- )} */} - {isCanAdd && activeTab !== 'built-in' && ( - - )} -
+
+ {secondTitle || t('knowledgeDetails.metadata.metadata')}
{rowSelectionIsEmpty || ( @@ -366,14 +338,43 @@ export const ManageMetadataModal = (props: IManageModalProps) => { value={activeTab} onValueChange={(v) => setActiveTab(v as MetadataSettingsTab)} > - - - {t('knowledgeDetails.metadata.generation')} - - - {t('knowledgeDetails.metadata.builtIn')} - - +
+ + + {t('knowledgeDetails.metadata.generation')} + + + {t('knowledgeDetails.metadata.builtIn')} + + + +
+ {/* {metadataType === MetadataType.Manage && ( + + )} */} + {isCanAdd && activeTab !== 'built-in' && ( + + )} +
+
+ diff --git a/web/src/pages/dataset/components/metedata/manage-values-modal.tsx b/web/src/pages/dataset/components/metedata/manage-values-modal.tsx index f2a74a1c9e..e54453aa70 100644 --- a/web/src/pages/dataset/components/metedata/manage-values-modal.tsx +++ b/web/src/pages/dataset/components/metedata/manage-values-modal.tsx @@ -283,8 +283,8 @@ export const ManageValuesModal = (props: IManageValuesProps) => { metaData.valueType === metadataValueTypeEnum['list'] && (
); }; diff --git a/web/src/pages/dataset/dataset-setting/chunk-method-learn-more.tsx b/web/src/pages/dataset/dataset-setting/chunk-method-learn-more.tsx index 22a013c699..abc3a47cd1 100644 --- a/web/src/pages/dataset/dataset-setting/chunk-method-learn-more.tsx +++ b/web/src/pages/dataset/dataset-setting/chunk-method-learn-more.tsx @@ -1,7 +1,8 @@ import { Button } from '@/components/ui/button'; +import { Card, CardContent } from '@/components/ui/card'; import { cn } from '@/lib/utils'; import { t } from 'i18next'; -import { X } from 'lucide-react'; +import { LucideX } from 'lucide-react'; import { useState } from 'react'; import CategoryPanel from './category-panel'; @@ -20,20 +21,25 @@ const ChunkMethodLearnMore = ({ parserId }: { parserId: string }) => { {t('knowledgeDetails.learnMore')} -
- -
{ - setVisible(false); - }} +
-
+ + + + + + + ); }; diff --git a/web/src/pages/dataset/dataset-setting/configuration/common-item.tsx b/web/src/pages/dataset/dataset-setting/configuration/common-item.tsx index fca3070e0c..0ce24fc29c 100644 --- a/web/src/pages/dataset/dataset-setting/configuration/common-item.tsx +++ b/web/src/pages/dataset/dataset-setting/configuration/common-item.tsx @@ -415,8 +415,8 @@ export function AutoMetadata({ avatar={knowledgeBase.avatar} name={knowledgeBase.name} className="size-8" - > -
+ /> +
{knowledgeBase.name}
diff --git a/web/src/pages/dataset/dataset/use-dataset-table-columns.tsx b/web/src/pages/dataset/dataset/use-dataset-table-columns.tsx index b59dcda09d..f053fb6672 100644 --- a/web/src/pages/dataset/dataset/use-dataset-table-columns.tsx +++ b/web/src/pages/dataset/dataset/use-dataset-table-columns.tsx @@ -46,7 +46,6 @@ export function useDatasetTableColumns({ id: 'select', header: ({ table }) => ( ( row.toggleSelected(!!value)} aria-label="Select row" diff --git a/web/src/pages/dataset/knowledge-graph/force-graph.tsx b/web/src/pages/dataset/knowledge-graph/force-graph.tsx index d4776b22e4..2062f6bb4b 100644 --- a/web/src/pages/dataset/knowledge-graph/force-graph.tsx +++ b/web/src/pages/dataset/knowledge-graph/force-graph.tsx @@ -1,15 +1,16 @@ import { ElementDatum, Graph, IElementEvent } from '@antv/g6'; import isEmpty from 'lodash/isEmpty'; -import { useCallback, useEffect, useMemo, useRef } from 'react'; +import { useCallback, useEffect, useId, useMemo, useRef } from 'react'; import { buildNodesAndCombos, defaultComboLabel } from './util'; import { useIsDarkTheme } from '@/components/theme-provider'; +import { cn } from '@/lib/utils'; import styles from './index.module.less'; const TooltipColorMap = { - combo: 'red', - node: 'black', - edge: 'blue', + combo: 'text-red-600', + node: 'text-black', + edge: 'text-blue-600', }; interface IProps { @@ -18,6 +19,7 @@ interface IProps { } const ForceGraph = ({ data, show }: IProps) => { + const tooltipId = useId(); const containerRef = useRef(null); const graphRef = useRef(null); const isDark = useIsDarkTheme(); @@ -52,23 +54,46 @@ const ForceGraph = ({ data, show }: IProps) => { getContent: (e: IElementEvent, items: ElementDatum) => { if (Array.isArray(items)) { if (items.some((x) => x?.isCombo)) { - return `

${items?.[0]?.data?.label}

`; + return `

${items?.[0]?.data?.label}

`; } - let result = ``; - items.forEach((item) => { - result += `

${item?.id}

`; - if (item?.entity_type) { - result += `
Entity type: ${item?.entity_type}
`; - } - if (item?.weight) { - result += `
Weight: ${item?.weight}
`; - } - if (item?.description) { - result += `

${item?.description}

`; - } - }); - return result + '
'; + + return items + .flatMap((item) => { + return [ + '
', + `

${item?.id}

`, + '
', + ...(item?.entity_type + ? [ + '
', + '
Entity type:
', + `
${item.entity_type}
`, + '
', + ] + : []), + ...(item?.weight + ? [ + '
', + '
Weight:
', + `
${item.weight}
`, + '
', + ] + : []), + '
', + item.description + ? `

${item.description}

` + : '', + '
', + ]; + }) + .join(''); } + return undefined; }, }, @@ -82,34 +107,32 @@ const ForceGraph = ({ data, show }: IProps) => { node: { style: { size: (d) => { - let size = 100 + ((d.rank as number) || 0) * 5; - size = size > 300 ? 300 : size; - return size; + const size = 100 + ((d.rank as number) || 0) * 5; + return Math.min(size, 300); }, + labelText: (d) => d.id, labelFill: isDark ? 'rgba(255,255,255,1)' : 'rgba(0,0,0,1)', // labelPadding: 30, labelFontSize: 40, - // labelOffsetX: 20, + // labelOffsetX: 20, labelOffsetY: 20, labelPlacement: 'center', labelWordWrap: true, }, palette: { type: 'group', - field: (d) => { - return d?.entity_type as string; - }, + field: (d) => d?.entity_type as string, }, }, edge: { style: (model) => { const weight: number = Number(model?.weight) || 2; - const lineWeight = weight * 4; + return { stroke: isDark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)', lineDash: [10, 10], - lineWidth: lineWeight > 8 ? 8 : lineWeight, + lineWidth: Math.min(weight * 4, 8), }; }, }, @@ -149,12 +172,9 @@ const ForceGraph = ({ data, show }: IProps) => { return (
); }; diff --git a/web/src/pages/dataset/knowledge-graph/index.module.less b/web/src/pages/dataset/knowledge-graph/index.module.less index 7c5d1f5a86..6af1b11c9a 100644 --- a/web/src/pages/dataset/knowledge-graph/index.module.less +++ b/web/src/pages/dataset/knowledge-graph/index.module.less @@ -1,5 +1,7 @@ .forceContainer { :global(.tooltip) { - border-radius: 10px !important; + padding: 0.5rem 0.75rem !important; + border-radius: 0.5rem !important; + font-family: var(--font-sans) !important; } } diff --git a/web/src/pages/dataset/knowledge-graph/index.tsx b/web/src/pages/dataset/knowledge-graph/index.tsx index 539b752d2c..6b31f1fc4d 100644 --- a/web/src/pages/dataset/knowledge-graph/index.tsx +++ b/web/src/pages/dataset/knowledge-graph/index.tsx @@ -1,7 +1,8 @@ import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog'; import { Button } from '@/components/ui/button'; +import { Card } from '@/components/ui/card'; import { useFetchKnowledgeGraph } from '@/hooks/use-knowledge-request'; -import { Trash2 } from 'lucide-react'; +import { LucideTrash2 } from 'lucide-react'; import React from 'react'; import { useTranslation } from 'react-i18next'; import ForceGraph from './force-graph'; @@ -13,18 +14,23 @@ const KnowledgeGraph: React.FC = () => { const { handleDeleteKnowledgeGraph } = useDeleteKnowledgeGraph(); return ( -
+ - -
+ + + ); }; diff --git a/web/src/pages/datasets/index.tsx b/web/src/pages/datasets/index.tsx index 04f177aca0..9f32c7d847 100644 --- a/web/src/pages/datasets/index.tsx +++ b/web/src/pages/datasets/index.tsx @@ -91,7 +91,7 @@ export default function Datasets() { value={filterValue} filters={owners} onChange={handleFilterSubmit} - className="px-8" + className="px-8 mb-4" icon={'datasets'} >