@salsita-ai/sdk 0.50.0-develop.f101f4c3c9 → 0.50.0-develop.f354d3576d

package/dist/configurator/pages/error-boundaries/LoadingErrorBoundary.js

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{useCallback as o}from"react";import{ErrorBoundary as t}from"react-error-boundary";import{useLoadingStateManager as e}from"#package/react-sdk";export const LoadingErrorBoundary=a=>{let{onError:m,onReset:n,...c}=a,p=e(),i=o((r,o)=>{p?.reportError(),m?.(r,o)},[p,m]),s=o(r=>{p?.clearError(),n?.(r)},[p,n]);return r(t,{...c,onError:i,onReset:s})};
+import{jsx as r}from"react/jsx-runtime";import{useCallback as o}from"react";import{ErrorBoundary as t}from"react-error-boundary";import{useLoadingActions as e}from"#package/react-sdk";export const LoadingErrorBoundary=a=>{let{onError:m,onReset:n,...c}=a,p=e(),i=o((r,o)=>{p?.reportError(),m?.(r,o)},[p,m]),s=o(r=>{p?.clearError(),n?.(r)},[p,n]);return r(t,{...c,onError:i,onReset:s})};

package/dist/configurator/pages/error-boundaries/index.d.ts

@@ -1,3 +1,4 @@
+export { BuiltInGeneralErrorFallback } from './BuiltInGeneralErrorFallback.js';
 export { DevContextFallback } from './DevContextFallback.js';
 export { DevLoadingFallback } from './DevLoadingFallback.js';
 export { GeneralErrorFallback, DevGeneralErrorFallback, ProdGeneralErrorFallback } from './GeneralErrorBoundary.js';

package/dist/configurator/pages/error-boundaries/index.js

@@ -1 +1 @@
-export{DevContextFallback}from"./DevContextFallback.js";export{DevLoadingFallback}from"./DevLoadingFallback.js";export{GeneralErrorFallback,DevGeneralErrorFallback,ProdGeneralErrorFallback}from"./GeneralErrorBoundary.js";export{LoadingErrorBoundary}from"./LoadingErrorBoundary.js";export{StackTraceViewer,parseStackTrace,getShorterPath}from"#package/ui-sdk";
+export{BuiltInGeneralErrorFallback}from"./BuiltInGeneralErrorFallback.js";export{DevContextFallback}from"./DevContextFallback.js";export{DevLoadingFallback}from"./DevLoadingFallback.js";export{GeneralErrorFallback,DevGeneralErrorFallback,ProdGeneralErrorFallback}from"./GeneralErrorBoundary.js";export{LoadingErrorBoundary}from"./LoadingErrorBoundary.js";export{StackTraceViewer,parseStackTrace,getShorterPath}from"#package/ui-sdk";

package/dist/configurator/{configurator-context → pages/provider-slots}/ConfiguratorResponsiveProvider.d.ts

@@ -4,9 +4,9 @@ interface ConfiguratorResponsiveProviderProps {
     readonly containerZIndex: number;
 }
 /**
- * Gives the configurator its responsive state for as long as it is mounted, and renders the root
- * container that measures itself into that state. The lifecycle reads the state from the runtime
- * provider, the UI through `useResponsive()`.
+ * Renders the configurator's root container, which measures itself into the application runtime's
+ * responsive state. The lifecycle reads that state from the runtime, the UI through
+ * `useResponsive()`. The state belongs to this mount: it is reset when the container unmounts.
  */
 export declare const ConfiguratorResponsiveProvider: (props: ConfiguratorResponsiveProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/configurator/pages/provider-slots/ConfiguratorResponsiveProvider.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{useLayoutEffect as e}from"react";import{useResponsiveActions as o,useResponsiveStore as t}from"#package/react-sdk";import{ResponsiveApplicationProvider as i}from"#package/ui-sdk";export const ConfiguratorResponsiveProvider=a=>{let{children:m,containerZIndex:n}=a,s=t(),{reset:c}=o();return e(()=>()=>{c()},[c]),r(i,{containerZIndex:n,store:s,children:m})};

package/dist/configurator/pages/provider-slots/ContainerSlotProvider.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+/** The configurator's `Container` provider slot: the root container, which measures itself. */
+export declare const ContainerSlotProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/pages/provider-slots/ContainerSlotProvider.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{standardWebComponentProperties as o}from"#package/domain";import{useWebComponentPropertyValue as e}from"#package/react-sdk";import{ConfiguratorResponsiveProvider as i}from"./ConfiguratorResponsiveProvider.js";export const ContainerSlotProvider=({children:n})=>r(i,{containerZIndex:e(o.containerZIndex),children:n});

package/dist/configurator/pages/provider-slots/LoaderSlotProvider.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+/** The configurator's `Loader` provider slot: the app loader overlay the spec's `appLoader` selects. */
+export declare const LoaderSlotProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/pages/provider-slots/LoaderSlotProvider.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{useSpecAppLoader as o}from"#package/react-sdk";import{AppLoader as e}from"../../ui/index.js";export const LoaderSlotProvider=({children:t})=>r(e,{mode:o(),children:t});

package/dist/configurator/pages/provider-slots/MessageHostSlotProvider.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+/** The configurator's `MessageHost` provider slot: the themed snackbar host. */
+export declare const MessageHostSlotProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/pages/provider-slots/MessageHostSlotProvider.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{SnackbarProvider as o}from"#package/ui-sdk";export const MessageHostSlotProvider=({children:e})=>r(o,{maxSnack:5,children:e});

package/dist/configurator/pages/provider-slots/SceneResourcesSlotProvider.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+/** The configurator's `SceneResources` provider slot: the scene's shared resources and texture prefetch. */
+export declare const SceneResourcesSlotProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/pages/provider-slots/SceneResourcesSlotProvider.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useSpecPrefetchTextureUrls as r}from"#package/react-sdk";import{SceneResourcesProvider as o}from"../../scene/index.js";export const SceneResourcesSlotProvider=({children:t})=>e(o,{prefetchTextureUrls:r(),children:t});

package/dist/configurator/pages/provider-slots/ThemeSlotProvider.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+/** The configurator's `Theme` provider slot: the encapsulated MUI theme. */
+export declare const ThemeSlotProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/pages/provider-slots/ThemeSlotProvider.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{EncapsulatedConfiguratorTheme as e}from"../../ui/index.js";export const ThemeSlotProvider=({children:o})=>r(e,{children:o});

package/dist/configurator/pages/provider-slots/configurator-provider-slot-elements.d.ts

@@ -0,0 +1,3 @@
+import type { ElementRegistration } from '#package/domain';
+/** The configurator UI's providers, one for each of the configurator's provider slots. */
+export declare const configuratorProviderSlotElements: readonly ElementRegistration[];

package/dist/configurator/pages/provider-slots/configurator-provider-slot-elements.js

@@ -0,0 +1 @@
+import{ConfiguratorProviderSlot as o,createConfiguratorProviderSlot as r}from"#package/react-sdk";import{ContainerSlotProvider as e}from"./ContainerSlotProvider.js";import{LoaderSlotProvider as t}from"./LoaderSlotProvider.js";import{MessageHostSlotProvider as s}from"./MessageHostSlotProvider.js";import{SceneResourcesSlotProvider as i}from"./SceneResourcesSlotProvider.js";import{ThemeSlotProvider as m}from"./ThemeSlotProvider.js";export const configuratorProviderSlotElements=[r(o.Theme,m),r(o.Container,e),r(o.Loader,t),r(o.MessageHost,s),r(o.SceneResources,i)];

package/dist/configurator/pages/provider-slots/index.d.ts

@@ -0,0 +1,6 @@
+export { configuratorProviderSlotElements } from './configurator-provider-slot-elements.js';
+export { ContainerSlotProvider } from './ContainerSlotProvider.js';
+export { LoaderSlotProvider } from './LoaderSlotProvider.js';
+export { MessageHostSlotProvider } from './MessageHostSlotProvider.js';
+export { SceneResourcesSlotProvider } from './SceneResourcesSlotProvider.js';
+export { ThemeSlotProvider } from './ThemeSlotProvider.js';

package/dist/configurator/pages/provider-slots/index.js

@@ -0,0 +1 @@
+export{configuratorProviderSlotElements}from"./configurator-provider-slot-elements.js";export{ContainerSlotProvider}from"./ContainerSlotProvider.js";export{LoaderSlotProvider}from"./LoaderSlotProvider.js";export{MessageHostSlotProvider}from"./MessageHostSlotProvider.js";export{SceneResourcesSlotProvider}from"./SceneResourcesSlotProvider.js";export{ThemeSlotProvider}from"./ThemeSlotProvider.js";

package/dist/configurator/pages/ui-elements/BuiltInInvalidDeploymentReload.d.ts

@@ -0,0 +1,2 @@
+/** The default `InvalidDeploymentReload` registration: the dialog that asks to reload the page. */
+export declare const BuiltInInvalidDeploymentReload: () => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/pages/ui-elements/BuiltInInvalidDeploymentReload.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{InvalidDeploymentReload as e}from"#package/react-sdk";export const BuiltInInvalidDeploymentReload=()=>t(e,{});

package/dist/configurator/pages/ui-elements/configurator-ui-elements.d.ts

@@ -0,0 +1,3 @@
+import type { ElementRegistration } from '#package/domain';
+/** The configurator UI's named elements, one for each element the configurator's runtime renders. */
+export declare const configuratorUiElements: readonly ElementRegistration[];

package/dist/configurator/pages/ui-elements/configurator-ui-elements.js

@@ -0,0 +1 @@
+import{ConfiguratorUiElement as r,createConfiguratorUiElement as o}from"#package/react-sdk";import{BuiltInGeneralErrorFallback as e}from"../error-boundaries/index.js";import{BuiltInInvalidDeploymentReload as a}from"./BuiltInInvalidDeploymentReload.js";export const configuratorUiElements=[o(r.GeneralErrorFallback,e),o(r.InvalidDeploymentReload,a)];

package/dist/configurator/pages/ui-elements/index.d.ts

@@ -0,0 +1,2 @@
+export { BuiltInInvalidDeploymentReload } from './BuiltInInvalidDeploymentReload.js';
+export { configuratorUiElements } from './configurator-ui-elements.js';

package/dist/configurator/pages/ui-elements/index.js

@@ -0,0 +1 @@
+export{BuiltInInvalidDeploymentReload}from"./BuiltInInvalidDeploymentReload.js";export{configuratorUiElements}from"./configurator-ui-elements.js";

package/dist/configurator/scene/cameras/CameraPadding.js

