feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/studio/open-platform/open-chat/.stylelintrc.js

@@ -0,0 +1,8 @@
+const { defineConfig } = require('@coze-arch/stylelint-config');
+
+module.exports = defineConfig({
+  extends: [],
+  rules: {
+    'order/properties-order': null,
+  },
+});

frontend/packages/studio/open-platform/open-chat/README.md

@@ -0,0 +1,69 @@
+# @coze-studio/open-chat
+
+Coze Web ChatApp SDK
+
+## Overview
+
+This package is part of the Coze Studio monorepo and provides chat & communication functionality. It includes component.
+
+## Getting Started
+
+### Installation
+
+Add this package to your `package.json`:
+
+```json
+{
+  "dependencies": {
+    "@coze-studio/open-chat": "workspace:*"
+  }
+}
+```
+
+Then run:
+
+```bash
+rush update
+```
+
+### Usage
+
+```typescript
+import { /* exported functions/components */ } from '@coze-studio/open-chat';
+
+// Example usage
+// TODO: Add specific usage examples
+```
+
+## Features
+
+- Component
+
+## API Reference
+
+### Exports
+
+- `BuilderChat,
+  ChatType,
+  RawMessageType,`
+- `Layout`
+
+
+For detailed API documentation, please refer to the TypeScript definitions.
+
+## Development
+
+This package is built with:
+
+- TypeScript
+- React
+- Vitest for testing
+- ESLint for code quality
+
+## Contributing
+
+This package is part of the Coze Studio monorepo. Please follow the monorepo contribution guidelines.
+
+## License
+
+Apache-2.0

frontend/packages/studio/open-platform/open-chat/__tests__/setup.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.
+ */
+ 
+vi.stubGlobal('IS_DEV_MODE', false);
+vi.stubGlobal('IS_BOE', false);
+vi.stubGlobal('IS_RELEASE_VERSION', true);
+vi.stubGlobal('REGION', 'cn');

frontend/packages/studio/open-platform/open-chat/config/rush-project.json

@@ -0,0 +1,12 @@
+{
+  "operationSettings": [
+    {
+      "operationName": "test:cov",
+      "outputFolderNames": ["coverage"]
+    },
+    {
+      "operationName": "ts-check",
+      "outputFolderNames": ["./dist"]
+    }
+  ]
+}

frontend/packages/studio/open-platform/open-chat/eslint.config.js

@@ -0,0 +1,15 @@
+const { defineConfig } = require('@coze-arch/eslint-config');
+
+module.exports = defineConfig({
+  packageRoot: __dirname,
+  preset: 'web',
+  rules: {
+    '@coze-arch/max-line-per-function': [
+      'error',
+      {
+        max: 300,
+      },
+    ],
+    'no-restricted-imports': 'off',
+  },
+});

frontend/packages/studio/open-platform/open-chat/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@coze-studio/open-chat",
+  "version": "0.0.1",
+  "description": "Coze Web ChatApp SDK ",
+  "license": "Apache-2.0",
+  "author": "gaoding.devingao@bytedance.com",
+  "maintainers": [
+    "gaoding.devingao@bytedance.com"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "main": "src/index.ts",
+  "types": "./src/index.ts",
+  "scripts": {
+    "build": "exit 0",
+    "lint": "eslint ./ --cache",
+    "test": "vitest --run --passWithNoTests",
+    "test:cov": "npm run test -- --coverage"
+  },
+  "dependencies": {
+    "@coze-arch/i18n": "workspace:*",
+    "@coze/chat-sdk": "0.1.11-beta.17",
+    "react": "~18.2.0"
+  },
+  "devDependencies": {
+    "@coze-arch/bot-env": "workspace:*",
+    "@coze-arch/bot-typings": "workspace:*",
+    "@coze-arch/eslint-config": "workspace:*",
+    "@coze-arch/pkg-root-webpack-plugin": "workspace:*",
+    "@coze-arch/postcss-config": "workspace:*",
+    "@coze-arch/stylelint-config": "workspace:*",
+    "@coze-arch/tailwind-config": "workspace:*",
+    "@coze-arch/ts-config": "workspace:*",
+    "@coze-arch/vitest-config": "workspace:*",
+    "@coze-studio/open-env-adapter": "workspace:*",
+    "@rspack/plugin-react-refresh": "0.6.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/lodash-es": "^4.17.10",
+    "@types/node": "^18",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "@vitest/coverage-v8": "~3.0.5",
+    "concurrently": "~8.2.2",
+    "css-loader": "^6.10.0",
+    "debug": "^4.3.4",
+    "style-loader": "^3.3.4",
+    "tailwindcss": "~3.3.3",
+    "ts-node": "^10.9.1",
+    "typescript": "~5.8.2",
+    "vitest": "~3.0.5",
+    "webpack": "~5.91.0"
+  },
+  "// deps": "debug@^4.3.4 为脚本自动补齐，请勿改动",
+  "botPublishConfig": {
+    "main": "dist/index.js"
+  }
+}
+

