react-ai-assistant v1.0.15

How to use this library

Use AssistantProvider to wrap your components in your App.tsx

<AssistantProvider>
    <Routes>
    ...
    </Routes>
</AssistantProvider>

In your home component use the setNavigationCallback to tell AssistantProvider how to navigate to a page

const Home = (props: Props) => {
  const navigate = useNavigate();

  useEffect(() => {
    setNavigationCallback(path => {
      navigate(path);
    });
  }, [navigate]);

  ...

Based on your automations use the useAssistedRef and useAssistedState

For example:

consider you have automations:

export const automations : {[key: string]: automation} = {
  "create-project": {
    "steps": [
      {
        type: "goto",
        path: "/project"
      },
      {
        type: "state",
        id: "create-project-name",
        value: 0,
        varRef: [
          "name"
        ]
      },
      {
        type: "state",
        id: "create-project-descr",
        value: 0,
        varRef: [
          "descr"
        ]
      },
      {
        type: "state",
        id: "create-project-repo",
        value: 0,
        varRef: [
          "repo"
        ]
      },
      {
        type: "click",
        id: "create-project",
        be_careful: true
      }
    ],
  }

An automation step of type state has to be attached to your state in your component of choice like this:

...

const [name, setName] = useAssistedState("create-project-name", "");

...

return (
    ...

    <InputWithValidation
        label='Project name'
        placeholder='name of your project'
        value={name}
    />

    ...
);

An automation step of type click has to be attached using a ref like this:

...

const ref = useAssistedRef("create-project");

...

return (
    ...

    <button onClick={() => setIsOpen(true)} className='btn' ref={ref}>
        Create Project
    </button>

    ...
)