npm package: @semoss/sdk-react
Description: @semoss\sdk-react is a small react package that accelerates the process of building an deploying an app.
Latest version: 1.0.0-beta.20

# @semoss\sdk-react

@semoss\sdk-react is a small react package that accelerates the process of building an deploying an app.

## Getting Started:

First, install the sdk using a package manager (or your favorite cdn):
```sh
npm install @semoss/sdk-react
```

Second, install dependencies using a package manager:

```sh
npm install @semoss/sdk
```

Next, import the `InsightProvider`. This provider will wrap your components and provide an Insight to all of it's children. Insights are temporal workspaces that allow end users to script and interact with a model, storage engine, or database.

```jsx
import { InsightProvider } from '@semoss/sdk-react';

const App = (props) => {
    const { children } = props;

    return <InsightProvider>{children}</InsightProvider>;
};
```

Once the application is wrapped, You can access the insight through the `useInsight` hook;

```jsx
import { useInsight } from '@semoss/sdk-react';

const Child = (props) => {
    const { children } = props;

    const {
        /** Track if it is initialized **/
        isInitialized,
        /** Track if the user is authorized **/
        isAuthorized,
        /** Any Insight Errors **/
        error,
        /** System information **/
        system,
        /** Actions to update **/
        actions,
    } = useInsight();

    return <div>{children}</div>;
};
```

Now you are ready to go. You can do things like

-   Login or Logout

```js
const login = (username, password) => {
    const success = await actions.login({
        type: 'native',
        username: username,
        password: password,
    });

    console.log(success);
};

const loginWithOauth = (provider: 'ms' ) => {
    const resp = await insight.actions.login({
        type: 'oauth',
        provider: provider
    })

    console.log(resp)
}

const logout = (username, password) => {
    const success = await actions.logout();

    console.log(success);
};
```

-   Query a LLM and return a result

```js
const ask = (question) => {
    const { output } = await actions.askModel(MODEL_ID, question);

    // log the output
    console.log(output);
};
```

- Ask LLM with stream

```js
import { partial, runPixel } from '@semoss/sdk';

const { actions, insightId } = useInsight()

const askWithStream = async () => {
        let isCollecting = false;

        const collectMessage = async () => {
            // only continue if response hasn't come back from runPixel
            if (!isCollecting) {
                return;
            }
    
            // get the output of partial
            try {
                const output = await partial(insightId);

                // add the partial
                if (output.message && output.message.total) {
                    setAnswer(output.message.total);
                }

                // get the next partial of response
                setTimeout(() => collectMessage(), 1000);
            } catch (e) {
                // noop
            }
        }

        // start collecting
        isCollecting = true;

        // initial delay that collects partial of response
        setTimeout(() => collectMessage(), 500);

        const { errors, pixelReturn } = await runPixel(
            `LLM(engine=["001510f8-b86e-492e-a7f0-41299775e7d9"], command=["<encode>${question}</encode>"]);`,
            insightId,
        );

        // OR

        // const response = await  actions.run(
        //     `LLM(engine=[MODEL_ID], command=["<encode>${question}</encode>"]);`,
        //     insightId,
        // )

        isCollecting = false
    }

```

-   Run a database query

```js
const getMovies = () => {
    const { output } = await actions.queryDatabase(
        DATABASE_ID,
        'select * from movie',
    );

    // log the output
    console.log(output);
};
```

-   Run Python

```js
const sum = (num1, num2) => {
    const { output } = await actions.runPy(`${num1} + ${num2}`);

    // log the output
    console.log(output);
};
```

-   Upload a File

```js
const upload = (file, path) => {
    const { output } = await actions.upload(file, path);

    // log the output
    console.log(output);
};
```

-   Download a File

```js
const download = (path) => {
    const { output } = await actions.download(path);

    // log the output
    console.log(output);
};
```

## Tips and Tricks

Here are a few tips and tricks that can help streamline the development process.

### Development Environment

> Note: We recommend manually setting the environment only in `development` mode.

You can setup a development environment and use access keys to authenticate with the app server. Generate the keys on the server and then update the `Env` module. See:

```js
// import the module
import { Env } from '@semoss/sdk';

// update the environment
Env.update({
    /**
     * Url pointing to the app server
     **/
    MODULE: '',
    /**
     * Access key generated by the app server
     **/
    ACCESS_KEY: '',
    /**
     * Secret key generated by the app server
     **/
    SECRET_KEY: '',
    /**
     * Optional field. This will load app specific reactors into the insight. Your app has to be hosted and running on the app server.
     **/
    APP: '',
});
```

> Note: Please **do not** commit your keys. Instead externalize your keys to a `.env` and load them in as environment variables during development

### Python

The app server allows you to write custom `python` to power your app. You can initialize your `python` environment by:

1. Loading via a file

The sdk will load `python` via an external file.

```py
# ./hello.py
def sayHello(name):
    print(f'Hello {name}')
```

Set the option on initialize:

```js
// update the environment
initialize({
    python: {
        /**
         *  Load the python via an external file
         **/
        type: 'file',
        /**
         *  Path to the file
         **/
        path: './hello.py',
        /**
         *  Alias for the file
         **/
        alias: 'smss',
    },
});
```

2. Loading via `js`

Set the option on initialize:

```js
// define it int he js
const py = `
def sayHello(name):
    print(f'Hello {name}')
`;

// update the environment
initialize({
    python: {
        /**
         *  Load the python via js
         **/
        type: 'script',
        /**
         *  Path to the file
         **/
        script: py,
        /**
         *  Alias for the file
         **/
        alias: 'smss',
    },
});
```

Next you can the preloaded `python` methods by calling the `runPy` action. See

```js
const hello = (name) => {
    const { output } = await actions.runPy(
        `smss.sayHello(${name})`,
    );

    // log the output
    console.log(output);
};
```