@salsita-ai/sdk 0.50.0-develop.d87b28256e → 0.50.0-develop.d9534cf412

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+interface MessageImagesProps {
+    /** The images the user attached to the message, by the ids it references them by. */
+    readonly imageIds: readonly string[];
+}
+/**
+ * The images a user attached to a message, as thumbnails above its text. They are read from the
+ * server as soon as the bubble shows, through the same per-configuration cache as the screenshots;
+ * a click shows one larger in a popover.
+ */
+export declare const MessageImages: ({ imageIds }: MessageImagesProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+/**
+ * The longest side, in pixels, of an image the user attaches: the provider fits every image within
+ * 2048 × 2048 before the model reads it, so more would only cost upload time and storage.
+ */
+export declare const ASSISTANT_IMAGE_MAX_SIDE = 2048;
+interface Size {
+    readonly width: number;
+    readonly height: number;
+}
+/** The size that fits within `max` × `max`, keeping the aspect ratio and never enlarging. */
+export declare const fitWithin: ({ width, height }: Size, max: number) => Size;
+/**
+ * Turns an image file the user attaches into what is uploaded: decoded, fitted within
+ * {@link ASSISTANT_IMAGE_MAX_SIDE} on each side and re-encoded as JPEG. Re-encoding drops the
+ * file's metadata, its location included, and fills a transparent background white. Rejects for a
+ * file the browser cannot decode.
+ */
+export declare const prepareImage: (file: Blob) => Promise<Blob>;
+export {};

package/dist/configurator/ui/assistant/attachments/prepare-image.js

@@ -0,0 +1 @@
+export const ASSISTANT_IMAGE_MAX_SIDE=2048;export const fitWithin=({width:e,height:t},a)=>{let r=Math.min(1,a/e,a/t);return{width:Math.max(1,Math.round(e*r)),height:Math.max(1,Math.round(t*r))}};let e=async e=>{let t=URL.createObjectURL(e),a=new Image;a.src=t;try{return await a.decode(),a}finally{URL.revokeObjectURL(t)}};export const prepareImage=async t=>{let a=await e(t),{width:r,height:n}=fitWithin({width:a.naturalWidth,height:a.naturalHeight},2048),o=document.createElement("canvas");o.width=r,o.height=n;let h=o.getContext("2d");if(!h)throw Error("The browser gave no 2D canvas to prepare the attached image on.");return h.fillStyle="#fff",h.fillRect(0,0,r,n),h.drawImage(a,0,0,r,n),new Promise((e,t)=>{o.toBlob(a=>a?e(a):t(Error("The browser could not encode the attached image as JPEG.")),"image/jpeg",.85)})};

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import type { FormElementDefinition } from './form-element-definition.js';
+import type { FormElementDefinition } from './registry/index.js';
 /**
  * An element of a parsed form. Options outside a `choice` or `choices` are already wrapped in an
  * implicit container, and the top level of the block is an implicit group without a label.
@@ -8,7 +8,6 @@ export interface FormNode {
     readonly id: string;
     readonly definition: FormElementDefinition;
     readonly label?: string;
-    readonly value?: string;
     readonly attributes: Readonly<Record<string, unknown>>;
     readonly children: readonly FormNode[];
 }
@@ -21,8 +20,8 @@ export interface FormBuildError {
     readonly message: string;
 }
 /**
- * A form fence as the panel renders it, or every reason it cannot. A quick form asks one question:
- * the first pick sends it, and it has no submit button.
+ * A form fence as the panel renders it, or every reason it cannot. A quick form asks one question,
+ * a choice or a quick input: the first pick or action sends it, and it has no submit button.
  */
 export type FormModel = {
     readonly ok: true;

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

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

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

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

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

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

package/dist/configurator/ui/assistant/form/parse-form-block.d.ts

@@ -1,9 +1,10 @@
 import type { FormModel } from './form-model.js';
-import type { FormRegistry } from './form-registry.js';
+import type { FormRegistry } from './registry/index.js';
 /**
  * Builds a form from the markup of a ```` ```form ```` fence. A block whose only content is loose
  * options asks one question, so they form an implicit `choice`; elsewhere loose options form an
- * implicit `choices`. A block with any unknown element, invalid attribute or misplaced element is
+ * implicit `choices`. A block that asks one question, a choice or a quick input, is quick. A block
+ * with any unknown element, invalid attribute, misplaced element or option with nothing to show is
  * not built at all, and every such error is returned.
  */
 export declare const parseFormBlock: (source: string, registry: FormRegistry) => FormModel;

package/dist/configurator/ui/assistant/form/parse-form-block.js

@@ -1 +1 @@
-import{Parser as e}from"htmlparser2";import{readFormAttributes as o}from"./read-form-attributes.js";let r=({name:e,attributes:o,position:r})=>({element:e,label:o.label,position:r}),t=({definition:e},o,r)=>({id:o,definition:e,attributes:{},children:r}),i=(e,o)=>{let r=[],i=[],n=()=>{i.length>0&&(r.push(t(o.registry.choices,`choices-${i[0]?.id}`,i)),i=[])};for(let o of e)"option"===o.definition.role?i.push(o):(n(),r.push(o));return n(),r},n=(e,t,l)=>e.flatMap(e=>((e,t,l)=>{var s;let a=l.registry.get(e.name);if(!a){l.errors.push({...r(e),message:"not a form element"}),n(e.children,void 0,l);return}let{definition:h}=a,p=(s=h.role,t?.role==="option"||t?.role==="input"?`cannot be inside <${t.name}>, which holds no elements`:(t?.role==="choice"||t?.role==="choices")&&"option"!==s?`cannot be inside <${t.name}>, which holds only options`:void 0);p&&l.errors.push({...r(e),message:p});let{attributes:c,errors:u}=o(a,e.attributes);for(let o of u)l.errors.push({...r(e),message:o});let{label:d,value:g,...m}=c,f=n(e.children,{name:e.name,role:h.role},l);return{id:String(e.position),definition:h,label:"string"==typeof d?d:void 0,value:"string"==typeof g?g:void 0,attributes:m,children:"group"===h.role?i(f,l):f}})(e,t,l)??[]),l=e=>{if("choice"===e.definition.role)return!0;let[o,...r]=e.children;return"group"===e.definition.role&&null!=o&&0===r.length&&l(o)};export const parseFormBlock=(o,r)=>{let s,a,h,p,c={registry:r,errors:[]},u={name:r.group.definition.name,role:"group"},d=n((a=[s=[]],h=0,(p=new e({onopentag:(e,o)=>{let r={name:e,attributes:o,position:h+=1,children:[]};a.at(-1)?.push(r),a.push(r.children)},onclosetag:()=>{a.length>1&&a.pop()}},{xmlMode:!0,lowerCaseTags:!0,lowerCaseAttributeNames:!0,recognizeSelfClosing:!0})).write(o),p.end(),s),u,c);if(c.errors.length>0)return{ok:!1,errors:c.errors};let g=d.length>0&&d.every(e=>"option"===e.definition.role)?[t(r.choice,"choice",d)]:i(d,c),m=t(r.group,"root",g);return{ok:!0,root:m,isQuick:l(m)}};
+import{Parser as e}from"htmlparser2";import{readFormAttributes as r}from"./read-form-attributes.js";let o=({name:e,attributes:r,position:o})=>({element:e,label:r.label,position:o}),t=({definition:e},r,o)=>({id:r,definition:e,attributes:{},children:o}),i=(e,r)=>{let o=[],i=[],n=()=>{i.length>0&&(o.push(t(r.registry.choices,`choices-${i[0]?.id}`,i)),i=[])};for(let r of e)"option"===r.definition.role?i.push(r):(n(),o.push(r));return n(),o},n=(e,t,l)=>e.flatMap(e=>((e,t,l)=>{var s;let a,h=l.registry.get(e.name);if(!h){l.errors.push({...o(e),message:"not a form element"}),n(e.children,void 0,l);return}let{definition:u}=h,p=(s=u.role,t?.role==="option"||t?.role==="input"?`cannot be inside <${t.name}>, which holds no elements`:(t?.role==="choice"||t?.role==="choices")&&"option"!==s?`cannot be inside <${t.name}>, which holds only options`:void 0);p&&l.errors.push({...o(e),message:p});let{attributes:c,errors:g}=r(h,e.attributes);for(let r of g)l.errors.push({...o(e),message:r});let{label:d,...m}=c;null!=u.identity&&["label",...u.identity].every(r=>{let o;return null==(o=e.attributes[r])||""===o})&&l.errors.push({...o(e),message:(a=u.identity,`has nothing to show: give it one of the attributes ${["label",...a].map(e=>`"${e}"`).join(", ")}`)});let f=n(e.children,{name:e.name,role:u.role},l);return{id:String(e.position),definition:u,label:"string"==typeof d?d:void 0,attributes:m,children:"group"===u.role?i(f,l):f}})(e,t,l)??[]),l=e=>{let{definition:r}=e;if("choice"===r.role||"input"===r.role&&!0===r.quick)return!0;let[o,...t]=e.children;return"group"===r.role&&null!=o&&0===t.length&&l(o)};export const parseFormBlock=(r,o)=>{let s,a,h,u,p={registry:o,errors:[]},c={name:o.group.definition.name,role:"group"},g=n((a=[s=[]],h=0,(u=new e({onopentag:(e,r)=>{let o={name:e,attributes:r,position:h+=1,children:[]};a.at(-1)?.push(o),a.push(o.children)},onclosetag:()=>{a.length>1&&a.pop()}},{xmlMode:!0,lowerCaseTags:!0,lowerCaseAttributeNames:!0,recognizeSelfClosing:!0})).write(r),u.end(),s),c,p);if(p.errors.length>0)return{ok:!1,errors:p.errors};let d=g.length>0&&g.every(e=>"option"===e.definition.role)?[t(o.choice,"choice",g)]:i(g,p),m=t(o.group,"root",d);return{ok:!0,root:m,isQuick:l(m)}};

package/dist/configurator/ui/assistant/form/read-form-attributes.d.ts

@@ -1,4 +1,4 @@
-import type { RegisteredFormElement } from './form-registry.js';
+import type { RegisteredFormElement } from './registry/index.js';
 /** The attributes of an element converted to their declared types, and what was wrong with them. */
 export interface FormAttributesReading {
     readonly attributes: Readonly<Record<string, unknown>>;

package/dist/configurator/ui/assistant/form/read-form-attributes.js

@@ -1 +1 @@
-import{match as t}from"ts-pattern";let e=t=>{if(""===t.trim())return;let e=Number(t);return Number.isFinite(e)?e:void 0},r=(r,{type:i})=>t(i).with("string",()=>r).with("number",()=>e(r)??r).with("integer",()=>{let t=e(r);return null!=t&&Number.isInteger(t)?t:r}).with("boolean",()=>""===r||"true"===r||"false"!==r&&r).exhaustive(),i={string:"a string",number:"a number",integer:"an integer",boolean:"true or false"},u=(t,{type:e,enum:r})=>r?`the attribute "${t}" must be one of ${r.map(t=>`"${t}"`).join(", ")}`:`the attribute "${t}" must be ${i[e]}`;export const readFormAttributes=({definition:t,attributes:e},i)=>{let n={},a=[];for(let[t,o]of Object.entries(i)){let i=e.get(t);if(!i){a.push(`the attribute "${t}" is not declared`);continue}let s=r(o,i.attribute);i.validate(s)?n[t]=s:a.push(u(t,i.attribute))}for(let e of t.required??[])e in i||a.push(`the attribute "${e}" is required`);return{attributes:n,errors:a}};
+import{match as t}from"ts-pattern";let e=t=>{if(""===t.trim())return;let e=Number(t);return Number.isFinite(e)?e:void 0},r=(r,{type:u})=>t(u).with("string",()=>r).with("number",()=>e(r)??r).with("integer",()=>{let t=e(r);return null!=t&&Number.isInteger(t)?t:r}).with("boolean",()=>""===r||"true"===r||"false"!==r&&r).exhaustive(),u={string:"a string",number:"a number",integer:"an integer",boolean:"true or false"},n=(t,e,r)=>null!=t&&null!=e?`between ${t} and ${e}${r}`:null!=t?`at least ${t}${r}`:`at most ${e}${r}`,i=(t,e,r)=>{let{type:i,enum:l,pattern:a,minimum:s,maximum:b,minLength:o,maxLength:$}=e;if(l)return`the attribute "${t}" must be one of ${l.map(t=>`"${t}"`).join(", ")}`;if("string"===i){if(null!=o||null!=$){let e="string"==typeof r?[...r].length:0;if(null!=o&&e<o||null!=$&&e>$)return`the attribute "${t}" must be ${n(o,$," characters long")}`}return null==a?`the attribute "${t}" must be ${u[i]}`:`the attribute "${t}" must match the pattern ${a}`}return"number"==typeof r&&(null!=s||null!=b)?`the attribute "${t}" must be ${u[i]} ${n(s,b,"")}`:`the attribute "${t}" must be ${u[i]}`};export const readFormAttributes=({definition:t,attributes:e},u)=>{let n={},l=[];for(let[t,a]of Object.entries(u)){let u=e.get(t);if(!u){l.push(`the attribute "${t}" is not declared`);continue}let s=r(a,u.attribute);u.validate(s)?n[t]=s:l.push(i(t,u.attribute,s))}for(let e of t.required??[])e in u||l.push(`the attribute "${e}" is required`);return{attributes:n,errors:l}};

package/dist/configurator/ui/assistant/form/registry/built-in-form-elements.d.ts

@@ -0,0 +1,3 @@
+import { type FormElementDefinition } from './form-element-definition.js';
+/** The elements of every assistant form: the built-ins the SDK prompt lists, with their components. */
+export declare const BUILT_IN_FORM_ELEMENTS: readonly FormElementDefinition[];

package/dist/configurator/ui/assistant/form/registry/built-in-form-elements.js

@@ -0,0 +1 @@
+import{ASSISTANT_BUILT_IN_FORM_ELEMENTS as e}from"#package/domain";import{FormCard as o,FormConfirm as m,FormGroup as r,FormNumber as t,FormOptions as i,FormReply as n,FormSwatch as c,FormText as p}from"../../form-elements/index.js";import{createFormElementDefinition as a}from"./form-element-definition.js";let f={group:r,choice:i,choices:i,reply:n,card:o,swatch:c,text:p,number:t,confirm:m};export const BUILT_IN_FORM_ELEMENTS=e.map(e=>a(e,f[e.name]));

package/dist/configurator/ui/assistant/form/registry/create-assistant-form-element.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import { type AssistantFormElementRegistration, type AssistantFormRole } from '#package/domain';
+import type { FormContainerProps, FormInputProps, FormOptionProps } from '../../form-elements/index.js';
+/**
+ * What a project's generated types say of one of its assistant form elements: its role and the
+ * attributes its component gets, typed from its declaration under `assistant.formElements`.
+ */
+export interface AssistantFormElementType {
+    readonly role: AssistantFormRole;
+    readonly attributes: object;
+}
+/**
+ * The props of the component of a project's form element, by its role: a container's, an option's
+ * or an input's, with the element's typed attributes. An input's `STATE` is its own and is inferred
+ * from the component.
+ */
+export type AssistantFormElementRoleProps<TYPE extends AssistantFormElementType, STATE = unknown> = TYPE extends {
+    readonly role: 'option';
+} ? FormOptionProps<TYPE['attributes']> : TYPE extends {
+    readonly role: 'input';
+} ? FormInputProps<STATE, TYPE['attributes']> : FormContainerProps<TYPE['attributes']>;
+/**
+ * Registers the component of one of the project's assistant form elements, under the name its YAML
+ * declares it by in `assistant.formElements`. The name picks the props the component gets.
+ */
+export type CreateAssistantFormElement<TYPES extends object> = <NAME extends keyof TYPES & string, STATE = unknown>(name: NAME, component: (props: TYPES[NAME] extends AssistantFormElementType ? AssistantFormElementRoleProps<TYPES[NAME], STATE> : never) => ReactNode) => AssistantFormElementRegistration;
+/**
+ * `createAssistantFormElement` typed by a project's form elements, for the generated code to put
+ * on `phx.frontend`.
+ */
+export declare const createAssistantFormElementFactory: <TYPES extends object>() => CreateAssistantFormElement<TYPES>;

package/dist/configurator/ui/assistant/form/registry/create-assistant-form-element.js

@@ -0,0 +1 @@
+import{createAssistantFormElement as t}from"#package/domain";export const createAssistantFormElementFactory=()=>t;

package/dist/configurator/ui/assistant/form/{form-element-definition.d.ts → registry/form-element-definition.d.ts}

@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react';
 import type { AssistantFormElementDescriptor } from '#package/domain';
-import type { FormContainerProps, FormInputProps, FormOptionProps } from '../form-elements/index.js';
+import type { FormContainerProps, FormInputProps, FormOptionProps } from '../../form-elements/index.js';
 /** An element a form can render: what the prompt knows of it, and the component that renders it for its role. */
 export type FormElementDefinition = (AssistantFormElementDescriptor & {
     readonly role: 'group' | 'choice' | 'choices';
@@ -12,3 +12,5 @@ export type FormElementDefinition = (AssistantFormElementDescriptor & {
     readonly role: 'input';
     readonly component: ComponentType<FormInputProps>;
 });
+/** Pairs an element's descriptor with the component written for it, a built-in's or the project's own. */
+export declare const createFormElementDefinition: (descriptor: AssistantFormElementDescriptor, component: ComponentType<never>) => FormElementDefinition;

package/dist/configurator/ui/assistant/form/registry/form-element-definition.js

@@ -0,0 +1 @@
+import{match as o}from"ts-pattern";export const createFormElementDefinition=(t,e)=>o(t.role).with("group","choice","choices",o=>({...t,role:o,component:e})).with("option",o=>({...t,role:o,component:e})).with("input",o=>({...t,role:o,component:e})).exhaustive();

package/dist/configurator/ui/assistant/form/{form-registry.d.ts → registry/form-registry.d.ts}

@@ -1,11 +1,11 @@
-import type { AssistantFormAttribute, PhxValidateFunction, SchemaValidator } from '#package/domain';
+import { type AssistantFormAttribute, type PhxValidateFunction, type SchemaValidator } from '#package/domain';
 import type { FormElementDefinition } from './form-element-definition.js';
 /** A declared attribute of a form element with the validator of its coerced value. */
 export interface RegisteredFormAttribute {
     readonly attribute: AssistantFormAttribute;
     readonly validate: PhxValidateFunction;
 }
-/** A form element with its declared attributes, the built-in `label` and `value` included. */
+/** A form element with its declared attributes, the built-in `label` included. */
 export interface RegisteredFormElement {
     readonly definition: FormElementDefinition;
     readonly attributes: ReadonlyMap<string, RegisteredFormAttribute>;

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

@@ -0,0 +1 @@
+import{ASSISTANT_FORM_NAME_PATTERN as e,isHtmlElementName as t}from"#package/domain";let r={type:"string"},n=e=>Object.entries({label:r,...e.attributes}),o=(e,t)=>{let r=e.get(t);if(r?.definition.role!==t)throw Error(`The form registry has no "${t}" element with the role "${t}". Forms wrap implicit content in it. Register the built-in "${t}".`);return r};export const createFormRegistry=(r,{schemaValidator:a})=>{let i=new Map;for(let o of r){if(!e.test(o.name)||t(o.name))throw Error(`The form element "${o.name}" cannot be registered: its name must be lowercase and must not be an HTML element name, so form markup is never read as HTML. Rename the element.`);if(i.has(o.name))throw Error(`The form element "${o.name}" is registered twice. Each tag names one element. Remove or rename one of them.`);let r=new Map(n(o).map(([e,t])=>[e,{attribute:t,validate:a.compile(t)}]));i.set(o.name,{definition:o,attributes:r})}return{group:o(i,"group"),choice:o(i,"choice"),choices:o(i,"choices"),get:e=>i.get(e)}};

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

@@ -0,0 +1,6 @@
+export { BUILT_IN_FORM_ELEMENTS } from './built-in-form-elements.js';
+export type { AssistantFormElementRoleProps, AssistantFormElementType, CreateAssistantFormElement, } from './create-assistant-form-element.js';
+export { createAssistantFormElementFactory } from './create-assistant-form-element.js';
+export { type FormElementDefinition, createFormElementDefinition } from './form-element-definition.js';
+export { type FormRegistry, type FormRegistryContext, type RegisteredFormAttribute, type RegisteredFormElement, createFormRegistry, } from './form-registry.js';
+export { useFormRegistry } from './use-form-registry.js';

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

@@ -0,0 +1 @@
+export{BUILT_IN_FORM_ELEMENTS}from"./built-in-form-elements.js";export{createAssistantFormElementFactory}from"./create-assistant-form-element.js";export{createFormElementDefinition}from"./form-element-definition.js";export{createFormRegistry}from"./form-registry.js";export{useFormRegistry}from"./use-form-registry.js";

package/dist/configurator/ui/assistant/form/registry/use-form-registry.d.ts

@@ -0,0 +1,8 @@
+import { type FormRegistry } from './form-registry.js';
+/**
+ * The registry the application's forms are read with. It is built when a form renders rather than
+ * when the bundle loads, since compiling validators then would break a configurator on a page whose
+ * CSP forbids eval, even one without an assistant; and rebuilt when the YAML or a component
+ * changes, so hot reload reaches the forms.
+ */
+export declare const useFormRegistry: () => FormRegistry;

package/dist/configurator/ui/assistant/form/registry/use-form-registry.js

@@ -0,0 +1 @@
+import{useMemo as r}from"react";import{extendedSchemaValidator as e}from"#package/domain";import{usePhoenixElementSlots as t,useSpecAssistant as m}from"#package/react-sdk";import{BUILT_IN_FORM_ELEMENTS as o}from"./built-in-form-elements.js";import{createFormElementDefinition as i}from"./form-element-definition.js";import{createFormRegistry as a}from"./form-registry.js";let f=[];export const useFormRegistry=()=>{let n=m()?.formElements??f,{assistantFormElements:s}=t();return r(()=>a([...o,...n.flatMap(r=>{let e=Object.entries(s).find(([e])=>e===r.name)?.[1];return e?[i(r,e)]:[]})],{schemaValidator:e}),[n,s])};

package/dist/configurator/ui/assistant/form-elements/FormCard.d.ts

@@ -0,0 +1,9 @@
+import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
+import type { FormOptionProps } from './form-element-props.js';
+type FormCardProps = FormOptionProps<AssistantBuiltInFormElementAttributes<'card'>>;
+/**
+ * A `card`: a tile with its picture on top, then its label and description, outlined and checked
+ * while it is picked. A picture that is not a resource path or fails to load is left out.
+ */
+export declare const FormCard: ({ attributes, label, disabled, selected, onSelect }: FormCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/configurator/ui/assistant/form-elements/FormCard.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{styled as i}from"@mui/material";import{useCallback as o,useState as t}from"react";import{PhxIcon as a}from"#package/ui-sdk";import{useResourceImageUrl as n}from"../resource-image/index.js";import{AssistantPanelName as d}from"../theme.js";let l=i("button",{name:d,slot:"formCard"})(({theme:{palette:e,shape:r,spacing:i}})=>({alignContent:"start",background:e.background.paper,border:`1px solid ${e.divider}`,borderRadius:r.borderRadius,color:e.text.primary,cursor:"pointer",display:"grid",flex:"1 1 140px",font:"inherit",gap:i(.25),margin:0,maxInlineSize:220,padding:i(.75),position:"relative",textAlign:"start","&:hover:not(:disabled)":{background:e.action.hover},"&:focus-visible":{outline:`2px solid ${e.primary.main}`,outlineOffset:1},"&:disabled":{color:e.text.disabled,cursor:"default"},'&[aria-pressed="true"]':{borderColor:e.primary.main,boxShadow:`inset 0 0 0 1px ${e.primary.main}`}})),s=i("img",{name:d,slot:"formCardImage"})(({theme:{shape:e,spacing:r}})=>({aspectRatio:"4 / 3",borderRadius:e.borderRadius,display:"block",inlineSize:"100%",marginBlockEnd:r(.5),objectFit:"contain"})),m=i("span",{name:d,slot:"formCardLabel"})(({theme:{typography:e}})=>({...e.body2,fontWeight:e.fontWeightMedium})),p=i("span",{name:d,slot:"formCardDescription"})(({theme:{palette:e,typography:r}})=>({...r.caption,color:e.text.secondary})),c=i("span",{name:d,slot:"formCardCheck"})(({theme:{palette:e,spacing:r}})=>({alignItems:"center",background:e.primary.main,borderRadius:"50%",color:e.primary.contrastText,display:"flex",fontSize:14,insetBlockStart:r(.5),insetInlineEnd:r(.5),justifyContent:"center",padding:2,position:"absolute"}));export const FormCard=({attributes:i,label:d,disabled:u,selected:b,onSelect:f})=>{let{value:g,image:h}=i,x=[d,g].find(Boolean),y=""===i.description?void 0:i.description,k=n()(h),[C,j]=t(),v=o(()=>{j(k)},[k]);return r(l,{type:"button","aria-label":null==x&&null==y?h:void 0,disabled:u,"aria-pressed":b,onClick:()=>f([g,d,y,h].find(Boolean)??""),children:[null!=k&&k!==C&&e(s,{src:k,alt:"",loading:"lazy",onError:v}),null!=x&&e(m,{children:x}),null!=y&&e(p,{children:y}),b&&e(c,{"aria-hidden":!0,children:e(a,{name:"Check",fontSize:"inherit"})})]})};

package/dist/configurator/ui/assistant/form-elements/FormConfirm.d.ts

@@ -0,0 +1,9 @@
+import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
+import type { FormInputProps } from './form-element-props.js';
+type FormConfirmProps = FormInputProps<boolean, AssistantBuiltInFormElementAttributes<'confirm'>>;
+/**
+ * A `confirm`: a yes or no question as ✓ and ✗ buttons. Its state is the pick, and it answers with
+ * the user's own words for yes and no, as the answer is their own message.
+ */
+export declare const FormConfirm: ({ label, disabled, state, onChange }: FormConfirmProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/configurator/ui/assistant/form-elements/FormConfirm.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{alpha as i,styled as a}from"@mui/material";import{useLocalizable as o}from"#package/react-sdk";import{PhxIcon as t}from"#package/ui-sdk";import{AssistantPanelName as n}from"../theme.js";let s={id:"sdk.assistant.form.confirm.yes",message:"Yes"},l={id:"sdk.assistant.form.confirm.no",message:"No"},d=a("div",{name:n,slot:"formConfirm"})(({theme:{palette:e,spacing:r,typography:i}})=>({...i.caption,color:e.text.secondary,display:"grid",gap:r(.75)})),m=a("div",{name:n,slot:"formConfirmButtons"})(({theme:{spacing:e}})=>({display:"flex",gap:e(.75)})),c=a("button",{name:n,slot:"formConfirmButton"})(({theme:{palette:e,spacing:r}})=>({alignItems:"center",background:e.background.paper,border:`1px solid ${e.divider}`,borderRadius:"calc(infinity * 1px)",color:e.text.primary,cursor:"pointer",display:"inline-flex",justifyContent:"center",margin:0,paddingBlock:r(.5),paddingInline:r(1.5),"&:hover:not(:disabled)":{background:e.action.hover},"&:focus-visible":{outline:`2px solid ${e.primary.main}`,outlineOffset:1},"&:disabled":{color:e.text.disabled,cursor:"default"},'&[aria-pressed="true"]':{background:i(e.primary.main,e.action.selectedOpacity),borderColor:e.primary.main}}));export const FormConfirm=({label:i,disabled:a,state:n,onChange:p})=>{let f=o(s),u=o(l);return r(d,{role:"group","aria-label":i,children:[null!=i&&e("span",{"aria-hidden":!0,children:i}),r(m,{children:[e(c,{type:"button","aria-label":f,title:f,disabled:a,"aria-pressed":!0===n,onClick:()=>p(!0,f),children:e(t,{name:"Check",fontSize:"small"})}),e(c,{type:"button","aria-label":u,title:u,disabled:a,"aria-pressed":!1===n,onClick:()=>p(!1,u),children:e(t,{name:"X",fontSize:"small"})})]})]})};

package/dist/configurator/ui/assistant/form-elements/FormGroup.d.ts

@@ -1,3 +1,6 @@
+import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
 import type { FormContainerProps } from './form-element-props.js';
+type FormGroupProps = FormContainerProps<AssistantBuiltInFormElementAttributes<'group'>>;
 /** A `group`: its children stacked under its label, which heads them. */
-export declare const FormGroup: ({ label, children }: FormContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormGroup: ({ label, children }: FormGroupProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/configurator/ui/assistant/form-elements/FormNumber.d.ts

@@ -0,0 +1,9 @@
+import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
+import type { FormInputProps } from './form-element-props.js';
+type FormNumberProps = FormInputProps<number, AssistantBuiltInFormElementAttributes<'number'>>;
+/**
+ * A `number`: a field with its unit, and a slider beside it when both `min` and `max` are given. It
+ * stays unanswered until the user enters a number, even while the slider rests at `min`.
+ */
+export declare const FormNumber: ({ attributes: { value, min, max, step, unit }, label, disabled, state, onChange, }: FormNumberProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/configurator/ui/assistant/form-elements/FormNumber.js

@@ -0,0 +1 @@
+import{jsx as r,jsxs as i}from"react/jsx-runtime";import{Trans as e}from"@lingui/react";import{styled as o}from"@mui/material";import{useCallback as t,useEffect as a}from"react";import{NumericalInput as m}from"#package/ui-sdk";import{AssistantPanelName as n}from"../theme.js";import{clampFormNumber as s}from"./clamp-form-number.js";let l=o("div",{name:n,slot:"formNumber"})(({theme:{palette:r,spacing:i,typography:e}})=>({alignSelf:"stretch",color:r.text.secondary,display:"grid",gap:i(.5),...e.caption})),d=(r,i)=>i?`${r} ${i}`:String(r),u=r=>""===r.trim()?null:Number(r);export const FormNumber=({attributes:{value:o,min:n,max:p,step:v,unit:c},label:f,disabled:g,state:b,onChange:h})=>{let x=void 0===o?void 0:s(o,{min:n,max:p}),j=b??x;a(()=>{void 0===b&&void 0!==x&&h(x,d(x,c))},[b,x,c,h]);let N=t(r=>h(r,d(r,c)),[h,c]),S=t(()=>{if(void 0===j)return;let r=s(j,{min:n,max:p});r!==j&&N(r)},[j,n,p,N]),k=t(r=>void 0===j?"":String(r),[j]);return i(l,{role:"group","aria-label":f,children:[null!=f&&r("span",{"aria-hidden":!0,children:f}),r(m,{value:j??n??0,min:n,max:p,unit:c,size:"small",disabled:g,withSlider:void 0!==n&&void 0!==p,sliderProps:void 0===v?void 0:{step:v},inputFieldProps:{parseValue:u,formatValue:k,invalidNumberErrorMessage:r(e,{id:"sdk.assistant.form.number.invalid",message:"Enter a number."})},onChange:N,onChanged:S})]})};

package/dist/configurator/ui/assistant/form-elements/FormOptions.d.ts

@@ -1,3 +1,6 @@
+import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
 import type { FormContainerProps } from './form-element-props.js';
+type FormOptionsProps = FormContainerProps<AssistantBuiltInFormElementAttributes<'choice' | 'choices'>>;
 /** A `choice` or `choices`: its options in a wrapping row under its label. */
-export declare const FormOptions: ({ label, children }: FormContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormOptions: ({ label, children }: FormOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/configurator/ui/assistant/form-elements/FormReply.d.ts

@@ -1,3 +1,6 @@
+import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
 import type { FormOptionProps } from './form-element-props.js';
+type FormReplyProps = FormOptionProps<AssistantBuiltInFormElementAttributes<'reply'>>;
 /** A `reply`: a short answer as a small pill, marked while it is picked. */
-export declare const FormReply: ({ label, disabled, selected, onSelect }: FormOptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormReply: ({ attributes, label, disabled, selected, onSelect }: FormReplyProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/configurator/ui/assistant/form-elements/FormReply.js

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{alpha as e,styled as i}from"@mui/material";import{AssistantPanelName as o}from"../theme.js";let t=i("button",{name:o,slot:"formReply"})(({theme:{palette:r,spacing:i,typography:o}})=>({...o.body2,background:r.background.paper,border:`1px solid ${r.divider}`,borderRadius:"calc(infinity * 1px)",color:r.text.primary,cursor:"pointer",margin:0,paddingBlock:i(.25),paddingInline:i(1.25),textAlign:"start","&:hover:not(:disabled)":{background:r.action.hover},"&:focus-visible":{outline:`2px solid ${r.primary.main}`,outlineOffset:1},"&:disabled":{color:r.text.disabled,cursor:"default"},'&[aria-pressed="true"]':{background:e(r.primary.main,r.action.selectedOpacity),borderColor:r.primary.main}}));export const FormReply=({label:e,disabled:i,selected:o,onSelect:a})=>r(t,{type:"button",disabled:i,"aria-pressed":o,onClick:a,children:e});
+import{jsx as r}from"react/jsx-runtime";import{alpha as e,styled as o}from"@mui/material";import{AssistantPanelName as i}from"../theme.js";let a=o("button",{name:i,slot:"formReply"})(({theme:{palette:r,spacing:o,typography:i}})=>({...i.body2,background:r.background.paper,border:`1px solid ${r.divider}`,borderRadius:"calc(infinity * 1px)",color:r.text.primary,cursor:"pointer",margin:0,paddingBlock:o(.25),paddingInline:o(1.25),textAlign:"start","&:hover:not(:disabled)":{background:r.action.hover},"&:focus-visible":{outline:`2px solid ${r.primary.main}`,outlineOffset:1},"&:disabled":{color:r.text.disabled,cursor:"default"},'&[aria-pressed="true"]':{background:e(r.primary.main,r.action.selectedOpacity),borderColor:r.primary.main}}));export const FormReply=({attributes:e,label:o,disabled:i,selected:t,onSelect:d})=>r(a,{type:"button",disabled:i,"aria-pressed":t,onClick:()=>d([e.value,o].find(Boolean)??""),children:o});

package/dist/configurator/ui/assistant/form-elements/FormSwatch.d.ts

@@ -0,0 +1,10 @@
+import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
+import type { FormOptionProps } from './form-element-props.js';
+type FormSwatchProps = FormOptionProps<AssistantBuiltInFormElementAttributes<'swatch'>>;
+/**
+ * A `swatch`: a small square filled with its color or covered by its picture, its label in a
+ * tooltip, ringed and checked while it is picked. A picture that is not a resource path or fails to
+ * load leaves the color, or a neutral tile.
+ */
+export declare const FormSwatch: ({ attributes, label, disabled, selected, onSelect }: FormSwatchProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/configurator/ui/assistant/form-elements/FormSwatch.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Tooltip as r,styled as o}from"@mui/material";import{useCallback as a,useState as t}from"react";import{PhxIcon as n}from"#package/ui-sdk";import{useResourceImageUrl as l}from"../resource-image/index.js";import{AssistantPanelName as s}from"../theme.js";let d=o("button",{name:s,slot:"formSwatch"})(({theme:{palette:e,shape:i}})=>({background:e.action.hover,blockSize:36,border:`1px solid ${e.divider}`,borderRadius:i.borderRadius,cursor:"pointer",flex:"none",inlineSize:36,margin:0,overflow:"hidden",padding:0,position:"relative","&:focus-visible":{outline:`2px solid ${e.primary.main}`,outlineOffset:3},"&:disabled":{cursor:"default",opacity:e.action.disabledOpacity},'&[aria-pressed="true"]':{boxShadow:`0 0 0 2px ${e.background.paper}, 0 0 0 4px ${e.primary.main}`}})),m=o("img",{name:s,slot:"formSwatchImage"})({blockSize:"100%",display:"block",inlineSize:"100%",objectFit:"cover"}),c=o("span",{name:s,slot:"formSwatchCheck"})(({theme:{palette:e}})=>({alignItems:"center",background:e.primary.main,borderRadius:"50%",color:e.primary.contrastText,display:"flex",fontSize:14,inset:"50% auto auto 50%",justifyContent:"center",padding:2,position:"absolute",transform:"translate(-50%, -50%)"})),p=o("span")({display:"inline-flex"});export const FormSwatch=({attributes:o,label:s,disabled:u,selected:f,onSelect:b})=>{let{value:h,color:x,image:g}=o,y=l()(g),[k,S]=t(),j=[s,h,x,g].find(Boolean),v=a(()=>{S(y)},[y]);return e(r,{title:j??"",placement:"top",children:e(p,{children:i(d,{type:"button","aria-label":j,disabled:u,"aria-pressed":f,onClick:()=>b([h,s,x,g].find(Boolean)??""),style:null==x?void 0:{background:x},children:[null!=y&&y!==k&&e(m,{src:y,alt:"",loading:"lazy",onError:v}),f&&e(c,{"aria-hidden":!0,children:e(n,{name:"Check",fontSize:"inherit"})})]})})})};

package/dist/configurator/ui/assistant/form-elements/FormText.d.ts

@@ -1,3 +1,6 @@
+import type { AssistantBuiltInFormElementAttributes } from '#package/domain';
 import type { FormInputProps } from './form-element-props.js';
+type FormTextProps = FormInputProps<string, AssistantBuiltInFormElementAttributes<'text'>>;
 /** A `text`: a single line the user types, with its label above it. */
-export declare const FormText: ({ attributes, label, value, disabled, state, onChange }: FormInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormText: ({ attributes: { value, placeholder }, label, disabled, state, onChange }: FormTextProps) => import("react/jsx-runtime").JSX.Element;
+export {};