@salsita-ai/sdk 0.50.0-develop.c28cfb7ded → 0.50.0-develop.c402728d10

package/dist/configurator/toolbar-actions/use-toolbar-actions.d.ts

@@ -0,0 +1,100 @@
+import { type ComponentType } from 'react';
+import type { DimensionUnit } from '#package/domain';
+import { type UseLocaleSwitchResult } from '#package/react-sdk';
+import { type UseAssistantPanelResult } from './use-assistant-panel.js';
+import { type UseMeasurementsResult } from './use-measurements.js';
+/** Which of the spec's toolbar lists to read: `toolbar.desktop`, `toolbar.mobile` or `toolbar.mobileMenu`. */
+export type ToolbarPlacement = 'desktop' | 'mobile' | 'mobileMenu';
+interface ToolbarEntryBase {
+    /** Stable for the entry's placement, group and position, to key the rendered list */
+    readonly key: string;
+    /** The element's `icon` prop, when its kind has one and the spec sets it */
+    readonly icon: string | undefined;
+    /**
+     * The element's `showTitle` prop, else the built-in button's default: `true` for the assistant, else `false`. The
+     * built-in assistant button also hides its title on a phone or tablet-sized layout; the layout decides that here.
+     */
+    readonly showTitle: boolean;
+    /** The built-in button's title in the current language, such as "Undo" or "Share"; a custom entry's `name` */
+    readonly label: string;
+}
+/**
+ * One entry of the toolbar, by `kind`:
+ * - `undo`, `redo`: `run` undoes or redoes as `useUndoRedo` does; `disabled` while there is nothing to undo or redo.
+ * - `fullscreen`: `active` is the fullscreen flag, `run` toggles it and pushes the built-in button's analytics event.
+ * - `resetCamera`: `run` resets the camera as `useResetCamera` does.
+ * - `share`: the layout opens its own share dialog, which calls `useShareLinks`.
+ * - `measurements`: the layout opens its own settings over `measurements`, the result of `useMeasurements` with the
+ *   element's `showIndicatorSwitch` applied; `icons` is the element's icon per unit, when the spec sets it.
+ * - `language`: the layout opens its own language list over `language`, the result of `useLocaleSwitch`.
+ * - `help`: `Content` renders the help, the element's children or else the help registered with
+ *   `createToolbarHelp`, for the layout's own dialog. The built-in menu action falls back to nothing instead.
+ * - `assistant`: `run` opens or closes the assistant panel; `assistant` is the result of `useAssistantPanel`.
+ * - `custom`: `Element` renders the project element the spec's `customLayoutElement` names.
+ */
+export type ToolbarAction = (ToolbarEntryBase & {
+    readonly kind: 'undo';
+    readonly disabled: boolean;
+    readonly run: () => void;
+}) | (ToolbarEntryBase & {
+    readonly kind: 'redo';
+    readonly disabled: boolean;
+    readonly run: () => void;
+}) | (ToolbarEntryBase & {
+    readonly kind: 'fullscreen';
+    readonly active: boolean;
+    readonly run: () => void;
+}) | (ToolbarEntryBase & {
+    readonly kind: 'resetCamera';
+    readonly run: () => void;
+}) | (ToolbarEntryBase & {
+    readonly kind: 'share';
+}) | (ToolbarEntryBase & {
+    readonly kind: 'measurements';
+    readonly measurements: UseMeasurementsResult;
+    readonly icons: Partial<Record<DimensionUnit, string>> | undefined;
+}) | (ToolbarEntryBase & {
+    readonly kind: 'language';
+    readonly language: UseLocaleSwitchResult;
+}) | (ToolbarEntryBase & {
+    readonly kind: 'help';
+    readonly Content: ComponentType;
+}) | (ToolbarEntryBase & {
+    readonly kind: 'assistant';
+    readonly assistant: UseAssistantPanelResult;
+    readonly run: () => void;
+}) | (ToolbarEntryBase & {
+    readonly kind: 'custom';
+    readonly name: string;
+    readonly Element: ComponentType;
+});
+export interface UseToolbarActionsResult {
+    /**
+     * The spec's groups (`toolbarButtonGroup`), each a list of entries; an entry outside a group is a group of one, and
+     * a group nested in a group is flattened into it, where the built-in toolbar nests it
+     */
+    readonly groups: readonly (readonly ToolbarAction[])[];
+    /** The same entries, flattened */
+    readonly actions: readonly ToolbarAction[];
+}
+export type UseToolbarActions = (placement?: ToolbarPlacement) => UseToolbarActionsResult;
+/**
+ * Hook to build a project layout's toolbar from the spec's `toolbar`, as the built-in `LayoutSlots.DesktopToolbar`,
+ * `LayoutSlots.MobileToolbar` and `LayoutSlots.MobileHamburgerMenu` do, as runnable entries instead of buttons.
+ * - It reads the first active root `toolbar` component's list for `placement` (`'desktop'` by default). Without
+ *   one, it reads the default toolbar, which follows fullscreen and, for a viewer, leaves out share, undo and redo.
+ * - It leaves out an entry with nothing to offer: share when sharing is disabled, measurements or language with
+ *   nothing to choose, help without content, the assistant without one in the spec. It leaves out an element that is
+ *   not a toolbar entry, with a warning in development.
+ * - A project element registered under a built-in kind, such as `undoToolbarButton`, replaces that button in the
+ *   built-in toolbar but not here: the entry stays the built-in action.
+ * - It differs from the built-in toolbar in four ways: the entries keep the spec's order for every placement, where
+ *   `LayoutSlots.MobileToolbar` renders the `mobile` list reversed; a group nested in a group is flattened into it;
+ *   the assistant's `showTitle` is the spec's, where the built-in button also hides its title on a phone or
+ *   tablet-sized layout; and a `helpMenuAction` without children shows the registered help.
+ *
+ * The actions push the analytics events of the built-in buttons. Opening and closing the layout's own dialogs and
+ * popovers push none; the layout pushes its own through `useAnalytics`.
+ */
+export declare const useToolbarActions: UseToolbarActions;
+export {};

