mirror of
http://112.124.100.131/huang.ze/ebiz-dify-ai.git
synced 2025-12-10 19:36:53 +08:00
Feat: Q&A format segmentation support (#668)
Co-authored-by: jyong <718720800@qq.com> Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
This commit is contained in:
@@ -1,11 +1,12 @@
|
||||
import React, { FC } from "react";
|
||||
import cn from "classnames";
|
||||
import { SegmentDetailModel } from "@/models/datasets";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Divider from "@/app/components/base/divider";
|
||||
import { SegmentIndexTag } from "../documents/detail/completed";
|
||||
import s from "../documents/detail/completed/style.module.css";
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import cn from 'classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import ReactECharts from 'echarts-for-react'
|
||||
import { SegmentIndexTag } from '../documents/detail/completed'
|
||||
import s from '../documents/detail/completed/style.module.css'
|
||||
import type { SegmentDetailModel } from '@/models/datasets'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
|
||||
type IScatterChartProps = {
|
||||
data: Array<number[]>
|
||||
@@ -19,8 +20,8 @@ const ScatterChart: FC<IScatterChartProps> = ({ data, curr }) => {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
type: 'cross',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@@ -32,49 +33,64 @@ const ScatterChart: FC<IScatterChartProps> = ({ data, curr }) => {
|
||||
type: 'scatter',
|
||||
symbolSize: 5,
|
||||
data,
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
],
|
||||
}
|
||||
return (
|
||||
<ReactECharts option={option} style={{ height: 380, width: 430 }} />
|
||||
)
|
||||
}
|
||||
|
||||
type IHitDetailProps = {
|
||||
segInfo?: Partial<SegmentDetailModel> & { id: string };
|
||||
vectorInfo?: { curr: Array<number[]>; points: Array<number[]> };
|
||||
};
|
||||
segInfo?: Partial<SegmentDetailModel> & { id: string }
|
||||
vectorInfo?: { curr: Array<number[]>; points: Array<number[]> }
|
||||
}
|
||||
|
||||
const HitDetail: FC<IHitDetailProps> = ({ segInfo, vectorInfo }) => {
|
||||
const { t } = useTranslation();
|
||||
const { t } = useTranslation()
|
||||
|
||||
const renderContent = () => {
|
||||
if (segInfo?.answer) {
|
||||
return (
|
||||
<>
|
||||
<div className='mt-2 mb-1 text-xs font-medium text-gray-500'>QUESTION</div>
|
||||
<div className='mb-4 text-md text-gray-800'>{segInfo.content}</div>
|
||||
<div className='mb-1 text-xs font-medium text-gray-500'>ANSWER</div>
|
||||
<div className='text-md text-gray-800'>{segInfo.answer}</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return segInfo?.content
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={"flex flex-row"}>
|
||||
<div className={'flex flex-row'}>
|
||||
<div className="flex-1 bg-gray-25 p-6">
|
||||
<div className="flex items-center">
|
||||
<SegmentIndexTag
|
||||
positionId={segInfo?.position || ""}
|
||||
positionId={segInfo?.position || ''}
|
||||
className="w-fit mr-6"
|
||||
/>
|
||||
<div className={cn(s.commonIcon, s.typeSquareIcon)} />
|
||||
<span className={cn("mr-6", s.numberInfo)}>
|
||||
{segInfo?.word_count} {t("datasetDocuments.segment.characters")}
|
||||
<span className={cn('mr-6', s.numberInfo)}>
|
||||
{segInfo?.word_count} {t('datasetDocuments.segment.characters')}
|
||||
</span>
|
||||
<div className={cn(s.commonIcon, s.targetIcon)} />
|
||||
<span className={s.numberInfo}>
|
||||
{segInfo?.hit_count} {t("datasetDocuments.segment.hitCount")}
|
||||
{segInfo?.hit_count} {t('datasetDocuments.segment.hitCount')}
|
||||
</span>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className={s.segModalContent}>{segInfo?.content}</div>
|
||||
<div className={s.segModalContent}>{renderContent()}</div>
|
||||
<div className={s.keywordTitle}>
|
||||
{t("datasetDocuments.segment.keywords")}
|
||||
{t('datasetDocuments.segment.keywords')}
|
||||
</div>
|
||||
<div className={s.keywordWrapper}>
|
||||
{!segInfo?.keywords?.length
|
||||
? "-"
|
||||
? '-'
|
||||
: segInfo?.keywords?.map((word: any) => {
|
||||
return <div className={s.keyword}>{word}</div>;
|
||||
return <div className={s.keyword}>{word}</div>
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,18 +98,18 @@ const HitDetail: FC<IHitDetailProps> = ({ segInfo, vectorInfo }) => {
|
||||
<div className="flex items-center">
|
||||
<div className={cn(s.commonIcon, s.bezierCurveIcon)} />
|
||||
<span className={s.numberInfo}>
|
||||
{t("datasetDocuments.segment.vectorHash")}
|
||||
{t('datasetDocuments.segment.vectorHash')}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={cn(s.numberInfo, "w-[400px] truncate text-gray-700 mt-1")}
|
||||
className={cn(s.numberInfo, 'w-[400px] truncate text-gray-700 mt-1')}
|
||||
>
|
||||
{segInfo?.index_node_hash}
|
||||
</div>
|
||||
<ScatterChart data={vectorInfo?.points || []} curr={vectorInfo?.curr || []} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default HitDetail;
|
||||
export default HitDetail
|
||||
|
||||
Reference in New Issue
Block a user