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

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

@@ -0,0 +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 }: FormGroupProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{styled as o}from"@mui/material";import{AssistantPanelName as m}from"../theme.js";let t=o("div",{name:m,slot:"formGroup"})(({theme:{spacing:r}})=>({display:"flex",flexDirection:"column",gap:r(1.5)})),i=o("div",{name:m,slot:"formGroupLabel"})(({theme:{palette:r,typography:e}})=>({...e.subtitle2,color:r.text.primary}));export const FormGroup=({label:o,children:m})=>e(t,{role:"group","aria-label":o,children:[null!=o&&r(i,{"aria-hidden":!0,children:o}),m]});

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 a}from"@mui/material";import{useCallback as o,useEffect as t}from"react";import{NumericalInput as m}from"#package/ui-sdk";import{AssistantPanelName as l}from"../theme.js";import{clampFormNumber as n}from"./clamp-form-number.js";let s=a("div",{name:l,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:a,min:l,max:p,step:g,unit:v},label:b,disabled:c,state:f,onChange:h})=>{let x=void 0===a?void 0:n(a,{min:l,max:p}),j=f??x;t(()=>{void 0===f&&void 0!==x&&h(x,d(x,v))},[f,x,v,h]);let N=o(r=>h(r,d(r,v)),[h,v]),S=o(()=>{if(void 0===j)return;let r=n(j,{min:l,max:p});r!==j&&N(r)},[j,l,p,N]),k=o(r=>void 0===j?"":String(r),[j]),y=o(()=>b??"",[b]);return i(s,{role:"group","aria-label":b,children:[null!=b&&r("span",{"aria-hidden":!0,children:b}),r(m,{value:j??l??0,min:l,max:p,unit:v,size:"small",disabled:c,withSlider:void 0!==l&&void 0!==p,sliderProps:{step:g,getAriaLabel:null==b?void 0:y},inputFieldProps:{"aria-label":b,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

@@ -0,0 +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 }: FormOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{styled as r}from"@mui/material";import{AssistantPanelName as i}from"../theme.js";let t=r("div",{name:i,slot:"formOptions"})(({theme:{spacing:e}})=>({display:"grid",gap:e(.75)})),a=r("div",{name:i,slot:"formOptionsLabel"})(({theme:{palette:e,typography:o}})=>({...o.caption,color:e.text.secondary})),m=r("div",{name:i,slot:"formOptionsRow"})(({theme:{spacing:e}})=>({display:"flex",flexWrap:"wrap",gap:e(.75)}));export const FormOptions=({label:r,children:i})=>o(t,{role:"group","aria-label":r,children:[null!=r&&e(a,{"aria-hidden":!0,children:r}),e(m,{children:i})]});

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

@@ -0,0 +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: ({ attributes, label, disabled, selected, onSelect }: FormReplyProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+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

@@ -0,0 +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: { value, placeholder }, label, disabled, state, onChange }: FormTextProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{InputBase as t,styled as o}from"@mui/material";import{useCallback as i,useEffect as a}from"react";import{AssistantPanelName as d}from"../theme.js";let m=o("label",{name:d,slot:"formText"})(({theme:{palette:e,spacing:r,typography:t}})=>({alignSelf:"stretch",color:e.text.secondary,display:"grid",gap:r(.5),...t.caption})),l=e=>""===e.trim()?void 0:e.trim(),n=o(t,{name:d,slot:"formTextInput"})(({theme:{palette:e,spacing:r,typography:t}})=>({...t.body2,border:`1px solid ${e.divider}`,borderRadius:12,color:e.text.primary,paddingBlock:r(.75),paddingInline:r(1.5),"&.Mui-focused":{borderColor:e.primary.main},"& .MuiInputBase-input":{padding:0}}));export const FormText=({attributes:{value:t,placeholder:o},label:d,disabled:s,state:p,onChange:c})=>(a(()=>{void 0===p&&void 0!==t&&""!==t&&c(t,l(t))},[p,t,c]),r(m,{children:[d,e(n,{value:p??t??"",placeholder:o,disabled:s,onChange:i(e=>{let r=e.target.value;c(r,l(r))},[c])})]}));

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

@@ -0,0 +1,10 @@
+/** The limits a `number` keeps its value within, from its attributes. */
+export interface FormNumberLimits {
+    readonly min?: number;
+    readonly max?: number;
+}
+/**
+ * The value a `number` settles on once the user leaves the field: within `min` and `max`. The
+ * `step` is left out: it moves the slider, and a typed value between steps stays as typed.
+ */
+export declare const clampFormNumber: (value: number, { min, max }: FormNumberLimits) => number;

package/dist/configurator/ui/assistant/form-elements/clamp-form-number.js

@@ -0,0 +1 @@
+export const clampFormNumber=(m,{min:a,max:t})=>Math.min(t??1/0,Math.max(a??-1/0,m));

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

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+/** Validated and coerced attributes of an element, without the built-in `label`: what any element gets. */
+export type FormElementAttributes = Readonly<Record<string, unknown>>;
+/** Props of a `group`, `choice` or `choices` element: it lays out the children the form renders for it. */
+export interface FormContainerProps<ATTRIBUTES = FormElementAttributes> {
+    readonly attributes: ATTRIBUTES;
+    readonly label?: string;
+    readonly disabled: boolean;
+    readonly children: ReactNode;
+}
+/**
+ * Props of an option. It reports what it answers with when the user picks it, as an input reports
+ * its answer: by convention its `value` attribute, or else its label. Its container decides what a
+ * pick does: in a `choice` it replaces the previous pick, in a `choices` it toggles, and in a form
+ * that asks one question it sends at once. An empty answer counts as unanswered.
+ */
+export interface FormOptionProps<ATTRIBUTES = FormElementAttributes> {
+    readonly attributes: ATTRIBUTES;
+    readonly label?: string;
+    readonly disabled: boolean;
+    readonly selected: boolean;
+    onSelect(answer: string): void;
+}
+/**
+ * Props of an input. Its state is its own: the form stores what it reports and hands it back.
+ * `answer` is the text the answer shows for it, or `undefined` while there is none. An input that
+ * starts with a `value` attribute reports its starting answer when it mounts, since an input that
+ * never reports is unanswered and only the input knows how its value reads in the answer, such as
+ * a number with its unit. A quick input, which a lone form sends on its first report, reports only
+ * what the user did.
+ */
+export interface FormInputProps<STATE = unknown, ATTRIBUTES = FormElementAttributes> {
+    readonly attributes: ATTRIBUTES;
+    readonly label?: string;
+    readonly disabled: boolean;
+    readonly state: STATE | undefined;
+    onChange(state: STATE, answer: string | undefined): void;
+}

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

@@ -0,0 +1,9 @@
+export type { FormContainerProps, FormElementAttributes, FormInputProps, FormOptionProps, } from './form-element-props.js';
+export { FormCard } from './FormCard.js';
+export { FormConfirm } from './FormConfirm.js';
+export { FormGroup } from './FormGroup.js';
+export { FormOptions } from './FormOptions.js';
+export { FormNumber } from './FormNumber.js';
+export { FormReply } from './FormReply.js';
+export { FormSwatch } from './FormSwatch.js';
+export { FormText } from './FormText.js';

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

@@ -0,0 +1 @@
+export{FormCard}from"./FormCard.js";export{FormConfirm}from"./FormConfirm.js";export{FormGroup}from"./FormGroup.js";export{FormOptions}from"./FormOptions.js";export{FormNumber}from"./FormNumber.js";export{FormReply}from"./FormReply.js";export{FormSwatch}from"./FormSwatch.js";export{FormText}from"./FormText.js";

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

@@ -1,2 +1,15 @@
 export { AssistantPanel, ASSISTANT_PANEL_SLOT } from './AssistantPanel.js';
+export { AnnotationHostContext, AnnotationOverlay } from './annotation/index.js';
 export { useIsAssistantPanelOpen } from './use-is-assistant-panel-open.js';
+export type { AssistantFormElementRoleProps, AssistantFormElementType, CreateAssistantFormElement, } from './form/index.js';
+export { createAssistantFormElementFactory } from './form/index.js';
+export type { FormContainerProps, FormInputProps, FormOptionProps } from './form-elements/index.js';
+export { useAssistantThread, type UseAssistantThread, type UseAssistantThreadResult } from './use-assistant-thread.js';
+export { useAssistantComposer, type AssistantComposerAttachment, type AssistantComposerNotice, type UseAssistantComposer, type UseAssistantComposerResult, } from './use-assistant-composer.js';
+export { AssistantSeparator, AssistantThreadItemView, type AssistantThreadItemViewProps, AssistantUserMessage, type AssistantUserMessageProps, } from './AssistantThreadItemView.js';
+export { AssistantMarkdown, type AssistantMarkdownProps } from './AssistantMarkdown.js';
+export { AssistantToolChips, type AssistantToolChipsProps } from './AssistantChips.js';
+export { EntityLinkSelectionProvider, type EntityLinkSelectionProviderProps, type EntityLinkSelection, useCreateEntityLinkSelection, } from './entity-link/index.js';
+export type { AssistantFailure, AssistantFailureKind } from './assistant-failure.js';
+export type { AssistantFormsVisibility, AssistantThreadItem, AssistantToolItem } from './thread-items.js';
+export type { AssistantToolChip, AssistantToolChipLabel, AssistantToolChipState } from './tool-chip.js';

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

@@ -1 +1 @@
-export{AssistantPanel,ASSISTANT_PANEL_SLOT}from"./AssistantPanel.js";export{useIsAssistantPanelOpen}from"./use-is-assistant-panel-open.js";
+export{AssistantPanel,ASSISTANT_PANEL_SLOT}from"./AssistantPanel.js";export{AnnotationHostContext,AnnotationOverlay}from"./annotation/index.js";export{useIsAssistantPanelOpen}from"./use-is-assistant-panel-open.js";export{createAssistantFormElementFactory}from"./form/index.js";export{useAssistantThread}from"./use-assistant-thread.js";export{useAssistantComposer}from"./use-assistant-composer.js";export{AssistantSeparator,AssistantThreadItemView,AssistantUserMessage}from"./AssistantThreadItemView.js";export{AssistantMarkdown}from"./AssistantMarkdown.js";export{AssistantToolChips}from"./AssistantChips.js";export{EntityLinkSelectionProvider,useCreateEntityLinkSelection}from"./entity-link/index.js";

package/dist/configurator/ui/assistant/popover/AssistantPopover.d.ts

@@ -0,0 +1,24 @@
+import { type KeyboardEvent, type ReactElement, type ReactNode } from 'react';
+/** What makes the element that opens a popover a button to the keyboard and to assistive technology. */
+export interface AssistantPopoverTriggerProps {
+    readonly role: 'button';
+    readonly tabIndex: 0;
+    readonly 'aria-expanded': boolean;
+    readonly onClick: () => void;
+    readonly onKeyDown: (event: KeyboardEvent) => void;
+}
+export interface AssistantPopoverProps {
+    /**
+     * What the popover shows; the tooltip mounts it only while the popover is open. `rePlace` places
+     * the popover again after its content changed size, as when a picture in it has loaded.
+     */
+    readonly title: (rePlace: () => void) => ReactNode;
+    /** The element that opens the popover, given the props that make it do so. */
+    readonly children: (trigger: AssistantPopoverTriggerProps) => ReactElement;
+}
+/**
+ * A popover over something in the thread, such as a reference in a reply or the screenshots of a
+ * tool call: hovering, focusing or tapping its element opens it; leaving it, tapping outside or
+ * Escape closes it. It describes its element, whose label stays its own.
+ */
+export declare const AssistantPopover: ({ title, children }: AssistantPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/configurator/ui/assistant/popover/AssistantPopover.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{ClickAwayListener as n,Tooltip as o}from"@mui/material";import{useCallback as t,useRef as r,useState as i}from"react";export const AssistantPopover=({title:p,children:a})=>{let[l,s]=i(!1),c=t(()=>s(!0),[]),u=t(()=>s(!1),[]),d=r(null),m=t(e=>{d.current=e},[]),x=t(()=>{d.current?.update()},[]),h=t(e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),s(!0))},[]);return e(n,{onClickAway:u,mouseEvent:!!l&&"onClick",touchEvent:!!l&&"onTouchEnd",children:e(o,{open:l,onOpen:c,onClose:u,title:p(x),placement:"top-start",describeChild:!0,disableTouchListener:!0,PopperProps:{popperRef:m},slotProps:{tooltip:{sx:{background:"none",maxInlineSize:"none",padding:0}}},children:a({role:"button",tabIndex:0,"aria-expanded":l,onClick:c,onKeyDown:h})})})};

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

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

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

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

package/dist/configurator/ui/assistant/reference-link/AssistantReferenceLink.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+import type { AssistantReferenceTarget } from './assistant-link-target.js';
+export interface AssistantReferenceLinkProps {
+    readonly target: AssistantReferenceTarget;
+    /** The text the assistant gave the link; the target itself is never shown. */
+    readonly children: ReactNode;
+}
+declare const ReferenceLinkView: ({ target, children }: AssistantReferenceLinkProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A recipe or an option the assistant named in a reply, shown as its label. Hovering, focusing or
+ * tapping it opens a popover with its picture or color, name and description, read from the
+ * current state at that moment; leaving it, tapping outside or Escape closes it. A click does
+ * nothing else.
+ */
+export declare const AssistantReferenceLink: import("react").MemoExoticComponent<typeof ReferenceLinkView>;
+export {};

package/dist/configurator/ui/assistant/reference-link/AssistantReferenceLink.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Trans as a}from"@lingui/react";import{styled as i}from"@mui/material";import{memo as t,useCallback as n,useEffect as o,useState as l}from"react";import{isShallowEqual as s}from"@salsita-ai/common/utils";import{useResourceUrl as d}from"#package/react-sdk";import{AssistantPopover as m}from"../popover/index.js";import{AssistantPanelName as c}from"../theme.js";import{assistantReferenceStyles as f}from"./reference-styles.js";import{useAssistantReferenceDetails as p}from"./use-assistant-reference-details.js";let u=i("span",{name:c,slot:"referenceLink"})(f),h=i("span",{name:c,slot:"referenceDetails"})(({theme:{palette:e,shape:r,shadows:a,spacing:i,typography:t}})=>({...t.body2,background:e.background.paper,borderRadius:r.borderRadius,boxShadow:a[4],color:e.text.primary,display:"flex",gap:i(1.5),maxInlineSize:320,padding:i(1.5),'&[data-reference-details="unavailable"]':{color:e.text.secondary}})),b=i("img")(({theme:{shape:e}})=>({alignSelf:"flex-start",blockSize:"auto",borderRadius:e.borderRadius/2,flexShrink:0,inlineSize:64,maxBlockSize:96,objectFit:"contain"})),x=i("span")(({theme:{palette:e,shape:r}})=>({blockSize:32,borderRadius:r.borderRadius/2,boxShadow:`inset 0 0 0 1px ${e.divider}`,flexShrink:0,inlineSize:32})),g=i("span")(({theme:{palette:e,spacing:r}})=>({display:"flex",flexDirection:"column",gap:r(.5),minInlineSize:0,"& > :first-of-type":{fontWeight:600},"& > :not(:first-of-type)":{color:e.text.secondary}})),k=({target:i,onResolve:t,onImageLoad:n})=>{let l=p(i),{getResourceUrl:s}=d(),m=null!=l;if(o(()=>{t(m)},[m,t]),!l)return e(h,{"data-reference-details":"unavailable",children:e(a,{id:"sdk.assistant.reference.unavailable.message",message:"Not available right now"})});let{name:c,description:f,imageUrl:u,color:k}=l;return r(h,{children:[null!=u&&e(b,{src:s(u),alt:"",onLoad:n}),null==u&&null!=k&&e(x,{style:{background:k}}),r(g,{children:[e("span",{children:c}),null!=f&&e("span",{children:f})]})]})};export const AssistantReferenceLink=t(({target:r,children:a})=>{let[i,t]=l(!1),o=n(e=>t(!e),[]);return e(m,{title:a=>e(k,{target:r,onResolve:o,onImageLoad:a}),children:r=>e(u,{...r,"data-reference":i?"muted":void 0,children:a})})},(e,r)=>e.children===r.children&&s(e.target,r.target));

package/dist/configurator/ui/assistant/reference-link/assistant-link-target.d.ts

@@ -0,0 +1,34 @@
+import { type DomainEntityId } from '#package/domain';
+/** A recipe of a recipe group on an entity, as the assistant read it under `meta`: `recipe:<entityId>/<groupId>/<key>`. */
+export interface AssistantRecipeTarget {
+    readonly kind: 'recipe';
+    readonly entityId: DomainEntityId<string>;
+    readonly groupId: string;
+    readonly key: string;
+}
+/**
+ * A choice of a writable field on an entity, as the assistant read it under `meta`:
+ * `option:<entityId>/<edgeName>/<value>`. The edge is the options field the assistant queried, such
+ * as `finishOptions`, and the value is the option's value in its string form.
+ */
+export interface AssistantOptionTarget {
+    readonly kind: 'option';
+    readonly entityId: DomainEntityId<string>;
+    readonly edgeName: string;
+    readonly value: string;
+}
+/** What a reference points at: something the configurator offers, shown by its details rather than selected. */
+export type AssistantReferenceTarget = AssistantRecipeTarget | AssistantOptionTarget;
+/** Where a link the assistant wrote in a reply points: an entity of the configuration, or a reference. */
+export type AssistantLinkTarget = {
+    readonly kind: 'entity';
+    readonly id: DomainEntityId<string>;
+} | AssistantReferenceTarget;
+/** True for the target of a link the assistant wrote with one of its schemes, whatever follows the scheme. */
+export declare const isAssistantLinkHref: (href: string) => boolean;
+/**
+ * What a link the assistant wrote points at, or `null` when what follows its scheme is not a
+ * well-formed target. An entity link holds the id as it is; the parts of a reference are decoded,
+ * so a key the model encoded as in a URL and one Markdown encoded from angle brackets read the same.
+ */
+export declare const parseAssistantLinkTarget: (href: string) => AssistantLinkTarget | null;

package/dist/configurator/ui/assistant/reference-link/assistant-link-target.js

@@ -0,0 +1 @@
+import{DomainEntityIdSchema as t}from"#package/domain";let e="entity:",n="recipe:",i="option:",l=[e,n,i],r=new RegExp(t.pattern),s=t=>{try{let e=decodeURIComponent(t);return""===e?null:e}catch{return null}},u=t=>{let e=t.split("/").map(s);if(3!==e.length)return null;let[n,i,l]=e;return null!=n&&r.test(n)&&null!=i&&null!=l?{entityId:n,first:i,second:l}:null};export const isAssistantLinkHref=t=>l.some(e=>t.startsWith(e));export const parseAssistantLinkTarget=t=>{if(t.startsWith(e)){let n=t.slice(e.length);return r.test(n)?{kind:"entity",id:n}:null}if(t.startsWith(n)){let e=u(t.slice(n.length));return e&&{kind:"recipe",entityId:e.entityId,groupId:e.first,key:e.second}}if(t.startsWith(i)){let e=u(t.slice(i.length));return e&&{kind:"option",entityId:e.entityId,edgeName:e.first,value:e.second}}return null};

package/dist/configurator/ui/assistant/reference-link/assistant-reference-details.d.ts

@@ -0,0 +1,25 @@
+import { type AssistantManifest, type AssistantRecipeContext, type DomainEntity, type DomainState } from '#package/domain';
+import type { AssistantReferenceTarget } from './assistant-link-target.js';
+type AnyDomainState = DomainState<DomainEntity<string>>;
+/** What the popover of a reference shows of the recipe or option it points at, texts in the current language. */
+export interface AssistantReferenceDetails {
+    readonly name: string;
+    readonly description: string | null;
+    readonly imageUrl: string | null;
+    readonly color: string | null;
+}
+/**
+ * What reading a reference needs: the manifest of the session and the readers `meta` resolves
+ * through, so the popover shows what the agent read.
+ */
+export interface AssistantReferenceContext extends Pick<AssistantRecipeContext, 'componentReader' | 'resolveLocalizable'> {
+    readonly manifest: AssistantManifest;
+}
+/**
+ * The details of what a reference points at on the given state, read the way `meta` reads them:
+ * only what the session's manifest exposes, from a component that is active on the entity there.
+ * `null` when the target does not resolve: the entity, the group or options edge, or the key or value is
+ * unknown, or the component is not active.
+ */
+export declare const readAssistantReferenceDetails: (target: AssistantReferenceTarget, state: AnyDomainState, context: AssistantReferenceContext) => AssistantReferenceDetails | null;
+export {};

package/dist/configurator/ui/assistant/reference-link/assistant-reference-details.js

@@ -0,0 +1 @@
+import{match as e}from"ts-pattern";import{findAssistantFieldOptions as i,findAssistantRecipeGroups as t,readAssistantFieldOptions as n,readAssistantRecipeGroup as r}from"#package/domain";let l=["child","replace"];export const readAssistantReferenceDetails=(o,a,d)=>{let u=a.entities.find(e=>e.id===o.entityId);return u?e(o).with({kind:"recipe"},e=>((e,i,n,o)=>{let a=(({entityId:e,groupId:i,key:n},o,a,d)=>{for(let u of l)for(let l of t(d.manifest,u,o)){if(l.groupId!==i)continue;let t=r(u,l,e,a,d)?.recipes.find(e=>e.key===n);if(t)return t}return null})(e,i,n,o);if(!a)return null;let{title:d,description:u,thumbnailUrl:f}=a.item,{resolveLocalizable:m}=o;return{name:m(d),description:void 0===u?null:m(u),imageUrl:void 0===f?null:m(f),color:null}})(e,u.type,a,d)).with({kind:"option"},e=>(({entityId:e,edgeName:t,value:r},l,o,a)=>{let d=i(a.manifest,l).find(e=>e.edgeName===t),u=d?n(d,e,o,a)?.find(e=>String(e.value)===r):void 0;return u?{name:u.name??u.description??String(u.value),description:null==u.name?null:u.description,imageUrl:u.imageUrl,color:u.color}:null})(e,u.type,a,d)).exhaustive():null};

package/dist/configurator/ui/assistant/reference-link/index.d.ts

@@ -0,0 +1,3 @@
+export { AssistantReferenceLink } from './AssistantReferenceLink.js';
+export { isAssistantLinkHref, parseAssistantLinkTarget } from './assistant-link-target.js';
+export { assistantReferenceStyles } from './reference-styles.js';

package/dist/configurator/ui/assistant/reference-link/index.js

@@ -0,0 +1 @@
+export{AssistantReferenceLink}from"./AssistantReferenceLink.js";export{isAssistantLinkHref,parseAssistantLinkTarget}from"./assistant-link-target.js";export{assistantReferenceStyles}from"./reference-styles.js";

package/dist/configurator/ui/assistant/reference-link/reference-styles.d.ts

@@ -0,0 +1,12 @@
+import { type CSSObject, type Theme } from '@mui/material';
+/**
+ * How a link in a reply reads: a glossary reference, text that flows with the sentence and wraps
+ * with it, in the reference color with a dashed underline. Entity links and the references to
+ * recipes and options share it, so every link of a reply looks alike.
+ *
+ * - `data-reference="plain"`: something that exists but does nothing on a click, in the text color;
+ * - `data-reference="muted"`: something that is gone or cannot be read right now.
+ */
+export declare const assistantReferenceStyles: ({ theme: { palette, shape } }: {
+    readonly theme: Theme;
+}) => CSSObject;

package/dist/configurator/ui/assistant/reference-link/reference-styles.js

@@ -0,0 +1 @@
+import{alpha as e}from"@mui/material";import{hoverStyles as r}from"#package/ui-sdk";export const assistantReferenceStyles=({theme:{palette:o,shape:i}})=>({background:"none",border:"none",borderRadius:i.borderRadius/2,boxDecorationBreak:"clone",color:o.primary.main,cursor:"pointer",font:"inherit",margin:0,padding:0,textDecorationLine:"underline",textDecorationStyle:"dashed",textDecorationThickness:1,textUnderlineOffset:"0.2em",WebkitBoxDecorationBreak:"clone",'&:focus-visible, &[data-hovered="true"], &[aria-expanded="true"]':{background:e(o.primary.main,o.action.hoverOpacity)},...r({"&:hover":{background:e(o.primary.main,o.action.hoverOpacity)}}),"&:focus-visible":{outline:`2px solid ${o.primary.main}`,outlineOffset:1},'&[data-reference="plain"]':{color:"inherit",cursor:"auto"},'&[data-reference="muted"]':{color:o.text.disabled}});

package/dist/configurator/ui/assistant/reference-link/use-assistant-reference-details.d.ts

@@ -0,0 +1,8 @@
+import type { AssistantReferenceTarget } from './assistant-link-target.js';
+import { type AssistantReferenceDetails } from './assistant-reference-details.js';
+/**
+ * The details of what a reference points at, read from the committed state and followed while the
+ * caller is mounted; `null` when it does not resolve there. Only the open popover of a reference
+ * calls it, so a reply full of references reads nothing until one is opened.
+ */
+export declare const useAssistantReferenceDetails: (target: AssistantReferenceTarget) => AssistantReferenceDetails | null;

package/dist/configurator/ui/assistant/reference-link/use-assistant-reference-details.js

@@ -0,0 +1 @@
+import{useDomain as e,useResolveLocalizable as t,useStoreSelector as r}from"#package/react-sdk";import{useConfigurator as s}from"../../../application-runtime/index.js";import{readAssistantReferenceDetails as i}from"./assistant-reference-details.js";export const useAssistantReferenceDetails=a=>{let{assistantSystem:n}=s(),{componentReader:o}=e(),l=t();return r(({state:e})=>{let t=n.getSessionManifest();return t?i(a,e,{manifest:t,componentReader:o,resolveLocalizable:e=>l(e)}):null},[n,o,l,a])};

package/dist/configurator/ui/assistant/resource-image/AssistantImage.d.ts

@@ -0,0 +1,9 @@
+export interface AssistantImageProps {
+    readonly src: string | undefined;
+    readonly alt: string | undefined;
+}
+/**
+ * An image in a reply, loaded from the project's resources. One the panel refuses to request or
+ * that fails to load shows its alt text instead, so the sentence around it still reads.
+ */
+export declare const AssistantImage: import("react").MemoExoticComponent<({ src, alt }: AssistantImageProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/configurator/ui/assistant/resource-image/AssistantImage.js

@@ -0,0 +1 @@
+import{jsx as r,Fragment as e}from"react/jsx-runtime";import{styled as t}from"@mui/material";import{memo as m,useCallback as o,useState as a}from"react";import{AssistantPanelName as i}from"../theme.js";import{useResourceImageUrl as s}from"./use-resource-image-url.js";let l=t("img",{name:i,slot:"image"})(({theme:{shape:r,spacing:e}})=>({blockSize:"auto",borderRadius:r.borderRadius,display:"block",maxInlineSize:"100%","& + &":{marginBlockStart:e(1)}}));export const AssistantImage=m(({src:t,alt:m})=>{let i=s()(t),[n,u]=a(),c=o(()=>{u(i)},[i]);return null==i||i===n?r(e,{children:m}):r(l,{src:i,alt:m??"",loading:"lazy",onError:c})});

package/dist/configurator/ui/assistant/resource-image/index.d.ts

@@ -0,0 +1,3 @@
+export { AssistantImage } from './AssistantImage.js';
+export { isResourcePath } from './resource-path.js';
+export { useResourceImageUrl } from './use-resource-image-url.js';

package/dist/configurator/ui/assistant/resource-image/index.js

@@ -0,0 +1 @@
+export{AssistantImage}from"./AssistantImage.js";export{isResourcePath}from"./resource-path.js";export{useResourceImageUrl}from"./use-resource-image-url.js";

package/dist/configurator/ui/assistant/resource-image/resource-path.d.ts

@@ -0,0 +1,2 @@
+/** True when the image source the model wrote may be requested: a path into the project's resources. */
+export declare const isResourcePath: (src: string | undefined) => src is string;

package/dist/configurator/ui/assistant/resource-image/resource-path.js

@@ -0,0 +1 @@
+import{ASSISTANT_RESOURCE_PATH_PATTERN as e}from"#package/domain";let t=RegExp(e,"u");export const isResourcePath=e=>null!=e&&t.test(e);

package/dist/configurator/ui/assistant/resource-image/use-resource-image-url.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Resolves an image source the model wrote the way the configurator resolves thumbnails, or returns
+ * `undefined` when it is not a path into the project's resources and must not be requested.
+ */
+export declare const useResourceImageUrl: () => (src: string | undefined) => string | undefined;

package/dist/configurator/ui/assistant/resource-image/use-resource-image-url.js

@@ -0,0 +1 @@
+import{useCallback as r}from"react";import{useResourceUrl as e}from"#package/react-sdk";import{isResourcePath as o}from"./resource-path.js";export const useResourceImageUrl=()=>{let{getResourceUrl:t}=e();return r(r=>o(r)?t(r):void 0,[t])};

package/dist/configurator/ui/assistant/screenshots/ScreenshotThumbnails.d.ts

@@ -0,0 +1,9 @@
+import type { AssistantToolScreenshot } from './tool-screenshots.js';
+interface ScreenshotThumbnailsProps {
+    readonly screenshots: readonly AssistantToolScreenshot[];
+    /** Called once a picture has loaded, which changes the size of the popover. */
+    readonly onImageLoad: () => void;
+}
+/** The pictures of a tool call's screenshots. */
+export declare const ScreenshotThumbnails: ({ screenshots, onImageLoad }: ScreenshotThumbnailsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/configurator/ui/assistant/screenshots/ScreenshotThumbnails.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{styled as o}from"@mui/material";import{AssistantPanelName as r}from"../theme.js";import{useScreenshotSrc as a}from"./use-screenshot-src.js";let i=o("span",{name:r,slot:"screenshots",shouldForwardProp:e=>"columns"!==e})(({columns:e,theme:{palette:o,shape:r,shadows:a,spacing:i}})=>({background:o.background.paper,borderRadius:r.borderRadius,boxShadow:a[4],display:"grid",gap:i(1.5),gridTemplateColumns:`repeat(${e}, minmax(0, 200px))`,maxInlineSize:"80vw",padding:i(1.5)})),s=o("img")(({theme:{palette:e,shape:o}})=>({blockSize:"auto",borderRadius:o.borderRadius/2,boxShadow:`inset 0 0 0 1px ${e.divider}`,display:"block",inlineSize:"100%"})),d=o("span")(({theme:{palette:e,shape:o}})=>({aspectRatio:"4 / 3",background:e.action.hover,borderRadius:o.borderRadius/2,display:"block"})),t=({picture:o,onImageLoad:r})=>{let i=a(o);return void 0===i?e(d,{}):e(s,{src:i,alt:"",onLoad:r})};export const ScreenshotThumbnails=({screenshots:o,onImageLoad:r})=>e(i,{columns:Math.min(o.length,2),children:o.map(({label:o,picture:a})=>e(t,{picture:a,onImageLoad:r},o))});

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

@@ -0,0 +1,3 @@
+export { ScreenshotThumbnails } from './ScreenshotThumbnails.js';
+export { type AssistantToolScreenshot, readToolScreenshots } from './tool-screenshots.js';
+export { useScreenshotSrc } from './use-screenshot-src.js';

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

@@ -0,0 +1 @@
+export{ScreenshotThumbnails}from"./ScreenshotThumbnails.js";export{readToolScreenshots}from"./tool-screenshots.js";export{useScreenshotSrc}from"./use-screenshot-src.js";

package/dist/configurator/ui/assistant/screenshots/tool-screenshots.d.ts

@@ -0,0 +1,16 @@
+/** Where the panel gets a screenshot's picture from: the server, by the id the browser uploaded it under. */
+export interface AssistantScreenshotPicture {
+    readonly kind: 'stored';
+    readonly imageId: string;
+}
+/** A screenshot a `query` or `apply` call took, as the panel shows it. */
+export interface AssistantToolScreenshot {
+    /** The label the call's `image` field returned, such as `Cabinet-2/doorLayout#2`. */
+    readonly label: string;
+    readonly picture: AssistantScreenshotPicture;
+}
+/**
+ * The screenshots of a tool result: the image parts that follow the result's JSON, each after the
+ * text part with its label. A result without them, such as plain JSON or an error, has none.
+ */
+export declare const readToolScreenshots: (result: unknown) => readonly AssistantToolScreenshot[];

package/dist/configurator/ui/assistant/screenshots/tool-screenshots.js

@@ -0,0 +1 @@
+import{z as t}from"zod";import{readAssistantImageReference as e}from"@salsita-ai/contracts/assistant";let a=t.object({type:t.literal("text"),content:t.string()}),r=t.object({type:t.literal("image"),source:t.object({type:t.literal("url"),value:t.string()})}),s=/^[^/]+\/[^#]+(?:#\d+)?$/;export const readToolScreenshots=t=>Array.isArray(t)?t.slice(1).flatMap((t,l,o)=>{let n=r.safeParse(t),c=a.safeParse(o[l-1]),i=n.success?(({source:t})=>{let a=e(t.value);return null===a?null:{kind:"stored",imageId:a}})(n.data):null;return i&&c.success&&s.test(c.data.content)?[{label:c.data.content,picture:i}]:[]}):[];

package/dist/configurator/ui/assistant/screenshots/use-screenshot-src.d.ts

@@ -0,0 +1,8 @@
+import type { AssistantScreenshotPicture } from './tool-screenshots.js';
+/**
+ * The `src` of a screenshot's or an attached image's picture: the object URL the assistant system
+ * reads the uploaded image into, once it has been read; `undefined` until then and when the read
+ * fails. The screenshots of a call are read only while their popover is open; the images a user
+ * attached are read as soon as their bubble shows.
+ */
+export declare const useScreenshotSrc: (picture: AssistantScreenshotPicture) => string | undefined;

package/dist/configurator/ui/assistant/screenshots/use-screenshot-src.js

@@ -0,0 +1 @@
+import{useEffect as r,useState as e}from"react";import{useConfigurator as t}from"../../../application-runtime/index.js";export const useScreenshotSrc=o=>{let{assistantSystem:i}=t(),{imageId:n}=o,[c,m]=e();return r(()=>{let r=!0;return i.loadScreenshotUrl(n).then(e=>{r&&m({imageId:n,src:e})},()=>void 0),()=>{r=!1}},[i,n]),c?.imageId===n?c.src:void 0};

package/dist/configurator/ui/assistant/streamed-markdown.d.ts

@@ -1,6 +1,19 @@
+/** Where a code block starts and ends in the text, as Markdown parsed it. */
+export interface FencePosition {
+    readonly start: number;
+    readonly end: number;
+}
+/**
+ * True when a code block of a finished reply was cut off: it runs to the end of the reply without
+ * the line that closes its fence, whatever backticks the reply has elsewhere. A block that the end
+ * of its list item or blockquote closed before the reply went on is not cut off.
+ */
+export declare const isCutOffFence: (text: string, { start, end }: FencePosition) => boolean;
+/** True when the text has a code fence the model has not closed yet. */
+export declare const hasOpenFence: (text: string) => boolean;
 /**
  * Makes the Markdown of a reply that is still streaming renderable as it stands, so half-written
- * markup does not flash as raw characters: an open code fence is closed, an inline code span, a link
- * or a table header the model has not finished is held back, and open bold text is closed.
+ * markup does not flash as raw characters: an open code fence is closed, an inline code span, a link,
+ * an alert marker or a table header the model has not finished is held back, and open bold text is closed.
  */
 export declare const completeStreamedMarkdown: (text: string) => string;

package/dist/configurator/ui/assistant/streamed-markdown.js

@@ -1,2 +1,2 @@
-let e=(e,t)=>e.split(t).length-1,t=/^\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/;export const completeStreamedMarkdown=l=>{if(e(l,"```")%2==1)return`${l}
-\`\`\``;let n=l.lastIndexOf("```"),s=-1===n?"":l.slice(0,n+3),r=l.slice(s.length),i=(e=>{let l=e.split("\n"),n=l.length;for(;n>0&&l[n-1]?.trimStart().startsWith("|");)n-=1;let s=l.slice(n),r=s[1],i=null!=r&&s.length>2&&t.test(r);return 0===s.length||i?e:l.slice(0,n).join("\n")})((e(r,"`")%2==1?r.slice(0,r.lastIndexOf("`")):r).replace(/!?\[([^\]\n]*)\]\([^)\n]*$/,"$1").replace(/!?\[[^\]\n]*$/,"")),c=e(i,"**")%2==1?`${i}**`:i;return`${s}${c}`};
+let e=(e,t)=>e.split(t).length-1,t=/^\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/,l=/(^|\n) {0,3}>[ \t]*\[![a-z]*$/i,n=/(^|\n) {0,3}>[ \t]*\[![a-z]+\][ \t]*$/i,s=/^[ \t>]*(`{3,}|~{3,})/,r=/^[ \t>]*(`{3,}|~{3,})[ \t]*$/;export const isCutOffFence=(e,{start:t,end:l})=>{let n,i,c;return l>=e.trimEnd().length&&(n=e.slice(t,l).split("\n"),i=s.exec(n[0]??"")?.[1],c=n.length>1?r.exec(n.at(-1)??"")?.[1]:void 0,null==i||null==c||c[0]!==i[0]||!(c.length>=i.length))};export const hasOpenFence=t=>e(t,"```")%2==1;export const completeStreamedMarkdown=s=>{var r;let i;if(hasOpenFence(s))return`${s}
+\`\`\``;let c=s.lastIndexOf("```"),a=-1===c?"":s.slice(0,c+3),{head:h,marker:$}=(r=s.slice(a.length),null==(i=n.exec(r))?{head:r.replace(l,"$1"),marker:""}:{head:r.slice(0,i.index),marker:r.slice(i.index)}),p=(e=>{let l=e.split("\n"),n=l.length;for(;n>0&&l[n-1]?.trimStart().startsWith("|");)n-=1;let s=l.slice(n),r=s[1],i=null!=r&&s.length>2&&t.test(r);return 0===s.length||i?e:l.slice(0,n).join("\n")})((e(h,"`")%2==1?h.slice(0,h.lastIndexOf("`")):h).replace(/!?\[([^\]\n]*)\](?:\([^)\n]*)?$/,"$1").replace(/!?\[[^\]\n]*$/,"")),d=e(p,"**")%2==1?`${p}**`:p;return`${a}${d}${$}`};

package/dist/configurator/ui/assistant/thread-items.d.ts

@@ -1,4 +1,5 @@
 import type { UIMessage } from '@tanstack/ai-client';
+import { type AssistantMessageAnnotation } from '@salsita-ai/contracts/assistant';
 import type { AssistantEarlierThreadSnapshot } from '../../application-runtime/index.js';
 import { type AssistantToolChip } from './tool-chip.js';
 /** A tool call of the thread, with what its chip shows and what a click on the chip logs. */
@@ -8,6 +9,12 @@ export interface AssistantToolItem {
     readonly input: unknown;
     readonly result: unknown;
 }
+/**
+ * What the forms in a stretch of assistant text are: shown only in the last message of the thread,
+ * and usable only once its reply has ended. A form in any earlier message has been answered or
+ * passed over, so it is not shown at all.
+ */
+export type AssistantFormsVisibility = 'hidden' | 'disabled' | 'enabled';
 /**
  * One block of the thread, in reading order: a user bubble, a stretch of assistant Markdown, a row
  * of chips for the tool calls that follow each other without text in between, or the line that
@@ -17,11 +24,16 @@ export type AssistantThreadItem = {
     readonly kind: 'user';
     readonly id: string;
     readonly text: string;
+    /** The images the user attached, by the ids the message references them by; annotations are not among them. */
+    readonly imageIds: readonly string[];
+    /** The annotations the user attached, in their order among the message's images. */
+    readonly annotations: readonly AssistantMessageAnnotation[];
 } | {
     readonly kind: 'text';
     readonly id: string;
     readonly markdown: string;
     readonly isStreaming: boolean;
+    readonly forms: AssistantFormsVisibility;
 } | {
     readonly kind: 'tools';
     readonly id: string;
@@ -39,7 +51,7 @@ export interface AssistantThreadView {
  * Lays the messages of the chat out as the blocks the thread renders. Reasoning is left out; tool
  * results are not shown on their own but decide the state of the chip of their call.
  */
-export declare const buildThreadView: (messages: ReadonlyArray<UIMessage>, isReplying: boolean) => AssistantThreadView;
+export declare const buildThreadView: (messages: ReadonlyArray<UIMessage>, isReplying: boolean, isResuming: boolean) => AssistantThreadView;
 /**
  * Lays the closed threads of the conversation out above the thread that continues them, oldest
  * first, each ended by a separator: the assistant read on from a summary of it, not from the

package/dist/configurator/ui/assistant/thread-items.js

@@ -1 +1 @@
-import{describeToolCall as t}from"./tool-chip.js";let e=t=>{try{return JSON.parse(t)}catch{return t}},r=t=>t.map(t=>"text"===t.type?t.content:"").join("").trim();export const buildThreadView=(o,i)=>{let l=(t=>{let r=new Map;for(let o of t)for(let t of o.parts)"tool-result"===t.type&&r.set(t.toolCallId,{result:"string"==typeof t.content?e(t.content):t.content,error:"error"===t.state?t.error??"The tool call failed.":void 0});return r})(o),n=[],a=o.at(-1),s=t=>{let e=n.at(-1);e?.kind==="tools"?n[n.length-1]={...e,tools:[...e.tools,t]}:n.push({kind:"tools",id:t.id,tools:[t]})};for(let e of o){if("user"===e.role){let t=r(e.parts);t&&n.push({kind:"user",id:e.id,text:t});continue}let o=i&&e===a;e.parts.forEach((r,i)=>{let a=`${e.id}:${i}`;if("text"===r.type){if(r.content.trim()){let t=o&&i===e.parts.length-1;n.push({kind:"text",id:a,markdown:r.content,isStreaming:t})}return}if("tool-call"!==r.type)return;let d=l.get(r.id),p=r.input,u=r.output??d?.result;s({id:r.id,input:p,result:u,chip:t({name:r.name,input:p,result:u,error:d?.error,isReplyRunning:o})})})}let d=n.at(-1),p=a?.role==="assistant"&&(d?.kind==="text"&&d.isStreaming||d?.kind==="tools");return{items:n,isThinking:i&&!p}};export const buildEarlierThreadItems=t=>t.flatMap(({threadId:t,messages:e})=>[...buildThreadView(e,!1).items.map(e=>({...e,id:`${t}:${e.id}`})),{kind:"separator",id:`${t}:separator`}]);
+import{match as t}from"ts-pattern";import{AssistantMessageMetadata as e,banTool as r,readAssistantImageReference as i}from"@salsita-ai/contracts/assistant";import{describeToolCall as o}from"./tool-chip.js";let a=t=>{try{return JSON.parse(t)}catch{return t}},s=t=>t.map(t=>"text"===t.type?t.content:"").join("").trim(),n=t=>t.flatMap(t=>"image"===t.type&&"url"===t.source.type?i(t.source.value)??[]:[]),l=(t,r)=>{let i=e.safeParse(t.metadata),o=i.success?i.data.annotations??[]:[];return r.flatMap(t=>o.filter(e=>e.imageId===t))};export const buildThreadView=(e,i,d)=>{let p=(t=>{let e=new Map;for(let r of t)for(let t of r.parts)"tool-result"===t.type&&e.set(t.toolCallId,{result:"string"==typeof t.content?a(t.content):t.content,error:"error"===t.state?t.error??"The tool call failed.":void 0});return e})(e),u=[],m=e.at(-1),f=t=>{let e=u.at(-1);e?.kind==="tools"?u[u.length-1]={...e,tools:[...e.tools,t]}:u.push({kind:"tools",id:t.id,tools:[t]})};for(let a of e){if("user"===a.role){let t=s(a.parts),e=n(a.parts),r=l(a,e),i=e.filter(t=>!r.some(e=>e.imageId===t));(t||e.length>0)&&u.push({kind:"user",id:a.id,text:t,imageIds:i,annotations:r});continue}let e=i&&a===m,c=t({isLast:a===m,isBusy:e||d}).with({isLast:!1},()=>"hidden").with({isBusy:!0},()=>"disabled").otherwise(()=>"enabled");a.parts.forEach((t,i)=>{let s=`${a.id}:${i}`;if("text"===t.type){if(t.content.trim()){let r=e&&i===a.parts.length-1;u.push({kind:"text",id:s,markdown:t.content,isStreaming:r,forms:c})}return}if("tool-call"!==t.type||t.name===r.name)return;let n=p.get(t.id),l=t.input,d=t.output??n?.result;f({id:t.id,input:l,result:d,chip:o({name:t.name,input:l,result:d,error:n?.error,isReplyRunning:e})})})}let c=u.at(-1),h=m?.role==="assistant"&&(c?.kind==="text"&&c.isStreaming||c?.kind==="tools");return{items:u,isThinking:i&&!h}};export const buildEarlierThreadItems=t=>t.flatMap(({threadId:t,messages:e})=>[...buildThreadView(e,!1,!1).items.map(e=>"text"===e.kind?{...e,id:`${t}:${e.id}`,forms:"hidden"}:{...e,id:`${t}:${e.id}`}),{kind:"separator",id:`${t}:separator`}]);