微搭平台动态加载Coze Chat SDK并初始化聊天客户端(支持悬浮按钮、图标配置和窗口控制)

293 阅读1分钟
export default function({ event, data }) {
  const CONFIG = {
    SDK_URL: 'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js',
    APP_ID: '填入智能体id',
    WORKFLOW_ID: '填入工作流id',
    TOKEN: '密钥令牌',
    ICONS: {
      APP: '图片',
      FLOAT_BTN: '图片',
      USER_AVATAR: '图片'
    },
    WINDOW: {
      TITLE: '标题',
      WIDTH: 420,
      HEIGHT: 600,
      MIN_WIDTH: 320,
      MAX_WIDTH: '90vw'
    }
  };

  // 防止重复初始化
  if (window.cozeChatClient) {
    window.cozeChatClient.showChatBot();
    return;
  }

  const loadSdk = () => {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = CONFIG.SDK_URL;
      script.onload = () => resolve(void 0);
      script.onerror = reject;
      document.head.appendChild(script);
    });
  };

  const initChatClient = async () => {
    try {
      if (!window.CozeWebSDK) {
        await loadSdk();
      }
      
      const chatClient = new CozeWebSDK.WebChatClient({
        config: {
          type: 'app',
          appInfo: {
            appId: CONFIG.APP_ID,
            workflowId: CONFIG.WORKFLOW_ID
          }
        },
        auth: {
          type: 'token',
          token: CONFIG.TOKEN,
          onRefreshToken: () => CONFIG.TOKEN
        },
        userInfo: {
          id: 'user_' + Date.now(),
          url: CONFIG.ICONS.USER_AVATAR,
          nickname: '访客用户'
        },
        ui: {
          base: {
            icon: CONFIG.ICONS.APP,
            layout: 'auto',
            lang: 'zh-CN',
            zIndex: 1000
          },
          header: {
            isShow: true,
            isNeedClose: true
          },
          chatBot: {
            title: CONFIG.WINDOW.TITLE,
            width: CONFIG.WINDOW.WIDTH,
            height: CONFIG.WINDOW.HEIGHT,
            minWidth: CONFIG.WINDOW.MIN_WIDTH,
            maxWidth: CONFIG.WINDOW.MAX_WIDTH,
            uploadable: true,
            resizable: true
          },
          asstBtn: {
            isNeed: true,
            icon: CONFIG.ICONS.FLOAT_BTN,
            width: 60,
            height: 60
          },
          footer: {
            isShow: true,
            expressionText: 'Powered by Coze'
          },
          // 关键配置:语音输入
          voiceInput: {
            isNeed: true,                // 启用语音输入
            isAutoRecognize: true,       // 自动开始识别
            lang: 'zh-CN',               // 语音识别语言
            isShowAudioWave: true,       // 显示音频波形
            voiceInputBtn: {
              isNeed: true,              // 显示语音输入按钮
              icon: '' // 麦克风图标
            }
          }
        }
      });

      window.cozeChatClient = chatClient;
      chatClient.showChatBot();
      console.log('Coze聊天窗口初始化成功(支持语音输入)');
    } catch (error) {
      console.error('Coze聊天窗口初始化失败:', error);
    }
  };

  initChatClient();
}