feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/data/common/utils/.storybook/main.js

@@ -0,0 +1,18 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.tsx'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

frontend/packages/data/common/utils/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

frontend/packages/data/common/utils/.stylelintrc.js

@@ -0,0 +1,5 @@
+const { defineConfig } = require('@coze-arch/stylelint-config');
+
+module.exports = defineConfig({
+  extends: [],
+});

frontend/packages/data/common/utils/README.md

@@ -0,0 +1,16 @@
+# @coze-data/utils
+
+> Project template for react component with storybook and supports publish independently.
+
+## Features
+
+- [x] eslint & ts
+- [x] esm bundle
+- [x] umd bundle
+- [x] storybook
+
+## Commands
+
+- init: `rush update`
+- dev: `npm run dev`
+- build: `npm run build`

frontend/packages/data/common/utils/__tests__/data-type-select.test.tsx

@@ -0,0 +1,69 @@
+/*
+ * 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 { expect, vi, describe, test } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import {
+  DataTypeSelect,
+  getDataTypeText,
+} from '../src/components/data-type-select';
+
+const handleChange = vi.fn();
+vi.mock('@coze-arch/i18n', () => ({
+  I18n: {
+    t: (key: string) => key,
+  },
+}));
+
+vi.mock('../src/components/singleline-select', () => ({
+  default: (props: { value: string; handleChange: (v: any) => void }) => (
+    <button onClick={() => props.handleChange('test change')}>
+      {props.value}
+    </button>
+  ),
+}));
+
+describe('data type select test', () => {
+  test('render', async () => {
+    await render(
+      <DataTypeSelect
+        value={'db_add_table_field_type_txt'}
+        handleChange={handleChange}
+        selectProps={{}}
+      />,
+    );
+    const select = await screen.queryByText('db_add_table_field_type_txt');
+    expect(select).not.toBeNull();
+  });
+  test('onChange', async () => {
+    await render(
+      <DataTypeSelect
+        value={'db_add_table_field_type_txt'}
+        handleChange={handleChange}
+        selectProps={{}}
+      />,
+    );
+    const select = await screen.queryByText('db_add_table_field_type_txt');
+    await fireEvent.click(select!);
+    expect(handleChange).toBeCalled();
+  });
+
+  test('getDataTypeText return null', () => {
+    const text = getDataTypeText('' as any);
+    expect(text).toBe('');
+  });
+});

frontend/packages/data/common/utils/__tests__/index.test.ts

@@ -0,0 +1,43 @@
+/*
+ * 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 { expect, describe, test } from 'vitest';
+
+import { isValidUrl, completeUrl } from '../src/url';
+
+describe('url utils', () => {
+  test('isValidUrl', () => {
+    expect(isValidUrl('')).toBeFalsy();
+    expect(isValidUrl('test.com')).toBeFalsy();
+    expect(isValidUrl('http:test.2333.com')).toBeFalsy();
+    expect(isValidUrl('https:test.2333.com')).toBeFalsy();
+    expect(isValidUrl('http://test.2333.com')).toBeTruthy();
+    expect(isValidUrl('https://test.2333.com')).toBeTruthy();
+    expect(isValidUrl('https://test.c')).toBeFalsy();
+    expect(isValidUrl('https://test.com')).toBeTruthy();
+    expect(isValidUrl('https://test.com/')).toBeTruthy();
+    expect(isValidUrl('https://test.club')).toBeTruthy();
+    expect(
+      isValidUrl(
+        'https://mock.apifox.com/m1/793747-0-default/get_student_infos?apifoxApiId=159058215',
+      ),
+    ).toBeTruthy();
+  });
+  test('completeUrl', () => {
+    expect(completeUrl('')).toBe('http://');
+    expect(completeUrl('test.com')).toBe('http://test.com');
+  });
+});

frontend/packages/data/common/utils/__tests__/singleline-select.test.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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 { expect, vi, describe, test } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { type SelectProps } from '@coze-arch/coze-design';
+
+import { SinglelineSelect } from '../src/components/singleline-select';
+
+const handleChangeMock = vi.fn();
+vi.mock('@coze-arch/i18n', () => ({
+  I18n: {
+    t: (key: string) => key,
+  },
+}));
+
+vi.mock('@coze-arch/coze-design', () => ({
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  Select: (props: SelectProps) => {
+    const { optionList, onChange } = props;
+    return (
+      <>
+        {optionList?.map(option => (
+          <div key={option.value} onClick={() => onChange?.(option.value)}>
+            {option.value}
+          </div>
+        ))}
+      </>
+    );
+  },
+}));
+
+describe('singleline select test', () => {
+  test('render', async () => {
+    await render(
+      <SinglelineSelect
+        selectProps={{
+          optionList: [{ value: 'test' }, { value: 'test-1' }],
+        }}
+        handleChange={handleChangeMock}
+        value={'test'}
+      />,
+    );
+    const text = await screen.queryByText('test');
+    expect(text).not.toBeNull();
+    await render(
+      <SinglelineSelect
+        selectProps={{
+          optionList: [{ value: 'test' }, { value: 'test-1' }],
+        }}
+        handleChange={handleChangeMock}
+        value={'test'}
+        errorMsg={'test-error'}
+      />,
+    );
+    const errorMsg = await screen.queryByText('test-error');
+    expect(errorMsg).not.toBeNull();
+  });
+  test('change', async () => {
+    await render(
+      <SinglelineSelect
+        selectProps={{
+          optionList: [{ value: 'test' }, { value: 'test-1' }],
+        }}
+        handleChange={handleChangeMock}
+        value={'test'}
+        errorMsg={'test-error'}
+      />,
+    );
+    const selector = await screen.queryByText('test');
+    await fireEvent.click(selector!);
+    expect(handleChangeMock).toBeCalledWith('test');
+  });
+});

frontend/packages/data/common/utils/config/rush-project.json

@@ -0,0 +1,12 @@
+{
+  "operationSettings": [
+    {
+      "operationName": "test:cov",
+      "outputFolderNames": ["coverage"]
+    },
+    {
+      "operationName": "ts-check",
+      "outputFolderNames": ["./dist"]
+    }
+  ]
+}

frontend/packages/data/common/utils/config/rushx-config.json

@@ -0,0 +1,6 @@
+{
+  "codecov": {
+    "coverage": 0,
+    "incrementCoverage": 0
+  }
+}

frontend/packages/data/common/utils/eslint.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require('@coze-arch/eslint-config');
+
+module.exports = defineConfig({
+  packageRoot: __dirname,
+  preset: 'web',
+  rules: {},
+});

frontend/packages/data/common/utils/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@coze-data/utils",
+  "version": "0.0.1",
+  "description": "coze knowledge utils",
+  "license": "Apache-2.0",
+  "author": "rosefang.123@bytedance.com",
+  "maintainers": [],
+  "main": "src/index.ts",
+  "unpkg": "./dist/umd/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./src/index.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "exit 0",
+    "lint": "eslint ./ --cache",
+    "test": "vitest --run --passWithNoTests",
+    "test:cov": "npm run test -- --coverage"
+  },
+  "dependencies": {
+    "@coze-arch/bot-api": "workspace:*",
+    "@coze-arch/bot-error": "workspace:*",
+    "@coze-arch/bot-semi": "workspace:*",
+    "@coze-arch/coze-design": "0.0.6-alpha.346d77",
+    "@coze-arch/i18n": "workspace:*",
+    "@coze-arch/report-events": "workspace:*",
+    "@coze-data/e2e": "workspace:*",
+    "@coze-data/knowledge-resource-processor-core": "workspace:*",
+    "@douyinfe/semi-ui": "~2.72.3",
+    "ahooks": "^3.7.8",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.7",
+    "utility-types": "^3.10.0",
+    "zustand": "^4.4.7"
+  },
+  "devDependencies": {
+    "@coze-arch/eslint-config": "workspace:*",
+    "@coze-arch/stylelint-config": "workspace:*",
+    "@coze-arch/ts-config": "workspace:*",
+    "@coze-arch/vitest-config": "workspace:*",
+    "@rsbuild/core": "1.1.13",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/node": "18.18.9",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "@vitest/coverage-v8": "~3.0.5",
+    "acorn": "^8.12.1",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "react-is": ">= 16.8.0",
+    "react-router-dom": "^6.22.0",
+    "styled-components": ">= 2",
+    "typescript": "~5.8.2",
+    "vitest": "~3.0.5",
+    "webpack": "~5.91.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  }
+}
+

frontend/packages/data/common/utils/src/abortable.ts

@@ -0,0 +1,69 @@
+/*
+ * 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 { useRef, useEffect } from 'react';
+
+export function useUnmountSignal() {
+  const controllerRef = useRef<AbortController | null>(null);
+
+  if (controllerRef.current === null) {
+    controllerRef.current = new AbortController();
+  }
+
+  useEffect(
+    () => () => {
+      if (controllerRef.current) {
+        controllerRef.current.abort();
+      }
+    },
+    [],
+  );
+
+  return controllerRef.current.signal;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- 得是 any
+export function abortable<T extends (...args: any[]) => any | Promise<any>>(
+  func: T,
+  abortSignal: AbortSignal,
+): (...args: Parameters<T>) => Promise<Awaited<ReturnType<T>>> {
+  return async (...args) => {
+    try {
+      if (abortSignal.aborted) {
+        throw new Error('Function aborted');
+      }
+
+      const result = func(...args);
+
+      if (result instanceof Promise) {
+        return await Promise.race([
+          result,
+          new Promise((_, reject) => {
+            abortSignal.addEventListener(
+              'abort',
+              () => reject(new Error('Function aborted')),
+              { once: true },
+            );
+          }),
+        ]);
+      }
+
+      return result;
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}

frontend/packages/data/common/utils/src/components/data-type-select/index.tsx

@@ -0,0 +1,65 @@
+/*
+ * 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 { useState } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { ColumnType } from '@coze-arch/bot-api/knowledge';
+
+import SinglelineSelect, {
+  type SinglelineSelectProps,
+} from '../singleline-select';
+
+export const getDataTypeText = (value: ColumnType) => {
+  const dataTypes = {
+    [ColumnType.Unknown]: 'Unknown',
+    [ColumnType.Text]: I18n.t('db_add_table_field_type_txt'),
+    [ColumnType.Number]: I18n.t('db_add_table_field_type_int'),
+    [ColumnType.Date]: I18n.t('db_add_table_field_type_time'),
+    [ColumnType.Float]: I18n.t('db_add_table_field_type_number'),
+    [ColumnType.Boolean]: I18n.t('db_add_table_field_type_bool'),
+    [ColumnType.Image]: I18n.t('knowledge_insert_img_010'),
+  };
+  return dataTypes[value] || '';
+};
+export const getDataTypeOptions = () => [
+  { value: ColumnType.Text, label: getDataTypeText(ColumnType.Text) },
+  { value: ColumnType.Number, label: getDataTypeText(ColumnType.Number) },
+  { value: ColumnType.Date, label: getDataTypeText(ColumnType.Date) },
+  { value: ColumnType.Float, label: getDataTypeText(ColumnType.Float) },
+  { value: ColumnType.Boolean, label: getDataTypeText(ColumnType.Boolean) },
+  { value: ColumnType.Image, label: getDataTypeText(ColumnType.Image) },
+];
+
+export const DataTypeSelect = (props: SinglelineSelectProps) => {
+  const [selectValue, setSelectValue] = useState<
+    SinglelineSelectProps['value']
+  >(props.value);
+  return (
+    <SinglelineSelect
+      value={selectValue}
+      selectProps={{
+        ...props.selectProps,
+        optionList: props.selectProps?.optionList || getDataTypeOptions(),
+      }}
+      errorMsg={props.errorMsg}
+      handleChange={v => {
+        setSelectValue(v as SinglelineSelectProps['value']);
+        props.handleChange?.(v);
+      }}
+    />
+  );
+};

frontend/packages/data/common/utils/src/components/input-with-count/index.module.less

@@ -0,0 +1,12 @@
+.limit-count {
+  overflow: hidden;
+
+  padding-right: 12px;
+  padding-left: 8px;
+
+  font-size: 12px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 16px;
+  color: var(--coz-fg-secondary);
+}

frontend/packages/data/common/utils/src/components/input-with-count/index.tsx

@@ -0,0 +1,67 @@
+/*
+ * 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 { useMemo } from 'react';
+
+import { Input, type InputProps, withField } from '@coze-arch/coze-design';
+import 'utility-types';
+
+import s from './index.module.less';
+
+interface LimitCountProps {
+  maxLen: number;
+  len: number;
+}
+
+const LimitCount: React.FC<LimitCountProps> = ({ maxLen, len }) => (
+  <span className={s['limit-count']}>
+    <span>{len}</span>
+    <span>/</span>
+    <span>{maxLen}</span>
+  </span>
+);
+
+export interface InputWithCountProps extends InputProps {
+  // 设置字数限制并显示字数统计
+  getValueLength?: (value?: InputProps['value'] | string) => number;
+}
+
+export const InputWithCount: React.FC<InputWithCountProps> = props => {
+  const { value, maxLength, getValueLength } = props;
+
+  const len = useMemo(() => {
+    if (getValueLength) {
+      return getValueLength(value);
+    } else if (value) {
+      return value.toString().length;
+    } else {
+      return 0;
+    }
+  }, [value, getValueLength]);
+
+  return (
+    <Input
+      {...props}
+      autoComplete="off"
+      suffix={
+        Boolean(maxLength) && <LimitCount maxLen={maxLength ?? 0} len={len} />
+      }
+    />
+  );
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const CozeInputWithCountField: any = withField(InputWithCount);

frontend/packages/data/common/utils/src/components/singleline-select/index.module.less

@@ -0,0 +1,32 @@
+/* stylelint-disable declaration-no-important */
+.select-wapper {
+  width: 100%;
+
+  span {
+    width: 100%;
+  }
+
+  :global(.singleline-select-error-content) {
+    height: 20px;
+  }
+
+  :global(.select-error-text) {
+    position: absolute;
+    z-index: 100;
+
+    padding-top: 2px;
+    padding-left: 12px;
+
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--coz-fg-hglt-red);
+  }
+}
+
+.error-wapper {
+  :global {
+    .semi-select {
+      border: 1px solid var(--coz-fg-hglt-red) !important;
+    }
+  }
+}

