@salsita-ai/sdk 0.50.0-develop.ae52227c7e → 0.50.0-develop.afbc5157e1

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

@@ -0,0 +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

@@ -0,0 +1 @@
+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

@@ -0,0 +1,52 @@
+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
+ * stays unanswered until the user enters a number, even while the slider rests at `min`.
+ */
+export declare const FormNumber: ({ attributes: { value, min, max, step, unit }, label, disabled, state, onChange, }: FormNumberProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+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

@@ -0,0 +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

@@ -0,0 +1 @@
+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

@@ -0,0 +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

@@ -0,0 +1 @@
+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})};

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

@@ -0,0 +1,61 @@
+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: 'PhxAssistantFormSwatch';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: FormSwatchSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantFormSwatchProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Image: 'image';
+    readonly Check: 'check';
+};
+type FormSwatchSlots = ValueOf<typeof Slots>;
+type FormSwatchProps = FormOptionProps<AssistantBuiltInFormElementAttributes<'swatch'>>;
+/**
+ * The slots of a form `swatch`.
+ *
+ * Read from the theme only: the component takes exactly the props of its form element.
+ */
+export interface ThemeableAssistantFormSwatchProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The swatch (`button`).
+     * - `image` — The picture that covers it (`img`).
+     * - `check` — The check mark of a picked swatch (`span`).
+     */
+    readonly slots?: Partial<Record<FormSwatchSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the swatch.
+     * - `image` — Props for the picture.
+     * - `check` — Props for the check mark.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: ButtonHTMLAttributes<HTMLButtonElement>;
+        readonly [Slots.Image]: ImgHTMLAttributes<HTMLImageElement>;
+        readonly [Slots.Check]: HTMLAttributes<HTMLSpanElement>;
+    }>;
+}
+/**
+ * A `swatch`: a small square filled with its color or covered by its picture, its label in a
+ * tooltip, ringed and checked while it is picked. A picture that is not a resource path or fails to
+ * load leaves the color, or a neutral tile.
+ */
+export declare const FormSwatch: ({ attributes, label, disabled, selected, onSelect }: FormSwatchProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Tooltip as o,styled as r,useThemeProps as a}from"@mui/material";import{useCallback as t,useState as n}from"react";import{PhxIcon as l}from"#package/ui-sdk";import{useResourceImageUrl as s}from"../resource-image/index.js";let d="PhxAssistantFormSwatch",c=r("button",{name:d,slot:"root"})(({theme:{palette:e,shape:i}})=>({background:e.action.hover,blockSize:36,border:`1px solid ${e.divider}`,borderRadius:i.borderRadius,cursor:"pointer",flex:"none",inlineSize:36,margin:0,overflow:"hidden",padding:0,position:"relative","&:focus-visible":{outline:`2px solid ${e.primary.main}`,outlineOffset:3},"&:disabled":{cursor:"default",opacity:e.action.disabledOpacity},'&[aria-pressed="true"]':{boxShadow:`0 0 0 2px ${e.background.paper}, 0 0 0 4px ${e.primary.main}`}})),m=r("img",{name:d,slot:"image"})({blockSize:"100%",display:"block",inlineSize:"100%",objectFit:"cover"}),p=r("span",{name:d,slot:"check"})(({theme:{palette:e}})=>({alignItems:"center",background:e.primary.main,borderRadius:"50%",color:e.primary.contrastText,display:"flex",fontSize:14,inset:"50% auto auto 50%",justifyContent:"center",padding:2,position:"absolute",transform:"translate(-50%, -50%)"})),u=r("span")({display:"inline-flex"}),b={};export const FormSwatch=({attributes:r,label:f,disabled:h,selected:g,onSelect:x})=>{let{value:y,color:k,image:S}=r,z=s()(S),[j,v]=n(),w=[f,y,k,S].find(Boolean),{slots:$={},slotProps:C={}}=a({props:b,name:d}),F=t(()=>{v(z)},[z]),R=$.root??c,B=$.image??m,O=$.check??p;return e(o,{title:w??"",placement:"top",children:e(u,{children:i(R,{...C.root,type:"button","aria-label":w,disabled:h,"aria-pressed":g,onClick:()=>x([y,f,k,S].find(Boolean)??""),style:null==k?C.root?.style:{...C.root?.style,background:k},children:[null!=z&&z!==j&&e(B,{loading:"lazy",...C.image,src:z,alt:"",onError:F}),g&&e(O,{"aria-hidden":!0,...C.check,children:e(l,{name:"Check",fontSize:"inherit"})})]})})})};

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

