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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,75 @@
+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. */
@@ -15,4 +86,15 @@ export interface AssistantToolChipsProps {
  * of the undo history the configuration is at, an Undo after the notes takes the row's changes
  * back, up to a change the user made in between.
  */
-export declare const AssistantToolChips: import("react").MemoExoticComponent<({ tools, isActive, canUndo, onUndo }: AssistantToolChipsProps) => import("react/jsx-runtime").JSX.Element>;
+export 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;
+}
+/**
+ * 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 AssistantActivityRow: ({ label }: AssistantActivityRowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{ButtonBase as o,ClickAwayListener as i,Tooltip as a,styled as s}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 g}from"./reference-link/index.js";import{ScreenshotThumbnails as f,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."},C={id:"sdk.assistant.tool.cancelled.hint",message:"Stopped before it finished."},v={id:"sdk.assistant.tool.noResult.hint",message:"The result of this step was lost. It may or may not have been done."},D={id:"sdk.assistant.tool.toolBudget.hint",message:"Not done: the assistant reached its limit of steps for one message."},I={id:"sdk.assistant.tool.undo.label",message:"Undo"},S={id:"sdk.assistant.tool.screenshots.label",message:"{count, plural, one {# screenshot} other {# screenshots}}"},j=s("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)"})),T=s("span",{name:x,slot:"activity"})(({theme:{typography:e}})=>({blockSize:`calc(${e.caption.lineHeight} * 1em)`,display:"grid",placeItems:"center"})),A=s(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"}}}),R=s("span",{name:x,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}})),z=s("span",{name:x,slot:"screenshotsLink"})(g),E=s(o,{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}}})),L=r(({tool:t})=>{let{chip:n,input:o,result:i}=t,s=h(y),r=h(b),d=h(w),c=h(C),m=h(v),u=h(D),g=p(n.label).with({kind:"text"},({text:e})=>e).with({kind:"updateDesign"},()=>s).with({kind:"readDesign"},()=>r).exhaustive(),f=l(()=>{console.info(`Assistant tool call "${g}"`,{input:o,result:i})},[o,g,i]);return e(a,{title:p(n).with({errorCode:"cancelled"},()=>c).with({errorCode:"no_result"},()=>m).with({errorCode:"tool_budget"},()=>u).with({state:"failed"},{state:"flawed"},()=>d).otherwise(()=>""),placement:"top-start",children:e(R,{onClick:f,"data-chip":n.state,children:g})})}),P=r(({screenshots:t})=>{let n=h({...S,values:{count:t.length}}),[o,s]=m(!1),r=l(()=>s(!0),[]),d=l(()=>s(!1),[]),p=c(null),u=l(e=>{p.current=e},[]),g=l(()=>{p.current?.update()},[]),k=l(e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),s(!0))},[]);return e(R,{"data-chip":"screenshots",children:e(i,{onClickAway:d,mouseEvent:!!o&&"onClick",touchEvent:!!o&&"onTouchEnd",children:e(a,{open:o,onOpen:r,onClose:d,title:e(f,{screenshots:t,onImageLoad:g}),placement:"top-start",describeChild:!0,disableTouchListener:!0,PopperProps:{popperRef:u},slotProps:{tooltip:{sx:{background:"none",maxInlineSize:"none",padding:0}}},children:e(z,{role:"button",tabIndex:0,"aria-expanded":o,onClick:r,onKeyDown:k,children:n})})})})}),B=({tool:o})=>{let i=d(()=>k(o.result),[o.result]);return t(n,{children:[e(L,{tool:o}),i.length>0&&e(P,{screenshots:i})]})};export const AssistantToolChips=r(({tools:n,isActive:o,canUndo:i,onUndo:a})=>{let s=h(I),r=l(()=>{a(new Set(n.map(({id:e})=>e)))},[a,n]);return t(j,{"data-chips":o?"active":"done","aria-busy":o,children:[e(T,{children:e(A,{name:"Gear"})}),t("div",{children:[n.map(t=>e(B,{tool:t},t.id)),i&&t(E,{onClick:r,children:[e(u,{name:"ArrowCounterClockwise",fontSize:"inherit"}),s]})]})]})});
+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,90 @@
+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 Input: 'input';
+    readonly ToolButton: 'toolButton';
+    readonly SendButton: 'sendButton';
+    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`).
+     * - `input` — The message input (`InputBase`).
+     * - `toolButton` — The Attach and Annotate controls (`IconButton`).
+     * - `sendButton` — The Send control (`IconButton`).
+     * - `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.
+     * - `input` — Props for the message input.
+     * - `toolButton` — Props for the Attach and Annotate controls.
+     * - `sendButton` — Props for the Send control.
+     * - `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.Input]: InputBaseProps;
+        readonly [Slots.ToolButton]: IconButtonProps;
+        readonly [Slots.SendButton]: IconButtonProps;
+        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.
  */
