@reltio/agentflow-design

React components for AgentFlow applications.

Install

npm install @reltio/agentflow-design

Usage

import { Header, LoadingScreen, UserMenu } from "@reltio/agentflow-design";
import "@reltio/agentflow-design/style.css";

export const App = () => (
  <>
    <Header
      title="AgentFlow"
      navItems={[{ id: "agents", label: "Agents", active: true }]}
      navigationToggle={{
        onClick: () => {
          console.log("Toggle navigation");
        },
      }}
    />
    <LoadingScreen fullScreen={false} message="Loading unstructured" />
    <UserMenu
      name="Andrew Fuller"
      email="[email protected]"
      items={[{ id: "settings", label: "Settings" }]}
      onLogout={() => {
        window.location.href = "/logout";
      }}
    />
  </>
);

Set data-theme="light" or data-theme="dark" on an ancestor element to switch component colors.

LoadingScreen includes the AgentFlow loading GIF by default. The package also ships @reltio/agentflow-design/loading.gif if an app wants to copy or reference the same asset explicitly.

Development

npm install
npm run dev
npm run check

Publish

npm login
npm publish