frontend/packages/studio/open-platform/open-chat/src/components/builder-chat/index.tsx

@@ -0,0 +1,170 @@
+/*
+ * 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 '@coze/chat-sdk/webCss';
+import { forwardRef, useMemo, type Ref, useImperativeHandle } from 'react';
+
+import {
+  openApiHostByRegionWithToken,
+  openApiCdnUrlByRegion,
+} from '@coze-studio/open-env-adapter';
+import { I18n } from '@coze-arch/i18n';
+import ChatSdk from '@coze/chat-sdk/webJs';
+import {
+  type RawMessage,
+  type IChatFlowProps,
+  type Language,
+} from '@coze/chat-sdk';
+
+import { type IBuilderChatProps, type BuilderChatRef } from '@/types';
+
+const {
+  ChatFlowFramework,
+  ChatSlot,
+  useSendMessage,
+  ChatType,
+  RawMessageType,
+} = ChatSdk;
+
+export { ChatType, RawMessageType };
+export const ChatContent = forwardRef(
+  (_props: {}, ref: Ref<BuilderChatRef>) => {
+    const { sendMessage } = useSendMessage();
+    useImperativeHandle(
+      ref,
+      () => ({
+        sendMessage: (message: RawMessage) => {
+          sendMessage(message);
+        },
+      }),
+      [sendMessage],
+    );
+    return <ChatSlot />;
+  },
+);
+
+export const BuilderChat = forwardRef(
+  (props: IBuilderChatProps, ref: Ref<BuilderChatRef>) => {
+    const { workflow } = props;
+    const eventCallbacks: IChatFlowProps['eventCallbacks'] = useMemo(
+      () => ({
+        onImageClick: props.eventCallbacks?.onImageClick,
+        onGetChatFlowExecuteId: props.eventCallbacks?.onGetChatFlowExecuteId,
+        onThemeChange: props.eventCallbacks?.onThemeChange,
+        onInitSuccess: props.eventCallbacks?.onInitSuccess,
+        message: {
+          afterMessageReceivedFinish:
+            props.eventCallbacks?.afterMessageReceivedFinish,
+        },
+      }),
+      [props.eventCallbacks],
+    );
+    const { userInfo } = props;
+    const { auth } = props;
+    const areaUi: IChatFlowProps['areaUi'] = useMemo(
+      // eslint-disable-next-line complexity
+      () => ({
+        layout: props.project?.layout,
+        isDisabled: props.areaUi?.isDisabled,
+        input: {
+          isNeed: props.areaUi?.input?.isShow,
+          isNeedAudio: props.areaUi?.input?.isNeedAudio ?? !IS_OVERSEA,
+          placholder: props.areaUi?.input?.placeholder,
+          isNeedTaskMessage: props.areaUi?.input?.isNeedTaskMessage,
+          defaultText: props.areaUi?.input?.defaultText,
+          renderChatInputTopSlot: props.areaUi?.input?.renderChatInputTopSlot,
+        },
+        clearContext:
+          props.project?.mode === 'websdk'
+            ? {
+                isNeed: true,
+                position: 'inputLeft',
+              }
+            : {
+                isNeed: false,
+              },
+        clearMessage:
+          props.project?.mode === 'websdk'
+            ? {
+                isNeed: true,
+                position: 'headerRight',
+              }
+            : {
+                isNeed:
+                  props.areaUi?.isNeedClearMessage !== undefined
+                    ? props.areaUi?.isNeedClearMessage
+                    : true,
+                position: 'inputLeft',
+              },
+        uploadBtn: {
+          isNeed: props.areaUi?.uploadable,
+        },
+        uiTheme: props.areaUi?.uiTheme,
+        renderLoading: props.areaUi?.renderLoading,
+        header: {
+          isNeed: props.areaUi?.header?.isShow || false,
+          icon: props.project?.iconUrl,
+          title: props.project?.name,
+          renderRightSlot: () => <>{props.areaUi?.header?.extra || null}</>,
+        },
+        footer: props.areaUi?.footer,
+      }),
+      [props.areaUi, props.project],
+    );
+    const setting: IChatFlowProps['setting'] = useMemo(
+      () => ({
+        apiBaseUrl: openApiHostByRegionWithToken,
+        cdnBaseUrlPath: openApiCdnUrlByRegion,
+        language: I18n.language as Language,
+        logLevel: IS_BOE ? 'debug' : 'release',
+        ...(props.setting || {}),
+      }),
+      [],
+    );
+    const project: IChatFlowProps['project'] = useMemo(
+      () => ({
+        id: props.project?.id || '',
+        type: props.project?.type,
+        mode: props.project?.mode as 'release',
+        caller: props.project?.caller,
+        defaultName: props.project?.defaultName,
+        defaultIconUrl: props.project?.defaultIconUrl,
+        connectorId: props.project?.connectorId,
+        conversationName: props.project?.conversationName,
+        name: props.project?.name,
+        iconUrl: props.project?.iconUrl,
+        OnBoarding: props.project?.onBoarding,
+      }),
+      [props.project],
+    );
+    return (
+      <>
+        <ChatFlowFramework
+          workflow={workflow}
+          project={project}
+          userInfo={userInfo}
+          eventCallbacks={eventCallbacks}
+          auth={auth}
+          style={props.style}
+          areaUi={areaUi}
+          setting={setting}
+        >
+          <ChatContent ref={ref} />
+        </ChatFlowFramework>
+      </>
+    );
+  },
+);

frontend/packages/studio/open-platform/open-chat/src/index.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 {
+  BuilderChat,
+  ChatType,
+  RawMessageType,
+} from './components/builder-chat';
+
+export { Layout } from './types';
+export type {
+  IWorkflow,
+  IProject,
+  IEventCallbacks,
+  IBuilderChatProps,
+  BuilderChatRef,
+  DebugProps,
+  HeaderConfig,
+} from './types';

frontend/packages/studio/open-platform/open-chat/src/types/base.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 { type ReactNode } from 'react';
+
+export enum Layout {
+  PC = 'pc',
+  MOBILE = 'mobile',
+}
+
+export interface HeaderConfig {
+  isShow?: boolean; //是否显示header， 默认是true
+  isNeedClose?: boolean; //是否需要关闭按钮， 默认是true
+  extra?: ReactNode | false; // 用于站位的，默认无
+}
+
+export interface DebugProps {
+  cozeApiRequestHeader?: Record<string, string>;
+}

frontend/packages/studio/open-platform/open-chat/src/types/builder-chat.ts

@@ -0,0 +1,103 @@
+/*
+ * 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 type React from 'react';
+
+import {
+  type ChatFrameworkProps,
+  type IMessageCallback,
+  type RawMessage,
+  type IChatFlowProps,
+  type FooterConfig,
+  type IOnImageClickEvent,
+} from '@coze/chat-sdk';
+
+import { type Layout, type DebugProps, type HeaderConfig } from './base';
+export interface IWorkflow {
+  id?: string;
+  parameters?: Record<string, unknown>;
+  header?: Record<string, string>;
+}
+export interface IProject {
+  id: string;
+  type: 'app' | 'bot';
+  mode: 'draft' | 'release' | 'websdk' | 'audit'; // 草稿模式 | 发布模式 | webSdk发布
+  caller?: 'UI_BUILDER' | 'CANVAS';
+  connectorId?: string;
+  conversationName?: string; // project的话，必须填写
+  conversationId?: string; // type 为bot的话，必须填写
+  sectionId?: string; // type 为bot的话，必须填写
+  name?: string;
+  defaultName?: string;
+  defaultIconUrl?: string;
+  iconUrl?: string;
+  layout?: Layout;
+  version?: string;
+  onBoarding?: {
+    prologue: string;
+    suggestions: string[];
+  };
+}
+export interface IEventCallbacks {
+  onMessageChanged?: () => void;
+  onMessageSended?: () => void;
+  onMessageReceivedStart?: () => void;
+  onMessageRecievedFinish?: () => void;
+  onImageClick?: IOnImageClickEvent;
+  onGetChatFlowExecuteId?: (id: string) => void;
+  onThemeChange?: (theme: 'bg-theme' | 'light') => void;
+  afterMessageReceivedFinish?: IMessageCallback['afterMessageReceivedFinish'];
+  onInitSuccess?: () => void;
+}
+export interface IBuilderChatProps {
+  workflow: IWorkflow;
+  project: IProject;
+  eventCallbacks?: IEventCallbacks;
+  userInfo: IChatFlowProps['userInfo'];
+  areaUi: {
+    isDisabled?: boolean; // 默认 false
+    uploadable?: boolean; // 默认 true
+    isNeedClearContext?: boolean; // 是否显示 clearContext按钮
+    isNeedClearMessage?: boolean; // 是否显示 clearMessage按钮
+
+    //isShowHeader?: boolean; // 默认 false
+    //isShowFooter?: boolean; // 默认 false
+    input?: {
+      placeholder?: string;
+      renderChatInputTopSlot?: (isChatError?: boolean) => React.ReactNode;
+      isShow?: boolean; //默认 true
+      defaultText?: string;
+      isNeedAudio?: boolean; // 是否需要语音输入，默认是false
+      isNeedTaskMessage?: boolean;
+    };
+    header?: HeaderConfig; // 默认是
+    footer?: FooterConfig;
+    uiTheme?: 'uiBuilder' | 'chatFlow'; // uiBuilder 的主题
+    renderLoading?: () => React.ReactNode;
+  };
+  auth?: {
+    type: 'external' | 'internal'; // 内部： cookie换token， 外部： internal
+    token?: string;
+    refreshToken?: () => Promise<string> | string;
+  };
+  style?: React.CSSProperties;
+  debug?: DebugProps;
+  setting?: Partial<ChatFrameworkProps['setting']>;
+}
+
+export interface BuilderChatRef {
+  sendMessage: (message: RawMessage) => void;
+}

frontend/packages/studio/open-platform/open-chat/src/types/index.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 { Layout, type HeaderConfig, type DebugProps } from './base';
+export type {
+  IWorkflow,
+  IProject,
+  IEventCallbacks,
+  IBuilderChatProps,
+  BuilderChatRef,
+} from './builder-chat';

frontend/packages/studio/open-platform/open-chat/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/studio/open-platform/open-chat/tsconfig.build.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "compilerOptions": {
+    "types": [],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "rootDir": "./src",
+    "preserveSymlinks": false,
+    "skipLibCheck": true,
+    "outDir": "./dist",
+    "tsBuildInfoFile": "dist/tsconfig.build.tsbuildinfo"
+  },
+  "include": ["src", "src/**/*.json"],
+  "exclude": ["./src/**/*.test.ts", "src/**/__tests__/**", "src/test/setup.ts"],
+  "references": [
+    {
+      "path": "../../../arch/bot-env/tsconfig.build.json"
+    },
+    {
+      "path": "../../../arch/bot-typings/tsconfig.build.json"
+    },
+    {
+      "path": "../../../arch/i18n/tsconfig.build.json"
+    },
+    {
+      "path": "../../../../config/eslint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../../config/postcss-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../../config/stylelint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../../config/tailwind-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../../config/ts-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../../config/vitest-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../../infra/plugins/pkg-root-webpack-plugin/tsconfig.build.json"
+    },
+    {
+      "path": "../open-env-adapter/tsconfig.build.json"
+    }
+  ]
+}

frontend/packages/studio/open-platform/open-chat/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    },
+    {
+      "path": "./tsconfig.misc.json"
+    }
+  ],
+  "exclude": ["**/*"]
+}

frontend/packages/studio/open-platform/open-chat/tsconfig.misc.json

@@ -0,0 +1,31 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "include": [
+    "stories",
+    "vitest.config.ts",
+    "tailwind.config.ts",
+    "rspack.config.ts",
+    "rspack-config/**/*.ts",
+    "./src/**/*.test.ts",
+    "**/__tests__",
+    "src/test/setup.ts"
+  ],
+  "exclude": ["node_modules", "./dist"],
+
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    }
+  ],
+  "compilerOptions": {
+    "rootDir": "./",
+    "types": ["vitest/globals", "node"],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "outDir": "./dist"
+  }
+}

frontend/packages/studio/open-platform/open-chat/vitest.config.ts

@@ -0,0 +1,25 @@
+/*
+ * 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 { defineConfig } from '@coze-arch/vitest-config';
+
+export default defineConfig({
+  dirname: __dirname,
+  preset: 'web',
+  test: {
+    setupFiles: ['__tests__/setup.ts'],
+  },
+});