lingji-work-fe/src/views/Agent/Chat/index.vue

<template>
  <div class="chat-wrap">
    <span class="span-back"> <icon-left /> 返回空间 </span>
    <div class="chat-contain">
      <a-layout>
        <HistoryChat :cozeInfo="cozeInfo" :botId="cozeWebSDKConfig?.config?.bot_id" />
        <a-layout>
          <a-layout-content style="padding: 24px; background: #fff; min-height: 280px">
            <a-card :bordered="false">
              <div id="coze-chat-container" style="width: 100%; margin-left: 100px"></div>
            </a-card>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getChatAgent } from '@/api/all/agent';
import HistoryChat from './components/HistoryChat.vue';
import ChatBox from './components/ChatBox.vue';
import { useRoute } from 'vue-router';
// 存储认证令牌
const authToken = ref('pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg');

// 模拟从API获取token
const fetchToken = async () => {
  // 实际开发中应替换为真实的 API 请求
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('pat_' + Math.random().toString(36).substring(2, 15));
    }, 500);
  });
};

// 刷新token
const refreshToken = async () => {
  authToken.value = await fetchToken();
};

// 动态加载脚本函数
const loadScript = (src) =>
  new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });

const route = useRoute();
const id = route.params.id;
const query = reactive({
  id: id,
});

const cozeWebSDKConfig = reactive({
  config: {},
  auth: {},
  userInfo: {},
  ui: {},
});

const cozeInfo = reactive({
  title: '',
  description: '',
  icon_url: '',
});

let cozeWebSDK = null;
const initChat = async () => {
  console.log(2323);
  const { code, data } = await getChatAgent(query.id);
  if (code != 200) {
    return false;
  }
  Object.assign(cozeWebSDKConfig, data.cozeConfig);
  Object.assign(cozeInfo, data.info);
  await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js');
  let config = data.cozeConfig;
  config.ui.chatBot.el = document.getElementById('coze-chat-container');
  config.ui.width = '900px';
  config.auth.onRefreshToken = function () {
    return 'pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg';
  };
  cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(config);
  showChatPage();
};

const showChatPage = () => {
  // 显示聊天页面
  console.log(cozeWebSDK, 'chatClient');
  cozeWebSDK.showChatBot();
};

onMounted(() => {
  initChat();
});
</script>

<style scoped lang="scss">
@import './style.scss';
</style>