package/dist/configurator/toolbar-actions/use-toolbar-actions.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useCallback as t,useEffect as n,useMemo as a,useRef as o}from"react";import{P as r,match as s}from"ts-pattern";import{FrontendAnalyticsFactory as l,PhoenixLayoutElementWithChildren as i,PhoenixLayoutElements as u,useAnalyticsService as d,useIsDev as m,useIsFullscreenActive as p,useLocaleSwitch as b,useResolveLocalizable as c,useSetFullscreen as g,useShareLinks as h,useStoreSelector as k,useUndoRedo as T}from"#package/react-sdk";import{useConfigurator as B}from"../application-runtime/index.js";import{useAssistantPanel as f}from"./use-assistant-panel.js";import{useMeasurements as w}from"./use-measurements.js";import{useToolbarHelp as A}from"./use-toolbar-help.js";let v={undo:{id:"sdk.toolbar.undoRedo.undo.label",message:"Undo"},redo:{id:"sdk.toolbar.undoRedo.redo.label",message:"Redo"},enterFullscreen:{id:"sdk.toolbar.fullscreen.enter.label",message:"Open fullscreen"},exitFullscreen:{id:"sdk.toolbar.fullscreen.exit.label",message:"Exit fullscreen"},resetCamera:{id:"sdk.toolbar.camera.reset.label",message:"Reset camera"},shareToolbarButton:{id:"sdk.toolbar.share.open.label",message:"Share"},shareMenuAction:{id:"sdk.layout.menu.hamburger.share.label",message:"Share configuration"},measurementsToolbarButton:{id:"sdk.measurements",message:"Change measure"},measurementsMenuAction:{id:"sdk.layout.menu.measurements.label",message:"Change measure"},languageToolbarButton:{id:"sdk.toolbar.language.title",message:"Switch language"},languageMenuAction:{id:"sdk.layout.hamburgerMenu.language.label",message:"Change Language"},helpToolbarButton:{id:"sdk.toolbar.help.label",message:"Help"},helpMenuAction:{id:"sdk.layout.menu.hamburger.help.label",message:"Show help"},assistant:{id:"sdk.assistant.toolbarButton.label",message:"Assistant"}},C=(e,t,n=!1)=>({key:e,icon:t?.icon,showTitle:t?.showTitle??n});export const useToolbarActions=(M="desktop")=>{let{layoutSystem:P,cameraControlSystem:x}=B(),S=k(e=>P.getToolbarState(e.state),[P])[M],y=d(),$=c(),F=m(),R=T(),j=p(),L=g(),E=h({enabled:!1}),G=w(),D=b(),I=f(),O=A(),U=t(()=>{y.push(l.FullScreenModeToggled()),L(!j)},[y,L,j]),H=t(()=>{x.resetCamera()},[x]),W=t(()=>{I.setOpen(!I.open)},[I]),q=o(new WeakMap),z=t((e,t)=>{let n=q.current.get(e);if(n)return n;let a=()=>t();return q.current.set(e,a),a},[]),J=a(()=>{let t=[],n=(n,a)=>s(n).returnType().with({kind:"undoToolbarButton"},e=>({...C(a,e.props),kind:"undo",label:$(v.undo),disabled:!R.canUndo,run:R.undo})).with({kind:"redoToolbarButton"},e=>({...C(a,e.props),kind:"redo",label:$(v.redo),disabled:!R.canRedo,run:R.redo})).with({kind:r.union("enterFullscreenToolbarButton","exitFullscreenToolbarButton")},e=>({...C(a,e.props),kind:"fullscreen",label:$(j?v.exitFullscreen:v.enterFullscreen),active:j,run:U})).with({kind:"resetCameraToolbarButton"},e=>({...C(a,e.props),kind:"resetCamera",label:$(v.resetCamera),run:H})).with({kind:r.union("shareToolbarButton","shareMenuAction")},e=>E.available?{...C(a,e.props),kind:"share",label:$(v[e.kind])}:null).with({kind:r.union("measurementsToolbarButton","measurementsMenuAction")},e=>{let t=e.props?.showIndicatorSwitch??G.hasIndicatorSwitch,n=G.units.length>1||t;return n?{...C(a,void 0),kind:"measurements",label:$(v[e.kind]),measurements:{...G,hasIndicatorSwitch:t,available:n},icons:e.props?.icons}:null}).with({kind:r.union("languageToolbarButton","languageMenuAction")},e=>D.available?{...C(a,void 0),kind:"language",label:$(v[e.kind]),language:D}:null).with({kind:r.union("helpToolbarButton","helpMenuAction")},t=>{let{children:n}=t,o=void 0!==n?z(t,()=>e(u,{elements:n})):O;return o?{...C(a,t.props),kind:"help",label:$(v[t.kind]),Content:o}:null}).with({kind:"assistantToolbarButton"},e=>I.available?{...C(a,e.props,!0),kind:"assistant",label:$(v.assistant),assistant:I,run:W}:null).with({kind:"customLayoutElement"},t=>({...C(a,void 0),kind:"custom",label:t.props.name,name:t.props.name,Element:z(t,()=>e(i,{kind:t.kind,elementProps:t.props,children:t.children}))})).with({kind:r.union("toolbarButtonGroup","adminConnectedResourcePage","adminDataTableActions","adminDataTablePage","adminPresetActions","adminPresetCategoryActions","adminPresetCategoryPage","adminPresetListPage","adminRecipeActions","adminRecipeCollectionPage","enterSummaryButton","footerPrice","mainFooterActions","nextStepButton","otherActions","previousStepButton","saveTemplateButton","stepLabel","stepProgress")},e=>(t.push(e.kind),null)).exhaustive(),a=(e,t)=>{if("toolbarButtonGroup"!==e.kind){let a=n(e,`${t}-0`);return a?[a]:[]}return(e.children??[]).flatMap((e,o)=>"toolbarButtonGroup"===e.kind?a(e,`${t}-${o}`):n(e,`${t}-${o}`)??[])},o=(S??[]).map((e,t)=>a(e,`${M}-${t}`)).filter(e=>e.length>0);return{groups:o,actions:o.flat(),unsupported:t}},[S,M,$,R,j,U,H,E.available,G,D,I,W,O,z]),K=J.unsupported.join(", ");return n(()=>{F&&K&&console.warn(`useToolbarActions('${M}') leaves out elements that are not toolbar entries: ${K}.`)},[F,M,K]),a(()=>({groups:J.groups,actions:J.actions}),[J])};

package/dist/configurator/toolbar-actions/use-toolbar-help.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentType } from 'react';
+export type UseToolbarHelp = () => ComponentType | null;
+/**
+ * Internal to `useToolbarActions`, not public: the help the project registers with the deprecated
+ * `createToolbarHelp`, which the default toolbar's help button shows, as a component, or `null` without one.
+ */
+export declare const useToolbarHelp: UseToolbarHelp;