@@ -1 +1 @@
-import{useFrame as t,useThree as r}from"@react-three/fiber";import{useEffect as e,useRef as a}from"react";import{MathUtils as o}from"three";import{useResponsive as i}from"#package/ui-sdk";import{useConfigurator as m}from"../../application-runtime/index.js";let p=1/30;export const CameraPadding=()=>{let{cameraControlSystem:n,canvasSystem:c}=m(),{canvasPadding:f}=i(),l=r(t=>t.invalidate),h=a(f),d=a(!1);return e(()=>{n.setCanvasPadding(f),l()},[n,f,l]),t((t,r)=>{if(t.camera!==n.perspectiveCamera&&t.camera!==n.orthographicCamera)return;let e=c.interactiveViewport$.value;if(null===e)return;let a=h.current,i=Math.min(r,p),m=d.current?{top:o.damp(a.top,f.top,8,i),right:o.damp(a.right,f.right,8,i),bottom:o.damp(a.bottom,f.bottom,8,i),left:o.damp(a.left,f.left,8,i)}:f;d.current=!0;let s=.5>Math.abs(m.top-f.top)&&.5>Math.abs(m.right-f.right)&&.5>Math.abs(m.bottom-f.bottom)&&.5>Math.abs(m.left-f.left);h.current=s?f:m,n.setCameraOffset({padding:h.current,viewPort:e,camera:n.perspectiveCamera}),n.setCameraOffset({padding:h.current,viewPort:e,camera:n.orthographicCamera}),s||l()}),null};
+import{useFrame as t,useThree as a}from"@react-three/fiber";import{useEffect as e,useRef as r}from"react";import{MathUtils as o}from"three";import{useResponsive as i}from"#package/ui-sdk";import{useConfigurator as m}from"../../application-runtime/index.js";let p=1/30;export const CameraPadding=()=>{let{cameraControlSystem:l,canvasSystem:f}=m(),{canvasPadding:n}=i(),h=a(t=>t.invalidate),s=r(!1);return e(()=>{l.setCanvasPadding(n),h()},[l,n,h]),t((t,a)=>{if(t.camera!==l.perspectiveCamera&&t.camera!==l.orthographicCamera||null===f.interactiveViewport$.value||l.isCameraOffsetHeld)return;let e=l.appliedCameraOffset,r=Math.min(a,p),i=s.current?{top:o.damp(e.top,n.top,8,r),right:o.damp(e.right,n.right,8,r),bottom:o.damp(e.bottom,n.bottom,8,r),left:o.damp(e.left,n.left,8,r)}:n;s.current=!0;let m=.5>Math.abs(i.top-n.top)&&.5>Math.abs(i.right-n.right)&&.5>Math.abs(i.bottom-n.bottom)&&.5>Math.abs(i.left-n.left);l.applyCameraOffset(m?n:i),m||h()}),null};

