Use gptx-chatbot-ui to integrate an assistant into third-party pages.
Create a chat assistant by：
-
SafeGen AI(International)：https://safegen.ai
-
千问千答(China)：https://chat.dappworks.cn
Assistant -> Publish -> Web page share -> configuration completed -> get sharedKey
npm install gptx-chatbot-ui
# or
pnpm add gptx-chatbot-ui<template>
<div class="my-chat">
<div id="chat-container" style="height: 100%;" />
</div>
</template>
<script>
/* full */
import { SafeGenChat } from 'gptx-chatbot-ui';
import 'gptx-chatbot-ui/lib/full/style.css';
/* or lite */
// import { SafeGenChat } from 'gptx-chatbot-ui/lib/lite/gptx-chatbot-ui-lite.js';
// import 'gptx-chatbot-ui/lib/lite/style.css';
/* custom icon */
// import askIcon from "@/assets/3.jpg";
// import answerIcon from "@/assets/4.jpg";
/* or public dir */
import askIcon from "/1.jpg";
import answerIcon from "/2.jpg";
export default {
mounted() {
// Configuration object for the chat application
const config = {
el: '#chat-container', // The DOM element
chatBaseApi: 'https://api.safegen.ai/v2', // required
sharedKey: 'your sharedKey', // sharedKey
locale: 'zh-CN', // 'zh-CN', 'en'(default), 'zh-TW'
theme: "dark", // 'light'(default), 'dark'
customIcon: {
ask: askIcon,
answer: answerIcon
}
};
// init
const chatInstance = new SafeGenChat(config);
console.log(chatInstance); // application instance
}
};
</script>
<style lang="scss" scoped>
.my-chat {
height: 800px;
width: 600px;
margin: 0 auto;
}
</style><head>
<title>demo</title>
<!-- css -->
<link rel="stylesheet" href="./style.css">
</head>
<div class="my-chat">
<div id="chat-container" style="height: 100%;" />
</div>
<script type="module">
/* full */
import { SafeGenChat } from './gptx-chatbot-ui.js';
/* or lite */
// import { SafeGenChat } from '/gptx-chatbot-ui-lite.js';
// Configuration object for the chat application
const config = {
el: '#chat-container', // The DOM element
chatBaseApi: 'https://api.safegen.ai/v2', // required
sharedKey: 'your sharedKey', // sharedKey
locale: 'zh-CN', // 'zh-CN', 'en'(default), 'zh-TW'
theme: "dark", // 'light'(default), 'dark'
};
// init
const chatInstance = new SafeGenChat(config);
console.log(chatInstance); // application instance
</script>
<style>
.my-chat {
height: 800px;
width: 800px;
margin: 0 auto;
}
</style>The only difference between the two is that the lite version does not use highlight.js to highlight the code syntax. If you do not have code syntax output or do not care about the beauty of the code syntax display, it is recommended to use the lite version, which will significantly reduce the size (about 63%).
| key | type | required | default | desc |
|---|---|---|---|---|
| el | string | true | none | The DOM element where the chat will be mounted |
| chatBaseApi | string | true | none | SafeGen AI(International)：https://api.safegen.ai/v2, 千问千答(China)：https://chat.dappworks.cn/v2 |
| sharedKey | string | true | none | - |
| locale | string | false | 'en' | 'zh-CN', 'en', 'zh-TW' |
| theme | string | false | 'light' | 'light'(default), 'dark' |
| customIcon.ask | string | false | 'default' | Don't use relative paths |
| customIcon.answer | string | false | 'default' | Don't use relative paths |