Integration via ReactJS SDK

The ReactJS SDK allows you to easily integrate visualization features into your existing chat application.

Quick Start

Installation and Integration

Since the ReactJS SDK does not provide an npm package, please contact support@hengshi.com for assistance.

Example Directory Structure:

<Your Project>/
├── src/
|   ├── hengshi/   <-- For example, place the SDK here within your project source code
│   ├── index.ejs
│   └── index.js
└── package.json

Example index.js:

import React from "react";
import { createRoot } from "react-dom/client";

import Completion from "./hengshi/ai";

function ReactApp() {
  const chat = {
    "meta": "refineQuestion,answer,chart,chartConfig",
    "conversationId": 226,
    "uid": "00747081-9cc3-4c7c-b3de-735244498fd6",
    "prompt": "Module distribution of bug issues",
    "answer": "The distribution of bug issues across modules is relatively even. The module with the most bugs has 4, while most other modules have 2-3 bugs.",
    "refineQuestion": "Please provide the distribution of bug issues across modules",
    "charts": [
      {
        "appId": 134683,
        "datasetId": 1,
        "options": {
          "axes": [
            {
              "op": "{{41}}.{title}",
              "uid": "uid1",
              "kind": "formula"
            },
            {
              "op": "count({{33}}.{issue_id})",
              "uid": "uid2",
              "kind": "formula"
            }
          ],
          "limit": 100
        }
      }
    ]
  };

  return <Completion {...chat} />;
}

const root = createRoot(document.getElementById("root"));
root.render(<ReactApp />);

The rendered result is shown below:

Shadow DOM Description

To prevent style conflicts, the component uses Shadow DOM for rendering, ensuring that the component's styles neither affect nor are affected by external applications.

SDK Directory Structure

hengshi/
├── ai.css        # Stylesheet file
├── ai.js         # Main SDK entry point
├── font/            # Font resources
│   ├── fontello.eot
│   ├── fontello.ttf
│   ├── fontello.woff
│   └── fontello.woff2
└── locales/         # Language packs
    ├── en-US.json
    ├── zh-CN.json

Component API Reference

As shown in the previous example, the Completion component accepts chat data as a parameter. This object represents the HENGSHI conversation round data and can be retrieved via the GET /api/conversations/${conversationId}/chats/${uid} API. For the data structure, refer to chat.

In addition to all the properties of the chat object, the Completion component also accepts the following parameters:

Parameter	Type	Description
meta	STRING	A combination of strings such as 'refineQuestion', 'answer', 'chart', 'chartSwitcher', 'chartConfig', etc., separated by commas (','), used to customize the display content
disableEllipsis	BOOL	When set to true, tags for answers and data-fetching logic will not be collapsed or truncated
showWhenNoData	BOOL	Whether to display the chart component when there is no data, default is false
chartTheme	STRING	Dashboard theme ID, refer to Theme Colors
stylesheets	STRING or STRING ARRAY	Stylesheet links or stylesheet content for custom styling
locale	STRING	Language setting, default is 'zh-CN', supports 'zh-CN', 'en-US', 'zh-TW', 'ja-JP'
onChangeChartType	FUNCTION	Callback function for switching chart types. When this parameter is provided, an icon button for switching chart types will appear above the chart
parser	OBJECT	Configuration options
parser.onSelect	FUNCTION	When this parameter is provided, a "+" icon button will appear in the top-right corner of the chart. Clicking the button will trigger this function
parser.selectedText	STRING	The string will be used as the Tooltip content for the "+" icon button
onReady	FUNCTION	Callback function triggered upon initial rendering

FAQ

Q: Prompted with "Not logged in," how to resolve it?

A: Refer to the Login Authentication section. You need to complete login authentication before rendering components.

Q: How to customize styles?

A: Since Shadow DOM is used, you need to modify styles by passing parameters through stylesheets. The stylesheets parameter accepts a string or an array of strings and supports both stylesheet links and stylesheet content. For example:

<Chart
  {...chat}
  stylesheets={[
    'https://cdn.example.com/custom.css',
    `.custom-class { color: red; }`,
  ]} />