package/dist/configurator/ui/assistant/AssistantChips.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import type { AssistantToolItem } from './thread-items.js';
 export interface AssistantToolChipsProps {
     readonly tools: readonly AssistantToolItem[];
@@ -9,9 +10,19 @@ export interface AssistantToolChipsProps {
     readonly onUndo: (toolCallIds: ReadonlySet<string>) => void;
 }
 /**
- * A row of notes on what the assistant did in a reply, one per tool call. A click on a note logs
- * the input and the result of its call to the console. While one of the row's changes is the step
+ * A row of notes on what the assistant did in a reply, one per tool call, and one for the
+ * screenshots of a call that took any. A click on a call's note logs the input and the result of
+ * its call to the console. While one of the row's changes is the step
  * of the undo history the configuration is at, an Undo after the notes takes the row's changes
  * back, up to a change the user made in between.
  */
 export declare const AssistantToolChips: import("react").MemoExoticComponent<({ tools, isActive, canUndo, onUndo }: AssistantToolChipsProps) => import("react/jsx-runtime").JSX.Element>;
+export interface AssistantActivityRowProps {
+    /** What the assistant is doing, said beside the turning icon. */
+    readonly label: ReactNode;
+}
+/**
+ * The assistant at work before it has a row of chips to show, such as while it thinks: the row's
+ * turning icon, in the place the icon of the first row of chips takes over.
+ */
+export declare const AssistantActivityRow: ({ label }: AssistantActivityRowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/ui/assistant/AssistantChips.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{ButtonBase as i,Tooltip as a,styled as n}from"@mui/material";import{memo as o,useCallback as s}from"react";import{match as r}from"ts-pattern";import{useLocalizable as d}from"#package/react-sdk";import{PhxIcon as l}from"#package/ui-sdk";import{AssistantPanelName as m}from"./theme.js";let c={id:"sdk.assistant.tool.updateDesign.label",message:"Update design"},p={id:"sdk.assistant.tool.readDesign.label",message:"Read design"},h={id:"sdk.assistant.tool.mistake.hint",message:"The assistant made a mistake."},u={id:"sdk.assistant.tool.cancelled.hint",message:"Stopped before it finished."},f={id:"sdk.assistant.tool.noResult.hint",message:"The result of this step was lost. It may or may not have been done."},g={id:"sdk.assistant.tool.toolBudget.hint",message:"Not done: the assistant reached its limit of steps for one message."},k={id:"sdk.assistant.tool.undo.label",message:"Undo"},x=n("div",{name:m,slot:"chips"})(({theme:{palette:e,spacing:t,typography:i}})=>({...i.caption,alignItems:"start",color:e.text.secondary,display:"grid",gap:t(.75),gridTemplateColumns:"min-content minmax(0, 1fr)"})),y=n("span",{name:m,slot:"activity"})(({theme:{typography:e}})=>({blockSize:`calc(${e.caption.lineHeight} * 1em)`,display:"grid",placeItems:"center"})),w=n(l,{name:m,slot:"activityIcon"})({fontSize:14,'[data-chips="active"] &':{animation:"phx-assistant-turn 2.4s linear infinite","@media (prefers-reduced-motion: reduce)":{animation:"none"}},"@keyframes phx-assistant-turn":{to:{rotate:"360deg"}}}),b=n("span",{name:m,slot:"chip"})(({theme:{palette:e,spacing:t}})=>({cursor:"default",display:"inline-block",whiteSpace:"nowrap","&:not(:last-of-type)::after":{color:e.text.secondary,content:'"\xb7"',display:"inline-block",marginInline:t(.75),textDecoration:"none"},'&[data-chip="failed"]':{color:e.error.main},'&[data-chip="flawed"]':{textDecoration:"line-through",textDecorationColor:e.error.main}})),v=n(i,{name:m,slot:"undoButton"})(({theme:{palette:e,shape:t,spacing:i}})=>({alignItems:"center",animation:"phx-assistant-undo-in 150ms ease-out",borderRadius:t.borderRadius,color:e.primary.main,display:"inline-flex",font:"inherit",gap:i(.5),marginInlineStart:i(1),verticalAlign:"top","&:hover":{textDecoration:"underline"},"@media (prefers-reduced-motion: reduce)":{animation:"none"},"@keyframes phx-assistant-undo-in":{from:{opacity:0}}})),C=o(({tool:t})=>{let{chip:i,input:n,result:o}=t,l=d(c),m=d(p),k=d(h),x=d(u),y=d(f),w=d(g),v=r(i.label).with({kind:"text"},({text:e})=>e).with({kind:"updateDesign"},()=>l).with({kind:"readDesign"},()=>m).exhaustive(),C=s(()=>{console.info(`Assistant tool call "${v}"`,{input:n,result:o})},[n,v,o]);return e(a,{title:r(i).with({errorCode:"cancelled"},()=>x).with({errorCode:"no_result"},()=>y).with({errorCode:"tool_budget"},()=>w).with({state:"failed"},{state:"flawed"},()=>k).otherwise(()=>""),placement:"top-start",children:e(b,{onClick:C,"data-chip":i.state,children:v})})});export const AssistantToolChips=o(({tools:i,isActive:a,canUndo:n,onUndo:o})=>{let r=d(k),m=s(()=>{o(new Set(i.map(({id:e})=>e)))},[o,i]);return t(x,{"data-chips":a?"active":"done","aria-busy":a,children:[e(y,{children:e(w,{name:"Gear"})}),t("div",{children:[i.map(t=>e(C,{tool:t},t.id)),n&&t(v,{onClick:m,children:[e(l,{name:"ArrowCounterClockwise",fontSize:"inherit"}),r]})]})]})});
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{ButtonBase as n,Tooltip as s,styled as a}from"@mui/material";import{memo as o,useCallback as r,useMemo as l,useRef as d,useState as c}from"react";import{match as m}from"ts-pattern";import{useLocalizable as h}from"#package/react-sdk";import{PhxIcon as p,hoverStyles as u}from"#package/ui-sdk";import{AssistantPopover as f}from"./popover/index.js";import{assistantReferenceStyles as g}from"./reference-link/index.js";import{ScreenshotThumbnails as k,readToolScreenshots as x}from"./screenshots/index.js";import{AssistantPanelName as y}from"./theme.js";let v={id:"sdk.assistant.tool.updateDesign.label",message:"Update design"},w={id:"sdk.assistant.tool.readDesign.label",message:"Read design"},b={id:"sdk.assistant.tool.mistake.hint",message:"The assistant made a mistake."},C={id:"sdk.assistant.tool.cancelled.hint",message:"Stopped before it finished."},I={id:"sdk.assistant.tool.noResult.hint",message:"The result of this step was lost. It may or may not have been done."},S={id:"sdk.assistant.tool.toolBudget.hint",message:"Not done: the assistant reached its limit of steps for one message."},A={id:"sdk.assistant.tool.undo.label",message:"Undo"},D={id:"sdk.assistant.tool.screenshots.label",message:"{count, plural, one {# screenshot} other {# screenshots}}"},j=a("div",{name:y,slot:"chips"})(({theme:{palette:e,spacing:t,typography:i}})=>({...i.caption,alignItems:"start",color:e.text.secondary,display:"grid",gap:t(.75),gridTemplateColumns:"min-content minmax(0, 1fr)"})),z=a("span",{name:y,slot:"activity"})(({theme:{typography:e}})=>({blockSize:`calc(${e.caption.lineHeight} * 1em)`,display:"grid",placeItems:"center"})),R=a(p,{name:y,slot:"activityIcon"})({fontSize:14,'[data-chips="active"] &':{animation:"phx-assistant-turn 2400ms linear infinite","@media (prefers-reduced-motion: reduce)":{animation:"none"}},"@keyframes phx-assistant-turn":{to:{rotate:"360deg"}}}),L=({isActive:t})=>{let i=l(()=>t?-(performance.now()%2400):0,[t]);return e(R,{name:"Gear",style:{animationDelay:`${i}ms`}})},T=a("span",{name:y,slot:"chip"})(({theme:{palette:e,spacing:t}})=>({cursor:"default",display:"inline-flex",maxInlineSize:"100%",verticalAlign:"top",whiteSpace:"nowrap","&:not(:last-of-type)::after":{color:e.text.secondary,content:'"\xb7"',flexShrink:0,marginInline:t(.75)}})),$=a("span",{name:y,slot:"screenshotsLink"})(g),B=a(n,{name:y,slot:"undoButton"})(({theme:{palette:e,shape:t,spacing:i}})=>({alignItems:"center",animation:"phx-assistant-undo-in 150ms ease-out",borderRadius:t.borderRadius,color:e.primary.main,display:"inline-flex",font:"inherit",gap:i(.5),marginInlineStart:i(1),verticalAlign:"top",...u({"&:hover":{textDecoration:"underline"}}),"@media (prefers-reduced-motion: reduce)":{animation:"none"},"@keyframes phx-assistant-undo-in":{from:{opacity:0}}})),U=a("span",{name:y,slot:"chipLabel"})(({theme:{palette:e}})=>({minInlineSize:0,overflow:"hidden",textOverflow:"ellipsis",'[data-chip="failed"] > &':{textDecoration:"line-through",textDecorationColor:e.error.main}})),W=a("span",{name:y,slot:"violation"})({display:"block"}),_=a("span",{name:y,slot:"fullLabel"})({display:"block"}),E=o(({tool:n})=>{let{chip:a,input:o,result:l}=n,p=h(v),u=h(w),f=h(b),g=h(C),k=h(I),x=h(S),y=d(null),[A,D]=c(!1),j=m(a.label).with({kind:"text"},({text:e})=>e).with({kind:"updateDesign"},()=>p).with({kind:"readDesign"},()=>u).exhaustive(),z=r(()=>{console.info(`Assistant tool call "${j}"`,{input:o,result:l})},[o,j,l]),R=r(()=>{let e=y.current;D(null!=e&&e.scrollWidth>e.clientWidth)},[]),L=m(a).with({errorCode:"cancelled"},()=>g).with({errorCode:"no_result"},()=>k).with({errorCode:"tool_budget"},()=>x).when(({violations:e})=>e.length>0,({violations:t})=>t.map((t,i)=>e(W,{children:t},i))).with({state:"failed"},()=>f).otherwise(()=>""),$=A?t(i,{children:[e(_,{children:j}),L]}):L;return e(s,{title:$,placement:"top-start",children:e(T,{onClick:z,onPointerEnter:R,"data-chip":a.state,children:e(U,{ref:y,children:j})})})}),F=o(({screenshots:t})=>{let i=h({...D,values:{count:t.length}});return e(T,{"data-chip":"screenshots",children:e(f,{title:i=>e(k,{screenshots:t,onImageLoad:i}),children:t=>e($,{...t,children:i})})})}),G=({tool:n})=>{let s=l(()=>x(n.result),[n.result]);return t(i,{children:[e(E,{tool:n}),s.length>0&&e(F,{screenshots:s})]})};export const AssistantToolChips=o(({tools:i,isActive:n,canUndo:s,onUndo:a})=>{let o=h(A),l=r(()=>{a(new Set(i.map(({id:e})=>e)))},[a,i]);return t(j,{"data-chips":n?"active":"done","aria-busy":n,children:[e(z,{children:e(L,{isActive:n})}),t("div",{children:[i.map(t=>e(G,{tool:t},t.id)),s&&t(B,{onClick:l,children:[e(p,{name:"ArrowCounterClockwise",fontSize:"inherit"}),o]})]})]})});export const AssistantActivityRow=({label:i})=>t(j,{"data-chips":"active","aria-busy":!0,children:[e(z,{children:e(L,{isActive:!0})}),e("div",{children:i})]});

package/dist/configurator/ui/assistant/AssistantComposer.d.ts

@@ -3,5 +3,11 @@
  * send control is a Stop control and the input stays editable, so the next message can be written.
  * A thread this session may not continue takes a message like any other: it is resumed first, with
  * the input read-only meanwhile, and the message stays in the input when that fails.
+ *
+ * Images are attached with the attach control, by pasting or by dropping files onto the composer,
+ * up to {@link MAX_MESSAGE_IMAGES} per message. Each is prepared at once (see `prepareImage`) and
+ * shown as a thumbnail that can be removed; one that cannot be prepared, or one too many, is not
+ * added, and a notice says why. The message keeps its text and images until it is sent, also when
+ * the upload of its images fails, and gets it back when the chat gives it back (see `onUnsent`).
  */
 export declare const AssistantComposer: () => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/ui/assistant/AssistantComposer.js

@@ -1 +1,2 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Trans as r}from"@lingui/react";import{IconButton as i,InputBase as o,Tooltip as t,styled as n}from"@mui/material";import{useCallback as s,useRef as l,useState as d}from"react";import{useEagerObservableSelector as m,useLocalizable as p}from"#package/react-sdk";import{PhxIcon as c,useResponsive as u}from"#package/ui-sdk";import{useConfigurator as g}from"../../application-runtime/index.js";import{AssistantPanelName as h}from"./theme.js";let b={id:"sdk.assistant.composer.placeholder",message:"Ask or tell me what to change…"},k={id:"sdk.assistant.composer.send.label",message:"Send"},f={id:"sdk.assistant.composer.stop.label",message:"Stop"},y=n("form",{name:h,slot:"composer"})(({theme:{palette:e,spacing:a}})=>({borderBlockStart:`1px solid ${e.divider}`,display:"grid",gap:a(.75),paddingBlock:a(1.25),paddingInline:`var(--phx-sidebar-padding, ${a(2)})`})),x=n("div",{name:h,slot:"inputFrame"})(({theme:{palette:e,spacing:a}})=>({alignItems:"flex-end",border:`1px solid ${e.divider}`,borderRadius:12,display:"flex",gap:a(1),paddingBlock:a(.5),paddingInline:`${a(1.5)} ${a(.5)}`,"&:focus-within":{borderColor:e.primary.main}})),v=n(o,{name:h,slot:"input"})(({theme:{spacing:e,typography:a}})=>({...a.body2,flex:1,paddingBlock:e(.75)})),R=n(i,{name:h,slot:"sendButton"})(({theme:{palette:e}})=>({background:e.primary.main,borderRadius:8,color:e.primary.contrastText,"&:hover":{background:e.primary.dark},"&.Mui-disabled":{background:e.action.disabledBackground,color:e.action.disabled}})),B=n(i,{name:h,slot:"stopButton"})(({theme:{palette:e}})=>({background:e.text.primary,borderRadius:8,color:e.background.paper,"&:hover":{background:e.text.secondary}})),C=n("span")({background:"currentColor",blockSize:10,borderRadius:2,inlineSize:10,margin:5}),S=n("div",{name:h,slot:"hint"})(({theme:{palette:e,typography:a}})=>({...a.caption,color:e.text.secondary}));export const AssistantComposer=()=>{let{assistantSystem:i}=g(),[o,n]=d(""),h=l(null),{isDesktop:w}=u(),I=p(b),$=p(k),j=p(f),{isReplying:z,isResuming:F}=m(i.chat$,e=>({isReplying:e.isLoading,isResuming:e.isResuming}),[]),A=o.trim(),D=!z&&!F&&A.length>0,P=s(async()=>{!D||(w||h.current?.blur(),await i.resume()&&(n(""),i.send(A)))},[i,D,A,w]),E=s(e=>{e.preventDefault(),P()},[P]),K=s(e=>{"Enter"!==e.key||e.shiftKey||e.nativeEvent.isComposing||(e.preventDefault(),P())},[P]),T=s(()=>{i.stop()},[i]);return a(y,{onSubmit:E,children:[a(x,{children:[e(v,{multiline:!0,maxRows:6,placeholder:I,value:o,readOnly:F,inputRef:h,onChange:e=>n(e.target.value),onKeyDown:K,onFocus:()=>i.setInputFocused(!0),onBlur:()=>i.setInputFocused(!1),inputProps:{"aria-label":I}}),z?e(t,{title:j,placement:"top",children:e(B,{size:"small","aria-label":j,onClick:T,children:e(C,{})})}):e(t,{title:$,placement:"top",children:e("span",{children:e(R,{type:"submit",size:"small","aria-label":$,disabled:!D,children:e(c,{name:"PaperPlaneRightBold",fontSize:"small"})})})})]}),e(S,{children:e(r,{id:"sdk.assistant.composer.disclaimer",message:"AI can be wrong. Check the result."})})]})};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Trans as a}from"@lingui/react";import{IconButton as r,Tooltip as n,styled as i}from"@mui/material";import{useCallback as l,useContext as s,useEffect as o,useRef as c,useState as d}from"react";import{useEagerObservableSelector as m,useLocalizable as p}from"#package/react-sdk";import{PhxIcon as u,hoverStyles as g,useResponsive as h}from"#package/ui-sdk";import{useConfigurator as f}from"../../application-runtime/index.js";import{AnnotationBadge as b,AnnotationHostContext as v}from"./annotation/index.js";import{prepareImage as k}from"./attachments/index.js";import{ComposerField as y,ComposerFrame as x,ComposerInput as R,ComposerPrimaryButton as S,ComposerToolButton as w}from"./composer/index.js";import{AssistantPanelName as U}from"./theme.js";let j={id:"sdk.assistant.composer.placeholder",message:"Ask or tell me what to change…"},z={id:"sdk.assistant.composer.send.label",message:"Send"},L={id:"sdk.assistant.composer.stop.label",message:"Stop"},D={id:"sdk.assistant.composer.attach.label",message:"Attach images"},C={id:"sdk.assistant.composer.annotate.label",message:"Annotate with drawings and comments"},T={id:"sdk.assistant.composer.attachment.remove",message:"Remove image"},$={id:"sdk.assistant.composer.annotation.remove",message:"Remove annotation"},B={id:"sdk.assistant.composer.attachment.unreadable",message:"Unsupported image format."},O={id:"sdk.assistant.composer.attachment.limit",message:"You can attach up to {max} images."},P=i("form",{name:U,slot:"composer"})(({theme:{palette:e,spacing:t}})=>({borderBlockStart:`1px solid ${e.divider}`,display:"grid",gap:t(.75),paddingBlock:t(1.25),paddingInline:`var(--phx-sidebar-padding, ${t(2)})`})),A=i("div",{name:U,slot:"attachments"})(({theme:{spacing:e}})=>({display:"flex",flexWrap:"wrap",gap:e(1),gridColumn:"1 / -1",paddingBlockStart:e(.75)})),F=i("div")({cursor:"default",display:"flex",justifySelf:"start"}),I=i("div",{name:U,slot:"attachment"})(({theme:{palette:e,shape:t}})=>({blockSize:56,border:`1px solid ${e.divider}`,borderRadius:t.borderRadius,inlineSize:56,overflow:"hidden",position:"relative"})),E=i("img")({blockSize:"100%",display:"block",inlineSize:"100%",objectFit:"cover"}),M=i(r,{name:U,slot:"removeAttachment"})(({theme:{palette:e}})=>({background:e.background.paper,insetBlockStart:2,insetInlineEnd:2,padding:2,position:"absolute","&:hover":{background:e.background.paper}})),K=i(r,{name:U,slot:"stopButton"})(({theme:{palette:e}})=>({background:e.text.primary,borderRadius:8,color:e.background.paper,padding:4,"&:hover":{background:e.text.primary},...g({"&:hover":{background:e.text.secondary}})})),N=i("span")({background:"currentColor",blockSize:10,borderRadius:2,inlineSize:10,margin:5}),W=i("div",{name:U,slot:"hint"})(({theme:{palette:e,typography:t}})=>({...t.caption,color:e.text.secondary})),X=i("div",{name:U,slot:"attachmentNotice"})(({theme:{palette:e,typography:t}})=>({...t.caption,color:e.error.main})),Y=i("input")({display:"none"}),q=0,G=e=>{for(let{previewUrl:t}of e)URL.revokeObjectURL(t)};export const AssistantComposer=()=>{let{assistantSystem:r}=f(),[i,g]=d(""),[U,H]=d([]),[J,Q]=d(0),[V,Z]=d(),[_,ee]=d(!1),[et,ea]=d(!1),er=c(null),en=c(null),ei=s(v),el=c(0),es=c(U),{isDesktop:eo}=h();es.current=U;let ec=p(j),ed=p(z),em=p(L),ep=p(D),eu=p(C),eg=p(T),eh=p($),ef=p(B),eb=p({...O,values:{max:4}}),ev=c(!0);o(()=>(ev.current=!0,()=>{ev.current=!1,G(es.current)}),[]);let{isReplying:ek,isResuming:ey}=m(r.chat$,e=>({isReplying:e.isLoading,isResuming:e.isResuming}),[]),ex=i.trim(),eR=ey||_,eS=!ek&&!eR&&0===J&&(ex.length>0||U.length>0),ew=l(async e=>{if(0===e.length)return;let t=e.slice(0,Math.max(0,4-el.current));Z(t.length<e.length?"limit":void 0),0!==t.length&&(el.current+=t.length,Q(e=>e+t.length),await Promise.all(t.map(async e=>{try{let t=await k(e);if(!ev.current)return;let a={id:`attachment-${++q}`,blob:t,previewUrl:URL.createObjectURL(t)};H(e=>[...e,a])}catch{el.current-=1,Z("unreadable")}finally{Q(e=>e-1)}})))},[]),eU=l(async()=>{if(el.current>=4)return void Z("limit");Z(void 0),el.current+=1;let e=await r.annotate();if(!e||!ev.current){el.current-=1;return}let{blob:t,pins:a}=e;H(e=>[...e,{id:`attachment-${++q}`,blob:t,previewUrl:URL.createObjectURL(t),pins:a}])},[r]),ej=l(e=>{URL.revokeObjectURL(e.previewUrl),el.current-=1,H(t=>t.filter(({id:t})=>t!==e.id)),Z(void 0)},[]),ez=l(async()=>{if(eS){eo||er.current?.blur(),ee(!0);try{await r.send(ex,U.map(({blob:e,pins:t})=>t?{blob:e,pins:t}:e),{onSent:()=>{g(""),H(e=>e.filter(e=>!U.includes(e))),G(U),el.current-=U.length,Z(void 0),ee(!1)},onUnsent:()=>{if(!ev.current)return;let e=U.slice(0,Math.max(0,4-el.current)),t=e.map(e=>({...e,previewUrl:URL.createObjectURL(e.blob)}));g(e=>e.trim()?`${e}
+${i}`:i),H(e=>[...t,...e]),el.current+=t.length,Z(e.length<U.length?"limit":void 0)}})}finally{ee(!1)}}},[r,U,eS,ex,i,eo]),eL=l(e=>{e.preventDefault(),ez()},[ez]),eD=l(e=>{"Enter"!==e.key||e.shiftKey||e.nativeEvent.isComposing||(e.preventDefault(),ez())},[ez]),eC=l(e=>{e.target===e.currentTarget&&(e.preventDefault(),er.current?.focus())},[]),eT=l(()=>{r.stop()},[r]),e$=l(e=>{let t=[...e.target.files??[]];e.target.value="",ew(t)},[ew]),eB=l(e=>{let t=[...e.clipboardData.files].filter(e=>e.type.startsWith("image/"));0!==t.length&&(e.preventDefault(),ew(t))},[ew]);return t(P,{onSubmit:eL,onDragOver:l(e=>{e.dataTransfer.types.includes("Files")&&(e.preventDefault(),e.dataTransfer.dropEffect="copy",ea(!0))},[]),onDragLeave:l(e=>{e.relatedTarget instanceof Node&&e.currentTarget.contains(e.relatedTarget)||ea(!1)},[]),onDrop:l(e=>{0!==e.dataTransfer.files.length&&(e.preventDefault(),ea(!1),ew([...e.dataTransfer.files]))},[ew]),children:[t(x,{"data-dragging":et,onMouseDown:eC,children:[U.length>0&&e(A,{children:U.map(a=>t(I,{children:[e(E,{src:a.previewUrl,alt:""}),a.pins&&e(b,{count:a.pins.length}),e(M,{size:"small","aria-label":a.pins?eh:eg,disabled:eR,onClick:()=>ej(a),children:e(u,{name:"X",sx:{fontSize:12}})})]},a.id))}),e(y,{children:e(R,{multiline:!0,maxRows:6,placeholder:ec,value:i,readOnly:eR,inputRef:er,onChange:e=>g(e.target.value),onKeyDown:eD,onPaste:eB,onFocus:()=>r.setInputFocused(!0),onBlur:()=>r.setInputFocused(!1),inputProps:{"aria-label":ec}})}),t(F,{children:[e(n,{title:ep,placement:"top",children:e("span",{children:e(w,{size:"small","aria-label":ep,disabled:eR,onClick:()=>en.current?.click(),children:e(u,{name:"Paperclip",fontSize:"small"})})})}),ei&&e(n,{title:eu,placement:"top",children:e("span",{children:e(w,{size:"small","aria-label":eu,disabled:eR,onClick:()=>void eU(),children:e(u,{name:"PencilSimpleLine",fontSize:"small"})})})})]}),e(Y,{ref:en,type:"file",accept:"image/*",multiple:!0,onChange:e$}),ek?e(n,{title:em,placement:"top",children:e(K,{size:"small","aria-label":em,onClick:eT,children:e(N,{})})}):e(n,{title:ed,placement:"top",children:e("span",{children:e(S,{type:"submit",size:"small","aria-label":ed,disabled:!eS,children:e(u,{name:"PaperPlaneRightBold",fontSize:"small"})})})})]}),V?e(X,{role:"status",children:"limit"===V?eb:ef}):e(W,{children:e(a,{id:"sdk.assistant.composer.disclaimer",message:"AI can be wrong. Check the result."})})]})};

