feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/studio/components/src/avatar-background-notice-dot/index.module.less

@@ -0,0 +1,51 @@
+.ctn {
+  cursor: pointer;
+
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+
+  box-sizing: content-box;
+  width: 12px;
+  height: 12px;
+
+  font-size: 12px;
+
+  background-color: var(--coz-fg-white, #fff);
+  border: 1.5px solid var(--coz-fg-white, #fff);
+  border-radius: 50%;
+
+  &.loading {
+    width: 8px;
+    height: 8px;
+    padding: 2px;
+
+    font-size: 8px;
+
+    background-color: var(--coz-mg-hglt-plus-green, #00B83E);
+  }
+
+  .icon {
+    position: relative;
+    top: -1px;
+
+    &.icon-generating {
+      color: var(--coz-fg-white, #fff);
+    }
+
+    &.icon-success {
+      color: var(--coz-mg-color-plus-emerald, #00B83E);
+    }
+
+    &.icon-fail {
+      color: var(--coz-mg-color-plus-orange, #FF811A);
+    }
+  }
+
+  :global {
+    .icon-icon-coz_loading.icon-icon-loading {
+      animation: semi-animation-rotate .6s linear infinite;
+      animation-fill-mode: forwards;
+    }
+  }
+}

frontend/packages/studio/components/src/avatar-background-notice-dot/index.tsx

@@ -0,0 +1,73 @@
+/*
+ * 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 classNames from 'classnames';
+import { DotStatus } from '@coze-studio/bot-detail-store';
+import { I18n } from '@coze-arch/i18n';
+import {
+  IconCozCheckMarkCircleFillPalette,
+  IconCozLoading,
+  IconCozWarningCircleFillPalette,
+} from '@coze-arch/coze-design/icons';
+import { Tooltip } from '@coze-arch/coze-design';
+
+import s from './index.module.less';
+
+export interface AvatarBackgroundNoticeDotProps {
+  status: DotStatus;
+}
+
+export const AvatarBackgroundNoticeDot: React.FC<
+  AvatarBackgroundNoticeDotProps
+> = ({ status }) => {
+  if (status === DotStatus.None || status === DotStatus.Cancel) {
+    return null;
+  }
+  const dot = {
+    [DotStatus.Generating]: (
+      <Tooltip content={I18n.t('profilepicture_hover_generating')}>
+        <IconCozLoading
+          className={classNames(s.icon, s['icon-generating'])}
+          spin={true}
+        />
+      </Tooltip>
+    ),
+    [DotStatus.Success]: (
+      <Tooltip content={I18n.t('profilepicture_hover_generated')}>
+        <IconCozCheckMarkCircleFillPalette
+          className={classNames(s.icon, s['icon-success'])}
+        />
+      </Tooltip>
+    ),
+    [DotStatus.Fail]: (
+      <Tooltip content={I18n.t('profilepicture_hover_failed')}>
+        <IconCozWarningCircleFillPalette
+          className={classNames(s.icon, s['icon-fail'])}
+        />
+      </Tooltip>
+    ),
+  };
+  return (
+    <div
+      className={classNames(
+        s.ctn,
+        status === DotStatus.Generating ? s.loading : undefined,
+      )}
+    >
+      {dot[status]}
+    </div>
+  );
+};