Initial commit

web/app/components/datasets/documents/detail/completed/InfiniteVirtualList.tsx

@@ -0,0 +1,87 @@
+import React, { FC, CSSProperties } from "react";
+import { FixedSizeList as List } from "react-window";
+import InfiniteLoader from "react-window-infinite-loader";
+import type { SegmentDetailModel } from "@/models/datasets";
+import SegmentCard from "./SegmentCard";
+import s from "./style.module.css";
+
+type IInfiniteVirtualListProps = {
+  hasNextPage?: boolean; // Are there more items to load? (This information comes from the most recent API request.)
+  isNextPageLoading: boolean; // Are we currently loading a page of items? (This may be an in-flight flag in your Redux store for example.)
+  items: Array<SegmentDetailModel[]>; // Array of items loaded so far.
+  loadNextPage: () => Promise<any>; // Callback function responsible for loading the next page of items.
+  onClick: (detail: SegmentDetailModel) => void;
+  onChangeSwitch: (segId: string, enabled: boolean) => Promise<void>;
+};
+
+const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
+  hasNextPage,
+  isNextPageLoading,
+  items,
+  loadNextPage,
+  onClick: onClickCard,
+  onChangeSwitch,
+}) => {
+  // If there are more items to be loaded then add an extra row to hold a loading indicator.
+  const itemCount = hasNextPage ? items.length + 1 : items.length;
+
+  // Only load 1 page of items at a time.
+  // Pass an empty callback to InfiniteLoader in case it asks us to load more than once.
+  const loadMoreItems = isNextPageLoading ? () => { } : loadNextPage;
+
+  // Every row is loaded except for our loading indicator row.
+  const isItemLoaded = (index: number) => !hasNextPage || index < items.length;
+
+  // Render an item or a loading indicator.
+  const Item = ({ index, style }: { index: number; style: CSSProperties }) => {
+    let content;
+    if (!isItemLoaded(index)) {
+      content = (
+        <>
+          {[1, 2, 3].map((v) => (
+            <SegmentCard loading={true} detail={{ position: v } as any} />
+          ))}
+        </>
+      );
+    } else {
+      content = items[index].map((segItem) => (
+        <SegmentCard
+          key={segItem.id}
+          detail={segItem}
+          onClick={() => onClickCard(segItem)}
+          onChangeSwitch={onChangeSwitch}
+          loading={false}
+        />
+      ));
+    }
+
+    return (
+      <div style={style} className={s.cardWrapper}>
+        {content}
+      </div>
+    );
+  };
+
+  return (
+    <InfiniteLoader
+      itemCount={itemCount}
+      isItemLoaded={isItemLoaded}
+      loadMoreItems={loadMoreItems}
+    >
+      {({ onItemsRendered, ref }) => (
+        <List
+          ref={ref}
+          className="List"
+          height={800}
+          width={"100%"}
+          itemSize={200}
+          itemCount={itemCount}
+          onItemsRendered={onItemsRendered}
+        >
+          {Item}
+        </List>
+      )}
+    </InfiniteLoader>
+  );
+};
+export default InfiniteVirtualList;

web/app/components/datasets/documents/detail/completed/SegmentCard.tsx

