feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/data/knowledge/knowledge-modal-base/src/table-segment-modal/hooks.tsx

@@ -0,0 +1,301 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/* eslint-disable @coze-arch/max-line-per-function */
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { useRequest } from 'ahooks';
+import { DataNamespace, dataReporter } from '@coze-data/reporter';
+import { REPORT_EVENTS } from '@coze-arch/report-events';
+import { I18n } from '@coze-arch/i18n';
+import { CustomError } from '@coze-arch/bot-error';
+import { type DocTableColumn, ColumnType } from '@coze-arch/bot-api/memory';
+import { KnowledgeApi } from '@coze-arch/bot-api';
+
+import { transSliceContentOutput } from '../utils';
+import { TableSegmentModal } from './modal';
+
+export enum ModalActionType {
+  Create,
+  Edit,
+}
+
+export interface DocTableColumnExt extends DocTableColumn {
+  error: string;
+  value: string;
+  column_id: string;
+}
+
+export interface UseTableSegmentModalParams {
+  title: string | JSX.Element;
+  meta: DocTableColumn[];
+  disabled?: boolean;
+  canEdit?: boolean;
+  loading?: boolean;
+  onSubmit?: (actionType: ModalActionType, data: TableDataItem[]) => void;
+  onFinish: (actionType: ModalActionType, data: TableDataItem[]) => void;
+}
+
+interface UseTableSegmentModalReturnValue {
+  node: JSX.Element | null;
+  create: () => void;
+  edit: (data: TableDataItem[] | string) => void;
+  close: () => void;
+  fetchCreateTableSegment: (
+    docId: string,
+    createContent: TableDataItem[],
+  ) => void;
+  fetchUpdateTableSegment: (
+    sliceId: string,
+    updateContent: TableDataItem[],
+  ) => void;
+}
+
+export interface TableDataItem {
+  column_id: string;
+  column_name?: string;
+  column_type?: ColumnType;
+  is_semantic?: boolean;
+  value: string;
+  error?: string;
+}
+
+const CONTENT_MAX_LENGTH = 2000;
+
+const getFormData = (data: TableDataItem[]) => {
+  const formData: Record<string, string> = {};
+  data.map(item => {
+    formData[item.column_id] = item.value || '';
+  });
+  return JSON.stringify(formData);
+};
+
+const updateWithSliceList = (
+  meta: DocTableColumn[],
+  slices: TableDataItem[],
+) => {
+  const extendedTableMeta: DocTableColumnExt[] = meta.map(column => ({
+    ...column,
+    error: '',
+    value: '',
+    column_id: column.id || '',
+    column_name: column.column_name || '',
+    is_semantic: Boolean(column.is_semantic),
+  }));
+
+  if (slices.length === 0) {
+    return extendedTableMeta;
+  }
+
+  slices.forEach(slice => {
+    const column = extendedTableMeta.find(col => col.id === slice.column_id);
+    if (column) {
+      column.value = slice.value || '';
+    }
+  });
+
+  return extendedTableMeta;
+};
+export const useTableSegmentModal = ({
+  title,
+  meta = [],
+  canEdit,
+  disabled,
+  onSubmit,
+  onFinish,
+  loading,
+}: UseTableSegmentModalParams): UseTableSegmentModalReturnValue => {
+  const [visible, setVisible] = useState(false);
+  const [tableData, setTableData] = useState<TableDataItem[]>([]);
+  const tableMeta = useRef<DocTableColumn[]>(meta);
+  const actionTypeRef = useRef<ModalActionType>(ModalActionType.Create);
+
+  const getFormVerification = () => {
+    let isValid = true;
+    const newTextAreas = tableData.map(textArea => {
+      const newTextArea = { ...textArea };
+
+      if (newTextArea?.is_semantic) {
+        if (newTextArea.value.length === 0) {
+          newTextArea.error = I18n.t('knowledge_table_content_empty');
+          isValid = false;
+        } else if (newTextArea.value.length > CONTENT_MAX_LENGTH) {
+          newTextArea.error = I18n.t('knowledge_table_content_limt', {
+            number: CONTENT_MAX_LENGTH,
+          });
+          isValid = false;
+        }
+      }
+
+      return newTextArea;
+    });
+
+    if (!isValid) {
+      setTableData(newTextAreas);
+    }
+
+    return isValid;
+  };
+
+  const { run: fetchCreateTableSegment, loading: createLoading } = useRequest(
+    async (docId: string, createContent: TableDataItem[]) => {
+      if (!docId) {
+        throw new CustomError('normal_error', 'missing doc_id');
+      }
+      await KnowledgeApi.CreateSlice({
+        document_id: docId,
+        raw_text: getFormData(createContent),
+      });
+      return createContent;
+    },
+    {
+      manual: true,
+      onSuccess: data => {
+        onFinish(actionTypeRef.current, data);
+        onCancel();
+      },
+      onError: error => {
+        dataReporter.errorEvent(DataNamespace.KNOWLEDGE, {
+          eventName: REPORT_EVENTS.KnowledgeCreateSlice,
+          error,
+        });
+      },
+    },
+  );
+
+  const { run: fetchUpdateTableSegment, loading: uploadLoading } = useRequest(
+    async (sliceId: string, updateContent: TableDataItem[]) => {
+      if (!sliceId) {
+        throw new CustomError('normal_error', 'missing slice_id');
+      }
+      const formatRecord = updateContent.map(colData => {
+        if (colData.column_type === ColumnType.Image) {
+          return {
+            ...colData,
+            value: transSliceContentOutput(colData.value),
+          };
+        }
+        return colData;
+      });
+      await KnowledgeApi.UpdateSlice({
+        slice_id: sliceId,
+        raw_text: getFormData(formatRecord),
+      });
+      return updateContent;
+    },
+    {
+      manual: true,
+      onSuccess: data => {
+        onFinish(actionTypeRef.current, data);
+        onCancel();
+      },
+      onError: error => {
+        dataReporter.errorEvent(DataNamespace.KNOWLEDGE, {
+          eventName: REPORT_EVENTS.KnowledgeUpdateSlice,
+          error,
+        });
+      },
+    },
+  );
+
+  const modalLoading = useMemo(
+    () => createLoading || uploadLoading || loading,
+    [createLoading, uploadLoading, loading],
+  );
+
+  useEffect(() => {
+    tableMeta.current = meta;
+  }, [meta]);
+
+  const handleSubmit = () => {
+    const isValid = getFormVerification();
+    if (isValid) {
+      if (typeof onSubmit === 'function') {
+        onSubmit(actionTypeRef.current, tableData);
+      } else {
+        setVisible(false);
+        onFinish(actionTypeRef.current, tableData);
+      }
+    }
+  };
+
+  const onCancel = () => {
+    setVisible(false);
+  };
+
+  const onOpen = (newTableData?: TableDataItem[]) => {
+    if (newTableData && newTableData.length) {
+      setTableData(updateWithSliceList(tableMeta.current, newTableData));
+      setVisible(true);
+    } else {
+      setTableData(updateWithSliceList(tableMeta.current, []));
+      setVisible(true);
+    }
+  };
+
+  const handleTextAreaChange = (index: number, newValue: string) => {
+    const newData = [...tableData];
+    newData[index].value = newValue;
+
+    // 针对语义匹配行进行检验
+    if (newData[index]?.is_semantic) {
+      if (newValue.length === 0) {
+        newData[index].error = I18n.t('knowledge_table_content_empty');
+      } else if (newValue.length > CONTENT_MAX_LENGTH) {
+        newData[index].error = I18n.t('knowledge_table_content_limt', {
+          number: CONTENT_MAX_LENGTH,
+        });
+      } else {
+        newData[index].error = '';
+      }
+    }
+
+    setTableData(newData);
+  };
+
+  return {
+    fetchCreateTableSegment,
+    fetchUpdateTableSegment,
+    edit: originTableData => {
+      let newTableData = originTableData;
+      if (typeof originTableData === 'string') {
+        newTableData = JSON.parse(originTableData) as TableDataItem[];
+      }
+
+      actionTypeRef.current = ModalActionType.Edit;
+      if (Array.isArray(newTableData)) {
+        onOpen(newTableData);
+      }
+    },
+    create: () => {
+      actionTypeRef.current = ModalActionType.Create;
+      onOpen();
+    },
+    close: onCancel,
+    node: visible ? (
+      <TableSegmentModal
+        title={title}
+        visible={visible}
+        onSubmit={handleSubmit}
+        onCancel={onCancel}
+        canEdit={canEdit ?? true}
+        tableData={tableData}
+        loading={modalLoading}
+        handleTextAreaChange={handleTextAreaChange}
+      />
+    ) : null,
+  };
+};

