@marketrix.ai/widget 4.0.142 → 4.0.144
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/components/base/Surface.d.ts +1 -1
- package/dist/src/components/blocks/ChatInput.d.ts +1 -1
- package/dist/src/components/chat/MessageList.d.ts +2 -2
- package/dist/src/components/navigation/MessengerShell.d.ts +2 -2
- package/dist/src/components/views/ChatView.d.ts +2 -2
- package/dist/src/components/views/HomeView.d.ts +1 -1
- package/dist/src/{types/index.d.ts → types.d.ts} +3 -3
- package/dist/widget.mjs +5 -5
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* the shared layout-token vocabulary with a background token, an elevation token and a padding preset,
|
|
4
4
|
* all emitted as inline style.
|
|
5
5
|
*
|
|
6
|
-
* `floatingCard` is a `variant` shorthand for the card look both the home view's recent-
|
|
6
|
+
* `floatingCard` is a `variant` shorthand for the card look both the home view's recent-chat
|
|
7
7
|
* card and the chat view's composer card use. Style precedence is fixed: background, then padding, then
|
|
8
8
|
* elevation, then layout props, then the caller's own `style` last, so a caller override always wins.
|
|
9
9
|
* `className` is internal to `blocks/` — layout props are the styling API everywhere else.
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* The widget's chat input: an auto-growing textarea with send and stop.
|
|
3
3
|
*
|
|
4
4
|
* `MAX_TEXTAREA_HEIGHT` caps growth at three lines — 20px each plus 6px of padding — after which it
|
|
5
|
-
* scrolls, so a long message cannot push the
|
|
5
|
+
* scrolls, so a long message cannot push the chat off a small host page.
|
|
6
6
|
*
|
|
7
7
|
* `mergeRefs` combines the caller's ref with the internal one, since the component needs its own
|
|
8
8
|
* handle to measure and resize.
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* The chat transcript pane: a scrolling list of `MessageItem`s with a "Clear
|
|
2
|
+
* The chat transcript pane: a scrolling list of `MessageItem`s with a "Clear chat" action and
|
|
3
3
|
* two floating scroll affordances (scroll-to-top, scroll-to-bottom) layered over it.
|
|
4
4
|
*
|
|
5
5
|
* `MessageList` prepends a greeting message built from `widget_body`, which never enters the store —
|
|
6
|
-
* that's why "Clear
|
|
6
|
+
* that's why "Clear chat" is gated on the store's own message count. `handleScroll` shows each
|
|
7
7
|
* affordance based on scroll position. All scrolling is suppressed in preview mode, where the widget is
|
|
8
8
|
* embedded in the dashboard's own modal and scrolling would move that modal instead of this list. A
|
|
9
9
|
* streaming reply re-pins to the bottom only while the reader was already near it.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { MarketrixConfig, WidgetPosition } from '../../types';
|
|
3
|
-
export declare function useFocusTrap(containerRef: React.RefObject<HTMLElement | null>, isActive: boolean, options
|
|
4
|
-
onEscape
|
|
3
|
+
export declare function useFocusTrap(containerRef: React.RefObject<HTMLElement | null>, isActive: boolean, options: {
|
|
4
|
+
onEscape: () => void;
|
|
5
5
|
focusTargetRef?: React.RefObject<HTMLElement | null> | undefined;
|
|
6
6
|
}): void;
|
|
7
7
|
export declare function useResize(settingsWidth: string | undefined, settingsHeight: string | undefined, position: WidgetPosition, config: MarketrixConfig, isPreviewMode: boolean): {
|
|
@@ -18,11 +18,11 @@ interface ChatViewProps {
|
|
|
18
18
|
messageInputRef: React.RefObject<HTMLTextAreaElement | null>;
|
|
19
19
|
}
|
|
20
20
|
export interface UseScreenShareOptions {
|
|
21
|
-
onScreenSharingChange
|
|
21
|
+
onScreenSharingChange: (isSharing: boolean) => void;
|
|
22
22
|
toggleScreenShareRef?: React.MutableRefObject<(() => void) | null>;
|
|
23
23
|
onAddMessage: (message: ChatMessage) => void;
|
|
24
24
|
onUpdateMessage: (messageId: string, updates: Partial<ChatMessage>) => void;
|
|
25
|
-
onRemoveMessage
|
|
25
|
+
onRemoveMessage: (messageId: string) => void;
|
|
26
26
|
onSendMessage: (message: string, mode?: InstructionType, skipUserMessage?: boolean) => void;
|
|
27
27
|
messages: ChatMessage[];
|
|
28
28
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* `HomeView` — the opening screen: tenant greeting and body, the Ask-a-question button that switches to
|
|
3
3
|
* the chat view, the suggested-action chips (`getSuggestedActionsFromConfig`), which navigate and dispatch
|
|
4
|
-
* in one click, and a card linking back into a
|
|
4
|
+
* in one click, and a card linking back into a chat already in progress.
|
|
5
5
|
*
|
|
6
6
|
* Chip captions render VERBATIM in the tenant text colour: a `show`/`do` caption doubles as the
|
|
7
7
|
* instruction dispatched on click and is given its mode prefix in the config layer, so prefixing here
|
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
* authenticates nothing. `ValidWidgetConfig` is a `MarketrixConfig` that has passed `parseWidgetSettings`.
|
|
8
8
|
* `taskStatus`/`MessagePart.status` are presentational labels only, not the `task/status` wire vocabulary.
|
|
9
9
|
*/
|
|
10
|
-
import type { InstructionType, WidgetSettingsData } from '
|
|
11
|
-
import type { WidgetRenderedSettings } from '
|
|
12
|
-
export type { InstructionType, WidgetSettingsData } from '
|
|
10
|
+
import type { InstructionType, WidgetSettingsData } from './sdk';
|
|
11
|
+
import type { WidgetRenderedSettings } from './utils/validation';
|
|
12
|
+
export type { InstructionType, WidgetSettingsData } from './sdk';
|
|
13
13
|
export interface ClientOwnedConfig {
|
|
14
14
|
mtxApiHost?: string;
|
|
15
15
|
userId?: number;
|
package/dist/widget.mjs
CHANGED
|
@@ -44,18 +44,18 @@ return v("div",{ref:n,"data-size":e,role:"status",style:{display:"inline-flex",a
|
|
|
44
44
|
return v(xc,{style:{marginTop:"10px"},role:"article","aria-roledescription":"message","aria-label":s?"You said…":"Assistant says…",animate:t?"fadeIn":void 0,children:[/* @__PURE__ */v(wc,{align:"start",gap:"sm",width:"full",children:[
|
|
45
45
|
/* @__PURE__ */b(wc,{shrink:!1,style:{width:"20px",height:"20px",marginTop:"6px"},children:!s&&/* @__PURE__ */b(dc,{src:"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%20viewBox='0%200%20361%20360'%3e%3cdefs%3e%3cstyle%3e%20.st0%20{%20display:%20none;%20fill:%20none;%20stroke:%20%23cdc9c2;%20stroke-width:%201.3px;%20}%20.st1%20{%20fill:%20%23fff;%20}%20.st2,%20.st3%20{%20fill:%20%237cffa6;%20}%20.st3%20{%20stroke:%20%237cffa6;%20stroke-width:%20.38px;%20}%20.st4%20{%20fill:%20%23101828;%20}%20%3c/style%3e%3c/defs%3e%3crect%20class='st4'%20x='.5'%20width='360'%20height='360'/%3e%3cpath%20class='st2'%20d='M83.37,209.58c15.35,0,27.8-12.45,27.8-27.8s-12.44-27.79-27.8-27.79-27.8,12.44-27.8,27.79,12.44,27.8,27.8,27.8Z'/%3e%3cpath%20class='st1'%20d='M85.86,68.28l152.45,223.44h67.29l-70.62-113.77,68.13-109.67h-67.29l-41.12,65.31-41.54-65.31h-67.29Z'/%3e%3cpath%20class='st3'%20d='M176.61,249.83l-35.08-51-57.82,92.71h66.85l26.05-41.7Z'/%3e%3crect%20class='st0'%20x='1.25'%20y='.65'%20width='358.7'%20height='358.7'%20rx='43.35'%20ry='43.35'/%3e%3c/svg%3e",alt:"Marketrix AI",size:20,fit:"cover",rounded:"lg",style:{border:"none",outline:"none",display:"block",backgroundColor:"transparent"}})}),
|
|
46
46
|
/* @__PURE__ */v(xc,{grow:!0,position:"relative",rounded:"lg",elevation:"card",style:{padding:e.videoStream?"0":"8px 10px",border:"1px solid transparent",backgroundColor:s?"var(--primary)":void 0,color:s?"var(--primary-foreground)":"var(--foreground)"},children:[e.videoStream&&/* @__PURE__ */b(nd,{stream:e.videoStream}),!e.videoStream&&(a?/* @__PURE__ */v(wc,{align:"start",gap:"sm",children:[/* @__PURE__ */b(wc,{shrink:!1,style:{marginTop:"3px"},children:/* @__PURE__ */b(Cc,{name:a,size:13})}),/* @__PURE__ */b(xc,{grow:!0,children:/* @__PURE__ */b(id,{message:e,isLastMessage:t,isTaskRunning:n})})]}):/* @__PURE__ */b(id,{message:e,isLastMessage:t,isTaskRunning:n})),e.isScreenAccessRequest&&!e.screenShareStatus&&/* @__PURE__ */v(wc,{align:"center",gap:"sm",style:{marginTop:"6px"},children:[/* @__PURE__ */b(fc,{variant:"primary",size:"sm",shape:"pill",onClick:()=>r?.(),children:"Yes"}),/* @__PURE__ */b(fc,{variant:"secondary",size:"sm",shape:"pill",onClick:()=>o?.(),children:"No"})]}),e.isScreenAccessRequest&&e.screenShareStatus&&/* @__PURE__ */b(Rc,{as:"div",variant:"faint",size:"xs",italic:!0,style:{marginTop:"2px"},children:"allowed"===e.screenShareStatus?"Sure":"No"}),c&&/* @__PURE__ */b(wc,{position:"absolute",align:"center",justify:"center",style:{bottom:"4px",right:"4px"},children:/* @__PURE__ */b(Cc,{name:c.name,size:14,style:{color:Ol(i,c.opacity),flexShrink:0}})})]}),
|
|
47
|
-
/* @__PURE__ */b(wc,{shrink:!1,style:{width:"20px"}})]}),!e.isPlaceholder&&/* @__PURE__ */b(Rc,{as:"div",variant:"faint",size:"xxs",align:"right",style:{marginTop:"2px",marginRight:"26px"},children:(l=e.timestamp,(l??/* @__PURE__ */new Date).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}))})]});var l}),ad={boxShadow:Er.button,backgroundColor:"var(--card)",border:"1px solid var(--border)",pointerEvents:"auto"},cd=({messagesEndRef:e,onScreenAccessAllow:t,onScreenAccessDeny:n})=>{const r=Pl(),{state:o,actions:i}=Nl(),{messages:s,isTaskRunning:c}=o,{isPreviewMode:l}=r,[h,f]=p(!1),[m,g]=p(!1),y=d(null),w=u(()=>el(r.widget_body),[r.widget_body]),x=u(()=>[w,...s],[w,s]),S=()=>{if(y.current){const{scrollTop:e,scrollHeight:t,clientHeight:n}=y.current;f(e>200);const r=Math.abs(t-e-n)<50;g(!r&&t>n)}};a(()=>{window.requestAnimationFrame(()=>{e.current&&(!l&&e.current.scrollIntoView({behavior:"auto"}),!l&&S())})},[s.length,l,e]);const k=s[s.length-1],C=k?Re(k.parts).length:0;return a(()=>{const t=y.current;t&&!l&&t.scrollHeight-t.scrollTop-t.clientHeight<120&&window.requestAnimationFrame(()=>e.current?.scrollIntoView({behavior:"auto"}))},[C,l,e]),/* @__PURE__ */v(vc,{position:"relative",height:"full",children:[/* @__PURE__ */v(vc,{ref:y,onScroll:S,role:"log","aria-relevant":"additions",height:"full",overflowY:"auto",paddingX:"lg",paddingY:"sm",style:{backgroundColor:r.widget_background_color.includes("gradient")?"transparent":r.widget_background_color,backgroundImage:Al(r.widget_background_color),scrollbarColor:`${Ol(r.widget_border_color,.3)} ${Ol(r.widget_border_color,.1)}`,scrollbarWidth:"thin"},children:[x.map((e,r)=>/* @__PURE__ */b(sd,{message:e,isLastMessage:r===x.length-1,isTaskRunning:c,onScreenAccessAllow:t,onScreenAccessDeny:n},e.id)),s.length>0&&/* @__PURE__ */b(wc,{justify:"center",style:{marginTop:"12px",marginBottom:"4px"},children:/* @__PURE__ */b(fc,{variant:"bare",onClick:i.clearChatHistory,children:/* @__PURE__ */b(Rc,{size:"xs",variant:"muted",style:{cursor:"pointer"},children:"Clear
|
|
48
|
-
/* @__PURE__ */b(vc,{ref:e},"scroll-anchor")]},"message-list-container"),[{show:h,edge:{top:"8px"},label:"Scroll to top",icon:"arrowUp",onClick:()=>y.current?.scrollTo({top:0,behavior:"smooth"})},{show:m,edge:{bottom:"8px"},label:"Scroll to bottom",icon:"arrowDown",onClick:()=>!l&&e.current?.scrollIntoView({behavior:"smooth"})}].map(({show:e,edge:t,label:n,icon:o,onClick:i})=>e&&/* @__PURE__ */b(wc,{position:"absolute",justify:"center",style:{...t,left:0,right:0,zIndex:10,pointerEvents:"none"},children:/* @__PURE__ */b(Ec,{variant:"secondary",size:"sm",label:n,onClick:i,style:ad,children:/* @__PURE__ */b(Cc,{name:o,size:10,style:{color:r.widget_accent_color}})})},n))]})},ld=[{id:"tell",icon:"chatBubble",flag:"widget_feature_tell"},{id:"show",icon:"mousePointerClick",flag:"widget_feature_show"},{id:"do",icon:"ticktick",flag:"widget_feature_do"}],ud=({onScreenSharingChange:e,toggleScreenShareRef:t,messageInputRef:n})=>{const r=Pl(),{state:o,actions:s}=Nl(),{currentMode:l,isTaskRunning:u,isAwaitingReply:h}=o,[f,m]=p(""),g=d(null),{isScreenSharing:y,isAwaitingScreenAccess:w,showScreenAccessDialog:x,handleScreenAccessDialogAllow:S,handleScreenAccessDialogDismiss:k,handleScreenAccessRequestAllow:C,handleScreenAccessRequestDeny:E,requestScreenAccess:I}=function({onScreenSharingChange:e,toggleScreenShareRef:t,onAddMessage:n,onUpdateMessage:r,onRemoveMessage:o,onSendMessage:s,messages:l}){const[u,d]=p(!1),[h,f]=p(null),[m,g]=p(!1),y=Dc(u),b=Dc(h),v=Dc(e),w=t=>{d(t),e
|
|
47
|
+
/* @__PURE__ */b(wc,{shrink:!1,style:{width:"20px"}})]}),!e.isPlaceholder&&/* @__PURE__ */b(Rc,{as:"div",variant:"faint",size:"xxs",align:"right",style:{marginTop:"2px",marginRight:"26px"},children:(l=e.timestamp,(l??/* @__PURE__ */new Date).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}))})]});var l}),ad={boxShadow:Er.button,backgroundColor:"var(--card)",border:"1px solid var(--border)",pointerEvents:"auto"},cd=({messagesEndRef:e,onScreenAccessAllow:t,onScreenAccessDeny:n})=>{const r=Pl(),{state:o,actions:i}=Nl(),{messages:s,isTaskRunning:c}=o,{isPreviewMode:l}=r,[h,f]=p(!1),[m,g]=p(!1),y=d(null),w=u(()=>el(r.widget_body),[r.widget_body]),x=u(()=>[w,...s],[w,s]),S=()=>{if(y.current){const{scrollTop:e,scrollHeight:t,clientHeight:n}=y.current;f(e>200);const r=Math.abs(t-e-n)<50;g(!r&&t>n)}};a(()=>{window.requestAnimationFrame(()=>{e.current&&(!l&&e.current.scrollIntoView({behavior:"auto"}),!l&&S())})},[s.length,l,e]);const k=s[s.length-1],C=k?Re(k.parts).length:0;return a(()=>{const t=y.current;t&&!l&&t.scrollHeight-t.scrollTop-t.clientHeight<120&&window.requestAnimationFrame(()=>e.current?.scrollIntoView({behavior:"auto"}))},[C,l,e]),/* @__PURE__ */v(vc,{position:"relative",height:"full",children:[/* @__PURE__ */v(vc,{ref:y,onScroll:S,role:"log","aria-relevant":"additions",height:"full",overflowY:"auto",paddingX:"lg",paddingY:"sm",style:{backgroundColor:r.widget_background_color.includes("gradient")?"transparent":r.widget_background_color,backgroundImage:Al(r.widget_background_color),scrollbarColor:`${Ol(r.widget_border_color,.3)} ${Ol(r.widget_border_color,.1)}`,scrollbarWidth:"thin"},children:[x.map((e,r)=>/* @__PURE__ */b(sd,{message:e,isLastMessage:r===x.length-1,isTaskRunning:c,onScreenAccessAllow:t,onScreenAccessDeny:n},e.id)),s.length>0&&/* @__PURE__ */b(wc,{justify:"center",style:{marginTop:"12px",marginBottom:"4px"},children:/* @__PURE__ */b(fc,{variant:"bare",onClick:i.clearChatHistory,children:/* @__PURE__ */b(Rc,{size:"xs",variant:"muted",style:{cursor:"pointer"},children:"Clear chat"})})}),
|
|
48
|
+
/* @__PURE__ */b(vc,{ref:e},"scroll-anchor")]},"message-list-container"),[{show:h,edge:{top:"8px"},label:"Scroll to top",icon:"arrowUp",onClick:()=>y.current?.scrollTo({top:0,behavior:"smooth"})},{show:m,edge:{bottom:"8px"},label:"Scroll to bottom",icon:"arrowDown",onClick:()=>!l&&e.current?.scrollIntoView({behavior:"smooth"})}].map(({show:e,edge:t,label:n,icon:o,onClick:i})=>e&&/* @__PURE__ */b(wc,{position:"absolute",justify:"center",style:{...t,left:0,right:0,zIndex:10,pointerEvents:"none"},children:/* @__PURE__ */b(Ec,{variant:"secondary",size:"sm",label:n,onClick:i,style:ad,children:/* @__PURE__ */b(Cc,{name:o,size:10,style:{color:r.widget_accent_color}})})},n))]})},ld=[{id:"tell",icon:"chatBubble",flag:"widget_feature_tell"},{id:"show",icon:"mousePointerClick",flag:"widget_feature_show"},{id:"do",icon:"ticktick",flag:"widget_feature_do"}],ud=({onScreenSharingChange:e,toggleScreenShareRef:t,messageInputRef:n})=>{const r=Pl(),{state:o,actions:s}=Nl(),{currentMode:l,isTaskRunning:u,isAwaitingReply:h}=o,[f,m]=p(""),g=d(null),{isScreenSharing:y,isAwaitingScreenAccess:w,showScreenAccessDialog:x,handleScreenAccessDialogAllow:S,handleScreenAccessDialogDismiss:k,handleScreenAccessRequestAllow:C,handleScreenAccessRequestDeny:E,requestScreenAccess:I}=function({onScreenSharingChange:e,toggleScreenShareRef:t,onAddMessage:n,onUpdateMessage:r,onRemoveMessage:o,onSendMessage:s,messages:l}){const[u,d]=p(!1),[h,f]=p(null),[m,g]=p(!1),y=Dc(u),b=Dc(h),v=Dc(e),w=t=>{d(t),e(t)},x=e=>{e&&o(e),n(tl("Screen sharing stopped","stopped-sharing")),f(null)},S=Dc(x);a(()=>{const e=()=>{const e=null!==wr(),t=y.current,n=b.current;e!==t&&(y.current=e,d(e),v.current(e)),t&&!e&&n&&S.current(n)};e();const t=setInterval(e,1e3);return()=>clearInterval(t)},[S,v,b,y]);const k=l[Yc(l,e=>!!e.isScreenAccessRequest&&!e.screenShareStatus)]??null,C=()=>{k?.pendingContent&&s(k.pendingContent,k.mode,!0)},E=e=>{k&&r(k.id,{screenShareStatus:e})},I=async()=>{try{const e=await async function(){if(!1===Ue.getContext().config?.use_screenshare)throw new Error("Screen sharing is disabled for this widget");return wr()||vr||(vr=(async()=>{try{const e=await navigator.mediaDevices.getDisplayMedia({video:!0,audio:!1,preferCurrentTab:!0});if(!e||0===e.getVideoTracks().length)throw new Error("Screen sharing permission denied or no video track available");return br=e,e.getVideoTracks()[0]?.addEventListener("ended",()=>{br=null}),e}finally{vr=null}})())}();w(!0),E("allowed"),n(tl("Screen sharing started","started-screenshare"));const t=(e=>Zc("screenshare","user","",{mode:"show",videoStream:e}))(e);f(t.id),n(t)}catch(e){Ae("[ChatView] Screen share declined or unavailable:",e),w(!1),E("denied")}C()},M=Dc(I),T=i(()=>M.current(),[M]),R=Dc(()=>{E("denied"),C()}),O=i(()=>R.current(),[R]);return c(t,()=>()=>{u?(xr(),w(!1),x(h)):g(!0)}),{isScreenSharing:u,isAwaitingScreenAccess:null!==k,showScreenAccessDialog:m,handleScreenAccessDialogAllow:async()=>{g(!1),await I()},handleScreenAccessDialogDismiss:()=>{g(!1)},handleScreenAccessRequestAllow:T,handleScreenAccessRequestDeny:O,requestScreenAccess:(e,t)=>{k||n(((e,t)=>Zc("screen-access-request","agent","Can I take a look at your screen?",{mode:e,isScreenAccessRequest:!0,pendingContent:t}))(e,t))}}}({onScreenSharingChange:e,toggleScreenShareRef:t,onAddMessage:s.addMessage,onUpdateMessage:s.updateMessage,onRemoveMessage:s.removeMessage,onSendMessage:s.messageDispatch,messages:o.messages}),M=w||h;/* @__PURE__ */
|
|
49
49
|
return v(xc,{height:"full",children:[x&&/* @__PURE__ */b(Gu,{open:x,onClose:k,title:"Can I take a look at your screen?",description:"By allowing screen access, Marketrix can understand your current context to guide you better and complete tasks on your behalf.",onConfirm:S,confirmLabel:"Yes",cancelLabel:"No",finalFocusRef:n}),
|
|
50
50
|
/* @__PURE__ */b(xc,{grow:!0,overflow:"hidden",paddingY:"2xs",minHeight:"0",children:/* @__PURE__ */b(Ul,{label:"Chat",fallback:/* @__PURE__ */b(Rc,{as:"div",size:"xs",align:"center",variant:"muted",style:{padding:"16px"},children:"Something went wrong displaying messages. Please refresh."}),children:/* @__PURE__ */b(cd,{messagesEndRef:g,onScreenAccessAllow:C,onScreenAccessDeny:E})})}),
|
|
51
51
|
/* @__PURE__ */b(vc,{variant:"floatingCard",style:{marginTop:"auto"},children:/* @__PURE__ */b(Mu,{ref:n,value:f,onChange:m,onSubmit:()=>{if(!f.trim()||M)return;const e=f.trim();m(""),s.addMessage(Qc(e,l)),!1===r.use_screenshare||"show"!==l&&"do"!==l||y?s.messageDispatch(e,l,!0).then(t=>{t||m(t=>t||e)}):I(l,e)},modes:ld.filter(({flag:e})=>r[e]).map(({id:e,icon:t})=>({id:e,icon:t,label:Vc(e)})),activeMode:l,onModeChange:e=>{e!==l&&(s.addMessage(tl(`Switched to ${Vc(e)} mode`,"mode-change")),s.setMode(e))},disabled:M,taskRunning:u,onStop:()=>{zr.cleanup(),s.stopTask()}})})]})},dd=[{id:"show-add-product",text:"Show me how to add a new product",type:"show"},{id:"show-login",text:"Show me how to login",type:"show"},{id:"do-login",text:"Do the login process for me",type:"do"},{id:"show-revenue",text:"Show me the revenue metrics",type:"show"},{id:"tell-conversion-rate",text:"What does my conversion rate mean and how can I improve it?",type:"tell"}],pd=({onNavigateToChat:e,onChipClick:t})=>{const n=Pl(),{messages:r}=Nl().state,o=function(e){const t=e.widget_chips;return t?.length?t.map((e,t)=>({id:`chip-${e.chip_text.replace(/\s+/g,"-").toLowerCase()}-${t}`,text:"show"===e.chip_mode?`Show me ${e.chip_text.replace(/^Show me\s+/i,"")}`:"do"===e.chip_mode?`Do ${e.chip_text.replace(/^Do\s+/i,"")}`:e.chip_text,type:e.chip_mode})):dd}(n),i=Re(r[r.length-1]?.parts??[])||"Message";/* @__PURE__ */
|
|
52
52
|
return v(xc,{height:"full",overflow:"hidden",children:[/* @__PURE__ */v(xc,{grow:!0,overflowY:"auto",padding:"lg",children:[/* @__PURE__ */v(vc,{style:{textAlign:"center",paddingTop:"8px",paddingBottom:"16px"},children:[/* @__PURE__ */b(Rc,{as:"h2",size:"lg",weight:"semibold",children:n.widget_greeting}),/* @__PURE__ */b(Rc,{as:"p",variant:"muted",size:"sm",style:{marginTop:"2px"},children:n.widget_body})]}),/* @__PURE__ */v(xc,{gap:"sm",children:[/* @__PURE__ */v(fc,{variant:"primary",full:!0,onClick:e,style:{paddingTop:"10px",paddingBottom:"10px"},children:[/* @__PURE__ */b(Cc,{name:"chat",size:16}),"Ask a question"]}),o.map(r=>/* @__PURE__ */b(fc,{elevation:"card",size:"sm",variant:"chip",full:!0,onClick:n=>(async(n,r)=>{r.preventDefault(),r.stopPropagation(),e(),t(n)})(r,n),style:{color:n.widget_text_color,paddingTop:"8px",paddingBottom:"8px"},children:/* @__PURE__ */b(Rc,{as:"span",weight:"normal",leading:"tight",children:r.text})},r.id))]})]}),r.length>0&&/* @__PURE__ */v(vc,{variant:"floatingCard",children:[
|
|
53
|
-
/* @__PURE__ */b(Rc,{as:"p",size:"xs",weight:"semibold",style:{marginBottom:"2px"},children:"Recent
|
|
53
|
+
/* @__PURE__ */b(Rc,{as:"p",size:"xs",weight:"semibold",style:{marginBottom:"2px"},children:"Recent chat"}),
|
|
54
54
|
/* @__PURE__ */b(Rc,{as:"p",size:"xs",variant:"muted",style:{display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden"},children:i}),
|
|
55
|
-
/* @__PURE__ */b(fc,{variant:"bare",onClick:e,style:{marginTop:"4px"},children:/* @__PURE__ */b(Rc,{as:"span",size:"xs",variant:"muted",children:"Continue
|
|
55
|
+
/* @__PURE__ */b(fc,{variant:"bare",onClick:e,style:{marginTop:"4px"},children:/* @__PURE__ */b(Rc,{as:"span",size:"xs",variant:"muted",children:"Continue chat →"})})]})]})},hd=[{id:"home",icon:"home",label:"Home"},{id:"chat",icon:"chat",label:"Chat"}],fd=()=>/* @__PURE__ */b(ku,{render:/* @__PURE__ */b(wc,{align:"center",justify:"around",shrink:!1,border:"top"}),style:{height:48},children:hd.map(e=>/* @__PURE__ */v(cu,{value:e.id,render:/* @__PURE__ */b(fc,{stacked:!0,variant:"tab"}),children:[
|
|
56
56
|
/* @__PURE__ */b("span",{className:"mtx-tab-underline"}),
|
|
57
57
|
/* @__PURE__ */b(Rc,{as:"span",inheritColor:!0,"aria-hidden":"true",children:/* @__PURE__ */b(Cc,{name:e.icon,size:20})}),
|
|
58
|
-
/* @__PURE__ */b(Rc,{as:"span",size:"xs",align:"center",inheritColor:!0,truncate:!0,block:!0,children:e.label})]},e.id))});function md(e){const t=e.getRootNode();return(t instanceof ShadowRoot?t.activeElement:document.activeElement)??null}function gd({width:e,height:t}){return{width:Math.min(Math.max(e,280),600),height:Math.min(Math.max(t,320),Math.floor(.85*window.innerHeight))}}function yd(e,t){const n=/^\s*(\d+(?:\.\d+)?)px\s*$/.exec(e??"");return n?Number(n[1]):t}var bd=["home","chat"],vd=()=>{const e=Pl(),{state:t,actions:n}=Nl(),{isOpen:r,activeView:o}=t,{isPreviewMode:s}=e,{widthPx:c,heightPx:l,grip:h,onResizeStart:f,onResizeKeyDown:m,containerRef:g}=function(e,t,n,r,o){const s=De("marketrix_widget_size",r),c=d(null),l=u(()=>(e=>{const t=zl(e),n=Bl[t.vertical],r=Bl[t.horizontal];return{vertical:n,horizontal:r,growX:"left"===r?-1:1,growY:"top"===n?-1:1,cursor:"top"===n==("left"===r)?"nwse-resize":"nesw-resize"}})(n),[n]),[h,f]=p(()=>function(e){try{const t=JSON.parse(Fe(e)??"null");return function(e){return"object"==typeof e&&null!==e&&"number"==typeof e.width&&"number"==typeof e.height}(t)?gd(t):null}catch(t){return Ae("[useResize] Ignoring an unparseable stored size:",t),null}}(s)??gd({width:yd(e,360),height:yd(t,450)})),m=d(h);m.current=h;const g=d(null);a(()=>()=>g.current?.(),[]);const y=i(e=>{if(e.preventDefault(),e.stopPropagation(),o)return;const t=e.clientX,n=e.clientY,r=m.current.width,i=m.current.height,{growX:a,growY:u,cursor:d}=l;c.current&&(c.current.dataset.resizing="true");const p=e=>{const o=gd({width:r+(e.clientX-t)*a,height:i+(e.clientY-n)*u});m.current=o,c.current&&(c.current.style.width=`${o.width}px`,c.current.style.height=`${o.height}px`)},h=()=>{document.removeEventListener("mousemove",p),document.removeEventListener("mouseup",h),document.body.style.cursor="",document.body.style.userSelect="",g.current=null,c.current&&delete c.current.dataset.resizing,f({...m.current}),ze(s,JSON.stringify(m.current))};document.body.style.cursor=d,document.body.style.userSelect="none",document.addEventListener("mousemove",p),document.addEventListener("mouseup",h),g.current=h},[o,s,l]),b=i(e=>{if(o)return;const t={ArrowLeft:{width:-16,height:0},ArrowRight:{width:16,height:0},ArrowUp:{width:0,height:-16},ArrowDown:{width:0,height:16}}[e.key];if(!t)return;e.preventDefault();const n=gd({width:m.current.width+t.width,height:m.current.height+t.height});m.current=n,f(n),ze(s,JSON.stringify(n))},[o,s]);return{widthPx:`${h.width}px`,heightPx:`${h.height}px`,grip:l,onResizeStart:y,onResizeKeyDown:b,containerRef:c}}(e.widget_width,e.widget_height,e.widget_position,e,s),y=d(null),w="chat"===o?"forward":"back";!function(e,t,n){const r=d(!1),o=d(null);a(()=>{if(!t)return r.current&&(o.current?.focus({preventScroll:!0}),o.current=null),void(r.current=!1);const i=e.current;if(!i)return;r.current||(o.current=md(i)),r.current=!0,(n
|
|
58
|
+
/* @__PURE__ */b(Rc,{as:"span",size:"xs",align:"center",inheritColor:!0,truncate:!0,block:!0,children:e.label})]},e.id))});function md(e){const t=e.getRootNode();return(t instanceof ShadowRoot?t.activeElement:document.activeElement)??null}function gd({width:e,height:t}){return{width:Math.min(Math.max(e,280),600),height:Math.min(Math.max(t,320),Math.floor(.85*window.innerHeight))}}function yd(e,t){const n=/^\s*(\d+(?:\.\d+)?)px\s*$/.exec(e??"");return n?Number(n[1]):t}var bd=["home","chat"],vd=()=>{const e=Pl(),{state:t,actions:n}=Nl(),{isOpen:r,activeView:o}=t,{isPreviewMode:s}=e,{widthPx:c,heightPx:l,grip:h,onResizeStart:f,onResizeKeyDown:m,containerRef:g}=function(e,t,n,r,o){const s=De("marketrix_widget_size",r),c=d(null),l=u(()=>(e=>{const t=zl(e),n=Bl[t.vertical],r=Bl[t.horizontal];return{vertical:n,horizontal:r,growX:"left"===r?-1:1,growY:"top"===n?-1:1,cursor:"top"===n==("left"===r)?"nwse-resize":"nesw-resize"}})(n),[n]),[h,f]=p(()=>function(e){try{const t=JSON.parse(Fe(e)??"null");return function(e){return"object"==typeof e&&null!==e&&"number"==typeof e.width&&"number"==typeof e.height}(t)?gd(t):null}catch(t){return Ae("[useResize] Ignoring an unparseable stored size:",t),null}}(s)??gd({width:yd(e,360),height:yd(t,450)})),m=d(h);m.current=h;const g=d(null);a(()=>()=>g.current?.(),[]);const y=i(e=>{if(e.preventDefault(),e.stopPropagation(),o)return;const t=e.clientX,n=e.clientY,r=m.current.width,i=m.current.height,{growX:a,growY:u,cursor:d}=l;c.current&&(c.current.dataset.resizing="true");const p=e=>{const o=gd({width:r+(e.clientX-t)*a,height:i+(e.clientY-n)*u});m.current=o,c.current&&(c.current.style.width=`${o.width}px`,c.current.style.height=`${o.height}px`)},h=()=>{document.removeEventListener("mousemove",p),document.removeEventListener("mouseup",h),document.body.style.cursor="",document.body.style.userSelect="",g.current=null,c.current&&delete c.current.dataset.resizing,f({...m.current}),ze(s,JSON.stringify(m.current))};document.body.style.cursor=d,document.body.style.userSelect="none",document.addEventListener("mousemove",p),document.addEventListener("mouseup",h),g.current=h},[o,s,l]),b=i(e=>{if(o)return;const t={ArrowLeft:{width:-16,height:0},ArrowRight:{width:16,height:0},ArrowUp:{width:0,height:-16},ArrowDown:{width:0,height:16}}[e.key];if(!t)return;e.preventDefault();const n=gd({width:m.current.width+t.width,height:m.current.height+t.height});m.current=n,f(n),ze(s,JSON.stringify(n))},[o,s]);return{widthPx:`${h.width}px`,heightPx:`${h.height}px`,grip:l,onResizeStart:y,onResizeKeyDown:b,containerRef:c}}(e.widget_width,e.widget_height,e.widget_position,e,s),y=d(null),w="chat"===o?"forward":"back";!function(e,t,n){const r=d(!1),o=d(null);a(()=>{if(!t)return r.current&&(o.current?.focus({preventScroll:!0}),o.current=null),void(r.current=!1);const i=e.current;if(!i)return;r.current||(o.current=md(i)),r.current=!0,(n.focusTargetRef?.current??Or(i)[0])?.focus({preventScroll:!0});const s=e=>{const t=md(i);if(!t||!i.contains(t))return;if("Escape"===e.key)return void n.onEscape();if("Tab"!==e.key)return;const r=Or(i);if(0===r.length)return;const o=r.indexOf(t);-1!==o&&(e.shiftKey?0===o&&(e.preventDefault(),r[r.length-1]?.focus()):o===r.length-1&&(e.preventDefault(),r[0]?.focus()))};return document.addEventListener("keydown",s,!0),()=>document.removeEventListener("keydown",s,!0)},[t,e,n.focusTargetRef,n.onEscape])}(g,r,{onEscape:n.closeWidget,focusTargetRef:"chat"===o?y:void 0});const x=$l(e.widget_position),[S,k]=p(!1),C=d(null);if(!r)return null;const E=Al(e.widget_background_color),{vertical:I,horizontal:M}=zl(e.widget_position),T="chat"===o&&!1!==e.use_screenshare?()=>C.current?.():void 0;/* @__PURE__ */
|
|
59
59
|
return v(xc,{ref:g,position:s?"absolute":"fixed",rounded:"lg",border:!0,overflow:"hidden",style:{zIndex:e.widget_position_z_index,backgroundImage:E,transformOrigin:`${I} ${M}`,width:c,height:l,fontSize:"14px",...x,pointerEvents:"auto",scrollbarWidth:"thin",animation:"messenger-entrance 300ms cubic-bezier(0, 1.2, 1, 1)",boxShadow:Er.panel},children:[
|
|
60
60
|
/* @__PURE__ */b(Eu,{title:e.widget_header,subtitle:e.widget_body,onClose:n.closeWidget,controls:T&&/* @__PURE__ */v(Ec,{variant:"ghost",size:"sm",label:S?"Stop screen sharing":"Start screen sharing",onClick:T,children:[S&&/* @__PURE__ */b(Cu,{style:{position:"absolute",top:"2px",right:"2px"}}),/* @__PURE__ */b(Cc,{name:"screenShare",size:16})]})}),
|
|
61
61
|
/* @__PURE__ */v(tu,{value:o,onValueChange:e=>{"string"==typeof e&&(e=>bd.includes(e))(e)&&n.setActiveView(e)},render:/* @__PURE__ */b(xc,{grow:!0,minHeight:"0"}),children:[/* @__PURE__ */v(xc,{grow:!0,overflow:"hidden",minHeight:"0",children:[/* @__PURE__ */b(du,{value:"home","data-view-transition":!0,"data-direction":w,style:{width:"100%",height:"100%"},children:/* @__PURE__ */b(pd,{onNavigateToChat:()=>n.setActiveView("chat"),onChipClick:e=>{n.addMessage(Qc(e.text,e.type,"chip-message")),n.setMode(e.type),n.messageDispatch(e.text,e.type,!0)}})}),/* @__PURE__ */b(du,{value:"chat","data-view-transition":!0,"data-direction":w,style:{width:"100%",height:"100%"},children:/* @__PURE__ */b(ud,{onScreenSharingChange:k,toggleScreenShareRef:C,messageInputRef:y})})]}),/* @__PURE__ */b(fd,{})]}),!s&&/* @__PURE__ */b("div",{role:"separator","aria-label":`Resize widget from ${h.vertical} ${h.horizontal}. Use arrow keys to resize.`,title:"Drag to resize",tabIndex:0,style:{position:"absolute",[h.vertical]:0,[h.horizontal]:0,width:"20px",height:"20px",padding:"4px",touchAction:"none",zIndex:10,display:"flex",alignItems:"top"===h.vertical?"flex-start":"flex-end",justifyContent:"left"===h.horizontal?"flex-start":"flex-end",cursor:h.cursor},onMouseDown:f,onKeyDown:m})]})},wd=({config:e})=>{const[t,n]=p(!1),[r,o]=p(null),{state:i,actions:s}=Nl(),c=e.isPreviewMode??!1;var l;l=i.isOpen,a(()=>{if(!l)return;if(!window.matchMedia("(max-width: 767px)").matches)return;const e=document.documentElement,t=document.body,n=e.style.overflow,r=t.style.overflow;return e.style.overflow="hidden",t.style.overflow="hidden",()=>{e.style.overflow=n,t.style.overflow=r}},[l]);const u=De("marketrix_widget_position",e),[d,h]=p(()=>{const t=c?null:Fe(u);return(e=>Fl.includes(e))(t)?t:e.widget_position??"bottom_right"});a(()=>{if(i.isOpen||c||!e.widget_greeting_toast)return void n(!1);const t=setTimeout(()=>n(!0),2e3);return()=>clearTimeout(t)},[i.isOpen,c,e.widget_greeting_toast]);const f=!1===e.show_widget||"hidden"===e.widget_appearance;if(!c&&f)return null;const m=Math.max(e.widget_position_z_index??0,2147483002),g={...e,widget_position:d,widget_position_z_index:m,isPreviewMode:c},y=i.isAwaitingReply||i.isTaskRunning,w=(x=function(e={}){const t=Object.fromEntries(Object.entries(e).filter(([,e])=>void 0!==e)),n={..._l,...t};return{color:{background:n.widget_background_color,foreground:n.widget_text_color,foregroundMuted:Ol(n.widget_text_color,.6),foregroundFaint:Ol(n.widget_text_color,.4),border:n.widget_border_color,primary:n.widget_accent_color,primaryForeground:Rl(n.widget_accent_color),primaryHover:Ol(n.widget_accent_color,.85),secondary:n.widget_secondary_color,secondaryForeground:Rl(n.widget_secondary_color),secondaryBg:Ol(n.widget_secondary_color,.2),secondaryHover:Ol(n.widget_secondary_color,.3),ring:Rl(n.widget_background_color)},radius:"12px",motion:{durationAnimation:"300ms",durationFade:"200ms"}}}(e),{"--foreground":x.color.foreground,"--card":x.color.background,"--card-foreground":x.color.foreground,"--primary":x.color.primary,"--foreground-muted":x.color.foregroundMuted,"--foreground-faint":x.color.foregroundFaint,"--primary-foreground":x.color.primaryForeground,"--primary-hover":x.color.primaryHover,"--secondary":x.color.secondary,"--secondary-foreground":x.color.secondaryForeground,"--secondary-bg":x.color.secondaryBg,"--secondary-hover":x.color.secondaryHover,"--border":x.color.border,"--ring":x.color.ring,"--ring-offset":x.color.background,"--radius":x.radius,"--duration-animation":x.motion.durationAnimation,"--duration-fade":x.motion.durationFade});var x;/* @__PURE__ */
|