@salsita-ai/sdk 0.50.0-develop.ae52227c7e → 0.50.0-develop.aec0f535bf

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

@@ -0,0 +1,18 @@
+/**
+ * What a project layout needs to open and close the assistant panel.
+ * - `available`: whether the spec has an `assistant`; the built-in assistant button renders nothing otherwise.
+ * - `open` and `setOpen`: whether the panel is open, and a function that opens or closes it.
+ * - `hasUnreadReply`: whether the assistant replied while the panel was closed.
+ */
+export interface UseAssistantPanelResult {
+    readonly available: boolean;
+    readonly open: boolean;
+    readonly hasUnreadReply: boolean;
+    readonly setOpen: (open: boolean) => void;
+}
+export type UseAssistantPanel = () => UseAssistantPanelResult;
+/**
+ * Hook to open and close the assistant panel, as the built-in toolbar's assistant button does. The panel itself
+ * renders only inside `LayoutSlots.DesktopSidebar`, so a layout without it has no panel to open.
+ */
+export declare const useAssistantPanel: UseAssistantPanel;

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

@@ -0,0 +1 @@
+import{useMemo as e}from"react";import{useEagerObservableValue as t,useSpecAssistant as a}from"#package/react-sdk";import{useConfigurator as r}from"../application-runtime/index.js";export const useAssistantPanel=()=>{let{assistantSystem:n}=r(),p=a(),{open:i,hasUnreadReply:o}=t(n.panel$);return e(()=>({available:null!=p,open:i,hasUnreadReply:o,setOpen:n.setOpen}),[p,i,o,n])};

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

@@ -0,0 +1,35 @@
+import { type DimensionUnit } from '#package/domain';
+export interface UseMeasurementsOptions {
+    /**
+     * Whether the dimension-indicator switch is offered, overriding `applicationConfig.indicatorSwitch`; the
+     * `showIndicatorSwitch` prop of the built-in measurements button
+     */
+    readonly showIndicatorSwitch?: boolean;
+}
+/**
+ * What a project layout needs to offer the measurement settings.
+ * - `units`: the units the spec's dimension configuration offers; with one there is nothing to choose.
+ * - `unit` and `setUnit`: the unit dimensions are shown in, and a function that changes it and pushes the
+ *   analytics event of the built-in unit buttons.
+ * - `hasIndicatorSwitch`: whether the dimension indicators can be switched on and off (`showIndicatorSwitch`,
+ *   else `applicationConfig.indicatorSwitch`, else `true`).
+ * - `indicatorsShown` and `toggleIndicators`: whether the dimension indicators show in the scene, and a function
+ *   that switches them and pushes the analytics event of the built-in switch.
+ * - `available`: whether there is anything to set, more than one unit or the indicator switch; the built-in
+ *   measurements button renders nothing otherwise.
+ */
+export interface UseMeasurementsResult {
+    readonly units: readonly DimensionUnit[];
+    readonly unit: DimensionUnit;
+    readonly setUnit: (unit: DimensionUnit) => void;
+    readonly hasIndicatorSwitch: boolean;
+    readonly indicatorsShown: boolean;
+    readonly toggleIndicators: () => void;
+    readonly available: boolean;
+}
+export type UseMeasurements = (options?: UseMeasurementsOptions) => UseMeasurementsResult;
+/**
+ * Hook to read and change the measurement settings, the unit of dimensions and the dimension indicators in the
+ * scene, as the built-in toolbar's measurements button does. It does not check read mode.
+ */
+export declare const useMeasurements: UseMeasurements;

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