package/dist/configurator/ui/assistant/AssistantMarkdown.js

@@ -1 +1 @@
-import{jsx as e,Fragment as r}from"react/jsx-runtime";import{styled as n}from"@mui/material";import{createContext as i,memo as o,useContext as t,useMemo as l}from"react";import a,{defaultUrlTransform as d}from"react-markdown";import m from"remark-gfm";import{AssistantAlert as s,isAlertKind as c,remarkAlerts as u}from"./alert/index.js";import{AssistantEntityLink as p}from"./entity-link/index.js";import{AssistantForm as h}from"./form/index.js";import{AssistantReferenceLink as f,isAssistantLinkHref as g,parseAssistantLinkTarget as k}from"./reference-link/index.js";import{AssistantImage as b}from"./resource-image/index.js";import{completeStreamedMarkdown as v,hasOpenFence as x}from"./streamed-markdown.js";import{AssistantPanelName as y}from"./theme.js";let j=n("div",{name:y,slot:"assistantMessage"})(({theme:{palette:e,shape:r,spacing:n,typography:i}})=>({overflowWrap:"anywhere","& > :first-child":{marginBlockStart:0},"& > :last-child":{marginBlockEnd:0},"p, ul, ol, pre, blockquote":{marginBlock:n(1)},"h1, h2, h3, h4, h5, h6":{...i.subtitle2,marginBlock:n(1.5,.5)},"ul, ol":{paddingInlineStart:n(2.5)},a:{color:e.primary.main},code:{background:e.action.hover,borderRadius:r.borderRadius/2,fontFamily:"ui-monospace, Menlo, monospace",fontSize:"0.9em",paddingInline:n(.5)},pre:{background:e.action.hover,borderRadius:r.borderRadius,overflowX:"auto",padding:n(1),code:{background:"none",padding:0}},blockquote:{borderInlineStart:`2px solid ${e.divider}`,color:e.text.secondary,marginInline:0,paddingInlineStart:n(1.5)},"th, td":{borderBlockEnd:`1px solid ${e.divider}`,padding:n(.5,1),textAlign:"start",verticalAlign:"top"}})),w=n("div")({overflowX:"auto",table:{borderCollapse:"collapse",inlineSize:"100%"}}),S=i({forms:"hidden",openFenceEnd:void 0,isStreaming:!1}),A=({source:r,end:n})=>{let{forms:i,openFenceEnd:o,isStreaming:l}=t(S);return"hidden"===i?null:null!=n&&n===o?l?e(h,{source:r,status:"writing"}):null:e(h,{source:r,status:"disabled"===i?"waiting":"ready"})},B={a:({node:n,children:i,href:o,...t})=>{if(null==o||!g(o))return e("a",{...t,href:o,target:"_blank",rel:"noopener noreferrer",children:i});let l=k(o);return null==l?e(r,{children:i}):"entity"===l.kind?e(p,{id:l.id,children:i}):e(f,{target:l,children:i})},blockquote:({node:r,children:n,...i})=>{let o=r?.properties.dataAlert;return c(o)?e(s,{kind:o,children:n}):e("blockquote",{...i,children:n})},img:({src:r,alt:n})=>e(b,{src:r,alt:n}),pre:({node:r,children:n,...i})=>{let o=(e=>{let[r]=e?.children??[];if(r?.type!=="element"||"code"!==r.tagName)return;let{className:n}=r.properties;if(Array.isArray(n)&&n.includes("language-form"))return r.children.map(e=>"text"===e.type?e.value:"").join("")})(r);return null==o?e("pre",{...i,children:n}):e(A,{source:o,end:r?.position?.end.offset})},table:({node:r,children:n,...i})=>e(w,{children:e("table",{...i,children:n})})},I=[m,u],q=e=>g(e)?e:d(e);export const AssistantMarkdown=o(({markdown:r,isStreaming:n,forms:i})=>{let o=n?v(r):r,t=x(r)?o.length:void 0,d=l(()=>({forms:i,openFenceEnd:t,isStreaming:n}),[i,t,n]);return e(j,{children:e(S.Provider,{value:d,children:e(a,{components:B,remarkPlugins:I,urlTransform:q,children:o})})})});
+import{jsx as e,Fragment as r}from"react/jsx-runtime";import{styled as n}from"@mui/material";import{createContext as t,memo as i,useContext as o,useMemo as l}from"react";import a,{defaultUrlTransform as d}from"react-markdown";import s from"remark-gfm";import{AssistantAlert as m,isAlertKind as c,remarkAlerts as u}from"./alert/index.js";import{AssistantEntityLink as p}from"./entity-link/index.js";import{AssistantForm as f}from"./form/index.js";import{AssistantReferenceLink as h,isAssistantLinkHref as g,parseAssistantLinkTarget as k}from"./reference-link/index.js";import{AssistantImage as b}from"./resource-image/index.js";import{completeStreamedMarkdown as v,hasOpenFence as x,isCutOffFence as y}from"./streamed-markdown.js";import{AssistantPanelName as j}from"./theme.js";let w=n("div",{name:j,slot:"assistantMessage"})(({theme:{palette:e,shape:r,spacing:n,typography:t}})=>({overflowWrap:"anywhere","& > :first-child":{marginBlockStart:0},"& > :last-child":{marginBlockEnd:0},"p, ul, ol, pre, blockquote":{marginBlock:n(1)},"h1, h2, h3, h4, h5, h6":{...t.subtitle2,marginBlock:n(1.5,.5)},"ul, ol":{paddingInlineStart:n(2.5)},a:{color:e.primary.main},code:{background:e.action.hover,borderRadius:r.borderRadius/2,fontFamily:"ui-monospace, Menlo, monospace",fontSize:"0.9em",paddingInline:n(.5)},pre:{background:e.action.hover,borderRadius:r.borderRadius,overflowX:"auto",padding:n(1),code:{background:"none",padding:0}},blockquote:{borderInlineStart:`2px solid ${e.divider}`,color:e.text.secondary,marginInline:0,paddingInlineStart:n(1.5)},"th, td":{borderBlockEnd:`1px solid ${e.divider}`,padding:n(.5,1),textAlign:"start",verticalAlign:"top"}})),S=n("div")({overflowX:"auto",table:{borderCollapse:"collapse",inlineSize:"100%"}}),A=t({forms:"hidden",text:"",openFenceEnd:void 0,isStreaming:!1}),B=({source:r,start:n,end:t})=>{let{forms:i,text:l,openFenceEnd:a,isStreaming:d}=o(A);return"hidden"===i?null:d&&null!=t&&t===a?e(f,{source:r,status:"writing"}):!d&&null!=n&&null!=t&&y(l,{start:n,end:t})?null:e(f,{source:r,status:"disabled"===i?"waiting":"ready"})},I={a:({node:n,children:t,href:i,...o})=>{if(null==i||!g(i))return e("a",{...o,href:i,target:"_blank",rel:"noopener noreferrer",children:t});let l=k(i);return null==l?e(r,{children:t}):"entity"===l.kind?e(p,{id:l.id,children:t}):e(h,{target:l,children:t})},blockquote:({node:r,children:n,...t})=>{let i=r?.properties.dataAlert;return c(i)?e(m,{kind:i,children:n}):e("blockquote",{...t,children:n})},img:({src:r,alt:n})=>e(b,{src:r,alt:n}),pre:({node:r,children:n,...t})=>{let i=(e=>{let[r]=e?.children??[];if(r?.type!=="element"||"code"!==r.tagName)return;let{className:n}=r.properties;if(Array.isArray(n)&&n.includes("language-form"))return r.children.map(e=>"text"===e.type?e.value:"").join("")})(r);return null==i?e("pre",{...t,children:n}):e(B,{source:i,start:r?.position?.start.offset,end:r?.position?.end.offset})},table:({node:r,children:n,...t})=>e(S,{children:e("table",{...t,children:n})})},q=[s,u],R=e=>g(e)?e:d(e);export const AssistantMarkdown=i(({markdown:r,isStreaming:n,forms:t})=>{let i=n?v(r):r,o=n&&x(r)?i.length:void 0,d=l(()=>({forms:t,text:i,openFenceEnd:o,isStreaming:n}),[t,i,o,n]);return e(w,{children:e(A.Provider,{value:d,children:e(a,{components:I,remarkPlugins:q,urlTransform:R,children:i})})})});