-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 i,styled as o,useThemeProps as r}from"@mui/material";import{useCallback as s,useRef as l,useState as d}from"react";import{useLocalizable as m}from"#package/react-sdk";import{PhxIcon as c,hoverStyles as p,useResponsive as u}from"#package/ui-sdk";import{AnnotationBadge as h}from"./annotation/index.js";import{AssistantComposerName as g,ComposerField as f,ComposerFrame as b,ComposerInput as k,ComposerPrimaryButton as v,ComposerToolButton as x}from"./composer/index.js";import{useAssistantComposer as y}from"./use-assistant-composer.js";let S={id:"sdk.assistant.composer.placeholder",message:"Ask or tell me what to change…"},z={id:"sdk.assistant.composer.send.label",message:"Send"},B={id:"sdk.assistant.composer.stop.label",message:"Stop"},C={id:"sdk.assistant.composer.attach.label",message:"Attach images"},D={id:"sdk.assistant.composer.annotate.label",message:"Annotate with drawings and comments"},w={id:"sdk.assistant.composer.attachment.remove",message:"Remove image"},A={id:"sdk.assistant.composer.annotation.remove",message:"Remove annotation"},R={id:"sdk.assistant.composer.attachment.unreadable",message:"Unsupported image format."},T={id:"sdk.assistant.composer.attachment.limit",message:"You can attach up to {max} images."},j=o("form",{name:g,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)})`})),P=o("div",{name:g,slot:"attachments"})(({theme:{spacing:e}})=>({display:"flex",flexWrap:"wrap",gap:e(1),gridColumn:"1 / -1",paddingBlockStart:e(.75)})),F=o("div")({cursor:"default",display:"flex",justifySelf:"start"}),E=o("div",{name:g,slot:"attachment"})(({theme:{palette:e,shape:t}})=>({blockSize:56,border:`1px solid ${e.divider}`,borderRadius:t.borderRadius,inlineSize:56,overflow:"hidden",position:"relative"})),N=o("img")({blockSize:"100%",display:"block",inlineSize:"100%",objectFit:"cover"}),I=o(n,{name:g,slot:"removeAttachment"})(({theme:{palette:e}})=>({background:e.background.paper,insetBlockStart:2,insetInlineEnd:2,padding:2,position:"absolute","&:hover":{background:e.background.paper}})),$=o(n,{name:g,slot:"stopButton"})(({theme:{palette:e}})=>({background:e.text.primary,borderRadius:8,color:e.background.paper,padding:4,"&:hover":{background:e.text.primary},...p({"&:hover":{background:e.text.secondary}})})),K=o("span")({background:"currentColor",blockSize:10,borderRadius:2,inlineSize:10,margin:5}),L=o("div",{name:g,slot:"hint"})(({theme:{palette:e,typography:t}})=>({...t.caption,color:e.text.secondary})),O=o("div",{name:g,slot:"attachmentNotice"})(({theme:{palette:e,typography:t}})=>({...t.caption,color:e.error.main})),U=o("input")({display:"none"});export const AssistantComposer=n=>{let{slots:o={},slotProps:p={}}=r({props:n,name:g}),{draft:W,setDraft:M,attachments:X,addFiles:Y,annotate:q,removeAttachment:G,notice:H,maxAttachments:J,isBusy:Q,isLocked:V,isReplying:Z,canSend:_,send:ee,stop:et,inputFocusHandlers:ea}=y(),[en,ei]=d(!1),eo=l(null),er=l(null),{isDesktop:es}=u(),el=m(S),ed=m(z),em=m(B),ec=m(C),ep=m(D),eu=m(w),eh=m(A),eg=m(R),ef=m({...T,values:{max:J}}),eb=s(async()=>{_&&!es&&eo.current?.blur(),await ee()},[_,es,ee]),ek=s(e=>{e.preventDefault(),eb()},[eb]),ev=s(e=>{"Enter"!==e.key||e.shiftKey||e.nativeEvent.isComposing||(e.preventDefault(),eb())},[eb]),ex=s(e=>{e.target===e.currentTarget&&(e.preventDefault(),eo.current?.focus())},[]),ey=s(e=>{let t=[...e.target.files??[]];e.target.value="",Y(t)},[Y]),eS=s(e=>{let t=[...e.clipboardData.files].filter(e=>e.type.startsWith("image/"));0!==t.length&&(e.preventDefault(),Y(t))},[Y]),ez=s(e=>{!V&&e.dataTransfer.types.includes("Files")&&(e.preventDefault(),e.dataTransfer.dropEffect="copy",ei(!0))},[V]),eB=s(e=>{e.relatedTarget instanceof Node&&e.currentTarget.contains(e.relatedTarget)||ei(!1)},[]),eC=s(e=>{V||0===e.dataTransfer.files.length||(e.preventDefault(),ei(!1),Y([...e.dataTransfer.files]))},[Y,V]),eD=o.root??j,ew=o.inputFrame??b,eA=o.attachments??P,eR=o.attachment??E,eT=o.removeAttachment??I,ej=o.input??k,eP=o.toolButton??x,eF=o.sendButton??v,eE=o.stopButton??$,eN=o.hint??L,eI=o.attachmentNotice??O;return t(eD,{...p.root,onSubmit:ek,onDragOver:ez,onDragLeave:eB,onDrop:eC,children:[t(ew,{...p.inputFrame,"data-dragging":en,onMouseDown:ex,children:[X.length>0&&e(eA,{...p.attachments,children:X.map(a=>t(eR,{...p.attachment,children:[e(N,{src:a.previewUrl,alt:""}),a.isAnnotation&&e(h,{count:a.pinCount}),e(eT,{size:"small","aria-label":a.isAnnotation?eh:eu,...p.removeAttachment,disabled:Q,onClick:()=>G(a.id),children:e(c,{name:"X",sx:{fontSize:12}})})]},a.id))}),e(f,{children:e(ej,{multiline:!0,maxRows:6,placeholder:el,...p.input,inputProps:{...p.input?.inputProps,"aria-label":el},value:W,readOnly:Q,disabled:V,inputRef:eo,onChange:e=>M(e.target.value),onKeyDown:ev,onPaste:eS,onFocus:ea.onFocus,onBlur:ea.onBlur})}),t(F,{children:[e(i,{title:ec,placement:"top",children:e("span",{children:e(eP,{size:"small","aria-label":ec,...p.toolButton,disabled:Q||V,onClick:()=>er.current?.click(),children:e(c,{name:"Paperclip",fontSize:"small"})})})}),e(i,{title:ep,placement:"top",children:e("span",{children:e(eP,{size:"small","aria-label":ep,...p.toolButton,disabled:Q||V,onClick:()=>void q(),children:e(c,{name:"PencilSimpleLine",fontSize:"small"})})})})]}),e(U,{ref:er,type:"file",accept:"image/*",multiple:!0,onChange:ey}),Z?e(i,{title:em,placement:"top",children:e(eE,{size:"small","aria-label":em,...p.stopButton,onClick:et,children:e(K,{})})}):e(i,{title:ed,placement:"top",children:e("span",{children:e(eF,{size:"small","aria-label":ed,...p.sendButton,type:"submit",disabled:!_,children:e(c,{name:"PaperPlaneRightBold",fontSize:"small"})})})})]}),H?e(eI,{role:"status",...p.attachmentNotice,children:"limit"===H?ef:eg}):e(eN,{...p.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,12 +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, 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>;
+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 e,Fragment as r}from"react/jsx-runtime";import{styled as n}from"@mui/material";import{createContext as i,memo as o,useContext as t,useMemo as l}from"react";import a,{defaultUrlTransform as d}from"react-markdown";import m from"remark-gfm";import{AssistantAlert as s,isAlertKind as c,remarkAlerts as u}from"./alert/index.js";import{AssistantEntityLink as p}from"./entity-link/index.js";import{AssistantForm as h}from"./form/index.js";import{AssistantReferenceLink as f,isAssistantLinkHref as g,parseAssistantLinkTarget as k}from"./reference-link/index.js";import{AssistantImage as b}from"./resource-image/index.js";import{completeStreamedMarkdown as v,hasOpenFence as x}from"./streamed-markdown.js";import{AssistantPanelName as y}from"./theme.js";let j=n("div",{name:y,slot:"assistantMessage"})(({theme:{palette:e,shape:r,spacing:n,typography:i}})=>({overflowWrap:"anywhere","& > :first-child":{marginBlockStart:0},"& > :last-child":{marginBlockEnd:0},"p, ul, ol, pre, blockquote":{marginBlock:n(1)},"h1, h2, h3, h4, h5, h6":{...i.subtitle2,marginBlock:n(1.5,.5)},"ul, ol":{paddingInlineStart:n(2.5)},a:{color:e.primary.main},code:{background:e.action.hover,borderRadius:r.borderRadius/2,fontFamily:"ui-monospace, Menlo, monospace",fontSize:"0.9em",paddingInline:n(.5)},pre:{background:e.action.hover,borderRadius:r.borderRadius,overflowX:"auto",padding:n(1),code:{background:"none",padding:0}},blockquote:{borderInlineStart:`2px solid ${e.divider}`,color:e.text.secondary,marginInline:0,paddingInlineStart:n(1.5)},"th, td":{borderBlockEnd:`1px solid ${e.divider}`,padding:n(.5,1),textAlign:"start",verticalAlign:"top"}})),w=n("div")({overflowX:"auto",table:{borderCollapse:"collapse",inlineSize:"100%"}}),S=i({forms:"hidden",openFenceEnd:void 0,isStreaming:!1}),A=({source:r,end:n})=>{let{forms:i,openFenceEnd:o,isStreaming:l}=t(S);return"hidden"===i?null:null!=n&&n===o?l?e(h,{source:r,status:"writing"}):null:e(h,{source:r,status:"disabled"===i?"waiting":"ready"})},B={a:({node:n,children:i,href:o,...t})=>{if(null==o||!g(o))return e("a",{...t,href:o,target:"_blank",rel:"noopener noreferrer",children:i});let l=k(o);return null==l?e(r,{children:i}):"entity"===l.kind?e(p,{id:l.id,children:i}):e(f,{target:l,children:i})},blockquote:({node:r,children:n,...i})=>{let o=r?.properties.dataAlert;return c(o)?e(s,{kind:o,children:n}):e("blockquote",{...i,children:n})},img:({src:r,alt:n})=>e(b,{src:r,alt:n}),pre:({node:r,children:n,...i})=>{let o=(e=>{let[r]=e?.children??[];if(r?.type!=="element"||"code"!==r.tagName)return;let{className:n}=r.properties;if(Array.isArray(n)&&n.includes("language-form"))return r.children.map(e=>"text"===e.type?e.value:"").join("")})(r);return null==o?e("pre",{...i,children:n}):e(A,{source:o,end:r?.position?.end.offset})},table:({node:r,children:n,...i})=>e(w,{children:e("table",{...i,children:n})})},I=[m,u],q=e=>g(e)?e:d(e);export const AssistantMarkdown=o(({markdown:r,isStreaming:n,forms:i})=>{let o=n?v(r):r,t=x(r)?o.length:void 0,d=l(()=>({forms:i,openFenceEnd:t,isStreaming:n}),[i,t,n]);return e(j,{children:e(S.Provider,{value:d,children:e(a,{components:B,remarkPlugins:I,urlTransform:q,children:o})})})});
+import{jsx as r,Fragment as e}from"react/jsx-runtime";import{styled as n,useThemeProps as o}from"@mui/material";import{createContext as t,memo as i,useContext as l,useMemo as a}from"react";import d,{defaultUrlTransform as s}from"react-markdown";import m from"remark-gfm";import{AssistantAlert as c,isAlertKind as u,remarkAlerts as p}from"./alert/index.js";import{AssistantEntityLink as f}from"./entity-link/index.js";import{AssistantForm as h}from"./form/index.js";import{AssistantReferenceLink as g,isAssistantLinkHref as k,parseAssistantLinkTarget as b}from"./reference-link/index.js";import{AssistantImage as v}from"./resource-image/index.js";import{completeStreamedMarkdown as x,hasOpenFence as y,isCutOffFence as w}from"./streamed-markdown.js";let j="PhxAssistantMarkdown",A=n("div",{name:j,slot:"root"})(({theme:{palette:r,shape:e,spacing:n,typography:o}})=>({overflowWrap:"anywhere","& > :first-child":{marginBlockStart:0},"& > :last-child":{marginBlockEnd:0},"p, ul, ol, pre, blockquote":{marginBlock:n(1)},"h1, h2, h3, h4, h5, h6":{...o.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"}})),S=n("div")({overflowX:"auto",table:{borderCollapse:"collapse",inlineSize:"100%"}}),B=t({forms:"hidden",text:"",openFenceEnd:void 0,isStreaming:!1}),I=({source:e,start:n,end:o})=>{let{forms:t,text:i,openFenceEnd:a,isStreaming:d}=l(B);return"hidden"===t?null:d&&null!=o&&o===a?r(h,{source:e,status:"writing"}):!d&&null!=n&&null!=o&&w(i,{start:n,end:o})?null:r(h,{source:e,status:"disabled"===t?"waiting":"ready"})},q={a:({node:n,children:o,href:t,...i})=>{if(null==t||!k(t))return r("a",{...i,href:t,target:"_blank",rel:"noopener noreferrer",children:o});let l=b(t);return null==l?r(e,{children:o}):"entity"===l.kind?r(f,{id:l.id,children:o}):r(g,{target:l,children:o})},blockquote:({node:e,children:n,...o})=>{let t=e?.properties.dataAlert;return u(t)?r(c,{kind:t,children:n}):r("blockquote",{...o,children:n})},img:({src:e,alt:n})=>r(v,{src:e,alt:n}),pre:({node:e,children:n,...o})=>{let t=(r=>{let[e]=r?.children??[];if(e?.type!=="element"||"code"!==e.tagName)return;let{className:n}=e.properties;if(Array.isArray(n)&&n.includes("language-form"))return e.children.map(r=>"text"===r.type?r.value:"").join("")})(e);return null==t?r("pre",{...o,children:n}):r(I,{source:t,start:e?.position?.start.offset,end:e?.position?.end.offset})},table:({node:e,children:n,...o})=>r(S,{children:r("table",{...o,children:n})})},R=[m,p],E=r=>k(r)?r:s(r);export const AssistantMarkdown=i(e=>{let{markdown:n,isStreaming:t,forms:i,slots:l={},slotProps:s={}}=o({props:e,name:j}),m=t?x(n):n,c=t&&y(n)?m.length:void 0,u=a(()=>({forms:i,text:m,openFenceEnd:c,isStreaming:t}),[i,m,c,t]);return r(l.root??A,{...s.root,children:r(B.Provider,{value:u,children:r(d,{components:q,remarkPlugins:R,urlTransform:E,children:m})})})});

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

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

@@ -1,10 +1,86 @@
+import type { ButtonProps, ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+import { type AssistantThreadItemSlots } from './AssistantThreadItemView.js';
+declare const MuiComponentName: 'PhxAssistantThread';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: AssistantThreadSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantThreadProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Messages: 'messages';
+    readonly Greeting: 'greeting';
+    readonly Status: 'status';
+    readonly OlderStatus: 'olderStatus';
+    readonly EarlierButton: 'earlierButton';
+    readonly Notice: 'notice';
+    readonly NewReplyButton: 'newReplyButton';
+};
+type AssistantThreadSlots = ValueOf<typeof Slots>;
+export interface ThemeableAssistantThreadProps {
+    /**
+     * The components used for each slot inside the thread.
+     *
+     * Element slots:
+     * - `root` — The thread (`div`).
+     * - `messages` — The scrolling log of the conversation (`div`).
+     * - `greeting` — The greeting of an empty thread (`div`).
+     * - `status` — A line on what the thread is doing, such as loading (`div`).
+     * - `olderStatus` — The line over the top of the thread while earlier messages load; it also takes the styles of `status` (`div`).
+     * - `earlierButton` — The control that loads an earlier conversation (`Button`).
+     * - `notice` — The failure notice with its way out (`div`).
+     * - `newReplyButton` — The control that scrolls to a reply the user has not seen (`Button`).
+     *
+     * Component slots, one per kind of item of `useAssistantThread`, each given that item's props:
+     * - `userMessage` — A message the user sent; defaults to `AssistantUserMessage`.
+     * - `assistantMessage` — Assistant text; defaults to `AssistantMarkdown`.
+     * - `toolChips` — A row of tool calls; defaults to `AssistantToolChips`.
+     * - `separator` — The end of a closed thread; takes no props; defaults to `AssistantSeparator`.
+     */
+    readonly slots?: Partial<Record<AssistantThreadSlots, ElementType> & AssistantThreadItemSlots>;
+    /**
+     * Props applied to each element slot.
+     *
+     * - `root` — Props for the thread.
+     * - `messages` — Props for the scrolling log.
+     * - `greeting` — Props for the greeting.
+     * - `status` — Props for each status line.
+     * - `olderStatus` — Props for the line over the top of the thread.
+     * - `earlierButton` — Props for the earlier-conversation control.
+     * - `notice` — Props for the failure notice.
+     * - `newReplyButton` — Props for the new-reply control.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Messages]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Greeting]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Status]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.OlderStatus]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.EarlierButton]: ButtonProps;
+        readonly [Slots.Notice]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.NewReplyButton]: ButtonProps;
+    }>;
+}
 /**
  * The conversation: user bubbles, assistant Markdown, tool chips, and what the panel
  * has to say itself, which is a line while the thread loads, a greeting for an empty thread, a
  * "Thinking…" line and a failure with its way out. It follows a streaming reply until the user scrolls up.
  *
- * A conversation the assistant continued from a summary is painted whole: the threads that were
- * closed come first, each ended by a separator, and the ones still on the server are loaded one at a
- * time from a control above them.
+ * A conversation is painted whole as the user scrolls up: the thread shows its newest messages first
+ * and loads older pages when its top comes into view. A conversation the assistant continued from a
+ * summary has closed threads before it, each ended by a separator; once the current thread is painted
+ * whole, the ones still on the server are loaded one at a time from a control above them.
  */
-export declare const AssistantThread: () => import("react/jsx-runtime").JSX.Element;
+export declare const AssistantThread: (inProps: ThemeableAssistantThreadProps) => import("react/jsx-runtime").JSX.Element;
+export {};