feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

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' />