frontend/packages/data/common/utils/src/components/singleline-select/index.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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 cs from 'classnames';
+import { useReactive } from 'ahooks';
+import { Select, type SelectProps } from '@coze-arch/coze-design';
+import type { InputProps } from '@coze-arch/bot-semi/Input';
+import { CommonE2e } from '@coze-data/e2e';
+
+import s from './index.module.less';
+
+export interface SLSelectRefType {
+  triggerFocus?: () => void;
+}
+
+export type SinglelineSelectProps = InputProps & {
+  value: SelectProps['value'];
+  handleChange?: (v: SelectProps['value']) => void;
+  errorMsg?: string;
+  selectProps?: SelectProps;
+};
+
+export const SinglelineSelect: React.FC<SinglelineSelectProps> = props => {
+  const $state = useReactive({
+    value: props.value,
+  });
+
+  return (
+    <div
+      data-testid={CommonE2e.CommonDataTypeSelect}
+      className={cs(
+        s['select-wapper'],
+        props?.errorMsg ? s['error-wapper'] : null,
+      )}
+    >
+      <Select
+        {...props.selectProps}
+        style={{ width: '100%' }}
+        clickToHide={true}
+        value={$state.value}
+        onChange={v => {
+          ($state.value as SelectProps['value']) = v;
+          props?.handleChange?.(v);
+        }}
+      />
+      {props?.errorMsg ? (
+        <div className="singleline-select-error-content">
+          <div className="select-error-text">{props?.errorMsg}</div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default SinglelineSelect;

frontend/packages/data/common/utils/src/components/text-area/index.module.less

@@ -0,0 +1,21 @@
+/* stylelint-disable declaration-no-important */
+
+div.field {
+  padding-bottom: 24px !important;
+
+  &:has(:global(.semi-form-field-error-message)) {
+    padding-bottom: 0 !important;
+  }
+
+  :global {
+    .semi-form-field-error-message {
+      margin-top: 4px;
+      line-height: 20px;
+    }
+
+    .semi-input-textarea-counter {
+      padding-right: 5px!important;
+      padding-left: 5px;
+    }
+  }
+}

frontend/packages/data/common/utils/src/components/text-area/index.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 { forwardRef } from 'react';
+
+import cs from 'classnames';
+import { TextArea, withField } from '@coze-arch/coze-design';
+
+import s from './index.module.less';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TextAreaInner: any = withField(TextArea, {});
+export const CozeFormTextArea: typeof TextAreaInner = forwardRef(
+  // @ts-expect-error -- to fix
+  ({ fieldClassName, ...props }, ref) => (
+    <TextAreaInner
+      ref={ref}
+      {...props}
+      fieldClassName={cs(fieldClassName, s.field)}
+    />
+  ),
+);

frontend/packages/data/common/utils/src/database-page.ts

@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+ 
+interface DatabasePageQuery {
+  page_mode?: 'modal' | 'normal';
+  from?: 'bot' | 'workflow' | 'library' | 'create';
+  bot_id?: string;
+  workflow_id?: string;
+}
+
+export const isDatabasePathname = (): boolean => {
+  const databasePagePathReg = new RegExp('/space/[0-9]+/database(/[0-9]+)*');
+  return databasePagePathReg.test(location.pathname);
+};
+
+export const getDatabasePageQuery = (): DatabasePageQuery => {
+  const queryParams = new URLSearchParams(location.search);
+  return {
+    page_mode: queryParams.get('page_mode') as DatabasePageQuery['page_mode'],
+    from: queryParams.get('from') as DatabasePageQuery['from'],
+    bot_id: queryParams.get('bot_id') || '',
+    workflow_id: queryParams.get('workflow_id') || '',
+  };
+};
+
+/** 获取 databse 页面模式，如果等于 'modal' 则需要使用全屏形态 */
+export const getDatabasePageMode = (): DatabasePageQuery['page_mode'] => {
+  if (isDatabasePathname()) {
+    return getDatabasePageQuery()?.page_mode;
+  }
+  return 'normal';
+};
+
+/** 当前 Database 页面模式是弹窗（全屏）形式 */
+export const databasePageModeIsModal = (): boolean =>
+  getDatabasePageMode() === 'modal';

frontend/packages/data/common/utils/src/feishu-lark.ts

@@ -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 { DataSourceType } from '@coze-arch/bot-api/memory';
+import { DocumentSource } from '@coze-arch/bot-api/knowledge';
+import { UnitType } from '@coze-data/knowledge-resource-processor-core';
+
+export const isFeishuOrLarkDocumentSource = (
+  source: DocumentSource | undefined,
+) => source === DocumentSource.FeishuWeb || source === DocumentSource.LarkWeb;
+
+export const isFeishuOrLarkDataSourceType = (
+  source: DataSourceType | undefined,
+) => source === DataSourceType.FeishuWeb || source === DataSourceType.LarkWeb;
+
+export const isFeishuOrLarkTextUnit = (unitType: UnitType | undefined) =>
+  unitType === UnitType.TEXT_FEISHU || unitType === UnitType.TEXT_LARK;
+
+export const isFeishuOrLarkTableUnit = (unitType: UnitType | undefined) =>
+  unitType === UnitType.TABLE_FEISHU || unitType === UnitType.TABLE_LARK;

frontend/packages/data/common/utils/src/hooks/index.module.less

@@ -0,0 +1,13 @@
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable declaration-no-important */
+.ui-data-modal {
+  :global {
+    .semi-modal-content {
+      @apply coz-bg-plus;
+    }
+
+    .semi-modal-content {
+      @apply coz-bg-plus;
+    }
+  }
+}

frontend/packages/data/common/utils/src/hooks/use-data-modal.tsx

@@ -0,0 +1,85 @@
+/*
+ * 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 { useState } from 'react';
+
+import cls from 'classnames';
+// import { type ModalHeight } from '@coze-arch/coze-design/types';
+// import { type ButtonColor } from '@coze-arch/coze-design/types';
+import {
+  // type ButtonProps,
+  Modal,
+  type ModalProps,
+} from '@coze-arch/coze-design';
+import { type UseModalReturnValue } from '@coze-arch/bot-semi/src/components/ui-modal';
+import { type UseModalParams, useModal } from '@coze-arch/bot-semi';
+
+import styles from './index.module.less';
+export const useDataModal = (params: UseModalParams): UseModalReturnValue => {
+  const { className, ...props } = params;
+  const modal = useModal({
+    ...props,
+    className: cls(styles['ui-data-modal'], className),
+  });
+
+  return modal;
+};
+
+export type UseModalParamsCoze = Omit<ModalProps, 'visible'> & {
+  hideOkButton?: boolean;
+  hideCancelButton?: boolean;
+  showCloseIcon?: boolean;
+  hideContent?: boolean;
+  showScrollBar?: boolean;
+  // okButtonColor?: ButtonColor;
+};
+
+export const useDataModalWithCoze = ({
+  // type = 'info',
+  centered = true,
+  // height = 'fit-content',
+  ...params
+}: UseModalParamsCoze): UseModalReturnValue & {
+  canOk: boolean;
+  enableOk: () => void;
+  disableOk: () => void;
+} => {
+  const [visible, setVisible] = useState(false);
+  const [disableOk, setDisableOk] = useState(false);
+
+  return {
+    modal: inner => (
+      <Modal
+        closeOnEsc
+        centered={Boolean(centered)}
+        // height={height as ModalHeight}
+        visible={visible}
+        okButtonProps={{
+          disabled: disableOk,
+        }}
+        {...(params as unknown as ModalProps)}
+      >
+        {inner}
+      </Modal>
+    ),
+    open: () => setVisible(true),
+    close: () => setVisible(false),
+    visible,
+    disableOk: () => setDisableOk(true),
+    enableOk: () => setDisableOk(false),
+    canOk: !disableOk,
+  };
+};

frontend/packages/data/common/utils/src/index.ts

@@ -0,0 +1,51 @@
+/*
+ * 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 { isValidUrl, completeUrl } from './url';
+export { getFormatTypeFromUnitType } from './knowledge-page';
+
+export {
+  isDatabasePathname,
+  getDatabasePageQuery,
+  getDatabasePageMode,
+  databasePageModeIsModal,
+} from './database-page';
+
+export { FilterKnowledgeType, DocumentUpdateInterval } from './types';
+
+export {
+  isFeishuOrLarkDocumentSource,
+  isFeishuOrLarkTextUnit,
+  isFeishuOrLarkTableUnit,
+  isFeishuOrLarkDataSourceType,
+} from './feishu-lark';
+export {
+  getUpdateIntervalOptions,
+  getUpdateTypeOptions,
+} from './update-interval';
+export {
+  DataTypeSelect,
+  getDataTypeText,
+  getDataTypeOptions,
+} from './components/data-type-select';
+export { CozeInputWithCountField } from './components/input-with-count';
+export { CozeFormTextArea } from './components/text-area';
+export { abortable, useUnmountSignal } from './abortable';
+export {
+  useDataModal,
+  useDataModalWithCoze,
+  type UseModalParamsCoze,
+} from './hooks/use-data-modal';

frontend/packages/data/common/utils/src/knowledge-page.ts

@@ -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 { UnitType } from '@coze-data/knowledge-resource-processor-core';
+import { FormatType } from '@coze-arch/bot-api/knowledge';
+
+export const getFormatTypeFromUnitType = (type: UnitType) => {
+  switch (type) {
+    case UnitType.TABLE:
+    case UnitType.TABLE_API:
+    case UnitType.TABLE_DOC:
+    case UnitType.TABLE_CUSTOM:
+    case UnitType.TABLE_FEISHU:
+    case UnitType.TABLE_GOOGLE_DRIVE:
+      return FormatType.Table;
+    case UnitType.IMAGE:
+    case UnitType.IMAGE_FILE:
+      return FormatType.Image;
+    default:
+      return FormatType.Text;
+  }
+};

frontend/packages/data/common/utils/src/types.ts

@@ -0,0 +1,30 @@
+/*
+ * 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 enum FilterKnowledgeType {
+  ALL = 'ALL',
+  TEXT = 'TEXT',
+  TABLE = 'TABLE',
+  IMAGE = 'IMAGE',
+}
+
+export enum DocumentUpdateInterval {
+  NotUpdate = 0,
+  EveryDay = 1,
+  ThreeDay = 3,
+  SevenDay = 7,
+  ThirtyDay = 30,
+}

frontend/packages/data/common/utils/src/typing.d.ts

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+ 
+/// <reference types='@coze-arch/bot-typings' />
+/// <reference types='@coze-arch/bot-env/typings' />
+
+declare const IS_DEV_MODE: boolean;
+
+declare module '*.less' {
+  const resource: { [key: string]: string };
+  export = resource;
+}

frontend/packages/data/common/utils/src/update-interval.ts

@@ -0,0 +1,98 @@
+/*
+ * 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 { I18n } from '@coze-arch/i18n';
+import { FormatType } from '@coze-arch/bot-api/memory';
+import { type DocumentSource } from '@coze-arch/bot-api/knowledge';
+
+import { isFeishuOrLarkDocumentSource } from './feishu-lark';
+
+/**
+ * FIXME: 由于后端限制，前端需要在Feishu/Lark路径上去除30天的更新频率，等后续后端解决后即可去掉
+ */
+export const getUpdateIntervalOptions = (
+  params: {
+    documentSource?: DocumentSource;
+  } = {},
+) => {
+  const { documentSource } = params;
+  return [
+    {
+      value: 0,
+      label: I18n.t('datasets_frequencyModal_frequency_noUpdate'),
+    },
+    {
+      value: 1,
+      label: I18n.t('datasets_frequencyModal_frequency_day', {
+        num: 1,
+      }),
+    },
+    {
+      value: 3,
+      label: I18n.t('datasets_frequencyModal_frequency_day', {
+        num: 3,
+      }),
+    },
+    {
+      value: 7,
+      label: I18n.t('datasets_frequencyModal_frequency_day', {
+        num: 7,
+      }),
+    },
+    ...(isFeishuOrLarkDocumentSource(documentSource)
+      ? []
+      : [
+          {
+            value: 30,
+            label: I18n.t('datasets_frequencyModal_frequency_day', {
+              num: 30,
+            }),
+          },
+        ]),
+  ];
+};
+
+export const getAppendUpdateIntervalOptions = () => [
+  {
+    value: 0,
+    label: I18n.t('knowledge_weixin_015'),
+  },
+  {
+    value: 1,
+    label: I18n.t('knowledge_weixin_016'),
+  },
+  {
+    value: 3,
+    label: I18n.t('knowledge_weixin_017'),
+  },
+  {
+    value: 7,
+    label: I18n.t('knowledge_weixin_018'),
+  },
+];
+
+// table类型暂时禁用追加更新的更新类型，待后续支持后下掉区分逻辑
+export const getUpdateTypeOptions = (type: FormatType) => [
+  {
+    value: 1,
+    label: I18n.t('datasets_frequencyModal_whenUpdate_overwrite'),
+  },
+  {
+    value: 2,
+    disabled: type === FormatType.Table,
+    label: I18n.t('datasets_frequencyModal_whenUpdate_overwrite_keep'),
+  },
+];

frontend/packages/data/common/utils/src/url.ts

@@ -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.
+ */
+ 
+const DOMAIN_REGEXP = /^([0-9a-zA-Z-]{1,}\.)+([a-zA-Z]{2,})$/;
+
+export function isValidUrl(url: string): boolean {
+  try {
+    const urlObject = new URL(url);
+    return (
+      DOMAIN_REGEXP.test(urlObject.hostname) &&
+      // cp-disable-next-line
+      (url.indexOf('https://') !== -1 || url.indexOf('http://') !== -1)
+    );
+    // eslint-disable-next-line @coze-arch/use-error-in-catch -- 根据函数功能无需 throw error
+  } catch {
+    return false;
+  }
+}
+
+export function completeUrl(url: string): string {
+  let newUrl = url.trim();
+
+  if (!newUrl.includes('://')) {
+    // cp-disable-next-line
+    newUrl = `http://${newUrl}`;
+  }
+
+  return newUrl;
+}

frontend/packages/data/common/utils/stories/data-type-select.stories.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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 {
+  getDataTypeOptions,
+  DataTypeSelect,
+} from '../src/components/data-type-select';
+
+export default {
+  title: 'DataTypeSelect',
+  component: DataTypeSelect,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+};
+export const Base = {
+  args: {
+    value: getDataTypeOptions()[0]?.value,
+  },
+};

frontend/packages/data/common/utils/tsconfig.build.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "compilerOptions": {
+    "types": [],
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "dist/tsconfig.build.tsbuildinfo"
+  },
+  "include": ["src"],
+  "references": [
+    {
+      "path": "../../../arch/bot-api/tsconfig.build.json"
+    },
+    {
+      "path": "../../../arch/bot-error/tsconfig.build.json"
+    },
+    {
+      "path": "../../../arch/i18n/tsconfig.build.json"
+    },
+    {
+      "path": "../../../arch/report-events/tsconfig.build.json"
+    },
+    {
+      "path": "../../../components/bot-semi/tsconfig.build.json"
+    },
+    {
+      "path": "../../../../config/eslint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../../config/stylelint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../../config/ts-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../../config/vitest-config/tsconfig.build.json"
+    },
+    {
+      "path": "../e2e/tsconfig.build.json"
+    },
+    {
+      "path": "../../knowledge/knowledge-resource-processor-core/tsconfig.build.json"
+    }
+  ]
+}

frontend/packages/data/common/utils/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    },
+    {
+      "path": "./tsconfig.misc.json"
+    }
+  ],
+  "exclude": ["**/*"]
+}

frontend/packages/data/common/utils/tsconfig.misc.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "include": ["__tests__", "stories", "vitest.config.ts", "tailwind.config.ts"],
+  "exclude": ["./dist"],
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    }
+  ],
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "./dist",
+    "types": ["vitest/globals"]
+  }
+}

frontend/packages/data/common/utils/vitest.config.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.
+ */
+ 
+import { defineConfig } from '@coze-arch/vitest-config';
+
+export default defineConfig({
+  dirname: __dirname,
+  preset: 'web',
+});