@@ -0,0 +1,53 @@
+import type { ComponentsOverrides, InputBaseProps } from '@mui/material';
+import { type ElementType, type LabelHTMLAttributes } 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: 'PhxAssistantFormText';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: FormTextSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantFormTextProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Input: 'input';
+};
+type FormTextSlots = ValueOf<typeof Slots>;
+/**
+ * The slots of a form `text`.
+ *
+ * Read from the theme only: the component takes exactly the props of its form element.
+ */
+export interface ThemeableAssistantFormTextProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The field with its label (`label`).
+     * - `input` — The text input (`InputBase`).
+     */
+    readonly slots?: Partial<Record<FormTextSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the field.
+     * - `input` — Props for the input.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: LabelHTMLAttributes<HTMLLabelElement>;
+        readonly [Slots.Input]: InputBaseProps;
+    }>;
+}
+type FormTextProps = FormInputProps<string, AssistantBuiltInFormElementAttributes<'text'>>;
+/** A `text`: a single line the user types, with its label above it. */
+export declare const FormText: ({ attributes: { value, placeholder }, label, disabled, state, onChange }: FormTextProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as t,jsxs as r}from"react/jsx-runtime";import{InputBase as e,styled as o,useThemeProps as i}from"@mui/material";import{useCallback as a,useEffect as d}from"react";let l="PhxAssistantFormText",n=o("label",{name:l,slot:"root"})(({theme:{palette:t,spacing:r,typography:e}})=>({alignSelf:"stretch",color:t.text.secondary,display:"grid",gap:r(.5),...e.caption})),s=t=>""===t.trim()?void 0:t.trim(),m=o(e,{name:l,slot:"input"})(({theme:{palette:t,spacing:r,typography:e}})=>({...e.body2,border:`1px solid ${t.divider}`,borderRadius:12,color:t.text.primary,paddingBlock:r(.75),paddingInline:r(1.5),"&.Mui-focused":{borderColor:t.primary.main},"& .MuiInputBase-input":{padding:0}})),p={};export const FormText=({attributes:{value:e,placeholder:o},label:u,disabled:c,state:x,onChange:g})=>{let{slots:b={},slotProps:h={}}=i({props:p,name:l});d(()=>{void 0===x&&void 0!==e&&""!==e&&g(e,s(e))},[x,e,g]);let v=a(t=>{let r=t.target.value;g(r,s(r))},[g]),f=b.root??n,y=b.input??m;return r(f,{...h.root,children:[u,t(y,{placeholder:o,...h.input,value:x??e??"",disabled:c,onChange:v})]})};

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

@@ -0,0 +1,10 @@
+/** The limits a `number` keeps its value within, from its attributes. */
+export interface FormNumberLimits {
+    readonly min?: number;
+    readonly max?: number;
+}
+/**
+ * The value a `number` settles on once the user leaves the field: within `min` and `max`. The
+ * `step` is left out: it moves the slider, and a typed value between steps stays as typed.
+ */
+export declare const clampFormNumber: (value: number, { min, max }: FormNumberLimits) => number;

package/dist/configurator/ui/assistant/form-elements/clamp-form-number.js

