@channel.io/app-sdk-wam-ui

WAM-specific UI infrastructure and presets for Channel.io apps.

Use this package for WAM runtime behavior such as theme detection, iframe height synchronization, navigation, and common full-page states. Import general-purpose UI components directly from the redesigned Bezier subpath.

Installation

npm install @channel.io/app-sdk-wam-ui
npm install react @channel.io/[email protected] @channel.io/[email protected] styled-components@^6

Bezier React 4 is still a prerelease. Pin 4.0.0-next.14 in application lockfiles and review its release notes before upgrading.

Quick start

import { SendIcon } from "@channel.io/bezier-icons";
import { Button, HStack } from "@channel.io/bezier-react/beta";
import {
  HeightSynchronizer,
  InlineBanner,
  WamHeader,
  WamThemeProvider,
} from "@channel.io/app-sdk-wam-ui";

export function App() {
  return (
    <WamThemeProvider>
      <HeightSynchronizer maxHeight={480}>
        <WamHeader title="Example" />
        <HStack spacing={8} padding={16}>
          <Button label="Send" leadingContent={SendIcon} variant="filled" semantic="primary" />
        </HStack>
        <InlineBanner variant="info" content="Ready to send." />
      </HeightSynchronizer>
    </WamThemeProvider>
  );
}

Bezier usage

New WAM interfaces should import redesigned components from @channel.io/bezier-react/beta:

import {
  Banner,
  Button,
  ConfirmModal,
  FormField,
  Search,
  Select,
  SettingsField,
  Switch,
  TextInput,
} from "@channel.io/bezier-react/beta";

Provider and stable token APIs that are not exported by the beta subpath remain available from @channel.io/bezier-react. Import UI components from /beta and use the current token APIs.

Components

WamThemeProvider

Wraps a WAM with Bezier's AppProvider and redesigned ToastProvider. It detects the light or dark appearance from the WAM runtime, or accepts an explicit override.

<WamThemeProvider>
  <MyWam />
</WamThemeProvider>

HeightSynchronizer

Observes content changes and synchronizes the current iframe height through the host bridge.

<HeightSynchronizer maxHeight={600}>
  <MyContent />
</HeightSynchronizer>

Use excludePaths with pathname when a route manages its own size.

WamHeader

Provides WAM back and close behavior with Bezier beta icon buttons. Pass WAM SDK navigation and close callbacks when the surrounding app controls those actions.

<WamHeader title="Settings" showBackButton />

LoadingPage, ErrorPage, and EmptyState

Consistent full-page states for small WAM surfaces.

if (loading) return <LoadingPage message="Loading data..." />;
if (error) return <ErrorPage error={error} onRetry={refetch} />;
return <EmptyState title="No results" description="Try a different search." />;

InlineBanner

A semantic success, error, or information preset over Bezier beta Banner.

<InlineBanner variant="success" content="Saved successfully." />

ConfirmDialog

A compact confirmation preset over Bezier beta ConfirmModal.

<ConfirmDialog
  show={open}
  onHide={() => setOpen(false)}
  title="Delete this item?"
  description="This action cannot be undone."
  destructive
  confirmText="Delete"
  onConfirm={handleDelete}
/>

SkeletonBox, SkeletonCircle, and BottomSheet

WAM-oriented loading placeholders and compact overlay layouts that do not have a direct Bezier beta equivalent. Give every BottomSheet an ariaLabel; it manages focus, Escape, and scroll locking while open.

Examples

• TypeScript tutorial
• Go tutorial

Both tutorials show a React WAM using @channel.io/app-sdk-wam and this package alongside a language-specific app server.

Peer dependencies

Apps still using Bezier 3 should remain on @channel.io/app-sdk-wam-ui 0.2.x.

License

MIT