feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/foundation/browser-upgrade-banner/src/components/browser-upgrade-wrap/index.module.less

@@ -0,0 +1,81 @@
+.flex-helper {
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
+  display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
+  display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
+  display: -moz-box;      /* 老版本语法: Firefox (buggy) */
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -ms-flexbox;   /* 混合版本语法: IE 10 */
+}
+
+.flex-1-helper {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-flex: 1;        /* Chrome */
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -ms-flex: 1;             /* IE 10 */
+  flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
+
+  -webkit-box-flex: 1;     /* OLD - iOS 6-, Safari 3.1-6 */
+  -moz-box-flex: 1;       /* OLD - Firefox 19- */
+}
+
+.flex-direction-row-helper {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-flex-direction: row;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -ms-flex-direction: row;
+  flex-direction: row;
+
+  -webkit-box-direction: normal;
+  -moz-box-direction: normal;
+  -webkit-box-orient: horizontal;
+  -moz-box-orient: horizontal;
+}
+
+.flex-items-center {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-align-items: center; /* Chrome 21+, Safari 6.1+, Opera 15+ */
+  align-items: center;         /* 新语法 */
+
+  -ms-flex-align: center;      /* IE 10 */
+}
+
+.flex-justify-center {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-justify-content: center; /* Chrome 21+, Safari 6.1+ */
+  justify-content: center;   /* 新版浏览器 */
+
+  -webkit-box-pack: center;  /* iOS 6-, Safari 3.1-6 */
+  -moz-box-pack: center;     /* 早期版本的 Firefox */
+  -ms-flex-pack: center;     /* IE 10 */
+}
+
+.banner-wrapper {
+  width: 100%;
+  min-height: 48px;
+  padding: 0 64px;
+  background: #E5B65C;
+}
+
+.banner-item {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: #FFF;
+  text-align: center;
+}
+
+.banner-upgrade-button {
+  cursor: pointer;
+
+  margin-left: 6px;
+
+  font-weight: bold;
+  text-decoration-line: underline;
+  text-underline-offset: 4px;
+}
+
+.close {
+  cursor: pointer;
+  color: #FFF;
+}

frontend/packages/foundation/browser-upgrade-banner/src/components/browser-upgrade-wrap/index.tsx

@@ -0,0 +1,137 @@
+/*
+ * 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,
+  type FC,
+  type PropsWithChildren,
+} from 'react';
+
+import classNames from 'classnames';
+import { reporter } from '@coze-arch/logger';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozCross } from '@coze-arch/coze-design/icons';
+
+import { testLowVersionBrowse } from '../../utils';
+import { EventNames } from '../../constants';
+
+import styles from './index.module.less';
+
+type IProps = Record<string, unknown>;
+
+interface BannerInfo {
+  url: string;
+  visible: boolean;
+}
+
+export const BrowserUpgradeWrap: FC<PropsWithChildren<IProps>> = props => {
+  const { children } = props;
+
+  const [bannerInfo, setBannerInfo] = useState<BannerInfo>({
+    url: '',
+    visible: false,
+  });
+  const [bannerHeight, setBannerHeight] = useState(0);
+
+  const bannerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const result = testLowVersionBrowse();
+
+    if (!result) {
+      return;
+    }
+
+    const { downloadUrl } = result;
+
+    reporter.event({
+      eventName: EventNames.BrowserUpgradeTipsVisible,
+    });
+
+    setBannerInfo({ url: downloadUrl, visible: !!downloadUrl });
+  }, []);
+
+  useEffect(() => {
+    if (!bannerRef.current) {
+      setBannerHeight(0);
+      return;
+    }
+
+    setBannerHeight(bannerRef.current.getBoundingClientRect().height ?? 0);
+  }, [bannerInfo]);
+
+  const handleClick = () => {
+    if (!bannerInfo.url) {
+      return;
+    }
+
+    reporter.event({
+      eventName: EventNames.BrowserUpgradeClick,
+    });
+
+    window.open(bannerInfo.url);
+  };
+
+  const handleBannerClose = () => {
+    setBannerInfo(prevState => ({ ...prevState, visible: false }));
+  };
+
+  return (
+    <>
+      {bannerInfo.visible ? (
+        <div
+          className={classNames(
+            styles['banner-wrapper'],
+            styles['flex-helper'],
+            styles['flex-direction-row-helper'],
+            styles['flex-items-center'],
+          )}
+          ref={bannerRef}
+        >
+          <div
+            className={classNames(
+              styles['banner-item'],
+              styles['flex-1-helper'],
+              styles['flex-items-center'],
+              styles['flex-justify-center'],
+            )}
+          >
+            <span>{I18n.t('browser_upgrade')}: </span>
+            <span
+              className={styles['banner-upgrade-button']}
+              onClick={handleClick}
+            >
+              {I18n.t('browser_upgrade_button')}
+            </span>
+          </div>
+          <div onClick={handleBannerClose}>
+            <IconCozCross className={styles.close} />
+          </div>
+        </div>
+      ) : null}
+      <div
+        style={{
+          height: `calc(100% - ${bannerHeight}px)`,
+          position: 'relative',
+        }}
+      >
+        {children}
+      </div>
+    </>
+  );
+};

frontend/packages/foundation/browser-upgrade-banner/src/constants/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 const enum EventNames {
+  BrowserUpgradeTipsVisible = 'browserUpgradeTipsVisible',
+  BrowserUpgradeClick = 'browserUpgradeClick',
+}

frontend/packages/foundation/browser-upgrade-banner/src/index.tsx

@@ -0,0 +1,17 @@
+/*
+ * 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 { BrowserUpgradeWrap } from './components/browser-upgrade-wrap';

frontend/packages/foundation/browser-upgrade-banner/src/typings.d.ts

@@ -0,0 +1,17 @@
+/*
+ * 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' />

frontend/packages/foundation/browser-upgrade-banner/src/utils/compare-version.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.
+ */
+ 
+export function compareVersion(version1: string, version2: string): number {
+  // 将版本号字符串分割成数字数组，这里使用map(Number)确保转换为数字类型
+  const parts1 = version1.split('.').map(Number);
+  const parts2 = version2.split('.').map(Number);
+
+  // 计算出最长的版本号长度
+  const maxLength = Math.max(parts1.length, parts2.length);
+
+  // 逐个比较版本号中的每个部分
+  for (let i = 0; i < maxLength; i++) {
+    // 如果某个版本号在这个位置没有对应的数字，则视为0
+    const part1 = i < parts1.length ? parts1[i] : 0;
+    const part2 = i < parts2.length ? parts2[i] : 0;
+
+    // 比较两个版本号的当前部分
+    if (part1 > part2) {
+      return 1;
+    }
+    if (part1 < part2) {
+      return -1;
+    }
+  }
+
+  // 如果所有部分都相等，则版本号相等
+  return 0;
+}

