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

package/dist/configurator/ui/assistant/annotation/editor/AnnotationEditor.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Trans as n}from"@lingui/react";import{Button as r,ToggleButton as i,ToggleButtonGroup as o}from"@mui/material";import{useCallback as a,useEffect as l,useLayoutEffect as s,useRef as m,useState as c}from"react";import{useLocalizable as d}from"#package/react-sdk";import{PhxIcon as u}from"#package/ui-sdk";import{AnnotationPin as p}from"../AnnotationPin.js";import{ANNOTATION_FADE_DURATION as h,ANNOTATION_STROKE_WIDTH as g,AnnotationPicture as f,AnnotationStage as w,AnnotationSurface as v,annotationSurfaceSize as k,useAnnotationSlots as x}from"../annotation-layout.js";import{prefersReducedMotion as C}from"../prefers-reduced-motion.js";import{useEndOnUnmount as j}from"../use-end-on-unmount.js";import{AnnotationComment as P}from"./AnnotationComment.js";import{drawAnnotationStrokes as b}from"./annotation-drawing.js";import{annotationPointIn as y,closeAnnotationPin as I,createAnnotationPin as E,deleteAnnotationPin as T,keptAnnotationPins as D,replaceAnnotationPin as M}from"./annotation-pins.js";import{flattenAnnotation as z}from"./flatten-annotation.js";let A={id:"sdk.assistant.annotation.label",message:"Annotate the view"},R=(e,t)=>y(t.getBoundingClientRect(),e.clientX,e.clientY);export const AnnotationEditor=({view:y,finish:S})=>{let[L,O]=c("marker"),{Root:W,Toolbar:B,slotProps:F}=x(),[H,U]=c([]),[X,Y]=c([]),[q,G]=c(null),[J,K]=c(!1),N=m(null),Q=m(null),V=m(null),Z=m(null),$=m(!1),_=m(S);_.current=S;let ee=d(A),et=H.length>0||D(X).length>0;j(()=>_.current(null)),s(()=>{Q.current?.getContext("2d")?.drawImage(y,0,0)},[y]);let en=a(()=>{let e,t,n,r=V.current,i=r?.getContext("2d");if(!r||!i)return;let{width:o,height:a,ratio:l}=(e=globalThis.devicePixelRatio||1,t=Math.round(r.clientWidth*e),n=Math.round(r.clientHeight*e),(r.width!==t||r.height!==n)&&(r.width=t,r.height=n),{width:t,height:n,ratio:e}),s=Z.current;i.clearRect(0,0,o,a),b(i,s?[...H,s.points]:H,{width:o,height:a},g*l)},[H]);s(()=>{en();let e=N.current;if(!e)return;let t=new ResizeObserver(en);return t.observe(e),()=>t.disconnect()},[en]);let er=a(async e=>{if($.current)return;$.current=!0,K(!0);let[t]=await Promise.all([e(),new Promise(e=>setTimeout(e,C()?0:h))]);_.current(t)},[]),ei=a(()=>void er(async()=>null),[er]),eo=a(()=>{let e=N.current;if(!et||!e)return;let t=D(X),n=y.width/e.clientWidth;er(async()=>{try{return{blob:await z({view:y,strokes:H,pins:t,scale:n}),pins:t}}catch{return null}})},[et,er,X,H,y]),ea=a(()=>{q&&Y(e=>I(e,q)),G(null)},[q]),el=a(e=>{if(q){let t={...q,comment:e.trim()};Y(e=>I(M(e,q,t),t))}G(null)},[q]),es=a(()=>{q&&Y(e=>T(e,q)),G(null)},[q]),em=a(e=>{e!==q&&(ea(),G(e))},[ea,q]);l(()=>{let e=e=>{"Escape"!==e.key||e.isComposing||(q?ea():ei())};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[ea,q,ei]);let ec=a(e=>{if(Z.current||!e.isPrimary)return;let t=R(e,e.currentTarget);if("comment"===L){if(q)ea();else{let e=E(t);Y(t=>[...t,e]),G(e)}return}e.currentTarget.setPointerCapture(e.pointerId),Z.current={pointerId:e.pointerId,points:[t]}},[ea,q,L]),ed=a(e=>{let t=Z.current;t?.pointerId===e.pointerId&&(t.points.push(R(e,e.currentTarget)),en())},[en]),eu=a(e=>{let t=Z.current;t?.pointerId===e.pointerId&&(Z.current=null,U(e=>[...e,t.points]))},[]);return t(W,{...F.root,role:"dialog","aria-modal":"true","aria-label":ee,"data-leaving":J,children:[e(w,{children:t(v,{ref:N,sx:{...k(y.width,y.height),cursor:"comment"===L?"copy":"crosshair"},onPointerDown:ec,onMouseDown:e=>"comment"===L&&e.preventDefault(),onPointerMove:ed,onPointerUp:eu,onPointerCancel:eu,children:[e(f,{ref:Q,width:y.width,height:y.height}),e(f,{ref:V}),X.map((t,n)=>e(p,{pin:t,index:n,variant:"badge",isEdited:t===q,onClick:"comment"===L?()=>em(t):void 0},n)),q&&e(P,{point:q,comment:q.comment,onDelete:es,onSave:el},X.indexOf(q))]})}),t(B,{...F.toolbar,children:[t(o,{exclusive:!0,size:"small",value:L,onChange:(e,t)=>{t&&(O(t),ea())},children:[t(i,{value:"marker",autoFocus:!0,children:[e(u,{name:"PencilSimpleLine",fontSize:"small",sx:{marginInlineEnd:.5}}),e(n,{id:"sdk.assistant.annotation.marker",message:"Marker"})]}),t(i,{value:"comment",children:[e(u,{name:"ChatCircleText",fontSize:"small",sx:{marginInlineEnd:.5}}),e(n,{id:"sdk.assistant.annotation.comment",message:"Comment"})]})]}),e(r,{variant:"text",onClick:ei,children:e(n,{id:"sdk.assistant.annotation.cancel",message:"Cancel"})}),e(r,{variant:"contained",disabled:!et,onClick:eo,children:e(n,{id:"sdk.assistant.annotation.done",message:"Done"})})]})]})};

package/dist/configurator/ui/assistant/annotation/editor/annotation-drawing.d.ts

@@ -0,0 +1,22 @@
+/** A point on the annotated view, as fractions 0–1 of its width and height from its top left corner. */
+export interface AnnotationPoint {
+    readonly x: number;
+    readonly y: number;
+}
+/** A marker stroke, as the points the pointer passed through. */
+export type AnnotationStroke = ReadonlyArray<AnnotationPoint>;
+interface Size {
+    readonly width: number;
+    readonly height: number;
+}
+/** Draws the strokes onto a 2D context of `size`, `lineWidth` in that context's pixels. */
+export declare const drawAnnotationStrokes: (context: CanvasRenderingContext2D, strokes: ReadonlyArray<AnnotationStroke>, { width, height }: Size, lineWidth: number) => void;
+/**
+ * Draws the numbered badge of a pin centred on `center`, `size` across in the context's pixels: the
+ * same red disc with a white ring and a white number as the editor shows over the view.
+ */
+export declare const drawAnnotationPinBadge: (context: CanvasRenderingContext2D, number: number, center: {
+    readonly x: number;
+    readonly y: number;
+}, size: number) => void;
+export {};

package/dist/configurator/ui/assistant/annotation/editor/annotation-drawing.js

@@ -0,0 +1 @@
+import{ANNOTATION_COLOR as t}from"../annotation-layout.js";export const drawAnnotationStrokes=(e,n,{width:o,height:i},l)=>{for(let f of(e.strokeStyle=t,e.fillStyle=t,e.lineWidth=l,e.lineCap="round",e.lineJoin="round",n)){let[t,...n]=f;if(void 0!==t){if(0===n.length){e.beginPath(),e.arc(t.x*o,t.y*i,l/2,0,2*Math.PI),e.fill();continue}for(let l of(e.beginPath(),e.moveTo(t.x*o,t.y*i),n))e.lineTo(l.x*o,l.y*i);e.stroke()}}};export const drawAnnotationPinBadge=(e,n,o,i)=>{e.beginPath(),e.arc(o.x,o.y,i/2,0,2*Math.PI),e.fillStyle=t,e.fill(),e.lineWidth=i/13,e.strokeStyle="#fff",e.stroke(),e.fillStyle="#fff",e.font=`bold ${Math.round(.5*i)}px system-ui, sans-serif`,e.textAlign="center",e.textBaseline="middle",e.fillText(String(n),o.x,o.y)};

package/dist/configurator/ui/assistant/annotation/editor/annotation-pins.d.ts

@@ -0,0 +1,22 @@
+import type { AssistantAnnotationPin } from '@salsita-ai/contracts/assistant';
+import type { AnnotationPoint } from './annotation-drawing.js';
+/**
+ * The pins of an annotation being edited. A pin's number is its position, from 1, so deleting one
+ * renumbers the pins after it.
+ */
+export type AnnotationPins = ReadonlyArray<AssistantAnnotationPin>;
+/** A pin placed at `point`, with no comment yet. */
+export declare const createAnnotationPin: ({ x, y }: AnnotationPoint) => AssistantAnnotationPin;
+export declare const replaceAnnotationPin: (pins: AnnotationPins, pin: AssistantAnnotationPin, replacement: AssistantAnnotationPin) => AnnotationPins;
+export declare const deleteAnnotationPin: (pins: AnnotationPins, pin: AssistantAnnotationPin) => AnnotationPins;
+/** The pins once the comment of `pin` closes: no pin is left without a comment, so a pin with none goes. */
+export declare const closeAnnotationPin: (pins: AnnotationPins, pin: AssistantAnnotationPin) => AnnotationPins;
+/** The pins an annotation keeps once it is done: those with a comment, renumbered, their comments trimmed. */
+export declare const keptAnnotationPins: (pins: AnnotationPins) => AnnotationPins;
+/** Where a point of the page is on a box, as fractions of it, kept within it. */
+export declare const annotationPointIn: (box: {
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+    readonly height: number;
+}, clientX: number, clientY: number) => AnnotationPoint;

package/dist/configurator/ui/assistant/annotation/editor/annotation-pins.js

@@ -0,0 +1 @@
+export const createAnnotationPin=({x:t,y:n})=>({x:t,y:n,comment:""});export const replaceAnnotationPin=(t,n,o)=>t.map(t=>t===n?o:t);export const deleteAnnotationPin=(t,n)=>t.filter(t=>t!==n);export const closeAnnotationPin=(t,n)=>n.comment.trim()?t:deleteAnnotationPin(t,n);export const keptAnnotationPins=t=>t.flatMap(t=>{let n=t.comment.trim();return n?[{...t,comment:n}]:[]});let t=t=>Math.min(1,Math.max(0,t));export const annotationPointIn=(n,o,e)=>({x:t((o-n.left)/n.width),y:t((e-n.top)/n.height)});

package/dist/configurator/ui/assistant/annotation/editor/flatten-annotation.d.ts

@@ -0,0 +1,17 @@
+import type { AssistantAnnotationPin } from '@salsita-ai/contracts/assistant';
+import { type AnnotationStroke } from './annotation-drawing.js';
+interface FlattenAnnotationProps {
+    /** The frozen view, at the canvas's resolution. */
+    readonly view: HTMLCanvasElement;
+    readonly strokes: ReadonlyArray<AnnotationStroke>;
+    readonly pins: ReadonlyArray<AssistantAnnotationPin>;
+    /** Pixels of the view per CSS pixel it was shown at, so strokes and badges keep the size the user saw. */
+    readonly scale: number;
+}
+/**
+ * Flattens the view, the strokes and the numbered pin badges into one JPEG fitted within
+ * {@link ASSISTANT_IMAGE_MAX_SIDE}, like an image the user attaches. They are drawn at the view's
+ * resolution before it is fitted, so a high-DPR view keeps them as sharp as the rest.
+ */
+export declare const flattenAnnotation: ({ view, strokes, pins, scale }: FlattenAnnotationProps) => Promise<Blob>;
+export {};

package/dist/configurator/ui/assistant/annotation/editor/flatten-annotation.js

@@ -0,0 +1 @@
+import{ASSISTANT_IMAGE_MAX_SIDE as t,encodeAssistantImage as n,fitWithin as o}from"../../attachments/index.js";import{ANNOTATION_PIN_SIZE as e,ANNOTATION_STROKE_WIDTH as a}from"../annotation-layout.js";import{drawAnnotationPinBadge as h,drawAnnotationStrokes as i}from"./annotation-drawing.js";export const flattenAnnotation=async({view:r,strokes:d,pins:m,scale:g})=>{let s=document.createElement("canvas"),w={width:r.width,height:r.height};s.width=w.width,s.height=w.height;let c=s.getContext("2d");if(!c)throw Error("The browser gave no 2D canvas to flatten the annotation on.");return c.drawImage(r,0,0),i(c,d,w,a*g),m.forEach(({x:t,y:n},o)=>{h(c,o+1,{x:t*w.width,y:n*w.height},e*g)}),n(s,o(w,t))};

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

@@ -0,0 +1,2 @@
+export { AnnotationEditor } from './AnnotationEditor.js';
+export type { ThemeableAssistantAnnotationCommentProps } from './AnnotationComment.js';

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

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

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

@@ -0,0 +1,6 @@
+export { AnnotationBadge, type ThemeableAssistantAnnotationBadgeProps } from './AnnotationBadge.js';
+export { AnnotationOverlay } from './AnnotationOverlay.js';
+export { MessageAnnotations } from './MessageAnnotations.js';
+export type { ThemeableAssistantAnnotationProps } from './annotation-layout.js';
+export type { ThemeableAssistantAnnotationCommentProps } from './editor/index.js';
+export { useEndOnUnmount } from './use-end-on-unmount.js';

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

@@ -0,0 +1 @@
+export{AnnotationBadge}from"./AnnotationBadge.js";export{AnnotationOverlay}from"./AnnotationOverlay.js";export{MessageAnnotations}from"./MessageAnnotations.js";export{useEndOnUnmount}from"./use-end-on-unmount.js";

package/dist/configurator/ui/assistant/annotation/prefers-reduced-motion.d.ts

@@ -0,0 +1,2 @@
+/** True when the user asked the system for less motion: the overlay then appears and goes at once. */
+export declare const prefersReducedMotion: () => boolean;

package/dist/configurator/ui/assistant/annotation/prefers-reduced-motion.js

@@ -0,0 +1 @@
+export const prefersReducedMotion=()=>globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches===!0;

package/dist/configurator/ui/assistant/annotation/use-end-on-unmount.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Runs `end` once the component is gone for good, so an overlay that is removed without being closed
+ * still ends. StrictMode unmounts and mounts a component again at once in development, so the end
+ * waits a task and is dropped when the component mounted again meanwhile.
+ */
+export declare const useEndOnUnmount: (end: () => void) => void;

package/dist/configurator/ui/assistant/annotation/use-end-on-unmount.js

@@ -0,0 +1 @@
+import{useEffect as r,useRef as t}from"react";export const useEndOnUnmount=e=>{let n=t(e),u=t(!1);n.current=e,r(()=>(u.current=!0,()=>{u.current=!1,setTimeout(()=>{u.current||n.current()})}),[])};

package/dist/configurator/ui/assistant/assistant-failure.d.ts

@@ -2,17 +2,30 @@
  * What the panel tells the user when the assistant failed:
  * - `notAvailable`: the server refuses this configuration or customer, and asking again will not help
  * - `busy`: the server is still answering an earlier message of this thread
+ * - `resting`: the assistant has used up its hourly allowance, and the message may be sent again later
+ * - `exhausted`: the assistant has used up its monthly allowance, and sending again will not help this month
+ * - `locked`: the assistant banned the user on this configuration for misuse, and sending again will not help
+ * - `networkLocked`: the assistant is paused for the user's network for how it was used from there, and sending again
+ *   will not help until the pause ends
+ * - `unheard`: nothing was heard in the voice message the user sent, so it was not sent; they may record it again
  * - `unavailable`: anything else, including a dropped connection and a reply that broke off
  */
-export type AssistantFailureKind = 'notAvailable' | 'busy' | 'unavailable';
-export interface AssistantFailure {
-    readonly kind: AssistantFailureKind;
+export type AssistantFailureKind = 'notAvailable' | 'busy' | 'resting' | 'exhausted' | 'locked' | 'networkLocked' | 'unheard' | 'unavailable';
+export type AssistantFailure = {
+    readonly kind: Exclude<AssistantFailureKind, 'resting'>;
     /** True when loading the thread again may help, so the panel offers "Try again". */
     readonly canRetry: boolean;
-}
+} | {
+    readonly kind: 'resting';
+    readonly canRetry: false;
+    /** How long until the message may be sent again, rounded up to whole minutes. */
+    readonly minutes: number;
+};
 /**
  * Maps a failed assistant request to what the panel shows, by the HTTP status the server answered
- * with. A failure without a status never reached the server or broke off mid-reply; it gets the same
- * generic message as an unknown status, because the chat client does not tell those apart.
+ * with and the seconds it asked to wait. A failure without a status never reached the server or broke
+ * off mid-reply; it gets the same generic message as an unknown status, because the chat client does
+ * not tell those apart. A lock the server reported overrides the status: the thread read reports it
+ * without failing.
  */
-export declare const describeAssistantFailure: (failedStatus: number | undefined) => AssistantFailure;
+export declare const describeAssistantFailure: (failedStatus: number | undefined, retryAfterSeconds: number | undefined, isLocked: boolean, isNetworkLocked: boolean) => AssistantFailure;

package/dist/configurator/ui/assistant/assistant-failure.js

@@ -1 +1 @@
-export const describeAssistantFailure=a=>403===a?{kind:"notAvailable",canRetry:!1}:409===a?{kind:"busy",canRetry:!0}:{kind:"unavailable",canRetry:!0};
+export const describeAssistantFailure=(n,e,a,t)=>t?{kind:"networkLocked",canRetry:!1}:a?{kind:"locked",canRetry:!1}:403===n?{kind:"notAvailable",canRetry:!1}:409===n?{kind:"busy",canRetry:!0}:422===n?{kind:"unheard",canRetry:!1}:429===n&&void 0!==e?{kind:"resting",canRetry:!1,minutes:Math.max(1,Math.ceil(e/60))}:429===n?{kind:"exhausted",canRetry:!1}:{kind:"unavailable",canRetry:!0};

package/dist/configurator/ui/assistant/attachments/MessageImages.d.ts

@@ -0,0 +1,63 @@
+import type { ButtonBaseProps, ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+declare const MuiComponentName: 'PhxAssistantMessageImages';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: MessageImagesSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantMessageImagesProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Image: 'image';
+};
+type MessageImagesSlots = ValueOf<typeof Slots>;
+/**
+ * A thumbnail of a picture the user attached to a message, as the bubble shows it. The thumbnails
+ * of the message's annotations are drawn with it too, so its style overrides reach both.
+ */
+export declare const MessageThumbnail: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent.js").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}, "LinkComponent" | "TouchRippleProps" | "action" | "centerRipple" | "children" | "className" | "classes" | "disableRipple" | "disableTouchRipple" | "disabled" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "style" | "sx" | "tabIndex" | "touchRippleRef">, "LinkComponent" | "TouchRippleProps" | "about" | "accessKey" | "action" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "centerRipple" | "children" | "className" | "classes" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "disableRipple" | "disableTouchRipple" | "disabled" | "draggable" | "enterKeyHint" | "focusRipple" | "focusVisibleClassName" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "hidden" | "id" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "name" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onFocusVisible" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onResize" | "onResizeCapture" | "onScroll" | "onScrollCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "prefix" | "property" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "role" | "security" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "sx" | "tabIndex" | "title" | "touchRippleRef" | "translate" | "type" | "typeof" | "unselectable" | "value" | "vocab"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const MessageThumbnailPicture: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export interface ThemeableAssistantMessageImagesProps {
+    /**
+     * The components used for each slot inside the images of a user's message.
+     *
+     * - `root` — The row of thumbnails (`div`).
+     * - `image` — One thumbnail, which opens the picture larger beside the panel on a click (`ButtonBase`).
+     */
+    readonly slots?: Partial<Record<MessageImagesSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the row of thumbnails.
+     * - `image` — Props for each thumbnail.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Image]: ButtonBaseProps;
+    }>;
+}
+interface MessageImagesProps extends ThemeableAssistantMessageImagesProps {
+    /** The images the user attached to the message, by the ids it references them by. */
+    readonly imageIds: readonly string[];
+    /** More thumbnails of the message, after its images, such as its annotations. */
+    readonly children?: ReactNode;
+}
+/**
+ * The images a user attached to a message, as thumbnails above its text. They are read from the
+ * server as soon as the bubble shows, through the same per-configuration cache as the screenshots;
+ * a click opens one larger beside the panel, where the user can annotate it.
+ */
+export declare const MessageImages: (inProps: MessageImagesProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/configurator/ui/assistant/attachments/MessageImages.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{ButtonBase as o,styled as a,useThemeProps as t}from"@mui/material";import{useMemo as r}from"react";import{useLocalizable as s}from"#package/react-sdk";import{useConfigurator as n}from"../../../application-runtime/index.js";import{useScreenshotSrc as m}from"../screenshots/index.js";let l="PhxAssistantMessageImages",d={id:"sdk.assistant.message.image.open",message:"Show the attached image larger"},c=a("div",{name:l,slot:"root"})(({theme:{spacing:e}})=>({display:"flex",flexWrap:"wrap",gap:e(.75),justifyContent:"flex-end"}));export const MessageThumbnail=a(o,{name:l,slot:"image"})(({theme:{palette:e,shape:i}})=>({background:e.action.hover,blockSize:64,borderRadius:i.borderRadius,inlineSize:64,overflow:"hidden",position:"relative"}));export const MessageThumbnailPicture=a("img")({blockSize:"100%",display:"block",inlineSize:"100%",objectFit:"cover"});let p=({imageId:i,component:o,componentProps:a})=>{let{assistantSystem:t}=n(),l=m(r(()=>({kind:"stored",imageId:i}),[i]));return e(o,{"aria-label":s(d),...a,disabled:void 0===l,onClick:()=>void 0!==l&&t.viewImage({kind:"url",url:l,title:void 0}),children:void 0!==l&&e(MessageThumbnailPicture,{src:l,alt:""})})};export const MessageImages=o=>{let{imageIds:a,children:r,slots:s={},slotProps:n={}}=t({props:o,name:l});return i(s.root??c,{...n.root,children:[a.map(i=>e(p,{imageId:i,component:s.image??MessageThumbnail,componentProps:n.image},i)),r]})};

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

@@ -0,0 +1,2 @@
+export { MessageImages, MessageThumbnail, MessageThumbnailPicture, type ThemeableAssistantMessageImagesProps, } from './MessageImages.js';
+export { ASSISTANT_IMAGE_MAX_SIDE, encodeAssistantImage, fitWithin, prepareImage } from './prepare-image.js';

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

@@ -0,0 +1 @@
+export{MessageImages,MessageThumbnail,MessageThumbnailPicture}from"./MessageImages.js";export{ASSISTANT_IMAGE_MAX_SIDE,encodeAssistantImage,fitWithin,prepareImage}from"./prepare-image.js";

package/dist/configurator/ui/assistant/attachments/prepare-image.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The longest side, in pixels, of an image the user attaches: the provider fits every image within
+ * 2048 × 2048 before the model reads it, so more would only cost upload time and storage.
+ */
+export declare const ASSISTANT_IMAGE_MAX_SIDE = 2048;
+interface Size {
+    readonly width: number;
+    readonly height: number;
+}
+/** The size that fits within `max` × `max`, keeping the aspect ratio and never enlarging. */
+export declare const fitWithin: ({ width, height }: Size, max: number) => Size;
+/**
+ * Draws `source` at `width` × `height` on a white background and encodes it as JPEG, the way every
+ * image the user sends is uploaded. Rejects when the browser has no 2D canvas or cannot encode.
+ */
+export declare const encodeAssistantImage: (source: CanvasImageSource, { width, height }: Size) => Promise<Blob>;
+/**
+ * Turns an image file the user attaches into what is uploaded: decoded, fitted within
+ * {@link ASSISTANT_IMAGE_MAX_SIDE} on each side and re-encoded as JPEG. Re-encoding drops the
+ * file's metadata, its location included, and fills a transparent background white. Rejects for a
+ * file the browser cannot decode.
+ */
+export declare const prepareImage: (file: Blob) => Promise<Blob>;
+export {};

package/dist/configurator/ui/assistant/attachments/prepare-image.js

@@ -0,0 +1 @@
+export const ASSISTANT_IMAGE_MAX_SIDE=2048;export const fitWithin=({width:e,height:t},a)=>{let r=Math.min(1,a/e,a/t);return{width:Math.max(1,Math.round(e*r)),height:Math.max(1,Math.round(t*r))}};let e=async e=>{let t=URL.createObjectURL(e),a=new Image;a.src=t;try{return await a.decode(),a}finally{URL.revokeObjectURL(t)}};export const encodeAssistantImage=async(e,{width:t,height:a})=>{let r=document.createElement("canvas");r.width=t,r.height=a;let n=r.getContext("2d");if(!n)throw Error("The browser gave no 2D canvas to prepare the attached image on.");return n.fillStyle="#fff",n.fillRect(0,0,t,a),n.drawImage(e,0,0,t,a),new Promise((e,t)=>{r.toBlob(a=>a?e(a):t(Error("The browser could not encode the attached image as JPEG.")),"image/jpeg",.85)})};export const prepareImage=async t=>{let a=await e(t);return encodeAssistantImage(a,fitWithin({width:a.naturalWidth,height:a.naturalHeight},2048))};

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

@@ -0,0 +1,20 @@
+/**
+ * Theme component name of the composer. Its frame, input and buttons below are its slots, and they
+ * are shared with an annotation comment, which looks like the composer: their style overrides reach both.
+ */
+export declare const AssistantComposerName: 'PhxAssistantComposer';
+/**
+ * The box that looks like the input, of the composer and of an annotation comment: the input on top across its
+ * whole width, so the buttons take none of it from a long text, and a thin row of buttons below. A click on its
+ * empty space is meant to type into the input.
+ */
+export declare const ComposerFrame: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ComposerToolButton: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}, "LinkComponent" | "TouchRippleProps" | "action" | "centerRipple" | "children" | "className" | "classes" | "color" | "disableFocusRipple" | "disableRipple" | "disableTouchRipple" | "disabled" | "edge" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "size" | "style" | "sx" | "tabIndex" | "touchRippleRef" | "variant">, "LinkComponent" | "TouchRippleProps" | "about" | "accessKey" | "action" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "centerRipple" | "children" | "className" | "classes" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "disableFocusRipple" | "disableRipple" | "disableTouchRipple" | "disabled" | "draggable" | "edge" | "enterKeyHint" | "focusRipple" | "focusVisibleClassName" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "hidden" | "id" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "name" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onFocusVisible" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onResize" | "onResizeCapture" | "onScroll" | "onScrollCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "prefix" | "property" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "role" | "security" | "size" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "sx" | "tabIndex" | "title" | "touchRippleRef" | "translate" | "type" | "typeof" | "unselectable" | "value" | "variant" | "vocab"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ComposerField: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ComposerInput: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").InputBaseProps, keyof import("@mui/material").InputBaseProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+/** The button that sends what was typed. */
+export declare const ComposerPrimaryButton: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}, "LinkComponent" | "TouchRippleProps" | "action" | "centerRipple" | "children" | "className" | "classes" | "color" | "disableFocusRipple" | "disableRipple" | "disableTouchRipple" | "disabled" | "edge" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "size" | "style" | "sx" | "tabIndex" | "touchRippleRef" | "variant">, "LinkComponent" | "TouchRippleProps" | "about" | "accessKey" | "action" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "centerRipple" | "children" | "className" | "classes" | "color" | "content" | "contentEditable" | "contextMenu" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "disableFocusRipple" | "disableRipple" | "disableTouchRipple" | "disabled" | "draggable" | "edge" | "enterKeyHint" | "focusRipple" | "focusVisibleClassName" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "hidden" | "id" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "name" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onFocusVisible" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onResize" | "onResizeCapture" | "onScroll" | "onScrollCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "prefix" | "property" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "role" | "security" | "size" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "sx" | "tabIndex" | "title" | "touchRippleRef" | "translate" | "type" | "typeof" | "unselectable" | "value" | "variant" | "vocab"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -0,0 +1 @@
+import{IconButton as o,InputBase as r,styled as e}from"@mui/material";import{hoverStyles as a}from"#package/ui-sdk";export const AssistantComposerName="PhxAssistantComposer";export const ComposerFrame=e("div",{name:AssistantComposerName,slot:"inputFrame"})(({theme:{palette:o,spacing:r}})=>({alignItems:"center",border:`1px solid ${o.divider}`,borderRadius:12,cursor:"text",display:"grid",gridTemplateColumns:"minmax(0, 1fr) auto",padding:r(.5),'&:focus-within, &[data-dragging="true"]':{borderColor:o.primary.main}}));export const ComposerToolButton=e(o,{name:AssistantComposerName,slot:"toolButton"})(({theme:{palette:o}})=>({background:"transparent",border:"none",borderRadius:8,boxShadow:"none",color:o.text.secondary,padding:4,"&:hover":{background:"transparent"},...a({"&:hover":{background:o.action.hover,color:o.text.primary}}),"&.Mui-disabled":{background:"transparent",color:o.action.disabled}}));export const ComposerField=e("div")({display:"grid",gridColumn:"1 / -1",minInlineSize:0});export const ComposerInput=e(r,{name:AssistantComposerName,slot:"input"})(({theme:{spacing:o,typography:r}})=>({...r.body2,flex:1,paddingBlock:o(.5),paddingInline:o(.75)}));export const ComposerPrimaryButton=e(o,{name:AssistantComposerName,slot:"sendButton"})(({theme:{palette:o}})=>({background:o.primary.main,borderRadius:8,color:o.primary.contrastText,padding:4,"&:hover":{background:o.primary.main},...a({"&:hover":{background:o.primary.dark}}),"&.Mui-disabled":{background:o.action.disabledBackground,color:o.action.disabled}}));

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

