@salsita-ai/sdk 0.50.0-develop.0b28d3ba99 → 0.50.0-develop.0d2418cc3b

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,3 +1,37 @@
+import type { ComponentsOverrides } from '@mui/material';
+import { type ElementType, type ImgHTMLAttributes } from 'react';
+declare const MuiComponentName: 'PhxAssistantImage';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: 'root';
+    }
+    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`).
+     */
+    readonly slots?: Partial<Record<'root', ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the picture.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: ImgHTMLAttributes<HTMLImageElement>;
+    }>;
+}
 export interface AssistantImageProps {
     readonly src: string | undefined;
     readonly alt: string | undefined;
@@ -7,3 +41,4 @@ export interface AssistantImageProps {
  * 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 r,Fragment as o}from"react/jsx-runtime";import{styled as t,useThemeProps as e}from"@mui/material";import{memo as a,useCallback as m,useState as i}from"react";import{useResourceImageUrl as s}from"./use-resource-image-url.js";let l="PhxAssistantImage",n=t("img",{name:l,slot:"root"})(({theme:{shape:r,spacing:o}})=>({blockSize:"auto",borderRadius:r.borderRadius,display:"block",maxInlineSize:"100%","& + &":{marginBlockStart:o(1)}})),u={};export const AssistantImage=a(({src:t,alt:a})=>{let c=s()(t),[p,d]=i(),{slots:g={},slotProps:x={}}=e({props:u,name:l}),b=m(()=>{d(c)},[c]);return null==c||c===p?r(o,{children:a}):r(g.root??n,{loading:"lazy",...x.root,src:c,alt:a??"",onError:b})});

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

@@ -1,3 +1,3 @@
-export { AssistantImage } from './AssistantImage.js';
+export { AssistantImage, type ThemeableAssistantImageProps } 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,4 +1,5 @@
 import type { UIMessage } from '@tanstack/ai-client';
+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. */
@@ -23,6 +24,10 @@ 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[];
 } | {
     readonly kind: 'text';
     readonly id: string;

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 i}from"@salsita-ai/contracts/assistant";import{describeToolCall as o}from"./tool-chip.js";let a=t=>{try{return JSON.parse(t)}catch{return t}},s=t=>t.map(t=>"text"===t.type?t.content:"").join("").trim(),n=t=>t.flatMap(t=>"image"===t.type&&"url"===t.source.type?i(t.source.value)??[]:[]),l=(t,r)=>{let i=e.safeParse(t.metadata),o=i.success?i.data.annotations??[]:[];return r.flatMap(t=>o.filter(e=>e.imageId===t))};export const buildThreadView=(e,i,d)=>{let p=(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?a(t.content):t.content,error:"error"===t.state?t.error??"The tool call failed.":void 0});return e})(e),u=[],m=e.at(-1),f=t=>{let e=u.at(-1);e?.kind==="tools"?u[u.length-1]={...e,tools:[...e.tools,t]}:u.push({kind:"tools",id:t.id,tools:[t]})};for(let a of e){if("user"===a.role){let t=s(a.parts),e=n(a.parts),r=l(a,e),i=e.filter(t=>!r.some(e=>e.imageId===t));(t||e.length>0)&&u.push({kind:"user",id:a.id,text:t,imageIds:i,annotations:r});continue}let e=i&&a===m,c=t({isLast:a===m,isBusy:e||d}).with({isLast:!1},()=>"hidden").with({isBusy:!0},()=>"disabled").otherwise(()=>"enabled");a.parts.forEach((t,i)=>{let s=`${a.id}:${i}`;if("text"===t.type){if(t.content.trim()){let r=e&&i===a.parts.length-1;u.push({kind:"text",id:s,markdown:t.content,isStreaming:r,forms:c})}return}if("tool-call"!==t.type||t.name===r.name)return;let n=p.get(t.id),l=t.input,d=t.output??n?.result;f({id:t.id,input:l,result:d,chip:o({name:t.name,input:l,result:d,error:n?.error,isReplyRunning:e})})})}let c=u.at(-1),h=m?.role==="assistant"&&(c?.kind==="text"&&c.isStreaming||c?.kind==="tools");return{items:u,isThinking:i&&!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`}]);

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,68 @@
+/** 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 design, made with `annotate`; 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.
+ * - `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.
+ */
+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 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;
+    };
+}
+export type UseAssistantComposer = () => UseAssistantComposerResult;
+/**
+ * Hook to write a message to the assistant, as the panel's composer does. The message lives as long as the
+ * component that uses the hook: its text and attachments are gone, and the thumbnails' object URLs revoked, when
+ * it 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{useCallback as t,useEffect as e,useMemo as r,useRef as n,useState as i}from"react";import{useEagerObservableSelector as a}from"#package/react-sdk";import{useConfigurator as c}from"../../application-runtime/index.js";import{prepareImage as l}from"./attachments/index.js";let o=0,s=t=>{for(let{previewUrl:e}of t)URL.revokeObjectURL(e)};export const useAssistantComposer=()=>{let{assistantSystem:u}=c(),[m,p]=i(""),[d,h]=i([]),[g,f]=i(0),[U,L]=i(),[R,v]=i(!1),y=n(0),b=n(d);b.current=d;let w=n(!0);e(()=>(w.current=!0,()=>{w.current=!1,s(b.current)}),[]);let{isReplying:j,isResuming:k,isLocked:x}=a(u.chat$,t=>({isReplying:t.isLoading,isResuming:t.isResuming,isLocked:t.isLocked}),[]),O=m.trim(),$=k||R,A=!j&&!$&&!x&&0===g&&(O.length>0||d.length>0),F=t(async t=>{if(0===t.length)return;let e=t.slice(0,Math.max(0,4-y.current));L(e.length<t.length?"limit":void 0),0!==e.length&&(y.current+=e.length,f(t=>t+e.length),await Promise.all(e.map(async t=>{try{let e=await l(t);if(!w.current)return;let r={id:`attachment-${++o}`,blob:e,previewUrl:URL.createObjectURL(e)};h(t=>[...t,r])}catch{y.current-=1,L("unreadable")}finally{f(t=>t-1)}})))},[]),C=t(async()=>{if(y.current>=4)return void L("limit");L(void 0),y.current+=1;let t=await u.annotate();if(!t||!w.current){y.current-=1;return}let{blob:e,pins:r}=t;h(t=>[...t,{id:`attachment-${++o}`,blob:e,previewUrl:URL.createObjectURL(e),pins:r}])},[u]),I=t(t=>{let e=b.current.find(e=>e.id===t);e&&(URL.revokeObjectURL(e.previewUrl),y.current-=1,h(e=>e.filter(({id:e})=>e!==t)),L(void 0))},[]),M=t(async()=>{if(A){v(!0);try{await u.send(O,d.map(({blob:t,pins:e})=>e?{blob:t,pins:e}:t),{onSent:()=>{p(""),h(t=>t.filter(t=>!d.includes(t))),s(d),y.current-=d.length,L(void 0),v(!1)},onUnsent:()=>{if(!w.current)return;let t=d.slice(0,Math.max(0,4-y.current)),e=t.map(t=>({...t,previewUrl:URL.createObjectURL(t.blob)}));p(t=>t.trim()?`${t}
+${m}`:m),h(t=>[...e,...t]),y.current+=e.length,L(t.length<d.length?"limit":void 0)}})}finally{v(!1)}}},[u,d,A,O,m]),P=t(()=>{u.stop()},[u]),B=r(()=>({onFocus:()=>u.setInputFocused(!0),onBlur:()=>u.setInputFocused(!1)}),[u]);return{draft:m,setDraft:p,attachments:r(()=>d.map(({id:t,previewUrl:e,pins:r})=>({id:t,previewUrl:e,isAnnotation:null!=r,pinCount:r?.length??0})),[d]),addFiles:F,annotate:C,removeAttachment:I,isPreparing:g>0,notice:U,maxAttachments:4,isBusy:$,isLocked:x,isReplying:j,canSend:A,send:M,stop:P,inputFocusHandlers:B}};

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

@@ -0,0 +1,52 @@
+import { type AssistantFailure } from './assistant-failure.js';
+import { type AssistantThreadItem } from './thread-items.js';
+/**
+ * The conversation with the assistant, laid out as the panel's thread renders it.
+ * - `items`: the blocks of the current thread in reading order: user messages, assistant text, rows of tool calls.
+ * - `earlierItems`: the closed threads loaded above it, oldest first, each ended by a separator.
+ * - `isLoaded` and `isLoadingThread`: whether the thread has been read, and whether the panel shows that it is
+ *   being read.
+ * - `isEmpty`: whether there is nothing to show, so the panel greets the user.
+ * - `isReplying`: whether a reply runs. `isThinking`: whether it runs with nothing in the thread showing that it
+ *   does yet. `isResuming`: whether a thread this session may not continue is being resumed before a message.
+ * - `failure` and `retry()`: what went wrong with the assistant, and reading the thread again when that may help
+ *   (`failure.canRetry`). A ban of the user on this configuration is a failure of kind `locked`, also when the thread
+ *   read itself succeeded.
+ * - `hasOlderMessages`, `isLoadingOlderMessages` and `loadOlderMessages()`: the older pages of the current thread.
+ * - `canLoadEarlierThread`, `isLoadingEarlierThread` and `loadEarlierThread()`: the closed thread before the
+ *   loaded ones, offered once the current thread is loaded whole.
+ * - `undoableToolCallId` and `undo(toolCallIds)`: the tool call whose change a row of tool calls may undo, never
+ *   while a reply runs, and undoing the changes of a row.
+ * - `newestMessageKey` and `firstMessageId`: what a scrolling thread follows. `newestMessageKey` is an opaque value,
+ *   compared by identity, that changes whenever the newest message does, also with every chunk of a reply, but not
+ *   when an older page is loaded above it, which builds every item again. `firstMessageId` changes when an older page
+ *   is loaded, so the thread can keep the reader's place.
+ */
+export interface UseAssistantThreadResult {
+    readonly items: readonly AssistantThreadItem[];
+    readonly earlierItems: readonly AssistantThreadItem[];
+    readonly isLoaded: boolean;
+    readonly isLoadingThread: boolean;
+    readonly isEmpty: boolean;
+    readonly isReplying: boolean;
+    readonly isThinking: boolean;
+    readonly isResuming: boolean;
+    readonly failure: AssistantFailure | undefined;
+    readonly retry: () => void;
+    readonly hasOlderMessages: boolean;
+    readonly isLoadingOlderMessages: boolean;
+    readonly loadOlderMessages: () => void;
+    readonly canLoadEarlierThread: boolean;
+    readonly isLoadingEarlierThread: boolean;
+    readonly loadEarlierThread: () => void;
+    readonly undoableToolCallId: string | undefined;
+    readonly undo: (toolCallIds: ReadonlySet<string>) => void;
+    readonly newestMessageKey: object | undefined;
+    readonly firstMessageId: string | undefined;
+}
+export type UseAssistantThread = () => UseAssistantThreadResult;
+/**
+ * Hook to render the conversation with the assistant, as the panel's thread does. It renders again with every
+ * chunk of a reply; render each item with `AssistantThreadItemView`, or with the item components it uses.
+ */
+export declare const useAssistantThread: UseAssistantThread;

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