frontend/packages/foundation/browser-upgrade-banner/src/utils/index.ts

@@ -0,0 +1,105 @@
+/*
+ * 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 { detect, type Browser } from 'detect-browser';
+
+import { compareVersion } from './compare-version';
+
+type VersionConfig = {
+  [K in Browser]?: string;
+};
+
+type DownloadConfig = {
+  [K in Browser]?: string;
+};
+
+const PC_VERSION_CONFIG: VersionConfig = {
+  ['chrome']: '87.0.0',
+  ['edge-chromium']: '100.0.0',
+  ['edge']: '100.0.0',
+  ['safari']: '14.0.0',
+  ['firefox']: '79.0.0',
+  ['ie']: '999999.0.0',
+};
+
+// cp-disable-next-line
+const CN_CHROME_URL = 'https://www.google.cn/chrome/';
+// cp-disable-next-line
+const INTERNATIONAL_CHROME_URL = 'https://www.google.com/chrome/';
+
+// cp-disable-next-line
+const CN_EDGE_URL = 'https://www.microsoft.com/zh-cn/edge';
+// cp-disable-next-line
+const INTERNATIONAL_EDGE_URL = 'https://www.microsoft.com/edge';
+
+const CN_BROWSER_DOWNLOAD_CONFIG: DownloadConfig = {
+  ['chrome']: CN_CHROME_URL,
+  ['edge-chromium']: CN_EDGE_URL,
+  ['edge']: CN_EDGE_URL,
+  // cp-disable-next-line
+  ['safari']: 'https://apps.apple.com/cn/app/safari/id1146562112',
+  // cp-disable-next-line
+  ['firefox']: 'https://www.mozilla.org/zh-CN/firefox/new/',
+  ['ie']: CN_CHROME_URL,
+};
+
+const INTERNATIONAL_BROWSER_DOWNLOAD_CONFIG: DownloadConfig = {
+  ['chrome']: INTERNATIONAL_CHROME_URL,
+  ['edge-chromium']: INTERNATIONAL_EDGE_URL,
+  ['edge']: INTERNATIONAL_EDGE_URL,
+  // cp-disable-next-line
+  ['safari']: 'https://apps.apple.com/app/safari/id1146562112',
+  // cp-disable-next-line
+  ['firefox']: 'https://www.mozilla.org/firefox/new/',
+  ['ie']: INTERNATIONAL_CHROME_URL,
+};
+
+/**
+ * 目前看起来 移动端 / PC 版本一致无需区分，后期如果区分，在这里通过条件区分
+ */
+export const testLowVersionBrowse = () => testPCVersion();
+
+const testPCVersion = () => {
+  const browserInfo = detect(navigator.userAgent);
+
+  if (!browserInfo) {
+    return null;
+  }
+
+  const { name, version } = browserInfo;
+
+  // 显示的判断，用 includes 类型推断不正确
+  if (name === 'bot' || name === 'react-native' || name === 'node') {
+    return null;
+  }
+
+  const configVersion = PC_VERSION_CONFIG[name];
+
+  if (!configVersion) {
+    return null;
+  }
+
+  if (compareVersion(version, configVersion) >= 0) {
+    return null;
+  }
+
+  return {
+    downloadUrl: IS_OVERSEA
+      ? (INTERNATIONAL_BROWSER_DOWNLOAD_CONFIG[name] ??
+        INTERNATIONAL_CHROME_URL)
+      : (CN_BROWSER_DOWNLOAD_CONFIG[name] ?? CN_CHROME_URL),
+  };
+};

frontend/packages/foundation/browser-upgrade-banner/src/utils/is-mobile.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 const isMobileFromUA = () => {
+  const { userAgent } = navigator;
+  // 检查是否为移动设备
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    userAgent,
+  );
+};