Chat Bot SDK Documentation

To use the SDK, you need to install the npm package called @sphereone/linehub-chatbot-sdk.

Install the package:

npm install @sphereone/linehub-chatbot-sdk

Import React Component

React Apps

// inside of index.tsx/index.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ChatBot } from "@sphereone/linehub-chatbot-sdk";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React>
    <ChatBot
      agents={["Swap", "DexV2", "DexV3", "Perps", "Knowledge_Agent", "Analytics_Agent", "Squid_Agent", "Stargate_Agent"]}
      darkMode={true}
      darkTheme={{
        primary:"#3434eb",
        secondary:"#c213a2"
      }}
      lightTheme={{
        primary:"#13c216",
        secondary:"#b59f12"
      }}
    >
      <App />
    </ChatBot>
  </React>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

NextJs

For NextJs, the ChatBot widget is a client-rendered-only component.

If your main page.tsx file has "use client"; at the top, then you can use the ChatBot widget like this.

// inside of page.tsx
"use client":

import Image from "next/image";
import { ChatBot } from "@sphereone/linehub-chatbot-sdk";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
          Get started by editing&nbsp;
          <code className="font-mono font-bold">src/app/page.tsx</code>
        </p>
        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
          <a
            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            By{" "}
            <Image
              src="/vercel.svg"
              alt="Vercel Logo"
              className="dark:invert"
              width={100}
              height={24}
              priority
            />
          </a>
        </div>
      </div>
      <ChatBot
        agents={["Swap", "DexV2", "DexV3", "Perps", "Knowledge_Agent", "Analytics_Agent", "Squid_Agent", "Stargate_Agent"]}
        darkMode={true}
        darkTheme={{
          primary:"#22BDF2",
          secondary:"#4479D6"
        }}
        lightTheme={{
          primary:"#13c216",
          secondary:"#b59f12"
        }}
      />
    </main>
  );
}

However, if your main page.tsx file does not have "use client"; at the top, is a server-rendered-only page, then please do the following:

1. Create a file ChatBotWrapper.tsx. In truth, it can be any file name you want. This file will mount this client-rendered-only component when the server-rendered-only page.tsx is fully mounted, so you don't get any errors when using it in production.

// inside of `ChatBotWrapper.tsx`

"use client";

import { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';

const ChatBot = dynamic(
  () => import("@sphereone/linehub-chatbot-sdk").then((mod) => mod.ChatBot),
  { ssr: false }
);

const ChatBotWrapper = ({ props }: { props: any }) => {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) return null;

  return (
    <ChatBot
      agents={["Swap", "DexV2", "DexV3", "Perps", "Knowledge_Agent", "Analytics_Agent", "Squid_Agent", "Stargate_Agent"]}
      darkMode={true}
      darkTheme={{
        primary: "#22BDF2",
        secondary: "#4479D6",
      }}
      lightTheme={{
        primary: "#13c216",
        secondary: "#b59f12",
      }}
    >
      {props}
    </ChatBot>
  );
}

2. Then you can use it in your main page.tsx file.

// inside of page.tsx
import Image from "next/image";
import ChatBotWrapper from './components/ChatBotWrapper'; // import it from wherever you've created the file

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
          Get started by editing&nbsp;
          <code className="font-mono font-bold">src/app/page.tsx</code>
        </p>
        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
          <a
            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            By{" "}
            <Image
              src="/vercel.svg"
              alt="Vercel Logo"
              className="dark:invert"
              width={100}
              height={24}
              priority
            />
          </a>
        </div>
      </div>
      {/* Use it like this */}
      <ChatBotWrapper />
    </main>
  );
}

Features

• Supports React and Next.js (SSR)
• Customizable agents
• Dark and light themes
• Custom logo support

Feedback and Contribution

This is an early alpha release, and we welcome feedback and contributions. Please reach out to us with any suggestions or issues.

License

This project is licensed under the MIT License.