package/dist/configurator/toolbar-actions/use-toolbar-help.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{PhoenixLayoutElement as t,usePhoenixLayoutElementExists as o}from"#package/react-sdk";import{toolbarHelpElementName as r}from"../application-runtime/index.js";let l=()=>e(t,{name:r,elementProps:{},defaultSlot:()=>null});export const useToolbarHelp=()=>o(r)?l:null;

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

@@ -9,8 +9,9 @@ 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.
  */

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 n}from"react/jsx-runtime";import{ButtonBase as i,ClickAwayListener as o,Tooltip as s,styled as a}from"@mui/material";import{memo as r,useCallback as l,useMemo as d,useRef as c,useState as m}from"react";import{match as p}from"ts-pattern";import{useLocalizable as h}from"#package/react-sdk";import{PhxIcon as u}from"#package/ui-sdk";import{assistantReferenceStyles as f}from"./reference-link/index.js";import{ScreenshotThumbnails as g,readToolScreenshots as k}from"./screenshots/index.js";import{AssistantPanelName as x}from"./theme.js";let y={id:"sdk.assistant.tool.updateDesign.label",message:"Update design"},b={id:"sdk.assistant.tool.readDesign.label",message:"Read design"},w={id:"sdk.assistant.tool.mistake.hint",message:"The assistant made a mistake."},v={id:"sdk.assistant.tool.cancelled.hint",message:"Stopped before it finished."},C={id:"sdk.assistant.tool.noResult.hint",message:"The result of this step was lost. It may or may not have been done."},I={id:"sdk.assistant.tool.toolBudget.hint",message:"Not done: the assistant reached its limit of steps for one message."},S={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:x,slot:"chips"})(({theme:{palette:e,spacing:t,typography:n}})=>({...n.caption,alignItems:"start",color:e.text.secondary,display:"grid",gap:t(.75),gridTemplateColumns:"min-content minmax(0, 1fr)"})),z=a("span",{name:x,slot:"activity"})(({theme:{typography:e}})=>({blockSize:`calc(${e.caption.lineHeight} * 1em)`,display:"grid",placeItems:"center"})),A=a(u,{name:x,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"}}}),T=a("span",{name:x,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)}})),E=a("span",{name:x,slot:"screenshotsLink"})(f),L=a(i,{name:x,slot:"undoButton"})(({theme:{palette:e,shape:t,spacing:n}})=>({alignItems:"center",animation:"phx-assistant-undo-in 150ms ease-out",borderRadius:t.borderRadius,color:e.primary.main,display:"inline-flex",font:"inherit",gap:n(.5),marginInlineStart:n(1),verticalAlign:"top","&:hover":{textDecoration:"underline"},"@media (prefers-reduced-motion: reduce)":{animation:"none"},"@keyframes phx-assistant-undo-in":{from:{opacity:0}}})),R=a("span",{name:x,slot:"chipLabel"})(({theme:{palette:e}})=>({minInlineSize:0,overflow:"hidden",textOverflow:"ellipsis",'[data-chip="failed"] > &':{textDecoration:"line-through",textDecorationColor:e.error.main}})),P=a("span",{name:x,slot:"violation"})({display:"block"}),B=a("span",{name:x,slot:"fullLabel"})({display:"block"}),O=r(({tool:i})=>{let{chip:o,input:a,result:r}=i,d=h(y),u=h(b),f=h(w),g=h(v),k=h(C),x=h(I),S=c(null),[D,j]=m(!1),z=p(o.label).with({kind:"text"},({text:e})=>e).with({kind:"updateDesign"},()=>d).with({kind:"readDesign"},()=>u).exhaustive(),A=l(()=>{console.info(`Assistant tool call "${z}"`,{input:a,result:r})},[a,z,r]),E=l(()=>{let e=S.current;j(null!=e&&e.scrollWidth>e.clientWidth)},[]),L=p(o).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,n)=>e(P,{children:t},n))).with({state:"failed"},()=>f).otherwise(()=>""),O=D?t(n,{children:[e(B,{children:z}),L]}):L;return e(s,{title:O,placement:"top-start",children:e(T,{onClick:A,onPointerEnter:E,"data-chip":o.state,children:e(R,{ref:S,children:z})})})}),U=r(({screenshots:t})=>{let n=h({...D,values:{count:t.length}}),[i,a]=m(!1),r=l(()=>a(!0),[]),d=l(()=>a(!1),[]),p=c(null),u=l(e=>{p.current=e},[]),f=l(()=>{p.current?.update()},[]),k=l(e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),a(!0))},[]);return e(T,{"data-chip":"screenshots",children:e(o,{onClickAway:d,mouseEvent:!!i&&"onClick",touchEvent:!!i&&"onTouchEnd",children:e(s,{open:i,onOpen:r,onClose:d,title:e(g,{screenshots:t,onImageLoad:f}),placement:"top-start",describeChild:!0,disableTouchListener:!0,PopperProps:{popperRef:u},slotProps:{tooltip:{sx:{background:"none",maxInlineSize:"none",padding:0}}},children:e(E,{role:"button",tabIndex:0,"aria-expanded":i,onClick:r,onKeyDown:k,children:n})})})})}),W=({tool:i})=>{let o=d(()=>k(i.result),[i.result]);return t(n,{children:[e(O,{tool:i}),o.length>0&&e(U,{screenshots:o})]})};export const AssistantToolChips=r(({tools:n,isActive:i,canUndo:o,onUndo:s})=>{let a=h(S),r=l(()=>{s(new Set(n.map(({id:e})=>e)))},[s,n]);return t(j,{"data-chips":i?"active":"done","aria-busy":i,children:[e(z,{children:e(A,{name:"Gear"})}),t("div",{children:[n.map(t=>e(W,{tool:t},t.id)),o&&t(L,{onClick:r,children:[e(u,{name:"ArrowCounterClockwise",fontSize:"inherit"}),a]})]})]})});

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

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

@@ -1,7 +1,12 @@
+import type { AssistantFormsVisibility } from './thread-items.js';
 export interface AssistantMarkdownProps {
     readonly markdown: string;
     /** True while the text is still arriving, so markup the model has not finished is completed. */
     readonly isStreaming: boolean;
+    readonly forms: AssistantFormsVisibility;
 }
-/** Assistant text of the thread: Markdown with lists, tables, links, entity links and code, without a bubble. */
-export declare const AssistantMarkdown: import("react").MemoExoticComponent<({ markdown, isStreaming }: AssistantMarkdownProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * Assistant text of the thread: Markdown with lists, tables, alerts, links, entity links, references, images, code and forms,
+ * without a bubble. A form fence the model is still writing shows a placeholder.
+ */
+export declare const AssistantMarkdown: import("react").MemoExoticComponent<({ markdown, isStreaming, forms }: AssistantMarkdownProps) => import("react/jsx-runtime").JSX.Element>;

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

@@ -1 +1 @@
-import{jsx as r,Fragment as e}from"react/jsx-runtime";import{styled as o}from"@mui/material";import{memo as n}from"react";import i,{defaultUrlTransform as a}from"react-markdown";import t from"remark-gfm";import{AssistantEntityLink as l,isEntityLinkHref as d,parseEntityLinkTarget as m}from"./entity-link/index.js";import{completeStreamedMarkdown as s}from"./streamed-markdown.js";import{AssistantPanelName as c}from"./theme.js";let p=o("div",{name:c,slot:"assistantMessage"})(({theme:{palette:r,shape:e,spacing:o,typography:n}})=>({overflowWrap:"anywhere","& > :first-child":{marginBlockStart:0},"& > :last-child":{marginBlockEnd:0},"p, ul, ol, pre, blockquote":{marginBlock:o(1)},"h1, h2, h3, h4, h5, h6":{...n.subtitle2,marginBlock:o(1.5,.5)},"ul, ol":{paddingInlineStart:o(2.5)},a:{color:r.primary.main},code:{background:r.action.hover,borderRadius:e.borderRadius/2,fontFamily:"ui-monospace, Menlo, monospace",fontSize:"0.9em",paddingInline:o(.5)},pre:{background:r.action.hover,borderRadius:e.borderRadius,overflowX:"auto",padding:o(1),code:{background:"none",padding:0}},blockquote:{borderInlineStart:`2px solid ${r.divider}`,color:r.text.secondary,marginInline:0,paddingInlineStart:o(1.5)},"th, td":{borderBlockEnd:`1px solid ${r.divider}`,padding:o(.5,1),textAlign:"start",verticalAlign:"top"}})),u=o("div")({overflowX:"auto",table:{borderCollapse:"collapse",inlineSize:"100%"}}),g={a:({node:o,children:n,href:i,...a})=>{if(null==i||!d(i))return r("a",{...a,href:i,target:"_blank",rel:"noopener noreferrer",children:n});let t=m(i);return null==t?r(e,{children:n}):r(l,{id:t,children:n})},table:({node:e,children:o,...n})=>r(u,{children:r("table",{...n,children:o})})},h=[t],f=r=>d(r)?r:a(r),b=["img"];export const AssistantMarkdown=n(({markdown:e,isStreaming:o})=>r(p,{children:r(i,{components:g,remarkPlugins:h,disallowedElements:b,urlTransform:f,children:o?s(e):e})}));
+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})})})});

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{IconButton as s,Tooltip as a,Typography as i,styled as n}from"@mui/material";import{useCallback as r}from"react";import{useLocalizable as o}from"#package/react-sdk";import{PhxIcon as l}from"#package/ui-sdk";import{useConfigurator as m}from"../../application-runtime/index.js";import{AssistantComposer as d}from"./AssistantComposer.js";import{AssistantThread as p}from"./AssistantThread.js";import{AssistantPanelName as c}from"./theme.js";import{useIsAssistantPanelOpen as u}from"./use-is-assistant-panel-open.js";let b={id:"sdk.assistant.panel.title",message:"Assistant"},f={id:"sdk.assistant.panel.close.label",message:"Close assistant"};export const ASSISTANT_PANEL_SLOT="slot[assistant]";let g=n("section",{name:c,slot:"root"})(({theme:{palette:e}})=>({background:`var(--phx-sidebar-background, ${e.background.paper})`,border:"var(--phx-sidebar-border, 0)",borderRadius:"inherit",display:"grid",gridTemplateColumns:"minmax(0, 1fr)",gridTemplateRows:"min-content minmax(0, 1fr) min-content",inset:0,overflow:"hidden",position:"absolute",zIndex:1})),h=n("header",{name:c,slot:"header"})(({theme:{palette:e,spacing:t}})=>({alignItems:"center",borderBlockEnd:`1px solid ${e.divider}`,display:"flex",gap:t(1),justifyContent:"space-between",paddingBlock:t(1),paddingInline:`var(--phx-sidebar-padding, ${t(2)}) ${t(1)}`})),x=n(i,{name:c,slot:"title"})({fontWeight:600}),k=n(s,{name:c,slot:"closeButton"})({}),j=e=>{e.target instanceof Element&&e.target.closest("button")&&e.preventDefault()};export const AssistantPanel=()=>{let{assistantSystem:s}=m(),i=u(),n=o(b),c=o(f),v=r(()=>{s.setOpen(!1)},[s]);return i?t(g,{"data-sidebar":"slot[assistant]","aria-label":n,onMouseDown:j,children:[t(h,{children:[e(x,{variant:"subtitle1",component:"h2",children:n}),e(a,{title:c,placement:"top",children:e(k,{size:"small","aria-label":c,onClick:v,children:e(l,{name:"X"})})})]}),e(p,{}),e(d,{})]}):null};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{IconButton as s,Tooltip as a,Typography as n,styled as i}from"@mui/material";import{useCallback as r}from"react";import{useLocalizable as o}from"#package/react-sdk";import{PhxIcon as l}from"#package/ui-sdk";import{useConfigurator as m}from"../../application-runtime/index.js";import{AssistantComposer as d}from"./AssistantComposer.js";import{AssistantThread as p}from"./AssistantThread.js";import{AssistantPanelName as c}from"./theme.js";import{useIsAssistantPanelOpen as u}from"./use-is-assistant-panel-open.js";let b={id:"sdk.assistant.panel.title",message:"Assistant"},f={id:"sdk.assistant.panel.close.label",message:"Close assistant"};export const ASSISTANT_PANEL_SLOT="slot[assistant]";let g=i("section",{name:c,slot:"root"})(({theme:{palette:e}})=>({background:`var(--phx-sidebar-background, ${e.background.paper})`,border:"var(--phx-sidebar-border, 0)",borderRadius:"inherit",display:"grid",gridTemplateColumns:"minmax(0, 1fr)",gridTemplateRows:"min-content minmax(0, 1fr) min-content",inset:0,overflow:"hidden",position:"absolute",zIndex:1})),h=i("header",{name:c,slot:"header"})(({theme:{palette:e,spacing:t}})=>({alignItems:"center",borderBlockEnd:`1px solid ${e.divider}`,display:"flex",gap:t(1),justifyContent:"space-between",paddingBlock:t(1),paddingInline:`var(--phx-sidebar-padding, ${t(2)}) ${t(1)}`})),x=i(n,{name:c,slot:"title"})({fontWeight:600}),k=i(s,{name:c,slot:"closeButton"})({}),j=e=>{e.target instanceof Element&&e.target.closest('button, [role="button"]')&&e.preventDefault()};export const AssistantPanel=()=>{let{assistantSystem:s}=m(),n=u(),i=o(b),c=o(f),v=r(()=>{s.setOpen(!1)},[s]);return n?t(g,{"data-sidebar":"slot[assistant]","aria-label":i,onMouseDown:j,children:[t(h,{children:[e(x,{variant:"subtitle1",component:"h2",children:i}),e(a,{title:c,placement:"top",children:e(k,{size:"small","aria-label":c,onClick:v,children:e(l,{name:"X"})})})]}),e(p,{}),e(d,{})]}):null};

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 k}from"./theme.js";import{buildEarlierThreadItems as f,buildThreadView as v}from"./thread-items.js";import{useFollowStream as b}from"./use-follow-stream.js";let w=s("div",{name:k,slot:"thread"})({display:"grid",position:"relative"}),x=s("div",{name:k,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:k,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:k,slot:"greeting"})({}),C=s("div",{name:k,slot:"status"})(({theme:{palette:e,typography:a}})=>({...a.caption,color:e.text.secondary})),S=s("div",{name:k,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:k,slot:"earlierButton"})({alignSelf:"center"}),I=s("div",{name:k,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:k,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})=>e(h,{markdown:a,isStreaming:i})).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:k,isResuming:y,earlierThreads:S}=c,A=l(s.undoTipToolCallId$),R=k?void 0:A,{items:L,isThinking:z}=n(()=>v(h,k),[h,k]),$=n(()=>f(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, select, textarea, [role="button"]')||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&&!k&&!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:k&&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 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{MessageImages as g}from"./attachments/index.js";import{EntityLinkSelectionProvider as u,useCreateEntityLinkSelection as f}from"./entity-link/index.js";import{AssistantPanelName as k}from"./theme.js";import{buildEarlierThreadItems as v,buildThreadView as b}from"./thread-items.js";import{useFollowStream as w}from"./use-follow-stream.js";let x=s("div",{name:k,slot:"thread"})({display:"grid",position:"relative"}),y=s("div",{name:k,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"}})),T=s("div",{name:k,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"})),j=s("div",{name:k,slot:"greeting"})({}),C=s("div",{name:k,slot:"status"})(({theme:{palette:e,typography:a}})=>({...a.caption,color:e.text.secondary})),I=s("div",{name:k,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}})),S=s(t,{name:k,slot:"earlierButton"})({alignSelf:"center"}),B=s("div",{name:k,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)})),E=s(t,{name:k,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}})),A=({item:t,isActive:s,undoableToolCallId:r,onUndo:n})=>o(t).with({kind:"user"},({text:i,imageIds:t})=>a(T,{children:[t.length>0&&e(g,{imageIds:t}),i]})).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:s,canUndo:a.some(({id:e})=>e===r),onUndo:n})).with({kind:"separator"},()=>e(I,{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:g,isResuming:k,earlierThreads:T}=c,I=l(s.undoTipToolCallId$),R=g?void 0:I,{items:L,isThinking:z}=n(()=>b(h,g,k),[h,g,k]),$=n(()=>v(T),[T]),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}=w(n(()=>({messages:h,isThinking:z,isResuming:k,failure:D?.kind}),[h,z,k,D?.kind]),U),N=f(),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&&!k&&!D;return a(x,{children:[e(u,{selection:N,children:a(y,{ref:M,onScroll:q,onClick:Y,role:"log","aria-live":"polite",children:[c.isLoaded&&0===L.length&&0===$.length&&!g&&!k&&!D&&e(j,{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(S,{size:"small",color:"inherit",onClick:s.loadEarlierThread,children:e(i,{id:"sdk.assistant.thread.showEarlier.label",message:"Show earlier conversation"})}),$.map(a=>e(A,{item:a,isActive:!1,undoableToolCallId:R,onUndo:s.undoToolCalls},a.id)),L.map(a=>e(A,{item:a,isActive:g&&a===L.at(-1),undoableToolCallId:R,onUndo:s.undoToolCalls},a.id)),k&&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(B,{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(E,{size:"small",onClick:H,endIcon:e(d,{name:"CaretDown"}),children:e(i,{id:"sdk.assistant.thread.newReply.label",message:"New reply"})})]})};

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

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+import type { AlertKind } from './remark-alerts.js';
+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. */
+export declare const AssistantAlert: import("react").MemoExoticComponent<({ kind, children }: AssistantAlertProps) => import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +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})]}));

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

