refactor(Agent/Chat): 使用 cozeInfo 替代 botId 获取聊天记录

- 移除了 HistoryChat 组件中的 botId属性
- 使用 cozeInfo.bot_id 替代 botId 获取历史聊天数据

src/views/agent/AgentConstants.ts

@@ -0,0 +1,4 @@
+export enum AGENT_TYPE {
+  AGENT = 1, // 智能体
+  WORKFLLOW = 2, // 工作流
+}

src/views/agent/chat/components/HistoryChat.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <div class="logo">
+      <img :src="cozeInfo?.icon_url" class="agent-img" />
+    </div>
+
+    <a-menu mode="inline" theme="light">
+      <a-menu-item key="1">
+        <span class="menu-title">{{ cozeInfo.name }}</span>
+        <span style="color: #8492ff; font-size: 12px">{{ cozeInfo.type == 1 ? '智能体' : '对话式' }}</span>
+        <span style="float: right">{{ cozeInfo.views }}次使用</span>
+        <p>{{ cozeInfo.description }}</p>
+      </a-menu-item>
+
+      <div v-for="(item, index) in conversations" :key="index">
+        <a-dropdown-button>
+          <span> {{ item.content }} </span>
+          <template #content>
+            <a-doption>重命名</a-doption>
+            <a-popconfirm
+              content="确认删除对话吗？删除后，聊天记录将不可恢复。"
+              @ok="delMessage(item.chat_id, item.conversation_id)"
+              type="error"
+            >
+              <a-button>删除</a-button>
+            </a-popconfirm>
+          </template>
+        </a-dropdown-button>
+      </div>
+    </a-menu>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from 'vue';
+import { delAgentMessage, getHistoryChat } from '@/api/all/agent';
+
+const props = defineProps({
+  cozeInfo: {
+    type: Object as () => any,
+    default: () => ({}),
+  }
+});
+
+const delMessage = async (chatId, conversationId) => {
+  const { code, data } = await delAgentMessage({ chat_id: chatId, conversation_id: conversationId });
+  if (code === 200) {
+    console.log(data, 'data');
+  }
+};
+
+const conversations = ref([]);
+
+const getHistoryChatData = async (botId) => {
+  const { code, data } = await getHistoryChat({ bot_id: botId });
+  if (code === 200) {
+    conversations.value = data.list;
+  }
+};
+const truncateText = (text: string, maxLength = 30) => {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength) + '...';
+};
+
+onMounted(() => {
+  getHistoryChatData(props.cozeInfo.bot_id);
+});
+</script>
+
+<style scoped>
+.logo {
+  margin-bottom: 20px;
+}
+
+.menu-title {
+  color: var(--Text-1, #211f24);
+  font-size: 18px;
+  font-family: Alibaba PuHuiTi;
+  font-weight: 400;
+  line-height: 26px;
+  word-wrap: break-word;
+}
+.agent-img {
+  width: 100%;
+  height: 230px;
+  border-radius: 4px;
+}
+
+</style>

src/views/agent/chat/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="chat-wrap">
+    <span class="" @click="goChatIndex"> <icon-left /> 返回空间 </span>
+    <div class="chat-contain">
+      <a-layout>
+        <a-layout-sider width="15%" style="background: #fff">
+          <HistoryChat v-if="cozeInfo?.bot_id" :cozeInfo="cozeInfo" />
+        </a-layout-sider>
+        <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 { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+// 存储认证令牌
+const authToken = ref('');
+
+// 模拟从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);
+  cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(cozeConfig);
+  showChatPage();
+};
+
+const cozeWebSdkConfig = (botId, name, auth) => {
+  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,
+      },
+      footer:{
+        expressionText:"内容由AI生成，无法确保真实准确，仅供参考。",
+      },
+    },
+    auth: auth,
+    base: {
+      icon: '',
+      zIndex: 1000,
+    },
+    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>

src/views/agent/chat/style.scss

