@epam/ai-dial-ui-kit 0.14.0 → 0.15.0-dev.1

package/dist/CHANGELOG.md

@@ -41,6 +41,7 @@ Versions match the git tags on the `development` branch.
 
 ### Fixed
 
+- **An optional editor peer broke the build of every consumer that did not install it** — this release moved `@monaco-editor/react`, `monaco-editor` and `@uiw/react-md-editor` to optional peers, so `npm install` stops bringing them in; but `JsonEditor` still reached `Editor` and the 2.0 markdown toolbar still reached its command set through **named** imports. A named import of a package that is not installed is a build error, not a runtime one: the root entry re-exports `LazyDialJsonEditor`/`LazyMarkdownEditor`, a bundler resolves a dynamic import target to chunk it, and Vite's stub for the absent optional peer exports nothing — so a host that installed nothing but this kit and React got `[MISSING_EXPORT] "Editor" is not exported by "__vite-optional-peer-dep:@monaco-editor/react:@epam/ai-dial-ui-kit"` and no bundle. Both modules now read their bindings off a namespace import, inside the render/getter that needs them, so nothing resolves by name at build time and a missing engine surfaces where it belongs: on the consumer that renders an editor without installing it. Types stay named — they are erased before any bundler sees them. Nothing changes for a host that installs the editor peers.
 - **`DialAnalyticsBarGroup` — compare-mode hover now highlights both bars of an entry as one block** — click already targeted the whole entry (label, delta, both bars), but hover used CSS `:hover` on each bar's own container, so only the bar under the pointer lit up (and a per-bar fill left a gap between the pair). The compare entry wrapper is now a Tailwind `group`; when `onBarClick` is set the shared bars container gets a default `group-hover` / `group-focus-visible` accent fill, and in compare mode `barClassName` applies to that container so consumers can use `group-hover:` for a continuous pair highlight. Single-bar mode is unchanged.
 - **`Tooltip` (2.0) and `DialTooltip` — no tooltip anywhere in an app embedded below 640px, mouse or not** — both bubbles asked `useIsMobileScreen()`, a `window.innerWidth < 640` test, and rendered `null` when it was true. Width is the wrong question: an app running inside an iframe reads the _iframe's_ width, so a chat in a 380px overlay panel lost every tooltip it had — the agent name on a conversation row included — while the desktop mouse hovering it worked exactly as before. The gate is now the `(hover: none)` media query, via the new internal `useHasHover`: a touch-only phone still gets nothing, since nothing there can reveal a hover-only bubble, and a narrow embed driven by a pointer gets its tooltips back. A hybrid device that gains or loses a hovering pointer re-evaluates without a reload, and an environment that cannot answer the question at all (SSR, or no `matchMedia`) counts as hover-capable, so a tooltip is never dropped on a guess. `(pointer: coarse)` is deliberately not part of the query — a touchscreen laptop on a mouse hovers fine. Tooltips remain unusable by touch, so a control still must not depend on one for its accessible name.
 - **`Grid` (2.0) — an `additionalGridOptions.rowSelection` put a second checkbox column on every row** — the grid draws its own selection column and switches ag-Grid's inputs off through `checkboxes` and `headerCheckbox`, but it passed `rowSelection` to ag-Grid _before_ spreading `additionalGridOptions`, so a consumer supplying that key at all replaced the whole object. Both flags default back to `true` for `multiRow`, and ag-Grid drew a full selection column of its own beside the grid's. `rowSelection` is now pulled out of `additionalGridOptions` and merged, the way `defaultColDef` already was: a consumer contributes `isRowSelectable` and the rest, while `mode`, `checkboxes` and `headerCheckbox` stay with `selectionMode` — which is what decides whether the column draws checkboxes or radios. Without a `selectionMode` there is no selection column, so a consumer's `rowSelection` still reaches ag-Grid untouched.