@@ -0,0 +1 @@
+export const clampFormNumber=(m,{min:a,max:t})=>Math.min(t??1/0,Math.max(a??-1/0,m));

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

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+/** Validated and coerced attributes of an element, without the built-in `label`: what any element gets. */
+export type FormElementAttributes = Readonly<Record<string, unknown>>;
+/** Props of a `group`, `choice` or `choices` element: it lays out the children the form renders for it. */
+export interface FormContainerProps<ATTRIBUTES = FormElementAttributes> {
+    readonly attributes: ATTRIBUTES;
+    readonly label?: string;
+    readonly disabled: boolean;
+    readonly children: ReactNode;
+}
+/**
+ * Props of an option. It reports what it answers with when the user picks it, as an input reports
+ * its answer: by convention its `value` attribute, or else its label. Its container decides what a
+ * pick does: in a `choice` it replaces the previous pick, in a `choices` it toggles, and in a form
+ * that asks one question it sends at once. An empty answer counts as unanswered.
+ */
+export interface FormOptionProps<ATTRIBUTES = FormElementAttributes> {
+    readonly attributes: ATTRIBUTES;
+    readonly label?: string;
+    readonly disabled: boolean;
+    readonly selected: boolean;
+    onSelect(answer: string): void;
+}
+/**
+ * Props of an input. Its state is its own: the form stores what it reports and hands it back.
+ * `answer` is the text the answer shows for it, or `undefined` while there is none. An input that
+ * starts with a `value` attribute reports its starting answer when it mounts, since an input that
+ * never reports is unanswered and only the input knows how its value reads in the answer, such as
+ * a number with its unit. A quick input, which a lone form sends on its first report, reports only
+ * what the user did.
+ */
+export interface FormInputProps<STATE = unknown, ATTRIBUTES = FormElementAttributes> {
+    readonly attributes: ATTRIBUTES;
+    readonly label?: string;
+    readonly disabled: boolean;
+    readonly state: STATE | undefined;
+    onChange(state: STATE, answer: string | undefined): void;
+}

package/dist/configurator/ui/assistant/form-elements/form-element-props.js

@@ -0,0 +1 @@
+export{};

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

@@ -0,0 +1,9 @@
+export type { FormContainerProps, FormElementAttributes, FormInputProps, FormOptionProps, } from './form-element-props.js';
+export { FormCard, type ThemeableAssistantFormCardProps } from './FormCard.js';
+export { FormConfirm, type ThemeableAssistantFormConfirmProps } from './FormConfirm.js';
+export { FormGroup, type ThemeableAssistantFormGroupProps } from './FormGroup.js';
+export { FormOptions, type ThemeableAssistantFormOptionsProps } from './FormOptions.js';
+export { FormNumber, type ThemeableAssistantFormNumberProps } from './FormNumber.js';
+export { FormReply, type ThemeableAssistantFormReplyProps } from './FormReply.js';
+export { FormSwatch, type ThemeableAssistantFormSwatchProps } from './FormSwatch.js';
+export { FormText, type ThemeableAssistantFormTextProps } from './FormText.js';

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

@@ -0,0 +1 @@
+export{FormCard}from"./FormCard.js";export{FormConfirm}from"./FormConfirm.js";export{FormGroup}from"./FormGroup.js";export{FormOptions}from"./FormOptions.js";export{FormNumber}from"./FormNumber.js";export{FormReply}from"./FormReply.js";export{FormSwatch}from"./FormSwatch.js";export{FormText}from"./FormText.js";

package/dist/configurator/ui/assistant/image-view/ImageView.d.ts