@@ -0,0 +1,2 @@
+export { AssistantAlert } from './AssistantAlert.js';
+export { isAlertKind, remarkAlerts } from './remark-alerts.js';

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

@@ -0,0 +1 @@
+export{AssistantAlert}from"./AssistantAlert.js";export{isAlertKind,remarkAlerts}from"./remark-alerts.js";

package/dist/configurator/ui/assistant/alert/remark-alerts.d.ts

@@ -0,0 +1,10 @@
+import type { Root } from 'mdast';
+/** The kinds of GitHub alerts a reply can write, each with its own colour and icon. */
+export type AlertKind = 'note' | 'tip' | 'important' | 'warning' | 'caution';
+export declare const isAlertKind: (value: unknown) => value is AlertKind;
+/**
+ * Remark plugin for GitHub alerts: a blockquote whose first line is a marker such as `[!WARNING]`
+ * loses the marker and carries its kind as the `dataAlert` property (`data-alert` in the page), for the `blockquote` override to render as a
+ * callout. A blockquote with an unknown marker stays as it is.
+ */
+export declare const remarkAlerts: () => (tree: Root) => void;

package/dist/configurator/ui/assistant/alert/remark-alerts.js

@@ -0,0 +1 @@
+let e=["note","tip","important","warning","caution"],t=/^\[!([a-z]+)\][ \t]*(?:\n|$)/i;export const isAlertKind=t=>"string"==typeof t&&e.some(e=>e===t);let r=e=>{let[r]=e.children;if(r?.type!=="paragraph")return;let[n,l]=r.children;if(n?.type!=="text")return;let i=t.exec(n.value),a=i?.[1]?.toLowerCase();if(null==i||!isAlertKind(a))return;let o=n.value.slice(i[0].length),c=!i[0].endsWith("\n")&&l?.type==="break";if(i[0].endsWith("\n")||null==l||c)return""===o?r.children.splice(0,c?2:1):n.value=o,0===r.children.length&&e.children.shift(),a},n=e=>{for(let t of e){if("blockquote"===t.type){let e=r(t);if(null!=e){t.data={...t.data,hProperties:{...t.data?.hProperties,dataAlert:e}};continue}}"children"in t&&n(t.children)}};export const remarkAlerts=()=>e=>{n(e.children)};

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

