Fix: Optimize code and fix ts type errors #9869 (#10666)

### What problem does this PR solve? Fix: Optimize code and fix ts type errors #9869 ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
2025-12-25 16:26:51 +08:00 · 2025-10-20 15:59:56 +08:00
parent cc703da747
commit de46b0d46e
18 changed files with 377 additions and 267 deletions
--- a/web/src/pages/dataflow-result/components/chunk-result-bar/index.tsx
+++ b/web/src/pages/dataflow-result/components/chunk-result-bar/index.tsx
@ -5,7 +5,7 @@ import { Plus } from 'lucide-react';
 import { useState } from 'react';
 import { ChunkTextMode } from '../../constant';
 interface ChunkResultBarProps {
-  changeChunkTextMode: React.Dispatch<React.SetStateAction<string | number>>;
+  changeChunkTextMode: (mode: ChunkTextMode) => void;
  createChunk: (text: string) => void;
  isReadonly: boolean;
 }
@ -15,7 +15,7 @@ export default ({
  isReadonly,
 }: ChunkResultBarProps) => {
  const { t } = useTranslate('chunk');
-  const [textSelectValue, setTextSelectValue] = useState<string | number>(
+  const [textSelectValue, setTextSelectValue] = useState<ChunkTextMode>(
    ChunkTextMode.Full,
  );
  const textSelectOptions = [
@ -23,7 +23,7 @@ export default ({
    { label: t(ChunkTextMode.Ellipse), value: ChunkTextMode.Ellipse },
  ];

-  const changeTextSelectValue = (value: string | number) => {
+  const changeTextSelectValue = (value: ChunkTextMode) => {
    setTextSelectValue(value);
    changeChunkTextMode(value);
  };
--- a/web/src/pages/dataflow-result/components/parse-editer/interface.ts
+++ b/web/src/pages/dataflow-result/components/parse-editer/interface.ts
@ -8,6 +8,7 @@ export interface FormatPreserveEditorProps {
    key: keyof typeof parserKeyMap | 'text' | 'html';
    type: string;
    value: Array<{ [key: string]: string }>;
+    params: ComponentParams;
  };
  onSave: (value: any) => void;
  className?: string;
--- a/web/src/pages/dataflow-result/components/parse-editer/json-parser.tsx
+++ b/web/src/pages/dataflow-result/components/parse-editer/json-parser.tsx
@ -4,6 +4,7 @@ import { isArray } from 'lodash';
 import { useCallback, useEffect, useMemo } from 'react';
 import { ChunkTextMode } from '../../constant';
 import styles from '../../index.less';
+import { IChunk } from '../../interface';
 import { useParserInit } from './hook';
 import { IJsonContainerProps } from './interface';
 export const parserKeyMap = {
@ -17,8 +18,6 @@ export const ArrayContainer = (props: IJsonContainerProps) => {
    isChunck,
    handleCheck,
    selectedChunkIds,
-    unescapeNewlines,
-    escapeNewlines,
    onSave,
    className,
    textMode,
@ -26,13 +25,8 @@ export const ArrayContainer = (props: IJsonContainerProps) => {
    isReadonly,
  } = props;

-  const {
-    content,
-    setContent,
-    activeEditIndex,
-    setActiveEditIndex,
-    editDivRef,
-  } = useParserInit({ initialValue });
+  const { content, activeEditIndex, setActiveEditIndex, editDivRef } =
+    useParserInit({ initialValue });

  const parserKey = useMemo(() => {
    const key =
@ -46,35 +40,39 @@ export const ArrayContainer = (props: IJsonContainerProps) => {
    (e?: any, index?: number) => {
      setActiveEditIndex(index);
    },
-    [setContent, setActiveEditIndex],
+    [setActiveEditIndex],
  );

  const handleSave = useCallback(
    (e: any) => {
-      const saveData = {
-        ...content,
-        value: content.value?.map((item, index) => {
-          if (index === activeEditIndex) {
-            return {
-              ...item,
-              [parserKey]: e.target.textContent || '',
-            };
-          } else {
-            return item;
-          }
-        }),
-      };
-      onSave(saveData);
+      if (Array.isArray(content.value)) {
+        const saveData = {
+          ...content,
+          value: content.value?.map((item, index) => {
+            if (index === activeEditIndex) {
+              return {
+                ...item,
+                [parserKey]: e.target.textContent || '',
+              };
+            } else {
+              return item;
+            }
+          }),
+        };
+        onSave(saveData as any);
+      }
      setActiveEditIndex(undefined);
    },
-    [content, onSave],
+    [content, onSave, activeEditIndex, parserKey, setActiveEditIndex],
  );

  useEffect(() => {
    if (activeEditIndex !== undefined && editDivRef.current) {
      editDivRef.current.focus();
-      editDivRef.current.textContent =
-        content.value[activeEditIndex][parserKey];
+      if (typeof content.value !== 'string') {
+        editDivRef.current.textContent =
+          content.value[activeEditIndex][parserKey];
+      }
    }
  }, [editDivRef, activeEditIndex, content, parserKey]);

@ -122,7 +120,7 @@ export const ArrayContainer = (props: IJsonContainerProps) => {
              {activeEditIndex !== index && (
                <div
                  className={cn(
-                    'text-text-secondary overflow-auto scrollbar-auto w-full',
+                    'text-text-secondary overflow-auto scrollbar-auto w-full min-h-3',
                    {
                      [styles.contentEllipsis]:
                        textMode === ChunkTextMode.Ellipse,
@ -130,7 +128,8 @@ export const ArrayContainer = (props: IJsonContainerProps) => {
                  )}
                  key={index}
                  onClick={(e) => {
-                    clickChunk(item);
+                    clickChunk(item as unknown as IChunk);
+                    console.log('clickChunk', item, index);
                    if (!isReadonly) {
                      handleEdit(e, index);
                    }
--- a/web/src/pages/dataflow-result/components/parse-editer/object-parser.tsx
+++ b/web/src/pages/dataflow-result/components/parse-editer/object-parser.tsx
@ -2,14 +2,13 @@ import { cn } from '@/lib/utils';
 import { useCallback, useEffect } from 'react';
 import { ChunkTextMode } from '../../constant';
 import styles from '../../index.less';
+import { IChunk } from '../../interface';
 import { useParserInit } from './hook';
 import { IObjContainerProps } from './interface';
 export const ObjectContainer = (props: IObjContainerProps) => {
  const {
    initialValue,
    isChunck,
-    unescapeNewlines,
-    escapeNewlines,
    onSave,
    className,
    textMode,
@ -19,7 +18,7 @@ export const ObjectContainer = (props: IObjContainerProps) => {

  const {
    content,
-    setContent,
+    // setContent,
    activeEditIndex,
    setActiveEditIndex,
    editDivRef,
@ -31,7 +30,7 @@ export const ObjectContainer = (props: IObjContainerProps) => {
    //   value: escapeNewlines(e.target.innerText),
    // }));
    setActiveEditIndex(1);
-  }, [setContent, setActiveEditIndex]);
+  }, [setActiveEditIndex]);

  const handleSave = useCallback(
    (e: any) => {
@ -42,7 +41,7 @@ export const ObjectContainer = (props: IObjContainerProps) => {
      onSave(saveData);
      setActiveEditIndex(undefined);
    },
-    [content, onSave],
+    [content, onSave, setActiveEditIndex],
  );

  useEffect(() => {
@ -81,14 +80,14 @@ export const ObjectContainer = (props: IObjContainerProps) => {
                [styles.contentEllipsis]: textMode === ChunkTextMode.Ellipse,
              },
            )}
-            onClick={(e) => {
-              clickChunk(content);
+            onClick={() => {
+              clickChunk(content as unknown as IChunk);
              if (!isReadonly) {
-                handleEdit(e);
+                handleEdit();
              }
            }}
          >
-            {content.value}
+            {content.value as string}
          </div>
        )}
      </section>
--- a/web/src/pages/dataflow-result/hooks.ts
+++ b/web/src/pages/dataflow-result/hooks.ts
@ -4,7 +4,6 @@ import { useCreateChunk, useDeleteChunk } from '@/hooks/chunk-hooks';
 import { useSetModalState, useShowDeleteConfirm } from '@/hooks/common-hooks';
 import { useGetKnowledgeSearchParams } from '@/hooks/route-hook';
 import { useFetchMessageTrace } from '@/hooks/use-agent-request';
-import { IChunk } from '@/interfaces/database/knowledge';
 import kbService from '@/services/knowledge-service';
 import { formatSecondsToHumanReadable } from '@/utils/date';
 import { buildChunkHighlights } from '@/utils/document-util';
@ -20,7 +19,7 @@ import {
  PipelineResultSearchParams,
  TimelineNodeType,
 } from './constant';
-import { IDslComponent, IPipelineFileLogDetail } from './interface';
+import { IChunk, IDslComponent, IPipelineFileLogDetail } from './interface';

 export const useFetchPipelineFileLogDetail = ({
  isAgent = false,
@ -64,7 +63,6 @@ export const useHandleChunkCardClick = () => {
  const [selectedChunk, setSelectedChunk] = useState<IChunk>();

  const handleChunkCardClick = useCallback((chunk: IChunk) => {
-    console.log('click-chunk-->', chunk);
    setSelectedChunk(chunk);
  }, []);

@ -75,7 +73,9 @@ export const useGetChunkHighlights = (selectedChunk?: IChunk) => {
  const [size, setSize] = useState({ width: 849, height: 1200 });

  const highlights: IHighlight[] = useMemo(() => {
-    return selectedChunk ? buildChunkHighlights(selectedChunk, size) : [];
+    return selectedChunk
+      ? buildChunkHighlights(selectedChunk as any, size)
+      : [];
  }, [selectedChunk, size]);

  const setWidthAndHeight = useCallback((width: number, height: number) => {
--- a/web/src/pages/dataflow-result/interface.ts
+++ b/web/src/pages/dataflow-result/interface.ts
@ -126,8 +126,17 @@ export interface IPipelineFileLogDetail {
 }

 export interface IChunk {
+  available_int?: number; // Whether to enable, 0: not enabled, 1: enabled
+  chunk_id?: string;
+  content_with_weight?: string;
+  doc_id?: string;
+  doc_name?: string;
+  image_id?: string;
+  important_kwd?: string[];
+  question_kwd?: string[]; // keywords
+  tag_kwd?: string[];
  positions: number[][];
-  image_id: string;
+  tag_feas?: Record<string, number>;
  text: string;
 }

--- a/web/src/pages/dataflow-result/parser.tsx
+++ b/web/src/pages/dataflow-result/parser.tsx
@ -40,12 +40,17 @@ const ParserContainer = (props: IProps) => {
  const initialValue = useMemo(() => {
    const outputs = data?.value?.obj?.params?.outputs;
    const key = outputs?.output_format?.value;
-    if (!outputs || !key) return { key: '', type: '', value: [] };
-    const value = outputs[key]?.value;
-    const type = outputs[key]?.type;
+    if (!outputs || !key)
+      return {
+        key: '' as 'text' | 'html' | 'json' | 'chunks',
+        type: '',
+        value: [],
+      };
+    const value = outputs[key as keyof typeof outputs]?.value;
+    const type = outputs[key as keyof typeof outputs]?.type;
    console.log('outputs-->', outputs, data, key, value);
    return {
-      key,
+      key: key as 'text' | 'html' | 'json' | 'chunks',
      type,
      value,
      params: data?.value?.obj?.params,
@ -95,7 +100,7 @@ const ParserContainer = (props: IProps) => {
  const handleRemoveChunk = useCallback(async () => {
    if (selectedChunkIds.length > 0) {
      initialText.value = initialText.value.filter(
-        (item: any, index: number) => !selectedChunkIds.includes(index + ''),
+        (_item: any, index: number) => !selectedChunkIds.includes(index + ''),
      );
      setIsChange(true);
      setSelectedChunkIds([]);
@ -118,7 +123,7 @@ const ParserContainer = (props: IProps) => {
  const selectAllChunk = useCallback(
    (checked: boolean) => {
      setSelectedChunkIds(
-        checked ? initialText.value.map((x, index: number) => index) : [],
+        checked ? initialText.value.map((_x: any, index: number) => index) : [],
      );
    },
    [initialText.value],