package/dist/JsonEditor-qv1Z0dLX.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),a=require("./lazy-tfN4sKhq.cjs"),c=require("@monaco-editor/react");function g(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const f=g(c),b={[a.EditorThemes.dark]:{base:"vs-dark",inherit:!1,rules:[{token:"string.key.json",foreground:"#37BABC"},{token:"string.value.json",foreground:"#5C8DEA"},{token:"number",foreground:"#D97C27"},{token:"keyword.json",foreground:"#F4CE46"},{token:"delimiter",foreground:"#EEF1F7"},{token:"delimiter.bracket.json",foreground:"#A972FF"},{token:"delimiter.parenthesis",foreground:"#A972FF"}],colors:{"editor.foreground":"#F76464","editor.background":"#161B2D","editorCursor.foreground":"#EEF1F7","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}},[a.EditorThemes.light]:{base:"vs",inherit:!1,rules:[{token:"string.key.json",foreground:"#009D9F"},{token:"string.value.json",foreground:"#2764D9"},{token:"number",foreground:"#B25500"},{token:"keyword.json",foreground:"#3F3D25"},{token:"delimiter",foreground:"#161B2D"},{token:"delimiter.bracket.json",foreground:"#7E39EC"},{token:"delimiter.parenthesis",foreground:"#7E39EC"}],colors:{"editor.foreground":"#AE2F2F","editor.background":"#EEF1F7","editorCursor.foreground":"#161B2D","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}}},k=({value:e,onChange:o,onValidateJSON:r,options:t,currentTheme:n,themesConfig:s=b})=>{function d(i){i?.editor?.defineTheme(n,s[n]),i.languages.json.jsonDefaults.setDiagnosticsOptions({validate:!0,enableSchemaRequest:!1,schemas:[{uri:"http://custom-schema/object-required.json",fileMatch:["*"],schema:{type:"object",description:"Top-level value must be an object",additionalProperties:!0}}]})}const{Editor:l}=f;return u.jsx(l,{beforeMount:d,height:"100%",defaultLanguage:"json",value:e,onChange:o,theme:n,onValidate:r,options:{minimap:{enabled:!1},formatOnType:!0,formatOnPaste:!0,selectOnLineNumbers:!1,automaticLayout:!0,scrollBeyondLastLine:!1,wordWrap:"on",smoothScrolling:!0,overviewRulerLanes:0,scrollbar:{horizontal:"hidden",verticalScrollbarSize:4,verticalSliderSize:4},...t??{}}})};exports.DialJsonEditor=k;

package/dist/MarkdownEditor-DHn2pYOJ.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-tfN4sKhq.cjs"),k=require("./merge-classes-Dipy1Ih1.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const b=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:x,strikethrough:g,table:h,unorderedListCommand:C}=b;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(g,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(x,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(h,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=b;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m})=>{const I=j.useMemo(()=>M(),[]),x=j.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:g=>i?.(g||""),height:r,preview:u,commands:I,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;

package/dist/{MarkdownEditor-5kljDPcm.cjs → MarkdownEditor-jQ8nDJfx.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@uiw/react-md-editor"),m=require("./lazy-B1eG0EeX.cjs"),u=require("./merge-classes-Dipy1Ih1.cjs"),x=({value:t,onChange:s,height:o=300,preview:i="edit",theme:a=m.EditorThemes.dark,className:n,placeholder:r})=>{const d=r!==void 0&&!t;return e.jsxs("div",{"data-color-mode":a,className:u.mergeClasses("relative",n),children:[e.jsx(c,{value:t,onChange:l=>s?.(l||""),height:o,preview:i}),d&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:r})]})};exports.DialMarkdownEditor=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@uiw/react-md-editor"),m=require("./lazy-tfN4sKhq.cjs"),u=require("./merge-classes-Dipy1Ih1.cjs"),x=({value:t,onChange:s,height:o=300,preview:i="edit",theme:a=m.EditorThemes.dark,className:n,placeholder:r})=>{const d=r!==void 0&&!t;return e.jsxs("div",{"data-color-mode":a,className:u.mergeClasses("relative",n),children:[e.jsx(c,{value:t,onChange:l=>s?.(l||""),height:o,preview:i}),d&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:r})]})};exports.DialMarkdownEditor=x;

package/dist/{MarkdownEditorContainer-BqTGQArV.cjs → MarkdownEditorContainer-Bzcnoemw.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),m=require("./Switch-CUKClcEz.cjs"),E=require("./lazy-B1eG0EeX.cjs"),N=require("./MarkdownEditor-5kljDPcm.cjs"),b=({value:r,onChangeValue:l,label:i,headerContent:a,switcherLabel:d,height:c=300,theme:u=E.EditorThemes.dark,onValidateJSON:x,preview:j="edit"})=>{const w=n.useId(),[t,C]=n.useState(!1),[f,p]=n.useState(null);n.useEffect(()=>{t&&typeof window<"u"&&Promise.resolve().then(()=>require("./JsonEditor-BlaSMX26.cjs")).then(s=>{p(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),S=n.useCallback(s=>{x?.(s)},[x]),o=!!d;return e.jsx("div",{className:"size-full flex flex-col",children:e.jsx("div",{className:"flex flex-col gap-8",children:e.jsxs("div",{children:[(i||a||o)&&e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[i&&e.jsx(m.DialLabel,{label:i}),e.jsxs("div",{className:"flex items-center gap-2 flex-1 justify-end",children:[a,o&&e.jsx("label",{className:"flex items-center gap-2 cursor-pointer",children:e.jsx(m.DialSwitch,{isOn:t,label:d,switchId:w,onChange:s=>C(s)})})]})]}),o&&t?e.jsx("div",{className:"border border-primary rounded",style:{height:`${c}px`},children:f&&e.jsx(f,{value:r,onChange:h,onValidateJSON:S,currentTheme:u})}):e.jsx(N.DialMarkdownEditor,{value:r,onChange:h,height:c,preview:j,theme:u})]})})})};exports.DialMarkdownEditorContainer=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),m=require("./Switch-CUKClcEz.cjs"),E=require("./lazy-tfN4sKhq.cjs"),N=require("./MarkdownEditor-jQ8nDJfx.cjs"),b=({value:r,onChangeValue:l,label:i,headerContent:a,switcherLabel:d,height:c=300,theme:u=E.EditorThemes.dark,onValidateJSON:x,preview:j="edit"})=>{const w=n.useId(),[t,C]=n.useState(!1),[f,p]=n.useState(null);n.useEffect(()=>{t&&typeof window<"u"&&Promise.resolve().then(()=>require("./JsonEditor-qv1Z0dLX.cjs")).then(s=>{p(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),S=n.useCallback(s=>{x?.(s)},[x]),o=!!d;return e.jsx("div",{className:"size-full flex flex-col",children:e.jsx("div",{className:"flex flex-col gap-8",children:e.jsxs("div",{children:[(i||a||o)&&e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[i&&e.jsx(m.DialLabel,{label:i}),e.jsxs("div",{className:"flex items-center gap-2 flex-1 justify-end",children:[a,o&&e.jsx("label",{className:"flex items-center gap-2 cursor-pointer",children:e.jsx(m.DialSwitch,{isOn:t,label:d,switchId:w,onChange:s=>C(s)})})]})]}),o&&t?e.jsx("div",{className:"border border-primary rounded",style:{height:`${c}px`},children:f&&e.jsx(f,{value:r,onChange:h,onValidateJSON:S,currentTheme:u})}):e.jsx(N.DialMarkdownEditor,{value:r,onChange:h,height:c,preview:j,theme:u})]})})})};exports.DialMarkdownEditorContainer=b;

package/dist/components/JsonEditor/JsonEditor.js

@@ -1,13 +1,13 @@
-import { jsx as l } from "react/jsx-runtime";
-import { EDITOR_THEMES_CONFIG as u } from "../../constants/editor.js";
-import { Editor as c } from "@monaco-editor/react";
+import { jsx as u } from "react/jsx-runtime";
+import { EDITOR_THEMES_CONFIG as c } from "../../constants/editor.js";
+import * as m from "@monaco-editor/react";
 const p = ({
   value: o,
   onChange: a,
   onValidateJSON: r,
   options: i,
   currentTheme: e,
-  themesConfig: s = u
+  themesConfig: s = c
 }) => {
   function n(t) {
     t?.editor?.defineTheme(
@@ -29,8 +29,9 @@ const p = ({
       ]
     });
   }
-  return /* @__PURE__ */ l(
-    c,
+  const { Editor: l } = m;
+  return /* @__PURE__ */ u(
+    l,
     {
       beforeMount: n,
       height: "100%",

package/dist/components/MarkdownEditor/MarkdownEditor.js

@@ -1,7 +1,7 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
 import c from "@uiw/react-md-editor";
 import { EditorThemes as p } from "../../types/editor.js";
-import { mergeClasses as x } from "../../utils/merge-classes.js";
+import { mergeClasses as f } from "../../utils/merge-classes.js";
 const g = ({
   value: o,
   onChange: r,
@@ -12,17 +12,17 @@ const g = ({
   placeholder: e
 }) => {
   const m = e !== void 0 && !o;
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ n(
     "div",
     {
       "data-color-mode": a,
-      className: x("relative", d),
+      className: f("relative", d),
       children: [
         /* @__PURE__ */ t(
           c,
           {
             value: o,
-            onChange: (n) => r?.(n || ""),
+            onChange: (l) => r?.(l || ""),
             height: i,
             preview: s
           }

package/dist/components/New/MarkdownEditor/MarkdownEditor.js

@@ -4,23 +4,23 @@ import g from "@uiw/react-md-editor";
 import { EditorThemes as k } from "../../../types/editor.js";
 import { mergeClasses as w } from "../../../utils/merge-classes.js";
 import { getMarkdownFormattingCommands as x, getMarkdownExtraCommands as C } from "./constants.js";
-const j = ({
+const b = ({
   value: m,
   onChange: t,
   height: a = 300,
   theme: e = k.light,
-  className: i,
-  placeholder: d,
+  className: d,
+  placeholder: i,
   defaultPreview: n = "edit",
   id: s,
-  ariaLabel: p
+  ariaLabel: l
 }) => {
-  const l = r(() => x(), []), c = r(() => C(), []);
+  const p = r(() => x(), []), c = r(() => C(), []);
   return /* @__PURE__ */ o(
     "div",
     {
       "data-color-mode": e,
-      className: w("dial-kit-markdown-editor", i),
+      className: w("dial-kit-markdown-editor", d),
       children: /* @__PURE__ */ o(
         g,
         {
@@ -28,14 +28,14 @@ const j = ({
           onChange: (f) => t?.(f || ""),
           height: a,
           preview: n,
-          commands: l,
+          commands: p,
           extraCommands: c,
-          textareaProps: { placeholder: d, id: s, "aria-label": p }
+          textareaProps: { placeholder: i, id: s, "aria-label": l }
         }
       )
     }
   );
 };
 export {
-  j as MarkdownEditor
+  b as MarkdownEditor
 };

package/dist/components/New/MarkdownEditor/constants.js

@@ -1,43 +1,64 @@
 import { jsx as o } from "react/jsx-runtime";
-import { divider as n, group as c, heading1 as d, heading2 as I, heading3 as a, bold as m, italic as s, strikethrough as l, unorderedListCommand as g, orderedListCommand as u, quote as L, link as O, code as h, table as C, codeEdit as _, codeLive as p, codePreview as T, fullscreen as k } from "@uiw/react-md-editor";
-import { IconTextSize as x, IconBold as N, IconItalic as S, IconStrikethrough as b, IconList as f, IconListNumbers as E, IconQuote as A, IconLink as M, IconCode as P, IconTable as R, IconPencil as w, IconLayoutColumns as y, IconEye as v, IconMaximize as z } from "@tabler/icons-react";
-import { DIAL_KIT_ICON_STROKE as B } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as D } from "../../../constants/icon.js";
-const K = D.SM, e = {
-  size: K,
-  stroke: B
+import * as a from "@uiw/react-md-editor";
+import { IconTextSize as C, IconBold as _, IconItalic as p, IconStrikethrough as T, IconList as k, IconListNumbers as x, IconQuote as E, IconLink as N, IconCode as S, IconTable as b, IconPencil as f, IconLayoutColumns as A, IconEye as M, IconMaximize as P } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as R } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as v } from "../../../constants/icon.js";
+const w = v.SM, e = {
+  size: w,
+  stroke: R
 }, t = (i, r) => ({
   ...i,
   icon: r
-}), W = () => [
-  t(m, /* @__PURE__ */ o(N, { ...e })),
-  t(s, /* @__PURE__ */ o(S, { ...e })),
-  t(l, /* @__PURE__ */ o(b, { ...e })),
-  n,
-  c([d, I, a], {
-    name: "heading",
-    groupName: "heading",
-    icon: /* @__PURE__ */ o(x, { ...e }),
-    buttonProps: { "aria-label": "Text style", title: "Text style" }
-  }),
-  n,
-  t(g, /* @__PURE__ */ o(f, { ...e })),
-  t(u, /* @__PURE__ */ o(E, { ...e })),
-  n,
-  t(L, /* @__PURE__ */ o(A, { ...e })),
-  t(O, /* @__PURE__ */ o(M, { ...e })),
-  t(h, /* @__PURE__ */ o(P, { ...e })),
-  n,
-  t(C, /* @__PURE__ */ o(R, { ...e }))
-], G = () => [
-  t(_, /* @__PURE__ */ o(w, { ...e })),
-  t(p, /* @__PURE__ */ o(y, { ...e })),
-  t(T, /* @__PURE__ */ o(v, { ...e })),
-  n,
-  t(k, /* @__PURE__ */ o(z, { ...e }))
-];
+}), K = () => {
+  const {
+    bold: i,
+    code: r,
+    divider: n,
+    group: c,
+    heading1: d,
+    heading2: m,
+    heading3: I,
+    italic: s,
+    link: l,
+    orderedListCommand: u,
+    quote: g,
+    strikethrough: L,
+    table: O,
+    unorderedListCommand: h
+  } = a;
+  return [
+    t(i, /* @__PURE__ */ o(_, { ...e })),
+    t(s, /* @__PURE__ */ o(p, { ...e })),
+    t(L, /* @__PURE__ */ o(T, { ...e })),
+    n,
+    c([d, m, I], {
+      name: "heading",
+      groupName: "heading",
+      icon: /* @__PURE__ */ o(C, { ...e }),
+      buttonProps: { "aria-label": "Text style", title: "Text style" }
+    }),
+    n,
+    t(h, /* @__PURE__ */ o(k, { ...e })),
+    t(u, /* @__PURE__ */ o(x, { ...e })),
+    n,
+    t(g, /* @__PURE__ */ o(E, { ...e })),
+    t(l, /* @__PURE__ */ o(N, { ...e })),
+    t(r, /* @__PURE__ */ o(S, { ...e })),
+    n,
+    t(O, /* @__PURE__ */ o(b, { ...e }))
+  ];
+}, Z = () => {
+  const { codeEdit: i, codeLive: r, codePreview: n, divider: c, fullscreen: d } = a;
+  return [
+    t(i, /* @__PURE__ */ o(f, { ...e })),
+    t(r, /* @__PURE__ */ o(A, { ...e })),
+    t(n, /* @__PURE__ */ o(M, { ...e })),
+    c,
+    t(d, /* @__PURE__ */ o(P, { ...e }))
+  ];
+};
 export {
-  K as MARKDOWN_TOOLBAR_ICON_SIZE,
-  G as getMarkdownExtraCommands,
-  W as getMarkdownFormattingCommands
+  w as MARKDOWN_TOOLBAR_ICON_SIZE,
+  Z as getMarkdownExtraCommands,
+  K as getMarkdownFormattingCommands
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.14.0",
-  "generatedAt": "2026-09-14T15:28:02.969Z",
+  "version": "0.15.0-dev.1",
+  "generatedAt": "2026-09-14T16:58:20.214Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",