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

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/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';

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

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

package/dist/configurator/ui/assistant/popover/AssistantPopover.d.ts

@@ -0,0 +1,24 @@
+import { type KeyboardEvent, type ReactElement, type ReactNode } from 'react';
+/** What makes the element that opens a popover a button to the keyboard and to assistive technology. */
+export interface AssistantPopoverTriggerProps {
+    readonly role: 'button';
+    readonly tabIndex: 0;
+    readonly 'aria-expanded': boolean;
+    readonly onClick: () => void;
+    readonly onKeyDown: (event: KeyboardEvent) => void;
+}
+export interface AssistantPopoverProps {
+    /**
+     * What the popover shows; the tooltip mounts it only while the popover is open. `rePlace` places
+     * the popover again after its content changed size, as when a picture in it has loaded.
+     */
+    readonly title: (rePlace: () => void) => ReactNode;
+    /** The element that opens the popover, given the props that make it do so. */
+    readonly children: (trigger: AssistantPopoverTriggerProps) => ReactElement;
+}
+/**
+ * A popover over something in the thread, such as a reference in a reply or the screenshots of a
+ * tool call: hovering, focusing or tapping its element opens it; leaving it, tapping outside or
+ * Escape closes it. It describes its element, whose label stays its own.
+ */
+export declare const AssistantPopover: ({ title, children }: AssistantPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/ui/assistant/popover/AssistantPopover.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{ClickAwayListener as n,Tooltip as o}from"@mui/material";import{useCallback as t,useRef as r,useState as i}from"react";export const AssistantPopover=({title:p,children:a})=>{let[l,s]=i(!1),c=t(()=>s(!0),[]),u=t(()=>s(!1),[]),d=r(null),m=t(e=>{d.current=e},[]),x=t(()=>{d.current?.update()},[]),h=t(e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),s(!0))},[]);return e(n,{onClickAway:u,mouseEvent:!!l&&"onClick",touchEvent:!!l&&"onTouchEnd",children:e(o,{open:l,onOpen:c,onClose:u,title:p(x),placement:"top-start",describeChild:!0,disableTouchListener:!0,PopperProps:{popperRef:m},slotProps:{tooltip:{sx:{background:"none",maxInlineSize:"none",padding:0}}},children:a({role:"button",tabIndex:0,"aria-expanded":l,onClick:c,onKeyDown:h})})})};

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

@@ -0,0 +1 @@
+export { AssistantPopover } from './AssistantPopover.js';

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

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

package/dist/configurator/ui/assistant/reference-link/AssistantReferenceLink.d.ts