frontend/packages/data/knowledge/knowledge-modal-base/src/table-segment-modal/index.module.less

@@ -0,0 +1,95 @@
+.table-content-modal {
+  &.has-preview-modal {
+    padding-bottom: 40px;
+  }
+
+  .table-row {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  .table-column {
+    display: -webkit-box;
+    flex-shrink: 0;
+
+    min-width: 88px;
+    padding-right: 8px;
+    padding-left: 8px;
+
+    -webkit-box-orient: vertical;
+  }
+
+  .column_name {
+    .table-column();
+
+    flex-shrink: 0;
+    width: 240px;
+    min-width: 88px;
+  }
+
+  .is_semantic {
+    .table-column();
+
+    width: 120px;
+  }
+
+  .value {
+    .table-column();
+
+    flex: 1 0 0;
+
+    :global {
+      .modal-image-render {
+        height: 34px;
+      }
+
+      .modal-empty-image-render {
+        cursor: pointer;
+        height: 34px;
+      }
+    }
+  }
+
+  .table-header {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--coz-fg-secondary);
+  }
+
+  .header-row {
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--coz-stroke-primary)
+  }
+
+  .table-body {
+    color: var(--coz-fg-secondary);
+  }
+
+
+  .tbody-row {
+    padding: 10px 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .error-tips {
+    margin-top: 4px;
+    font-size: 12px;
+    line-height: 16px;
+    color: #F93920;
+  }
+}
+
+.image-render-wrapper {
+  &:hover {
+    :global {
+      .modal-empty-image-render {
+        background-color: transparent;
+      }
+    }
+  }
+}