@@ -0,0 +1,27 @@
+.chat-wrap {
+  .chat-contain {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: #2c3e50;
+    margin-top: 24px;
+
+    .span-back {
+      color: var(--Text-2, #3C4043);
+      font-size: 14px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      line-height: 62px;
+      word-wrap: break-word
+    }
+  }
+
+  .span-back {
+    color: var(--Text-2, #3C4043);
+    font-size: 14px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    line-height: 22px;
+    word-wrap: break-word
+  }
+}

src/views/agent/index/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="agent-wrap">
+    <a-input
+      style="float: right; width: 300px"
+      v-model="query.name"
+      @blur="getData()"
+      placeholder="搜索智能体"
+      size="medium"
+      allow-clear
+    >
+      <template #prefix>
+        <icon-search />
+      </template>
+    </a-input>
+    <div v-for="(item, index) in list" :key="index">
+      <span class="span-title">{{ item.name }}</span>
+      <a-row class="grid-demo" :gutter="24" v-if="item.agent_products.length > 0">
+        <a-col :span="3" v-for="(product, k) in item.agent_products">
+          <div class="card-container" @click="goDetail(product?.type, product?.id)">
+            <div class="card-image-container">
+              <img class="card-image" :src="product?.icon_url" />
+            </div>
+            <div class="card-content">
+              <div class="card-title">{{ product?.name }}</div>
+              <div class="card-description">{{ product?.description }}</div>
+            </div>
+            <div class="card-footer">
+              <div :class="['tag', { red: product?.type === 1, blue: product?.type === 2 }]">
+                <div :class="['tag-text', { red: product?.type === 1, blue: product?.type === 2 }]">
+                  {{ product?.type == 1 ? '对话式' : '工作流' }}
+                </div>
+              </div>
+              <div class="usage-info">
+                <span class="usage-count">{{ product?.views }}</span>
+                <span class="usage-label">次使用</span>
+              </div>
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+
+      <NoData v-else />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import { getAgentList } from '@/api/all/agent';
+
+const router = useRouter();
+
+const list = ref([]);
+const getData = async () => {
+  const { code, data } = await getAgentList(query);
+  list.value = data;
+};
+
+const query = reactive({
+  name: '',
+});
+const goDetail = (type: number, id: number) => {
+  if (type === 1) {
+    router.push({
+      path: '/agent/chat',
+      query: { id: id },
+    });
+  } else if (type === 2) {
+    router.push({
+      path: '/agent/workFlow',
+      query: { id: id },
+    });
+  }
+};
+
+onMounted(() => {
+  getData();
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

src/views/agent/index/style.scss

@@ -0,0 +1,169 @@
+.agent-wrap {
+  padding: 24px;
+  border-radius: 4px;
+
+  .ant-card-cover img {
+    height: 150px;
+    object-fit: cover;
+  }
+
+  .span-title {
+    color: var(--Text-2, #3C4043);
+    font-size: 16px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    line-height: 44px;
+    word-wrap: break-word;
+    padding-bottom: 20px;
+  }
+
+  .card-container {
+    width: 100%;
+    height: 100%;
+    padding: 12px;
+    background: var(--BG-White, white);
+    overflow: hidden;
+    border-radius: 8px;
+    outline: 1px solid var(--BG-300, #e6e6e8);
+    outline-offset: -1px;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .card-image-container {
+    position: relative;
+    align-self: stretch;
+    height: 120px;
+    background: #ffe9e7; /* 可以替换成变量 */
+    overflow: hidden;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+
+  .card-image {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: -3px;
+    position: absolute;
+  }
+
+  .card-content {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .card-title {
+    color: var(--Text-1, #211f24);
+    font-size: 16px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    line-height: 24px;
+    word-wrap: break-word;
+  }
+
+  .card-description {
+    color: var(--Text-3, #737478);
+    font-size: 14px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    line-height: 22px;
+    word-wrap: break-word;
+  }
+
+  .card-footer {
+    align-self: stretch;
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .tag {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    height: 20px;
+    padding: 0 8px;
+    border-radius: 2px;
+
+    &.red {
+      color: var(--Functional-Red-6, #f64b31);
+    }
+
+    &.blue {
+      color: var(--Functional-Blue-6, #3366ff);
+    }
+
+  }
+
+  .tag-icon {
+    width: 12px;
+    height: 12px;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 11.5px;
+      height: 10.75px;
+      left: 0.25px;
+      top: 0.63px;
+      background: var(--Functional-Red-6, #f64b31);
+    }
+  }
+
+  .tag-text {
+    font-size: 12px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    line-height: 20px;
+    word-wrap: break-word;
+
+    &.red {
+      color: var(--Functional-Red-6, #f64b31);
+    }
+
+    &.blue {
+      color: var(--Functional-Blue-6, #3366ff);
+    }
+  }
+
+  .usage-info {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    color: var(--Text-3, #737478);
+    font-size: 12px;
+    font-family: HarmonyOS Sans SC, Alibaba PuHuiTi;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+
+  :deep(.arco-input-wrapper) {
+    border-radius: 4px;
+    border-color: #d7d7d9;
+    background-color: #fff;
+    height: 35px;
+    width: 400px;
+
+    &:focus-within,
+    &.arco-input-focus {
+      background-color: var(--color-bg-2);
+      border-color: rgb(var(--primary-6));
+      box-shadow: 0 0 0 0 var(--color-primary-light-2);
+    }
+
+    &.arco-textarea-wrapper {
+      height: 60px;
+    }
+  }
+
+}

src/views/agent/work-flow/components/DynamicForm.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="form-container">
+    <a-form :model="formData" ref="formRef" layout="vertical">
+      <a-form-item
+        v-for="(field, index) in formFields"
+        :key="index"
+        :label="field.props.label"
+        :field="field.props.name"
+        :rules="field.props.rules"
+      >
+        <a-input
+          allowClear
+          v-if="field.type === 'input'"
+          v-model="formData[field.props.name]"
+          :placeholder="field?.props?.placeholder"
+        />
+        <a-textarea
+          v-if="field.type === 'textarea'"
+          style="width: 500px; height: 200px;"
+          v-model="formData[field.props.name]"
+          :placeholder="field?.props?.placeholder"
+        />
+        <ImageUpload v-if="field.type == 'upload_image'" v-model="formData[field.props.name]" :limit="field.props.limit"></ImageUpload>
+        <FileUpload v-if="field.type == 'upload_file'" v-model="formData[field.props.name]" :limit="field.props.limit"></FileUpload>
+        <a-select
+          v-else-if="field.type === 'select'"
+          v-model="formData[field.props.name]"
+          :placeholder="field.placeholder"
+        >
+          <a-option v-for="(option, optIndex) in field.props.options" :key="optIndex" :value="option.value">
+            {{ option.label }}
+          </a-option>
+        </a-select>
+      </a-form-item>
+    </a-form>
+    <a-button type="primary" :disabled="loading" @click="handleSubmit">提交执行</a-button>
+  </div>
+</template>
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import ImageUpload from '@/components/upload/ImageUpload.vue';
+import FileUpload from '@/components/upload/FileUpload.vue';
+
+const props = defineProps({
+  formFields: {
+    type: Array,
+    required: true,
+  },
+  formData: {
+    type: Object,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(['submit']);
+const formRef = ref(null);
+const handleSubmit = async () => {
+  const errors = await formRef.value.validate();
+  if (errors) return;
+  console.log(props.formFields, 'props.formFields');
+  emit('submit', props.formData);
+};
+</script>
+
+<style scoped lang="scss">
+.form-container {
+  padding: 24px;
+
+  :deep(.arco-input-wrapper),
+  :deep(.arco-textarea-wrapper) {
+    border-radius: 4px;
+    border-color: #d7d7d9;
+    background-color: #fff;
+    height: 35px;
+    width: 400px;
+
+    &:focus-within,
+    &.arco-input-focus {
+      background-color: var(--color-bg-2);
+      border-color: rgb(var(--primary-6));
+      box-shadow: 0 0 0 0 var(--color-primary-light-2);
+    }
+
+    &.arco-textarea-wrapper {
+      height: 60px;
+    }
+  }
+}
+</style>

src/views/agent/work-flow/components/HistoryChat.vue

@@ -0,0 +1,45 @@
+<template>
+  <a-layout-sider width="250" style="background: #fff">
+    <div class="logo">
+      <img :src="cozeInfo?.icon_url" class="agent-img" />
+    </div>
+    <a-menu mode="inline" theme="light">
+      <a-menu-item key="1">
+        <span>{{ cozeInfo.name }}</span>
+        <span style="color: #8492ff; font-size: 12px">{{ cozeInfo.type == 1 ? '智能体' : '对话式' }}</span>
+        <span style="float: right">{{ cozeInfo.views }}次使用  </span>
+      </a-menu-item>
+
+    </a-menu>
+  </a-layout-sider>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  cozeInfo: {
+    type: Object as () => any,
+    default: () => ({}),
+  },
+  botId: {
+    type: String,
+    default: '',
+  },
+});
+
+onMounted(() => {
+});
+</script>
+
+<style scoped>
+.logo {
+  margin-bottom: 20px;
+}
+
+.agent-img {
+  width: 100%;
+  height: 260px;
+  border-radius: 4px;
+}
+</style>

src/views/agent/work-flow/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="chat-wrap">
+    <span class="" @click="goChatIndex"> <icon-left /> 返回空间 </span>
+
+    <div class="chat-contain">
+      <a-layout>
+        <a-layout>
+          <a-layout-sider width="20%">
+            <HistoryChat :cozeInfo="cozeInfo" />
+          </a-layout-sider>
+          <a-layout-sider class="layout-sider" width="17%">
+            <DynamicForm :formFields="formFields" :formData="formData" :loading="loading" @submit="handleSubmit" />
+          </a-layout-sider>
+          <a-layout-content ref="contentRef" class="content-container">
+            <a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
+            <div v-if="workFlowRes?.output != ''" class="work-res" v-html="renderedMarkdown"></div>
+            <NoData v-else />
+          </a-layout-content>
+        </a-layout>
+      </a-layout>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import HistoryChat from './components/historyChat.vue';
+import DynamicForm from './components/DynamicForm.vue';
+import { executeWorkFlow, getWorkFlowInfo } from '@/api/all/agent';
+import { useRoute, useRouter } from 'vue-router';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+
+const formFields = ref([]);
+
+// 表单数据对象（动态生成初始值）
+const formData = ref({});
+
+const route = useRoute();
+const id = route.query.id;
+const query = reactive({
+  id: id,
+});
+const router = useRouter();
+const goChatIndex = async () => {
+  router.push({
+    path: '/agent/index',
+  });
+};
+const loading = ref(false);
+
+const cozeInfo = reactive({
+  name: '',
+  description: '',
+  icon_url: '',
+  workflow_id: '',
+});
+const getData = async () => {
+  const { code, data } = await getWorkFlowInfo(query.id);
+  Object.assign(cozeInfo, data.info);
+  formFields.value = data.form_config;
+};
+const workFlowRes = reactive({
+  output: '',
+});
+
+// 渲染 Markdown 的计算属性
+const renderedMarkdown = computed(() => {
+  if (workFlowRes?.output) {
+    const rawHtml = marked.parse(workFlowRes.output || '');
+    return DOMPurify.sanitize(rawHtml); // 防止 XSS 攻击
+  }
+  return '';
+});
+
+// 提交表单
+const handleSubmit = async (formData) => {
+  console.log(formData, 'formData');
+  try {
+    const param = { form_data: formData, workflow_id: cozeInfo.workflow_id };
+    loading.value = true;
+    const { code, data } = await executeWorkFlow(param);
+    if (code === 200) {
+      Object.assign(workFlowRes, data.data);
+      loading.value = false;
+    }
+  } catch (error) {
+    console.log(error, 'error');
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  getData();
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

src/views/agent/work-flow/style.scss

@@ -0,0 +1,57 @@
+.chat-wrap {
+  .chat-contain {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: #2c3e50;
+    margin-top: 24px;
+
+    .span-back {
+      color: var(--Text-2, #3C4043);
+      font-size: 14px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      line-height: 62px;
+      word-wrap: break-word
+    }
+  }
+
+  .span-back {
+    color: var(--Text-2, #3C4043);
+    font-size: 14px;
+    font-family: Alibaba PuHuiTi;
+    line-height: 22px;
+    word-wrap: break-word
+  }
+
+  .content-container {
+    width: 40%;
+    background-color: #fff;
+  }
+
+  .work-res-span {
+    padding: 24px;
+    line-height: 34px;
+  }
+
+  .layout-sider {
+    border-radius: 6px;
+    margin-left: 20px;
+  }
+
+
+  .spin-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
+
+  .work-res {
+    line-height: 26px;
+    font-size: 15px;
+    padding: 20px;
+
+  }
+
+}