@@ -0,0 +1 @@
+import{useMemo as e}from"react";import{useEagerObservableValue as a}from"#package/react-sdk";import{useConfigurator as s}from"../../application-runtime/index.js";import{describeAssistantFailure as r}from"./assistant-failure.js";import{buildEarlierThreadItems as d,buildThreadView as i}from"./thread-items.js";export const useAssistantThread=()=>{let{assistantSystem:o}=s(),l=a(o.chat$),{messages:t,isLoading:n,isResuming:g,earlierThreads:h}=l,m=a(o.undoTipToolCallId$),T=n?void 0:m,{items:p,isThinking:L}=e(()=>i(t,n,g),[t,n,g]),u=e(()=>d(h),[h]),M=t.at(-1),f=e(()=>M?{}:void 0,[M]),{error:O,failedStatus:c,retryAfterSeconds:E,isLocked:j}=l,v=e(()=>O||j?r(c,E,j):void 0,[O,c,E,j]),I=null!==l.earlierThreadId&&!l.hasOlderMessages&&!l.isLoadingEarlierThread,k=!l.isLoaded&&0===u.length&&!g&&!v,x=l.isLoaded&&0===p.length&&0===u.length&&!n&&!g&&!v;return{items:p,earlierItems:u,isLoaded:l.isLoaded,isLoadingThread:k,isEmpty:x,isReplying:n,isThinking:L,isResuming:g,failure:v,retry:o.reloadThread,hasOlderMessages:l.hasOlderMessages,isLoadingOlderMessages:l.isLoadingOlderMessages,loadOlderMessages:o.loadOlderMessages,canLoadEarlierThread:I,isLoadingEarlierThread:l.isLoadingEarlierThread,loadEarlierThread:o.loadEarlierThread,undoableToolCallId:T,undo:o.undoToolCalls,newestMessageKey:f,firstMessageId:t[0]?.id}};

