@kitn.ai/ui 0.14.1

package/src/elements/embed.stories.tsx

@@ -0,0 +1,213 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal, onMount, type JSX } from 'solid-js';
+import './embed'; // side effect: registers <kai-embed>
+import { argTypesFor, specDescription } from '../stories/docs/element-controls';
+import type { EmbedCardData } from '../primitives/embed-providers';
+import { configureEmbedAllowlist } from '../primitives/embed-providers';
+import type { CardEvent } from '../primitives/card-contract';
+
+// Custom DOM element — declare the tag for JSX.
+declare module 'solid-js' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'kai-embed': JSX.HTMLAttributes<HTMLElement> & {
+        'card-id'?: string;
+        ref?: (el: HTMLElement) => void;
+      };
+    }
+  }
+}
+
+type EmbedEl = HTMLElement & { cardId?: string; data?: EmbedCardData };
+
+/** A sized box the embed sits in. */
+function Frame(props: { children: JSX.Element }) {
+  return <div style={{ width: '100%', 'max-width': '560px' }}>{props.children}</div>;
+}
+
+/** Mounts a <kai-embed>, sets `.data`, logs emitted CardEvents under the render. */
+function EmbedDemo(props: { cardId: string; data: EmbedCardData }) {
+  const [log, setLog] = createSignal<CardEvent[]>([]);
+  let el: EmbedEl | undefined;
+  onMount(() => {
+    if (!el) return;
+    el.cardId = props.cardId;
+    el.data = props.data;
+    el.addEventListener('kai-card', (e) => {
+      const detail = (e as CustomEvent<CardEvent>).detail;
+      setLog((prev) => [...prev, detail]);
+      if (detail.kind === 'open' && detail.target === 'tab') {
+        window.open(detail.url, '_blank', 'noopener,noreferrer');
+      }
+    });
+  });
+  return (
+    <Frame>
+      <div style={{ display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
+        <kai-embed ref={(e) => (el = e as EmbedEl)} card-id={props.cardId} />
+        <pre
+          style={{
+            margin: 0,
+            'max-height': '180px',
+            overflow: 'auto',
+            background: 'var(--color-muted, #f4f4f5)',
+            'border-radius': '8px',
+            padding: '8px',
+            'font-size': '12px',
+          }}
+        >
+          {log().length === 0 ? '// emitted CardEvents appear here' : JSON.stringify(log(), null, 2)}
+        </pre>
+      </div>
+    </Frame>
+  );
+}
+
+const YT_ENVELOPE = {
+  type: 'embed',
+  id: 'card-embed-1',
+  title: 'Intro video',
+  data: { provider: 'youtube', id: 'dQw4w9WgXcQ', title: 'Product intro', aspectRatio: '16:9' },
+} satisfies { type: string; id: string; title: string; data: EmbedCardData };
+
+const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
+<kai-embed id="em"></kai-embed>
+
+<script type="module">
+  import '@kitn.ai/ui/elements'; // registers the custom elements
+
+  const em = document.getElementById('em');
+  em.cardId = 'card-embed-1';
+  // \`data\` is a JS property (the CardEnvelope \`data\`):
+  em.data = { provider: 'youtube', id: 'dQw4w9WgXcQ', title: 'Product intro' };
+
+  // NO network to YouTube until the user clicks play (privacy-first lazy facade).
+  // kai-embed emits: ready (on mount), open (on "Open on provider" click), error (blocked/invalid).
+  // The optional "Open on YouTube" affordance bubbles a composed \`kai-card\` open event:
+  em.addEventListener('kai-card', (e) => {
+    const ev = e.detail;
+    if (ev.kind === 'open' && ev.target === 'tab') {
+      window.open(ev.url, '_blank', 'noopener,noreferrer');
+    }
+  });
+</script>`;
+
+const meta = {
+  title: 'Generative UI/Cards/kai-embed',
+  tags: ['autodocs'],
+  argTypes: argTypesFor('kai-embed'),
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: specDescription('kai-embed', [
+        '`<kai-embed>` is a **privacy-first lazy media embed** (YouTube / Vimeo / allowlisted generic player) for the generative-UI feature. It speaks the **Card Contract**: data down (an `embed` `CardEnvelope`), events up (only the `open` verb, plus lifecycle `ready` / failure `error`).',
+        '**Lazy facade:** the initial render is just a **poster + play button** — NO provider iframe, NO third-party JS, NO cookies until the user clicks play. YouTube loads via `youtube-nocookie.com`; Vimeo with `dnt=1`. This buys privacy (no tracking until opt-in) and performance (no player JS on load).',
+        '**Security:** `generic` embeds frame an arbitrary https URL, so they are **rejected unless the app allowlists their origin** with `configureEmbedAllowlist([...])` (defaults to empty — an agent cannot frame an arbitrary origin). The player iframe is sandboxed for a *trusted provider* (`allow-scripts allow-same-origin` on a cross-origin player) — contrast `<kai-artifact>`, which trusts nothing.',
+        '**Never a dead end:** a persistent "Open on {provider}" affordance dispatches the `open` verb (so a provider that refuses framing still has a way out). Set `data` as a JS property; `card-id` via attribute.',
+        'See the **Code** tab for the `CardEnvelope` JSON + HTML wiring.',
+      ]),
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+/** YouTube (lazy) — poster + play; the iframe loads (youtube-nocookie) only on click. `ready` fires on mount; `open` fires if the "Open on YouTube" link is used. */
+export const YouTube: Story = {
+  name: 'YouTube (lazy)',
+  render: () => <EmbedDemo cardId={YT_ENVELOPE.id} data={YT_ENVELOPE.data} />,
+  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
+};
+
+/** Vimeo — supply a `poster` (Vimeo has no static thumbnail URL). */
+export const Vimeo: Story = {
+  render: () => (
+    <EmbedDemo
+      cardId="card-embed-2"
+      data={{
+        provider: 'vimeo',
+        id: '76979871',
+        title: 'Vimeo staff pick',
+        poster: 'https://placehold.co/1280x720/1ab7ea/ffffff/png?text=Vimeo',
+      }}
+    />
+  ),
+};
+
+/** Generic player — an https embed URL whose origin the app has allowlisted. */
+export const Generic: Story = {
+  name: 'Generic player',
+  render: () => {
+    configureEmbedAllowlist(['https://www.youtube-nocookie.com']);
+    return (
+      <EmbedDemo
+        cardId="card-embed-3"
+        data={{
+          provider: 'generic',
+          url: 'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ',
+          title: 'Generic embed',
+          poster: 'https://placehold.co/1280x720/444/fff/png?text=Generic+player',
+        }}
+      />
+    );
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `import { configureEmbedAllowlist } from '@kitn.ai/ui';
+
+// Generic embeds are blocked by default — allowlist the trusted origin first:
+configureEmbedAllowlist(['https://your-player.example.com']);
+
+em.data = {
+  provider: 'generic',
+  url: 'https://your-player.example.com/embed/abc',
+  title: 'Generic embed',
+  poster: 'https://your-cdn.example.com/poster.jpg',
+};`,
+        language: 'ts',
+      },
+    },
+  },
+};
+
+/** Custom aspect ratio — a vertical 9:16 short. */
+export const CustomAspectRatio: Story = {
+  name: 'Custom aspect ratio (9:16)',
+  render: () => (
+    <div style={{ width: '100%', 'max-width': '280px' }}>
+      <EmbedRaw
+        cardId="card-embed-4"
+        data={{ provider: 'youtube', id: 'dQw4w9WgXcQ', title: 'Short', aspectRatio: '9:16' }}
+      />
+    </div>
+  ),
+};
+
+/** Blocked-embed fallback — the "Open on provider" affordance is always present. */
+export const BlockedFallback: Story = {
+  name: 'Blocked-embed fallback',
+  render: () => <EmbedDemo cardId="card-embed-5" data={{ provider: 'youtube', id: 'dQw4w9WgXcQ', title: 'Maybe blocked' }} />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Some providers refuse framing (X-Frame-Options / CSP `frame-ancestors`). We can\'t detect that cross-origin in JS, so the **"Open on {provider}"** affordance is *always* available — a blocked embed is never a dead end.',
+      },
+    },
+  },
+};
+
+// A frame-less variant so the 9:16 story controls its own width.
+function EmbedRaw(props: { cardId: string; data: EmbedCardData }) {
+  let el: EmbedEl | undefined;
+  onMount(() => {
+    if (el) {
+      el.cardId = props.cardId;
+      el.data = props.data;
+    }
+  });
+  return <kai-embed ref={(e) => (el = e as EmbedEl)} />;
+}

package/src/elements/embed.tsx

@@ -0,0 +1,35 @@
+import { defineWebComponent } from './define';
+import { Embed } from '../components/embed';
+import type { EmbedCardData } from '../primitives/embed-providers';
+import { emitCardEvent } from '../primitives/card-routing';
+
+interface Props extends Record<string, unknown> {
+  /** Stable card id correlating every emitted event. Set as an attribute or property. */
+  cardId?: string;
+  /** The embed payload (provider + id/url + options). Set as a JS **property** (object). */
+  data?: EmbedCardData;
+}
+
+/**
+ * `<kai-embed>` — a privacy-first **lazy media embed** (YouTube / Vimeo / allowlisted
+ * generic player). Initial render is a poster + play button: NO provider iframe, JS,
+ * or cookies until the user clicks play (YouTube via `youtube-nocookie`, Vimeo with
+ * `dnt=1`). A persistent "Open on {provider}" affordance dispatches the contract
+ * `open` verb via the bubbling `kai-card` event. `generic` URLs are rejected unless
+ * their origin was allowlisted with `configureEmbedAllowlist`. Set `data` as a JS
+ * property; `card-id` via attribute.
+ */
+defineWebComponent<Props>(
+  'kai-embed',
+  {
+    cardId: undefined,
+    data: undefined,
+  },
+  (props, { element }) => (
+    <Embed
+      cardId={props.cardId ?? ''}
+      data={props.data ?? ({ provider: 'generic' } as EmbedCardData)}
+      onEmit={(event) => emitCardEvent(element, event)}
+    />
+  ),
+);

package/src/elements/empty.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { onMount } from 'solid-js';
+import './register'; // side effect: registers the custom elements
+import { argTypesFor, specDescription } from '../stories/docs/element-controls';
+
+// The web components are custom DOM elements, so declare the tags for JSX.
+declare module 'solid-js' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'kai-empty': JSX.HTMLAttributes<HTMLElement>;
+    }
+  }
+}
+
+const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
+<kai-empty
+  empty-title="No conversations yet"
+  description="Start a new chat to see it appear here."
+>
+  <!-- Route 2 slots: your own icon and actions -->
+  <svg slot="media" width="28" height="28" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="2">
+    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+  </svg>
+
+  <!-- Slotted actions are light DOM, so style them with your own page CSS
+       (a ghost button with a + icon, here styled inline for portability). -->
+  <button
+    style="display:inline-flex; align-items:center; gap:.45rem;
+           font:500 13.5px/1 system-ui,sans-serif; padding:.5rem .85rem;
+           border-radius:9px; border:1px solid var(--color-border, #e5e5e5);
+           background:transparent; color:inherit; cursor:pointer;"
+  >
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M5 12h14" /><path d="M12 5v14" />
+    </svg>
+    New chat
+  </button>
+</kai-empty>
+
+<script type="module">
+  import '@kitn.ai/ui/elements';   // registers the custom elements
+</script>`;
+
+const meta = {
+  title: 'Components/Empty',
+  tags: ['autodocs'],
+  argTypes: argTypesFor('kai-empty'),
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: specDescription('kai-empty', [
+          '`<kai-empty>` is the framework-agnostic **web component** for an empty-state block — an icon, a title, a description, and actions — isolated in **Shadow DOM**.',
+          '**When to use:** placeholder UI for an empty list/thread in a non-Solid app. In SolidJS, compose the `Empty*` primitives.',
+          '**Placement:** filling the main content area where a conversation list or message thread would appear; give it (or its parent) a height so the centered layout renders correctly.',
+          "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set `empty-title` (note `empty-title`, not `title`) and `description` via attributes, and use the **slots** (\"Route 2\") to project your own icon (`slot=\"media\"`) and actions (the default slot).",
+          'See the **Code** tab for HTML usage.',
+        ]),
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+/** Render the actual `<kai-empty>` custom element with slotted children. */
+function EmptyElement() {
+  let el: HTMLElement | undefined;
+  onMount(() => {
+    if (!el) return;
+    el.setAttribute('empty-title', 'No conversations yet');
+    el.setAttribute('description', 'Start a new chat to see it appear here.');
+  });
+  return (
+    <kai-empty ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', padding: '24px' }}>
+      <svg slot="media" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+      </svg>
+      {/* Slotted actions are light DOM — style them with the host page's own
+          CSS. Here a ghost "+ New chat" button, styled inline so it renders
+          correctly in any context (mirrors the composable example's pill-btn). */}
+      <button
+        style={{
+          display: 'inline-flex',
+          'align-items': 'center',
+          gap: '0.45rem',
+          font: '500 13.5px/1 system-ui, sans-serif',
+          padding: '0.5rem 0.85rem',
+          'border-radius': '9px',
+          border: '1px solid var(--color-border, #e5e5e5)',
+          background: 'transparent',
+          color: 'inherit',
+          cursor: 'pointer',
+        }}
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M5 12h14" /><path d="M12 5v14" />
+        </svg>
+        New chat
+      </button>
+    </kai-empty>
+  );
+}
+
+/** An empty state with a slotted icon and an action button. */
+export const Default: Story = {
+  render: () => <EmptyElement />,
+  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
+};

package/src/elements/empty.tsx

@@ -0,0 +1,29 @@
+import { Show } from 'solid-js';
+import { defineWebComponent } from './define';
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '../components/empty';
+
+interface Props extends Record<string, unknown> {
+  /** Title text. Attribute: `empty-title` (`title` is a global HTML attribute). */
+  emptyTitle?: string;
+  /** Description text. */
+  description?: string;
+}
+
+/**
+ * `<kai-empty>` — an empty-state block. `empty-title`/`description` via
+ * attributes; slot your own icon into `slot="media"` and actions into the
+ * default slot (Route 2 slots).
+ */
+defineWebComponent<Props>('kai-empty', {
+  emptyTitle: '',
+  description: '',
+}, (props) => (
+  <Empty>
+    <EmptyHeader>
+      <EmptyMedia variant="icon"><slot name="media" /></EmptyMedia>
+      <Show when={props.emptyTitle}><EmptyTitle>{props.emptyTitle}</EmptyTitle></Show>
+      <Show when={props.description}><EmptyDescription>{props.description}</EmptyDescription></Show>
+    </EmptyHeader>
+    <EmptyContent><slot /></EmptyContent>
+  </Empty>
+));

package/src/elements/feedback-bar.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { onMount } from 'solid-js';
+import './register'; // side effect: registers the custom elements
+import { argTypesFor, specDescription } from '../stories/docs/element-controls';
+
+// The web components are custom DOM elements, so declare the tags for JSX.
+declare module 'solid-js' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'kai-feedback-bar': JSX.HTMLAttributes<HTMLElement> & {
+        'bar-title'?: string;
+        'collect-detail'?: boolean | string;
+        'detail-title'?: string;
+        'thanks-message'?: string;
+        'on:kai-feedback'?: (e: CustomEvent<{ value: 'helpful' | 'not-helpful' }>) => void;
+        'on:kai-feedback-detail'?: (e: CustomEvent<{ value: 'helpful' | 'not-helpful'; category?: string; comment?: string }>) => void;
+        'on:kai-close'?: (e: CustomEvent) => void;
+      };
+    }
+  }
+}
+
+const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
+<kai-feedback-bar bar-title="Was this helpful?"></kai-feedback-bar>
+
+<script type="module">
+  import '@kitn.ai/ui/elements';   // registers the custom elements
+
+  const bar = document.querySelector('kai-feedback-bar');
+  bar.addEventListener('kai-feedback', (e) => console.log('feedback:', e.detail.value)); // 'helpful' | 'not-helpful'
+  bar.addEventListener('kai-close', () => bar.remove());
+</script>`;
+
+const meta = {
+  title: 'Components/FeedbackBar',
+  tags: ['autodocs'],
+  argTypes: argTypesFor('kai-feedback-bar'),
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: specDescription('kai-feedback-bar', [
+          '`<kai-feedback-bar>` is the framework-agnostic **web component** for an inline thumbs up/down feedback banner — isolated in **Shadow DOM**. It owns its own flow: it asks, optionally collects a category + comment on a not-helpful vote (`collect-detail`), then confirms with a thank-you in place. It does **not** disappear on a vote; only the close (X) dismisses it.',
+          '**When to use:** collecting a quick reaction (optionally with a reason) after an answer or a completed task. In SolidJS, use the `FeedbackBar` primitive.',
+          "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set the label via the `bar-title` attribute (`title` is avoided — it's a global HTML attribute). For the richer flow add `collect-detail` and set the `categories` **property** (array). Listen for `kai-feedback` (`{ value }`), `kai-feedback-detail` (`{ value, category?, comment? }`), and `kai-close` **CustomEvents**.",
+          'See the **Code** tab for HTML usage.',
+        ]),
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+/** The default feedback prompt. */
+export const Default: Story = {
+  render: () => (
+    <div style={{ padding: '24px', 'max-width': '480px' }}>
+      <kai-feedback-bar
+        on:kai-feedback={(e) => console.log('feedback:', e.detail.value)}
+        on:kai-close={() => console.log('closed')}
+      />
+    </div>
+  ),
+  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
+};
+
+/** A custom label via the `bar-title` attribute. */
+export const CustomTitle: Story = {
+  render: () => (
+    <div style={{ padding: '24px', 'max-width': '480px' }}>
+      <kai-feedback-bar bar-title="Did this answer your question?" />
+    </div>
+  ),
+};
+
+/** The full flow with `collect-detail` — a 👎 vote opens an optional detail form
+ *  (category chips from the `categories` property + a comment) before the thanks. */
+export const WithDetail: Story = {
+  render: () => {
+    let el: (HTMLElement & { categories?: string[] }) | undefined;
+    onMount(() => {
+      if (el) el.categories = ['Inaccurate', 'Not helpful', 'Unsafe', 'Other'];
+    });
+    return (
+      <div style={{ padding: '24px', 'max-width': '480px' }}>
+        <kai-feedback-bar
+          ref={(e) => (el = e as HTMLElement)}
+          bar-title="Was this response helpful?"
+          collect-detail
+          on:kai-feedback={(e) => console.log('vote:', e.detail.value)}
+          on:kai-feedback-detail={(e) => console.log('detail:', e.detail)}
+          on:kai-close={() => console.log('closed')}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<kai-feedback-bar id="fb" bar-title="Was this response helpful?" collect-detail></kai-feedback-bar>
+<script type="module">
+  import '@kitn.ai/ui/elements';
+  const fb = document.getElementById('fb');
+  fb.categories = ['Inaccurate', 'Not helpful', 'Unsafe', 'Other']; // chips (a JS property)
+  fb.addEventListener('kai-feedback', (e) => console.log('vote:', e.detail.value));
+  fb.addEventListener('kai-feedback-detail', (e) => console.log('detail:', e.detail)); // { value, category?, comment? }
+  fb.addEventListener('kai-close', () => fb.remove());
+</script>`,
+        language: 'html',
+      },
+    },
+  },
+};

