feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/components/source-radio/index.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 { Radio, Typography } from '@coze-arch/coze-design';
+
+interface SourceRadioProps {
+  title: string;
+  description: string;
+  icon?: React.ReactNode;
+  e2e?: string;
+  key?: string;
+  value?: string;
+}
+
+export const SourceRadio = (props: SourceRadioProps) => {
+  const { title, description, icon, e2e, key, value } = props;
+  return (
+    <Radio
+      key={key}
+      value={value}
+      extra={
+        <Typography.Text
+          type="tertiary"
+          ellipsis={{
+            showTooltip: {
+              opts: { content: description },
+            },
+          }}
+          style={{ lineHeight: '20px', width: 180 }}
+        >
+          {description}
+        </Typography.Text>
+      }
+      className="flex-[0_0_49%]"
+      data-testid={e2e}
+    >
+      {icon ? <div className="flex items-center mr-2">{icon}</div> : null}
+      {title}
+    </Radio>
+  );
+};

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/components/source-select/index.module.less

@@ -0,0 +1,88 @@
+/* stylelint-disable declaration-no-important */
+/* stylelint-disable selector-class-pattern */
+.common-svg-icon(@size: 14px, @color: #3370ff) {
+  >svg {
+    width: @size;
+    height: @size;
+
+    >path {
+      fill: @color;
+    }
+  }
+}
+
+
+.radio-wrapper {
+  .radio-group {
+    display: flex;
+    gap: 8px;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+
+  .radio-item {
+    flex: 0 0 49%;
+  }
+
+  .displayNone {
+    display: none;
+  }
+
+
+  .form-line-wrapper {
+    position: relative;
+  }
+
+  .form-line {
+    margin-top: 24px;
+  }
+
+  .pt6 {
+    padding-top: 6px;
+  }
+
+  :global {
+    .semi-radioGroup-vertical {
+      row-gap: 8px;
+    }
+
+    .semi-radio-cardRadioGroup {
+      column-gap: 16px;
+      border: 1px solid var(--coz-stroke-plus);
+
+      &:hover {
+        background: var(--coz-mg-secondary-hovered);
+      }
+
+      &:active {
+        background: var(--coz-mg-secondary-pressed);
+      }
+    }
+
+
+
+    .semi-radio-cardRadioGroup_checked {
+      background: var(--coz-mg-hglt);
+      border: 1px solid var(--coz-stroke-hglt);
+
+      &:hover {
+        background: var(--coz-mg-hglt-hovered);
+      }
+
+      &:active {
+        background: var(--coz-mg-hglt-pressed);
+
+      }
+    }
+  }
+
+  .radio-icon {
+    display: flex;
+    align-items: center;
+    margin-right: 8px;
+  }
+}
+
+.icon-size-16 {
+  .common-svg-icon(16px, null);
+}

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/components/source-select/index.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 type { ReactNode } from 'react';
+
+import { RadioGroup } from '@coze-arch/coze-design';
+import type { RadioGroupProps } from '@coze-arch/coze-design';
+
+import styles from './index.module.less';
+
+export interface SourceSelectProps {
+  value: RadioGroupProps['value'];
+  onChange: RadioGroupProps['onChange'];
+  children: ReactNode;
+}
+
+export const SourceSelect = (props: SourceSelectProps) => {
+  const { value, onChange, children } = props;
+
+  return (
+    <div className={styles['radio-wrapper']}>
+      <RadioGroup
+        type="pureCard"
+        onChange={onChange}
+        value={value}
+        direction="horizontal"
+        name="format-type"
+        className={styles['radio-group']}
+      >
+        {children}
+      </RadioGroup>
+    </div>
+  );
+};

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/add-type-content/coze-knowledge/index.module.less

@@ -0,0 +1,43 @@
+/* stylelint-disable declaration-no-important */
+.create-knowledge-modal {
+  :global {
+    .semi-modal-content {
+      max-height: calc(100vh - 100px) !important;
+    }
+  }
+}
+
+.import-unit-type-label {
+  display: block;
+
+  margin-bottom: 8px;
+
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 20px;
+}
+
+
+.create-form {
+  :global {
+    .semi-form-field {
+      padding-top: 0;
+      padding-bottom: 24px !important;
+    }
+
+    .semi-form-field-label {
+      margin-bottom: 0;
+      padding: 0 8px 6px;
+
+      font-size: 12px;
+      font-weight: 500;
+      font-style: normal;
+      line-height: 16px; /* 133.333% */
+      color: var(--coz-fg-secondary);
+    }
+  }
+}
+
+.upload-avatar-container {
+  width: auto;
+}

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/add-type-content/coze-knowledge/index.tsx

@@ -0,0 +1,205 @@
+/*
+ * 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, useState } from 'react';
+
+import { CozeFormTextArea, CozeInputWithCountField } from '@coze-data/utils';
+import { UnitType } from '@coze-data/knowledge-resource-processor-core';
+import { KnowledgeE2e } from '@coze-data/e2e';
+import { PictureUpload } from '@coze-common/biz-components/picture-upload';
+import { I18n } from '@coze-arch/i18n';
+import { FormatType } from '@coze-arch/bot-api/memory';
+import { type Icon } from '@coze-arch/bot-api/knowledge';
+import { FileBizType, IconType } from '@coze-arch/bot-api/developer_api';
+import { KnowledgeApi } from '@coze-arch/bot-api';
+import { useFormApi } from '@coze-arch/coze-design';
+
+import { SelectFormatType } from '../../select-format-type/base';
+import { ImportKnowledgeSourceSelect } from '../../import-knowledge-source-select/base';
+
+import styles from './index.module.less';
+
+export interface CozeKnowledgeAddTypeContentFormData {
+  name: string;
+  icon_uri?: Array<{
+    url: string;
+    uri: string;
+    uid: string;
+    isDefault?: boolean;
+  }>;
+  format_type: FormatType;
+  description: string;
+}
+
+export interface AddTypeContentProps {
+  onImportKnowledgeTypeChange?: (type: UnitType) => void;
+  onSelectFormatTypeChange?: (type: FormatType) => void;
+}
+
+export const CozeKnowledgeAddTypeContent = (params: AddTypeContentProps) => {
+  const { onImportKnowledgeTypeChange, onSelectFormatTypeChange } = params;
+  const formApi = useFormApi<CozeKnowledgeAddTypeContentFormData>();
+  // 使用 useState 保证能重新渲染
+  const [currentFormatType, setCurrentFormatType] = useState(FormatType.Text);
+  const [iconInfoGenerate, setIconInfoGenerate] = useState<{
+    name: string;
+    desc: string;
+  }>({
+    name: '',
+    desc: '',
+  });
+  const [coverIcon, setCoverIcon] = useState<Icon | undefined>({
+    uri: '',
+    url: '',
+  });
+
+  const fetchIcon = async (formatType: FormatType) => {
+    const { icon } = await KnowledgeApi.GetIcon({
+      format_type: formatType,
+    });
+    setCoverIcon(icon);
+    const currentCover = formApi.getValue('icon_uri');
+    if (!currentCover || currentCover[0]?.isDefault) {
+      formApi.setValue('icon_uri', [
+        {
+          url: icon?.url ?? '',
+          uri: icon?.uri ?? '',
+          uid: icon?.uri ?? '',
+          isDefault: true,
+        },
+      ]);
+    }
+  };
+
+  const [unitType, setUnitType] = useState<UnitType>(UnitType.TEXT_DOC);
+
+  useEffect(() => {
+    fetchIcon(currentFormatType);
+    if (currentFormatType === FormatType.Text) {
+      setUnitType(UnitType.TEXT_DOC);
+    } else if (currentFormatType === FormatType.Table) {
+      setUnitType(UnitType.TABLE_DOC);
+    } else if (currentFormatType === FormatType.Image) {
+      setUnitType(UnitType.IMAGE_FILE);
+    }
+  }, [currentFormatType]);
+
+  useEffect(() => {
+    if (!unitType) {
+      return;
+    }
+    onImportKnowledgeTypeChange?.(unitType);
+  }, [unitType]);
+
+  return (
+    <div data-testid={KnowledgeE2e.CreateKnowledgeModal}>
+      <SelectFormatType
+        field="format_type"
+        noLabel
+        onChange={(type: FormatType) => {
+          setCurrentFormatType(type);
+          formApi.setValue('format_type', type);
+          onSelectFormatTypeChange?.(type);
+        }}
+      />
+      <CozeInputWithCountField
+        data-testid={KnowledgeE2e.CreateKnowledgeModalNameInput}
+        field="name"
+        label={I18n.t('datasets_model_create_name')}
+        maxLength={100}
+        onChange={(value: string) => {
+          setIconInfoGenerate(prev => ({
+            ...prev,
+            name: value?.trim() || '',
+          }));
+        }}
+        rules={[
+          {
+            required: true,
+            whitespace: true,
+            message: I18n.t('dataset-name-empty-tooltip'),
+          },
+          {
+            pattern: /^[^"'`\\]+$/,
+            message: I18n.t('dataset-name-has-wrong-word-tooltip'),
+          },
+        ]}
+        placeholder={I18n.t('datasets_model_create_name_placeholder')}
+      />
+      <CozeFormTextArea
+        field="description"
+        data-testid={KnowledgeE2e.CreateKnowledgeModalDescInput}
+        // className={s['textarea-multi-line']}
+        label={I18n.t('datasets_model_create_description')}
+        autosize={{ minRows: 1, maxRows: 2 }}
+        maxCount={2000}
+        maxLength={2000}
+        placeholder={I18n.t('datasets_model_create_description_placeholder')}
+        onChange={(value: string) => {
+          setIconInfoGenerate(prev => ({
+            ...prev,
+            desc: value?.trim() || '',
+          }));
+        }}
+      />
+
+      <div
+        className="semi-form-field"
+        x-label-pos="top"
+        x-field-id="name"
+        x-extra-pos="bottom"
+      >
+        <label className="semi-form-field-label semi-form-field-label-left">
+          <div className="semi-form-field-label-text" x-semi-prop="label">
+            {I18n.t('create-dataset-import-type')}
+          </div>
+        </label>
+
+        <ImportKnowledgeSourceSelect
+          formatType={currentFormatType}
+          initValue={unitType}
+          onChange={setUnitType}
+        />
+      </div>
+
+      <PictureUpload
+        label={I18n.t('datasets_model_create_avatar')}
+        field="icon_uri"
+        testId={KnowledgeE2e.CreateKnowledgeModalAvatarUploader}
+        fileBizType={FileBizType.BIZ_DATASET_ICON}
+        uploadClassName={styles['upload-avatar-container']}
+        iconType={IconType.Dataset}
+        generateInfo={iconInfoGenerate}
+        generateTooltip={{
+          generateBtnText: I18n.t(
+            'dataset_create_knowledge_generate_avatar_tips',
+          ),
+          contentNotLegalText: I18n.t(
+            'dataset_create_knowledge_generate_content_tips',
+          ),
+        }}
+        initValue={[
+          {
+            url: coverIcon?.url,
+            uri: coverIcon?.uri,
+            isDefault: true,
+          },
+        ]}
+      />
+    </div>
+  );
+};

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/import-knowledge-source-select/base/image-knowledge-source-select.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { type ImportKnowledgeSourceSelectModuleProps } from '../module';
+import { ImageLocal } from '../../import-knowledge-source/image-local';
+import { SourceSelect } from '../../../components/source-select';
+
+export const ImageKnowledgeSourceSelect = (
+  props: Omit<ImportKnowledgeSourceSelectModuleProps, 'formatType'>,
+) => {
+  const { initValue, onChange } = props;
+  return (
+    <SourceSelect
+      value={initValue}
+      onChange={e => {
+        onChange(e.target.value);
+      }}
+    >
+      <ImageLocal />
+    </SourceSelect>
+  );
+};

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/import-knowledge-source-select/base/index.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 { FormatType } from '@coze-arch/bot-api/knowledge';
+
+import { type ImportKnowledgeSourceSelectModule } from '../module';
+import { TextKnowledgeSourceSelect } from './text-knowledge-source-select';
+import { TableKnowledgeSourceSelect } from './table-knowledge-source-select';
+import { ImageKnowledgeSourceSelect } from './image-knowledge-source-select';
+
+export const ImportKnowledgeSourceSelect: ImportKnowledgeSourceSelectModule =
+  props => {
+    const { formatType, initValue, onChange } = props;
+    if (formatType === FormatType.Text) {
+      return (
+        <TextKnowledgeSourceSelect initValue={initValue} onChange={onChange} />
+      );
+    }
+    if (formatType === FormatType.Image) {
+      return (
+        <ImageKnowledgeSourceSelect initValue={initValue} onChange={onChange} />
+      );
+    }
+    if (formatType === FormatType.Table) {
+      return (
+        <TableKnowledgeSourceSelect initValue={initValue} onChange={onChange} />
+      );
+    }
+  };

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/import-knowledge-source-select/base/table-knowledge-source-select.tsx

@@ -0,0 +1,37 @@
+/*
+ * 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 { type ImportKnowledgeSourceSelectModuleProps } from '../module';
+import { TableLocal } from '../../import-knowledge-source/table-local';
+import { TableCustom } from '../../import-knowledge-source/table-custom';
+import { SourceSelect } from '../../../components/source-select';
+
+export const TableKnowledgeSourceSelect = (
+  props: Omit<ImportKnowledgeSourceSelectModuleProps, 'formatType'>,
+) => {
+  const { initValue, onChange } = props;
+  return (
+    <SourceSelect
+      value={initValue}
+      onChange={e => {
+        onChange(e.target.value);
+      }}
+    >
+      <TableLocal />
+      <TableCustom />
+    </SourceSelect>
+  );
+};

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/import-knowledge-source-select/base/text-knowledge-source-select.tsx

@@ -0,0 +1,37 @@
+/*
+ * 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 { type ImportKnowledgeSourceSelectModuleProps } from '../module';
+import { TextLocal } from '../../import-knowledge-source/text-local';
+import { TextCustom } from '../../import-knowledge-source/text-custom';
+import { SourceSelect } from '../../../components/source-select';
+
+export const TextKnowledgeSourceSelect = (
+  props: Omit<ImportKnowledgeSourceSelectModuleProps, 'formatType'>,
+) => {
+  const { initValue, onChange } = props;
+  return (
+    <SourceSelect
+      value={initValue}
+      onChange={e => {
+        onChange(e.target.value);
+      }}
+    >
+      <TextLocal />
+      <TextCustom />
+    </SourceSelect>
+  );
+};

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/import-knowledge-source-select/module.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 { type UnitType } from '@coze-data/knowledge-resource-processor-core';
+import { type FormatType } from '@coze-arch/bot-api/knowledge';
+
+export interface ImportKnowledgeSourceSelectModuleProps {
+  formatType: FormatType;
+  initValue?: UnitType;
+  onChange: (val: UnitType) => void;
+}
+
+export type ImportKnowledgeSourceSelectModule =
+  React.ComponentType<ImportKnowledgeSourceSelectModuleProps>;

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/import-knowledge-source/image-local/index.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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 { UnitType } from '@coze-data/knowledge-resource-processor-core';
+import { KnowledgeE2e } from '@coze-data/e2e';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozDocument } from '@coze-arch/coze-design/icons';
+
+import { SourceRadio } from '../../../components/source-radio';
+
+export const ImageLocal = () => (
+  <SourceRadio
+    title={I18n.t('knowledge_photo_002')}
+    description={I18n.t('knowledge_photo_003')}
+    icon={<IconCozDocument className="w-4 h-4" />}
+    e2e={KnowledgeE2e.CreateKnowledgeModalPhotoImgRadio}
+    key={UnitType.IMAGE_FILE}
+    value={UnitType.IMAGE_FILE}
+  />
+);

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/import-knowledge-source/index.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 { TableCustom } from './table-custom';
+export { TableLocal } from './table-local';
+export { TextCustom } from './text-custom';
+export { TextLocal } from './text-local';
+export { ImageLocal } from './image-local';
+export { ImportKnowledgeSourceModule } from './module';

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/import-knowledge-source/module.ts

@@ -0,0 +1,19 @@
+/*
+ * 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 { type RadioGroupProps } from '@coze-arch/coze-design';
+
+export type ImportKnowledgeSourceModule = React.ComponentType<RadioGroupProps>;

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/import-knowledge-source/table-custom/index.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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 { UnitType } from '@coze-data/knowledge-resource-processor-core';
+import { KnowledgeE2e } from '@coze-data/e2e';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozPencilPaper } from '@coze-arch/coze-design/icons';
+
+import { SourceRadio } from '../../../components/source-radio';
+
+export const TableCustom = () => (
+  <SourceRadio
+    title={I18n.t('datasets_createFileModel_step1_TabCustomTitle')}
+    description={I18n.t('datasets_createFileModel_step1_TabCustomDescription')}
+    icon={<IconCozPencilPaper className="w-4 h-4" />}
+    e2e={KnowledgeE2e.CreateKnowledgeModalTableCustomRadio}
+    key={UnitType.TABLE_CUSTOM}
+    value={UnitType.TABLE_CUSTOM}
+  />
+);

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/import-knowledge-source/table-local/index.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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 { UnitType } from '@coze-data/knowledge-resource-processor-core';
+import { KnowledgeE2e } from '@coze-data/e2e';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozDocument } from '@coze-arch/coze-design/icons';
+
+import { SourceRadio } from '../../../components/source-radio';
+
+export const TableLocal = () => (
+  <SourceRadio
+    title={I18n.t('datasets_createFileModel_step1_TabLocalTitle')}
+    description={I18n.t('datasets_createFileModel_step1_TabLocalDescription')}
+    icon={<IconCozDocument className="w-4 h-4" />}
+    e2e={KnowledgeE2e.CreateKnowledgeModalTableLocalRadio}
+    key={UnitType.TABLE_DOC}
+    value={UnitType.TABLE_DOC}
+  />
+);

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/import-knowledge-source/text-custom/index.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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 { UnitType } from '@coze-data/knowledge-resource-processor-core';
+import { KnowledgeE2e } from '@coze-data/e2e';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozPencilPaper } from '@coze-arch/coze-design/icons';
+
+import { SourceRadio } from '../../../components/source-radio';
+
+export const TextCustom = () => (
+  <SourceRadio
+    title={I18n.t('datasets_createFileModel_step1_CustomTitle')}
+    description={I18n.t('datasets_createFileModel_step1_CustomDescription')}
+    icon={<IconCozPencilPaper className="w-4 h-4" />}
+    e2e={KnowledgeE2e.CreateKnowledgeModalTextCustomRadio}
+    key={UnitType.TEXT_CUSTOM}
+    value={UnitType.TEXT_CUSTOM}
+  />
+);

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/import-knowledge-source/text-local/index.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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 { UnitType } from '@coze-data/knowledge-resource-processor-core';
+import { KnowledgeE2e } from '@coze-data/e2e';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozDocument } from '@coze-arch/coze-design/icons';
+
+import { SourceRadio } from '../../../components/source-radio';
+
+export const TextLocal = () => (
+  <SourceRadio
+    title={I18n.t('datasets_createFileModel_step1_LocalTitle')}
+    description={I18n.t('datasets_createFileModel_step1_LocalDescription')}
+    icon={<IconCozDocument className="w-4 h-4" />}
+    e2e={KnowledgeE2e.CreateKnowledgeModalTextLocalRadio}
+    key={UnitType.TEXT_DOC}
+    value={UnitType.TEXT_DOC}
+  />
+);

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/select-format-type/base/index.module.less

@@ -0,0 +1,74 @@
+/* stylelint-disable declaration-no-important */
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable max-nesting-depth */
+.select-format-type {
+  display: flex !important;
+  gap: 8px;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+
+  :global {
+    .info-icon {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+
+      display: none;
+
+      color: var(--coz-fg-dim);
+    }
+
+    .semi-radio-cardRadioGroup {
+      padding: 10px 16px;
+      border: 1px solid var(--coz-stroke-plus);
+
+      &:hover {
+        background: var(--coz-mg-secondary-hovered);
+      }
+
+      &:active {
+        background: var(--coz-mg-secondary-pressed);
+      }
+    }
+
+
+    .semi-radio-cardRadioGroup_checked {
+      background: var(--coz-mg-hglt);
+      border: 1px solid var(--coz-stroke-hglt);
+
+      &:hover {
+        background: var(--coz-mg-hglt-hovered);
+      }
+
+      &:active {
+        background: var(--coz-mg-hglt-pressed);
+      }
+    }
+
+    .semi-radio {
+      position: relative;
+      display: flex;
+      flex: 1;
+      justify-content: center;
+
+      &:hover {
+        .info-icon {
+          display: block;
+        }
+      }
+
+      .semi-radio-content {
+        height: 48px !important;
+
+        .semi-radio-addon {
+          display: flex !important;
+          flex-direction: column;
+
+          .radio-logo {
+            height: 28px;
+          }
+        }
+      }
+    }
+  }
+}

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/select-format-type/base/index.tsx

@@ -0,0 +1,90 @@
+/*
+ * 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 { KnowledgeE2e } from '@coze-data/e2e';
+import { I18n } from '@coze-arch/i18n';
+import { withField } from '@coze-arch/bot-semi';
+import { FormatType } from '@coze-arch/bot-api/memory';
+import { IconCozInfoCircle } from '@coze-arch/coze-design/icons';
+import { Radio, RadioGroup, Tooltip } from '@coze-arch/coze-design';
+
+import type {
+  SelectFormatTypeModule,
+  SelectFormatTypeModuleProps,
+} from '../module';
+// eslint-disable-next-line @coze-arch/no-deep-relative-import
+import { ReactComponent as TextKnowledgeLogo } from '../../../../assets/text-knowledge.svg';
+// eslint-disable-next-line @coze-arch/no-deep-relative-import
+import { ReactComponent as TableKnowledgeLogo } from '../../../../assets/table-knowledge.svg';
+// eslint-disable-next-line @coze-arch/no-deep-relative-import
+import { ReactComponent as ImageKnowledgeLogo } from '../../../../assets/image-knowledge.svg';
+
+import styles from './index.module.less';
+
+const SelectFormatTypeComponent: React.FC<
+  SelectFormatTypeModuleProps
+> = props => {
+  const { onChange } = props;
+  return (
+    <RadioGroup
+      defaultValue={FormatType.Text}
+      onChange={v => {
+        onChange?.(v.target.value);
+      }}
+      type="pureCard"
+      direction="horizontal"
+      className={styles['select-format-type']}
+    >
+      <Radio
+        value={FormatType.Text}
+        key={FormatType.Text}
+        data-testid={KnowledgeE2e.CreateKnowledgeModalTextRadioGroup}
+      >
+        <div className="radio-logo">
+          <TextKnowledgeLogo />
+        </div>
+        <div>{I18n.t('create-knowledge-text-type')}</div>
+      </Radio>
+      <Radio
+        value={FormatType.Table}
+        key={FormatType.Table}
+        data-testid={KnowledgeE2e.CreateKnowledgeModalTableRadioGroup}
+      >
+        <div className="radio-logo">
+          <TableKnowledgeLogo />
+        </div>
+        <div>{I18n.t('create-knowledge-table-type')}</div>
+        <Tooltip content={I18n.t('knowledge_table_nl2sql_tooltip')}>
+          <IconCozInfoCircle className={'info-icon'} />
+        </Tooltip>
+      </Radio>
+      <Radio
+        value={FormatType.Image}
+        key={FormatType.Image}
+        data-testid={KnowledgeE2e.CreateKnowledgeModalPhotoRadioGroup}
+      >
+        <div className="radio-logo">
+          <ImageKnowledgeLogo />
+        </div>
+        <div>{I18n.t('knowledge_photo_001')}</div>
+      </Radio>
+    </RadioGroup>
+  );
+};
+
+export const SelectFormatType: SelectFormatTypeModule = withField(
+  SelectFormatTypeComponent,
+);

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/features/select-format-type/module.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 type React from 'react';
+
+import type { FormatType } from '@coze-arch/bot-api/memory';
+import type { CommonFieldProps } from '@coze-arch/coze-design';
+
+export interface SelectFormatTypeModuleProps {
+  onChange: (type: FormatType) => void;
+}
+
+export type SelectFormatTypeModule = React.ComponentType<
+  SelectFormatTypeModuleProps & Omit<CommonFieldProps, 'change'>
+>;

frontend/packages/data/knowledge/knowledge-modal-base/src/create-knowledge-modal-v2/index.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 {
+  CozeKnowledgeAddTypeContent,
+  type CozeKnowledgeAddTypeContentFormData,
+} from './features/add-type-content/coze-knowledge';
+
+export {
+  TableCustom,
+  TableLocal,
+  TextCustom,
+  TextLocal,
+  ImageLocal,
+} from './features/import-knowledge-source';
+
+export { SourceRadio } from './components/source-radio';
+
+export { ImportKnowledgeSourceModule } from './features/import-knowledge-source';
+
+export { SelectFormatType } from './features/select-format-type/base';
+
+export {
+  type ImportKnowledgeSourceSelectModule,
+  type ImportKnowledgeSourceSelectModuleProps,
+} from './features/import-knowledge-source-select/module';
+
+export { SourceSelect } from './components/source-select';