package/dist/configurator/ui/assistant/use-load-older-on-top.d.ts

@@ -0,0 +1,22 @@
+import { type RefObject } from 'react';
+export interface LoadOlderOnTopOptions {
+    /** True while there is an older page to load and none is loading. */
+    readonly enabled: boolean;
+    readonly onReachTop: () => void;
+    /** Changes when a page is painted above the thread, such as the id of its first message. */
+    readonly firstItemKey: unknown;
+}
+/**
+ * Loads older messages when the user scrolls the thread to its top: a sentinel above the first
+ * message is watched within the scroller, and `onReachTop` runs when it comes into view. A page
+ * that does not fill the scroller leaves the sentinel in view, so the next page loads too. An
+ * attempt that painted nothing, because it failed, is tried again only once the user scrolls the
+ * sentinel out of view and back.
+ *
+ * The page lands above what the user reads, so the reading position is kept: the distance from the
+ * end of the thread is restored once the page is painted, before the browser shows it, and again
+ * each time an image in the thread finishes loading, until the user scrolls: an image reserves no
+ * height, so one that loads above the reader grows the thread there. CSS scroll anchoring would do
+ * the same, but Safari does not support it.
+ */
+export declare const useLoadOlderOnTop: <SCROLLER extends HTMLElement, SENTINEL extends HTMLElement>(scrollerRef: RefObject<SCROLLER>, sentinelRef: RefObject<SENTINEL>, { enabled, onReachTop, firstItemKey }: LoadOlderOnTopOptions) => void;

