@reltio/agentflow-design

React components for AgentFlow applications.

Install

npm install @reltio/agentflow-design

Usage

import {
  Header,
  LoadingScreen,
  TenantSelector,
  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");
        },
      }}
    />
    <TenantSelector
      selectedTenant={{
        id: "dev-customer-a",
        customerName: "Customer A",
        tenantName: "Customer A Dev",
        tenantId: "customer-a-dev",
        environmentId: "dev",
        environmentLabel: "Development",
      }}
      tenants={[
        {
          id: "dev-customer-a",
          customerName: "Customer A",
          tenantName: "Customer A Dev",
          tenantId: "customer-a-dev",
          environmentId: "dev",
          environmentLabel: "Development",
        },
      ]}
      onTenantSelect={(tenant) => {
        window.location.href = `?tenant=${tenant.tenantId}&env=${tenant.environmentId}`;
      }}
    />
    <LoadingScreen fullScreen={false} message="Loading unstructured" />
    <UserMenu
      name="Andrew Fuller"
      email="[email protected]"
      usageTitle="Credits Used"
      usage={[
        {
          id: "reltio-model",
          label: "Reltio model",
          percent: 65,
          detail: "15K/50K left",
        },
        {
          id: "customer-model",
          label: "Customer model",
          percent: 24,
          detail: "76K/1M left",
        },
      ]}
      usageAction={{
        onClick: () => {
          window.location.href = "/settings?section=usage-billing";
        },
        ariaLabel: "Open usage billing",
      }}
      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