Poco Agent Embed

将 Poco Agent 的对话、历史消息和产物预览嵌入第三方系统。SDK 不依赖 Vue 或 React，支持 ESM、CommonJS 和浏览器 Script 标签接入。

安装

pnpm add @ripperts/poco-agent-embed

SDK 需要在浏览器环境中挂载。第三方系统必须通过 getAccessToken 返回当前用户有效的 Poco 登录 token。

Vue 2

<template>
  <div ref="agentChat" style="height: 640px"></div>
</template>

<script>
import { mountAgentEmbed } from "@ripperts/poco-agent-embed";

export default {
  props: {
    getAccessToken: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      agentEmbedController: null,
    };
  },
  mounted() {
    this.agentEmbedController = mountAgentEmbed({
      baseUrl: "https://poco.example.com",
      agentId: "<agent-id>",
      target: this.$refs.agentChat,
      getAccessToken: () => this.getAccessToken(),
    });
  },
  beforeDestroy() {
    if (this.agentEmbedController) {
      this.agentEmbedController.destroy();
    }
  },
};
</script>

Vue 3

<template>
  <div ref="agentChat" style="height: 640px"></div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from "vue";
import { mountAgentEmbed } from "@ripperts/poco-agent-embed";

const props = defineProps({
  getAccessToken: {
    type: Function,
    required: true,
  },
});
const agentChat = ref(null);
let agentEmbedController;

onMounted(() => {
  agentEmbedController = mountAgentEmbed({
    baseUrl: "https://poco.example.com",
    agentId: "<agent-id>",
    target: agentChat.value,
    getAccessToken: () => props.getAccessToken(),
  });
});

onBeforeUnmount(() => {
  if (agentEmbedController) {
    agentEmbedController.destroy();
  }
});
</script>

React

import { useEffect, useRef } from "react";
import { mountAgentEmbed } from "@ripperts/poco-agent-embed";

interface AgentChatProps {
  getAccessToken: () => string | Promise<string>;
}

export function AgentChat({ getAccessToken }: AgentChatProps) {
  const targetRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!targetRef.current) return;

    const controller = mountAgentEmbed({
      baseUrl: "https://poco.example.com",
      agentId: "<agent-id>",
      target: targetRef.current,
      getAccessToken,
    });

    return () => controller.destroy();
  }, [getAccessToken]);

  return <div ref={targetRef} style={{ height: 640 }} />;
}

浏览器支持

支持现代 Chrome、Edge、Firefox 和 Safari。Vue 2 项目可以正常接入，但不支持 Internet Explorer 11。

完整参数和安全配置请参阅 Agent 外部嵌入文档。