package/dist/configurator/ui/assistant/use-load-older-on-top.js

@@ -0,0 +1 @@
+import{useEffect as r,useLayoutEffect as e,useRef as t}from"react";let n=Symbol("no attempt");export const useLoadOlderOnTop=(l,c,{enabled:o,onReachTop:u,firstItemKey:s})=>{let i=t(null),p=t(n),a=t(null),d=t({onReachTop:u,firstItemKey:s});d.current={onReachTop:u,firstItemKey:s},r(()=>{let r=l.current;if(!r)return;let e=()=>{null!==i.current&&(i.current=r.scrollHeight-r.scrollTop),a.current&&Math.abs(r.scrollTop-a.current.scrollTop)>1&&(a.current=null)},t=()=>{a.current&&(r.scrollTop=r.scrollHeight-a.current.distanceFromEnd,a.current={...a.current,scrollTop:r.scrollTop})};return r.addEventListener("scroll",e,{passive:!0}),r.addEventListener("load",t,!0),()=>{r.removeEventListener("scroll",e),r.removeEventListener("load",t,!0)}},[l]),r(()=>{let r=l.current,e=c.current;if(!o||!r||!e)return;let t=new IntersectionObserver(([e])=>{if(!e?.isIntersecting){p.current=n;return}p.current!==d.current.firstItemKey&&(p.current=d.current.firstItemKey,a.current=null,i.current=r.scrollHeight-r.scrollTop,d.current.onReachTop())},{root:r});return t.observe(e),()=>t.disconnect()},[o,l,c]),e(()=>{let r=l.current;r&&null!==i.current&&(r.scrollTop=r.scrollHeight-i.current,a.current={distanceFromEnd:i.current,scrollTop:r.scrollTop}),i.current=null},[s,l])};