@@ -0,0 +1,11 @@
+interface MessageImagesProps {
+    /** The images the user attached to the message, by the ids it references them by. */
+    readonly imageIds: readonly string[];
+}
+/**
+ * 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 shows one larger in a popover.
+ */
+export declare const MessageImages: ({ imageIds }: 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 r}from"react/jsx-runtime";import{ButtonBase as i,Popover as o,styled as a}from"@mui/material";import{useCallback as t,useMemo as s,useState as n}from"react";import{useLocalizable as m}from"#package/react-sdk";import{useScreenshotSrc as l}from"../screenshots/index.js";import{AssistantPanelName as d}from"../theme.js";let c={id:"sdk.assistant.message.image.open",message:"Show the attached image larger"},p=a("div",{name:d,slot:"messageImages"})(({theme:{spacing:e}})=>({display:"flex",flexWrap:"wrap",gap:e(.75),justifyContent:"flex-end"})),g=a(i,{name:d,slot:"messageImage"})(({theme:{palette:e,shape:r}})=>({background:e.action.hover,blockSize:64,borderRadius:r.borderRadius,inlineSize:64,overflow:"hidden"})),h=a("img")({blockSize:"100%",display:"block",inlineSize:"100%",objectFit:"cover"}),b=a("img")(({theme:{shape:e}})=>({borderRadius:e.borderRadius,display:"block",maxBlockSize:"70vh",maxInlineSize:"min(80vw, 640px)"})),v=({imageId:r,onOpen:i})=>{let o=l(s(()=>({kind:"stored",imageId:r}),[r]));return e(g,{"aria-label":m(c),disabled:void 0===o,onClick:e=>void 0!==o&&i(e,o),children:void 0!==o&&e(h,{src:o,alt:""})})};export const MessageImages=({imageIds:i})=>{let[a,s]=n(),m=t((e,r)=>{s({anchor:e.currentTarget,src:r})},[]),l=t(()=>s(void 0),[]);return r(p,{children:[i.map(r=>e(v,{imageId:r,onOpen:m},r)),e(o,{open:void 0!==a,anchorEl:a?.anchor,onClose:l,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},slotProps:{paper:{sx:{padding:1}}},children:a&&e(b,{src:a.src,alt:""})})]})};

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

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

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

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

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

