npm package: @sphereone/surface-area-sdk
Description: SphereOne's Chatbot SDK
Author: SphereOne
Latest version: 0.1.1

# Chat Bot SDK Documentation

## THIS IS EARLY ALPHA SOFTWARE AND WE ARE TAKING FEEDBACK AND UPDATING ACCORDINGLY

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

### Install the package:

```sh
npm install @sphereone/surface-area-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/@sphereone/surface-area-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

```typescript
// inside of page.tsx
import Image from "next/image";
import { ChatBot } from "@sphereone/surface-area-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: "#3434eb",
          secondary: "#c213a2",
        }}
        lightTheme={{
          primary: "#13c216",
          secondary: "#b59f12",
        }}
      />
    </main>
  );
}
```

### Optional Dependencies

This SDK supports multiple blockchain wallets. Depending on which wallets you want to use, you may need to install additional dependencies and pass them to the ChatBot component:

#### Solana Wallet

To enable Solana wallet support, install these dependencies:

- @solana/wallet-adapter-wallets@0.19.32
- @solana/wallet-adapter-react@0.15.35
- @solana/web3.js@1.95.3
- @tiplink/wallet-adapter@2.1.20

#### Cosmos Wallet

To enable Cosmos wallet support, install this dependency:

- @cosmjs/stargate@0.32.4

#### Sui Wallet

To enable Sui wallet support, install these dependencies:

- @mysten/dapp-kit@0.14.17
- @mysten/sui@1.8.0
- @tanstack/react-query

#### Passing Optional Dependencies

```typescript
import * as solanaWalletAdapterWallets from "@solana/wallet-adapter-wallets";
import * as solanaWalletAdapterReact from "@solana/wallet-adapter-react";
import * as tipLinkAdapter from "@tiplink/wallet-adapter";
import * as solanaWeb3 from "@solana/web3.js";
import * as cosmjs from "@cosmjs/stargate";
import * as suiDappKit from "@mysten/dapp-kit";
import * as suiClient from "@mysten/sui/client";
import * as suiTransactions from "@mysten/sui/transactions";
<ChatBot
  integratorId="your-integrator-id"
  agents={["Agent1", "Agent2", "Agent3"]}
  darkMode={true}
  optionalWalletDependencies={{
    solana: {
      walletAdapterWallets: solanaWalletAdapterWallets,
      walletAdapterReact: solanaWalletAdapterReact,
      tipLinkAdapter: tipLinkAdapter,
      web3: solanaWeb3,
    },
    cosmos: {
      cosmjs: cosmjs,
    },
    sui: {
      dappKit: suiDappKit,
      client: suiClient,
      transactions: suiTransactions,
    },
  }}
/>;
```

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