package/dist/configurator/ui/configurator-layout/slots/canvas/GPUAccelerationDisabled.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Trans as i}from"@lingui/react";import{Button as t,Typography as o,styled as s}from"@mui/material";import{PhxIcon as a}from"#package/ui-sdk";import{useConfiguratorRouting as n}from"../../../../configurator-context/index.js";let c=s("div")(({theme:{spacing:e}})=>({display:"grid",minBlockSize:"100cqb",padding:e(2),placeItems:"center",position:"relative"})),m=s("div")({maxInlineSize:"80ch",textAlign:"center",textWrap:"pretty"});export const GPUAccelerationDisabled=()=>{let{goToIndex:s}=n();return e(c,{children:r(m,{children:[e(a,{name:"CubeDuotone",sx:{fontSize:48}}),e(o,{component:"h1",variant:"h4",sx:{my:4},children:e(i,{id:"sdk.messages.error.gpuDisabled.title",message:"GPU acceleration disabled"})}),e(o,{color:"text.secondary",children:e(i,{id:"sdk.messages.error.gpuDisabled.message",message:"Your browser has GPU acceleration disabled, which prevents the configurator from working correctly. 3D performance is severely impacted. Enabled this option in your browser settings to use the configurator."})}),e(t,{variant:"text",color:"primary",size:"large",sx:{mt:6.5},onClick:s,children:e(i,{id:"sdk.messages.navigation.goToHomepage.label",message:"Go To Homepage"})})]})})};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Trans as i}from"@lingui/react";import{Button as a,Typography as t,styled as s}from"@mui/material";import{useConfiguratorRouting as o}from"#package/react-sdk";import{PhxIcon as n}from"#package/ui-sdk";let c=s("div")(({theme:{spacing:e}})=>({display:"grid",minBlockSize:"100cqb",padding:e(2),placeItems:"center",position:"relative"})),m=s("div")({maxInlineSize:"80ch",textAlign:"center",textWrap:"pretty"});export const GPUAccelerationDisabled=()=>{let{goToIndex:s}=o();return e(c,{children:r(m,{children:[e(n,{name:"CubeDuotone",sx:{fontSize:48}}),e(t,{component:"h1",variant:"h4",sx:{my:4},children:e(i,{id:"sdk.messages.error.gpuDisabled.title",message:"GPU acceleration disabled"})}),e(t,{color:"text.secondary",children:e(i,{id:"sdk.messages.error.gpuDisabled.message",message:"Your browser has GPU acceleration disabled, which prevents the configurator from working correctly. 3D performance is severely impacted. Enabled this option in your browser settings to use the configurator."})}),e(a,{variant:"text",color:"primary",size:"large",sx:{mt:6.5},onClick:s,children:e(i,{id:"sdk.messages.navigation.goToHomepage.label",message:"Go To Homepage"})})]})})};

package/dist/configurator/ui/configurator-layout/slots/canvas/WebGLNotSupported.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Trans as o}from"@lingui/react";import{Button as t,Typography as i,styled as s}from"@mui/material";import{PhxIcon as a}from"#package/ui-sdk";import{useConfiguratorRouting as n}from"../../../../configurator-context/index.js";let m=s("div")(({theme:{spacing:e}})=>({display:"grid",minBlockSize:"100cqb",padding:e(2),placeItems:"center",position:"relative"})),d=s("div")({maxInlineSize:"80ch",textAlign:"center",textWrap:"pretty"});export const WebGLNotSupported=()=>{let{goToIndex:s}=n();return e(m,{children:r(d,{children:[e(a,{name:"CubeDuotone",sx:{fontSize:48}}),e(i,{component:"h1",variant:"h4",sx:{my:4},children:e(o,{id:"sdk.messages.error.webglNotSupported.title",message:"WebGL is not supported or cannot be initialized"})}),e(i,{color:"text.secondary",children:e(o,{id:"sdk.messages.error.webglNotSupported.message",message:"Your device or browser does not support WebGL, which is required for the configurator to function. Try a different browser or device that supports WebGL"})}),e(t,{variant:"text",color:"primary",size:"large",sx:{mt:6.5},onClick:s,children:e(o,{id:"sdk.messages.navigation.goToHomepage.label",message:"Go To Homepage"})})]})})};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Trans as t}from"@lingui/react";import{Button as o,Typography as i,styled as s}from"@mui/material";import{useConfiguratorRouting as a}from"#package/react-sdk";import{PhxIcon as n}from"#package/ui-sdk";let m=s("div")(({theme:{spacing:e}})=>({display:"grid",minBlockSize:"100cqb",padding:e(2),placeItems:"center",position:"relative"})),d=s("div")({maxInlineSize:"80ch",textAlign:"center",textWrap:"pretty"});export const WebGLNotSupported=()=>{let{goToIndex:s}=a();return e(m,{children:r(d,{children:[e(n,{name:"CubeDuotone",sx:{fontSize:48}}),e(i,{component:"h1",variant:"h4",sx:{my:4},children:e(t,{id:"sdk.messages.error.webglNotSupported.title",message:"WebGL is not supported or cannot be initialized"})}),e(i,{color:"text.secondary",children:e(t,{id:"sdk.messages.error.webglNotSupported.message",message:"Your device or browser does not support WebGL, which is required for the configurator to function. Try a different browser or device that supports WebGL"})}),e(o,{variant:"text",color:"primary",size:"large",sx:{mt:6.5},onClick:s,children:e(t,{id:"sdk.messages.navigation.goToHomepage.label",message:"Go To Homepage"})})]})})};

