Gptx-chatbot-ui NPM

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-ui

3.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