feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/data/knowledge/common/components/src/doc-preview/preview-txt.tsx

@@ -0,0 +1,88 @@
+/*
+ * 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 { useEffect, useRef, useState } from 'react';
+
+import { Spin } from '@coze-arch/coze-design';
+interface IPreviewTxtProps {
+  fileUrl: string;
+}
+
+function wait(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+export const PreviewTxt = (props: IPreviewTxtProps) => {
+  const { fileUrl } = props;
+  const [txtContent, setTxtContent] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    fetch(fileUrl)
+      .then(res => res.text())
+      .then(text => {
+        setLoading(false);
+        setTxtContent(text);
+      });
+  }, [fileUrl]);
+
+  const ref = useRef<HTMLPreElement>(null);
+
+  useEffect(() => {
+    async function render() {
+      if (ref.current) {
+        for (
+          let i = 0, len = txtContent.length;
+          i < Math.ceil(len / 50_000);
+          i++
+        ) {
+          await wait(10);
+          if (ref.current) {
+            ref.current.textContent += txtContent.slice(
+              i * 50_000,
+              (i + 1) * 50_000,
+            );
+          }
+        }
+        if (ref.current) {
+          ref.current.textContent = txtContent;
+        }
+      }
+    }
+
+    render();
+  }, [txtContent]);
+
+  return (
+    <div className="flex flex-col items-center w-full h-full flex-1 py-2 px-4">
+      <Spin
+        wrapperClassName="w-full h-full grow"
+        spinning={loading}
+        childStyle={{
+          width: '100%',
+          height: '100%',
+          flexGrow: 1,
+        }}
+      >
+        <pre
+          className="max-w-full overflow-auto whitespace-pre-wrap break-all text-[14px] leading-[22px]"
+          ref={ref}
+        >
+          {/* {txtContent} */}
+        </pre>
+      </Spin>
+    </div>
+  );
+};