gptx-chatbot-ui

v1.0.0

Published

3 months ago

Integrate chatbots into third-party pages via gptx-chatbot-ui

Downloads

0High
0Medium
0Low

zongpeng

Chat UI GPT AIGC gptx-chatbot-ui

gptx-chatbot-ui(beta)

Use gptx-chatbot-ui to integrate an assistant into third-party pages (beta).

The code will be open source after it is perfected.

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 install 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'
      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'
  };

  // 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%).

4. SSR Integration (This problem exists in versions before 0.1.0 beta.27. You can ignore this part in new versions.)

When using an SSR framework(Next.js, Nuxt.js), you might encounter an error like this if SafeGenChat is not properly included:

ReferenceError:window is not defined

This error occurs because SSR environments do not recognize the window object, but SafeGenChat relies on it. To address this, you need to ensure SafeGenChat initializes correctly on the client side only.

Here’s how to handle this in Next.js:

Create the ChatBot component

// components/ChatBot.tsx

import React, { useEffect } from 'react';
import { SafeGenChat } from 'gptx-chatbot-ui';
import 'gptx-chatbot-ui/lib/style.css';

const ChatContent = () => {
    useEffect(() => {
        const config = {
            el: '#chat-container', // Target DOM element
            chatBaseApi: 'https://XXX/v2', // Required API endpoint
            sharedKey: 'your sharedKey', // API key
            locale: 'en', // Language setting: 'zh-CN', 'en' (default), 'zh-TW'
        };
        new SafeGenChat(config);
    }, []);

    return (
        <div className='w-[450px] p-[10px]'>
            <div id="chat-container" style={{ width: '100%', height: '100%' }} />
        </div>
    );
};
export default ChatContent;

Dynamically import the ChatBot component to ensure it only loads on the client side

// pages/_app.tsx

import dynamic from 'next/dynamic';

const DynamicChatBot = dynamic(() => import('@/components/ChatBot'), { ssr: false });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={`inter.className main-content`} suppressHydrationWarning={true}>
        {children}
        <DynamicChatBot />
      </body>
    </html>
  );
}

This setup ensures SafeGenChat initializes correctly by deferring its loading until the client-side rendering is complete, avoiding issues with SSR.

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' | | customIcon.ask | string | false | 'default' | Don't use relative paths | | customIcon.answer | string | false | 'default' | Don't use relative paths |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme