feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/data/knowledge/knowledge-modal-base/src/utils/common.ts

@@ -0,0 +1,83 @@
+/*
+ * 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 { CustomError } from '@coze-arch/bot-error';
+import { Toast } from '@coze-arch/coze-design';
+
+export const getEllipsisCount = (num: number, max: number): string =>
+  num > max ? `${max}+` : `${num}`;
+
+export const formatBytes = (bytes: number, decimals = 2) => {
+  if (!bytes) {
+    return '0 Byte';
+  }
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  const digit = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+
+  return `${digit} ${sizes[i]}`;
+};
+
+export const getBase64 = (file: Blob): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const fileReader = new FileReader();
+    fileReader.onload = event => {
+      const result = event.target?.result;
+
+      if (!result || typeof result !== 'string') {
+        reject(new CustomError('getBase64', 'file read invalid'));
+        return;
+      }
+
+      resolve(result.replace(/^.*?,/, ''));
+    };
+    fileReader.onerror = () => {
+      Toast.error(I18n.t('read_file_failed_please_retry'));
+      reject(new CustomError('getBase64', 'file read fail'));
+    };
+    fileReader.onabort = () => {
+      reject(new CustomError('getBase64', 'file read abort'));
+    };
+    fileReader.readAsDataURL(file);
+  });
+
+export const getUint8Array = (file: Blob): Promise<Uint8Array> =>
+  new Promise((resolve, reject) => {
+    const fileReader = new FileReader();
+
+    fileReader.onload = event => {
+      if (event.target?.result) {
+        const arrayBuffer = event.target.result as ArrayBuffer;
+        const uint8Array = new Uint8Array(arrayBuffer);
+        resolve(uint8Array);
+      } else {
+        reject(new CustomError('getUint8Array', 'file read invalid'));
+      }
+    };
+
+    fileReader.readAsArrayBuffer(file);
+  });
+
+export const getFileExtension = (name: string) => {
+  const index = name.lastIndexOf('.');
+  return name.slice(index + 1);
+};

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

@@ -0,0 +1,32 @@
+/*
+ * 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 {
+  getEllipsisCount,
+  formatBytes,
+  getBase64,
+  getFileExtension,
+  getUint8Array,
+} from './common';
+
+export {
+  transSliceContentOutput,
+  transSliceContentInput,
+  transSliceContentInputWithSave,
+  isValidSize,
+  imageOnLoad,
+  imageOnError,
+} from './slice';

frontend/packages/data/knowledge/knowledge-modal-base/src/utils/slice.ts

@@ -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 ImageFail from '../assets/image-fail.png';
+
+export const transSliceContentOutput = (
+  content: string,
+  ignoreImg = false,
+): string => {
+  /**
+   * 1. 处理img标签
+   * 2. 删除多余的div/span/br标签
+   */
+  const imgPattern = /<img.*?(?:>|\/>)/gi;
+  const divSPattern = /<div[^>]*>/g;
+  const divEPattern = /<\/div>/g;
+  const spanSPattern = /<span[^>]*>/g;
+  const spanEPattern = /<\/span>/g;
+  let newContent = content
+    .replace(divSPattern, '\n')
+    .replace(divEPattern, '')
+    .replace(spanSPattern, '')
+    .replace(spanEPattern, '')
+    .replace(/<br>/g, '\n');
+  if (!ignoreImg) {
+    newContent = newContent.replaceAll(imgPattern, v => {
+      const toeKeyPattern = /data-tos-key=[\'\"]?([^\'\"]*)[\'\"]?/i;
+      const srcPattern = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
+      const tosKeyMatches = v.match(toeKeyPattern);
+      const srcMatches = v.match(srcPattern);
+      if (tosKeyMatches?.[1]) {
+        return `<img src="" data-tos-key="${tosKeyMatches?.[1]}" >`;
+      }
+      return `<img src="${srcMatches?.[1] || ''}" >`;
+    });
+  }
+  return newContent;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-magic-numbers
+const LIMIT_SIZE = 20 * 1024 * 1024;
+export const isValidSize = (size: number) => LIMIT_SIZE > size;
+
+export const transSliceContentInput = (content: string): string => {
+  const newContent = content.replaceAll('\n', '<br>');
+  return newContent;
+};
+
+export const transSliceContentInputWithSave = (content: string) => {
+  // 将 <br> 替换成 \n
+  const contentWithNewLine = content.replace(/<br>/g, '\n');
+
+  // 将 <span> 替换为空
+  const finalContent = contentWithNewLine
+    .replace(/<span>/g, '')
+    .replace(/<\/span>/g, '');
+  return finalContent;
+};
+
+export const imageOnLoad = (e: Event) => {
+  if (e.target) {
+    (e.target as HTMLImageElement).style.width = 'auto';
+    (e.target as HTMLImageElement).style.height = 'auto';
+    (e.target as HTMLImageElement).style.background = 'transparent';
+  }
+};
+
+export const imageOnError = (e: Event) => {
+  if (e.target) {
+    (e.target as HTMLImageElement).src = ImageFail;
+  }
+};