@@ -0,0 +1 @@
+export { AssistantComposerName, ComposerField, ComposerFrame, ComposerInput, ComposerPrimaryButton, ComposerToolButton, } from './composer-frame.js';

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

@@ -0,0 +1 @@
+export{AssistantComposerName,ComposerField,ComposerFrame,ComposerInput,ComposerPrimaryButton,ComposerToolButton}from"./composer-frame.js";

package/dist/configurator/ui/assistant/drawing/AssistantDrawing.d.ts

@@ -0,0 +1,58 @@
+import type { ButtonBaseProps, ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes, type ImgHTMLAttributes } from 'react';
+declare const MuiComponentName: 'PhxAssistantDrawing';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: 'root' | 'button' | 'image' | 'note';
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantDrawingProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+/** The slots of a drawing in a reply. Read from the theme only. */
+export interface ThemeableAssistantDrawingProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The frame around the drawing, its placeholder or its note (`div`).
+     * - `button` — The button over the whole picture that opens it larger (`ButtonBase`).
+     * - `image` — The picture (`img`).
+     * - `note` — The placeholder while the model writes the drawing, or the note that it could not be shown (`div`).
+     */
+    readonly slots?: Partial<Record<'root' | 'button' | 'image' | 'note', ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the frame.
+     * - `button` — Props for the button.
+     * - `image` — Props for the picture.
+     * - `note` — Props for the placeholder and the note.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: HTMLAttributes<HTMLDivElement>;
+        readonly button: ButtonBaseProps;
+        readonly image: ImgHTMLAttributes<HTMLImageElement>;
+        readonly note: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
+/** `writing`: the model is still writing the fence. `ready`: it is written. */
+export type AssistantDrawingStatus = 'writing' | 'ready';
+export interface AssistantDrawingProps {
+    /** The source of the ```` ```svg ```` fence. */
+    readonly source: string;
+    readonly status: AssistantDrawingStatus;
+}
+/**
+ * A drawing the model wrote in a reply, framed and as wide as the thread allows; a click opens it
+ * larger beside the panel. It is shown as an image, so nothing in it runs or loads, and its source
+ * never reaches the page; a source that is not a drawing the panel can show leaves a note. While the
+ * model writes it, a placeholder stands in.
+ */
+export declare const AssistantDrawing: import("react").MemoExoticComponent<({ source, status }: AssistantDrawingProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/configurator/ui/assistant/drawing/AssistantDrawing.js

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import{Trans as e}from"@lingui/react";import{ButtonBase as o,styled as r,useThemeProps as t}from"@mui/material";import{memo as n,useCallback as a,useMemo as s,useState as l}from"react";import{useLocalizable as d}from"#package/react-sdk";import{useConfigurator as m}from"../../../application-runtime/index.js";import{parseDrawing as g}from"./parse-drawing.js";import{revokeDrawingUrlOnLoad as c,useDrawingUrl as u}from"./use-drawing-url.js";let p="PhxAssistantDrawing",b=r("div",{name:p,slot:"root"})(({theme:{palette:i,shape:e,spacing:o}})=>({border:`1px solid ${i.divider}`,borderRadius:e.borderRadius,boxSizing:"border-box",marginBlock:o(1),maxInlineSize:"100%",padding:o(1)})),w={id:"sdk.assistant.drawing.open.label",message:"Open the drawing"},h=r(o,{name:p,slot:"button"})(({theme:{palette:i}})=>({cursor:"zoom-in",display:"block",inlineSize:"100%","&:focus-visible":{outline:`2px solid ${i.primary.main}`,outlineOffset:2}})),k=r("img",{name:p,slot:"image"})({blockSize:"auto",display:"block",inlineSize:"100%"}),f=r("div",{name:p,slot:"note"})(({theme:{palette:i,spacing:e,typography:o}})=>({...o.caption,color:i.text.secondary,paddingBlock:e(1),paddingInline:e(.5)})),x={},v=()=>{let{slots:i={},slotProps:e={}}=t({props:x,name:p});return{Root:i.root??b,Button:i.button??h,Image:i.image??k,NoteSlot:i.note??f,slotProps:e}},z=()=>{let{Root:o,NoteSlot:r,slotProps:t}=v();return i(o,{...t.root,children:i(r,{...t.note,role:"alert",children:i(e,{id:"sdk.assistant.drawing.failure",message:"This drawing could not be shown"})})})},S=({source:e,title:o})=>{let{assistantSystem:r}=m(),t=u(e),[n,s]=l(),g=d(w),{Root:p,Button:b,Image:h,slotProps:k}=v(),f=a(()=>{r.viewImage({kind:"svg",source:e,title:o})},[r,e,o]),x=a(()=>{s(t)},[t]);return void 0!==t&&t===n?i(z,{}):i(p,{...k.root,children:i(b,{...k.button,"aria-label":void 0===o?g:void 0,onClick:f,children:void 0!==t&&i(h,{...k.image,src:t,alt:o??"",onLoad:c,onError:x})})})},j=({source:e})=>{let o=s(()=>g(e),[e]);return o.ok?i(S,{source:e,title:o.title}):i(z,{})},y=()=>{let{Root:o,NoteSlot:r,slotProps:t}=v();return i(o,{...t.root,children:i(r,{...t.note,role:"status",children:i(e,{id:"sdk.assistant.drawing.writing",message:"Drawing…"})})})};export const AssistantDrawing=n(({source:e,status:o})=>"writing"===o?i(y,{}):i(j,{source:e}));

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

@@ -0,0 +1,2 @@
+export { AssistantDrawing, type ThemeableAssistantDrawingProps } from './AssistantDrawing.js';
+export { revokeDrawingUrlOnLoad, useDrawingUrl } from './use-drawing-url.js';

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

@@ -0,0 +1 @@
+export{AssistantDrawing}from"./AssistantDrawing.js";export{revokeDrawingUrlOnLoad,useDrawingUrl}from"./use-drawing-url.js";

package/dist/configurator/ui/assistant/drawing/parse-drawing.d.ts

@@ -0,0 +1,18 @@
+/** Bytes; a larger drawing is not shown. */
+export declare const MAX_DRAWING_SIZE: number;
+/** What the panel reads from the source of a drawing fence: whether it can show it, and its title. */
+export type ParsedDrawing = {
+    readonly ok: true;
+    readonly title: string | undefined;
+} | {
+    readonly ok: false;
+};
+/**
+ * Reads the source of a ```` ```svg ```` fence the model wrote. It is shown only when it is
+ * well-formed SVG of at most {@link MAX_DRAWING_SIZE}: a root `<svg>` in the SVG namespace, which an
+ * image needs, with a `viewBox` or a `width` and `height`, so it has a size. Its title is the text of
+ * its first `<title>`.
+ *
+ * Parsing runs no script and loads nothing: the document it makes is never rendered.
+ */
+export declare const parseDrawing: (source: string) => ParsedDrawing;

package/dist/configurator/ui/assistant/drawing/parse-drawing.js

@@ -0,0 +1 @@
+let e="http://www.w3.org/2000/svg";export const MAX_DRAWING_SIZE=204800;let t=Object.freeze({ok:!1});export const parseDrawing=r=>{if(new TextEncoder().encode(r).length>204800)return t;let n=new DOMParser().parseFromString(r,"image/svg+xml"),a=n.documentElement;if(n.getElementsByTagName("parsererror").length>0||"svg"!==a.localName||a.namespaceURI!==e||!(a.hasAttribute("viewBox")||a.hasAttribute("width")&&a.hasAttribute("height")))return t;let o=a.getElementsByTagNameNS(e,"title")[0]?.textContent?.trim();return{ok:!0,title:""===o?void 0:o}};

package/dist/configurator/ui/assistant/drawing/use-drawing-url.d.ts

@@ -0,0 +1,14 @@
+import { type SyntheticEvent } from 'react';
+/**
+ * A `blob:` URL of type `image/svg+xml` for the source of a drawing, for an `<img>`, which runs no
+ * script of it, loads nothing it points at and keeps its styles to itself. The source never becomes
+ * part of the page. The `<img>` revokes it once loaded, with {@link revokeDrawingUrlOnLoad}; it is
+ * also revoked when the source changes or the component unmounts. Nothing is returned until it is made.
+ */
+export declare const useDrawingUrl: (source: string) => string | undefined;
+/**
+ * The `onLoad` of a drawing's `<img>`: revokes its URL once the picture is decoded, which stays
+ * painted. A live `blob:` URL has the host page's origin, so "Open image in new tab" would load the
+ * SVG as a document of that origin, where a script the model wrote would run.
+ */
+export declare const revokeDrawingUrlOnLoad: (event: SyntheticEvent<HTMLImageElement>) => void;

package/dist/configurator/ui/assistant/drawing/use-drawing-url.js

@@ -0,0 +1 @@
+import{useEffect as e,useState as r}from"react";export const useDrawingUrl=t=>{let[o,c]=r();return e(()=>{let e=URL.createObjectURL(new Blob([t],{type:"image/svg+xml"}));return c({source:t,url:e}),()=>{URL.revokeObjectURL(e)}},[t]),o?.source===t?o.url:void 0};export const revokeDrawingUrlOnLoad=e=>{URL.revokeObjectURL(e.currentTarget.src)};

package/dist/configurator/ui/assistant/entity-link/AssistantEntityLink.d.ts

@@ -1,5 +1,38 @@
-import { type ReactNode } from 'react';
+import type { ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
 import { type DomainEntityId } from '#package/domain';
+declare const MuiComponentName: 'PhxAssistantEntityLink';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: 'root';
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantEntityLinkProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+/** The slots of a link to an entity in a reply. Read from the theme only. */
+export interface ThemeableAssistantEntityLinkProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The name of the entity, with its state in `data-entity-link`, `data-selected` and `data-hovered` (`span`).
+     */
+    readonly slots?: Partial<Record<'root', ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the name.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: HTMLAttributes<HTMLSpanElement>;
+    }>;
+}
 export interface AssistantEntityLinkProps {
     readonly id: DomainEntityId<string>;
     /** The text the assistant gave the link; the id itself is never shown. */
@@ -11,3 +44,4 @@ export interface AssistantEntityLinkProps {
  * selected or hovered in the scene, and it is muted once the entity is gone.
  */
 export declare const AssistantEntityLink: import("react").MemoExoticComponent<({ id, children }: AssistantEntityLinkProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/configurator/ui/assistant/entity-link/AssistantEntityLink.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{styled as t}from"@mui/material";import{memo as n,useCallback as i,useEffect as r,useRef as o}from"react";import{sceneEntitySelectHotspotComponent as a,selectableComponent as l}from"#package/domain";import{FrontendAnalyticsFactory as s,useDomain as c,useFirstRenderedComponent as d,useHoveredDomainEntityId as m,useRenderedSelector as u,useSelectEntity as p,useSelectedDomainEntityId as k,useStoreSelector as y}from"#package/react-sdk";import{assistantReferenceStyles as f}from"../reference-link/index.js";import{AssistantPanelName as g}from"../theme.js";import{useEntityLinkSelection as h}from"./entity-link-selection.js";import{resolveEntityLinkState as v}from"./entity-link-state.js";let b=t("span",{name:g,slot:"entityLink"})(e=>({...f(e),'&[data-entity-link="plain"], &[data-entity-link="missing"]':{cursor:"auto","&:hover":{background:"none"}},'&[data-selected="true"]':{textDecorationStyle:"solid"}})),S={interactive:void 0,plain:"plain",missing:"muted"},j=({kind:t,isSelected:n,children:i})=>e(b,{"data-entity-link":t,"data-reference":S[t],"data-selected":n,children:i}),x=({id:t,isSelected:n,children:u})=>{let{navigationSystem:k}=c(),y=d({entityIds:[t],componentTypes:[l]}),f=d({entityIds:[t],componentTypes:[a]}),{kind:g,canHover:S}=v({isSelectable:null!=y,isHoverDisabled:y?.state.hoverable===!1,hasSelectHotspot:null!=f}),x=m()===t,E=p(s.AssistantEntityLinkClicked),T=h(),D=i(()=>{T?.remember(t),E(t)},[t,T,E]),H=o(!1),L=i(()=>{S&&(H.current=!0,k.debouncedToggleHover(t))},[S,t,k]),I=i(()=>{H.current&&(H.current=!1,k.debouncedToggleHover(null))},[k]),A=i(e=>{"touch"!==e.pointerType&&L()},[L]),C=i(e=>{e.currentTarget.matches(":focus-visible")&&L()},[L]),P=i(e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),D())},[D]);return(r(()=>I,[S,I,t]),"interactive"!==g)?e(j,{kind:g,isSelected:n,children:u}):e(b,{role:"button",tabIndex:0,"data-entity-link":g,"data-selected":n,"data-hovered":S&&x,"aria-current":n?"true":void 0,onClick:D,onKeyDown:P,onPointerEnter:A,onPointerLeave:I,onFocus:C,onBlur:I,children:u})};export const AssistantEntityLink=n(({id:t,children:n})=>{let{domain:i}=c(),r=y(e=>null!=i.getEntity(t,e.state),[i,t]),o=u(e=>null!=i.getEntity(t,e.state),[i,t]),a=k()===t;return r?o?e(x,{id:t,isSelected:a,children:n}):e(j,{kind:"plain",isSelected:a,children:n}):e(j,{kind:"missing",isSelected:!1,children:n})});
