kata_cx_ui 1.1.2

Ready-made Kata CX chat screen for Flutter — transcript, streaming replies, session history and the CSAT survey, in light and dark.

kata_cx_ui

The ready-made Kata CX chat screen: transcript, streaming replies, suggestion chips, session history and the CSAT survey — in light and dark.

// push it as a route
KataCxChat.open(context, title: 'Support');

// or embed it — required on web, useful on tablets
const KataCxChatScreen();

Every network call goes through kata_cx's client, so this screen and the headless API cannot drift apart in behaviour.

Status

Phase 1 feature-complete. The screen follows the Kata CX Phase 1 design system, with light and dark token sets, and is verified on a physical Android device and in Chrome.

To build your own interface instead, everything this screen uses is public API on kata_cx.

Install

flutter pub add kata_cx_ui

KataCx.setup must have run before the screen is built; it renders a loader until the tenant's settings arrive rather than flashing the fallback brand.

Android also needs core library desugaring

Not optional, and the error does not point here. This package depends on flutter_local_notifications, which uses java.time on minSdk levels that predate it, so every app embedding this screen has to enable desugaring — even one that never turns notifications on. Without it the build fails at :app:checkDebugAarMetadata with:

Dependency ':flutter_local_notifications' requires core library desugaring
to be enabled for :app.

Two edits to android/app/build.gradle.kts:

android {
    compileOptions {
        // ...
        isCoreLibraryDesugaringEnabled = true
    }
}

dependencies {
    coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.1.5")
}

Theming

Colours come from the tenant's dashboard settings, not from your app's ThemeData, so the Flutter screen and the web widget render the same palette. What is yours to choose is the mode and the type family:

const KataCxChatScreen(
  themeMode: ThemeMode.system,   // default
  fontFamily: 'Geist',           // the design system's face; bundle it yourself
  showPoweredBy: true,           // default; set false to hide the attribution
);

Dark mode is new in the Flutter port — neither the web widget nor the Android module has one. Tenant-configured accent colours are contrast-corrected against whichever surface they land on, and bubble label colours are computed from the bubble's luminance rather than fixed white. That last one is a live bug on Android, where self-bubble text is hardcoded white: a pale tenant accent renders it nearly invisible.

Notifications

KataCxLocalNotifier is this package's flutter_local_notifications implementation of kata_cx's KataCxNotifier interface:

await KataCx.configureNotifications(
  config: const KataCxNotificationConfig(androidSmallIcon: '@mipmap/ic_launcher'),
  notifier: KataCxLocalNotifier(),
);

It lives here rather than in kata_cx so the headless package carries no notification dependency. On Android 13+ every notification is dropped silently until permission is granted, which is what makes that failure easy to miss — configureNotifications returns whether it was.

Tests

test/goldens/ holds pixel snapshots of seven states in both themes. Text renders as blocks, because the test environment substitutes a fixed-metric font for every family — deliberately, since that is what makes the images identical on every machine while leaving layout, colour and alignment intact.

After an intentional design change:

flutter test test/goldens --update-goldens

Then look at the diff images before committing them. A golden that records the wrong state is worse than no golden at all.