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

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

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

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

@@ -1 +1 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Tooltip as r,styled as o}from"@mui/material";import{useCallback as a,useState as t}from"react";import{PhxIcon as n}from"#package/ui-sdk";import{useResourceImageUrl as l}from"../resource-image/index.js";import{AssistantPanelName as s}from"../theme.js";let d=o("button",{name:s,slot:"formSwatch"})(({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=o("img",{name:s,slot:"formSwatchImage"})({blockSize:"100%",display:"block",inlineSize:"100%",objectFit:"cover"}),c=o("span",{name:s,slot:"formSwatchCheck"})(({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%)"})),p=o("span")({display:"inline-flex"});export const FormSwatch=({attributes:o,label:s,disabled:u,selected:f,onSelect:b})=>{let{value:h,color:x,image:g}=o,y=l()(g),[k,S]=t(),j=[s,h,x,g].find(Boolean),v=a(()=>{S(y)},[y]);return e(r,{title:j??"",placement:"top",children:e(p,{children:i(d,{type:"button","aria-label":j,disabled:u,"aria-pressed":f,onClick:()=>b([h,s,x,g].find(Boolean)??""),style:null==x?void 0:{background:x},children:[null!=y&&y!==k&&e(m,{src:y,alt:"",loading:"lazy",onError:v}),f&&e(c,{"aria-hidden":!0,children:e(n,{name:"Check",fontSize:"inherit"})})]})})})};
+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

@@ -1,5 +1,52 @@
+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;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{InputBase as t,styled as o}from"@mui/material";import{useCallback as i,useEffect as a}from"react";import{AssistantPanelName as d}from"../theme.js";let m=o("label",{name:d,slot:"formText"})(({theme:{palette:e,spacing:r,typography:t}})=>({alignSelf:"stretch",color:e.text.secondary,display:"grid",gap:r(.5),...t.caption})),l=e=>""===e.trim()?void 0:e.trim(),n=o(t,{name:d,slot:"formTextInput"})(({theme:{palette:e,spacing:r,typography:t}})=>({...t.body2,border:`1px solid ${e.divider}`,borderRadius:12,color:e.text.primary,paddingBlock:r(.75),paddingInline:r(1.5),"&.Mui-focused":{borderColor:e.primary.main},"& .MuiInputBase-input":{padding:0}}));export const FormText=({attributes:{value:t,placeholder:o},label:d,disabled:s,state:p,onChange:c})=>(a(()=>{void 0===p&&void 0!==t&&""!==t&&c(t,l(t))},[p,t,c]),r(m,{children:[d,e(n,{value:p??t??"",placeholder:o,disabled:s,onChange:i(e=>{let r=e.target.value;c(r,l(r))},[c])})]}));
+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/index.d.ts

@@ -1,9 +1,9 @@
 export type { FormContainerProps, FormElementAttributes, FormInputProps, FormOptionProps, } from './form-element-props.js';
-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';
+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/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,5 +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 { AssistantFormElementRoleProps, AssistantFormElementType, CreateAssistantFormElement, } from './form/index.js';
+export type { AssistantBuiltInFormSlots, AssistantFormElementRoleProps, AssistantFormElementType, CreateAssistantFormElement, ThemeableAssistantFormProps, } from './form/index.js';
 export { createAssistantFormElementFactory } from './form/index.js';
-export type { FormContainerProps, FormInputProps, FormOptionProps } from './form-elements/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{createAssistantFormElementFactory}from"./form/index.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

@@ -1,5 +1,47 @@
-import { type ReactNode } from 'react';
+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. */

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

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Trans as n}from"@lingui/react";import{ClickAwayListener as t,Tooltip as a,styled as i}from"@mui/material";import{memo as o,useCallback as l,useEffect as s,useRef as d,useState as c}from"react";import{isShallowEqual as p}from"@salsita-ai/common/utils";import{useResourceUrl as m}from"#package/react-sdk";import{AssistantPanelName as u}from"../theme.js";import{assistantReferenceStyles as f}from"./reference-styles.js";import{useAssistantReferenceDetails as h}from"./use-assistant-reference-details.js";let b=i("span",{name:u,slot:"referenceLink"})(f),x=i("span",{name:u,slot:"referenceDetails"})(({theme:{palette:e,shape:r,shadows:n,spacing:t,typography:a}})=>({...a.body2,background:e.background.paper,borderRadius:r.borderRadius,boxShadow:n[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}})),g=i("img")(({theme:{shape:e}})=>({alignSelf:"flex-start",blockSize:"auto",borderRadius:e.borderRadius/2,flexShrink:0,inlineSize:64,maxBlockSize:96,objectFit:"contain"})),k=i("span")(({theme:{palette:e,shape:r}})=>({blockSize:32,borderRadius:r.borderRadius/2,boxShadow:`inset 0 0 0 1px ${e.divider}`,flexShrink:0,inlineSize:32})),y=i("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=({target:t,onResolve:a,onImageLoad:i})=>{let o=h(t),{getResourceUrl:l}=m(),d=null!=o;if(s(()=>{a(d)},[d,a]),!o)return e(x,{"data-reference-details":"unavailable",children:e(n,{id:"sdk.assistant.reference.unavailable.message",message:"Not available right now"})});let{name:c,description:p,imageUrl:u,color:f}=o;return r(x,{children:[null!=u&&e(g,{src:l(u),alt:"",onLoad:i}),null==u&&null!=f&&e(k,{style:{background:f}}),r(y,{children:[e("span",{children:c}),null!=p&&e("span",{children:p})]})]})};export const AssistantReferenceLink=o(({target:r,children:n})=>{let[i,o]=c(!1),[s,p]=c(!1),m=l(()=>o(!0),[]),u=l(()=>o(!1),[]),f=l(e=>p(!e),[]),h=d(null),x=l(e=>{h.current=e},[]),g=l(()=>{h.current?.update()},[]),k=l(e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),o(!0))},[]);return e(t,{onClickAway:u,mouseEvent:!!i&&"onClick",touchEvent:!!i&&"onTouchEnd",children:e(a,{open:i,onOpen:m,onClose:u,title:e(S,{target:r,onResolve:f,onImageLoad:g}),placement:"top-start",describeChild:!0,disableTouchListener:!0,PopperProps:{popperRef:x},slotProps:{tooltip:{sx:{background:"none",maxInlineSize:"none",padding:0}}},children:e(b,{role:"button",tabIndex:0,"aria-expanded":i,"data-reference":s?"muted":void 0,onClick:m,onKeyDown:k,children:n})})})},(e,r)=>e.children===r.children&&p(e.target,r.target));
+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/index.d.ts

@@ -1,3 +1,3 @@
-export { AssistantReferenceLink } from './AssistantReferenceLink.js';
+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/reference-styles.js

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

@@ -1,9 +1,56 @@
+import type { ButtonBaseProps, ComponentsOverrides } from '@mui/material';
+import { type ElementType, type ImgHTMLAttributes, type ReactNode } from 'react';
+declare const MuiComponentName: 'PhxAssistantImage';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: 'root' | 'button';
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantImageProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+/** The slots of an image in a reply. Read from the theme only. */
+export interface ThemeableAssistantImageProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The picture (`img`).
+     * - `button` — The button around the picture that opens it larger; none inside a link (`ButtonBase`).
+     */
+    readonly slots?: Partial<Record<'root' | 'button', ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the picture.
+     * - `button` — Props for the button.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: ImgHTMLAttributes<HTMLImageElement>;
+        readonly button: ButtonBaseProps;
+    }>;
+}
+/**
+ * Marks the pictures among `children` as the content of a link, which they then leave to the link: they
+ * open nothing themselves, so a click follows the link or selects the entity, and no button nests in it.
+ */
+export declare const AssistantImageLinkScope: ({ children }: {
+    readonly children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
 export interface AssistantImageProps {
     readonly src: string | undefined;
     readonly alt: string | undefined;
 }
 /**
- * An image in a reply, loaded from the project's resources. One the panel refuses to request or
- * that fails to load shows its alt text instead, so the sentence around it still reads.
+ * An image in a reply, loaded from the project's resources; a click opens it larger beside the panel,
+ * where the user can annotate it, unless it is inside a link (see {@link AssistantImageLinkScope}),
+ * whose click it leaves to the link. One the panel refuses to request or that fails to load shows its
+ * alt text instead, so the sentence around it still reads.
  */
 export declare const AssistantImage: import("react").MemoExoticComponent<({ src, alt }: AssistantImageProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/configurator/ui/assistant/resource-image/AssistantImage.js

@@ -1 +1 @@
-import{jsx as r,Fragment as e}from"react/jsx-runtime";import{styled as t}from"@mui/material";import{memo as m,useCallback as o,useState as a}from"react";import{AssistantPanelName as i}from"../theme.js";import{useResourceImageUrl as s}from"./use-resource-image-url.js";let l=t("img",{name:i,slot:"image"})(({theme:{shape:r,spacing:e}})=>({blockSize:"auto",borderRadius:r.borderRadius,display:"block",maxInlineSize:"100%","& + &":{marginBlockStart:e(1)}}));export const AssistantImage=m(({src:t,alt:m})=>{let i=s()(t),[n,u]=a(),c=o(()=>{u(i)},[i]);return null==i||i===n?r(e,{children:m}):r(l,{src:i,alt:m??"",loading:"lazy",onError:c})});
+import{jsx as e,Fragment as r}from"react/jsx-runtime";import{ButtonBase as i,styled as o,useThemeProps as t}from"@mui/material";import{createContext as a,memo as n,useCallback as s,useContext as l,useState as m}from"react";import{useLocalizable as d}from"#package/react-sdk";import{useConfigurator as u}from"../../../application-runtime/index.js";import{useResourceImageUrl as c}from"./use-resource-image-url.js";let p="PhxAssistantImage",g={id:"sdk.assistant.image.open.label",message:"Open the image"},b=o("img",{name:p,slot:"root"})(({theme:{shape:e,spacing:r}})=>({blockSize:"auto",borderRadius:e.borderRadius,display:"block",maxInlineSize:"100%","& + &":{marginBlockStart:r(1)}})),k=o(i,{name:p,slot:"button"})(({theme:{palette:e,shape:r,spacing:i}})=>({borderRadius:r.borderRadius,cursor:"zoom-in",display:"block",maxInlineSize:"100%","& + &":{marginBlockStart:i(1)},"&:focus-visible":{outline:`2px solid ${e.primary.main}`,outlineOffset:2}})),f={},x=a(!1);export const AssistantImageLinkScope=({children:r})=>e(x.Provider,{value:!0,children:r});export const AssistantImage=n(({src:i,alt:o})=>{let{assistantSystem:a}=u(),n=c()(i),[h,v]=m(),I=l(x),S=d(g),{slots:z={},slotProps:j={}}=t({props:f,name:p}),y=""===o?void 0:o,R=s(()=>{null!=n&&a.viewImage({kind:"url",url:n,title:y})},[a,y,n]),A=s(()=>{v(n)},[n]);if(null==n||n===h)return e(r,{children:o});let B=z.root??b,O=z.button??k,P=e(B,{loading:"lazy",...j.root,src:n,alt:o??"",onError:A});return I?P:e(O,{...j.button,"aria-label":void 0===y?S:void 0,onClick:R,children:P})});

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

@@ -1,3 +1,3 @@
-export { AssistantImage } from './AssistantImage.js';
+export { AssistantImage, AssistantImageLinkScope, type ThemeableAssistantImageProps } from './AssistantImage.js';
 export { isResourcePath } from './resource-path.js';
 export { useResourceImageUrl } from './use-resource-image-url.js';

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

@@ -1 +1 @@
-export{AssistantImage}from"./AssistantImage.js";export{isResourcePath}from"./resource-path.js";export{useResourceImageUrl}from"./use-resource-image-url.js";
+export{AssistantImage,AssistantImageLinkScope}from"./AssistantImage.js";export{isResourcePath}from"./resource-path.js";export{useResourceImageUrl}from"./use-resource-image-url.js";

package/dist/configurator/ui/assistant/screenshots/ScreenshotThumbnails.d.ts

@@ -1,4 +1,38 @@
+import type { ComponentsOverrides } from '@mui/material';
+import type { ElementType, HTMLAttributes } from 'react';
 import type { AssistantToolScreenshot } from './tool-screenshots.js';
+declare const MuiComponentName: 'PhxAssistantScreenshots';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: 'root';
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantScreenshotsProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+/** The slots of the pictures of a tool call's screenshots, in their popover. Read from the theme only. */
+export interface ThemeableAssistantScreenshotsProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The grid of pictures (`span`); it gets the number of its columns in `ownerState`.
+     */
+    readonly slots?: Partial<Record<'root', ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the grid.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: HTMLAttributes<HTMLSpanElement>;
+    }>;
+}
 interface ScreenshotThumbnailsProps {
     readonly screenshots: readonly AssistantToolScreenshot[];
     /** Called once a picture has loaded, which changes the size of the popover. */