@@ -0,0 +1 @@
+import{useObservableEagerState as o}from"observable-hooks";import{useCallback as i,useMemo as t}from"react";import{applicationConfigComponent as e}from"#package/domain";import{FrontendAnalyticsFactory as n,useAnalyticsService as r,useDimensionConfig as a,useDimensionState as s,useDimensions as m,useFirstRootComponent as c}from"#package/react-sdk";import{useConfigurator as p}from"../application-runtime/index.js";export const useMeasurements=(l={})=>{let{showIndicatorSwitch:d}=l,u=r(),{canvasSystem:g}=p(),h=c(e),{availableDimensions:f}=a(),{unit:k}=s(),{setGlobalUnit:b}=m(),D=o(g.dimensionIndicatorShown$),I=d??h?.state.indicatorSwitch??!0,v=i(o=>{u.push(n.GlobalDimensionsButtonClicked(o)),b(o)},[u,b]),w=i(()=>{u.push(n.DimensionIndicatorsToggled()),g.toggleDimensionIndicator()},[u,g]);return t(()=>({units:f,unit:k,setUnit:v,hasIndicatorSwitch:I,indicatorsShown:D,toggleIndicators:w,available:f.length>1||I}),[f,k,v,I,D,w])};

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

@@ -1,11 +1,100 @@
+import type { ButtonBaseProps, ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+import { type PhxIconProps } from '#package/ui-sdk';
 import type { AssistantToolItem } from './thread-items.js';
+declare const MuiComponentName: 'PhxAssistantToolChips';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: AssistantToolChipsSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantToolChipsProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Activity: 'activity';
+    readonly ActivityIcon: 'activityIcon';
+    readonly Chip: 'chip';
+    readonly ChipLabel: 'chipLabel';
+    readonly ScreenshotsLink: 'screenshotsLink';
+    readonly UndoButton: 'undoButton';
+    readonly Violation: 'violation';
+    readonly FullLabel: 'fullLabel';
+};
+type AssistantToolChipsSlots = ValueOf<typeof Slots>;
+export interface ThemeableAssistantToolChipsProps {
+    /**
+     * The components used for each slot inside a row of tool calls.
+     *
+     * - `root` — The row (`div`).
+     * - `activity` — The frame of the turning icon (`span`).
+     * - `activityIcon` — The icon that turns while the assistant works on the row (`PhxIcon`).
+     * - `chip` — The note of one call, or of its screenshots (`span`).
+     * - `chipLabel` — The text of a call's note (`span`).
+     * - `screenshotsLink` — The label that opens a call's screenshots (`span`).
+     * - `undoButton` — The Undo control after the notes (`ButtonBase`).
+     * - `violation` — A line of a failed call's tooltip, one per violation (`span`).
+     * - `fullLabel` — The full text of a cut note, at the top of its tooltip (`span`).
+     */
+    readonly slots?: Partial<Record<AssistantToolChipsSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the row.
+     * - `activity` — Props for the frame of the turning icon.
+     * - `activityIcon` — Props for the turning icon.
+     * - `chip` — Props for each note.
+     * - `chipLabel` — Props for the text of each note.
+     * - `screenshotsLink` — Props for each screenshots label.
+     * - `undoButton` — Props for the Undo control.
+     * - `violation` — Props for each violation line.
+     * - `fullLabel` — Props for the full text of a cut note.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Activity]: HTMLAttributes<HTMLSpanElement>;
+        readonly [Slots.ActivityIcon]: Partial<PhxIconProps>;
+        readonly [Slots.Chip]: HTMLAttributes<HTMLSpanElement>;
+        readonly [Slots.ChipLabel]: HTMLAttributes<HTMLSpanElement>;
+        readonly [Slots.ScreenshotsLink]: HTMLAttributes<HTMLSpanElement>;
+        readonly [Slots.UndoButton]: ButtonBaseProps;
+        readonly [Slots.Violation]: HTMLAttributes<HTMLSpanElement>;
+        readonly [Slots.FullLabel]: HTMLAttributes<HTMLSpanElement>;
+    }>;
+}
 export interface AssistantToolChipsProps {
     readonly tools: readonly AssistantToolItem[];
     /** True while the reply runs and this row is its newest block: the assistant is at work on it. */
     readonly isActive: boolean;
+    /** True when the row offers Undo: no reply runs, and the step of the undo history the configuration is at is one of its changes. */
+    readonly canUndo: boolean;
+    /** Undoes the changes of the given tool calls while one of them is the step the configuration is at. */
+    readonly onUndo: (toolCallIds: ReadonlySet<string>) => void;
+}
+/**
+ * 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<(inProps: AssistantToolChipsProps & ThemeableAssistantToolChipsProps) => import("react/jsx-runtime").JSX.Element>;
+export interface AssistantActivityRowProps {
+    /** What the assistant is doing, said beside the turning icon. */
+    readonly label: ReactNode;
 }
 /**
- * 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.
+ * 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. It is drawn with the
+ * slots of `PhxAssistantToolChips`, so it looks like the row that takes over from it.
  */
