@salsita-ai/sdk 0.50.0-develop.bb71259564 → 0.50.0-develop.bc204720a8

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

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

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

@@ -1,10 +1,86 @@
+import type { ButtonProps, ComponentsOverrides } from '@mui/material';
+import { type ElementType, type HTMLAttributes } from 'react';
+import type { ValueOf } from '@salsita-ai/common/utils';
+import { type AssistantThreadItemSlots } from './AssistantThreadItemView.js';
+declare const MuiComponentName: 'PhxAssistantThread';
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [MuiComponentName]: AssistantThreadSlots;
+    }
+    interface ComponentsPropsList {
+        [MuiComponentName]: ThemeableAssistantThreadProps;
+    }
+    interface Components {
+        [MuiComponentName]?: {
+            defaultProps?: ComponentsPropsList[typeof MuiComponentName];
+            styleOverrides?: ComponentsOverrides<Theme>[typeof MuiComponentName];
+        };
+    }
+}
+declare const Slots: {
+    readonly Root: 'root';
+    readonly Messages: 'messages';
+    readonly Greeting: 'greeting';
+    readonly Status: 'status';
+    readonly OlderStatus: 'olderStatus';
+    readonly EarlierButton: 'earlierButton';
+    readonly Notice: 'notice';
+    readonly NewReplyButton: 'newReplyButton';
+};
+type AssistantThreadSlots = ValueOf<typeof Slots>;
+export interface ThemeableAssistantThreadProps {
+    /**
+     * The components used for each slot inside the thread.
+     *
+     * Element slots:
+     * - `root` — The thread (`div`).
+     * - `messages` — The scrolling log of the conversation (`div`).
+     * - `greeting` — The greeting of an empty thread (`div`).
+     * - `status` — A line on what the thread is doing, such as loading (`div`).
+     * - `olderStatus` — The line over the top of the thread while earlier messages load; it also takes the styles of `status` (`div`).
+     * - `earlierButton` — The control that loads an earlier conversation (`Button`).
+     * - `notice` — The failure notice with its way out (`div`).
+     * - `newReplyButton` — The control that scrolls to a reply the user has not seen (`Button`).
+     *
+     * Component slots, one per kind of item of `useAssistantThread`, each given that item's props:
+     * - `userMessage` — A message the user sent; defaults to `AssistantUserMessage`.
+     * - `assistantMessage` — Assistant text; defaults to `AssistantMarkdown`.
+     * - `toolChips` — A row of tool calls; defaults to `AssistantToolChips`.
+     * - `separator` — The end of a closed thread; takes no props; defaults to `AssistantSeparator`.
+     */
+    readonly slots?: Partial<Record<AssistantThreadSlots, ElementType> & AssistantThreadItemSlots>;
+    /**
+     * Props applied to each element slot.
+     *
+     * - `root` — Props for the thread.
+     * - `messages` — Props for the scrolling log.
+     * - `greeting` — Props for the greeting.
+     * - `status` — Props for each status line.
+     * - `olderStatus` — Props for the line over the top of the thread.
+     * - `earlierButton` — Props for the earlier-conversation control.
+     * - `notice` — Props for the failure notice.
+     * - `newReplyButton` — Props for the new-reply control.
+     */
+    readonly slotProps?: Partial<{
+        readonly [Slots.Root]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Messages]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Greeting]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.Status]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.OlderStatus]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.EarlierButton]: ButtonProps;
+        readonly [Slots.Notice]: HTMLAttributes<HTMLDivElement>;
+        readonly [Slots.NewReplyButton]: ButtonProps;
+    }>;
+}
 /**
  * The conversation: user bubbles, assistant Markdown, tool chips, and what the panel
  * has to say itself, which is a line while the thread loads, a greeting for an empty thread, a
  * "Thinking…" line and a failure with its way out. It follows a streaming reply until the user scrolls up.
  *
- * A conversation the assistant continued from a summary is painted whole: the threads that were
- * closed come first, each ended by a separator, and the ones still on the server are loaded one at a
- * time from a control above them.
+ * A conversation is painted whole as the user scrolls up: the thread shows its newest messages first
+ * and loads older pages when its top comes into view. A conversation the assistant continued from a
+ * summary has closed threads before it, each ended by a separator; once the current thread is painted
+ * whole, the ones still on the server are loaded one at a time from a control above them.
  */
-export declare const AssistantThread: () => import("react/jsx-runtime").JSX.Element;
+export declare const AssistantThread: (inProps: ThemeableAssistantThreadProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

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

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

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

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

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

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

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

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

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

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 {};