@@ -0,0 +1,166 @@
+import type { FC } from "react";
+import React from "react";
+import cn from "classnames";
+import { ArrowUpRightIcon } from "@heroicons/react/24/outline";
+import Switch from "@/app/components/base/switch";
+import Divider from "@/app/components/base/divider";
+import Indicator from "@/app/components/header/indicator";
+import { formatNumber } from "@/utils/format";
+import type { SegmentDetailModel } from "@/models/datasets";
+import { StatusItem } from "../../list";
+import s from "./style.module.css";
+import { SegmentIndexTag } from "./index";
+import { DocumentTitle } from '../index'
+import { useTranslation } from "react-i18next";
+
+const ProgressBar: FC<{ percent: number; loading: boolean }> = ({ percent, loading }) => {
+  return (
+    <div className={s.progressWrapper}>
+      <div className={cn(s.progress, loading ? s.progressLoading : '')}>
+        <div
+          className={s.progressInner}
+          style={{ width: `${loading ? 0 : (percent * 100).toFixed(2)}%` }}
+        />
+      </div>
+      <div className={loading ? s.progressTextLoading : s.progressText}>{loading ? null : percent.toFixed(2)}</div>
+    </div>
+  )
+}
+
+export type UsageScene = 'doc' | 'hitTesting'
+
+type ISegmentCardProps = {
+  loading: boolean;
+  detail?: SegmentDetailModel & { document: { name: string } };
+  score?: number
+  onClick?: () => void;
+  onChangeSwitch?: (segId: string, enabled: boolean) => Promise<void>;
+  scene?: UsageScene
+  className?: string;
+};
+
+const SegmentCard: FC<ISegmentCardProps> = ({
+  detail = {},
+  score,
+  onClick,
+  onChangeSwitch,
+  loading = true,
+  scene = 'doc',
+  className = ''
+}) => {
+  const { t } = useTranslation()
+  const {
+    id,
+    position,
+    enabled,
+    content,
+    word_count,
+    hit_count,
+    index_node_hash,
+  } = detail as any;
+  const isDocScene = scene === 'doc'
+
+  return (
+    <div
+      className={cn(
+        s.segWrapper,
+        isDocScene && !enabled ? "bg-gray-25" : "",
+        "group",
+        !loading ? "pb-4" : "",
+        className,
+      )}
+      onClick={() => onClick?.()}
+    >
+      <div className={s.segTitleWrapper}>
+        {isDocScene ? <>
+          <SegmentIndexTag positionId={position} className={cn("w-fit group-hover:opacity-100", isDocScene && !enabled ? 'opacity-50' : '')} />
+          <div className={s.segStatusWrapper}>
+            {loading ? (
+              <Indicator
+                color="gray"
+                className="bg-gray-200 border-gray-300 shadow-none"
+              />
+            ) : (
+              <>
+                <StatusItem status={enabled ? "enabled" : "disabled"} reverse textCls="text-gray-500 text-xs" />
+                <div className="hidden group-hover:inline-flex items-center">
+                  <Divider type="vertical" className="!h-2" />
+                  <div
+                    onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
+                      e.stopPropagation()
+                    }
+                    className="inline-flex items-center"
+                  >
+                    <Switch
+                      size='md'
+                      defaultValue={enabled}
+                      onChange={async (val) => {
+                        await onChangeSwitch?.(id, val)
+                      }}
+                    />
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </> : <div className={s.hitTitleWrapper}>
+          <div className={cn(s.commonIcon, s.targetIcon, loading ? '!bg-gray-300' : '', '!w-3.5 !h-3.5')} />
+          <ProgressBar percent={score ?? 0} loading={loading} />
+        </div>}
+      </div>
+      {loading ? (
+        <div className={cn(s.cardLoadingWrapper, s.cardLoadingIcon)}>
+          <div className={cn(s.cardLoadingBg)} />
+        </div>
+      ) : (
+        isDocScene ? <>
+          <div
+            className={cn(
+              s.segContent,
+              enabled ? "" : "opacity-50",
+              "group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-b"
+            )}
+          >
+            {content}
+          </div>
+          <div className={cn('group-hover:flex', s.segData)}>
+            <div className="flex items-center mr-6">
+              <div className={cn(s.commonIcon, s.typeSquareIcon)}></div>
+              <div className={s.segDataText}>{formatNumber(word_count)}</div>
+            </div>
+            <div className="flex items-center mr-6">
+              <div className={cn(s.commonIcon, s.targetIcon)} />
+              <div className={s.segDataText}>{formatNumber(hit_count)}</div>
+            </div>
+            <div className="flex items-center">
+              <div className={cn(s.commonIcon, s.bezierCurveIcon)} />
+              <div className={s.segDataText}>{index_node_hash}</div>
+            </div>
+          </div>
+        </> : <>
+          <div className="h-[140px] overflow-hidden text-ellipsis text-sm font-normal text-gray-800">
+            {content}
+          </div>
+          <div className={cn("w-full bg-gray-50 group-hover:bg-white")}>
+            <Divider />
+            <div className="relative flex items-center w-full">
+              <DocumentTitle
+                name={detail?.document?.name || ''}
+                extension={(detail?.document?.name || '').split('.').pop() || 'txt'}
+                wrapperCls='w-full'
+                iconCls="!h-4 !w-4 !bg-contain"
+                textCls="text-xs text-gray-700 !font-normal overflow-hidden whitespace-nowrap text-ellipsis"
+              />
+              <div className={cn(s.chartLinkText, 'group-hover:inline-flex')}>
+                {t('datasetHitTesting.viewChart')}
+                <ArrowUpRightIcon className="w-3 h-3 ml-1 stroke-current stroke-2" />
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default SegmentCard;

web/app/components/datasets/documents/detail/completed/index.tsx

@@ -0,0 +1,206 @@
+'use client'
+import type { FC } from 'react'
+import React, { memo, useState, useEffect, useMemo } from 'react'
+import { HashtagIcon } from '@heroicons/react/24/solid'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { omitBy, isNil, debounce } from 'lodash-es'
+import { formatNumber } from '@/utils/format'
+import { StatusItem } from '../../list'
+import { DocumentContext } from '../index'
+import s from './style.module.css'
+import Modal from '@/app/components/base/modal'
+import Switch from '@/app/components/base/switch'
+import Divider from '@/app/components/base/divider'
+import Input from '@/app/components/base/input'
+import Loading from '@/app/components/base/loading'
+import { ToastContext } from '@/app/components/base/toast'
+import { SimpleSelect, Item } from '@/app/components/base/select'
+import { disableSegment, enableSegment, fetchSegments } from '@/service/datasets'
+import type { SegmentDetailModel, SegmentsResponse, SegmentsQuery } from '@/models/datasets'
+import { asyncRunSafe } from '@/utils'
+import type { CommonResponse } from '@/models/common'
+import InfiniteVirtualList from "./InfiniteVirtualList";
+import cn from 'classnames'
+
+export const SegmentIndexTag: FC<{ positionId: string | number; className?: string }> = ({ positionId, className }) => {
+  const localPositionId = useMemo(() => {
+    const positionIdStr = String(positionId)
+    if (positionIdStr.length >= 3)
+      return positionId
+    return positionIdStr.padStart(3, '0')
+  }, [positionId])
+  return (
+    <div className={`text-gray-500 border border-gray-200 box-border flex items-center rounded-md italic text-[11px] pl-1 pr-1.5 font-medium ${className ?? ''}`}>
+      <HashtagIcon className='w-3 h-3 text-gray-400 fill-current mr-1 stroke-current stroke-1' />
+      {localPositionId}
+    </div>
+  )
+}
+
+type ISegmentDetailProps = {
+  segInfo?: Partial<SegmentDetailModel> & { id: string }
+  onChangeSwitch?: (segId: string, enabled: boolean) => Promise<void>
+}
+/**
+ * Show all the contents of the segment
+ */
+export const SegmentDetail: FC<ISegmentDetailProps> = memo(({
+  segInfo,
+  onChangeSwitch }) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={'flex flex-col'}>
+      <SegmentIndexTag positionId={segInfo?.position || ''} className='w-fit mb-6' />
+      <div className={s.segModalContent}>{segInfo?.content}</div>
+      <div className={s.keywordTitle}>{t('datasetDocuments.segment.keywords')}</div>
+      <div className={s.keywordWrapper}>
+        {!segInfo?.keywords?.length
+          ? '-'
+          : segInfo?.keywords?.map((word: any) => {
+            return <div className={s.keyword}>{word}</div>
+          })}
+      </div>
+      <div className={cn(s.footer, s.numberInfo)}>
+        <div className='flex items-center'>
+          <div className={cn(s.commonIcon, s.typeSquareIcon)} /><span className='mr-8'>{formatNumber(segInfo?.word_count as any)} {t('datasetDocuments.segment.characters')}</span>
+          <div className={cn(s.commonIcon, s.targetIcon)} /><span className='mr-8'>{formatNumber(segInfo?.hit_count as any)} {t('datasetDocuments.segment.hitCount')}</span>
+          <div className={cn(s.commonIcon, s.bezierCurveIcon)} /><span className={s.hashText}>{t('datasetDocuments.segment.vectorHash')}{segInfo?.index_node_hash}</span>
+        </div>
+        <div className='flex items-center'>
+          <StatusItem status={segInfo?.enabled ? 'enabled' : 'disabled'} reverse textCls='text-gray-500 text-xs' />
+          <Divider type='vertical' className='!h-2' />
+          <Switch
+            size='md'
+            defaultValue={segInfo?.enabled}
+            onChange={async val => {
+              await onChangeSwitch?.(segInfo?.id || '', val)
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+})
+
+export const splitArray = (arr: any[], size = 3) => {
+  if (!arr || !arr.length)
+    return []
+  const result = []
+  for (let i = 0; i < arr.length; i += size)
+    result.push(arr.slice(i, i + size))
+  return result
+}
+
+type ICompletedProps = {
+  // data: Array<{}> // all/part segments
+}
+/**
+ * Embedding done, show list of all segments
+ * Support search and filter
+ */
+const Completed: FC<ICompletedProps> = () => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const { datasetId = '', documentId = '' } = useContext(DocumentContext)
+  // the current segment id and whether to show the modal
+  const [currSegment, setCurrSegment] = useState<{ segInfo?: SegmentDetailModel; showModal: boolean }>({ showModal: false })
+
+  const [searchValue, setSearchValue] = useState() // the search value
+  const [selectedStatus, setSelectedStatus] = useState<boolean | 'all'>('all') // the selected status, enabled/disabled/undefined
+
+  const [lastSegmentsRes, setLastSegmentsRes] = useState<SegmentsResponse | undefined>(undefined)
+  const [allSegments, setAllSegments] = useState<Array<SegmentDetailModel[]>>([]) // all segments data
+  const [loading, setLoading] = useState(false)
+  const [total, setTotal] = useState<number | undefined>()
+
+  useEffect(() => {
+    if (lastSegmentsRes !== undefined) {
+      getSegments(false)
+    }
+  }, [selectedStatus, searchValue])
+
+  const onChangeStatus = ({ value }: Item) => {
+    setSelectedStatus(value === 'all' ? 'all' : !!value)
+  }
+
+  const getSegments = async (needLastId?: boolean) => {
+    const finalLastId = lastSegmentsRes?.data?.[lastSegmentsRes.data.length - 1]?.id || '';
+    setLoading(true)
+    const [e, res] = await asyncRunSafe<SegmentsResponse>(fetchSegments({
+      datasetId,
+      documentId,
+      params: omitBy({
+        last_id: !needLastId ? undefined : finalLastId,
+        limit: 9,
+        keyword: searchValue,
+        enabled: selectedStatus === 'all' ? 'all' : !!selectedStatus,
+      }, isNil) as SegmentsQuery
+    }) as Promise<SegmentsResponse>)
+    if (!e) {
+      setAllSegments([...(!needLastId ? [] : allSegments), ...splitArray(res.data || [])])
+      setLastSegmentsRes(res)
+      if (!lastSegmentsRes) { setTotal(res?.total || 0) }
+    }
+    setLoading(false)
+  }
+
+  const onClickCard = (detail: SegmentDetailModel) => {
+    setCurrSegment({ segInfo: detail, showModal: true })
+  }
+
+  const onCloseModal = () => {
+    setCurrSegment({ ...currSegment, showModal: false })
+  }
+
+  const onChangeSwitch = async (segId: string, enabled: boolean) => {
+    const opApi = enabled ? enableSegment : disableSegment
+    const [e] = await asyncRunSafe<CommonResponse>(opApi({ datasetId, segmentId: segId }) as Promise<CommonResponse>)
+    if (!e) {
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      for (const item of allSegments) {
+        for (const seg of item) {
+          if (seg.id === segId) {
+            seg.enabled = enabled
+          }
+        }
+      }
+      setAllSegments([...allSegments])
+    } else {
+      notify({ type: 'error', message: t('common.actionMsg.modificationFailed') })
+    }
+  }
+
+  return (
+    <>
+      <div className={s.docSearchWrapper}>
+        <div className={s.totalText}>{total ? formatNumber(total) : '--'} {t('datasetDocuments.segment.paragraphs')}</div>
+        <SimpleSelect
+          onSelect={onChangeStatus}
+          items={[
+            { value: 'all', name: t('datasetDocuments.list.index.all') },
+            { value: 0, name: t('datasetDocuments.list.status.disabled') },
+            { value: 1, name: t('datasetDocuments.list.status.enabled') },
+          ]}
+          defaultValue={'all'}
+          className={s.select}
+          wrapperClassName='h-fit w-[120px] mr-2' />
+        <Input showPrefix wrapperClassName='!w-52' className='!h-8' onChange={debounce(setSearchValue, 500)} />
+      </div>
+      <InfiniteVirtualList
+        hasNextPage={lastSegmentsRes?.has_more ?? true}
+        isNextPageLoading={loading}
+        items={allSegments}
+        loadNextPage={getSegments}
+        onChangeSwitch={onChangeSwitch}
+        onClick={onClickCard}
+      />
+      <Modal isShow={currSegment.showModal} onClose={onCloseModal} className='!max-w-[640px]' closable>
+        <SegmentDetail segInfo={currSegment.segInfo ?? { id: '' }} onChangeSwitch={onChangeSwitch} />
+      </Modal>
+    </>
+  )
+}
+
+export default Completed

web/app/components/datasets/documents/detail/completed/style.module.css

@@ -0,0 +1,130 @@
+/* .cardWrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(290px, auto));
+  grid-gap: 16px;
+  grid-auto-rows: 180px;
+} */
+.totalText {
+  @apply text-gray-900 font-medium text-base flex-1;
+}
+.docSearchWrapper {
+  @apply sticky w-full h-10 -top-3 bg-white flex items-center mb-3 justify-between z-10;
+}
+.listContainer {
+  height: calc(100% - 3.25rem);
+  @apply box-border pb-[30px];
+}
+.cardWrapper {
+  @apply grid gap-4 grid-cols-3 min-w-[902px] last:mb-[30px];
+}
+.segWrapper {
+  @apply box-border h-[180px] min-w-[290px] bg-gray-50 px-4 pt-4 flex flex-col text-opacity-50 rounded-xl border border-transparent hover:border-gray-200 hover:shadow-lg hover:cursor-pointer hover:bg-white;
+}
+.segTitleWrapper {
+  @apply flex items-center justify-between;
+}
+.segStatusWrapper {
+  @apply flex items-center box-border;
+}
+.segContent {
+  white-space: wrap;
+  @apply flex-1 h-0 min-h-0 mt-2 text-sm text-gray-800 overflow-ellipsis overflow-hidden from-gray-800 to-white;
+}
+.segData {
+  @apply hidden text-gray-500 text-xs pt-2;
+}
+.segDataText {
+  @apply max-w-[80px] truncate;
+}
+.chartLinkText {
+  background: linear-gradient(to left, white, 90%, transparent);
+  @apply text-primary-600 font-semibold text-xs absolute right-0 hidden h-12 pl-12 items-center;
+}
+.select {
+  @apply h-8 py-0 bg-gray-50 hover:bg-gray-100 rounded-lg shadow-none !important;
+}
+.segModalContent {
+  @apply h-96 text-gray-800 text-base overflow-y-scroll;
+}
+.footer {
+  @apply flex items-center justify-between box-border border-t-gray-200 border-t-[0.5px] pt-3 mt-4;
+}
+.numberInfo {
+  @apply text-gray-500 text-xs font-medium;
+}
+.keywordTitle {
+  @apply text-gray-500 mb-2 mt-1 text-xs uppercase;
+}
+.keywordWrapper {
+  @apply text-gray-700 w-full max-h-[200px] overflow-auto flex flex-wrap;
+}
+.keyword {
+  @apply text-sm border border-gray-200 max-w-[200px] max-h-[100px] whitespace-pre-line overflow-y-auto mr-1 mb-2 last:mr-0 px-2 py-1 rounded-lg;
+}
+.hashText {
+  @apply w-48 inline-block truncate;
+}
+.commonIcon {
+  @apply w-3 h-3 inline-block align-middle mr-1 bg-gray-500;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  mask-position: center center;
+}
+.targetIcon {
+  mask-image: url(../../assets/target.svg);
+}
+.typeSquareIcon {
+  mask-image: url(../../assets/typeSquare.svg);
+}
+.bezierCurveIcon {
+  mask-image: url(../../assets/bezierCurve.svg);
+}
+.cardLoadingWrapper {
+  @apply relative w-full h-full inline-block rounded-b-xl;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-origin: content-box;
+}
+.cardLoadingIcon {
+  background-image: url(../../assets/cardLoading.svg);
+}
+/* .hitLoadingIcon {
+  background-image: url(../../assets/hitLoading.svg);
+} */
+.cardLoadingBg {
+  @apply h-full relative rounded-b-xl mt-4;
+  left: calc(-1rem - 1px);
+  width: calc(100% + 2rem + 2px);
+  height: calc(100% - 1rem + 1px);
+  background: linear-gradient(
+    180deg,
+    rgba(252, 252, 253, 0) 0%,
+    #fcfcfd 74.15%
+  );
+}
+
+.hitTitleWrapper {
+  @apply w-full flex items-center justify-between mb-2;
+}
+.progressWrapper {
+  @apply flex items-center justify-between w-full;
+}
+.progress {
+  border-radius: 3px;
+  @apply relative h-1.5 box-border border border-gray-300 flex-1 mr-2;
+}
+.progressLoading {
+  @apply border-[#EAECF0] bg-[#EAECF0];
+}
+.progressInner {
+  @apply absolute top-0 h-full bg-gray-300;
+}
+.progressText {
+  font-size: 13px;
+  @apply text-gray-700 font-bold;
+}
+.progressTextLoading {
+  border-radius: 5px;
+  @apply h-3.5 w-3.5 bg-[#EAECF0];
+}