lingji-work-fe/src/views/agent/chat/index.vue

<template>
  <div class="chat-wrap">
    <span @click="goChatIndex"> <icon-left /> 返回空间 </span>
    <div class="chat-contain">
      <!-- 使用 arco-design 栅格布局 -->
      <a-row :gutter="24" class="chat-grid">
        <!-- 左侧 HistoryChat -->
        <a-col     :xs="isCollapsed ? 0 : 24"
                   :sm="isCollapsed ? 0 : 12"
                   :md="isCollapsed ? 0 : 8"
                   :lg="isCollapsed ? 0 : 6"
                   :xl="isCollapsed ? 0 : 7"
                   :xxl="isCollapsed ? 0 : 4"
                   class="history-chat-col">
          <HistoryChat v-if="cozeInfo?.bot_id && !isCollapsed" :cozeInfo="cozeInfo" />
        </a-col>
        <!-- 右侧聊天内容 -->
        <a-col    :xs="24"
                  :sm="isCollapsed ? 24 : 12"
                  :md="isCollapsed ? 24 : 16"
                  :lg="isCollapsed ? 24 : 18"
                  :xl="isCollapsed ? 24 : 15" class="chat-content-col">
          <div class="toggle-btn" @click="toggleCollapse">
            <a-tooltip :content="isCollapsed ? '展开' : '折叠'">
              <img class="status-icon" :src="isCollapsed ? menuFold : menuUnfold" />
            </a-tooltip>
          </div>
          <a-card :bordered="false">

            <div id="coze-chat-container" style="width: 100%; margin-left: 100px"></div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getChatAgent } from '@/api/all/agent';
import HistoryChat from './components/HistoryChat.vue';
import { useRouter } from 'vue-router';
import menuFold from '@/assets/svg/menu-fold.svg';
import menuUnfold from '@/assets/svg/menu-unfold.svg';

const router = useRouter();

// 存储认证令牌
const authToken = ref('');
const isCollapsed = ref(false);

// 切换折叠状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

// 模拟从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 goChatIndex = async () => {
  router.push({
    path: '/agent/index',
  });
};

// 动态加载脚本函数
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.query.id;
const query = reactive({
  id: id,
});

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

let cozeWebSDK = null;
const initChat = async () => {
  const { code, data } = await getChatAgent(query.id);
  if (code != 200) {
    return false;
  }

  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 cozeConfig = await cozeWebSdkConfig(data.info.bot_id, data.info.name, data.info.auth, data.info.user_info);
  cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(cozeConfig);
  showChatPage();
};

const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
  auth.onRefreshToken = function () {
    return '';
  };
  let config = {
    config: {
      botId: botId,
    },
    ui: {
      chatBot: {
        el: document.getElementById('coze-chat-container'),
        width: '80%',
        height: '100%',
        title: name,
        isNeedFunctionCallMessage: true,
      },
      base: {
        icon: '',
        zIndex: 1000,
      },
      footer: {
        expressionText: '内容由AI生成，无法确保真实准确，仅供参考。',
      },
    },
    auth: auth,
    userInfo: userInfo,
    header: {
      isShow: true,
      isNeedClose: false,
    },
  };
  return config;
};

const showChatPage = () => {
  cozeWebSDK.showChatBot();
};

onMounted(() => {
  initChat();
});
onUnmounted(() => {
  cozeWebSDK.destroy();
});
</script>

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