frontend/packages/data/knowledge/knowledge-modal-base/src/table-segment-modal/index.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export {
+  useTableSegmentModal,
+  type UseTableSegmentModalParams,
+  type TableDataItem,
+  ModalActionType,
+} from './hooks';
+export { getSrcFromImg } from './modal';

frontend/packages/data/knowledge/knowledge-modal-base/src/table-segment-modal/modal.tsx

@@ -0,0 +1,254 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import React, { useState, type ComponentProps } from 'react';
+
+import { ImageRender } from '@coze-common/table-view';
+import { I18n } from '@coze-arch/i18n';
+import { ColumnType } from '@coze-arch/bot-api/memory';
+import { IconCozImage } from '@coze-arch/coze-design/icons';
+import { TextArea, Button, Modal } from '@coze-arch/coze-design';
+
+import { type TableDataItem } from './hooks';
+
+import styles from './index.module.less';
+
+export interface TableSegmentModalProps extends ComponentProps<typeof Modal> {
+  tableData: TableDataItem[];
+  canEdit: boolean;
+  handleTextAreaChange: (index: number, value: string) => void;
+  onCancel: (e: React.MouseEvent<Element, MouseEvent>) => void;
+  onSubmit: () => void;
+  loading?: boolean;
+}
+
+interface RenderFooterProps {
+  loading?: boolean;
+  onCancel: (e: React.MouseEvent<Element, MouseEvent>) => void;
+  onSubmit: (e: React.MouseEvent<Element, MouseEvent>) => void;
+}
+
+interface TableColumn {
+  key: string;
+  title: string;
+  render?: (item: TableDataItem, index: number) => React.ReactNode;
+}
+
+interface TableSegmentContentProps {
+  columns: TableColumn[];
+  tableData: TableDataItem[];
+  canEdit: boolean;
+  handleTextAreaChange: (index: number, value: string) => void;
+}
+
+export const getSrcFromImg = (str: string): string[] => {
+  if (!str) {
+    return [];
+  }
+  const imgRegx = /<img[^>]+src\s*=\s*['"]([^'"]+)['"][^>]*>/g;
+  // 使用正则表达式进行匹配
+  const matches = str.match(imgRegx);
+
+  // 提取匹配结果中的src属性值
+  const srcList: string[] = [];
+  if (matches) {
+    for (const match of matches) {
+      const src = match.match(/src\s*=\s*['"]([^'"]+)['"]/)?.[1];
+      if (src) {
+        srcList.push(src);
+      }
+    }
+  }
+  return srcList;
+};
+
+const TableSegmentContent: React.FC<TableSegmentContentProps> = ({
+  columns,
+  tableData,
+  canEdit,
+}) => (
+  <div
+    className={`${styles['table-content-modal']} ${
+      canEdit ? '' : styles['has-preview-modal']
+    }`}
+  >
+    <div className={styles['table-header']}>
+      <div className={`${styles['table-row']} ${styles['header-row']}`}>
+        {columns.map(column => (
+          <div key={column.key} className={styles[column.key]}>
+            {column.title}
+          </div>
+        ))}
+      </div>
+    </div>
+    <div className={styles['table-body']}>
+      {tableData.map((item, index) => (
+        <div
+          className={`${styles['table-row']} ${styles['tbody-row']}`}
+          key={index}
+        >
+          {columns.map(column => (
+            <div key={column.key} className={styles[column.key]}>
+              {typeof column.render === 'function'
+                ? column.render(item, index)
+                : item[column.key as keyof TableDataItem]}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+const RenderFooter: React.FC<RenderFooterProps> = ({ ...modalProps }) => (
+  <>
+    <Button color="primary" onClick={modalProps.onCancel}>
+      {I18n.t('datasets_createFileModel_CancelBtn')}
+    </Button>
+    <Button
+      loading={modalProps.loading}
+      onClick={e => {
+        modalProps.onSubmit?.(e);
+      }}
+    >
+      {I18n.t('datasets_segment_detailModel_save')}
+    </Button>
+  </>
+);
+const OptimizedTextArea: React.FC<{
+  index: number;
+  value?: string;
+  disabled: boolean;
+  error?: string;
+  handleTextAreaChange: (index: number, value: string) => void;
+}> = React.memo(
+  ({ index, disabled, error, value: initialValue, handleTextAreaChange }) => {
+    const [value, setValue] = useState(initialValue);
+
+    const onBlur = () => handleTextAreaChange(index, value || '');
+
+    return (
+      <TextArea
+        disabled={disabled}
+        value={value}
+        onChange={setValue}
+        onBlur={onBlur}
+        autosize={{ minRows: 1, maxRows: 3 }}
+        maxLength={2000}
+        style={{ border: error ? '1px solid #F93920' : '' }}
+      />
+    );
+  },
+);
+
+const ImageEmpty = (props: { onClick?: () => void }) => (
+  <Button
+    color="highlight"
+    icon={<IconCozImage className="text-[14px]" />}
+    {...props}
+  >
+    {I18n.t('knowledge_insert_img_002')}
+  </Button>
+);
+export const TableSegmentModal: React.FC<TableSegmentModalProps> = ({
+  onCancel,
+  onSubmit,
+  tableData,
+  canEdit,
+  handleTextAreaChange,
+  loading,
+  ...modalProps
+}) => {
+  const columns: TableColumn[] = [
+    {
+      key: 'column_name',
+      title: I18n.t('datasets_segment_tableStructure_field_name'),
+    },
+    {
+      key: 'is_semantic',
+      title: I18n.t('datasets_segment_tableStructure_semantic_name'),
+      render: item =>
+        item.is_semantic
+          ? I18n.t('datasets_segment_tableStructure_semantic_yes')
+          : I18n.t('datasets_segment_tableStructure_semantic_no'),
+    },
+    {
+      key: 'value',
+      title: I18n.t('datasets_segment_tableStructure_field_value'),
+      render: (item, index) =>
+        item.column_type === ColumnType.Image ? (
+          <div className={styles['image-render-wrapper']}>
+            <ImageRender
+              className={
+                item.value ? 'modal-image-render' : 'modal-empty-image-render'
+              }
+              customEmpty={props => <ImageEmpty {...(props || {})} />}
+              srcList={getSrcFromImg(item.value)}
+              onChange={(src, tosKey) => {
+                let val = '';
+                if (src || tosKey) {
+                  val = `<img src="${src ?? ''}" ${
+                    tosKey ? `data-tos-key="${tosKey}"` : ''
+                  }>`;
+                }
+                handleTextAreaChange(index, val);
+              }}
+            />
+          </div>
+        ) : (
+          <div>
+            <OptimizedTextArea
+              index={index}
+              disabled={!canEdit}
+              value={item.value}
+              handleTextAreaChange={handleTextAreaChange}
+              error={item.error}
+            />
+            {item.error ? (
+              <div className={styles['error-tips']}>{item.error}</div>
+            ) : null}
+          </div>
+        ),
+    },
+  ];
+
+  return (
+    <Modal
+      size="medium"
+      centered
+      maskClosable={false}
+      keepDOM={false}
+      onCancel={onCancel}
+      footer={
+        <RenderFooter
+          onCancel={onCancel}
+          loading={loading}
+          onSubmit={() => {
+            onSubmit();
+          }}
+        />
+      }
+      {...modalProps}
+    >
+      <TableSegmentContent
+        tableData={tableData}
+        canEdit={canEdit}
+        columns={columns}
+        handleTextAreaChange={handleTextAreaChange}
+      />
+    </Modal>
+  );
+};