package/dist/configurator/ui/assistant/AssistantThread.d.ts

@@ -3,8 +3,9 @@
  * has to say itself, which is a line while the thread loads, a greeting for an empty thread, a
  * "Thinking…" line and a failure with its way out. It follows a streaming reply until the user scrolls up.
  *
- * A conversation the assistant continued from a summary is painted whole: the threads that were
- * closed come first, each ended by a separator, and the ones still on the server are loaded one at a
- * time from a control above them.
+ * A conversation is painted whole as the user scrolls up: the thread shows its newest messages first
+ * and loads older pages when its top comes into view. A conversation the assistant continued from a
+ * summary has closed threads before it, each ended by a separator; once the current thread is painted
+ * whole, the ones still on the server are loaded one at a time from a control above them.
  */
 export declare const AssistantThread: () => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/ui/assistant/AssistantThread.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Trans as i}from"@lingui/react";import{Button as t,styled as s}from"@mui/material";import{useCallback as r,useMemo as n}from"react";import{match as o}from"ts-pattern";import{useEagerObservableValue as l}from"#package/react-sdk";import{PhxIcon as d}from"#package/ui-sdk";import{useConfigurator as m}from"../../application-runtime/index.js";import{AssistantToolChips as c}from"./AssistantChips.js";import{AssistantMarkdown as h}from"./AssistantMarkdown.js";import{describeAssistantFailure as p}from"./assistant-failure.js";import{EntityLinkSelectionProvider as g,useCreateEntityLinkSelection as u}from"./entity-link/index.js";import{AssistantPanelName as f}from"./theme.js";import{buildEarlierThreadItems as k,buildThreadView as v}from"./thread-items.js";import{useFollowStream as b}from"./use-follow-stream.js";let w=s("div",{name:f,slot:"thread"})({display:"grid",position:"relative"}),x=s("div",{name:f,slot:"messages"})(({theme:{spacing:e,typography:a}})=>({...a.body2,display:"flex",flexDirection:"column",gap:e(1.5),overflowY:"auto",overscrollBehavior:"contain",paddingBlock:e(2),paddingInline:`var(--phx-sidebar-padding, ${e(2)})`,"& > :first-child":{marginBlockStart:"auto"}})),y=s("div",{name:f,slot:"userMessage"})(({theme:{palette:e,spacing:a}})=>({alignSelf:"flex-end",background:`hsl(from ${e.primary.main} h s l / 12%)`,borderRadius:"14px 14px 4px 14px",maxInlineSize:"85%",overflowWrap:"anywhere",paddingBlock:a(1),paddingInline:a(1.5),whiteSpace:"pre-wrap"})),T=s("div",{name:f,slot:"greeting"})({}),C=s("div",{name:f,slot:"status"})(({theme:{palette:e,typography:a}})=>({...a.caption,color:e.text.secondary})),S=s("div",{name:f,slot:"separator"})(({theme:{palette:e,spacing:a,typography:i}})=>({...i.caption,alignItems:"center",color:e.text.secondary,display:"flex",gap:a(1),"&::before, &::after":{borderBlockStart:`1px solid ${e.divider}`,content:'""',flex:1}})),j=s(t,{name:f,slot:"earlierButton"})({alignSelf:"center"}),I=s("div",{name:f,slot:"notice"})(({theme:{palette:e,shape:a,spacing:i}})=>({alignItems:"center",background:e.action.hover,borderRadius:a.borderRadius,display:"flex",flexWrap:"wrap",gap:i(1),justifyContent:"space-between",paddingBlock:i(1),paddingInline:i(1.5)})),B=s(t,{name:f,slot:"newReplyButton"})(({theme:{palette:e,spacing:a}})=>({background:e.text.primary,borderRadius:"calc(infinity * 1px)",color:e.background.paper,insetBlockEnd:a(1),insetInlineStart:"50%",position:"absolute",translate:"-50% 0","&:hover":{background:e.text.secondary}})),E=({item:a,isActive:t,undoableToolCallId:s,onUndo:r})=>o(a).with({kind:"user"},({text:a})=>e(y,{children:a})).with({kind:"text"},({markdown:a,isStreaming:i,forms:t})=>e(h,{markdown:a,isStreaming:i,forms:t})).with({kind:"tools"},({tools:a})=>e(c,{tools:a,isActive:t,canUndo:a.some(({id:e})=>e===s),onUndo:r})).with({kind:"separator"},()=>e(S,{role:"separator",children:e(i,{id:"sdk.assistant.thread.earlierSummarized",message:"Earlier conversation summarized"})})).exhaustive();export const AssistantThread=()=>{let{assistantSystem:s}=m(),c=l(s.chat$),{messages:h,isLoading:f,isResuming:y,earlierThreads:S}=c,A=l(s.undoTipToolCallId$),R=f?void 0:A,{items:L,isThinking:z}=n(()=>v(h,f,y),[h,f,y]),$=n(()=>k(S),[S]),U=n(()=>L.filter(({kind:e})=>"user"===e).length,[L]),D=c.error?p(c.failedStatus):void 0,{scrollerRef:M,hasUnseenContent:W,handleScroll:q,scrollToEnd:H}=b(n(()=>({messages:h,isThinking:z,isResuming:y,failure:D?.kind}),[h,z,y,D?.kind]),U),N=u(),Y=r(e=>{e.target instanceof Element&&e.target.closest('a, button, input, label, select, textarea, [role="button"], [role="tooltip"]')||window.getSelection()?.isCollapsed!==!1&&N.release()},[N]),F=!c.isLoaded&&0===$.length&&!y&&!D;return a(w,{children:[e(g,{selection:N,children:a(x,{ref:M,onScroll:q,onClick:Y,role:"log","aria-live":"polite",children:[c.isLoaded&&0===L.length&&0===$.length&&!f&&!y&&!D&&e(T,{children:e(i,{id:"sdk.assistant.thread.greeting",message:"Hi. I can answer questions about this design and change it with you. Tell me what you need."})}),F&&e(C,{children:e(i,{id:"sdk.assistant.thread.loading",message:"Loading the conversation…"})}),c.isLoadingEarlierThread&&e(C,{children:e(i,{id:"sdk.assistant.thread.loadingEarlier",message:"Loading the earlier conversation…"})}),c.hasEarlierThread&&!c.isLoadingEarlierThread&&e(j,{size:"small",color:"inherit",onClick:s.loadEarlierThread,children:e(i,{id:"sdk.assistant.thread.showEarlier.label",message:"Show earlier conversation"})}),$.map(a=>e(E,{item:a,isActive:!1,undoableToolCallId:R,onUndo:s.undoToolCalls},a.id)),L.map(a=>e(E,{item:a,isActive:f&&a===L.at(-1),undoableToolCallId:R,onUndo:s.undoToolCalls},a.id)),y&&e(C,{children:e(i,{id:"sdk.assistant.thread.resuming",message:"Resuming the conversation…"})}),z&&e(C,{children:e(i,{id:"sdk.assistant.thread.thinking",message:"Thinking…"})}),D&&a(I,{role:"alert",children:[e("span",{children:o(D.kind).with("notAvailable",()=>e(i,{id:"sdk.assistant.failure.notAvailable",message:"The assistant is not available here."})).with("busy",()=>e(i,{id:"sdk.assistant.failure.busy",message:"The assistant is still working on an earlier message."})).with("unavailable",()=>e(i,{id:"sdk.assistant.failure.unavailable",message:"The assistant is unavailable right now."})).exhaustive()}),D.canRetry&&e(t,{size:"small",variant:"outlined",color:"inherit",onClick:s.reloadThread,children:e(i,{id:"sdk.assistant.failure.retry.label",message:"Try again"})})]})]})}),W&&e(B,{size:"small",onClick:H,endIcon:e(d,{name:"CaretDown"}),children:e(i,{id:"sdk.assistant.thread.newReply.label",message:"New reply"})})]})};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Trans as i}from"@lingui/react";import{Button as s,styled as t}from"@mui/material";import{useCallback as n,useMemo as r,useRef as o}from"react";import{match as l}from"ts-pattern";import{useEagerObservableValue as d,useLocalizable as m}from"#package/react-sdk";import{PhxIcon as h,hoverStyles as g}from"#package/ui-sdk";import{useConfigurator as c}from"../../application-runtime/index.js";import{AssistantActivityRow as p,AssistantToolChips as u}from"./AssistantChips.js";import{AssistantMarkdown as k}from"./AssistantMarkdown.js";import{MessageAnnotations as f}from"./annotation/index.js";import{describeAssistantFailure as b}from"./assistant-failure.js";import{MessageImages as v}from"./attachments/index.js";import{EntityLinkSelectionProvider as x,useCreateEntityLinkSelection as w}from"./entity-link/index.js";import{AssistantPanelName as y}from"./theme.js";import{buildEarlierThreadItems as T,buildThreadView as I}from"./thread-items.js";import{useFollowStream as S}from"./use-follow-stream.js";import{useLoadOlderOnTop as j}from"./use-load-older-on-top.js";let C={id:"sdk.assistant.failure.resting",message:"The assistant needs a break. Try again in {minutes, plural, one {# minute} other {# minutes}}."},B=t("div",{name:y,slot:"thread"})({display:"grid",position:"relative"}),R=t("div",{name:y,slot:"messages"})(({theme:{spacing:e,typography:a}})=>({...a.body2,display:"flex",flexDirection:"column",gap:e(1.5),overflowY:"auto",overscrollBehavior:"contain",paddingBlock:e(2),paddingInline:`var(--phx-sidebar-padding, ${e(2)})`,position:"relative","& > :first-child":{marginBlockStart:"auto"}})),L=t("div",{name:y,slot:"userMessage"})(({theme:{palette:e,spacing:a}})=>({alignSelf:"flex-end",background:`hsl(from ${e.primary.main} h s l / 12%)`,borderRadius:"14px 14px 4px 14px",display:"grid",gap:a(1),maxInlineSize:"85%",overflowWrap:"anywhere",paddingBlock:a(1),paddingInline:a(1.5),whiteSpace:"pre-wrap"})),A=t("div",{name:y,slot:"greeting"})({}),E=t("div",{name:y,slot:"status"})(({theme:{palette:e,typography:a}})=>({...a.caption,color:e.text.secondary})),M=t("div",{name:y,slot:"separator"})(({theme:{palette:e,spacing:a,typography:i}})=>({...i.caption,alignItems:"center",color:e.text.secondary,display:"flex",gap:a(1),"&::before, &::after":{borderBlockStart:`1px solid ${e.divider}`,content:'""',flex:1}})),z=t(s,{name:y,slot:"earlierButton"})({alignSelf:"center"}),O=t("div")({blockSize:1,insetBlockStart:0,insetInline:0,position:"absolute"}),$=t(E)(({theme:{palette:e,shape:a,spacing:i}})=>({background:e.background.paper,borderRadius:a.borderRadius,insetBlockStart:i(1),insetInlineStart:"50%",paddingBlock:i(.5),paddingInline:i(1),position:"absolute",translate:"-50% 0"})),U=t("div",{name:y,slot:"notice"})(({theme:{palette:e,shape:a,spacing:i}})=>({alignItems:"center",background:e.action.hover,borderRadius:a.borderRadius,display:"flex",flexWrap:"wrap",gap:i(1),justifyContent:"space-between",paddingBlock:i(1),paddingInline:i(1.5)})),D=t(s,{name:y,slot:"newReplyButton"})(({theme:{palette:e,spacing:a}})=>({background:e.text.primary,borderRadius:"calc(infinity * 1px)",color:e.background.paper,insetBlockEnd:a(1),insetInlineStart:"50%",position:"absolute",translate:"-50% 0","&:hover":{background:e.text.primary},...g({"&:hover":{background:e.text.secondary}})})),W=({item:s,isActive:t,undoableToolCallId:n,onUndo:r})=>l(s).with({kind:"user"},({text:i,imageIds:s,annotations:t})=>a(L,{children:[(s.length>0||t.length>0)&&e(v,{imageIds:s,children:e(f,{annotations:t})}),i]})).with({kind:"text"},({markdown:a,isStreaming:i,forms:s})=>e(k,{markdown:a,isStreaming:i,forms:s})).with({kind:"tools"},({tools:a})=>e(u,{tools:a,isActive:t,canUndo:a.some(({id:e})=>e===n),onUndo:r})).with({kind:"separator"},()=>e(M,{role:"separator",children:e(i,{id:"sdk.assistant.thread.earlierSummarized",message:"Earlier conversation summarized"})})).exhaustive();export const AssistantThread=()=>{let{assistantSystem:t}=c(),g=d(t.chat$),{messages:u,isLoading:k,isResuming:f,earlierThreads:v}=g,y=d(t.undoTipToolCallId$),L=k?void 0:y,{items:M,isThinking:Y}=r(()=>I(u,k,f),[u,k,f]),q=r(()=>T(v),[v]),H=r(()=>M.filter(({kind:e})=>"user"===e).at(-1)?.id,[M]),K=g.error?b(g.failedStatus,g.retryAfterSeconds):void 0,N=m({...C,values:{minutes:K?.kind==="resting"?K.minutes:0}}),F=u.at(-1),{scrollerRef:G,hasUnseenContent:J,handleScroll:P,scrollToEnd:Q}=S(r(()=>({newestMessage:F,isThinking:Y,isResuming:f,failure:K?.kind}),[F,Y,f,K?.kind]),H),V=o(null);j(G,V,{enabled:g.hasOlderMessages&&!g.isLoadingOlderMessages,onReachTop:t.loadOlderMessages,firstItemKey:u[0]?.id});let X=null!==g.earlierThreadId&&!g.hasOlderMessages&&!g.isLoadingEarlierThread,Z=w(),_=n(e=>{e.target instanceof Element&&e.target.closest('a, button, input, label, select, textarea, [role="button"], [role="tooltip"]')||window.getSelection()?.isCollapsed!==!1&&Z.release()},[Z]),ee=!g.isLoaded&&0===q.length&&!f&&!K;return a(B,{children:[e(x,{selection:Z,children:a(R,{ref:G,onScroll:P,onClick:_,role:"log","aria-live":"polite",children:[g.isLoaded&&0===M.length&&0===q.length&&!k&&!f&&!K&&e(A,{children:e(i,{id:"sdk.assistant.thread.greeting",message:"Hi. I can answer questions about this design and change it with you. Tell me what you need."})}),ee&&e(E,{children:e(i,{id:"sdk.assistant.thread.loading",message:"Loading the conversation…"})}),g.isLoadingEarlierThread&&e(E,{children:e(i,{id:"sdk.assistant.thread.loadingEarlier",message:"Loading the earlier conversation…"})}),X&&e(z,{size:"small",color:"inherit",onClick:t.loadEarlierThread,children:e(i,{id:"sdk.assistant.thread.showEarlier.label",message:"Show earlier conversation"})}),q.map(a=>e(W,{item:a,isActive:!1,undoableToolCallId:L,onUndo:t.undoToolCalls},a.id)),M.map(a=>e(W,{item:a,isActive:k&&a===M.at(-1),undoableToolCallId:L,onUndo:t.undoToolCalls},a.id)),f&&e(E,{children:e(i,{id:"sdk.assistant.thread.resuming",message:"Resuming the conversation…"})}),Y&&e(p,{label:e(i,{id:"sdk.assistant.thread.thinking",message:"Thinking…"})}),K&&a(U,{role:"alert",children:[e("span",{children:l(K.kind).with("notAvailable",()=>e(i,{id:"sdk.assistant.failure.notAvailable",message:"The assistant is not available here."})).with("busy",()=>e(i,{id:"sdk.assistant.failure.busy",message:"The assistant is still working on an earlier message."})).with("resting",()=>N).with("exhausted",()=>e(i,{id:"sdk.assistant.failure.exhausted",message:"The assistant is unavailable right now. You can keep configuring as usual."})).with("unavailable",()=>e(i,{id:"sdk.assistant.failure.unavailable",message:"The assistant is unavailable right now."})).exhaustive()}),K.canRetry&&e(s,{size:"small",variant:"outlined",color:"inherit",onClick:t.reloadThread,children:e(i,{id:"sdk.assistant.failure.retry.label",message:"Try again"})})]}),g.hasOlderMessages&&e(O,{ref:V,"aria-hidden":!0})]})}),g.isLoadingOlderMessages&&e($,{role:"status",children:e(i,{id:"sdk.assistant.thread.loadingOlder",message:"Loading earlier messages…"})}),J&&e(D,{size:"small",onClick:Q,endIcon:e(h,{name:"CaretDown"}),children:e(i,{id:"sdk.assistant.thread.newReply.label",message:"New reply"})})]})};