-export declare const AssistantToolChips: import("react").MemoExoticComponent<({ tools, isActive }: AssistantToolChipsProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const AssistantActivityRow: ({ label }: AssistantActivityRowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -1,7 +1,108 @@
+import type { ComponentsOverrides, IconButtonProps, InputBaseProps } from '@mui/material';
+import { type ElementType, type FormHTMLAttributes, type HTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+import { AssistantComposerName } from './composer/index.js';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [AssistantComposerName]: AssistantComposerSlots;
+    }
+    interface ComponentsPropsList {
+        [AssistantComposerName]: ThemeableAssistantComposerProps;
+    }
+    interface Components {
+        [AssistantComposerName]?: {
+            defaultProps?: ComponentsPropsList[typeof AssistantComposerName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof AssistantComposerName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly InputFrame: 'inputFrame';
+    readonly Attachments: 'attachments';
+    readonly Attachment: 'attachment';
+    readonly RemoveAttachment: 'removeAttachment';
+    readonly AnnotateAttachment: 'annotateAttachment';
+    readonly Input: 'input';
+    readonly ToolButton: 'toolButton';
+    readonly SendButton: 'sendButton';
+    readonly MicButton: 'micButton';
+    readonly RecordingBar: 'recordingBar';
+    readonly StopButton: 'stopButton';
+    readonly Hint: 'hint';
+    readonly AttachmentNotice: 'attachmentNotice';
+};
+type AssistantComposerSlots = ValueOf<typeof Slots>;
+export interface ThemeableAssistantComposerProps {
+    /**
+     * The components used for each slot inside the composer.
+     *
+     * - `root` — The composer (`form`).
+     * - `inputFrame` — The box around the input, its attachments and its buttons (`div`).
+     * - `attachments` — The row of attached images (`div`).
+     * - `attachment` — One attached image (`div`).
+     * - `removeAttachment` — The control that removes an attached image (`IconButton`).
+     * - `annotateAttachment` — The control that annotates an attached image in its place; none on an annotation (`IconButton`).
+     * - `input` — The message input (`InputBase`).
+     * - `toolButton` — The Attach and Annotate controls (`IconButton`).
+     * - `sendButton` — The Send control, of a message and of a recording (`IconButton`).
+     * - `micButton` — The control that records a voice message, in place of Send while the input is empty (`IconButton`).
+     * - `recordingBar` — The bar that stands in for the input while a voice message is recorded (`div`). It takes the
+     *   focus while it stands in, so Enter sends and Escape drops the recording: a replacement forwards its `ref` and
+     *   `tabIndex` to its element.
+     * - `stopButton` — The Stop control shown while a reply runs (`IconButton`).
+     * - `hint` — The disclaimer below the input (`div`).
+     * - `attachmentNotice` — The notice about an image that could not be attached, in place of the disclaimer (`div`).
+     */
+    readonly slots?: Partial<Record<AssistantComposerSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the composer.
+     * - `inputFrame` — Props for the box around the input.
+     * - `attachments` — Props for the row of attached images.
+     * - `attachment` — Props for each attached image.
+     * - `removeAttachment` — Props for each remove control.
+     * - `annotateAttachment` — Props for each annotate control.
+     * - `input` — Props for the message input.
+     * - `toolButton` — Props for the Attach and Annotate controls.
+     * - `sendButton` — Props for the Send control.
+     * - `micButton` — Props for the record control.
+     * - `recordingBar` — Props for the recording bar.
+     * - `stopButton` — Props for the Stop control.
+     * - `hint` — Props for the disclaimer.
+     * - `attachmentNotice` — Props for the attachment notice.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: FormHTMLAttributes<HTMLFormElement>;
+        readonly [Slots.InputFrame]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Attachments]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Attachment]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.RemoveAttachment]: IconButtonProps;
+        readonly [Slots.AnnotateAttachment]: IconButtonProps;
+        readonly [Slots.Input]: InputBaseProps;
+        readonly [Slots.ToolButton]: IconButtonProps;
+        readonly [Slots.SendButton]: IconButtonProps;
+        readonly [Slots.MicButton]: IconButtonProps;
+        readonly [Slots.RecordingBar]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.StopButton]: IconButtonProps;
+        readonly [Slots.Hint]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.AttachmentNotice]: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
 /**
  * The message input of the panel. Enter sends and Shift+Enter adds a line. While a reply runs the
  * 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,
+ * and shown as thumbnails that can be removed; the message, its attachments and their limit are
+ * `useAssistantComposer`'s.
+ *
+ * When the session takes voice messages, a mic stands in for Send while the input is empty. A
+ * recording replaces the input with a bar that can drop it, and Send sends it with the attachments.
+ * A microphone blocked for the page is crossed out, with a note where to allow it.
  */
