@salsita-ai/sdk 0.50.0-develop.b5468d6828 → 0.50.0-develop.b5d443db78

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

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

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

@@ -3,5 +3,9 @@
  * 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;

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 a}from"react/jsx-runtime";import{Trans as t}from"@lingui/react";import{IconButton as i,Tooltip as n,styled as r}from"@mui/material";import{useCallback as s,useRef as o,useState as l}from"react";import{useLocalizable as d}from"#package/react-sdk";import{PhxIcon as m,hoverStyles as c,useResponsive as p}from"#package/ui-sdk";import{AnnotationBadge as u}from"./annotation/index.js";import{ComposerField as g,ComposerFrame as h,ComposerInput as f,ComposerPrimaryButton as b,ComposerToolButton as k}from"./composer/index.js";import{AssistantPanelName as v}from"./theme.js";import{useAssistantComposer as x}from"./use-assistant-composer.js";let y={id:"sdk.assistant.composer.placeholder",message:"Ask or tell me what to change…"},S={id:"sdk.assistant.composer.send.label",message:"Send"},z={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"},j={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."},A=r("form",{name:v,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)})`})),B=r("div",{name:v,slot:"attachments"})(({theme:{spacing:e}})=>({display:"flex",flexWrap:"wrap",gap:e(1),gridColumn:"1 / -1",paddingBlockStart:e(.75)})),P=r("div")({cursor:"default",display:"flex",justifySelf:"start"}),E=r("div",{name:v,slot:"attachment"})(({theme:{palette:e,shape:a}})=>({blockSize:56,border:`1px solid ${e.divider}`,borderRadius:a.borderRadius,inlineSize:56,overflow:"hidden",position:"relative"})),F=r("img")({blockSize:"100%",display:"block",inlineSize:"100%",objectFit:"cover"}),I=r(i,{name:v,slot:"removeAttachment"})(({theme:{palette:e}})=>({background:e.background.paper,insetBlockStart:2,insetInlineEnd:2,padding:2,position:"absolute","&:hover":{background:e.background.paper}})),$=r(i,{name:v,slot:"stopButton"})(({theme:{palette:e}})=>({background:e.text.primary,borderRadius:8,color:e.background.paper,padding:4,"&:hover":{background:e.text.primary},...c({"&:hover":{background:e.text.secondary}})})),K=r("span")({background:"currentColor",blockSize:10,borderRadius:2,inlineSize:10,margin:5}),L=r("div",{name:v,slot:"hint"})(({theme:{palette:e,typography:a}})=>({...a.caption,color:e.text.secondary})),N=r("div",{name:v,slot:"attachmentNotice"})(({theme:{palette:e,typography:a}})=>({...a.caption,color:e.error.main})),O=r("input")({display:"none"});export const AssistantComposer=()=>{let{draft:i,setDraft:r,attachments:c,addFiles:v,canAnnotate:U,annotate:W,removeAttachment:M,notice:X,maxAttachments:Y,isBusy:q,isLocked:G,isReplying:H,canSend:J,send:Q,stop:V,inputFocusHandlers:Z}=x(),[_,ee]=l(!1),ea=o(null),et=o(null),{isDesktop:ei}=p(),en=d(y),er=d(S),es=d(z),eo=d(C),el=d(D),ed=d(w),em=d(j),ec=d(R),ep=d({...T,values:{max:Y}}),eu=s(async()=>{J&&!ei&&ea.current?.blur(),await Q()},[J,ei,Q]),eg=s(e=>{e.preventDefault(),eu()},[eu]),eh=s(e=>{"Enter"!==e.key||e.shiftKey||e.nativeEvent.isComposing||(e.preventDefault(),eu())},[eu]),ef=s(e=>{e.target===e.currentTarget&&(e.preventDefault(),ea.current?.focus())},[]),eb=s(e=>{let a=[...e.target.files??[]];e.target.value="",v(a)},[v]),ek=s(e=>{let a=[...e.clipboardData.files].filter(e=>e.type.startsWith("image/"));0!==a.length&&(e.preventDefault(),v(a))},[v]);return a(A,{onSubmit:eg,onDragOver:s(e=>{!G&&e.dataTransfer.types.includes("Files")&&(e.preventDefault(),e.dataTransfer.dropEffect="copy",ee(!0))},[G]),onDragLeave:s(e=>{e.relatedTarget instanceof Node&&e.currentTarget.contains(e.relatedTarget)||ee(!1)},[]),onDrop:s(e=>{G||0===e.dataTransfer.files.length||(e.preventDefault(),ee(!1),v([...e.dataTransfer.files]))},[v,G]),children:[a(h,{"data-dragging":_,onMouseDown:ef,children:[c.length>0&&e(B,{children:c.map(t=>a(E,{children:[e(F,{src:t.previewUrl,alt:""}),t.isAnnotation&&e(u,{count:t.pinCount}),e(I,{size:"small","aria-label":t.isAnnotation?em:ed,disabled:q,onClick:()=>M(t.id),children:e(m,{name:"X",sx:{fontSize:12}})})]},t.id))}),e(g,{children:e(f,{multiline:!0,maxRows:6,placeholder:en,value:i,readOnly:q,disabled:G,inputRef:ea,onChange:e=>r(e.target.value),onKeyDown:eh,onPaste:ek,onFocus:Z.onFocus,onBlur:Z.onBlur,inputProps:{"aria-label":en}})}),a(P,{children:[e(n,{title:eo,placement:"top",children:e("span",{children:e(k,{size:"small","aria-label":eo,disabled:q||G,onClick:()=>et.current?.click(),children:e(m,{name:"Paperclip",fontSize:"small"})})})}),U&&e(n,{title:el,placement:"top",children:e("span",{children:e(k,{size:"small","aria-label":el,disabled:q||G,onClick:()=>void W(),children:e(m,{name:"PencilSimpleLine",fontSize:"small"})})})})]}),e(O,{ref:et,type:"file",accept:"image/*",multiple:!0,onChange:eb}),H?e(n,{title:es,placement:"top",children:e($,{size:"small","aria-label":es,onClick:V,children:e(K,{})})}):e(n,{title:er,placement:"top",children:e("span",{children:e(b,{type:"submit",size:"small","aria-label":er,disabled:!J,children:e(m,{name:"PaperPlaneRightBold",fontSize:"small"})})})})]}),X?e(N,{role:"status",children:"limit"===X?ep:ec}):e(L,{children:e(t,{id:"sdk.assistant.composer.disclaimer",message:"AI can be wrong. Check the result."})})]})};

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,27 @@
+import type { AssistantMessageAnnotation } from '@salsita-ai/contracts/assistant';
+import type { AssistantThreadItem } from './thread-items.js';
+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[];
+}
+/** A message the user sent, as a bubble at the end of the thread, with its images and annotations above its text. */
+export declare const AssistantUserMessage: ({ text, imageIds, annotations }: AssistantUserMessageProps) => import("react/jsx-runtime").JSX.Element;
+/** The line that ends a closed thread of the conversation, which the assistant continued from a summary. */
+export declare const AssistantSeparator: () => import("react/jsx-runtime").JSX.Element;
+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;
+}
+/**
+ * One item of `useAssistantThread`, rendered as the panel's thread renders it: a user message with
+ * `AssistantUserMessage`, assistant text with `AssistantMarkdown`, a row of tool calls with
+ * `AssistantToolChips` and the end of a closed thread with `AssistantSeparator`.
+ */
+export declare const AssistantThreadItemView: ({ item, isActive, undoableToolCallId, onUndo }: AssistantThreadItemViewProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Trans as s}from"@lingui/react";import{styled as r}from"@mui/material";import{match as a}from"ts-pattern";import{AssistantToolChips as i}from"./AssistantChips.js";import{AssistantMarkdown as o}from"./AssistantMarkdown.js";import{MessageAnnotations as n}from"./annotation/index.js";import{MessageImages as m}from"./attachments/index.js";import{AssistantPanelName as d}from"./theme.js";let p=r("div",{name:d,slot:"userMessage"})(({theme:{palette:e,spacing:t}})=>({alignSelf:"flex-end",background:`hsl(from ${e.primary.main} h s l / 12%)`,borderRadius:"14px 14px 4px 14px",display:"grid",gap:t(1),maxInlineSize:"85%",overflowWrap:"anywhere",paddingBlock:t(1),paddingInline:t(1.5),whiteSpace:"pre-wrap"})),l=r("div",{name:d,slot:"separator"})(({theme:{palette:e,spacing:t,typography:s}})=>({...s.caption,alignItems:"center",color:e.text.secondary,display:"flex",gap:t(1),"&::before, &::after":{borderBlockStart:`1px solid ${e.divider}`,content:'""',flex:1}}));export const AssistantUserMessage=({text:s,imageIds:r,annotations:a})=>t(p,{children:[(r.length>0||a.length>0)&&e(m,{imageIds:r,children:e(n,{annotations:a})}),s]});export const AssistantSeparator=()=>e(l,{role:"separator",children:e(s,{id:"sdk.assistant.thread.earlierSummarized",message:"Earlier conversation summarized"})});export const AssistantThreadItemView=({item:t,isActive:s,undoableToolCallId:r,onUndo:n})=>a(t).with({kind:"user"},({text:t,imageIds:s,annotations:r})=>e(AssistantUserMessage,{text:t,imageIds:s,annotations:r})).with({kind:"text"},({markdown:t,isStreaming:s,forms:r})=>e(o,{markdown:t,isStreaming:s,forms:r})).with({kind:"tools"},({tools:t})=>e(i,{tools:t,isActive:s,canUndo:t.some(({id:e})=>e===r),onUndo:n})).with({kind:"separator"},()=>e(AssistantSeparator,{})).exhaustive();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,26 @@
+/** The red of marker strokes and pin badges. */
+export declare const ANNOTATION_COLOR = "#e53935";
+/** CSS px on screen; the flattened image scales it with the view. */
+export declare const ANNOTATION_STROKE_WIDTH = 4;
+/** CSS px on screen; the diameter of a pin's numbered badge. */
+export declare const ANNOTATION_PIN_SIZE = 26;
+/** ms; how long the overlay takes to fade in and out. */
+export declare const ANNOTATION_FADE_DURATION = 200;
+export declare const AnnotationRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const AnnotationStage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/** The box of the view: everything on it is placed by fractions of it. */
+export declare const AnnotationSurface: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/** The size of a surface for a view of `width` × `height`: as large as fits the stage, keeping its aspect ratio. */
+export declare const annotationSurfaceSize: (width: number, height: number) => {
+    aspectRatio: string;
+    inlineSize: string;
+};
+export declare const AnnotationPicture: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, {}>;
+export declare const AnnotationToolbar: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * A pin on the surface, centred on its point: in the editor the numbered badge itself, the same as the
+ * flattened image shows; over a sent annotation a clear target over the badge drawn in the image.
+ */
+export declare const AnnotationPinButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent.js").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}, "LinkComponent" | "TouchRippleProps" | "action" | "centerRipple" | "children" | "className" | "classes" | "disableRipple" | "disableTouchRipple" | "disabled" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "style" | "sx" | "tabIndex" | "touchRippleRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

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

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

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

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

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

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

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

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

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

package/dist/configurator/ui/assistant/annotation/editor/annotation-drawing.d.ts

@@ -0,0 +1,22 @@
+/** A point on the annotated view, as fractions 0–1 of its width and height from its top left corner. */
+export interface AnnotationPoint {
+    readonly x: number;
+    readonly y: number;
+}
+/** A marker stroke, as the points the pointer passed through. */
+export type AnnotationStroke = ReadonlyArray<AnnotationPoint>;
+interface Size {
+    readonly width: number;
+    readonly height: number;
+}
+/** Draws the strokes onto a 2D context of `size`, `lineWidth` in that context's pixels. */
+export declare const drawAnnotationStrokes: (context: CanvasRenderingContext2D, strokes: ReadonlyArray<AnnotationStroke>, { width, height }: Size, lineWidth: number) => void;
+/**
+ * Draws the numbered badge of a pin centred on `center`, `size` across in the context's pixels: the
+ * same red disc with a white ring and a white number as the editor shows over the view.
+ */
+export declare const drawAnnotationPinBadge: (context: CanvasRenderingContext2D, number: number, center: {
+    readonly x: number;
+    readonly y: number;
+}, size: number) => void;
+export {};

package/dist/configurator/ui/assistant/annotation/editor/annotation-drawing.js

@@ -0,0 +1 @@
+import{ANNOTATION_COLOR as t}from"../annotation-layout.js";export const drawAnnotationStrokes=(e,n,{width:o,height:i},l)=>{for(let f of(e.strokeStyle=t,e.fillStyle=t,e.lineWidth=l,e.lineCap="round",e.lineJoin="round",n)){let[t,...n]=f;if(void 0!==t){if(0===n.length){e.beginPath(),e.arc(t.x*o,t.y*i,l/2,0,2*Math.PI),e.fill();continue}for(let l of(e.beginPath(),e.moveTo(t.x*o,t.y*i),n))e.lineTo(l.x*o,l.y*i);e.stroke()}}};export const drawAnnotationPinBadge=(e,n,o,i)=>{e.beginPath(),e.arc(o.x,o.y,i/2,0,2*Math.PI),e.fillStyle=t,e.fill(),e.lineWidth=i/13,e.strokeStyle="#fff",e.stroke(),e.fillStyle="#fff",e.font=`bold ${Math.round(.5*i)}px system-ui, sans-serif`,e.textAlign="center",e.textBaseline="middle",e.fillText(String(n),o.x,o.y)};

package/dist/configurator/ui/assistant/annotation/editor/annotation-pins.d.ts

@@ -0,0 +1,22 @@
+import type { AssistantAnnotationPin } from '@salsita-ai/contracts/assistant';
+import type { AnnotationPoint } from './annotation-drawing.js';
+/**
+ * The pins of an annotation being edited. A pin's number is its position, from 1, so deleting one
+ * renumbers the pins after it.
+ */
+export type AnnotationPins = ReadonlyArray<AssistantAnnotationPin>;
+/** A pin placed at `point`, with no comment yet. */
+export declare const createAnnotationPin: ({ x, y }: AnnotationPoint) => AssistantAnnotationPin;
+export declare const replaceAnnotationPin: (pins: AnnotationPins, pin: AssistantAnnotationPin, replacement: AssistantAnnotationPin) => AnnotationPins;
+export declare const deleteAnnotationPin: (pins: AnnotationPins, pin: AssistantAnnotationPin) => AnnotationPins;
+/** The pins once the comment of `pin` closes: no pin is left without a comment, so a pin with none goes. */
+export declare const closeAnnotationPin: (pins: AnnotationPins, pin: AssistantAnnotationPin) => AnnotationPins;
+/** The pins an annotation keeps once it is done: those with a comment, renumbered, their comments trimmed. */
+export declare const keptAnnotationPins: (pins: AnnotationPins) => AnnotationPins;
+/** Where a point of the page is on a box, as fractions of it, kept within it. */
+export declare const annotationPointIn: (box: {
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+    readonly height: number;
+}, clientX: number, clientY: number) => AnnotationPoint;

package/dist/configurator/ui/assistant/annotation/editor/annotation-pins.js

@@ -0,0 +1 @@
+export const createAnnotationPin=({x:t,y:n})=>({x:t,y:n,comment:""});export const replaceAnnotationPin=(t,n,o)=>t.map(t=>t===n?o:t);export const deleteAnnotationPin=(t,n)=>t.filter(t=>t!==n);export const closeAnnotationPin=(t,n)=>n.comment.trim()?t:deleteAnnotationPin(t,n);export const keptAnnotationPins=t=>t.flatMap(t=>{let n=t.comment.trim();return n?[{...t,comment:n}]:[]});let t=t=>Math.min(1,Math.max(0,t));export const annotationPointIn=(n,o,e)=>({x:t((o-n.left)/n.width),y:t((e-n.top)/n.height)});

package/dist/configurator/ui/assistant/annotation/editor/flatten-annotation.d.ts

@@ -0,0 +1,17 @@
+import type { AssistantAnnotationPin } from '@salsita-ai/contracts/assistant';
+import { type AnnotationStroke } from './annotation-drawing.js';
+interface FlattenAnnotationProps {
+    /** The frozen view, at the canvas's resolution. */
+    readonly view: HTMLCanvasElement;
+    readonly strokes: ReadonlyArray<AnnotationStroke>;
+    readonly pins: ReadonlyArray<AssistantAnnotationPin>;
+    /** Pixels of the view per CSS pixel it was shown at, so strokes and badges keep the size the user saw. */
+    readonly scale: number;
+}
+/**
+ * Flattens the view, the strokes and the numbered pin badges into one JPEG fitted within
+ * {@link ASSISTANT_IMAGE_MAX_SIDE}, like an image the user attaches. They are drawn at the view's
+ * resolution before it is fitted, so a high-DPR view keeps them as sharp as the rest.
+ */
+export declare const flattenAnnotation: ({ view, strokes, pins, scale }: FlattenAnnotationProps) => Promise<Blob>;
+export {};

package/dist/configurator/ui/assistant/annotation/editor/flatten-annotation.js

@@ -0,0 +1 @@
+import{ASSISTANT_IMAGE_MAX_SIDE as t,encodeAssistantImage as n,fitWithin as o}from"../../attachments/index.js";import{ANNOTATION_PIN_SIZE as e,ANNOTATION_STROKE_WIDTH as a}from"../annotation-layout.js";import{drawAnnotationPinBadge as h,drawAnnotationStrokes as i}from"./annotation-drawing.js";export const flattenAnnotation=async({view:r,strokes:d,pins:m,scale:g})=>{let s=document.createElement("canvas"),w={width:r.width,height:r.height};s.width=w.width,s.height=w.height;let c=s.getContext("2d");if(!c)throw Error("The browser gave no 2D canvas to flatten the annotation on.");return c.drawImage(r,0,0),i(c,d,w,a*g),m.forEach(({x:t,y:n},o)=>{h(c,o+1,{x:t*w.width,y:n*w.height},e*g)}),n(s,o(w,t))};

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

@@ -0,0 +1 @@
+export { AnnotationEditor } from './AnnotationEditor.js';

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

@@ -0,0 +1 @@
+export{AnnotationEditor}from"./AnnotationEditor.js";

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

@@ -0,0 +1,4 @@
+export { AnnotationBadge } from './AnnotationBadge.js';
+export { AnnotationOverlay } from './AnnotationOverlay.js';
+export { MessageAnnotations } from './MessageAnnotations.js';
+export { AnnotationHostContext } from './annotation-host-context.js';

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

@@ -0,0 +1 @@
+export{AnnotationBadge}from"./AnnotationBadge.js";export{AnnotationOverlay}from"./AnnotationOverlay.js";export{MessageAnnotations}from"./MessageAnnotations.js";export{AnnotationHostContext}from"./annotation-host-context.js";

package/dist/configurator/ui/assistant/annotation/prefers-reduced-motion.d.ts

@@ -0,0 +1,2 @@
+/** True when the user asked the system for less motion: the overlay then appears and goes at once. */
+export declare const prefersReducedMotion: () => boolean;

package/dist/configurator/ui/assistant/annotation/prefers-reduced-motion.js

@@ -0,0 +1 @@
+export const prefersReducedMotion=()=>globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches===!0;

package/dist/configurator/ui/assistant/annotation/use-end-on-unmount.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Runs `end` once the component is gone for good, so an overlay that is removed without being closed
+ * still ends. StrictMode unmounts and mounts a component again at once in development, so the end
+ * waits a task and is dropped when the component mounted again meanwhile.
+ */
+export declare const useEndOnUnmount: (end: () => void) => void;