@salsita-ai/sdk 0.50.0-develop.bb71259564 → 0.50.0-develop.bc204720a8

package/dist/configurator/ui/assistant/form/AssistantForm.d.ts

@@ -1,9 +1,65 @@
+import type { ButtonProps, ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+import { type AssistantBuiltInFormSlots } from './built-in-form-slots.js';
+declare const MuiComponentName: 'PhxAssistantForm';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: AssistantFormSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantFormProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
 /**
  * Where a form stands in its reply: still being written, written while the reply goes on, or ready
  * for the user once the reply has ended.
  */
 export type AssistantFormStatus = 'writing' | 'waiting' | 'ready';
-export interface AssistantFormProps {
+declare const Slots: {
+    readonly Root: 'root';
+    readonly SubmitButton: 'submitButton';
+    readonly FixButton: 'fixButton';
+    readonly Note: 'note';
+};
+type AssistantFormSlots = ValueOf<typeof Slots>;
+export interface ThemeableAssistantFormProps {
+    /**
+     * The components used for each slot inside a form the assistant wrote.
+     *
+     * Element slots:
+     * - `root` — The form (`div`).
+     * - `submitButton` — The Submit control of a form that asks more than one question (`Button`).
+     * - `fixButton` — The control that asks the assistant to fix a form it could not build (`Button`).
+     * - `note` — The note shown while a form is written, or when it could not be built (`div`).
+     *
+     * Component slots, one per built-in form element, each given that element's props:
+     * `group`, `choice`, `choices`, `reply`, `card`, `swatch`, `text`, `number` and `confirm`.
+     * The project's own form elements are registered with `createAssistantFormElement` instead.
+     */
+    readonly slots?: Partial<Record<AssistantFormSlots, ElementType>> & AssistantBuiltInFormSlots;
+    /**
+     * Props applied to each element slot.
+     *
+     * - `root` — Props for the form.
+     * - `submitButton` — Props for the Submit control.
+     * - `fixButton` — Props for the Fix control.
+     * - `note` — Props for the note.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.SubmitButton]: ButtonProps;
+        readonly [Slots.FixButton]: ButtonProps;
+        readonly [Slots.Note]: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
+export interface AssistantFormProps extends ThemeableAssistantFormProps {
     /** The markup inside the ```` ```form ```` fence. */
     readonly source: string;
     readonly status: AssistantFormStatus;
@@ -16,4 +72,5 @@ export interface AssistantFormProps {
  * The state lives here, so unfinished input is lost when the form unmounts: accepted, because a
  * form is shown only in the last reply of the thread.
  */
-export declare const AssistantForm: import("react").MemoExoticComponent<({ source, status }: AssistantFormProps) => import("react/jsx-runtime").JSX.Element | null>;
+export declare const AssistantForm: import("react").MemoExoticComponent<(inProps: AssistantFormProps) => import("react/jsx-runtime").JSX.Element | null>;
+export {};

package/dist/configurator/ui/assistant/form/AssistantForm.js

@@ -1 +1 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Trans as r}from"@lingui/react";import{Button as o,styled as t}from"@mui/material";import{memo as n,useCallback as a,useEffect as s,useMemo as l,useState as d}from"react";import{match as m}from"ts-pattern";import{useConfigurator as c}from"../../../application-runtime/index.js";import{AssistantPanelName as p}from"../theme.js";import{composeAnswer as u}from"./compose-answer.js";import{describeBuildErrors as b}from"./describe-build-errors.js";import{parseFormBlock as f}from"./parse-form-block.js";import{useFormRegistry as g}from"./registry/index.js";let h=t("div",{name:p,slot:"form"})(({theme:{spacing:e}})=>({display:"flex",flexDirection:"column",gap:e(1.5),marginBlock:e(1)})),k=t(o,{name:p,slot:"formSubmit"})(({theme:{palette:e,spacing:i,typography:r}})=>({...r.body2,alignSelf:"end",background:e.primary.main,border:"none",borderRadius:8,color:e.primary.contrastText,fontWeight:r.fontWeightMedium,letterSpacing:"normal",minBlockSize:0,minInlineSize:0,paddingBlock:i(.5),paddingInline:i(2),textTransform:"none","&:hover":{background:e.primary.dark,border:"none"},"&.Mui-disabled":{background:e.action.disabledBackground,border:"none",color:e.action.disabled}})),w=t("div",{name:p,slot:"formNote"})(({theme:{palette:e,shape:i,spacing:r,typography:o}})=>({...o.caption,alignItems:"center",background:e.action.hover,borderRadius:i.borderRadius,color:e.text.secondary,display:"flex",flexWrap:"wrap",gap:r(1),justifyContent:"space-between",marginBlock:r(1),paddingBlock:r(1),paddingInline:r(1.5)})),x=({model:o,disabled:t,send:n})=>{let[a,s]=d(()=>new Map),[l,c]=d(()=>new Map),p=(i,r)=>{let{id:l,definition:d,label:b,attributes:f}=i;return m(d).with({role:"option"},({component:d})=>e(d,{attributes:f,label:b,disabled:t,selected:!0===a.get(l),onSelect:e=>{o.isQuick?n(u(o,new Map([[i.id,!0]]),new Map([[i.id,e]]))):(c(r=>new Map(r).set(i.id,e)),s(e=>{let o=new Map(e);if("choice"===r.definition.role){for(let e of r.children)o.delete(e.id);o.set(i.id,!0)}else o.set(i.id,!0!==e.get(i.id));return o}))}},l)).with({role:"input"},({component:r})=>e(r,{attributes:f,label:b,disabled:t,state:a.get(l),onChange:(e,r)=>{o.isQuick?n(u(o,new Map([[i.id,e]]),new Map([[i.id,r]]))):(s(r=>new Map(r).set(i.id,e)),c(e=>new Map(e).set(i.id,r)))}},l)).with({role:"group"},{role:"choice"},{role:"choices"},({component:r})=>e(r,{attributes:f,label:b,disabled:t,children:i.children.map(e=>p(e,i))},l)).exhaustive()};return i(h,{children:[o.root.children.map(e=>p(e,o.root)),!o.isQuick&&e(k,{variant:"contained",disabled:t,disableElevation:!0,onClick:()=>{t||o.isQuick||n(u(o,a,l))},children:e(r,{id:"sdk.assistant.form.submit.label",message:"Submit"})})]})};export const AssistantForm=n(({source:t,status:n})=>{let{assistantSystem:m}=c(),[p,u]=d(!1),h="writing"===n,k=g(),M=l(()=>h?void 0:f(t,k),[t,h,k]),y="ready"!==n||p,j=a(e=>{u(!0),m.send(e).finally(()=>u(!1))},[m]);return(s(()=>{M?.ok===!1&&console.warn("The assistant wrote a form that could not be built.",M.errors)},[M]),M)?M.ok?0===M.root.children.length?null:e(x,{model:M,disabled:y,send:j}):i(w,{role:"alert",children:[e("span",{children:e(r,{id:"sdk.assistant.form.failure",message:"The assistant couldn't build this form."})}),e(o,{size:"small",variant:"outlined",color:"inherit",disabled:y,onClick:()=>j(b(M.errors)),children:e(r,{id:"sdk.assistant.form.fix.label",message:"Fix it"})})]}):e(w,{children:e(r,{id:"sdk.assistant.form.writing",message:"Preparing a form…"})})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Trans as i}from"@lingui/react";import{Button as o,styled as n,useThemeProps as r}from"@mui/material";import{memo as a,useCallback as s,useEffect as d,useMemo as l,useState as m}from"react";import{match as c}from"ts-pattern";import{hoverStyles as p}from"#package/ui-sdk";import{useConfigurator as u}from"../../../application-runtime/index.js";import{createBuiltInFormSlotDefinitions as b}from"./built-in-form-slots.js";import{composeAnswer as f}from"./compose-answer.js";import{describeBuildErrors as g}from"./describe-build-errors.js";import{parseFormBlock as h}from"./parse-form-block.js";import{useFormRegistry as k}from"./registry/index.js";let x="PhxAssistantForm",w=n("div",{name:x,slot:"root"})(({theme:{spacing:e}})=>({display:"flex",flexDirection:"column",gap:e(1.5),marginBlock:e(1)})),y=n(o,{name:x,slot:"submitButton"})(({theme:{palette:e,spacing:t,typography:i}})=>({...i.body2,alignSelf:"end",background:e.primary.main,border:"none",borderRadius:8,color:e.primary.contrastText,fontWeight:i.fontWeightMedium,letterSpacing:"normal",minBlockSize:0,minInlineSize:0,paddingBlock:t(.5),paddingInline:t(2),textTransform:"none","&:hover":{background:e.primary.dark,border:"none"},"&.Mui-disabled":{background:e.action.disabledBackground,border:"none",color:e.action.disabled}})),B=n(o,{name:x,slot:"fixButton"})(({theme:{palette:e,spacing:t,typography:i}})=>({...i.caption,background:"transparent",border:`1px solid ${e.divider}`,borderRadius:8,boxShadow:"none",color:e.text.primary,fontWeight:i.fontWeightMedium,letterSpacing:"normal",minBlockSize:0,minInlineSize:0,paddingBlock:t(.25),paddingInline:t(1.5),textTransform:"none","&:hover":{background:"transparent",border:`1px solid ${e.divider}`,boxShadow:"none"},...p({"&:hover":{background:e.action.hover}}),"&.Mui-disabled":{background:"transparent",border:`1px solid ${e.action.disabledBackground}`,color:e.action.disabled}})),v=n("div",{name:x,slot:"note"})(({theme:{palette:e,shape:t,spacing:i,typography:o}})=>({...o.caption,alignItems:"center",background:e.action.hover,borderRadius:t.borderRadius,color:e.text.secondary,display:"flex",flexWrap:"wrap",gap:i(1),justifyContent:"space-between",marginBlock:i(1),paddingBlock:i(1),paddingInline:i(1.5)})),M=new Set(["text","search","email","url","tel","number","password"]),S=({model:o,disabled:n,send:r,root:a,submitButton:l,slotProps:p,slotDefinitions:u})=>{let[b,g]=m(()=>new Map),[h,k]=m(()=>new Map),x=(t,i)=>{let{id:a,label:s,attributes:d}=t;return c(u.get(t.definition.name)??t.definition).with({role:"option"},({component:l})=>e(l,{attributes:d,label:s,disabled:n,selected:!0===b.get(a),onSelect:e=>{o.isQuick?r(f(o,new Map([[t.id,!0]]),new Map([[t.id,e]]))):(k(i=>new Map(i).set(t.id,e)),g(e=>{let o=new Map(e);if("choice"===i.definition.role){for(let e of i.children)o.delete(e.id);o.set(t.id,!0)}else o.set(t.id,!0!==e.get(t.id));return o}))}},a)).with({role:"input"},({component:i})=>e(i,{attributes:d,label:s,disabled:n,state:b.get(a),onChange:(e,i)=>{o.isQuick?r(f(o,new Map([[t.id,e]]),new Map([[t.id,i]]))):(g(i=>new Map(i).set(t.id,e)),k(e=>new Map(e).set(t.id,i)))}},a)).with({role:"group"},{role:"choice"},{role:"choices"},({component:i})=>e(i,{attributes:d,label:s,disabled:n,children:t.children.map(e=>x(e,t))},a)).exhaustive()},w=s(()=>{n||o.isQuick||r(f(o,b,h))},[n,o,r,b,h]),[y,B]=m(!1);return d(()=>{y&&(B(!1),w())},[y,w]),t(a,{...p.root,onKeyDown:e=>{!("Enter"===e.key&&!e.nativeEvent.isComposing&&!e.shiftKey&&!e.ctrlKey&&!e.altKey&&!e.metaKey&&!e.defaultPrevented&&e.target instanceof HTMLInputElement&&M.has(e.target.type))||n||o.isQuick||B(!0)},children:[o.root.children.map(e=>x(e,o.root)),!o.isQuick&&e(l,{variant:"contained",disableElevation:!0,...p.submitButton,disabled:n,onClick:w,children:e(i,{id:"sdk.assistant.form.submit.label",message:"Submit"})})]})};export const AssistantForm=a(o=>{let{source:n,status:a,slots:c={},slotProps:p={}}=r({props:o,name:x}),{assistantSystem:f}=u(),[M,j]=m(!1),I="writing"===a,T=k(),C=l(()=>I?void 0:h(n,T),[n,I,T]),K="ready"!==a||M,Q=s(e=>{j(!0),f.send(e).finally(()=>j(!1))},[f]);d(()=>{C?.ok===!1&&console.warn("The assistant wrote a form that could not be built.",C.errors)},[C]);let{group:W,choice:z,choices:E,reply:P,card:R,swatch:D,text:F,number:$,confirm:A}=c,H=l(()=>b({group:W,choice:z,choices:E,reply:P,card:R,swatch:D,text:F,number:$,confirm:A}),[W,z,E,P,R,D,F,$,A]),L=c.note??v,q=c.fixButton??B;return C?C.ok?0===C.root.children.length?null:e(S,{model:C,disabled:K,send:Q,root:c.root??w,submitButton:c.submitButton??y,slotProps:p,slotDefinitions:H}):t(L,{role:"alert",...p.note,children:[e("span",{children:e(i,{id:"sdk.assistant.form.failure",message:"The assistant couldn't build this form."})}),e(q,{...p.fixButton,disabled:K,onClick:()=>Q(g(C.errors)),children:e(i,{id:"sdk.assistant.form.fix.label",message:"Fix it"})})]}):e(L,{...p.note,children:e(i,{id:"sdk.assistant.form.writing",message:"Preparing a form…"})})});

package/dist/configurator/ui/assistant/form/built-in-form-slots.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import { type AssistantBuiltInFormElementName } from '#package/domain';
+import { type BuiltInFormElementProps, type FormElementDefinition } from './registry/index.js';
+/**
+ * The components a form renders its built-in elements with in place of the SDK's, one per element
+ * name, each given the props of that element. An element left out keeps its built-in component.
+ */
+export type AssistantBuiltInFormSlots = {
+    readonly [NAME in AssistantBuiltInFormElementName]?: (props: BuiltInFormElementProps<NAME>) => ReactNode;
+};
+/**
+ * The definitions of the built-in elements a form renders with another component, by name. The
+ * registry is left as it is: a project element can never take a built-in's name, so a node whose
+ * element has one of these names is that built-in.
+ */
+export declare const createBuiltInFormSlotDefinitions: (slots: AssistantBuiltInFormSlots) => ReadonlyMap<string, FormElementDefinition>;

package/dist/configurator/ui/assistant/form/built-in-form-slots.js

@@ -0,0 +1 @@
+import{ASSISTANT_BUILT_IN_FORM_ELEMENTS as e}from"#package/domain";import{createFormElementDefinition as t}from"./registry/index.js";export const createBuiltInFormSlotDefinitions=r=>new Map(e.flatMap(e=>{let n=r[e.name];return n?[[e.name,t(e,n)]]:[]}));

package/dist/configurator/ui/assistant/form/index.d.ts

@@ -1,4 +1,5 @@
 export { AssistantForm } from './AssistantForm.js';
-export type { AssistantFormStatus } from './AssistantForm.js';
+export type { AssistantFormStatus, ThemeableAssistantFormProps } from './AssistantForm.js';
+export type { AssistantBuiltInFormSlots } from './built-in-form-slots.js';
 export type { AssistantFormElementRoleProps, AssistantFormElementType, CreateAssistantFormElement, } from './registry/index.js';
 export { createAssistantFormElementFactory } from './registry/index.js';

package/dist/configurator/ui/assistant/form/registry/built-in-form-elements.d.ts

@@ -1,3 +1,29 @@
+import { ASSISTANT_BUILT_IN_FORM_ELEMENTS, type AssistantBuiltInFormElementAttributes, type AssistantBuiltInFormElementName } from '#package/domain';
+import { type FormContainerProps, type FormInputProps, type FormOptionProps } from '../../form-elements/index.js';
 import { type FormElementDefinition } from './form-element-definition.js';
+type BuiltInFormElementRole<NAME extends AssistantBuiltInFormElementName> = Extract<(typeof ASSISTANT_BUILT_IN_FORM_ELEMENTS)[number], {
+    readonly name: NAME;
+}>['role'];
+/** The state each built-in input keeps, which the form hands back to it. */
+interface BuiltInFormInputStates {
+    readonly text: string;
+    readonly number: number;
+    readonly confirm: boolean;
+}
+/** The props the component of a built-in element takes: those of its role, typed from its descriptor. */
+export type BuiltInFormElementProps<NAME extends AssistantBuiltInFormElementName> = BuiltInFormElementRole<NAME> extends 'option' ? FormOptionProps<AssistantBuiltInFormElementAttributes<NAME>> : BuiltInFormElementRole<NAME> extends 'input' ? FormInputProps<NAME extends keyof BuiltInFormInputStates ? BuiltInFormInputStates[NAME] : never, AssistantBuiltInFormElementAttributes<NAME>> : FormContainerProps<AssistantBuiltInFormElementAttributes<NAME>>;
+type Same<A, B> = (<T>() => T extends A ? 1 : 2) extends <T>() => (T extends B ? 1 : 2) ? true : false;
+type PropsOf<COMPONENT> = COMPONENT extends (props: infer PROPS) => unknown ? PROPS : never;
+/**
+ * Checks the component of every built-in element against the name it stands under, since the
+ * definition built from it is cast on the word that the two belong together: an entry whose
+ * component does not take exactly the props of its name becomes `never`. Exactly, because
+ * assignability would let a component whose attributes are all optional, or that reports another
+ * state through a method, stand under another name.
+ */
+export type BuiltInFormComponents<COMPONENTS extends Readonly<Record<AssistantBuiltInFormElementName, unknown>>> = {
+    readonly [NAME in AssistantBuiltInFormElementName]: Same<PropsOf<COMPONENTS[NAME]>, BuiltInFormElementProps<NAME>> extends true ? COMPONENTS[NAME] : never;
+};
 /** The elements of every assistant form: the built-ins the SDK prompt lists, with their components. */
 export declare const BUILT_IN_FORM_ELEMENTS: readonly FormElementDefinition[];
+export {};

package/dist/configurator/ui/assistant/form/registry/index.d.ts

@@ -1,4 +1,4 @@
-export { BUILT_IN_FORM_ELEMENTS } from './built-in-form-elements.js';
+export { BUILT_IN_FORM_ELEMENTS, type BuiltInFormElementProps } from './built-in-form-elements.js';
 export type { AssistantFormElementRoleProps, AssistantFormElementType, CreateAssistantFormElement, } from './create-assistant-form-element.js';
 export { createAssistantFormElementFactory } from './create-assistant-form-element.js';
 export { type FormElementDefinition, createFormElementDefinition } from './form-element-definition.js';

package/dist/configurator/ui/assistant/form-elements/FormCard.d.ts

@@ -1,6 +1,65 @@
+import type { ComponentsOverrides } from '@mui/material';
+import { type ButtonHTMLAttributes, type ElementType, type HTMLAttributes, type ImgHTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
 import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
 import type { FormOptionProps } from './form-element-props.js';
+declare const MuiComponentName: 'PhxAssistantFormCard';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: FormCardSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantFormCardProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Image: 'image';
+    readonly Label: 'label';
+    readonly Description: 'description';
+    readonly Check: 'check';
+};
+type FormCardSlots = ValueOf<typeof Slots>;
 type FormCardProps = FormOptionProps<AssistantBuiltInFormElementAttributes<'card'>>;
+/**
+ * The slots of a form `card`.
+ *
+ * Read from the theme only: the component takes exactly the props of its form element.
+ */
+export interface ThemeableAssistantFormCardProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The card (`button`).
+     * - `image` — The picture on top (`img`).
+     * - `label` — The label (`span`).
+     * - `description` — The description (`span`).
+     * - `check` — The check mark of a picked card (`span`).
+     */
+    readonly slots?: Partial<Record<FormCardSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the card.
+     * - `image` — Props for the picture.
+     * - `label` — Props for the label.
+     * - `description` — Props for the description.
+     * - `check` — Props for the check mark.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: ButtonHTMLAttributes<HTMLButtonElement>;
+        readonly [Slots.Image]: ImgHTMLAttributes<HTMLImageElement>;
+        readonly [Slots.Label]: HTMLAttributes<HTMLSpanElement>;
+        readonly [Slots.Description]: HTMLAttributes<HTMLSpanElement>;
+        readonly [Slots.Check]: HTMLAttributes<HTMLSpanElement>;
+    }>;
+}
 /**
  * A `card`: a tile with its picture on top, then its label and description, outlined and checked
  * while it is picked. A picture that is not a resource path or fails to load is left out.

package/dist/configurator/ui/assistant/form-elements/FormCard.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{styled as i}from"@mui/material";import{useCallback as o,useState as t}from"react";import{PhxIcon as a}from"#package/ui-sdk";import{useResourceImageUrl as n}from"../resource-image/index.js";import{AssistantPanelName as d}from"../theme.js";let l=i("button",{name:d,slot:"formCard"})(({theme:{palette:e,shape:r,spacing:i}})=>({alignContent:"start",background:e.background.paper,border:`1px solid ${e.divider}`,borderRadius:r.borderRadius,color:e.text.primary,cursor:"pointer",display:"grid",flex:"1 1 140px",font:"inherit",gap:i(.25),margin:0,maxInlineSize:220,padding:i(.75),position:"relative",textAlign:"start","&:hover:not(:disabled)":{background:e.action.hover},"&:focus-visible":{outline:`2px solid ${e.primary.main}`,outlineOffset:1},"&:disabled":{color:e.text.disabled,cursor:"default"},'&[aria-pressed="true"]':{borderColor:e.primary.main,boxShadow:`inset 0 0 0 1px ${e.primary.main}`}})),s=i("img",{name:d,slot:"formCardImage"})(({theme:{shape:e,spacing:r}})=>({aspectRatio:"4 / 3",borderRadius:e.borderRadius,display:"block",inlineSize:"100%",marginBlockEnd:r(.5),objectFit:"contain"})),m=i("span",{name:d,slot:"formCardLabel"})(({theme:{typography:e}})=>({...e.body2,fontWeight:e.fontWeightMedium})),p=i("span",{name:d,slot:"formCardDescription"})(({theme:{palette:e,typography:r}})=>({...r.caption,color:e.text.secondary})),c=i("span",{name:d,slot:"formCardCheck"})(({theme:{palette:e,spacing:r}})=>({alignItems:"center",background:e.primary.main,borderRadius:"50%",color:e.primary.contrastText,display:"flex",fontSize:14,insetBlockStart:r(.5),insetInlineEnd:r(.5),justifyContent:"center",padding:2,position:"absolute"}));export const FormCard=({attributes:i,label:d,disabled:u,selected:b,onSelect:f})=>{let{value:g,image:h}=i,x=[d,g].find(Boolean),y=""===i.description?void 0:i.description,k=n()(h),[C,j]=t(),v=o(()=>{j(k)},[k]);return r(l,{type:"button","aria-label":null==x&&null==y?h:void 0,disabled:u,"aria-pressed":b,onClick:()=>f([g,d,y,h].find(Boolean)??""),children:[null!=k&&k!==C&&e(s,{src:k,alt:"",loading:"lazy",onError:v}),null!=x&&e(m,{children:x}),null!=y&&e(p,{children:y}),b&&e(c,{"aria-hidden":!0,children:e(a,{name:"Check",fontSize:"inherit"})})]})};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{styled as r,useThemeProps as o}from"@mui/material";import{useCallback as t,useState as a}from"react";import{PhxIcon as n}from"#package/ui-sdk";import{useResourceImageUrl as l}from"../resource-image/index.js";let d="PhxAssistantFormCard",s=r("button",{name:d,slot:"root"})(({theme:{palette:e,shape:i,spacing:r}})=>({alignContent:"start",background:e.background.paper,border:`1px solid ${e.divider}`,borderRadius:i.borderRadius,color:e.text.primary,cursor:"pointer",display:"grid",flex:"1 1 140px",font:"inherit",gap:r(.25),margin:0,maxInlineSize:220,padding:r(.75),position:"relative",textAlign:"start","&:hover:not(:disabled)":{background:e.action.hover},"&:focus-visible":{outline:`2px solid ${e.primary.main}`,outlineOffset:1},"&:disabled":{color:e.text.disabled,cursor:"default"},'&[aria-pressed="true"]':{borderColor:e.primary.main,boxShadow:`inset 0 0 0 1px ${e.primary.main}`}})),m=r("img",{name:d,slot:"image"})(({theme:{shape:e,spacing:i}})=>({aspectRatio:"4 / 3",borderRadius:e.borderRadius,display:"block",inlineSize:"100%",marginBlockEnd:i(.5),objectFit:"contain"})),c=r("span",{name:d,slot:"label"})(({theme:{typography:e}})=>({...e.body2,fontWeight:e.fontWeightMedium})),p=r("span",{name:d,slot:"description"})(({theme:{palette:e,typography:i}})=>({...i.caption,color:e.text.secondary})),u=r("span",{name:d,slot:"check"})(({theme:{palette:e,spacing:i}})=>({alignItems:"center",background:e.primary.main,borderRadius:"50%",color:e.primary.contrastText,display:"flex",fontSize:14,insetBlockStart:i(.5),insetInlineEnd:i(.5),justifyContent:"center",padding:2,position:"absolute"})),b={};export const FormCard=({attributes:r,label:g,disabled:h,selected:f,onSelect:x})=>{let{value:k,image:y}=r,v=[g,k].find(Boolean),C=""===r.description?void 0:r.description,j=l()(y),[R,S]=a(),{slots:z={},slotProps:B={}}=o({props:b,name:d}),E=t(()=>{S(j)},[j]),F=z.root??s,I=z.image??m,$=z.label??c,A=z.description??p,W=z.check??u;return i(F,{...B.root,type:"button","aria-label":null==v&&null==C?y:void 0,disabled:h,"aria-pressed":f,onClick:()=>x([k,g,C,y].find(Boolean)??""),children:[null!=j&&j!==R&&e(I,{loading:"lazy",...B.image,src:j,alt:"",onError:E}),null!=v&&e($,{...B.label,children:v}),null!=C&&e(A,{...B.description,children:C}),f&&e(W,{"aria-hidden":!0,...B.check,children:e(n,{name:"Check",fontSize:"inherit"})})]})};

package/dist/configurator/ui/assistant/form-elements/FormConfirm.d.ts

@@ -1,5 +1,56 @@
+import type { ComponentsOverrides } from '@mui/material';
+import type { ButtonHTMLAttributes, ElementType, HTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
 import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
 import type { FormInputProps } from './form-element-props.js';
+declare const MuiComponentName: 'PhxAssistantFormConfirm';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: FormConfirmSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantFormConfirmProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Buttons: 'buttons';
+    readonly Button: 'button';
+};
+type FormConfirmSlots = ValueOf<typeof Slots>;
+/**
+ * The slots of a form `confirm`.
+ *
+ * Read from the theme only: the component takes exactly the props of its form element.
+ */
+export interface ThemeableAssistantFormConfirmProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The question with its label and its buttons (`div`).
+     * - `buttons` — The row of the yes and no buttons (`div`).
+     * - `button` — The yes and the no button (`button`).
+     */
+    readonly slots?: Partial<Record<FormConfirmSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the question.
+     * - `buttons` — Props for the row.
+     * - `button` — Props for each button.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Buttons]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Button]: ButtonHTMLAttributes<HTMLButtonElement>;
+    }>;
+}
 type FormConfirmProps = FormInputProps<boolean, AssistantBuiltInFormElementAttributes<'confirm'>>;
 /**
  * A `confirm`: a yes or no question as ✓ and ✗ buttons. Its state is the pick, and it answers with

package/dist/configurator/ui/assistant/form-elements/FormConfirm.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{alpha as i,styled as a}from"@mui/material";import{useLocalizable as o}from"#package/react-sdk";import{PhxIcon as t}from"#package/ui-sdk";import{AssistantPanelName as n}from"../theme.js";let s={id:"sdk.assistant.form.confirm.yes",message:"Yes"},l={id:"sdk.assistant.form.confirm.no",message:"No"},d=a("div",{name:n,slot:"formConfirm"})(({theme:{palette:e,spacing:r,typography:i}})=>({...i.caption,color:e.text.secondary,display:"grid",gap:r(.75)})),m=a("div",{name:n,slot:"formConfirmButtons"})(({theme:{spacing:e}})=>({display:"flex",gap:e(.75)})),c=a("button",{name:n,slot:"formConfirmButton"})(({theme:{palette:e,spacing:r}})=>({alignItems:"center",background:e.background.paper,border:`1px solid ${e.divider}`,borderRadius:"calc(infinity * 1px)",color:e.text.primary,cursor:"pointer",display:"inline-flex",justifyContent:"center",margin:0,paddingBlock:r(.5),paddingInline:r(1.5),"&:hover:not(:disabled)":{background:e.action.hover},"&:focus-visible":{outline:`2px solid ${e.primary.main}`,outlineOffset:1},"&:disabled":{color:e.text.disabled,cursor:"default"},'&[aria-pressed="true"]':{background:i(e.primary.main,e.action.selectedOpacity),borderColor:e.primary.main}}));export const FormConfirm=({label:i,disabled:a,state:n,onChange:p})=>{let f=o(s),u=o(l);return r(d,{role:"group","aria-label":i,children:[null!=i&&e("span",{"aria-hidden":!0,children:i}),r(m,{children:[e(c,{type:"button","aria-label":f,title:f,disabled:a,"aria-pressed":!0===n,onClick:()=>p(!0,f),children:e(t,{name:"Check",fontSize:"small"})}),e(c,{type:"button","aria-label":u,title:u,disabled:a,"aria-pressed":!1===n,onClick:()=>p(!1,u),children:e(t,{name:"X",fontSize:"small"})})]})]})};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{alpha as t,styled as i,useThemeProps as o}from"@mui/material";import{useLocalizable as a}from"#package/react-sdk";import{PhxIcon as n}from"#package/ui-sdk";let s="PhxAssistantFormConfirm",l={id:"sdk.assistant.form.confirm.yes",message:"Yes"},d={id:"sdk.assistant.form.confirm.no",message:"No"},m=i("div",{name:s,slot:"root"})(({theme:{palette:e,spacing:r,typography:t}})=>({...t.caption,color:e.text.secondary,display:"grid",gap:r(.75)})),c=i("div",{name:s,slot:"buttons"})(({theme:{spacing:e}})=>({display:"flex",gap:e(.75)})),p=i("button",{name:s,slot:"button"})(({theme:{palette:e,spacing:r}})=>({alignItems:"center",background:e.background.paper,border:`1px solid ${e.divider}`,borderRadius:"calc(infinity * 1px)",color:e.text.primary,cursor:"pointer",display:"inline-flex",justifyContent:"center",margin:0,paddingBlock:r(.5),paddingInline:r(1.5),"&:hover:not(:disabled)":{background:e.action.hover},"&:focus-visible":{outline:`2px solid ${e.primary.main}`,outlineOffset:1},"&:disabled":{color:e.text.disabled,cursor:"default"},'&[aria-pressed="true"]':{background:t(e.primary.main,e.action.selectedOpacity),borderColor:e.primary.main}})),u={};export const FormConfirm=({label:t,disabled:i,state:b,onChange:f})=>{let g=a(l),k=a(d),{slots:y={},slotProps:h={}}=o({props:u,name:s}),x=y.root??m,C=y.buttons??c,v=y.button??p;return r(x,{role:"group","aria-label":t,...h.root,children:[null!=t&&e("span",{"aria-hidden":!0,children:t}),r(C,{...h.buttons,children:[e(v,{...h.button,type:"button","aria-label":g,title:g,disabled:i,"aria-pressed":!0===b,onClick:()=>f(!0,g),children:e(n,{name:"Check",fontSize:"small"})}),e(v,{...h.button,type:"button","aria-label":k,title:k,disabled:i,"aria-pressed":!1===b,onClick:()=>f(!1,k),children:e(n,{name:"X",fontSize:"small"})})]})]})};

package/dist/configurator/ui/assistant/form-elements/FormGroup.d.ts

@@ -1,6 +1,53 @@
+import type { ComponentsOverrides } from '@mui/material';
+import type { ElementType, HTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
 import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
 import type { FormContainerProps } from './form-element-props.js';
+declare const MuiComponentName: 'PhxAssistantFormGroup';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: FormGroupSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantFormGroupProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Label: 'label';
+};
+type FormGroupSlots = ValueOf<typeof Slots>;
 type FormGroupProps = FormContainerProps<AssistantBuiltInFormElementAttributes<'group'>>;
+/**
+ * The slots of a form `group`.
+ *
+ * Read from the theme only: the component takes exactly the props of its form element.
+ */
+export interface ThemeableAssistantFormGroupProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The group (`div`).
+     * - `label` — The label that heads the group (`div`).
+     */
+    readonly slots?: Partial<Record<FormGroupSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the group.
+     * - `label` — Props for the label.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Label]: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
 /** A `group`: its children stacked under its label, which heads them. */
 export declare const FormGroup: ({ label, children }: FormGroupProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/configurator/ui/assistant/form-elements/FormGroup.js

@@ -1 +1 @@
-import{jsx as r,jsxs as e}from"react/jsx-runtime";import{styled as o}from"@mui/material";import{AssistantPanelName as m}from"../theme.js";let t=o("div",{name:m,slot:"formGroup"})(({theme:{spacing:r}})=>({display:"flex",flexDirection:"column",gap:r(1.5)})),i=o("div",{name:m,slot:"formGroupLabel"})(({theme:{palette:r,typography:e}})=>({...e.subtitle2,color:r.text.primary}));export const FormGroup=({label:o,children:m})=>e(t,{role:"group","aria-label":o,children:[null!=o&&r(i,{"aria-hidden":!0,children:o}),m]});
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{styled as o,useThemeProps as l}from"@mui/material";let t="PhxAssistantFormGroup",a=o("div",{name:t,slot:"root"})(({theme:{spacing:r}})=>({display:"flex",flexDirection:"column",gap:r(1.5)})),i=o("div",{name:t,slot:"label"})(({theme:{palette:r,typography:e}})=>({...e.subtitle2,color:r.text.primary})),m={};export const FormGroup=({label:o,children:s})=>{let{slots:n={},slotProps:p={}}=l({props:m,name:t}),u=n.root??a,x=n.label??i;return e(u,{role:"group","aria-label":o,...p.root,children:[null!=o&&r(x,{"aria-hidden":!0,...p.label,children:o}),s]})};

package/dist/configurator/ui/assistant/form-elements/FormNumber.d.ts

@@ -1,5 +1,48 @@
+import type { ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
 import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
 import type { FormInputProps } from './form-element-props.js';
+declare const MuiComponentName: 'PhxAssistantFormNumber';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: FormNumberSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantFormNumberProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+};
+type FormNumberSlots = ValueOf<typeof Slots>;
+/**
+ * The slots of a form `number`.
+ *
+ * Read from the theme only: the component takes exactly the props of its form element.
+ */
+export interface ThemeableAssistantFormNumberProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The field with its label, its input and its slider (`div`).
+     */
+    readonly slots?: Partial<Record<FormNumberSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the field.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
 type FormNumberProps = FormInputProps<number, AssistantBuiltInFormElementAttributes<'number'>>;
 /**
  * A `number`: a field with its unit, and a slider beside it when both `min` and `max` are given. It

package/dist/configurator/ui/assistant/form-elements/FormNumber.js

@@ -1 +1 @@
-import{jsx as r,jsxs as i}from"react/jsx-runtime";import{Trans as e}from"@lingui/react";import{styled as o}from"@mui/material";import{useCallback as t,useEffect as a}from"react";import{NumericalInput as m}from"#package/ui-sdk";import{AssistantPanelName as n}from"../theme.js";import{clampFormNumber as s}from"./clamp-form-number.js";let l=o("div",{name:n,slot:"formNumber"})(({theme:{palette:r,spacing:i,typography:e}})=>({alignSelf:"stretch",color:r.text.secondary,display:"grid",gap:i(.5),...e.caption})),d=(r,i)=>i?`${r} ${i}`:String(r),u=r=>""===r.trim()?null:Number(r);export const FormNumber=({attributes:{value:o,min:n,max:p,step:v,unit:c},label:f,disabled:g,state:b,onChange:h})=>{let x=void 0===o?void 0:s(o,{min:n,max:p}),j=b??x;a(()=>{void 0===b&&void 0!==x&&h(x,d(x,c))},[b,x,c,h]);let N=t(r=>h(r,d(r,c)),[h,c]),S=t(()=>{if(void 0===j)return;let r=s(j,{min:n,max:p});r!==j&&N(r)},[j,n,p,N]),k=t(r=>void 0===j?"":String(r),[j]);return i(l,{role:"group","aria-label":f,children:[null!=f&&r("span",{"aria-hidden":!0,children:f}),r(m,{value:j??n??0,min:n,max:p,unit:c,size:"small",disabled:g,withSlider:void 0!==n&&void 0!==p,sliderProps:void 0===v?void 0:{step:v},inputFieldProps:{parseValue:u,formatValue:k,invalidNumberErrorMessage:r(e,{id:"sdk.assistant.form.number.invalid",message:"Enter a number."})},onChange:N,onChanged:S})]})};
+import{jsx as r,jsxs as i}from"react/jsx-runtime";import{Trans as e}from"@lingui/react";import{styled as o,useThemeProps as a}from"@mui/material";import{useCallback as t,useEffect as l}from"react";import{NumericalInput as m}from"#package/ui-sdk";import{clampFormNumber as n}from"./clamp-form-number.js";let s="PhxAssistantFormNumber",d=o("div",{name:s,slot:"root"})(({theme:{palette:r,spacing:i,typography:e}})=>({alignSelf:"stretch",color:r.text.secondary,display:"grid",gap:i(.5),...e.caption})),u=(r,i)=>i?`${r} ${i}`:String(r),p=r=>""===r.trim()?null:Number(r),g={};export const FormNumber=({attributes:{value:o,min:v,max:b,step:c,unit:f},label:h,disabled:x,state:j,onChange:N})=>{let S=void 0===o?void 0:n(o,{min:v,max:b}),k=j??S;l(()=>{void 0===j&&void 0!==S&&N(S,u(S,f))},[j,S,f,N]);let F=t(r=>N(r,u(r,f)),[N,f]),P=t(()=>{if(void 0===k)return;let r=n(k,{min:v,max:b});r!==k&&F(r)},[k,v,b,F]),y=t(r=>void 0===k?"":String(r),[k]),A=t(()=>h??"",[h]),{slots:C={},slotProps:E={}}=a({props:g,name:s});return i(C.root??d,{role:"group","aria-label":h,...E.root,children:[null!=h&&r("span",{"aria-hidden":!0,children:h}),r(m,{value:k??v??0,min:v,max:b,unit:f,size:"small",disabled:x,withSlider:void 0!==v&&void 0!==b,sliderProps:{step:c,getAriaLabel:null==h?void 0:A},inputFieldProps:{"aria-label":h,parseValue:p,formatValue:y,invalidNumberErrorMessage:r(e,{id:"sdk.assistant.form.number.invalid",message:"Enter a number."})},onChange:F,onChanged:P})]})};

package/dist/configurator/ui/assistant/form-elements/FormOptions.d.ts

@@ -1,6 +1,57 @@
+import type { ComponentsOverrides } from '@mui/material';
+import type { ElementType, HTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
 import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
 import type { FormContainerProps } from './form-element-props.js';
+declare const MuiComponentName: 'PhxAssistantFormOptions';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: FormOptionsSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantFormOptionsProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Label: 'label';
+    readonly Row: 'row';
+};
+type FormOptionsSlots = ValueOf<typeof Slots>;
 type FormOptionsProps = FormContainerProps<AssistantBuiltInFormElementAttributes<'choice' | 'choices'>>;
+/**
+ * The slots of a form `choice` or `choices`.
+ *
+ * Read from the theme only: the component takes exactly the props of its form element.
+ */
+export interface ThemeableAssistantFormOptionsProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The `choice` or `choices` (`div`).
+     * - `label` — The label above the options (`div`).
+     * - `row` — The wrapping row of options (`div`).
+     */
+    readonly slots?: Partial<Record<FormOptionsSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the element.
+     * - `label` — Props for the label.
+     * - `row` — Props for the row.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Label]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Row]: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
 /** A `choice` or `choices`: its options in a wrapping row under its label. */
 export declare const FormOptions: ({ label, children }: FormOptionsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/configurator/ui/assistant/form-elements/FormOptions.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{styled as r}from"@mui/material";import{AssistantPanelName as i}from"../theme.js";let t=r("div",{name:i,slot:"formOptions"})(({theme:{spacing:e}})=>({display:"grid",gap:e(.75)})),a=r("div",{name:i,slot:"formOptionsLabel"})(({theme:{palette:e,typography:o}})=>({...o.caption,color:e.text.secondary})),m=r("div",{name:i,slot:"formOptionsRow"})(({theme:{spacing:e}})=>({display:"flex",flexWrap:"wrap",gap:e(.75)}));export const FormOptions=({label:r,children:i})=>o(t,{role:"group","aria-label":r,children:[null!=r&&e(a,{"aria-hidden":!0,children:r}),e(m,{children:i})]});
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{styled as o,useThemeProps as a}from"@mui/material";let t="PhxAssistantFormOptions",l=o("div",{name:t,slot:"root"})(({theme:{spacing:r}})=>({display:"grid",gap:r(.75)})),i=o("div",{name:t,slot:"label"})(({theme:{palette:r,typography:e}})=>({...e.caption,color:r.text.secondary})),s=o("div",{name:t,slot:"row"})(({theme:{spacing:r}})=>({display:"flex",flexWrap:"wrap",gap:r(.75)})),n={};export const FormOptions=({label:o,children:m})=>{let{slots:p={},slotProps:d={}}=a({props:n,name:t}),c=p.root??l,h=p.label??i,x=p.row??s;return e(c,{role:"group","aria-label":o,...d.root,children:[null!=o&&r(h,{"aria-hidden":!0,...d.label,children:o}),r(x,{...d.row,children:m})]})};

package/dist/configurator/ui/assistant/form-elements/FormReply.d.ts

@@ -1,6 +1,49 @@
+import type { ComponentsOverrides } from '@mui/material';
+import type { ButtonHTMLAttributes, ElementType } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
 import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
 import type { FormOptionProps } from './form-element-props.js';
+declare const MuiComponentName: 'PhxAssistantFormReply';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: FormReplySlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantFormReplyProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+};
+type FormReplySlots = ValueOf<typeof Slots>;
 type FormReplyProps = FormOptionProps<AssistantBuiltInFormElementAttributes<'reply'>>;