@@ -0,0 +1,58 @@
+import type { ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
+import { type ValueOf } from '@salsita-ai/common/utils';
+import type { AssistantReferenceTarget } from './assistant-link-target.js';
+declare const MuiComponentName: 'PhxAssistantReferenceLink';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: ReferenceLinkSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantReferenceLinkProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Details: 'details';
+};
+type ReferenceLinkSlots = ValueOf<typeof Slots>;
+/** The slots of a link to a recipe or an option in a reply. Read from the theme only. */
+export interface ThemeableAssistantReferenceLinkProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The label of the link (`span`).
+     * - `details` — The popover's content: the picture or color, name and description (`span`).
+     */
+    readonly slots?: Partial<Record<ReferenceLinkSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the label.
+     * - `details` — Props for the popover's content.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLSpanElement>;
+        readonly [Slots.Details]: HTMLAttributes<HTMLSpanElement>;
+    }>;
+}
+export interface AssistantReferenceLinkProps {
+    readonly target: AssistantReferenceTarget;
+    /** The text the assistant gave the link; the target itself is never shown. */
+    readonly children: ReactNode;
+}
+declare const ReferenceLinkView: ({ target, children }: AssistantReferenceLinkProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A recipe or an option the assistant named in a reply, shown as its label. Hovering, focusing or
+ * tapping it opens a popover with its picture or color, name and description, read from the
+ * current state at that moment; leaving it, tapping outside or Escape closes it. A click does
+ * nothing else.
+ */
+export declare const AssistantReferenceLink: import("react").MemoExoticComponent<typeof ReferenceLinkView>;
+export {};

package/dist/configurator/ui/assistant/reference-link/AssistantReferenceLink.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Trans as a}from"@lingui/react";import{styled as t,useThemeProps as i}from"@mui/material";import{memo as n,useCallback as o,useEffect as l,useState as s}from"react";import{isShallowEqual as d}from"@salsita-ai/common/utils";import{useResourceUrl as m}from"#package/react-sdk";import{AssistantPopover as c}from"../popover/index.js";import{assistantReferenceStyles as p}from"./reference-styles.js";import{useAssistantReferenceDetails as f}from"./use-assistant-reference-details.js";let u="PhxAssistantReferenceLink",h=t("span",{name:u,slot:"root"})(p),x=t("span",{name:u,slot:"details"})(({theme:{palette:e,shape:r,shadows:a,spacing:t,typography:i}})=>({...i.body2,background:e.background.paper,borderRadius:r.borderRadius,boxShadow:a[4],color:e.text.primary,display:"flex",gap:t(1.5),maxInlineSize:320,padding:t(1.5),'&[data-reference-details="unavailable"]':{color:e.text.secondary}})),b=t("img")(({theme:{shape:e}})=>({alignSelf:"flex-start",blockSize:"auto",borderRadius:e.borderRadius/2,flexShrink:0,inlineSize:64,maxBlockSize:96,objectFit:"contain"})),g=t("span")(({theme:{palette:e,shape:r}})=>({blockSize:32,borderRadius:r.borderRadius/2,boxShadow:`inset 0 0 0 1px ${e.divider}`,flexShrink:0,inlineSize:32})),k=t("span")(({theme:{palette:e,spacing:r}})=>({display:"flex",flexDirection:"column",gap:r(.5),minInlineSize:0,"& > :first-of-type":{fontWeight:600},"& > :not(:first-of-type)":{color:e.text.secondary}})),S={},y=({target:t,onResolve:n,onImageLoad:o})=>{let s=f(t),{getResourceUrl:d}=m(),c=null!=s,{slots:p={},slotProps:h={}}=i({props:S,name:u}),y=p.details??x;if(l(()=>{n(c)},[c,n]),!s)return e(y,{...h.details,"data-reference-details":"unavailable",children:e(a,{id:"sdk.assistant.reference.unavailable.message",message:"Not available right now"})});let{name:R,description:v,imageUrl:j,color:z}=s;return r(y,{...h.details,children:[null!=j&&e(b,{src:d(j),alt:"",onLoad:o}),null==j&&null!=z&&e(g,{style:{background:z}}),r(k,{children:[e("span",{children:R}),null!=v&&e("span",{children:v})]})]})};export const AssistantReferenceLink=n(({target:r,children:a})=>{let[t,n]=s(!1),l=o(e=>n(!e),[]),{slots:d={},slotProps:m={}}=i({props:S,name:u}),p=d.root??h;return e(c,{title:a=>e(y,{target:r,onResolve:l,onImageLoad:a}),children:r=>e(p,{...m.root,...r,"data-reference":t?"muted":void 0,children:a})})},(e,r)=>e.children===r.children&&d(e.target,r.target));

package/dist/configurator/ui/assistant/reference-link/assistant-link-target.d.ts

@@ -0,0 +1,34 @@
+import { type DomainEntityId } from '#package/domain';
+/** A recipe of a recipe group on an entity, as the assistant read it under `meta`: `recipe:<entityId>/<groupId>/<key>`. */
+export interface AssistantRecipeTarget {
+    readonly kind: 'recipe';
+    readonly entityId: DomainEntityId<string>;
+    readonly groupId: string;
+    readonly key: string;
+}
+/**
+ * A choice of a writable field on an entity, as the assistant read it under `meta`:
+ * `option:<entityId>/<edgeName>/<value>`. The edge is the options field the assistant queried, such
+ * as `finishOptions`, and the value is the option's value in its string form.
+ */
+export interface AssistantOptionTarget {
+    readonly kind: 'option';
+    readonly entityId: DomainEntityId<string>;
+    readonly edgeName: string;
+    readonly value: string;
+}
+/** What a reference points at: something the configurator offers, shown by its details rather than selected. */
+export type AssistantReferenceTarget = AssistantRecipeTarget | AssistantOptionTarget;
+/** Where a link the assistant wrote in a reply points: an entity of the configuration, or a reference. */
+export type AssistantLinkTarget = {
+    readonly kind: 'entity';
+    readonly id: DomainEntityId<string>;
+} | AssistantReferenceTarget;
+/** True for the target of a link the assistant wrote with one of its schemes, whatever follows the scheme. */
+export declare const isAssistantLinkHref: (href: string) => boolean;
+/**
+ * What a link the assistant wrote points at, or `null` when what follows its scheme is not a
+ * well-formed target. An entity link holds the id as it is; the parts of a reference are decoded,
+ * so a key the model encoded as in a URL and one Markdown encoded from angle brackets read the same.
+ */
+export declare const parseAssistantLinkTarget: (href: string) => AssistantLinkTarget | null;

