@leatop/ai-agent-iframe

Leatop CDP AI Agent 的 iframe 轻量版悬浮入口组件。 只负责「悬浮机器人图标 + 全屏/半屏 iframe 容器 + 与子应用 postMessage 通信」，不含本地对话渲染逻辑，包体很小。

1. 安装

pnpm add @leatop/ai-agent-iframe

• vue ^3.5
• element-plus ^2.11（组件内部使用了 el-icon / el-tag，需宿主全局注册 Element Plus：app.use(ElementPlus)）
• axios ^1.6、qs ^6.12（内部请求封装使用）

2. 运行时配置

组件初始化时读取 window.globalConfig，请在被引入前注入（例如 public/config.js）：

window.globalConfig = {
  // 生成 ticket 的接口前缀（不配则默认 '/api/'）
  AiAgentApi: '/api/',
  // true：从 cookie 取 token；false/不配：从 localStorage 取 'cdp-token'
  sessionCookie: true,
  AiAgentIframeSrc: 'https://172.17.2.56:30090',
};

3. 在页面中使用

<script setup>
// 推荐：局部注册（与 @leatop/ai-agent 的用法一致）
import '@leatop/ai-agent-iframe/style.css';
import AIagent from '@leatop/ai-agent-iframe';
import aes from "@/cdp-common/utils/aes";

const aiIframeSrc = window.globalConfig?.AiAgentIframeSrc || ''
const userStore = useUserStore();
const userInfo = userStore.userInfo;
const loginKey = aes.encrypt(userInfo?.account)
</script>

<template>
  <!-- 建议放在 NavBar 右侧，父容器 z-index 需高于导航 -->
  <AIagent
    v-if="!!userInfo.account && showAiagent"  :userInfo="userInfo" :loginKey="loginKey" :aiIframeSrc="aiIframeSrc"
  />
</template>