@@ -0,0 +1,66 @@
+import type { ButtonProps, ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes, type ImgHTMLAttributes } from 'react';
+declare const MuiComponentName: 'PhxAssistantImageView';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: 'root' | 'header' | 'title' | 'actions' | 'annotateButton' | 'closeButton' | 'image';
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantImageViewProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+/** CSS px; a safe area narrower or lower than this is too small for the view, which then covers everything. */
+export declare const MIN_IMAGE_VIEW_SIZE = 240;
+/** The slots of the larger view of an image of the chat beside the panel. Read from the theme only. */
+export interface ThemeableAssistantImageViewProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The view, placed inside the layout's safe area (`div`).
+     * - `header` — The row with the title and the close button (`div`).
+     * - `title` — The image's title, when it has one (`h2`).
+     * - `actions` — The buttons of the header (`div`).
+     * - `annotateButton` — The button that opens the annotation editor on the image (`Button`).
+     * - `closeButton` — The button that closes the view (`Button`).
+     * - `image` — The picture, contain-fitted (`img`).
+     */
+    readonly slots?: Partial<Record<'root' | 'header' | 'title' | 'actions' | 'annotateButton' | 'closeButton' | 'image', ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the view.
+     * - `header` — Props for the header row.
+     * - `title` — Props for the title.
+     * - `actions` — Props for the buttons' row.
+     * - `annotateButton` — Props for the annotate button.
+     * - `closeButton` — Props for the close button.
+     * - `image` — Props for the picture.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: HTMLAttributes<HTMLDivElement>;
+        readonly header: HTMLAttributes<HTMLDivElement>;
+        readonly title: HTMLAttributes<HTMLHeadingElement>;
+        readonly actions: HTMLAttributes<HTMLDivElement>;
+        readonly annotateButton: ButtonProps;
+        readonly closeButton: ButtonProps;
+        readonly image: ImgHTMLAttributes<HTMLImageElement>;
+    }>;
+}
+/**
+ * The image of the chat the user opened, larger, rendered by the configurator page over whichever layout
+ * it shows: a drawing of a reply, a project picture of a reply or an image of a sent message. It sits
+ * inside the layout's safe area, beside the assistant panel, and makes nothing inert, so the user can go
+ * on writing; where that area is too small, as on a phone, it covers the whole configurator until it is
+ * closed. Close or Escape closes it. Annotate closes it too and opens the annotation editor on the image,
+ * whose result is attached to the message being written; it is disabled while that message is full,
+ * another annotation shows or the assistant banned the user, and an image that cannot be read offers none.
+ * Nothing shows while no image is open.
+ */
+export declare const ImageView: () => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/configurator/ui/assistant/image-view/ImageView.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Trans as i}from"@lingui/react";import{Button as a,Tooltip as n,keyframes as o,styled as l,useTheme as s,useThemeProps as r}from"@mui/material";import{useEffect as m,useMemo as d,useState as c}from"react";import{useEagerObservableSelector as g,useEagerObservableValue as u,useLocalizable as p,useResponsiveState as h}from"#package/react-sdk";import{MAX_COMPOSER_ATTACHMENTS as v,useConfigurator as w}from"../../../application-runtime/index.js";import{useEndOnUnmount as b}from"../annotation/index.js";import{revokeDrawingUrlOnLoad as f,useDrawingUrl as x}from"../drawing/index.js";import{useImageBlob as k}from"./use-image-blob.js";let y="PhxAssistantImageView";export const MIN_IMAGE_VIEW_SIZE=240;let I={id:"sdk.assistant.image.view.drawing",message:"Drawing"},$={id:"sdk.assistant.image.view.image",message:"Image"},j={id:"sdk.assistant.composer.attachment.limit",message:"You can attach up to {max} images."},S=o({from:{opacity:0}}),B=l("div")(({theme:{zIndex:e}})=>({inset:0,pointerEvents:"none",position:"absolute",zIndex:e.modal+1})),E=l("div",{name:y,slot:"root"})(({theme:{palette:e,shadows:t,shape:i,spacing:a}})=>({animation:`${S} 200ms ease`,background:e.background.paper,borderRadius:i.borderRadius,boxShadow:t[8],display:"flex",flexDirection:"column",gap:a(1),margin:a(2),padding:a(1.5),pointerEvents:"auto",position:"absolute","@media (prefers-reduced-motion: reduce)":{animation:"none"}})),z=l("div",{name:y,slot:"header"})(({theme:{spacing:e}})=>({alignItems:"center",display:"flex",gap:e(1),justifyContent:"space-between"})),V=l("h2",{name:y,slot:"title"})(({theme:{typography:e}})=>({...e.subtitle2,margin:0,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),C=l("div",{name:y,slot:"actions"})(({theme:{spacing:e}})=>({display:"flex",flexShrink:0,gap:e(.5),marginInlineStart:"auto"})),L=l(a,{name:y,slot:"annotateButton"})({}),R=l(a,{name:y,slot:"closeButton"})({}),A=l("img",{name:y,slot:"image"})({blockSize:"100%",display:"block",flex:1,inlineSize:"100%",minBlockSize:0,objectFit:"contain"}),O={},_=({view:a,close:o,label:l,src:d,onLoad:f,image:x})=>{var k;let{title:I}=a,{assistantSystem:$}=w(),{canvasPadding:S,sceneSafeArea:_}=h(),[D,F]=c(null),[M,P]=c(),G=p(l),{slots:N={},slotProps:T={}}=r({props:O,name:y}),W=p({...j,values:{max:v}}),Y=u($.hasFreeAttachmentSlot$),Z=null!==u($.annotationOverlay$),q=g($.chat$,e=>e.isLocked,[]),H=Y&&!Z&&!q&&null!=x,{palette:J}=s();b(()=>{$.imageView$.value===a&&o()}),m(()=>{if(null===D)return;let e=new ResizeObserver(([e])=>{void 0!==e&&P({width:e.contentRect.width,height:e.contentRect.height})});return e.observe(D),()=>e.disconnect()},[D]),m(()=>{let e=e=>{"Escape"!==e.key||e.isComposing||e.defaultPrevented||null!==$.annotationOverlay$.value||o()};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[$,o]);let K=N.root??E,Q=N.header??z,U=N.title??V,X=N.actions??C,ee=N.annotateButton??L,et=N.closeButton??R,ei=N.image??A;return e(B,{ref:F,children:t(K,{...T.root,role:"dialog","aria-label":I??G,style:{...T.root?.style,inset:(k=_??S,void 0!==M&&M.width-k.left-k.right>=240&&M.height-k.top-k.bottom>=240?`${k.top}px ${k.right}px ${k.bottom}px ${k.left}px`:0)},children:[t(Q,{...T.header,children:[void 0!==I&&e(U,{...T.title,children:I}),t(X,{...T.actions,children:[null!==x&&e(n,{title:Y?"":W,children:e("span",{children:e(ee,{size:"small",...T.annotateButton,disabled:!H,onClick:()=>{null!=x&&(o(),$.annotate({image:x,background:J.background.default}))},children:e(i,{id:"sdk.assistant.image.view.annotate",message:"Annotate"})})})}),e(et,{size:"small",...T.closeButton,onClick:o,children:e(i,{id:"sdk.assistant.image.view.close",message:"Close"})})]})]}),void 0!==d&&e(ei,{...T.image,src:d,alt:I??"",onLoad:f})]})})},D=({view:t,close:i})=>{let{source:a}=t;return e(_,{view:t,close:i,label:I,src:x(a),onLoad:f,image:d(()=>new Blob([a],{type:"image/svg+xml"}),[a])})},F=({view:t,close:i})=>e(_,{view:t,close:i,label:$,src:t.url,image:k(t.url)});export const ImageView=()=>{let{assistantSystem:t}=w(),i=u(t.imageView$),a=t.closeImageView;return null===i?null:"svg"===i.kind?e(D,{view:i,close:a}):e(F,{view:i,close:a})};

package/dist/configurator/ui/assistant/image-view/index.d.ts

@@ -0,0 +1 @@
+export { ImageView, type ThemeableAssistantImageViewProps } from './ImageView.js';

package/dist/configurator/ui/assistant/image-view/index.js

@@ -0,0 +1 @@
+export{ImageView}from"./ImageView.js";

package/dist/configurator/ui/assistant/image-view/use-image-blob.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The image at `url` read as a blob, for the annotation editor: `undefined` while it is read, `null` when
+ * it cannot be. Read as a blob, a picture of another origin draws onto the editor's canvas without
+ * tainting it; one whose server does not let this page read it, without CORS headers, cannot be read.
+ * An object URL, such as an image of a sent message, is read from memory.
+ */
+export declare const useImageBlob: (url: string) => Blob | null | undefined;

package/dist/configurator/ui/assistant/image-view/use-image-blob.js

@@ -0,0 +1 @@
+import{useEffect as t,useState as e}from"react";export const useImageBlob=l=>{let[r,o]=e();return t(()=>{let t=new AbortController;return fetch(l,{signal:t.signal}).then(t=>t.ok?t.blob():null).catch(()=>null).then(e=>{t.signal.aborted||o({url:l,image:e})}),()=>t.abort()},[l]),r?.url===l?r.image:void 0};

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

@@ -1,2 +1,26 @@
-export { AssistantPanel, ASSISTANT_PANEL_SLOT } from './AssistantPanel.js';
+export { AssistantPanel, ASSISTANT_PANEL_SLOT, type ThemeableAssistantPanelProps } from './AssistantPanel.js';
+export type { ThemeableAssistantPanelHeaderProps } from './panel/index.js';
+export type { ThemeableAssistantComposerProps } from './AssistantComposer.js';
+export { AnnotationOverlay, type ThemeableAssistantAnnotationBadgeProps, type ThemeableAssistantAnnotationCommentProps, type ThemeableAssistantAnnotationProps, } from './annotation/index.js';
+export type { ThemeableAssistantAlertProps } from './alert/index.js';
+export type { ThemeableAssistantMessageImagesProps } from './attachments/index.js';
+export type { ThemeableAssistantDrawingProps } from './drawing/index.js';
+export { ImageView, type ThemeableAssistantImageViewProps } from './image-view/index.js';
+export type { ThemeableAssistantReferenceLinkProps } from './reference-link/index.js';
+export type { ThemeableAssistantImageProps } from './resource-image/index.js';
+export type { ThemeableAssistantScreenshotsProps } from './screenshots/index.js';
+export type { ThemeableAssistantThreadProps } from './AssistantThread.js';
 export { useIsAssistantPanelOpen } from './use-is-assistant-panel-open.js';
+export type { AssistantBuiltInFormSlots, AssistantFormElementRoleProps, AssistantFormElementType, CreateAssistantFormElement, ThemeableAssistantFormProps, } from './form/index.js';
+export { createAssistantFormElementFactory } from './form/index.js';
+export type { FormContainerProps, FormInputProps, FormOptionProps, ThemeableAssistantFormCardProps, ThemeableAssistantFormConfirmProps, ThemeableAssistantFormGroupProps, ThemeableAssistantFormNumberProps, ThemeableAssistantFormOptionsProps, ThemeableAssistantFormReplyProps, ThemeableAssistantFormSwatchProps, ThemeableAssistantFormTextProps, } from './form-elements/index.js';
+export { useAssistantThread, type UseAssistantThread, type UseAssistantThreadResult } from './use-assistant-thread.js';
+export { useAssistantComposer, type AssistantComposerAttachment, type AssistantComposerNotice, type UseAssistantComposer, type UseAssistantComposerResult, } from './use-assistant-composer.js';
+export { AssistantSeparator, type AssistantThreadItemSlots, AssistantThreadItemView, type AssistantThreadItemViewProps, AssistantUserMessage, type AssistantUserMessageProps, type ThemeableAssistantSeparatorProps, type ThemeableAssistantUserMessageProps, } from './AssistantThreadItemView.js';
+export { AssistantMarkdown, type AssistantMarkdownProps, type ThemeableAssistantMarkdownProps, } from './AssistantMarkdown.js';
+export { AssistantToolChips, type AssistantToolChipsProps, type ThemeableAssistantToolChipsProps, } from './AssistantChips.js';
+export { type ThemeableAssistantEntityLinkProps, EntityLinkSelectionProvider, type EntityLinkSelectionProviderProps, type EntityLinkSelection, useCreateEntityLinkSelection, } from './entity-link/index.js';
+export type { AssistantFailure, AssistantFailureKind } from './assistant-failure.js';
+export type { AssistantFormsVisibility, AssistantThreadItem, AssistantToolItem, AssistantUserVoice, } from './thread-items.js';
+export type { AssistantRecording, AssistantRecordingStatus, ThemeableAssistantReplyPlayButtonProps, } from './voice/index.js';
+export type { AssistantToolChip, AssistantToolChipLabel, AssistantToolChipState } from './tool-chip.js';

package/dist/configurator/ui/assistant/index.js

@@ -1 +1 @@
-export{AssistantPanel,ASSISTANT_PANEL_SLOT}from"./AssistantPanel.js";export{useIsAssistantPanelOpen}from"./use-is-assistant-panel-open.js";
+export{AssistantPanel,ASSISTANT_PANEL_SLOT}from"./AssistantPanel.js";export{AnnotationOverlay}from"./annotation/index.js";export{ImageView}from"./image-view/index.js";export{useIsAssistantPanelOpen}from"./use-is-assistant-panel-open.js";export{createAssistantFormElementFactory}from"./form/index.js";export{useAssistantThread}from"./use-assistant-thread.js";export{useAssistantComposer}from"./use-assistant-composer.js";export{AssistantSeparator,AssistantThreadItemView,AssistantUserMessage}from"./AssistantThreadItemView.js";export{AssistantMarkdown}from"./AssistantMarkdown.js";export{AssistantToolChips}from"./AssistantChips.js";export{EntityLinkSelectionProvider,useCreateEntityLinkSelection}from"./entity-link/index.js";

package/dist/configurator/ui/assistant/panel/AssistantPanelHeader.d.ts

@@ -0,0 +1,57 @@
+import type { ComponentsOverrides, IconButtonProps, TypographyProps } from '@mui/material';
+import { type ElementType, type HTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+declare const MuiComponentName: 'PhxAssistantPanelHeader';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: AssistantPanelHeaderSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantPanelHeaderProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Title: 'title';
+    readonly MuteButton: 'muteButton';
+    readonly CloseButton: 'closeButton';
+};
+type AssistantPanelHeaderSlots = ValueOf<typeof Slots>;
+export interface ThemeableAssistantPanelHeaderProps {
+    /**
+     * The components used for each slot inside the panel's header.
+     *
+     * - `root` — The header bar (`header`).
+     * - `title` — The panel's title (`Typography`).
+     * - `muteButton` — The control that mutes the replies that read themselves aloud after a voice message, shown
+     *   while voice is on (`IconButton`).
+     * - `closeButton` — The control that closes the panel (`IconButton`).
+     */
+    readonly slots?: Partial<Record<AssistantPanelHeaderSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the header bar.
+     * - `title` — Props for the title.
+     * - `muteButton` — Props for the mute control.
+     * - `closeButton` — Props for the close control.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLElement>;
+        readonly [Slots.Title]: TypographyProps;
+        readonly [Slots.MuteButton]: IconButtonProps;
+        readonly [Slots.CloseButton]: IconButtonProps;
+    }>;
+}
+/**
+ * The header of the built-in assistant panel: the panel's title, while voice is on a control that mutes the replies
+ * that read themselves aloud, and a control that closes the panel.
+ */
+export declare const AssistantPanelHeader: (inProps: ThemeableAssistantPanelHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/configurator/ui/assistant/panel/AssistantPanelHeader.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{IconButton as a,Tooltip as s,Typography as n,styled as i,useThemeProps as l}from"@mui/material";import{useCallback as o}from"react";import{useEagerObservableValue as r,useLocalizable as m}from"#package/react-sdk";import{PhxIcon as p}from"#package/ui-sdk";import{useConfigurator as d}from"../../../application-runtime/index.js";let u="PhxAssistantPanelHeader",c={id:"sdk.assistant.panel.title",message:"Assistant"},k={id:"sdk.assistant.panel.close.label",message:"Close assistant"},h={id:"sdk.assistant.panel.mute.label",message:"Mute spoken replies"},g={id:"sdk.assistant.panel.unmute.label",message:"Unmute spoken replies"},B={Root:i("header",{name:u,slot:"root"})(({theme:{palette:e,spacing:t}})=>({alignItems:"center",borderBlockEnd:`1px solid ${e.divider}`,display:"flex",gap:t(1),justifyContent:"space-between",paddingBlock:t(1),paddingInline:`var(--phx-sidebar-padding, ${t(2)}) ${t(1)}`})),Title:i(n,{name:u,slot:"title"})({fontWeight:600,marginInlineEnd:"auto"}),MuteButton:i(a,{name:u,slot:"muteButton"})({}),CloseButton:i(a,{name:u,slot:"closeButton"})({})};export const AssistantPanelHeader=a=>{let{slots:n={},slotProps:i={}}=l({props:a,name:u}),{assistantSystem:b}=d(),f=m(c),x=m(k),{isVoiceEnabled:C}=r(b.chat$),j=r(b.muted$),$=m(j?g:h),M=o(()=>{b.setOpen(!1)},[b]),v=o(()=>{b.setMuted(!j)},[b,j]),A=n.root??B.Root,H=n.title??B.Title,I=n.muteButton??B.MuteButton,P=n.closeButton??B.CloseButton;return t(A,{...i.root,children:[e(H,{variant:"subtitle1",component:"h2",...i.title,children:f}),C&&e(s,{title:$,placement:"top",children:e(I,{size:"small","aria-label":$,...i.muteButton,onClick:v,children:e(p,{name:j?"SpeakerSlash":"SpeakerHigh"})})}),e(s,{title:x,placement:"top",children:e(P,{size:"small","aria-label":x,...i.closeButton,onClick:M,children:e(p,{name:"X"})})})]})};

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

@@ -0,0 +1 @@
+export { AssistantPanelHeader, type ThemeableAssistantPanelHeaderProps } from './AssistantPanelHeader.js';