feat: Support for Chat Flow & Agent Support for binding a single chat flow (#765)

Co-authored-by: Yu Yang <72337138+tomasyu985@users.noreply.github.com> Co-authored-by: zengxiaohui <csu.zengxiaohui@gmail.com> Co-authored-by: lijunwen.gigoo <lijunwen.gigoo@bytedance.com> Co-authored-by: lvxinyu.1117 <lvxinyu.1117@bytedance.com> Co-authored-by: liuyunchao.0510 <liuyunchao.0510@bytedance.com> Co-authored-by: haozhenfei <37089575+haozhenfei@users.noreply.github.com> Co-authored-by: July <jiangxujin@bytedance.com> Co-authored-by: tecvan-fe <fanwenjie.fe@bytedance.com>
2025-08-28 21:53:32 +08:00
parent bbc615a18e
commit d70101c979
503 changed files with 48036 additions and 3427 deletions
--- a/frontend/packages/studio/open-platform/chat-app-sdk/rspack-config/semi-css-var-postcss-plugin.ts
+++ b/frontend/packages/studio/open-platform/chat-app-sdk/rspack-config/semi-css-var-postcss-plugin.ts
@@ -0,0 +1,90 @@
+/*
+ * 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.
+ */
+
+/**
+ * PostCSS 插件：为 Semi 组件类名和 CSS 变量添加前缀
+ * 解决 coze-design 里 hardcode 的 .semi-xxx 类名与 prefixCls 不匹配导致样式失效问题
+ * 兼容多类名、嵌套、伪类、组合选择器等复杂情况
+ *
+ * 注意：本插件应在 coze-design 的样式被引入后生效，确保所有 .semi-xxx 都能被正确加前缀
+ *
+ * 已添加调试代码，可通过环境变量 DEBUG_SEMI_CSS_VAR_PLUGIN 控制输出
+ */
+
+import type { PluginCreator } from 'postcss';
+
+export const PREFIX_CLASS = 'coze-chat-sdk-semi';
+const CSS_VAR_PREFIX = `${PREFIX_CLASS}-`;
+const SEMI_CLASS_PREFIX = 'semi-';
+const CUSTOM_CLASS_PREFIX = `${PREFIX_CLASS}-`;
+
+// 处理选择器，将 .semi-xxx 替换为 .coze-chat-sdk-semi-xxx
+function processSelector(selector: string): string {
+  // 只处理 .semi-xxx（不管前面有无其它类名、伪类、组合等）
+  // 例如：.semi-button、.semi-button-primary:hover、.foo .semi-button.bar
+  // 注意：不要重复加前缀
+  // 兼容 :is(.semi-button), :not(.semi-button), .semi-button:hover, .semi-button.foo
+  // 兼容多个选择器用逗号分隔的情况
+  const replaced = selector.replace(
+    /\.semi-([a-zA-Z0-9_-]+)/g,
+    (match, className) => {
+      // 已经有前缀的不处理
+      if (match.includes(`.${CUSTOM_CLASS_PREFIX}`)) {
+        return match;
+      }
+      return `.${CUSTOM_CLASS_PREFIX}${className}`;
+    },
+  );
+  return replaced;
+}
+
+const semiCssVarPrefixPlugin: PluginCreator<void> = () => ({
+  postcssPlugin: 'semi-css-var-prefix',
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  Rule(rule) {
+    // 只要选择器里有 .semi-，就处理
+    if (rule.selector && rule.selector.includes(`.${SEMI_CLASS_PREFIX}`)) {
+      rule.selector = processSelector(rule.selector);
+    }
+  },
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  Declaration(decl) {
+    // 处理 CSS 变量定义
+    if (decl.prop && decl.prop.startsWith('--semi-')) {
+      decl.prop = decl.prop.replace(/^--semi-/, `--${CSS_VAR_PREFIX}`);
+    }
+
+    // 处理 CSS 变量引用
+    if (decl.value && decl.value.includes('var(--semi-')) {
+      decl.value = decl.value.replace(
+        /var\(--semi-([a-zA-Z0-9_-]+)\)/g,
+        `var(--${CSS_VAR_PREFIX}$1)`,
+      );
+    }
+
+    // 处理 rgba(var(--semi-xxx), ...)
+    if (decl.value && decl.value.includes('rgba(var(--semi-')) {
+      decl.value = decl.value.replace(
+        /rgba\(var\(--semi-([a-zA-Z0-9_-]+)\)/g,
+        `rgba(var(--${CSS_VAR_PREFIX}$1)`,
+      );
+    }
+  },
+});
+
+semiCssVarPrefixPlugin.postcss = true;
+
+export default semiCssVarPrefixPlugin;