@ripperts/poco-agent-embed 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -66
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,117 +5,105 @@
|
|
|
5
5
|
## 安装
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
|
|
8
|
+
npm install @ripperts/poco-agent-embed
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
## 接入步骤
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
1. 在 Poco 的场景专家中开放外部嵌入，并把宿主页面的 origin 加入允许来源。
|
|
14
|
+
2. 在宿主系统后端调用 `POST https://poco.example.com/openapi/v1/auth/token`，为当前登录用户换取 Poco 登录 Token，再通过自己的接口（下文示例为 `/api/poco/token`）返回给前端。
|
|
15
|
+
3. 在前端挂载对话窗口，`getAccessToken` 调用上一步的接口。
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
<template>
|
|
17
|
-
<div ref="agentChat" style="height: 640px"></div>
|
|
18
|
-
</template>
|
|
19
|
-
|
|
20
|
-
<script>
|
|
21
|
-
import { mountAgentEmbed } from "@ripperts/poco-agent-embed";
|
|
17
|
+
`https://poco.example.com` 替换为你在浏览器中打开 Poco 的地址，Token 接口和 SDK 使用同一个地址。下文示例共用这个函数：
|
|
22
18
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
},
|
|
30
|
-
data() {
|
|
31
|
-
return {
|
|
32
|
-
agentEmbedController: null,
|
|
33
|
-
};
|
|
34
|
-
},
|
|
35
|
-
mounted() {
|
|
36
|
-
this.agentEmbedController = mountAgentEmbed({
|
|
37
|
-
baseUrl: "https://poco.example.com",
|
|
38
|
-
agentId: "<agent-id>",
|
|
39
|
-
target: this.$refs.agentChat,
|
|
40
|
-
getAccessToken: () => this.getAccessToken(),
|
|
41
|
-
});
|
|
42
|
-
},
|
|
43
|
-
beforeDestroy() {
|
|
44
|
-
if (this.agentEmbedController) {
|
|
45
|
-
this.agentEmbedController.destroy();
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
};
|
|
49
|
-
</script>
|
|
19
|
+
```js
|
|
20
|
+
async function getAccessToken() {
|
|
21
|
+
const response = await fetch("/api/poco/token");
|
|
22
|
+
const data = await response.json();
|
|
23
|
+
return data.access_token;
|
|
24
|
+
}
|
|
50
25
|
```
|
|
51
26
|
|
|
52
27
|
## Vue 3
|
|
53
28
|
|
|
54
29
|
```vue
|
|
55
30
|
<template>
|
|
56
|
-
<div ref="
|
|
31
|
+
<div ref="container" style="height: 640px"></div>
|
|
57
32
|
</template>
|
|
58
33
|
|
|
59
34
|
<script setup>
|
|
60
35
|
import { onBeforeUnmount, onMounted, ref } from "vue";
|
|
61
36
|
import { mountAgentEmbed } from "@ripperts/poco-agent-embed";
|
|
62
37
|
|
|
63
|
-
const
|
|
64
|
-
|
|
65
|
-
type: Function,
|
|
66
|
-
required: true,
|
|
67
|
-
},
|
|
68
|
-
});
|
|
69
|
-
const agentChat = ref(null);
|
|
70
|
-
let agentEmbedController;
|
|
38
|
+
const container = ref(null);
|
|
39
|
+
let widget = null;
|
|
71
40
|
|
|
72
41
|
onMounted(() => {
|
|
73
|
-
|
|
42
|
+
widget = mountAgentEmbed({
|
|
74
43
|
baseUrl: "https://poco.example.com",
|
|
75
44
|
agentId: "<agent-id>",
|
|
76
|
-
target:
|
|
77
|
-
getAccessToken
|
|
45
|
+
target: container.value,
|
|
46
|
+
getAccessToken,
|
|
78
47
|
});
|
|
79
48
|
});
|
|
80
49
|
|
|
81
50
|
onBeforeUnmount(() => {
|
|
82
|
-
if (
|
|
83
|
-
agentEmbedController.destroy();
|
|
84
|
-
}
|
|
51
|
+
if (widget) widget.destroy();
|
|
85
52
|
});
|
|
86
53
|
</script>
|
|
87
54
|
```
|
|
88
55
|
|
|
56
|
+
## Vue 2
|
|
57
|
+
|
|
58
|
+
```vue
|
|
59
|
+
<template>
|
|
60
|
+
<div ref="container" style="height: 640px"></div>
|
|
61
|
+
</template>
|
|
62
|
+
|
|
63
|
+
<script>
|
|
64
|
+
import { mountAgentEmbed } from "@ripperts/poco-agent-embed";
|
|
65
|
+
|
|
66
|
+
export default {
|
|
67
|
+
mounted() {
|
|
68
|
+
this.widget = mountAgentEmbed({
|
|
69
|
+
baseUrl: "https://poco.example.com",
|
|
70
|
+
agentId: "<agent-id>",
|
|
71
|
+
target: this.$refs.container,
|
|
72
|
+
getAccessToken,
|
|
73
|
+
});
|
|
74
|
+
},
|
|
75
|
+
beforeDestroy() {
|
|
76
|
+
if (this.widget) this.widget.destroy();
|
|
77
|
+
},
|
|
78
|
+
};
|
|
79
|
+
</script>
|
|
80
|
+
```
|
|
81
|
+
|
|
89
82
|
## React
|
|
90
83
|
|
|
91
84
|
```tsx
|
|
92
85
|
import { useEffect, useRef } from "react";
|
|
93
86
|
import { mountAgentEmbed } from "@ripperts/poco-agent-embed";
|
|
94
87
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
export function AgentChat({ getAccessToken }: AgentChatProps) {
|
|
100
|
-
const targetRef = useRef<HTMLDivElement>(null);
|
|
88
|
+
export function AgentChat() {
|
|
89
|
+
const containerRef = useRef(null);
|
|
101
90
|
|
|
102
91
|
useEffect(() => {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
const controller = mountAgentEmbed({
|
|
92
|
+
const widget = mountAgentEmbed({
|
|
106
93
|
baseUrl: "https://poco.example.com",
|
|
107
94
|
agentId: "<agent-id>",
|
|
108
|
-
target:
|
|
95
|
+
target: containerRef.current,
|
|
109
96
|
getAccessToken,
|
|
110
97
|
});
|
|
98
|
+
return () => widget.destroy();
|
|
99
|
+
}, []);
|
|
111
100
|
|
|
112
|
-
|
|
113
|
-
}, [getAccessToken]);
|
|
114
|
-
|
|
115
|
-
return <div ref={targetRef} style={{ height: 640 }} />;
|
|
101
|
+
return <div ref={containerRef} style={{ height: 640 }} />;
|
|
116
102
|
}
|
|
117
103
|
```
|
|
118
104
|
|
|
105
|
+
传入 `target` 时对话窗口填满该容器，容器需要有明确高度；不传 `target` 则在页面右下角显示悬浮按钮。
|
|
106
|
+
|
|
119
107
|
## 浏览器支持
|
|
120
108
|
|
|
121
109
|
支持现代 Chrome、Edge、Firefox 和 Safari。Vue 2 项目可以正常接入，但不支持 Internet Explorer 11。
|