package/src/elements/feedback-bar.tsx

@@ -0,0 +1,61 @@
+import { defineWebComponent } from './define';
+import { FeedbackBar, type FeedbackValue, type FeedbackDetail } from '../components/feedback-bar';
+
+interface Props extends Record<string, unknown> {
+  /** The banner label (e.g. "Was this helpful?"). Attribute: `bar-title`
+   *  (`title` is avoided — it's a global HTML attribute). */
+  barTitle?: string;
+  /** When set, a not-helpful vote opens an optional detail form before the
+   *  thank-you confirmation. Attribute: `collect-detail`. */
+  collectDetail?: boolean;
+  /** Optional category chips for the detail form. Set as a JS property (array). */
+  categories?: string[];
+  /** Heading for the detail form. Attribute: `detail-title`. */
+  detailTitle?: string;
+  /** Placeholder for the detail comment box. Attribute: `detail-placeholder`. */
+  detailPlaceholder?: string;
+  /** Submit button label in the detail form. Attribute: `submit-label`. */
+  submitLabel?: string;
+  /** Confirmation copy shown after a vote/submit. Attribute: `thanks-message`. */
+  thanksMessage?: string;
+}
+
+/** Events fired by `<kai-feedback-bar>`. */
+interface Events {
+  /** The user rated the response. `value` is `'helpful'` or `'not-helpful'`. */
+  'kai-feedback': { value: FeedbackValue };
+  /** The user submitted the optional detail form (`collect-detail`). */
+  'kai-feedback-detail': FeedbackDetail;
+  /** The user dismissed the banner. */
+  'kai-close': void;
+}
+
+/**
+ * `<kai-feedback-bar>` — an inline thumbs up/down feedback banner that owns its
+ * own flow: it asks, optionally collects a category + comment on a not-helpful
+ * vote (`collect-detail`), then confirms with a thank-you — all in place. Emits
+ * `kai-feedback` (`{ value }`), `kai-feedback-detail` (`{ value, category?, comment? }`),
+ * and `kai-close`.
+ */
+defineWebComponent<Props, Events>('kai-feedback-bar', {
+  barTitle: 'Was this helpful?',
+  collectDetail: undefined,
+  categories: undefined,
+  detailTitle: undefined,
+  detailPlaceholder: undefined,
+  submitLabel: undefined,
+  thanksMessage: undefined,
+}, (props, { dispatch, flag }) => (
+  <FeedbackBar
+    title={props.barTitle}
+    collectDetail={flag('collectDetail')}
+    categories={props.categories}
+    detailTitle={props.detailTitle}
+    detailPlaceholder={props.detailPlaceholder}
+    submitLabel={props.submitLabel}
+    thanksMessage={props.thanksMessage}
+    onFeedback={(value) => dispatch('kai-feedback', { value })}
+    onSubmitDetail={(detail) => dispatch('kai-feedback-detail', detail)}
+    onClose={() => dispatch('kai-close')}
+  />
+));