@salsita-ai/sdk 0.50.0-develop.4599bc222f → 0.50.0-develop.4c59c65881

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,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.
+ * 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<({ 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 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 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 {};

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

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

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

@@ -0,0 +1,104 @@
+import type { ComponentsOverrides } from '@mui/material';
+import type { ComponentType, ElementType, HTMLAttributes } from 'react';
+import type { AssistantMessageAnnotation } from '@salsita-ai/contracts/assistant';
+import { type AssistantToolChipsProps } from './AssistantChips.js';
+import { type AssistantMarkdownProps } from './AssistantMarkdown.js';
+import type { AssistantThreadItem, AssistantUserVoice } from './thread-items.js';
+declare const UserMessageName: 'PhxAssistantUserMessage';
+declare const SeparatorName: 'PhxAssistantSeparator';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [UserMessageName]: 'root' | 'voice' | 'transcript';
+        [SeparatorName]: 'root';
+    }
+    interface ComponentsPropsList {
+        [UserMessageName]: ThemeableAssistantUserMessageProps;
+        [SeparatorName]: ThemeableAssistantSeparatorProps;
+    }
+    interface Components {
+        [UserMessageName]?: {
+            defaultProps?: ComponentsPropsList[typeof UserMessageName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof UserMessageName];
+        };
+        [SeparatorName]?: {
+            defaultProps?: ComponentsPropsList[typeof SeparatorName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof SeparatorName];
+        };
+    }
+}
+export interface AssistantUserMessageProps {
+    readonly text: string;
+    /** The images the user attached, by the ids the message references them by. */
+    readonly imageIds: readonly string[];
+    /** The annotations the user attached, shown after the images. */
+    readonly annotations: readonly AssistantMessageAnnotation[];
+    /** How the user spoke the message, when they did: a placeholder while its transcript is on its way, then a mark. */
+    readonly voice?: AssistantUserVoice | null | undefined;
+}
+export interface ThemeableAssistantUserMessageProps {
+    /**
+     * The components used for each slot inside the user's message.
+     *
+     * - `root` — The bubble (`div`).
+     */
+    readonly slots?: Partial<Record<'root', ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the bubble.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
+/**
+ * A message the user sent, as a bubble at the end of the thread, with its images and annotations above its text. A
+ * spoken message shows a placeholder until its transcript arrives, and then the transcript with a mic mark.
+ */
+export declare const AssistantUserMessage: (inProps: AssistantUserMessageProps & ThemeableAssistantUserMessageProps) => import("react/jsx-runtime").JSX.Element;
+export interface ThemeableAssistantSeparatorProps {
+    /**
+     * The components used for each slot inside the separator.
+     *
+     * - `root` — The line with its caption (`div`).
+     */
+    readonly slots?: Partial<Record<'root', ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the line.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
+/** The line that ends a closed thread of the conversation, which the assistant continued from a summary. */
+export declare const AssistantSeparator: (inProps: ThemeableAssistantSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The components the thread renders its items with, one per kind of item, each given that item's
+ * props. A kind left out is rendered with its built-in component.
+ */
+export interface AssistantThreadItemSlots {
+    readonly userMessage?: ComponentType<AssistantUserMessageProps>;
+    readonly assistantMessage?: ComponentType<AssistantMarkdownProps>;
+    readonly toolChips?: ComponentType<AssistantToolChipsProps>;
+    readonly separator?: ComponentType;
+}
+export interface AssistantThreadItemViewProps {
+    readonly item: AssistantThreadItem;
+    /** True while the reply runs and this item is the newest block of the thread. */
+    readonly isActive: boolean;
+    /** The tool call whose change a row of tool calls may undo; nothing while a reply runs. */
+    readonly undoableToolCallId: string | undefined;
+    readonly onUndo: (toolCallIds: ReadonlySet<string>) => void;
+    /** The components to render the items with in place of the built-in ones. */
+    readonly slots?: AssistantThreadItemSlots;
+}
+/**
+ * One item of `useAssistantThread`, rendered as the panel's thread renders it: a user message with
+ * `AssistantUserMessage`, assistant text with `AssistantMarkdown` and, after the text that ends a reply the panel
+ * can read aloud, its play button, a row of tool calls with
+ * `AssistantToolChips` and the end of a closed thread with `AssistantSeparator`.
+ */
+export declare const AssistantThreadItemView: ({ item, isActive, undoableToolCallId, onUndo, slots, }: AssistantThreadItemViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as s,Fragment as t}from"react/jsx-runtime";import{Trans as a}from"@lingui/react";import{CircularProgress as r,styled as i,useThemeProps as o}from"@mui/material";import{match as n}from"ts-pattern";import{useLocalizable as l}from"#package/react-sdk";import{PhxIcon as m}from"#package/ui-sdk";import{AssistantToolChips as p}from"./AssistantChips.js";import{AssistantMarkdown as d}from"./AssistantMarkdown.js";import{MessageAnnotations as c}from"./annotation/index.js";import{MessageImages as h}from"./attachments/index.js";import{ReplyPlayButton as g}from"./voice/index.js";let x="PhxAssistantUserMessage",f="PhxAssistantSeparator",k={id:"sdk.assistant.thread.spoken",message:"Spoken"},u=i("div",{name:x,slot:"root"})(({theme:{palette:e,spacing:s}})=>({alignSelf:"flex-end",background:`hsl(from ${e.primary.main} h s l / 12%)`,borderRadius:"14px 14px 4px 14px",display:"grid",gap:s(1),maxInlineSize:"85%",overflowWrap:"anywhere",paddingBlock:s(1),paddingInline:s(1.5),whiteSpace:"pre-wrap"})),S=i("span")(({theme:{spacing:e}})=>({alignItems:"flex-start",display:"flex",gap:e(.75)})),v=i("span",{name:x,slot:"transcript"})({fontStyle:"italic"}),w=i("span",{name:x,slot:"voice"})(({theme:{palette:e,spacing:s}})=>({alignItems:"center",blockSize:"1lh",color:e.text.secondary,display:"inline-flex",flexShrink:0,gap:s(.75)})),A=i("div",{name:f,slot:"root"})(({theme:{palette:e,spacing:s,typography:t}})=>({...t.caption,alignItems:"center",color:e.text.secondary,display:"flex",gap:s(1),"&::before, &::after":{borderBlockStart:`1px solid ${e.divider}`,content:'""',flex:1}}));export const AssistantUserMessage=t=>{let{text:i,imageIds:n,annotations:p,voice:d,slots:g={},slotProps:f={}}=o({props:t,name:x}),A=l(k);return s(g.root??u,{...f.root,children:[(n.length>0||p.length>0)&&e(h,{imageIds:n,children:e(c,{annotations:p})}),"transcribing"===d?s(w,{role:"status",children:[e(r,{size:12,color:"inherit"}),e(a,{id:"sdk.assistant.thread.voiceMessage",message:"Voice message"})]}):s(S,{children:["spoken"===d&&e(w,{role:"img","aria-label":A,children:e(m,{name:"Microphone",sx:{fontSize:14}})}),"spoken"===d?e(v,{children:i}):e("span",{children:i})]})]})};export const AssistantSeparator=s=>{let{slots:t={},slotProps:r={}}=o({props:s,name:f});return e(t.root??A,{role:"separator",...r.root,children:e(a,{id:"sdk.assistant.thread.earlierSummarized",message:"Earlier conversation summarized"})})};export const AssistantThreadItemView=({item:a,isActive:r,undoableToolCallId:i,onUndo:o,slots:l={}})=>{let m=l.userMessage??AssistantUserMessage,c=l.assistantMessage??d,h=l.toolChips??p,x=l.separator??AssistantSeparator;return n(a).with({kind:"user"},({text:s,imageIds:t,annotations:a,voice:r})=>e(m,{text:s,imageIds:t,annotations:a,voice:r})).with({kind:"text"},({markdown:a,isStreaming:r,forms:i,playableReplyId:o})=>s(t,{children:[e(c,{markdown:a,isStreaming:r,forms:i}),null!==o&&e(g,{messageId:o})]})).with({kind:"tools"},({tools:s})=>e(h,{tools:s,isActive:r,canUndo:s.some(({id:e})=>e===i),onUndo:o})).with({kind:"separator"},()=>e(x,{})).exhaustive()};

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

@@ -1,8 +1,45 @@
-import { type ReactNode } from 'react';
+import type { ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
 import type { AlertKind } from './remark-alerts.js';
+declare const MuiComponentName: 'PhxAssistantAlert';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: 'root';
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantAlertProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+/** The slots of a GitHub alert in a reply. Read from the theme only. */
+export interface ThemeableAssistantAlertProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The callout, marked with the colour and icon of its kind in `data-alert` (`div`).
+     */
+    readonly slots?: Partial<Record<'root', ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the callout.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
 export interface AssistantAlertProps {
     readonly kind: AlertKind;
     readonly children: ReactNode;
 }
-/** A GitHub alert in a reply: its content as Markdown, marked by the colour and icon of its kind. */
+/**
+ * A GitHub alert in a reply: its content as Markdown, marked by the colour and icon of its kind,
+ * and starting with the word for its kind, which only assistive technology reads.
+ */
 export declare const AssistantAlert: import("react").MemoExoticComponent<({ kind, children }: AssistantAlertProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

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

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

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

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