+/**
+ * The slots of a form `reply`.
+ *
+ * Read from the theme only: the component takes exactly the props of its form element.
+ */
+export interface ThemeableAssistantFormReplyProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The answer button (`button`).
+     */
+    readonly slots?: Partial<Record<FormReplySlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the button.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: ButtonHTMLAttributes<HTMLButtonElement>;
+    }>;
+}
 /** A `reply`: a short answer as a small pill, marked while it is picked. */
 export declare const FormReply: ({ attributes, label, disabled, selected, onSelect }: FormReplyProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/configurator/ui/assistant/form-elements/FormReply.js

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{alpha as e,styled as o}from"@mui/material";import{AssistantPanelName as i}from"../theme.js";let a=o("button",{name:i,slot:"formReply"})(({theme:{palette:r,spacing:o,typography:i}})=>({...i.body2,background:r.background.paper,border:`1px solid ${r.divider}`,borderRadius:"calc(infinity * 1px)",color:r.text.primary,cursor:"pointer",margin:0,paddingBlock:o(.25),paddingInline:o(1.25),textAlign:"start","&:hover:not(:disabled)":{background:r.action.hover},"&:focus-visible":{outline:`2px solid ${r.primary.main}`,outlineOffset:1},"&:disabled":{color:r.text.disabled,cursor:"default"},'&[aria-pressed="true"]':{background:e(r.primary.main,r.action.selectedOpacity),borderColor:r.primary.main}}));export const FormReply=({attributes:e,label:o,disabled:i,selected:t,onSelect:d})=>r(a,{type:"button",disabled:i,"aria-pressed":t,onClick:()=>d([e.value,o].find(Boolean)??""),children:o});
+import{jsx as r}from"react/jsx-runtime";import{alpha as o,styled as e,useThemeProps as i}from"@mui/material";let t="PhxAssistantFormReply",a=e("button",{name:t,slot:"root"})(({theme:{palette:r,spacing:e,typography:i}})=>({...i.body2,background:r.background.paper,border:`1px solid ${r.divider}`,borderRadius:"calc(infinity * 1px)",color:r.text.primary,cursor:"pointer",margin:0,paddingBlock:e(.25),paddingInline:e(1.25),textAlign:"start","&:hover:not(:disabled)":{background:r.action.hover},"&:focus-visible":{outline:`2px solid ${r.primary.main}`,outlineOffset:1},"&:disabled":{color:r.text.disabled,cursor:"default"},'&[aria-pressed="true"]':{background:o(r.primary.main,r.action.selectedOpacity),borderColor:r.primary.main}})),n={};export const FormReply=({attributes:o,label:e,disabled:d,selected:l,onSelect:s})=>{let{slots:p={},slotProps:c={}}=i({props:n,name:t});return r(p.root??a,{...c.root,type:"button",disabled:d,"aria-pressed":l,onClick:()=>s([o.value,e].find(Boolean)??""),children:e})};