package/dist/configurator/ui/assistant/reference-link/assistant-link-target.js

@@ -0,0 +1 @@
+import{DomainEntityIdSchema as t}from"#package/domain";let e="entity:",n="recipe:",i="option:",l=[e,n,i],r=new RegExp(t.pattern),s=t=>{try{let e=decodeURIComponent(t);return""===e?null:e}catch{return null}},u=t=>{let e=t.split("/").map(s);if(3!==e.length)return null;let[n,i,l]=e;return null!=n&&r.test(n)&&null!=i&&null!=l?{entityId:n,first:i,second:l}:null};export const isAssistantLinkHref=t=>l.some(e=>t.startsWith(e));export const parseAssistantLinkTarget=t=>{if(t.startsWith(e)){let n=t.slice(e.length);return r.test(n)?{kind:"entity",id:n}:null}if(t.startsWith(n)){let e=u(t.slice(n.length));return e&&{kind:"recipe",entityId:e.entityId,groupId:e.first,key:e.second}}if(t.startsWith(i)){let e=u(t.slice(i.length));return e&&{kind:"option",entityId:e.entityId,edgeName:e.first,value:e.second}}return null};

package/dist/configurator/ui/assistant/reference-link/assistant-reference-details.d.ts

@@ -0,0 +1,25 @@
+import { type AssistantManifest, type AssistantRecipeContext, type DomainEntity, type DomainState } from '#package/domain';
+import type { AssistantReferenceTarget } from './assistant-link-target.js';
+type AnyDomainState = DomainState<DomainEntity<string>>;
+/** What the popover of a reference shows of the recipe or option it points at, texts in the current language. */
+export interface AssistantReferenceDetails {
+    readonly name: string;
+    readonly description: string | null;
+    readonly imageUrl: string | null;
+    readonly color: string | null;
+}
+/**
+ * What reading a reference needs: the manifest of the session and the readers `meta` resolves
+ * through, so the popover shows what the agent read.
+ */
+export interface AssistantReferenceContext extends Pick<AssistantRecipeContext, 'componentReader' | 'resolveLocalizable'> {
+    readonly manifest: AssistantManifest;
+}
+/**
+ * The details of what a reference points at on the given state, read the way `meta` reads them:
+ * only what the session's manifest exposes, from a component that is active on the entity there.
+ * `null` when the target does not resolve: the entity, the group or options edge, or the key or value is
+ * unknown, or the component is not active.
+ */
+export declare const readAssistantReferenceDetails: (target: AssistantReferenceTarget, state: AnyDomainState, context: AssistantReferenceContext) => AssistantReferenceDetails | null;
+export {};

package/dist/configurator/ui/assistant/reference-link/assistant-reference-details.js

