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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+import type { ComponentsOverrides } from '@mui/material';
+import type { ElementType, HTMLAttributes } from 'react';
+declare const MuiComponentName: 'PhxAssistantAnnotationBadge';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: 'root';
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantAnnotationBadgeProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+/** The slots of the badge on a thumbnail of an annotation. Read from the theme only. */
+export interface ThemeableAssistantAnnotationBadgeProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The badge with the comment icon and the number of comments (`span`).
+     */
+    readonly slots?: Partial<Record<'root', ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the badge.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: HTMLAttributes<HTMLSpanElement>;
+    }>;
+}
+interface AnnotationBadgeProps {
+    readonly count: number;
+}
+/**
+ * Tells on a thumbnail of an annotation how many comments it has: a comment icon and their number. An
+ * annotation without comments gets none; its strokes are on the picture.
+ */
+export declare const AnnotationBadge: ({ count }: AnnotationBadgeProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

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

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

@@ -0,0 +1,5 @@
+/**
+ * What covers the configurator for an annotation of the assistant chat, rendered by the configurator
+ * page over whichever layout it shows. Nothing shows while the view glides.
+ */
+export declare const AnnotationOverlay: () => import("react/jsx-runtime").JSX.Element | null;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,80 @@
+import type { ComponentsOverrides } from '@mui/material';
+import type { ElementType, HTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+declare const MuiComponentName: 'PhxAssistantAnnotation';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: AnnotationSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantAnnotationProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Toolbar: 'toolbar';
+};
+type AnnotationSlots = ValueOf<typeof Slots>;
+/** The red of marker strokes and pin badges. */
+export declare const ANNOTATION_COLOR = "#e53935";
+/** CSS px on screen; the flattened image scales it with the view. */
+export declare const ANNOTATION_STROKE_WIDTH = 4;
+/** CSS px on screen; the diameter of a pin's numbered badge. */
+export declare const ANNOTATION_PIN_SIZE = 26;
+/** ms; how long the overlay takes to fade in and out. */
+export declare const ANNOTATION_FADE_DURATION = 200;
+export declare const AnnotationStage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/** The box of the view: everything on it is placed by fractions of it. */
+export declare const AnnotationSurface: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/** The size of a surface for a view of `width` × `height`: as large as fits the stage, keeping its aspect ratio. */
+export declare const annotationSurfaceSize: (width: number, height: number) => {
+    aspectRatio: string;
+    inlineSize: string;
+};
+export declare const AnnotationPicture: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, {}>;
+/**
+ * A pin on the surface, centred on its point: in the editor the numbered badge itself, the same as the
+ * flattened image shows; over a sent annotation a clear target over the badge drawn in the image.
+ */
+export declare const AnnotationPinButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}, "LinkComponent" | "TouchRippleProps" | "action" | "centerRipple" | "children" | "className" | "classes" | "disableRipple" | "disableTouchRipple" | "disabled" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "style" | "sx" | "tabIndex" | "touchRippleRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+/**
+ * The slots of the annotation overlay, the editor in which the user draws and pins comments on a
+ * view and the viewer of an annotation sent with a message. Read from the theme only.
+ */
+export interface ThemeableAssistantAnnotationProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The overlay over the configurator (`div`).
+     * - `toolbar` — The floating bar of controls (`div`).
+     */
+    readonly slots?: Partial<Record<AnnotationSlots, ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the overlay.
+     * - `toolbar` — Props for the bar of controls.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Toolbar]: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
+/** The overlay's root and toolbar as the theme sets them, with the built-in parts for the ones it leaves out. */
+export declare const useAnnotationSlots: () => {
+    Root: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof HTMLAttributes<HTMLDivElement>>, {}> | ElementType;
+    Toolbar: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof HTMLAttributes<HTMLDivElement>>, {}> | ElementType;
+    slotProps: Partial<{
+        readonly root: HTMLAttributes<HTMLDivElement>;
+        readonly toolbar: HTMLAttributes<HTMLDivElement>;
+    }>;
+};
+export {};

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

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

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

@@ -0,0 +1,49 @@
+import type { ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes } from 'react';
+import type { AnnotationPoint } from './annotation-drawing.js';
+declare const MuiComponentName: 'PhxAssistantAnnotationComment';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: 'root';
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantAnnotationCommentProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+/** The slots of the comment of an annotation's pin. Read from the theme only. */
+export interface ThemeableAssistantAnnotationCommentProps {
+    /**
+     * The components used for each slot.
+     *
+     * - `root` — The box of the comment, which looks like the composer's input (`div`).
+     */
+    readonly slots?: Partial<Record<'root', ElementType>>;
+    /**
+     * Props applied to each slot component.
+     *
+     * - `root` — Props for the box.
+     */
+    readonly slotProps?: Partial<{
+        readonly root: HTMLAttributes<HTMLDivElement>;
+    }>;
+}
+interface AnnotationCommentProps {
+    /** Where its pin is on the view. */
+    readonly point: AnnotationPoint;
+    /** The comment as saved so far; what is typed is the pin's only once it is saved. */
+    readonly comment: string;
+    readonly onDelete: () => void;
+    readonly onSave: (comment: string) => void;
+}
+/**
+ * The comment of a pin, open for editing by the pin: it takes the focus as it opens. Enter saves it and
+ * Shift+Enter adds a line, as in the composer. What is typed stays here until it is saved.
+ */
+export declare const AnnotationComment: ({ point, comment, onDelete, onSave }: AnnotationCommentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+export { AnnotationBadge, type ThemeableAssistantAnnotationBadgeProps } from './AnnotationBadge.js';
+export { AnnotationOverlay } from './AnnotationOverlay.js';
+export { MessageAnnotations } from './MessageAnnotations.js';
+export type { ThemeableAssistantAnnotationProps } from './annotation-layout.js';
+export type { ThemeableAssistantAnnotationCommentProps } from './editor/index.js';

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

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