@salsita-ai/sdk 0.50.0-develop.662fa65a4c → 0.50.0-develop.6806625cca

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,9 +1,43 @@
+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. */
     readonly onImageLoad: () => void;
 }
-/** The pictures of a tool call's screenshots, each captioned by its view and entity id. */
+/** The pictures of a tool call's screenshots. */
 export declare const ScreenshotThumbnails: ({ screenshots, onImageLoad }: ScreenshotThumbnailsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/configurator/ui/assistant/screenshots/ScreenshotThumbnails.js

@@ -1 +1 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{styled as r}from"@mui/material";import{AssistantPanelName as o}from"../theme.js";let a=r("span",{name:o,slot:"screenshots"})(({theme:{palette:e,shape:i,shadows:r,spacing:o,typography:a}})=>({...a.caption,background:e.background.paper,borderRadius:i.borderRadius,boxShadow:r[4],color:e.text.secondary,display:"grid",gap:o(1.5),gridTemplateColumns:"repeat(auto-fill, minmax(140px, 1fr))",inlineSize:"min(80vw, 480px)",padding:o(1.5)})),n=r("span")(({theme:{spacing:e}})=>({display:"flex",flexDirection:"column",gap:e(.5),minInlineSize:0})),t=r("img")(({theme:{palette:e,shape:i}})=>({blockSize:"auto",borderRadius:i.borderRadius/2,boxShadow:`inset 0 0 0 1px ${e.divider}`,inlineSize:"100%"})),s=r("span")({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"});export const ScreenshotThumbnails=({screenshots:r,onImageLoad:o})=>e(a,{children:r.map(({label:r,entityId:a,view:d,src:l})=>i(n,{children:[e(t,{src:l,alt:"",onLoad:o}),i(s,{title:r,children:[d," \xb7 ",a]})]},r))});
+import{jsx as e}from"react/jsx-runtime";import{styled as o,useThemeProps as r}from"@mui/material";import{useScreenshotSrc as a}from"./use-screenshot-src.js";let t="PhxAssistantScreenshots",i=o("span",{name:t,slot:"root",shouldForwardProp:e=>"ownerState"!==e})(({ownerState:{columns:e},theme:{palette:o,shape:r,shadows:a,spacing:t}})=>({background:o.background.paper,borderRadius:r.borderRadius,boxShadow:a[4],display:"grid",gap:t(1.5),gridTemplateColumns:`repeat(${e}, minmax(0, 200px))`,maxInlineSize:"80vw",padding:t(1.5)})),s=o("img")(({theme:{palette:e,shape:o}})=>({blockSize:"auto",borderRadius:o.borderRadius/2,boxShadow:`inset 0 0 0 1px ${e.divider}`,display:"block",inlineSize:"100%"})),n=o("span")(({theme:{palette:e,shape:o}})=>({aspectRatio:"4 / 3",background:e.action.hover,borderRadius:o.borderRadius/2,display:"block"})),d={},m=({picture:o,onImageLoad:r})=>{let t=a(o);return void 0===t?e(n,{}):e(s,{src:t,alt:"",onLoad:r})};export const ScreenshotThumbnails=({screenshots:o,onImageLoad:a})=>{let{slots:s={},slotProps:n={}}=r({props:d,name:t});return e(s.root??i,{...n.root,ownerState:{columns:Math.min(o.length,2)},children:o.map(({label:o,picture:r})=>e(m,{picture:r,onImageLoad:a},o))})};

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

@@ -1,2 +1,3 @@
-export { ScreenshotThumbnails } from './ScreenshotThumbnails.js';
+export { ScreenshotThumbnails, type ThemeableAssistantScreenshotsProps } from './ScreenshotThumbnails.js';
 export { type AssistantToolScreenshot, readToolScreenshots } from './tool-screenshots.js';
+export { useScreenshotSrc } from './use-screenshot-src.js';

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

@@ -1 +1 @@
-export{ScreenshotThumbnails}from"./ScreenshotThumbnails.js";export{readToolScreenshots}from"./tool-screenshots.js";
+export{ScreenshotThumbnails}from"./ScreenshotThumbnails.js";export{readToolScreenshots}from"./tool-screenshots.js";export{useScreenshotSrc}from"./use-screenshot-src.js";

package/dist/configurator/ui/assistant/screenshots/tool-screenshots.d.ts

@@ -1,11 +1,13 @@
+/** Where the panel gets a screenshot's picture from: the server, by the id the browser uploaded it under. */
+export interface AssistantScreenshotPicture {
+    readonly kind: 'stored';
+    readonly imageId: string;
+}
 /** A screenshot a `query` or `apply` call took, as the panel shows it. */
 export interface AssistantToolScreenshot {
     /** The label the call's `image` field returned, such as `Cabinet-2/doorLayout#2`. */
     readonly label: string;
-    readonly entityId: string;
-    readonly view: string;
-    /** The picture as a data URL. */
-    readonly src: string;
+    readonly picture: AssistantScreenshotPicture;
 }
 /**
  * The screenshots of a tool result: the image parts that follow the result's JSON, each after the

package/dist/configurator/ui/assistant/screenshots/tool-screenshots.js

@@ -1 +1 @@
-import{z as e}from"zod";let t=e.object({type:e.literal("text"),content:e.string()}),a=e.object({type:e.literal("image"),source:e.object({type:e.literal("data"),value:e.string(),mimeType:e.string()})}),s=/^([^/]+)\/([^#]+)(?:#\d+)?$/;export const readToolScreenshots=e=>Array.isArray(e)?e.slice(1).flatMap((e,r,c)=>{let l=a.safeParse(e),o=t.safeParse(c[r-1]),n=o.success?s.exec(o.data.content):null;if(!l.success||!o.success||!n?.[1]||!n[2])return[];let{value:i,mimeType:d}=l.data.source;return[{label:o.data.content,entityId:n[1],view:n[2],src:`data:${d};base64,${i}`}]}):[];
+import{z as t}from"zod";import{readAssistantImageReference as e}from"@salsita-ai/contracts/assistant";let a=t.object({type:t.literal("text"),content:t.string()}),r=t.object({type:t.literal("image"),source:t.object({type:t.literal("url"),value:t.string()})}),s=/^[^/]+\/[^#]+(?:#\d+)?$/;export const readToolScreenshots=t=>Array.isArray(t)?t.slice(1).flatMap((t,l,o)=>{let n=r.safeParse(t),c=a.safeParse(o[l-1]),i=n.success?(({source:t})=>{let a=e(t.value);return null===a?null:{kind:"stored",imageId:a}})(n.data):null;return i&&c.success&&s.test(c.data.content)?[{label:c.data.content,picture:i}]:[]}):[];

package/dist/configurator/ui/assistant/screenshots/use-screenshot-src.d.ts

@@ -0,0 +1,8 @@
+import type { AssistantScreenshotPicture } from './tool-screenshots.js';
+/**
+ * The `src` of a screenshot's or an attached image's picture: the object URL the assistant system
+ * reads the uploaded image into, once it has been read; `undefined` until then and when the read
+ * fails. The screenshots of a call are read only while their popover is open; the images a user
+ * attached are read as soon as their bubble shows.
+ */
+export declare const useScreenshotSrc: (picture: AssistantScreenshotPicture) => string | undefined;

package/dist/configurator/ui/assistant/screenshots/use-screenshot-src.js

@@ -0,0 +1 @@
+import{useEffect as r,useState as e}from"react";import{useConfigurator as t}from"../../../application-runtime/index.js";export const useScreenshotSrc=o=>{let{assistantSystem:i}=t(),{imageId:n}=o,[c,m]=e();return r(()=>{let r=!0;return i.loadScreenshotUrl(n).then(e=>{r&&m({imageId:n,src:e})},()=>void 0),()=>{r=!1}},[i,n]),c?.imageId===n?c.src:void 0};

package/dist/configurator/ui/assistant/streamed-markdown.d.ts

@@ -1,3 +1,14 @@
+/** Where a code block starts and ends in the text, as Markdown parsed it. */
+export interface FencePosition {
+    readonly start: number;
+    readonly end: number;
+}
+/**
+ * True when a code block of a finished reply was cut off: it runs to the end of the reply without
+ * the line that closes its fence, whatever backticks the reply has elsewhere. A block that the end
+ * of its list item or blockquote closed before the reply went on is not cut off.
+ */
+export declare const isCutOffFence: (text: string, { start, end }: FencePosition) => boolean;
 /** True when the text has a code fence the model has not closed yet. */
 export declare const hasOpenFence: (text: string) => boolean;
 /**

package/dist/configurator/ui/assistant/streamed-markdown.js

@@ -1,2 +1,2 @@
-let e=(e,t)=>e.split(t).length-1,t=/^\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/,l=/(^|\n) {0,3}>[ \t]*\[![a-z]*$/i,n=/(^|\n) {0,3}>[ \t]*\[![a-z]+\][ \t]*$/i;export const hasOpenFence=t=>e(t,"```")%2==1;export const completeStreamedMarkdown=s=>{var r;let a;if(hasOpenFence(s))return`${s}
-\`\`\``;let i=s.lastIndexOf("```"),c=-1===i?"":s.slice(0,i+3),{head:$,marker:h}=(r=s.slice(c.length),null==(a=n.exec(r))?{head:r.replace(l,"$1"),marker:""}:{head:r.slice(0,a.index),marker:r.slice(a.index)}),p=(e=>{let l=e.split("\n"),n=l.length;for(;n>0&&l[n-1]?.trimStart().startsWith("|");)n-=1;let s=l.slice(n),r=s[1],a=null!=r&&s.length>2&&t.test(r);return 0===s.length||a?e:l.slice(0,n).join("\n")})((e($,"`")%2==1?$.slice(0,$.lastIndexOf("`")):$).replace(/!?\[([^\]\n]*)\](?:\([^)\n]*)?$/,"$1").replace(/!?\[[^\]\n]*$/,"")),d=e(p,"**")%2==1?`${p}**`:p;return`${c}${d}${h}`};
+let e=(e,t)=>e.split(t).length-1,t=/^\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/,l=/(^|\n) {0,3}>[ \t]*\[![a-z]*$/i,n=/(^|\n) {0,3}>[ \t]*\[![a-z]+\][ \t]*$/i,s=/^[ \t>]*(`{3,}|~{3,})/,r=/^[ \t>]*(`{3,}|~{3,})[ \t]*$/;export const isCutOffFence=(e,{start:t,end:l})=>{let n,i,c;return l>=e.trimEnd().length&&(n=e.slice(t,l).split("\n"),i=s.exec(n[0]??"")?.[1],c=n.length>1?r.exec(n.at(-1)??"")?.[1]:void 0,null==i||null==c||c[0]!==i[0]||!(c.length>=i.length))};export const hasOpenFence=t=>e(t,"```")%2==1;export const completeStreamedMarkdown=s=>{var r;let i;if(hasOpenFence(s))return`${s}
+\`\`\``;let c=s.lastIndexOf("```"),a=-1===c?"":s.slice(0,c+3),{head:h,marker:$}=(r=s.slice(a.length),null==(i=n.exec(r))?{head:r.replace(l,"$1"),marker:""}:{head:r.slice(0,i.index),marker:r.slice(i.index)}),p=(e=>{let l=e.split("\n"),n=l.length;for(;n>0&&l[n-1]?.trimStart().startsWith("|");)n-=1;let s=l.slice(n),r=s[1],i=null!=r&&s.length>2&&t.test(r);return 0===s.length||i?e:l.slice(0,n).join("\n")})((e(h,"`")%2==1?h.slice(0,h.lastIndexOf("`")):h).replace(/!?\[([^\]\n]*)\](?:\([^)\n]*)?$/,"$1").replace(/!?\[[^\]\n]*$/,"")),d=e(p,"**")%2==1?`${p}**`:p;return`${a}${d}${$}`};

package/dist/configurator/ui/assistant/thread-items.d.ts

@@ -1,5 +1,6 @@
 import type { UIMessage } from '@tanstack/ai-client';
-import type { AssistantEarlierThreadSnapshot } from '../../application-runtime/index.js';
+import { type AssistantMessageAnnotation } from '@salsita-ai/contracts/assistant';
+import { type AssistantEarlierThreadSnapshot } from '../../application-runtime/index.js';
 import { type AssistantToolChip } from './tool-chip.js';
 /** A tool call of the thread, with what its chip shows and what a click on the chip logs. */
 export interface AssistantToolItem {
@@ -23,12 +24,24 @@ export type AssistantThreadItem = {
     readonly kind: 'user';
     readonly id: string;
     readonly text: string;
+    /** The images the user attached, by the ids the message references them by; annotations are not among them. */
+    readonly imageIds: readonly string[];
+    /** The annotations the user attached, in their order among the message's images. */
+    readonly annotations: readonly AssistantMessageAnnotation[];
+    /** How the user spoke the message, when they did; nothing for a typed one. */
+    readonly voice: AssistantUserVoice | null;
 } | {
     readonly kind: 'text';
     readonly id: string;
     readonly markdown: string;
     readonly isStreaming: boolean;
     readonly forms: AssistantFormsVisibility;
+    /**
+     * The reply this text ends, by the id of its message, when the panel can read it aloud: voice is on, the reply
+     * has been written, and it has something to say within what the server reads. Its play button follows the text.
+     * Nothing on every other text.
+     */
+    readonly playableReplyId: string | null;
 } | {
     readonly kind: 'tools';
     readonly id: string;
@@ -37,6 +50,12 @@ export type AssistantThreadItem = {
     readonly kind: 'separator';
     readonly id: string;
 };
+/**
+ * How a user message was spoken:
+ * - `transcribing`: its recording was sent, and the server's transcript has not arrived yet
+ * - `spoken`: its text is the transcript the server made of the recording
+ */
+export type AssistantUserVoice = 'transcribing' | 'spoken';
 export interface AssistantThreadView {
     readonly items: readonly AssistantThreadItem[];
     /** True while a reply runs and neither streaming text nor a row of tool chips shows that it does. */
@@ -46,10 +65,10 @@ export interface AssistantThreadView {
  * Lays the messages of the chat out as the blocks the thread renders. Reasoning is left out; tool
  * results are not shown on their own but decide the state of the chip of their call.
  */
-export declare const buildThreadView: (messages: ReadonlyArray<UIMessage>, isReplying: boolean, isResuming: boolean) => AssistantThreadView;
+export declare const buildThreadView: (messages: ReadonlyArray<UIMessage>, isReplying: boolean, isResuming: boolean, isVoiceEnabled: boolean) => AssistantThreadView;
 /**
  * Lays the closed threads of the conversation out above the thread that continues them, oldest
  * first, each ended by a separator: the assistant read on from a summary of it, not from the
  * messages themselves.
  */
-export declare const buildEarlierThreadItems: (earlierThreads: ReadonlyArray<AssistantEarlierThreadSnapshot>) => readonly AssistantThreadItem[];
+export declare const buildEarlierThreadItems: (earlierThreads: ReadonlyArray<AssistantEarlierThreadSnapshot>, isVoiceEnabled: boolean) => readonly AssistantThreadItem[];

package/dist/configurator/ui/assistant/thread-items.js

@@ -1 +1 @@
-import{match as t}from"ts-pattern";import{describeToolCall as e}from"./tool-chip.js";let r=t=>{try{return JSON.parse(t)}catch{return t}},i=t=>t.map(t=>"text"===t.type?t.content:"").join("").trim();export const buildThreadView=(o,n,s)=>{let l=(t=>{let e=new Map;for(let i of t)for(let t of i.parts)"tool-result"===t.type&&e.set(t.toolCallId,{result:"string"==typeof t.content?r(t.content):t.content,error:"error"===t.state?t.error??"The tool call failed.":void 0});return e})(o),a=[],d=o.at(-1),p=t=>{let e=a.at(-1);e?.kind==="tools"?a[a.length-1]={...e,tools:[...e.tools,t]}:a.push({kind:"tools",id:t.id,tools:[t]})};for(let r of o){if("user"===r.role){let t=i(r.parts);t&&a.push({kind:"user",id:r.id,text:t});continue}let o=n&&r===d,u=t({isLast:r===d,isBusy:o||s}).with({isLast:!1},()=>"hidden").with({isBusy:!0},()=>"disabled").otherwise(()=>"enabled");r.parts.forEach((t,i)=>{let n=`${r.id}:${i}`;if("text"===t.type){if(t.content.trim()){let e=o&&i===r.parts.length-1;a.push({kind:"text",id:n,markdown:t.content,isStreaming:e,forms:u})}return}if("tool-call"!==t.type)return;let s=l.get(t.id),d=t.input,h=t.output??s?.result;p({id:t.id,input:d,result:h,chip:e({name:t.name,input:d,result:h,error:s?.error,isReplyRunning:o})})})}let u=a.at(-1),h=d?.role==="assistant"&&(u?.kind==="text"&&u.isStreaming||u?.kind==="tools");return{items:a,isThinking:n&&!h}};export const buildEarlierThreadItems=t=>t.flatMap(({threadId:t,messages:e})=>[...buildThreadView(e,!1,!1).items.map(e=>"text"===e.kind?{...e,id:`${t}:${e.id}`,forms:"hidden"}:{...e,id:`${t}:${e.id}`}),{kind:"separator",id:`${t}:separator`}]);
+import{match as t}from"ts-pattern";import{AssistantMessageMetadata as e,banTool as r,readAssistantImageReference as a}from"@salsita-ai/contracts/assistant";import{isSpeakableReply as i}from"../../application-runtime/index.js";import{describeToolCall as o}from"./tool-chip.js";let s=t=>{try{return JSON.parse(t)}catch{return t}},n=t=>t.map(t=>"text"===t.type?t.content:"").join("").trim(),l=t=>t.flatMap(t=>"image"===t.type&&"url"===t.source.type?a(t.source.value)??[]:[]),d=(t,r)=>{let a=e.safeParse(t.metadata),i=a.success?a.data.annotations??[]:[];return r.flatMap(t=>i.filter(e=>e.imageId===t))},p=t=>t.parts.some(t=>"audio"===t.type)?"transcribing":e.safeParse(t.metadata).data?.spoken?"spoken":null;export const buildThreadView=(e,a,u,m)=>{let f=(t=>{let e=new Map;for(let r of t)for(let t of r.parts)"tool-result"===t.type&&e.set(t.toolCallId,{result:"string"==typeof t.content?s(t.content):t.content,error:"error"===t.state?t.error??"The tool call failed.":void 0});return e})(e),c=[],h=e.at(-1),g=a?e.map(t=>t.role).lastIndexOf("user")+1:e.length,k=t=>{let e=c.at(-1);e?.kind==="tools"?c[c.length-1]={...e,tools:[...e.tools,t]}:c.push({kind:"tools",id:t.id,tools:[t]})};for(let[s,y]of e.entries()){if("user"===y.role){let t=n(y.parts),e=l(y.parts),r=d(y,e),a=e.filter(t=>!r.some(e=>e.imageId===t)),i=p(y);(t||e.length>0||i)&&c.push({kind:"user",id:y.id,text:t,imageIds:a,annotations:r,voice:i});continue}let e=a&&y===h,x=t({isLast:y===h,isBusy:e||u}).with({isLast:!1},()=>"hidden").with({isBusy:!0},()=>"disabled").otherwise(()=>"enabled"),w=y.parts.map(t=>"text"===t.type&&""!==t.content.trim()).lastIndexOf(!0),$=m&&s<g&&i(y);y.parts.forEach((t,a)=>{let i=`${y.id}:${a}`;if("text"===t.type){if(t.content.trim()){let r=e&&a===y.parts.length-1,o=$&&a===w?y.id:null;c.push({kind:"text",id:i,markdown:t.content,isStreaming:r,forms:x,playableReplyId:o})}return}if("tool-call"!==t.type||t.name===r.name)return;let s=f.get(t.id),n=t.input,l=t.output??s?.result;k({id:t.id,input:n,result:l,chip:o({name:t.name,input:n,result:l,error:s?.error,isReplyRunning:e})})})}let y=c.at(-1),x=h?.role==="assistant"&&(y?.kind==="text"&&y.isStreaming||y?.kind==="tools");return{items:c,isThinking:a&&!x}};export const buildEarlierThreadItems=(t,e)=>t.flatMap(({threadId:t,messages:r})=>[...buildThreadView(r,!1,!1,e).items.map(e=>"text"===e.kind?{...e,id:`${t}:${e.id}`,forms:"hidden"}:{...e,id:`${t}:${e.id}`}),{kind:"separator",id:`${t}:separator`}]);

package/dist/configurator/ui/assistant/tool-chip.d.ts

@@ -1,11 +1,14 @@
 import { type AssistantToolErrorCode } from '@salsita-ai/contracts/assistant';
 /**
- * How a tool call of the assistant looks in the thread: still running, finished, a change that was
- * not kept (`failed`), or a read that answered with errors (`flawed`), which matters less because
- * the assistant usually just asks again.
+ * How a tool call of the assistant looks in the thread: still running, finished, or gone wrong
+ * (`failed`): a change that was not kept, or a read that answered with errors. Both look the same,
+ * since the reply says what came of them.
+ */
+export type AssistantToolChipState = 'running' | 'done' | 'failed';
+/**
+ * What a tool chip is called: the title or the operation names the model gave, a fixed text, or the
+ * tool's name.
  */
-export type AssistantToolChipState = 'running' | 'done' | 'failed' | 'flawed';
-/** What a tool chip is called: the operation names the model gave, a fixed text, or the tool's name. */
 export type AssistantToolChipLabel = {
     readonly kind: 'text';
     readonly text: string;
@@ -22,6 +25,12 @@ export interface AssistantToolChip {
      * panel knows. Nothing for a call that went wrong for any other reason.
      */
     readonly errorCode: AssistantToolErrorCode | undefined;
+    /**
+     * The messages of the violations a failed call failed on, written for the user, in result order.
+     * Empty for a call that did not fail, that failed for any other reason, or whose violations have
+     * no message.
+     */
+    readonly violations: readonly string[];
 }
 /** A tool call of a message as the chip reads it. */
 export interface AssistantToolCall {
@@ -36,9 +45,10 @@ export interface AssistantToolCall {
     readonly isReplyRunning: boolean;
 }
 /**
- * Describes one tool call for its chip: the label in the order operation names, fixed text for the
- * `apply` and `query` tools, tool name; and whether the call runs, finished, or went wrong. Why it
- * went wrong is part of it only as the code of an error the server recorded: the text of a tool
- * result is worded for the model, not for the user.
+ * Describes one tool call for its chip: the label in the order title, operation names, fixed text
+ * for the `apply` and `query` tools, tool name; and whether the call runs, finished, or went wrong.
+ * Why it went wrong is part of it only as the code of an error the server recorded, or as the
+ * messages of the violations it failed on, which are written for the user: the rest of a tool result
+ * is worded for the model.
  */
 export declare const describeToolCall: (call: AssistantToolCall) => AssistantToolChip;

package/dist/configurator/ui/assistant/tool-chip.js

@@ -1 +1 @@
-import{Kind as e,parse as t}from"graphql";import{z as n}from"zod";import{ASSISTANT_TOOL_ERROR_CODES as r,AssistantToolError as a,applyTool as s,queryTool as o}from"@salsita-ai/contracts/assistant";let i=n.object({operations:n.array(n.object({query:n.string(),operationName:n.string().nullish()}))}),l=n.object({results:n.array(n.object({errors:n.array(n.unknown()).optional()})),committed:n.boolean()}),u=n.tuple([n.object({type:n.literal("text"),content:n.string()})]).rest(n.unknown());export const describeToolCall=n=>{let d=(({name:n,input:r})=>{let a,l=(a=i.safeParse(r)).success?a.data.operations.flatMap(({query:n,operationName:r})=>r??(n=>{try{let r=t(n).definitions.find(t=>t.kind===e.OPERATION_DEFINITION);return r?.kind===e.OPERATION_DEFINITION?r.name?.value:void 0}catch{return}})(n)??[]):[];return l.length>0?{kind:"text",text:l.join(", ")}:n===s.name?{kind:"updateDesign"}:n===o.name?{kind:"readDesign"}:{kind:"text",text:n}})(n);if(null==n.result&&null==n.error)return{label:d,state:n.isReplyRunning?"running":"done",errorCode:void 0};let c=(e=>{let t=a.safeParse(e);if(t.success)return r.find(e=>e===t.data.code)})(n.result);return{label:d,state:(({name:e,result:t,error:n},r)=>{if(null!=n||null!=r)return e===o.name?"flawed":"failed";if(e!==s.name&&e!==o.name)return"done";let a=l.safeParse((e=>{let t=u.safeParse(e);if(!t.success)return e;try{return JSON.parse(t.data[0].content)}catch{return e}})(t));if(!a.success)return e===o.name?"flawed":"failed";let{results:i,committed:d}=a.data;return e===s.name?d?"done":"failed":i.some(({errors:e})=>(e?.length??0)>0)||0===i.length?"flawed":"done"})(n,c),errorCode:c}};
+import{Kind as e,parse as t}from"graphql";import{z as r}from"zod";import{ASSISTANT_TOOL_ERROR_CODES as n,AssistantToolError as s,applyTool as a,queryTool as i}from"@salsita-ai/contracts/assistant";import{SCREENSHOT_NOT_TAKEN as o}from"../../application-runtime/index.js";let l=r.object({title:r.string().nullish().catch(void 0),operations:r.array(r.object({query:r.string(),operationName:r.string().nullish()}))}),u=r.object({results:r.array(r.object({errors:r.array(r.unknown()).optional()})),committed:r.boolean()}),d=r.tuple([r.object({type:r.literal("text"),content:r.string()})]).rest(r.unknown()),c=e=>{let t=d.safeParse(e);if(!t.success)return e;try{return JSON.parse(t.data[0].content)}catch{return e}},f=r.object({extensions:r.object({code:r.string()})}),m=r.object({message:r.string(),extensions:r.object({code:r.literal("VIOLATION"),type:r.string()})});export const describeToolCall=r=>{var d;let p,g=(({name:r,input:n})=>{let s,o,u=(s=l.safeParse(n)).success&&s.data.title?.trim()||void 0;if(null!=u)return{kind:"text",text:u};let d=(o=l.safeParse(n)).success?o.data.operations.flatMap(({query:r,operationName:n})=>n??(r=>{try{let n=t(r).definitions.find(t=>t.kind===e.OPERATION_DEFINITION);return n?.kind===e.OPERATION_DEFINITION?n.name?.value:void 0}catch{return}})(r)??[]):[];return d.length>0?{kind:"text",text:d.join(", ")}:r===a.name?{kind:"updateDesign"}:r===i.name?{kind:"readDesign"}:{kind:"text",text:r}})(r);if(null==r.result&&null==r.error)return{label:g,state:r.isReplyRunning?"running":"done",errorCode:void 0,violations:[]};let x=(e=>{let t=s.safeParse(e);if(t.success)return n.find(e=>e===t.data.code)})(r.result),b=(({name:e,result:t,error:r},n)=>{if(null!=r||null!=n)return"failed";if(e!==a.name&&e!==i.name)return"done";let s=u.safeParse(c(t));if(!s.success)return"failed";let{results:l,committed:d}=s.data;return e===a.name?d?"done":"failed":l.some(({errors:e})=>e?.some(e=>{let t;return!(t=f.safeParse(e)).success||t.data.extensions.code!==o}))||0===l.length?"failed":"done"})(r,x);return{label:g,state:b,errorCode:x,violations:"failed"===b?(d=r.result,(p=u.safeParse(c(d))).success?p.data.results.flatMap(({errors:e})=>(e??[]).flatMap(e=>{let t=m.safeParse(e);return t.success&&t.data.message!==t.data.extensions.type?[t.data.message]:[]})):[]):[]}};

package/dist/configurator/ui/assistant/use-assistant-composer.d.ts

@@ -0,0 +1,88 @@
+import { type AssistantRecording } from './voice/index.js';
+/** An image or an annotation attached to the message being written, as a composer shows it. */
+export interface AssistantComposerAttachment {
+    readonly id: string;
+    /** Object URL of the prepared image for the thumbnail, valid while the attachment is attached. */
+    readonly previewUrl: string;
+    /** True for an annotation, of the view or of an image; false for an image the user added. */
+    readonly isAnnotation: boolean;
+    /** How many comment pins an annotation has; 0 for an image. */
+    readonly pinCount: number;
+}
+/**
+ * Why the last images the user added are not all attached:
+ * - `unreadable`: one could not be read as an image
+ * - `limit`: the message already carries as many images as it can
+ */
+export type AssistantComposerNotice = 'unreadable' | 'limit';
+/**
+ * The message being written to the assistant, with its attachments and what can be done with it.
+ * - `draft` and `setDraft`: the text of the message.
+ * - `attachments`: the images and annotations attached to it, in their order.
+ * - `addFiles(files)`: prepares the files as images and attaches them, as many as `maxAttachments` allows.
+ * - `annotate()`: opens the annotation editor over the configurator; the annotation is attached once the user is
+ *   done with it. Like a file too many, an annotation too many is not made, and `notice` says why.
+ * - `annotateAttachment(id)`: opens the annotation editor on an attached image; the annotation takes its place once
+ *   the user is done with it, so it needs no free slot. An annotation is not annotated again.
+ * - `removeAttachment(id)`: takes an attachment off the message.
+ * - `isPreparing`: whether files added are still being prepared; the message cannot be sent meanwhile.
+ * - `notice`: why the files added last are not all attached, until the attachments change again.
+ * - `maxAttachments`: the most images and annotations one message can carry together.
+ * - `isBusy`: whether a send waits for the thread to be resumed or the images to upload; the message should not
+ *   change meanwhile.
+ * - `isReplying`: whether the assistant is replying; `stop()` ends the reply.
+ * - `isLocked`: whether the assistant banned the user on this configuration, so it takes no message there; nothing
+ *   should be written or attached then, and `canSend` is false.
+ * - `canSend` and `send()`: whether the message can be sent, and sending it. The message is cleared once the chat
+ *   takes it, and comes back, after what was written meanwhile, when the chat gives it back.
+ * - `inputFocusHandlers`: `onFocus` and `onBlur` for the message input, so a phone layout makes room for it.
+ * - `canRecord`: whether the user may speak the message: the session has voice messages on, the browser can record,
+ *   and the assistant takes messages here. A composer shows a mic in place of Send while the text is empty then.
+ * - `recording`: the voice message being recorded, its status, how long it runs and how loud the microphone is.
+ * - `startRecording()`: starts recording, asking for the microphone; a microphone blocked for the page shows as the
+ *   `refused` status, and starting again asks again.
+ * - `sendRecording()`: stops the recording and sends it as the message, with the images and annotations attached. A
+ *   recording the server refuses comes back as `recorded`, to be sent again or dropped; one in which nothing was
+ *   heard is dropped. A recording that reaches two minutes is sent on its own.
+ * - `cancelRecording()`: drops the recording, and the composer is as it was.
+ */
+export interface UseAssistantComposerResult {
+    readonly draft: string;
+    readonly setDraft: (draft: string) => void;
+    readonly attachments: readonly AssistantComposerAttachment[];
+    readonly addFiles: (files: ReadonlyArray<File>) => Promise<void>;
+    readonly annotate: () => Promise<void>;
+    readonly annotateAttachment: (id: string) => Promise<void>;
+    readonly removeAttachment: (id: string) => void;
+    readonly isPreparing: boolean;
+    readonly notice: AssistantComposerNotice | undefined;
+    readonly maxAttachments: number;
+    readonly isBusy: boolean;
+    readonly isLocked: boolean;
+    readonly isReplying: boolean;
+    readonly canSend: boolean;
+    readonly send: () => Promise<void>;
+    readonly stop: () => void;
+    readonly inputFocusHandlers: {
+        readonly onFocus: () => void;
+        readonly onBlur: () => void;
+    };
+    readonly canRecord: boolean;
+    readonly recording: AssistantRecording;
+    readonly startRecording: () => Promise<void>;
+    readonly sendRecording: () => Promise<void>;
+    readonly cancelRecording: () => void;
+}
+export type UseAssistantComposer = () => UseAssistantComposerResult;
+/**
+ * Hook to write a message to the assistant, as the panel's composer does. The text of the message lives
+ * as long as the component that uses the hook; its attachments live in the assistant system
+ * (`composerAttachments$`), so an annotation made from elsewhere, such as a drawing, is attached here too.
+ * The thumbnails' object URLs are the hook's own, revoked once their attachment is gone or the component
+ * unmounts. It does not render again with every chunk of a reply.
+ *
+ * Images added are prepared at once and attached up to `maxAttachments` per message; one that cannot be prepared,
+ * or one too many, is not attached, and `notice` says why. The message keeps its text and images until the chat
+ * takes it, also when the upload of its images fails.
+ */
+export declare const useAssistantComposer: UseAssistantComposer;

package/dist/configurator/ui/assistant/use-assistant-composer.js

@@ -0,0 +1,2 @@
+import{useTheme as t}from"@mui/material";import{useCallback as e,useEffect as n,useMemo as r,useReducer as a,useRef as i,useState as o}from"react";import{skip as c}from"rxjs/operators";import{useEagerObservableSelector as s,useEagerObservableValue as l}from"#package/react-sdk";import{MAX_COMPOSER_ATTACHMENTS as m,useConfigurator as u}from"../../application-runtime/index.js";import{prepareImage as p}from"./attachments/index.js";import{useVoiceRecording as d}from"./voice/index.js";export const useAssistantComposer=()=>{let{assistantSystem:h}=u(),[f,y]=o(""),g=l(h.composerAttachments$),[v,b]=o(0),[k,A]=o(),[L,R]=o(!1),w=i(new Map),[U,j]=a(t=>t+1,0),x=i(g);x.current=g,n(()=>{let t=w.current;for(let[e,n]of t)g.some(t=>t.id===e)||(URL.revokeObjectURL(n),t.delete(e))},[g]),n(()=>{let t=w.current;return 0===t.size&&x.current.length>0&&j(),()=>{for(let e of t.values())URL.revokeObjectURL(e);t.clear()}},[]);let $=i(!1),P=e(t=>{$.current=!0;try{return t()}finally{$.current=!1}},[]);n(()=>{let t=h.composerAttachments$.pipe(c(1)).subscribe(()=>{$.current||A(void 0)});return()=>t.unsubscribe()},[h]);let{isReplying:F,isResuming:S,isLocked:E,isVoiceEnabled:I}=s(h.chat$,t=>({isReplying:t.isLoading,isResuming:t.isResuming,isLocked:t.isLocked,isVoiceEnabled:t.isVoiceEnabled}),[]),O=f.trim(),C=S||L,V=!F&&!C&&!E&&0===v&&(O.length>0||g.length>0),z=e(async t=>{if(0===t.length)return;let e=[];for(let n of t){let t=h.reserveAttachmentSlot();if(!t)break;e.push(t)}let n=t.slice(0,e.length);A(n.length<t.length?"limit":void 0),0!==n.length&&(b(t=>t+n.length),await Promise.all(n.map(async(t,n)=>{let r;try{r=await p(t)}catch{A("unreadable")}finally{b(t=>t-1)}if(e[n]?.()&&r){let t=r;P(()=>h.attach(t))}})))},[h,P]),B=e(async()=>{h.hasFreeAttachmentSlot$.value?(A(void 0),await h.annotate()):A("limit")},[h]),{palette:M}=t(),q=M.background.default,D=e(async t=>{A(void 0),await h.annotate({attachmentId:t,background:q})},[h,q]),G=e(t=>{h.removeAttachment(t),A(void 0)},[h]),H=i(!0);n(()=>(H.current=!0,()=>{H.current=!1}),[]);let J=e(t=>{P(()=>t.forEach(({id:t})=>h.removeAttachment(t))),A(void 0),R(!1)},[h,P]),K=e(t=>{A(P(()=>h.restoreAttachments(t))?void 0:"limit")},[h,P]),N=e(async()=>{if(V){R(!0);try{await h.send(O,g.map(({blob:t,pins:e,source:n})=>e?{blob:t,pins:e,source:n}:t),{onSent:()=>{y(""),J(g)},onUnsent:()=>{y(t=>t.trim()?`${t}
+${f}`:f),K(g)}})}finally{R(!1)}}},[h,g,V,O,f,K,J]),Q=i(async()=>{}),T=d({onLimitReached:()=>void Q.current()}),{recording:W,finish:X,clear:Y,restore:Z}=T,{start:_,cancel:tt}=T,te=I&&"unavailable"!==W.status&&!E,tn=e(async()=>{if(!te||F||C)return;h.unlockPlayback();let t=await X();if(t&&!(v>0)){R(!0);try{await h.send("",g.map(({blob:t,pins:e,source:n})=>e?{blob:t,pins:e,source:n}:t),{audio:t,onSent:()=>{Y(),J(g)},onUnsent:()=>{K(g),H.current&&Z(t)}})}finally{R(!1)}}},[h,g,te,Y,X,C,F,v,K,Z,J]);Q.current=tn;let tr=e(async()=>{!te||F||C||(h.stopPlayback(),h.unlockPlayback(),await _())},[h,te,C,F,_]),ta=e(()=>{h.stop()},[h]),ti=r(()=>({onFocus:()=>h.setInputFocused(!0),onBlur:()=>h.setInputFocused(!1)}),[h]);return{draft:f,setDraft:y,attachments:r(()=>g.map(({id:t,blob:e,pins:n})=>{let r=w.current.get(t);return void 0===r&&(r=URL.createObjectURL(e),w.current.set(t,r)),{id:t,previewUrl:r,isAnnotation:null!=n,pinCount:n?.length??0}}),[g,U]),addFiles:z,annotate:B,annotateAttachment:D,removeAttachment:G,isPreparing:v>0,notice:k,maxAttachments:m,isBusy:C,isLocked:E,isReplying:F,canSend:V,send:N,stop:ta,inputFocusHandlers:ti,canRecord:te,recording:W,startRecording:tr,sendRecording:tn,cancelRecording:tt}};