package/dist/configurator/ui/configurator-layout/slots/readonly-banner/CloneToEditDialog.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Trans as o}from"@lingui/react";import{Button as n,DialogActions as r,DialogContent as i,DialogContentText as t,DialogTitle as l,Dialog as c,dialogClasses as s,styled as d}from"@mui/material";import{useMutation as m}from"@tanstack/react-query";import{useCallback as u}from"react";import{useAuthorizedClient as p,useConfigurationId as g,useDomainApplication as f}from"#package/react-sdk";import{LoadingButton as k}from"#package/ui-sdk";import{useConfiguratorRouting as y}from"../../../../configurator-context/index.js";let h=d(c)(()=>({[`.${s.paper}`]:{inlineSize:"min(480px, 100%)",maxWidth:"unset"}}));export const CloneToEditDialog=c=>{let{onClose:s,open:d}=c,{goToConfigurationDetail:b}=y(),x=p(),C=g(),{configurationPersistSystem:j}=f(),{mutate:v,isPending:T}=m({mutationFn:()=>x.cloneConfiguration(C,j.revisionId$.value),onSuccess:e=>{s(),b(e.configurationId,e.accessToken)}}),D=u(()=>{v()},[v]);return a(h,{open:d,onClose:s,children:[e(l,{children:e(o,{id:"sdk.layout.banner.readonly.clone.title",message:"Edit configuration"})}),e(i,{children:e(t,{children:e(o,{id:"sdk.layout.banner.readonly.clone.message",message:"You're about to create an editable copy of this setup. Changes you make won't affect the original shared link."})})}),a(r,{children:[e(n,{variant:"text",color:"inherit",onClick:s,children:e(o,{id:"sdk.layout.banner.readonly.cancel.label",message:"Cancel"})}),e(k,{variant:"contained",color:"primary",busy:T,onClick:D,children:e(o,{id:"sdk.layout.banner.readonly.clone.label",message:"Create editable copy"})})]})]})};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Trans as n}from"@lingui/react";import{Button as o,DialogActions as r,DialogContent as i,DialogContentText as t,DialogTitle as l,Dialog as s,dialogClasses as c,styled as d}from"@mui/material";import{useMutation as m}from"@tanstack/react-query";import{useCallback as u}from"react";import{useAuthorizedClient as p,useConfigurationId as g,useConfiguratorRouting as k,useDomainApplication as y}from"#package/react-sdk";import{LoadingButton as f}from"#package/ui-sdk";let h=d(s)(()=>({[`.${c.paper}`]:{inlineSize:"min(480px, 100%)",maxWidth:"unset"}}));export const CloneToEditDialog=s=>{let{onClose:c,open:d}=s,{goToConfigurationDetail:b}=k(),C=p(),x=g(),{configurationPersistSystem:v}=y(),{mutate:j,isPending:T}=m({mutationFn:()=>C.cloneConfiguration(x,v.revisionId$.value),onSuccess:e=>{c(),b(e.configurationId,e.accessToken)}}),D=u(()=>{j()},[j]);return a(h,{open:d,onClose:c,children:[e(l,{children:e(n,{id:"sdk.layout.banner.readonly.clone.title",message:"Edit configuration"})}),e(i,{children:e(t,{children:e(n,{id:"sdk.layout.banner.readonly.clone.message",message:"You're about to create an editable copy of this setup. Changes you make won't affect the original shared link."})})}),a(r,{children:[e(o,{variant:"text",color:"inherit",onClick:c,children:e(n,{id:"sdk.layout.banner.readonly.cancel.label",message:"Cancel"})}),e(f,{variant:"contained",color:"primary",busy:T,onClick:D,children:e(n,{id:"sdk.layout.banner.readonly.clone.label",message:"Create editable copy"})})]})]})};