@@ -0,0 +1 @@
+import{match as e}from"ts-pattern";import{findAssistantFieldOptions as i,findAssistantRecipeGroups as t,readAssistantFieldOptions as n,readAssistantRecipeGroup as r}from"#package/domain";let l=["child","replace"];export const readAssistantReferenceDetails=(o,a,d)=>{let u=a.entities.find(e=>e.id===o.entityId);return u?e(o).with({kind:"recipe"},e=>((e,i,n,o)=>{let a=(({entityId:e,groupId:i,key:n},o,a,d)=>{for(let u of l)for(let l of t(d.manifest,u,o)){if(l.groupId!==i)continue;let t=r(u,l,e,a,d)?.recipes.find(e=>e.key===n);if(t)return t}return null})(e,i,n,o);if(!a)return null;let{title:d,description:u,thumbnailUrl:f}=a.item,{resolveLocalizable:m}=o;return{name:m(d),description:void 0===u?null:m(u),imageUrl:void 0===f?null:m(f),color:null}})(e,u.type,a,d)).with({kind:"option"},e=>(({entityId:e,edgeName:t,value:r},l,o,a)=>{let d=i(a.manifest,l).find(e=>e.edgeName===t),u=d?n(d,e,o,a)?.find(e=>String(e.value)===r):void 0;return u?{name:u.name??u.description??String(u.value),description:null==u.name?null:u.description,imageUrl:u.imageUrl,color:u.color}:null})(e,u.type,a,d)).exhaustive():null};

package/dist/configurator/ui/assistant/reference-link/index.d.ts

@@ -0,0 +1,3 @@
+export { AssistantReferenceLink, type ThemeableAssistantReferenceLinkProps } from './AssistantReferenceLink.js';
+export { isAssistantLinkHref, parseAssistantLinkTarget } from './assistant-link-target.js';
+export { assistantReferenceStyles } from './reference-styles.js';

package/dist/configurator/ui/assistant/reference-link/index.js

@@ -0,0 +1 @@
+export{AssistantReferenceLink}from"./AssistantReferenceLink.js";export{isAssistantLinkHref,parseAssistantLinkTarget}from"./assistant-link-target.js";export{assistantReferenceStyles}from"./reference-styles.js";

package/dist/configurator/ui/assistant/reference-link/reference-styles.d.ts

@@ -0,0 +1,12 @@
+import { type CSSObject, type Theme } from '@mui/material';
+/**
+ * How a link in a reply reads: a glossary reference, text that flows with the sentence and wraps
+ * with it, in the reference color with a dashed underline. Entity links and the references to
+ * recipes and options share it, so every link of a reply looks alike.
+ *
+ * - `data-reference="plain"`: something that exists but does nothing on a click, in the text color;
+ * - `data-reference="muted"`: something that is gone or cannot be read right now.
+ */
+export declare const assistantReferenceStyles: ({ theme: { palette, shape } }: {
+    readonly theme: Theme;
+}) => CSSObject;

package/dist/configurator/ui/assistant/reference-link/reference-styles.js

@@ -0,0 +1 @@
+import{alpha as e}from"@mui/material";import{hoverStyles as r}from"#package/ui-sdk";export const assistantReferenceStyles=({theme:{palette:o,shape:i}})=>({background:"none",border:"none",borderRadius:i.borderRadius/2,boxDecorationBreak:"clone",color:o.primary.main,cursor:"pointer",font:"inherit",margin:0,padding:0,textDecorationLine:"underline",textDecorationStyle:"dashed",textDecorationThickness:1,textUnderlineOffset:"0.2em",WebkitBoxDecorationBreak:"clone",'&:focus-visible, &[data-hovered="true"], &[aria-expanded="true"]':{background:e(o.primary.main,o.action.hoverOpacity)},...r({"&:hover":{background:e(o.primary.main,o.action.hoverOpacity)}}),"&:focus-visible":{outline:`2px solid ${o.primary.main}`,outlineOffset:1},'&[data-reference="plain"]':{color:"inherit",cursor:"auto"},'&[data-reference="muted"]':{color:o.text.disabled}});

package/dist/configurator/ui/assistant/reference-link/use-assistant-reference-details.d.ts

@@ -0,0 +1,8 @@
+import type { AssistantReferenceTarget } from './assistant-link-target.js';
+import { type AssistantReferenceDetails } from './assistant-reference-details.js';
+/**
+ * The details of what a reference points at, read from the committed state and followed while the
+ * caller is mounted; `null` when it does not resolve there. Only the open popover of a reference
+ * calls it, so a reply full of references reads nothing until one is opened.
+ */
+export declare const useAssistantReferenceDetails: (target: AssistantReferenceTarget) => AssistantReferenceDetails | null;