gptx-chatbot-ui
v1.2.0
Published
Integrate chatbots into third-party pages via gptx-chatbot-ui
Downloads
336
Maintainers
zongpengReadme
gptx-chatbot-ui
Use gptx-chatbot-ui to integrate an assistant into third-party pages.
Steps
1.Get sharedKey
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
2.Install
npm install gptx-chatbot-ui
# or
pnpm add gptx-chatbot-ui3.Usage
1. Using Vue framework as an example, similar for other frameworks
<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>2. Using js (ESM)
<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>3. gptx-chatbot-ui VS gptx-chatbot-ui-lite
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%).
Config
| 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 |