feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/components/biz-tooltip-ui/src/components/setting-tips/case-block.tsx

@@ -0,0 +1,29 @@
+/*
+ * 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 React from 'react';
+
+import s from './index.module.less';
+
+export const CaseBlock: React.FC<{
+  label: string;
+  content: React.ReactNode;
+}> = ({ label, content }) => (
+  <div role="article" className="flex flex-col gap-[4px]">
+    <div className={s['case-block-label']}>{label}</div>
+    <div className="flex">{content}</div>
+  </div>
+);

frontend/packages/components/biz-tooltip-ui/src/components/setting-tips/index.module.less

@@ -0,0 +1,58 @@
+
+
+.tips-headline{
+  font-size: 14px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 20px; /* 142.857% */
+  color: var(--Fg-COZ-fg-primary, rgba(32, 41, 65, 89%));
+}
+
+.case-block-label{
+  font-size: 12px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 16px; /* 133.333% */
+  color: var(--Fg-COZ-fg-secondary, rgba(44, 58, 92, 72%));
+}
+
+.rewrite-block-content{
+  display: inline;
+  flex-direction: column;
+  align-items: flex-start;
+
+  padding: 12px 16px;
+
+  font-size: 12px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 16px; /* 133.333% */
+  color: var(--Fg-COZ-fg-primary, rgba(32, 41, 65, 89%));
+
+  background: var(--Mg-COZ-mg-hglt-hovered, rgba(155, 162, 255, 38%));
+  border-radius: var(--default, 8px);
+}
+
+
+.rerank-block-content{
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+  justify-content: center;
+
+  width: 288px;
+  padding: 12px 16px;
+
+  background: var(--Mg-COZ-mg-primary, rgba(97, 97, 196, 11%));
+  border-radius: var(--default, 8px);
+}
+
+.rerank-block-content-text{
+  height: 100%;
+
+  font-size: 12px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 16px; /* 133.333% */
+}

frontend/packages/components/biz-tooltip-ui/src/components/setting-tips/index.ts

@@ -0,0 +1,19 @@
+/*
+ * 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 { RewriteTips } from './rewrite-tips';
+import { RerankTips } from './rerank-tips';
+export { RewriteTips, RerankTips };

frontend/packages/components/biz-tooltip-ui/src/components/setting-tips/rerank-tips.tsx

@@ -0,0 +1,110 @@
+/*
+ * 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 React from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+
+import { CaseBlock } from './case-block';
+
+import s from './index.module.less';
+
+interface TipContentProps {
+  labelContentPairs: {
+    label: string;
+    content: string;
+  }[];
+}
+
+const TipContent: React.FC<TipContentProps> = ({ labelContentPairs }) => (
+  <div className={s['rerank-block-content']}>
+    {labelContentPairs.map(({ label, content }, index) => (
+      <div key={`${label}-${index}`} className="flex items-center">
+        <div
+          style={{
+            minWidth: '50px',
+            color: 'var(--Fg-COZ-fg-hglt, #543EF7)',
+          }}
+          className={s['rerank-block-content-text']}
+        >
+          {label}
+        </div>
+        <div
+          style={{
+            color: 'var(--Fg-COZ-fg-primary, rgba(32, 41, 65, 0.89))',
+          }}
+          className={s['rerank-block-content-text']}
+        >
+          {content}
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+export const RerankTips: React.FC = () => {
+  const labelContentPairs = [
+    {
+      label: I18n.t('kl_write_041', { index: 'A' }),
+      content: I18n.t('kl_write_042'),
+    },
+    {
+      label: I18n.t('kl_write_041', { index: 'B' }),
+      content: I18n.t('kl_write_043'),
+    },
+    {
+      label: I18n.t('kl_write_041', { index: 'C' }),
+      content: I18n.t('kl_write_044'),
+    },
+    {
+      label: I18n.t('kl_write_041', { index: 'D' }),
+      content: I18n.t('kl_write_045'),
+    },
+  ];
+
+  const secLabelContentPairs = [
+    {
+      label: I18n.t('kl_write_041', { index: 'C' }),
+      content: I18n.t('kl_write_044'),
+    },
+    {
+      label: I18n.t('kl_write_041', { index: 'D' }),
+      content: I18n.t('kl_write_045'),
+    },
+    {
+      label: I18n.t('kl_write_041', { index: 'B' }),
+      content: I18n.t('kl_write_043'),
+    },
+    {
+      label: I18n.t('kl_write_041', { index: 'A' }),
+      content: I18n.t('kl_write_042'),
+    },
+  ];
+
+  return (
+    <div className="flex flex-col gap-[8px]">
+      <div className={s['tips-headline']}>{I18n.t('kl_write_034')}</div>
+      <CaseBlock
+        label={I18n.t('kl_write_046')}
+        content={<TipContent labelContentPairs={labelContentPairs} />}
+      />
+      <CaseBlock
+        label={I18n.t('kl_write_047')}
+        content={<TipContent labelContentPairs={secLabelContentPairs} />}
+      />
+    </div>
+  );
+};

frontend/packages/components/biz-tooltip-ui/src/components/setting-tips/rewrite-tips.tsx

@@ -0,0 +1,57 @@
+/*
+ * 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 React, { type ReactNode } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+
+import { CaseBlock } from './case-block';
+
+import s from './index.module.less';
+
+const TipContent: React.FC<{ description: ReactNode }> = ({ description }) => (
+  <div className={s['rewrite-block-content']}>{description}</div>
+);
+
+export const RewriteTips: React.FC = () => {
+  const caseList = [
+    {
+      labelKey: 'kl_write_035',
+      contentKey: 'kl_write_036',
+    },
+    {
+      labelKey: 'kl_write_037',
+      contentKey: 'kl_write_038',
+    },
+    {
+      labelKey: 'kl_write_039',
+      contentKey: 'kl_write_040',
+    },
+  ] as const;
+
+  return (
+    <div className="flex flex-col gap-[8px]">
+      <div className={s['tips-headline']}>{I18n.t('kl_write_034')}</div>
+      {caseList.map(({ labelKey, contentKey }) => (
+        <CaseBlock
+          key={labelKey}
+          label={I18n.t(labelKey)}
+          content={<TipContent description={I18n.t(contentKey)} />}
+        />
+      ))}
+    </div>
+  );
+};

frontend/packages/components/biz-tooltip-ui/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 { RewriteTips, RerankTips } from './components/setting-tips';

frontend/packages/components/biz-tooltip-ui/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' />