-export declare const AssistantComposer: () => import("react/jsx-runtime").JSX.Element;
+export declare const AssistantComposer: (inProps: ThemeableAssistantComposerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1 +1 @@
-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 n,Tooltip as o,styled as i,useThemeProps as s}from"@mui/material";import{useCallback as r,useEffect as l,useRef as d,useState as c}from"react";import{useLocalizable as m}from"#package/react-sdk";import{PhxIcon as p,hoverStyles as u,useResponsive as h}from"#package/ui-sdk";import{AnnotationBadge as g}from"./annotation/index.js";import{AssistantComposerName as b,ComposerField as f,ComposerFrame as k,ComposerInput as v,ComposerPrimaryButton as y,ComposerToolButton as S}from"./composer/index.js";import{useAssistantComposer as B}from"./use-assistant-composer.js";import{RecordingBar as x}from"./voice/index.js";let z={id:"sdk.assistant.composer.placeholder",message:"Ask or tell me what to change…"},D={id:"sdk.assistant.composer.send.label",message:"Send"},w={id:"sdk.assistant.composer.stop.label",message:"Stop"},A={id:"sdk.assistant.composer.attach.label",message:"Attach images"},C={id:"sdk.assistant.composer.annotate.label",message:"Annotate with drawings and comments"},E={id:"sdk.assistant.composer.attachment.remove",message:"Remove image"},R={id:"sdk.assistant.composer.attachment.annotate",message:"Annotate image"},P={id:"sdk.assistant.composer.annotation.remove",message:"Remove annotation"},T={id:"sdk.assistant.composer.attachment.unreadable",message:"Unsupported image format."},j={id:"sdk.assistant.composer.record.label",message:"Record a voice message"},M={id:"sdk.assistant.composer.recording.send",message:"Send voice message"},F={id:"sdk.assistant.composer.record.blocked",message:"Microphone access is blocked. Allow it in your browser's site settings."},N={id:"sdk.assistant.composer.attachment.limit",message:"You can attach up to {max} images."},I=i("form",{name:b,slot:"root"})(({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)})`})),K=i("div",{name:b,slot:"attachments"})(({theme:{spacing:e}})=>({display:"flex",flexWrap:"wrap",gap:e(1),gridColumn:"1 / -1",paddingBlockStart:e(.75)})),L=i("div")({cursor:"default",display:"flex",justifySelf:"start"}),$=i("div",{name:b,slot:"attachment"})(({theme:{palette:e,shape:t}})=>({blockSize:56,border:`1px solid ${e.divider}`,borderRadius:t.borderRadius,inlineSize:56,overflow:"hidden",position:"relative"})),O=i("img")({blockSize:"100%",display:"block",inlineSize:"100%",objectFit:"cover"}),U=i(n,{name:b,slot:"removeAttachment"})(({theme:{palette:e}})=>({background:e.background.paper,insetBlockStart:2,insetInlineEnd:2,padding:2,position:"absolute","&:hover":{background:e.background.paper}})),W=i(n,{name:b,slot:"annotateAttachment"})(({theme:{palette:e}})=>({background:e.background.paper,insetBlockEnd:2,insetInlineStart:2,padding:2,position:"absolute","&:hover":{background:e.background.paper}})),q=i(n,{name:b,slot:"stopButton"})(({theme:{palette:e}})=>({background:e.text.primary,borderRadius:8,color:e.background.paper,padding:4,"&:hover":{background:e.text.primary},...u({"&:hover":{background:e.text.secondary}})})),H=i("span")({background:"currentColor",blockSize:10,borderRadius:2,inlineSize:10,margin:5}),X=i("div",{name:b,slot:"hint"})(({theme:{palette:e,typography:t}})=>({...t.caption,color:e.text.secondary})),Y=i("div",{name:b,slot:"attachmentNotice"})(({theme:{palette:e,typography:t}})=>({...t.caption,color:e.error.main})),G=i("input")({display:"none"}),J=i(y,{name:b,slot:"micButton"})(({theme:{palette:e}})=>({'&[data-blocked="true"], &[data-blocked="true"]:hover':{background:e.action.disabledBackground,color:e.text.secondary}}));export const AssistantComposer=n=>{let{slots:i={},slotProps:u={}}=s({props:n,name:b}),{draft:Q,setDraft:V,attachments:Z,addFiles:_,annotate:ee,annotateAttachment:et,removeAttachment:ea,notice:en,maxAttachments:eo,isBusy:ei,isPreparing:es,isLocked:er,isReplying:el,canSend:ed,send:ec,stop:em,inputFocusHandlers:ep,canRecord:eu,recording:eh,startRecording:eg,sendRecording:eb,cancelRecording:ef}=B(),[ek,ev]=c(!1),ey=d(null),eS=d(null),{isDesktop:eB}=h(),ex=m(z),ez=m(D),eD=m(w),ew=m(A),eA=m(C),eC=m(R),eE=m(E),eR=m(P),eP=m(T),eT=m({...N,values:{max:eo}}),ej=m(j),eM=m(M),eF=m(F),eN="recording"===eh.status||"recorded"===eh.status,eI=eu&&"refused"===eh.status,eK=r(async()=>{ed&&!eB&&ey.current?.blur(),await ec()},[ed,eB,ec]),eL=r(e=>{e.preventDefault(),eN?eb():eK()},[eN,eK,eb]);l(()=>{eB&&ey.current?.focus()},[]);let e$=d(null),eO=d(null),eU=d(eN);l(()=>{var e;let t,a=(e=e$.current,(t=e?.getRootNode())instanceof ShadowRoot?t.activeElement??(document.activeElement===document.body?null:document.activeElement):document.activeElement===document.body?null:document.activeElement),n=null===a||(e$.current?.contains(a)??!1);n&&eN&&!eO.current?.contains(a)?eO.current?.focus():n&&!eN&&eU.current&&eB&&ey.current?.focus(),eU.current=eN},[eN,ei,eB]);let eW=u.root?.onKeyDown,eq=r(e=>{if(eW?.(e),!e.defaultPrevented&&eN&&!e.nativeEvent.isComposing){if("Escape"===e.key){e.preventDefault(),e.stopPropagation(),ei||ef();return}"Enter"===e.key&&!(e.target instanceof HTMLButtonElement)&&(e.preventDefault(),e.repeat||ei||es||eb())}},[ef,eN,ei,es,eW,eb]),eH=r(e=>{"Enter"!==e.key||e.shiftKey||e.nativeEvent.isComposing||(e.preventDefault(),eK())},[eK]),eX=r(e=>{e.target===e.currentTarget&&(e.preventDefault(),ey.current?.focus())},[]),eY=r(e=>{let t=[...e.target.files??[]];e.target.value="",_(t)},[_]),eG=r(e=>{let t=[...e.clipboardData.files].filter(e=>e.type.startsWith("image/"));0!==t.length&&(e.preventDefault(),_(t))},[_]),eJ=r(e=>{!er&&e.dataTransfer.types.includes("Files")&&(e.preventDefault(),e.dataTransfer.dropEffect="copy",ev(!0))},[er]),eQ=r(e=>{e.relatedTarget instanceof Node&&e.currentTarget.contains(e.relatedTarget)||ev(!1)},[]),eV=r(e=>{er||0===e.dataTransfer.files.length||(e.preventDefault(),ev(!1),_([...e.dataTransfer.files]))},[_,er]),eZ=i.root??I,e_=i.inputFrame??k,e1=i.attachments??K,e0=i.attachment??$,e2=i.removeAttachment??U,e5=i.annotateAttachment??W,e6=i.input??v,e7=i.toolButton??S,e4=i.sendButton??y,e8=i.micButton??J,e3=i.stopButton??q,e9=i.hint??X,te=i.attachmentNotice??Y;return t(eZ,{...u.root,ref:e$,onSubmit:eL,onKeyDown:eq,onDragOver:eJ,onDragLeave:eQ,onDrop:eV,children:[t(e_,{...u.inputFrame,"data-dragging":ek,onMouseDown:eX,children:[Z.length>0&&e(e1,{...u.attachments,children:Z.map(a=>t(e0,{...u.attachment,children:[e(O,{src:a.previewUrl,alt:""}),a.isAnnotation?e(g,{count:a.pinCount}):e(e5,{size:"small","aria-label":eC,...u.annotateAttachment,disabled:ei||er,onClick:()=>void et(a.id),children:e(p,{name:"PencilSimpleLine",sx:{fontSize:12}})}),e(e2,{size:"small","aria-label":a.isAnnotation?eR:eE,...u.removeAttachment,disabled:ei,onClick:()=>ea(a.id),children:e(p,{name:"X",sx:{fontSize:12}})})]},a.id))}),eN?e(x,{ref:eO,slot:i.recordingBar,slotProps:u.recordingBar,isRecording:"recording"===eh.status,elapsedMs:eh.elapsedMs,level:eh.level,disabled:ei,onDiscard:ef}):e(f,{children:e(e6,{multiline:!0,maxRows:6,placeholder:ex,...u.input,inputProps:{...u.input?.inputProps,"aria-label":ex},value:Q,readOnly:ei,disabled:er,inputRef:ey,onChange:e=>V(e.target.value),onKeyDown:eH,onPaste:eG,onFocus:ep.onFocus,onBlur:ep.onBlur})}),t(L,{children:[e(o,{title:ew,placement:"top",children:e("span",{children:e(e7,{size:"small","aria-label":ew,...u.toolButton,disabled:ei||er,onClick:()=>eS.current?.click(),children:e(p,{name:"Paperclip",fontSize:"small"})})})}),e(o,{title:eA,placement:"top",children:e("span",{children:e(e7,{size:"small","aria-label":eA,...u.toolButton,disabled:ei||er,onClick:()=>void ee(),children:e(p,{name:"PencilSimpleLine",fontSize:"small"})})})})]}),e(G,{ref:eS,type:"file",accept:"image/*",multiple:!0,onChange:eY}),el?e(o,{title:eD,placement:"top",children:e(e3,{size:"small","aria-label":eD,...u.stopButton,onClick:em,children:e(H,{})})}):eN?e(o,{title:eM,placement:"top",children:e("span",{children:e(e4,{size:"small","aria-label":eM,...u.sendButton,type:"submit",disabled:ei||es,children:e(p,{name:"PaperPlaneRightBold",fontSize:"small"})})})}):eu&&!Q.trim()?e(o,{title:ej,placement:"top",children:e("span",{children:e(e8,{size:"small","aria-label":ej,...u.micButton,"data-blocked":eI,disabled:ei||"requesting"===eh.status,onClick:()=>void eg(),children:e(p,{name:eI?"MicrophoneSlash":"Microphone",fontSize:"small"})})})}):e(o,{title:ez,placement:"top",children:e("span",{children:e(e4,{size:"small","aria-label":ez,...u.sendButton,type:"submit",disabled:!ed,children:e(p,{name:"PaperPlaneRightBold",fontSize:"small"})})})})]}),en?e(te,{role:"status",...u.attachmentNotice,children:"limit"===en?eT:eP}):eI?e(te,{role:"status",...u.attachmentNotice,children:eF}):e(e9,{...u.hint,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,46 @@
+import type { ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes } from 'react';
+import type { AssistantFormsVisibility } from './thread-items.js';
+declare const MuiComponentName: 'PhxAssistantMarkdown';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: 'root';
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantMarkdownProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
 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;
+}
+export interface ThemeableAssistantMarkdownProps {
+    /**
+     * The components used for each slot inside the assistant's text.
+     *
+     * - `root` — The block that holds the rendered Markdown (`div`).
+     */
+    readonly slots?: Partial<Record<'root', ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the block.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: HTMLAttributes<HTMLDivElement>;
+    }>;
 }
-/** Assistant text of the thread: Markdown with lists, tables, 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, forms
+ * and drawings, without a bubble. A form or drawing fence the model is still writing shows a placeholder.
+ */
+export declare const AssistantMarkdown: import("react").MemoExoticComponent<(inProps: AssistantMarkdownProps & ThemeableAssistantMarkdownProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

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

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

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

@@ -1,11 +1,56 @@
+import type { ComponentsOverrides } from '@mui/material';
+import type { ComponentType, ElementType, HTMLAttributes } from 'react';
+declare const MuiComponentName: 'PhxAssistantPanel';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: 'root';
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantPanelProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
 /**
  * The attribute the panel carries on its root. The layouts key their styles on it: what the panel
  * covers is hidden, and a sidebar shorter than its slot is stretched to the height the panel needs.
  */
 export declare const ASSISTANT_PANEL_SLOT = "slot[assistant]";
+export interface ThemeableAssistantPanelProps {
+    /**
+     * The components used for each slot inside the panel.
+     *
+     * - `root` — The panel's shell (`section`), which covers the sidebar it is rendered in.
+     * - `header` — The title and the close control. Takes no props; a replacement closes the panel with `useAssistantPanel`.
+     * - `thread` — The conversation. Takes no props; a replacement reads it with `useAssistantThread`.
+     * - `composer` — The message input. Takes no props; a replacement writes and sends with `useAssistantComposer`.
+     */
+    readonly slots?: Partial<{
+        readonly root: ElementType;
+        readonly header: ComponentType;
+        readonly thread: ComponentType;
+        readonly composer: ComponentType;
+    }>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the panel's shell.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: HTMLAttributes<HTMLElement>;
+    }>;
+}
 /**
  * The built-in assistant panel: a header with the title and a close control, the thread and the
  * composer. It covers the sidebar it is rendered in, and renders nothing while it is closed or when
  * the application spec has no `assistant` section.
+ *
+ * The shell stays the panel's whatever its slots are: it carries the attribute the layouts hide and
+ * stretch the sidebar by, and it keeps the input's focus on a press of a control.
  */
-export declare const AssistantPanel: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const AssistantPanel: (inProps: ThemeableAssistantPanelProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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 t,jsxs as e}from"react/jsx-runtime";import{styled as s,useThemeProps as r}from"@mui/material";import{useLocalizable as a}from"#package/react-sdk";import{AssistantComposer as o}from"./AssistantComposer.js";import{AssistantThread as n}from"./AssistantThread.js";import{AssistantPanelHeader as i}from"./panel/index.js";import{useIsAssistantPanelOpen as m}from"./use-is-assistant-panel-open.js";let l="PhxAssistantPanel",p={id:"sdk.assistant.panel.title",message:"Assistant"};export const ASSISTANT_PANEL_SLOT="slot[assistant]";let d=s("section",{name:l,slot:"root"})(({theme:{palette:t}})=>({background:`var(--phx-sidebar-background, ${t.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})),u=t=>{t.target instanceof Element&&t.target.closest('button, [role="button"]')&&t.preventDefault()};export const AssistantPanel=s=>{let{slots:c={},slotProps:b={}}=r({props:s,name:l}),f=m(),x=a(p);if(!f)return null;let g=c.root??d,h=c.header??i,A=c.thread??n,j=c.composer??o;return e(g,{"aria-label":x,...b.root,"data-sidebar":"slot[assistant]",onMouseDown:u,children:[t(h,{}),t(A,{}),t(j,{})]})};