@@ -0,0 +1,19 @@
+/**
+ * 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;
+/**
+ * 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 prepareImage=async t=>{let a=await e(t),{width:r,height:n}=fitWithin({width:a.naturalWidth,height:a.naturalHeight},2048),o=document.createElement("canvas");o.width=r,o.height=n;let h=o.getContext("2d");if(!h)throw Error("The browser gave no 2D canvas to prepare the attached image on.");return h.fillStyle="#fff",h.fillRect(0,0,r,n),h.drawImage(a,0,0,r,n),new Promise((e,t)=>{o.toBlob(a=>a?e(a):t(Error("The browser could not encode the attached image as JPEG.")),"image/jpeg",.85)})};

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

@@ -8,6 +8,6 @@ export interface AssistantEntityLinkProps {
 /**
  * An entity the assistant named in a reply, shown as its label. It follows the configurator live:
  * a click selects the entity when the scene can select it, the link shows when the entity is
- * selected or hovered in the scene, and it is struck out once the entity is gone.
+ * 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>;

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

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{alpha as t,styled as i}from"@mui/material";import{memo as n,useCallback as r,useEffect as o,useRef as a}from"react";import{sceneEntitySelectHotspotComponent as l,selectableComponent as c}from"#package/domain";import{useDomain as d,useFirstRenderedComponent as s,useHoveredDomainEntityId as m,useRenderedSelector as u,useSelectEntity as p,useSelectedDomainEntityId as k,useStoreSelector as y}from"#package/react-sdk";import{FrontendAnalyticsFactory as h}from"../../../common/index.js";import{AssistantPanelName as b}from"../theme.js";import{useEntityLinkSelection as g}from"./entity-link-selection.js";import{resolveEntityLinkState as f}from"./entity-link-state.js";let v=({theme:{palette:e,shape:i,spacing:n}})=>({background:e.action.hover,border:"none",borderRadius:i.borderRadius/2,boxDecorationBreak:"clone",color:"inherit",font:"inherit",margin:0,paddingBlock:0,paddingInline:n(.5),textAlign:"inherit",WebkitBoxDecorationBreak:"clone",'&[data-entity-link="interactive"]':{background:t(e.primary.main,e.action.hoverOpacity),color:e.primary.main,cursor:"pointer",'&:hover, &:focus-visible, &[data-hovered="true"]':{background:t(e.primary.main,e.action.focusOpacity)},"&:focus-visible":{outline:`2px solid ${e.primary.main}`,outlineOffset:1}},'&[data-entity-link="missing"]':{background:"none",color:e.text.disabled,paddingInline:0,textDecoration:"line-through"},'&[data-selected="true"]':{boxShadow:`inset 0 0 0 1px ${e.primary.main}`}}),x=i("span",{name:b,slot:"entityLink"})(v),S=i("button",{name:b,slot:"entityLink"})(v),j=({kind:t,isSelected:i,children:n})=>e(x,{"data-entity-link":t,"data-selected":i,children:n}),T=({id:t,isSelected:i,children:n})=>{let{navigationSystem:u}=d(),k=s({entityIds:[t],componentTypes:[c]}),y=s({entityIds:[t],componentTypes:[l]}),{kind:b,canHover:v}=f({isSelectable:null!=k,isHoverDisabled:k?.state.hoverable===!1,hasSelectHotspot:null!=y}),x=m()===t,T=p(h.AssistantEntityLinkClicked),B=g(),E=r(()=>{B?.remember(t),T(t)},[t,B,T]),L=a(!1),D=r(()=>{v&&(L.current=!0,u.debouncedToggleHover(t))},[v,t,u]),H=r(()=>{L.current&&(L.current=!1,u.debouncedToggleHover(null))},[u]),I=r(e=>{"touch"!==e.pointerType&&D()},[D]),A=r(e=>{e.currentTarget.matches(":focus-visible")&&D()},[D]);return(o(()=>H,[v,H,t]),"interactive"!==b)?e(j,{kind:b,isSelected:i,children:n}):e(S,{type:"button","data-entity-link":b,"data-selected":i,"data-hovered":v&&x,"aria-current":i?"true":void 0,onClick:E,onPointerEnter:I,onPointerLeave:H,onFocus:A,onBlur:H,children:n})};export const AssistantEntityLink=n(({id:t,children:i})=>{let{domain:n}=d(),r=y(e=>null!=n.getEntity(t,e.state),[n,t]),o=u(e=>null!=n.getEntity(t,e.state),[n,t]),a=k()===t;return r?o?e(T,{id:t,isSelected:a,children:i}):e(j,{kind:"plain",isSelected:a,children:i}):e(j,{kind:"missing",isSelected:!1,children:i})});
+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})});

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

@@ -10,7 +10,7 @@ export interface EntityLinkFacts {
 /**
  * How an entity link shows and behaves:
  *
- * - `missing`: the entity is gone, the link is struck out;
+ * - `missing`: the entity is gone, the link is muted;
  * - `plain`: the entity exists but nothing in the scene selects it, so the link is only a label;
  * - `interactive`: a click selects the entity, as a click on it or on its hotspot in the scene does.
  */

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

