@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.13 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. Do not use legacy root UI components or deprecated useBetaTokens 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 calls window.ChannelIOWam.setSize() with the current iframe height.

<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. onBack defaults to history.back() and onClose defaults to window.ChannelIOWam.close().

<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.

Migrating from 0.3

Version 0.4 removes general-purpose wrappers that duplicate redesigned Bezier components.

| Removed WAM UI export | Use instead | | --------------------- | --------------------------------------------------------------- | | FormSection | Bezier beta Form, Settings, or Section | | FormRow | Bezier beta FormField or SettingsField | | InputRow | Bezier beta TextInput inside FormField | | SelectRow | Bezier beta Select inside FormField | | ToggleRow | Bezier beta SettingsField with Switch | | SearchInput | Bezier beta Search; debounce in application state when needed |

Bezier beta buttons use label, variant, and semantic instead of the legacy text, styleVariant, and colorVariant props.

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

| Package | Version | | -------------------------- | ---------------------- | | react | >=17.0.0 | | @channel.io/bezier-react | >=4.0.0-next.13 <5.0.0 | | @channel.io/bezier-icons | >=0.60.0 <1.0.0 | | styled-components | >=6.0.0 |

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

License

MIT