# @reltio/agentflow-design

React components for AgentFlow applications.

## Install

```bash
npm install @reltio/agentflow-design
```

## Usage

```tsx
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="andrew.fuller@example.com"
      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

```bash
npm install
npm run dev
npm run check
```

## Publish

```bash
npm login
npm publish
```