@@ -1,3 +1,2 @@
 export { AssistantEntityLink } from './AssistantEntityLink.js';
 export { EntityLinkSelectionProvider, useCreateEntityLinkSelection } from './entity-link-selection.js';
-export { isEntityLinkHref, parseEntityLinkTarget } from './entity-link-target.js';

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

@@ -1 +1 @@
-export{AssistantEntityLink}from"./AssistantEntityLink.js";export{EntityLinkSelectionProvider,useCreateEntityLinkSelection}from"./entity-link-selection.js";export{isEntityLinkHref,parseEntityLinkTarget}from"./entity-link-target.js";
+export{AssistantEntityLink}from"./AssistantEntityLink.js";export{EntityLinkSelectionProvider,useCreateEntityLinkSelection}from"./entity-link-selection.js";

package/dist/configurator/ui/assistant/form/AssistantForm.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Where a form stands in its reply: still being written, written while the reply goes on, or ready
+ * for the user once the reply has ended.
+ */
+export type AssistantFormStatus = 'writing' | 'waiting' | 'ready';
+export interface AssistantFormProps {
+    /** The markup inside the ```` ```form ```` fence. */
+    readonly source: string;
+    readonly status: AssistantFormStatus;
+}
+/**
+ * A form the assistant wrote to ask the user something. What the user picks or enters is sent as
+ * their next message; a form that asks one question sends on the first pick, any other has a submit
+ * button. A form that cannot be built offers to send the assistant its errors instead.
+ *
+ * The state lives here, so unfinished input is lost when the form unmounts: accepted, because a
+ * form is shown only in the last reply of the thread.
+ */
+export declare const AssistantForm: import("react").MemoExoticComponent<({ source, status }: AssistantFormProps) => import("react/jsx-runtime").JSX.Element | null>;

package/dist/configurator/ui/assistant/form/AssistantForm.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Trans as r}from"@lingui/react";import{Button as o,styled as t}from"@mui/material";import{memo as n,useCallback as a,useEffect as s,useMemo as l,useState as d}from"react";import{match as m}from"ts-pattern";import{useConfigurator as c}from"../../../application-runtime/index.js";import{AssistantPanelName as p}from"../theme.js";import{composeAnswer as u}from"./compose-answer.js";import{describeBuildErrors as b}from"./describe-build-errors.js";import{parseFormBlock as f}from"./parse-form-block.js";import{useFormRegistry as g}from"./registry/index.js";let h=t("div",{name:p,slot:"form"})(({theme:{spacing:e}})=>({display:"flex",flexDirection:"column",gap:e(1.5),marginBlock:e(1)})),k=t(o,{name:p,slot:"formSubmit"})(({theme:{palette:e,spacing:i,typography:r}})=>({...r.body2,alignSelf:"end",background:e.primary.main,border:"none",borderRadius:8,color:e.primary.contrastText,fontWeight:r.fontWeightMedium,letterSpacing:"normal",minBlockSize:0,minInlineSize:0,paddingBlock:i(.5),paddingInline:i(2),textTransform:"none","&:hover":{background:e.primary.dark,border:"none"},"&.Mui-disabled":{background:e.action.disabledBackground,border:"none",color:e.action.disabled}})),w=t("div",{name:p,slot:"formNote"})(({theme:{palette:e,shape:i,spacing:r,typography:o}})=>({...o.caption,alignItems:"center",background:e.action.hover,borderRadius:i.borderRadius,color:e.text.secondary,display:"flex",flexWrap:"wrap",gap:r(1),justifyContent:"space-between",marginBlock:r(1),paddingBlock:r(1),paddingInline:r(1.5)})),x=({model:o,disabled:t,send:n})=>{let[a,s]=d(()=>new Map),[l,c]=d(()=>new Map),p=(i,r)=>{let{id:l,definition:d,label:b,attributes:f}=i;return m(d).with({role:"option"},({component:d})=>e(d,{attributes:f,label:b,disabled:t,selected:!0===a.get(l),onSelect:e=>{o.isQuick?n(u(o,new Map([[i.id,!0]]),new Map([[i.id,e]]))):(c(r=>new Map(r).set(i.id,e)),s(e=>{let o=new Map(e);if("choice"===r.definition.role){for(let e of r.children)o.delete(e.id);o.set(i.id,!0)}else o.set(i.id,!0!==e.get(i.id));return o}))}},l)).with({role:"input"},({component:r})=>e(r,{attributes:f,label:b,disabled:t,state:a.get(l),onChange:(e,r)=>{o.isQuick?n(u(o,new Map([[i.id,e]]),new Map([[i.id,r]]))):(s(r=>new Map(r).set(i.id,e)),c(e=>new Map(e).set(i.id,r)))}},l)).with({role:"group"},{role:"choice"},{role:"choices"},({component:r})=>e(r,{attributes:f,label:b,disabled:t,children:i.children.map(e=>p(e,i))},l)).exhaustive()};return i(h,{children:[o.root.children.map(e=>p(e,o.root)),!o.isQuick&&e(k,{variant:"contained",disabled:t,disableElevation:!0,onClick:()=>{t||o.isQuick||n(u(o,a,l))},children:e(r,{id:"sdk.assistant.form.submit.label",message:"Submit"})})]})};export const AssistantForm=n(({source:t,status:n})=>{let{assistantSystem:m}=c(),[p,u]=d(!1),h="writing"===n,k=g(),M=l(()=>h?void 0:f(t,k),[t,h,k]),y="ready"!==n||p,j=a(e=>{u(!0),m.send(e).finally(()=>u(!1))},[m]);return(s(()=>{M?.ok===!1&&console.warn("The assistant wrote a form that could not be built.",M.errors)},[M]),M)?M.ok?0===M.root.children.length?null:e(x,{model:M,disabled:y,send:j}):i(w,{role:"alert",children:[e("span",{children:e(r,{id:"sdk.assistant.form.failure",message:"The assistant couldn't build this form."})}),e(o,{size:"small",variant:"outlined",color:"inherit",disabled:y,onClick:()=>j(b(M.errors)),children:e(r,{id:"sdk.assistant.form.fix.label",message:"Fix it"})})]}):e(w,{children:e(r,{id:"sdk.assistant.form.writing",message:"Preparing a form…"})})});