+import{jsx as e}from"react/jsx-runtime";import{styled as t,useThemeProps as n}from"@mui/material";import{memo as r,useCallback as i,useEffect as o,useRef as a}from"react";import{sceneEntitySelectHotspotComponent as l,selectableComponent as s}from"#package/domain";import{FrontendAnalyticsFactory as c,useDomain as d,useFirstRenderedComponent as u,useHoveredDomainEntityId as m,useRenderedSelector as p,useSelectEntity as k,useSelectedDomainEntityId as y,useStoreSelector as g}from"#package/react-sdk";import{hoverStyles as f}from"#package/ui-sdk";import{assistantReferenceStyles as h}from"../reference-link/index.js";import{useEntityLinkSelection as v}from"./entity-link-selection.js";import{resolveEntityLinkState as b}from"./entity-link-state.js";let x="PhxAssistantEntityLink",E=t("span",{name:x,slot:"root"})(e=>({...h(e),'&[data-entity-link="plain"], &[data-entity-link="missing"]':{cursor:"auto",...f({"&:hover":{background:"none"}})},'&[data-selected="true"]':{textDecorationStyle:"solid"}})),S={},T=()=>{let{slots:e={},slotProps:t={}}=n({props:S,name:x});return{Root:e.root??E,rootProps:t.root}},j={interactive:void 0,plain:"plain",missing:"muted"},D=({kind:t,isSelected:n,children:r})=>{let{Root:i,rootProps:o}=T();return e(i,{...o,"data-entity-link":t,"data-reference":j[t],"data-selected":n,children:r})},H=({id:t,isSelected:n,children:r})=>{let{navigationSystem:p}=d(),{Root:y,rootProps:g}=T(),f=u({entityIds:[t],componentTypes:[s]}),h=u({entityIds:[t],componentTypes:[l]}),{kind:x,canHover:E}=b({isSelectable:null!=f,isHoverDisabled:f?.state.hoverable===!1,hasSelectHotspot:null!=h}),S=m()===t,j=k(c.AssistantEntityLinkClicked),H=v(),L=i(()=>{H?.remember(t),j(t)},[t,H,j]),P=a(!1),A=a(!1),I=a(!1),C=i(()=>{I.current&&(I.current=!1,p.debouncedToggleHover(null))},[p]),w=i(()=>{E&&(P.current||A.current)?(I.current=!0,p.debouncedToggleHover(t)):C()},[E,C,t,p]),B=i(e=>{"touch"!==e.pointerType&&(A.current=!0,w())},[w]),F=i(()=>{A.current=!1,w()},[w]),K=i(e=>{e.currentTarget.matches(":focus-visible")&&(P.current=!0,w())},[w]),R=i(()=>{P.current=!1,w()},[w]),q=i(e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),L())},[L]);return(o(()=>C,[E,C,t]),"interactive"!==x)?e(D,{kind:x,isSelected:n,children:r}):e(y,{...g,role:"button",tabIndex:0,"data-entity-link":x,"data-selected":n,"data-hovered":E&&S,"aria-current":n?"true":void 0,onClick:L,onKeyDown:q,onPointerEnter:B,onPointerLeave:F,onFocus:K,onBlur:R,children:r})};export const AssistantEntityLink=r(({id:t,children:n})=>{let{domain:r}=d(),i=g(e=>null!=r.getEntity(t,e.state),[r,t]),o=p(e=>null!=r.getEntity(t,e.state),[r,t]),a=y()===t;return i?o?e(H,{id:t,isSelected:a,children:n}):e(D,{kind:"plain",isSelected:a,children:n}):e(D,{kind:"missing",isSelected:!1,children:n})});

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

@@ -1,2 +1,2 @@
-export { AssistantEntityLink } from './AssistantEntityLink.js';
-export { EntityLinkSelectionProvider, useCreateEntityLinkSelection } from './entity-link-selection.js';
+export { AssistantEntityLink, type ThemeableAssistantEntityLinkProps } from './AssistantEntityLink.js';
+export { EntityLinkSelectionProvider, type EntityLinkSelectionProviderProps, type EntityLinkSelection, useCreateEntityLinkSelection, } from './entity-link-selection.js';