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

<template>
  <div class="app-container">
    <!-- 聊天组件 -->
    <div id="coze-chat-container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getChatAgent } from '@/api/all/agent';

const cozeConfig = ref({
  botId: '7522056630889381923',
  title: 'AI客服',
});

// 存储认证令牌
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 query = reactive({
  id: 0,
});

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

const initChat = async () => {
  try {
    await getChat();
    await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js');
    const cozeWebSDK = new CozeWebSDK.WebChatClient({
      config: {
        bot_id: cozeConfig.value.botId,
      },
      componentProps: {
        container: document.getElementById('coze-chat-container'),
      },
      auth: {
        type: 'token',
        token: authToken.value,
        onRefreshToken: async () => {
          const newToken = await fetchToken();
          authToken.value = newToken;
          return newToken;
        },
      },
      ui: {
        base: {
          icon: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
          layout: 'pc',
          zIndex: 1000,
        },
        asstBtn: {
          isNeed: false,
        },
        footer: {
          isShow: true,
          expressionText: '内容由AI生成，无法确保真实准确，仅供参考。',
        },
        chatBot: {
          title: '智能体聊天室',
          uploadable: true,
          width: 800,
          el: document.getElementById('coze-chat-container'),
          onHide: () => {
            // todo...
          },
          onShow: () => {
            // todo...
          },
        },
        feedback: {
          isNeedFeedback: true,
          feedbackPanel: {
            title: '您对这个回答有什么看法？请告诉我们',
            placeholder: '请详细描述您的问题...',
            tags: [
              {
                label: '信息不正确',
              },
              {
                label: '涉及敏感信息',
                isNeedDetail: true,
              },
            ],
          },
        },
      },
      feedback: {
        isNeedFeedback: true,
        feedbackPanel: {
          title: '您对这个回答有什么看法？请告诉我们',
          placeholder: '请详细描述您的问题...',
          tags: [
            {
              label: '信息不正确',
            },
            {
              label: '涉及敏感信息',
              isNeedDetail: true,
            },
          ],
        },
      },
    });
  } catch (error) {
    console.error('加载 Coze SDK 失败:', error);
  }
  showChatPage();
};

const getChat = async () => {
  const { code, data } = await getChatAgent(query.id);
  if (code == 200) {
    console.log(data, 'data');
    Object.assign(cozeWebSDKConfig, data);
    console.log(data, 'data');
  } else {
    console.log('获取机器人配置失败');
  }
};

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

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

<style scoped>
.app-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.refresh-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background: #2ecc71;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.refresh-btn:hover {
  background: #27ae60;
}
</style>