package/dist/configurator/ui/assistant/form/compose-answer.d.ts

@@ -0,0 +1,11 @@
+import type { BuiltFormModel } from './form-model.js';
+import type { FormAnswers, FormState } from './form-state.js';
+/** Stands for anything left unanswered, so every question keeps its line. */
+export declare const FORM_PLACEHOLDER = "\u2014";
+/**
+ * The user's answer to a form, sent as their message: one line per labelled container or input as
+ * `Label: value`, a bare line for an unlabelled one, two spaces of indentation per labelled
+ * container, and the placeholder for anything unanswered. Unlabelled groups are flattened into
+ * their parent, and a picked option, as an input, answers with what it reported.
+ */
+export declare const composeAnswer: (model: BuiltFormModel, state: FormState, answers: FormAnswers) => string;

package/dist/configurator/ui/assistant/form/compose-answer.js

@@ -0,0 +1 @@
+import{match as t}from"ts-pattern";export const FORM_PLACEHOLDER="—";let e=(t,e)=>`${"  ".repeat(t)}${e}`,n=(t,e)=>null==t?e:`${t}: ${e}`,r=({children:t},{state:e,answers:n})=>t.flatMap(({id:t})=>{let r=n.get(t);return!0===e.get(t)&&null!=r&&""!==r?[r]:[]}),l=(i,o,p)=>{let{label:a}=i;return t(i.definition.role).with("group",()=>{if(null==a)return i.children.flatMap(t=>l(t,o,p));let t=i.children.flatMap(t=>l(t,o+1,p));return t.length>0?[e(o,`${a}:`),...t]:[e(o,`${a}: —`)]}).with("choice",()=>[e(o,n(a,r(i,p)[0]??"—"))]).with("choices",()=>{let t=r(i,p);return 0===t.length?[e(o,n(a,"—"))]:null==a?t.map(t=>e(o,t)):[e(o,`${a}:`),...t.map(t=>e(o+1,t))]}).with("input",()=>[e(o,n(a,p.answers.get(i.id)??"—"))]).with("option",()=>[]).exhaustive()};export const composeAnswer=(t,e,n)=>l(t.root,0,{state:e,answers:n}).join("\n");

package/dist/configurator/ui/assistant/form/describe-build-errors.d.ts

@@ -0,0 +1,6 @@
+import type { FormBuildError } from './form-model.js';
+/**
+ * The message Fix it sends for a form that could not be built: every error, with the element named
+ * by its tag and its label or its position, then the request to write the form again.
+ */
+export declare const describeBuildErrors: (errors: readonly FormBuildError[]) => string;

package/dist/configurator/ui/assistant/form/describe-build-errors.js

@@ -0,0 +1 @@
+export const describeBuildErrors=e=>["Your form could not be built:",...e.map(e=>`- ${(({element:e,label:l,position:n})=>null==l?`<${e}> (element ${n})`:`<${e} label="${l}">`)(e)}: ${e.message}.`),"Send it again."].join("\n");

package/dist/configurator/ui/assistant/form/form-model.d.ts

@@ -0,0 +1,37 @@
+import type { FormElementDefinition } from './registry/index.js';
+/**
+ * An element of a parsed form. Options outside a `choice` or `choices` are already wrapped in an
+ * implicit container, and the top level of the block is an implicit group without a label.
+ */
+export interface FormNode {
+    /** Unique within its block: the element's position in the markup, or what an implicit container wraps. */
+    readonly id: string;
+    readonly definition: FormElementDefinition;
+    readonly label?: string;
+    readonly attributes: Readonly<Record<string, unknown>>;
+    readonly children: readonly FormNode[];
+}
+/** Why an element made its block unbuildable, named by its tag and its label or its position in the block. */
+export interface FormBuildError {
+    readonly element: string;
+    readonly label?: string;
+    /** The element's place in the block, counting elements in document order from 1. */
+    readonly position: number;
+    readonly message: string;
+}
+/**
+ * A form fence as the panel renders it, or every reason it cannot. A quick form asks one question,
+ * a choice or a quick input: the first pick or action sends it, and it has no submit button.
+ */
+export type FormModel = {
+    readonly ok: true;
+    readonly root: FormNode;
+    readonly isQuick: boolean;
+} | {
+    readonly ok: false;
+    readonly errors: readonly FormBuildError[];
+};
+/** A form that could be built. */
+export type BuiltFormModel = Extract<FormModel, {
+    readonly ok: true;
+}>;

package/dist/configurator/ui/assistant/form/form-model.js

@@ -0,0 +1 @@
+export{};

package/dist/configurator/ui/assistant/form/form-state.d.ts

@@ -0,0 +1,4 @@
+/** What the user did in a form, by node id: `true` for a picked option, the input's own state for an input. */
+export type FormState = ReadonlyMap<string, unknown>;
+/** The answer text each option or input reported, by node id; one that never reported is missing. */
+export type FormAnswers = ReadonlyMap<string, string | undefined>;

package/dist/configurator/ui/assistant/form/form-state.js

@@ -0,0 +1 @@
+export{};

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

@@ -0,0 +1,4 @@
+export { AssistantForm } from './AssistantForm.js';
+export type { AssistantFormStatus } from './AssistantForm.js';
+export type { AssistantFormElementRoleProps, AssistantFormElementType, CreateAssistantFormElement, } from './registry/index.js';
+export { createAssistantFormElementFactory } from './registry/index.js';

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

@@ -0,0 +1 @@
+export{AssistantForm}from"./AssistantForm.js";export{createAssistantFormElementFactory}from"./registry/index.js";