npm package: @sphereone/linehub-chatbot-sdk
Description: SphereOne's Chatbot SDK for Linehub.io
Author: SphereOne
Latest version: 1.2.2

# Chat Bot SDK Documentation

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

### Install the package:

```sh
npm install @sphereone/linehub-chatbot-sdk
```

### Import React Component

#### React Apps

```typescript
// 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.

```typescript
// 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.

```typescript
// 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.

```typescript
// 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.