package/dist/configurator/ui/assistant/alert/AssistantAlert.d.ts

@@ -4,5 +4,8 @@ export interface AssistantAlertProps {
     readonly kind: AlertKind;
     readonly children: ReactNode;
 }
-/** A GitHub alert in a reply: its content as Markdown, marked by the colour and icon of its kind. */
+/**
+ * A GitHub alert in a reply: its content as Markdown, marked by the colour and icon of its kind,
+ * and starting with the word for its kind, which only assistive technology reads.
+ */
 export declare const AssistantAlert: import("react").MemoExoticComponent<({ kind, children }: AssistantAlertProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/configurator/ui/assistant/alert/AssistantAlert.js

@@ -1 +1 @@
-import{jsx as r,jsxs as i}from"react/jsx-runtime";import{alpha as o,styled as t}from"@mui/material";import{memo as n}from"react";import{PhxIcon as a}from"#package/ui-sdk";import{AssistantPanelName as e}from"../theme.js";let l={note:{color:"info",icon:"Info"},tip:{color:"success",icon:"Lightbulb"},important:{color:"primary",icon:"WarningCircle"},warning:{color:"warning",icon:"Warning"},caution:{color:"error",icon:"XCircle"}},c=t("div",{name:e,slot:"alert"})(({theme:{palette:r,shape:i,spacing:t,typography:n}})=>({borderInlineStart:"3px solid",borderRadius:i.borderRadius,display:"grid",gap:t(1),gridTemplateColumns:"min-content minmax(0, 1fr)",marginBlock:t(1),padding:t(1,1.5),...Object.fromEntries(Object.entries(l).map(([i,{color:t}])=>[`&[data-alert="${i}"]`,{background:o(r[t].main,.08),borderInlineStartColor:r[t].main,"& > :first-child":{color:r[t].main}}])),"& > :last-child > :first-child":{marginBlockStart:0},"& > :last-child > :last-child":{marginBlockEnd:0},"& > :first-child":{blockSize:`calc(${n.body2.lineHeight} * 1em)`,display:"grid",placeItems:"center"}}));export const AssistantAlert=n(({kind:o,children:t})=>i(c,{role:"note","data-alert":o,children:[r("span",{children:r(a,{name:l[o].icon})}),r("div",{children:t})]}));
+import{jsx as a,jsxs as i}from"react/jsx-runtime";import{alpha as r,styled as t}from"@mui/material";import{visuallyHidden as e}from"@mui/utils";import{memo as l}from"react";import{useLocalizable as n}from"#package/react-sdk";import{PhxIcon as s}from"#package/ui-sdk";import{AssistantPanelName as o}from"../theme.js";let m={note:{color:"info",icon:"Info",label:{id:"sdk.assistant.alert.note.label",message:"Note"}},tip:{color:"success",icon:"Lightbulb",label:{id:"sdk.assistant.alert.tip.label",message:"Tip"}},important:{color:"primary",icon:"WarningCircle",label:{id:"sdk.assistant.alert.important.label",message:"Important"}},warning:{color:"warning",icon:"Warning",label:{id:"sdk.assistant.alert.warning.label",message:"Warning"}},caution:{color:"error",icon:"XCircle",label:{id:"sdk.assistant.alert.caution.label",message:"Caution"}}},c=t("div",{name:o,slot:"alert"})(({theme:{palette:a,shape:i,spacing:t,typography:e}})=>({borderInlineStart:"3px solid",borderRadius:i.borderRadius,display:"grid",gap:t(1),gridTemplateColumns:"min-content minmax(0, 1fr)",marginBlock:t(1),padding:t(1,1.5),...Object.fromEntries(Object.entries(m).map(([i,{color:t}])=>[`&[data-alert="${i}"]`,{background:r(a[t].main,.08),borderInlineStartColor:a[t].main,"& > :first-child":{color:a[t].main}}])),"& > :last-child > :first-child":{marginBlockStart:0},"& > :last-child > :last-child":{marginBlockEnd:0},"& > :first-child":{blockSize:`calc(${e.body2.lineHeight} * 1em)`,display:"grid",placeItems:"center"}}));export const AssistantAlert=l(({kind:r,children:t})=>{let{icon:l,label:o}=m[r],d=n(o);return i(c,{role:"note","data-alert":r,children:[i("span",{children:[a(s,{name:l}),a("span",{style:e,children:d})]}),a("div",{children:t})]})});

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

@@ -0,0 +1,9 @@
+interface AnnotationBadgeProps {
+    readonly count: number;
+}
+/**
+ * Tells on a thumbnail of an annotation how many comments it has: a comment icon and their number. An
+ * annotation without comments gets none; its strokes are on the picture.
+ */
+export declare const AnnotationBadge: ({ count }: AnnotationBadgeProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as t,jsxs as n}from"react/jsx-runtime";import{styled as e}from"@mui/material";import{useLocalizable as o}from"#package/react-sdk";import{PhxIcon as a}from"#package/ui-sdk";import{AssistantPanelName as i}from"../theme.js";let r={id:"sdk.assistant.annotation.badge.label",message:"{count, plural, =0 {Annotation} one {Annotation with # comment} other {Annotation with # comments}}"},s=e("span",{name:i,slot:"annotationBadge"})(({theme:{typography:t}})=>({...t.caption,alignItems:"center",background:"rgb(0 0 0 / 60%)",borderRadius:6,color:"#fff",display:"inline-flex",fontSize:13,fontWeight:600,gap:3,insetBlockEnd:3,insetInlineStart:3,letterSpacing:0,lineHeight:1,padding:"3px 5px 3px 4px",pointerEvents:"none",position:"absolute"}));export const AnnotationBadge=({count:e})=>{let i=o({...r,values:{count:e}});return 0===e?null:n(s,{role:"img","aria-label":i,children:[t(a,{name:"ChatCircleText",sx:{fontSize:16}}),e]})};

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

@@ -0,0 +1,6 @@
+/**
+ * What covers the configurator for an annotation of the assistant chat, rendered by a layout that
+ * hosts annotations next to its inert root; see `AnnotationHostContext`. Nothing shows while the view
+ * glides.
+ */
+export declare const AnnotationOverlay: () => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{match as i}from"ts-pattern";import{useEagerObservableValue as o}from"#package/react-sdk";import{useConfigurator as r}from"../../../application-runtime/index.js";import{AnnotationViewer as e}from"./AnnotationViewer.js";import{AnnotationEditor as n}from"./editor/index.js";export const AnnotationOverlay=()=>{let{assistantSystem:a}=r();return i(o(a.annotationOverlay$)).with({kind:"editor"},({view:i,finish:o})=>t(n,{view:i,finish:o},"editor")).with({kind:"viewer"},({annotation:i,close:o})=>t(e,{annotation:i,close:o},i.imageId)).otherwise(()=>null)};

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

@@ -0,0 +1,14 @@
+import type { AssistantAnnotationPin } from '@salsita-ai/contracts/assistant';
+interface AnnotationPinProps {
+    readonly pin: AssistantAnnotationPin;
+    /** Its position among the pins, from 0; it is numbered from 1. */
+    readonly index: number;
+    /** `badge` draws the numbered badge; `target` lies clear over a badge drawn in the image. */
+    readonly variant: 'badge' | 'target';
+    /** True while its comment is edited next to it, so hovering it does not repeat the comment. */
+    readonly isEdited?: boolean;
+    readonly onClick?: () => void;
+}
+/** A pin on an annotation surface: its comment shows on hover, focus or tap. */
+export declare const AnnotationPin: ({ pin: { x, y, comment }, index, variant, isEdited, onClick, }: AnnotationPinProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{Tooltip as a}from"@mui/material";import{useLocalizable as n}from"#package/react-sdk";import{AnnotationPinButton as e}from"./annotation-layout.js";let o={id:"sdk.assistant.annotation.pin.label",message:"Comment {number}"};export const AnnotationPin=({pin:{x:r,y:i,comment:l},index:s,variant:m,isEdited:p=!1,onClick:c})=>{let d=s+1;return t(a,{title:p?"":l,enterTouchDelay:0,placement:"top",arrow:!0,children:t(e,{"data-variant":m,"aria-label":n({...o,values:{number:d}}),style:{insetInlineStart:`${100*r}%`,insetBlockStart:`${100*i}%`},onPointerDown:t=>t.stopPropagation(),onClick:c,children:"badge"===m&&d})})};

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

@@ -0,0 +1,12 @@
+import type { AssistantMessageAnnotation } from '@salsita-ai/contracts/assistant';
+interface AnnotationViewerProps {
+    readonly annotation: AssistantMessageAnnotation;
+    readonly close: () => void;
+}
+/**
+ * An annotation of a sent message over the configurator, read-only: its flattened image, with a
+ * target over each drawn pin badge that shows its comment on hover or tap. Close, or Escape, fades it
+ * out.
+ */
+export declare const AnnotationViewer: ({ annotation, close }: AnnotationViewerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Trans as i}from"@lingui/react";import{Button as r}from"@mui/material";import{useCallback as n,useEffect as a,useMemo as o,useRef as s,useState as d}from"react";import{useLocalizable as m}from"#package/react-sdk";import{useScreenshotSrc as l}from"../screenshots/index.js";import{AnnotationPin as c}from"./AnnotationPin.js";import{ANNOTATION_FADE_DURATION as u,AnnotationRoot as p,AnnotationStage as g,AnnotationSurface as h,AnnotationToolbar as f,annotationSurfaceSize as k}from"./annotation-layout.js";import{prefersReducedMotion as w}from"./prefers-reduced-motion.js";import{useEndOnUnmount as v}from"./use-end-on-unmount.js";let j={id:"sdk.assistant.annotation.viewer.label",message:"Annotation"};export const AnnotationViewer=({annotation:x,close:y})=>{let b=l(o(()=>({kind:"stored",imageId:x.imageId}),[x.imageId])),[T,A]=d(),[E,I]=d(!1),L=s(y),z=m(j);L.current=y,v(()=>L.current());let C=n(()=>{I(!0),setTimeout(()=>L.current(),w()?0:u)},[]);return a(()=>{let e=e=>{"Escape"===e.key&&C()};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[C]),t(p,{role:"dialog","aria-modal":"true","aria-label":z,"data-leaving":E,children:[e(g,{children:void 0!==b&&t(h,{sx:T?k(T.width,T.height):{visibility:"hidden"},children:[e("img",{src:b,alt:"",style:{display:"block",inlineSize:"100%",blockSize:"100%"},onLoad:e=>A({width:e.currentTarget.naturalWidth,height:e.currentTarget.naturalHeight})}),x.pins.map((t,i)=>e(c,{pin:t,index:i,variant:"target"},i))]})}),e(f,{children:e(r,{variant:"contained",autoFocus:!0,onClick:C,children:e(i,{id:"sdk.assistant.annotation.close",message:"Close"})})})]})};

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

@@ -0,0 +1,11 @@
+import type { AssistantMessageAnnotation } from '@salsita-ai/contracts/assistant';
+interface MessageAnnotationsProps {
+    readonly annotations: readonly AssistantMessageAnnotation[];
+}
+/**
+ * The annotations a user attached to a message, as thumbnails with their comment count among the
+ * message's images. In a layout that hosts the annotation overlay, a click opens one over the
+ * configurator, read-only; elsewhere the thumbnail is all there is.
+ */
+export declare const MessageAnnotations: ({ annotations }: MessageAnnotationsProps) => import("react/jsx-runtime").JSX.Element[];
+export {};

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

@@ -0,0 +1 @@
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import{useContext as n,useMemo as a}from"react";import{useLocalizable as i}from"#package/react-sdk";import{useConfigurator as e}from"../../../application-runtime/index.js";import{MessageThumbnail as s,MessageThumbnailPicture as r}from"../attachments/index.js";import{useScreenshotSrc as m}from"../screenshots/index.js";import{AnnotationBadge as d}from"./AnnotationBadge.js";import{AnnotationHostContext as p}from"./annotation-host-context.js";let c={id:"sdk.assistant.message.annotation.open",message:"Show the annotation"},g=({annotation:g})=>{let{assistantSystem:l}=e(),f=m(a(()=>({kind:"stored",imageId:g.imageId}),[g.imageId])),j=i(c),x=n(p);return o(s,{"aria-label":x?j:void 0,disabled:void 0===f||!x,onClick:()=>l.viewAnnotation(g),children:[void 0!==f&&t(r,{src:f,alt:""}),t(d,{count:g.pins.length})]})};export const MessageAnnotations=({annotations:o})=>o.map(o=>t(g,{annotation:o},o.imageId));

package/dist/configurator/ui/assistant/annotation/annotation-host-context.d.ts

@@ -0,0 +1,5 @@
+/**
+ * True inside a layout that renders `AnnotationOverlay` and goes inert while an annotation is shown.
+ * The composer offers Annotate only there.
+ */
+export declare const AnnotationHostContext: import("react").Context<boolean>;

package/dist/configurator/ui/assistant/annotation/annotation-host-context.js

@@ -0,0 +1 @@
+import{createContext as t}from"react";export const AnnotationHostContext=t(!1);

package/dist/configurator/ui/assistant/annotation/annotation-layout.d.ts

@@ -0,0 +1,26 @@
+/** The red of marker strokes and pin badges. */
+export declare const ANNOTATION_COLOR = "#e53935";
+/** CSS px on screen; the flattened image scales it with the view. */
+export declare const ANNOTATION_STROKE_WIDTH = 4;
+/** CSS px on screen; the diameter of a pin's numbered badge. */
+export declare const ANNOTATION_PIN_SIZE = 26;
+/** ms; how long the overlay takes to fade in and out. */
+export declare const ANNOTATION_FADE_DURATION = 200;
+export declare const AnnotationRoot: 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 AnnotationStage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/** The box of the view: everything on it is placed by fractions of it. */
+export declare const AnnotationSurface: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/** The size of a surface for a view of `width` × `height`: as large as fits the stage, keeping its aspect ratio. */
+export declare const annotationSurfaceSize: (width: number, height: number) => {
+    aspectRatio: string;
+    inlineSize: string;
+};
+export declare const AnnotationPicture: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, {}>;
+export declare const AnnotationToolbar: 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>>, {}>;
+/**
+ * A pin on the surface, centred on its point: in the editor the numbered badge itself, the same as the
+ * flattened image shows; over a sent annotation a clear target over the badge drawn in the image.
+ */
+export declare const AnnotationPinButton: import("@emotion/styled").StyledComponent<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"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/configurator/ui/assistant/annotation/annotation-layout.js

@@ -0,0 +1 @@
+import{ButtonBase as t,keyframes as e,styled as n}from"@mui/material";import{AssistantPanelName as o}from"../theme.js";export const ANNOTATION_COLOR="#e53935";export const ANNOTATION_STROKE_WIDTH=4;export const ANNOTATION_PIN_SIZE=26;export const ANNOTATION_FADE_DURATION=200;let i=e({from:{opacity:0}});export const AnnotationRoot=n("div",{name:o,slot:"annotation"})(({theme:{palette:t,zIndex:e}})=>({animation:`${i} 200ms ease backwards`,background:t.background.default,inset:0,position:"absolute",transition:"opacity 200ms ease",zIndex:e.modal+1,'&[data-leaving="true"]':{opacity:0,pointerEvents:"none"},"@media (prefers-reduced-motion: reduce)":{animation:"none",transition:"none"}}));export const AnnotationStage=n("div")({containerType:"size",display:"grid",inset:0,placeItems:"center",position:"absolute"});export const AnnotationSurface=n("div")({position:"relative",touchAction:"none",userSelect:"none"});export const annotationSurfaceSize=(t,e)=>({aspectRatio:`${t} / ${e}`,inlineSize:`min(100cqw, calc(100cqh * ${t/e}))`});export const AnnotationPicture=n("canvas")({blockSize:"100%",display:"block",inlineSize:"100%",inset:0,position:"absolute"});export const AnnotationToolbar=n("div",{name:o,slot:"annotationToolbar"})(({theme:{palette:t,shadows:e,spacing:n}})=>({alignItems:"center",animation:`${i} 200ms ease 200ms both`,background:t.background.paper,borderRadius:12,boxShadow:e[4],display:"flex",flexWrap:"wrap",gap:n(1),insetBlockEnd:n(2),insetInlineStart:"50%",justifyContent:"center",maxInlineSize:`calc(100% - ${n(4)})`,padding:n(1),position:"absolute",translate:"-50% 0","@media (prefers-reduced-motion: reduce)":{animation:"none"}}));export const AnnotationPinButton=n(t)(({theme:{typography:t}})=>({...t.caption,alignItems:"center",blockSize:26,borderRadius:"50%",boxSizing:"border-box",display:"flex",fontWeight:700,inlineSize:26,justifyContent:"center",letterSpacing:0,lineHeight:1,padding:0,position:"absolute",translate:"-50% -50%",'&[data-variant="badge"]':{background:ANNOTATION_COLOR,border:"2px solid #fff",color:"#fff"},"&:focus-visible":{outline:`2px solid ${ANNOTATION_COLOR}`,outlineOffset:2}}));

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

@@ -0,0 +1,15 @@
+import type { AnnotationPoint } from './annotation-drawing.js';
+interface AnnotationCommentProps {
+    /** Where its pin is on the view. */
+    readonly point: AnnotationPoint;
+    /** The comment as saved so far; what is typed is the pin's only once it is saved. */
+    readonly comment: string;
+    readonly onDelete: () => void;
+    readonly onSave: (comment: string) => void;
+}
+/**
+ * The comment of a pin, open for editing by the pin: it takes the focus as it opens. Enter saves it and
+ * Shift+Enter adds a line, as in the composer. What is typed stays here until it is saved.
+ */
+export declare const AnnotationComment: ({ point, comment, onDelete, onSave }: AnnotationCommentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Tooltip as n,styled as a}from"@mui/material";import{useCallback as o,useRef as i,useState as l}from"react";import{useLocalizable as r}from"#package/react-sdk";import{PhxIcon as s}from"#package/ui-sdk";import{ComposerField as m,ComposerFrame as c,ComposerInput as p,ComposerPrimaryButton as d,ComposerToolButton as u}from"../../composer/index.js";import{AssistantPanelName as h}from"../../theme.js";let f={id:"sdk.assistant.annotation.comment.placeholder",message:"Add a comment…"},g={id:"sdk.assistant.annotation.comment.delete",message:"Delete"},k={id:"sdk.assistant.annotation.comment.save",message:"Save"},x=a(c,{name:h,slot:"annotationComment"})(({theme:{palette:e,shadows:t}})=>({background:e.background.paper,boxShadow:t[6],inlineSize:"min(280px, 80cqw)",position:"absolute",zIndex:1})),v=a("div")(({theme:{spacing:e}})=>({cursor:"default",display:"flex",gap:e(.5),gridColumn:2}));export const AnnotationComment=({point:a,comment:c,onDelete:h,onSave:C})=>{let[b,S]=l(c),w=i(null),z=r(f),D=r(g),j=r(k),y=o(e=>{e.stopPropagation(),e.target===e.currentTarget&&(e.preventDefault(),w.current?.focus())},[]),E=o(e=>{"Enter"!==e.key||e.shiftKey||e.nativeEvent.isComposing||(e.preventDefault(),C(b))},[b,C]);return t(x,{style:(({x:e,y:t})=>({...e<.5?{insetInlineStart:`${100*e}%`}:{insetInlineEnd:`${(1-e)*100}%`},...t<.5?{insetBlockStart:`calc(${100*t}% + 18px)`}:{insetBlockEnd:`calc(${(1-t)*100}% + 18px)`}}))(a),onPointerDown:e=>e.stopPropagation(),onMouseDown:y,children:[e(m,{children:e(p,{autoFocus:!0,multiline:!0,maxRows:4,placeholder:z,value:b,inputRef:w,inputProps:{"aria-label":z},onChange:e=>S(e.target.value),onKeyDown:E})}),t(v,{children:[e(n,{title:D,placement:"top",children:e(u,{size:"small","aria-label":D,onClick:h,children:e(s,{name:"Trash",fontSize:"small"})})}),e(n,{title:j,placement:"top",children:e(d,{size:"small","aria-label":j,onClick:()=>C(b),children:e(s,{name:"Check",fontSize:"small"})})})]})]})};

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

@@ -0,0 +1,18 @@
+import type { AssistantAnnotation } from '../../../../application-runtime/index.js';
+interface AnnotationEditorProps {
+    /** The frozen view, at the canvas's resolution. */
+    readonly view: HTMLCanvasElement;
+    /** Ends the editor with what the user made, or with `null` when they cancel. */
+    readonly finish: (annotation: AssistantAnnotation | null) => void;
+}
+/**
+ * The editor over the configurator: the frozen view, which cannot be moved or zoomed. Marker draws
+ * red strokes; Comment places a numbered pin where the user clicks and opens its comment, and opens
+ * the comment of a pin clicked again, with Delete. Hovering or tapping a pin shows its comment.
+ *
+ * Done drops the pins without a comment and flattens the strokes and the pin badges onto the view; it
+ * does nothing while there is nothing on it. Cancel, or Escape, ends it with nothing. Either way it
+ * fades out first. An editor that goes away before it ended ends as cancelled.
+ */
+export declare const AnnotationEditor: ({ view, finish }: AnnotationEditorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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