package/dist/configurator/ui/configurator-layout/universal/DesktopPreview.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{useCallback as e,useMemo as o}from"react";import{useResolveLocalizable as a}from"#package/react-sdk";import{Preview as i,useResponsive as r}from"#package/ui-sdk";import{usePresetSelection as n,usePreview as s}from"../../../configurator-context/index.js";import{useLayoutSceneSafeArea as p}from"./use-layout-scene-safe-area.js";let u={id:"sdk.preview.customize.title",message:"Customize product"},m={id:"sdk.preview.start.button.label",message:"Start configuring"},c={layoutId:"ui-layout",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{layout:{type:"spring",bounce:.2,duration:.6},opacity:{duration:.2,ease:"linear"}}};export const DesktopPreview=l=>{let{slotProps:d={},slots:f}=l,{enter:y}=s(),{hasMultiplePresets:g}=n(),{setAnimating:b}=r(),{containerRef:k,safeAreaRef:x,update:S}=p({enabled:!0,hasMiniSidebar:!1}),j=a(),w=e(()=>{b(!0)},[b]),v=e(()=>{b(!1),S()},[b,S]),A=o(()=>({...d,root:{...c,onLayoutAnimationStart:w,onLayoutAnimationComplete:v,...d.root}}),[v,w,d]);return t(i,{title:j(u),buttonLabel:j(m),containerRef:k,safeAreaRef:x,withScene:!g,slots:f,slotProps:A,onStart:y})};
+import{jsx as t}from"react/jsx-runtime";import{useCallback as e,useMemo as o}from"react";import{usePresetSelection as a,useResolveLocalizable as i}from"#package/react-sdk";import{Preview as r,useResponsive as n}from"#package/ui-sdk";import{usePreview as s}from"../../../configurator-context/index.js";import{useLayoutSceneSafeArea as p}from"./use-layout-scene-safe-area.js";let u={id:"sdk.preview.customize.title",message:"Customize product"},m={id:"sdk.preview.start.button.label",message:"Start configuring"},c={layoutId:"ui-layout",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{layout:{type:"spring",bounce:.2,duration:.6},opacity:{duration:.2,ease:"linear"}}};export const DesktopPreview=l=>{let{slotProps:d={},slots:f}=l,{enter:y}=s(),{hasMultiplePresets:g}=a(),{setAnimating:b}=n(),{containerRef:k,safeAreaRef:x,update:S}=p({enabled:!0,hasMiniSidebar:!1}),j=i(),w=e(()=>{b(!0)},[b]),v=e(()=>{b(!1),S()},[b,S]),A=o(()=>({...d,root:{...c,onLayoutAnimationStart:w,onLayoutAnimationComplete:v,...d.root}}),[v,w,d]);return t(r,{title:j(u),buttonLabel:j(m),containerRef:k,safeAreaRef:x,withScene:!g,slots:f,slotProps:A,onStart:y})};

package/dist/configurator/ui/configurator-layout/universal/Layout.js

@@ -1 +1 @@
-import{jsx as t,jsxs as e,Fragment as r}from"react/jsx-runtime";import{styled as o}from"@mui/material";import{useEffect as i}from"react";import{useEagerObservableValue as m}from"#package/react-sdk";import{useResponsive as n}from"#package/ui-sdk";import{useConfigurator as a}from"../../../application-runtime/index.js";import{LayoutSlots as s}from"../slots/index.js";import{DesktopLayout as c}from"./DesktopLayout.js";import{ExportingOverlay as p}from"./ExportingOverlay.js";import{MobileLayout as d}from"./MobileLayout.js";let l=o("div")({display:"contents"});export const Layout=()=>{let{isDesktop:o}=n(),{exportSystem:u}=a(),f=m(u.exporting$);return i(()=>{if(!f)return;let t=document.activeElement;return()=>{t instanceof HTMLElement&&t.isConnected&&document.activeElement===document.body&&t.focus()}},[f]),e(r,{children:[e(l,{...{inert:f?"":void 0},children:[t(s.Services,{}),t(s.SharedCanvas,{}),o?t(c,{}):t(d,{})]}),f&&t(p,{})]})};
+import{jsx as r,jsxs as o,Fragment as s}from"react/jsx-runtime";import{useResponsive as t}from"#package/ui-sdk";import{LayoutSlots as e}from"../slots/index.js";import{DesktopLayout as a}from"./DesktopLayout.js";import{MobileLayout as m}from"./MobileLayout.js";export const Layout=()=>{let{isDesktop:i}=t();return o(s,{children:[r(e.Services,{}),r(e.SharedCanvas,{}),i?r(a,{}):r(m,{})]})};