@marketrix.ai/widget 4.0.118 → 4.0.119
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.
|
@@ -17,6 +17,10 @@
|
|
|
17
17
|
* pill 20, banner 30 — and the banner is `pointerEvents: 'none'` so its full-bleed wrapper never
|
|
18
18
|
* swallows clicks meant for the message. The pulsing dot in the Live pill is the shared `mtx-live-dot`,
|
|
19
19
|
* the same one the header's screen-share button wears; it paints in `currentColor`.
|
|
20
|
+
*
|
|
21
|
+
* The video always sits on a dark scrim regardless of tenant theme, so the `VIDEO_*`/`LIVE_PILL_BG`/
|
|
22
|
+
* `CAPTION_BG` colors below stay literal rather than tenant `var(--*)` tokens — named once here instead
|
|
23
|
+
* of repeated inline per caller.
|
|
20
24
|
*/
|
|
21
25
|
import React from 'react';
|
|
22
26
|
interface VideoStreamDisplayProps {
|
|
@@ -15,6 +15,7 @@ export declare function useResize(settingsWidth: string | undefined, settingsHei
|
|
|
15
15
|
cursor: string;
|
|
16
16
|
};
|
|
17
17
|
onResizeStart: (e: React.MouseEvent) => void;
|
|
18
|
+
onResizeKeyDown: (e: React.KeyboardEvent) => void;
|
|
18
19
|
containerRef: React.RefObject<HTMLDivElement | null>;
|
|
19
20
|
};
|
|
20
21
|
export declare const MessengerShell: React.FC;
|
package/dist/widget.mjs
CHANGED
|
@@ -49,16 +49,16 @@ return v(ic,{style:{marginTop:"10px"},role:"article","aria-roledescription":"mes
|
|
|
49
49
|
return v(ic,{height:"full",children:[x&&/* @__PURE__ */b(Wu,{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(ic,{grow:!0,overflow:"hidden",paddingY:"2xs",minHeight:"0",children:/* @__PURE__ */b(Dl,{label:"Chat",fallback:/* @__PURE__ */b(hc,{as:"div",size:"xs",align:"center",variant:"muted",style:{padding:"16px"},children:"Something went wrong displaying messages. Please refresh."}),children:/* @__PURE__ */b(Qu,{messagesEndRef:g,onScreenAccessAllow:C,onScreenAccessDeny:E})})}),
|
|
51
51
|
/* @__PURE__ */b(rc,{variant:"floatingCard",style:{marginTop:"auto"},children:/* @__PURE__ */b(bu,{ref:n,value:f,onChange:m,onSubmit:()=>{if(!f.trim()||M)return;const e=f.trim();m(""),s.addMessage(Vc(e,l)),!1===r.use_screenshare||"show"!==l&&"do"!==l||y?s.messageDispatch(e,l,!0):I(l,e)},modes:ed.filter(({flag:e})=>r[e]).map(({id:e,icon:t})=>({id:e,icon:t,label:$c(e)})),activeMode:l,onModeChange:e=>{e!==l&&(s.addMessage(Kc(`Switched to ${$c(e)} mode`,"mode-change")),s.setMode(e))},disabled:M,taskRunning:u,onStop:()=>{Ac.cleanup(),s.stopTask()}})})]})},rd=[{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"}],od=({onNavigateToChat:e,onChipClick:t})=>{const n=El(),{messages:r}=Il().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})):rd}(n);/* @__PURE__ */
|
|
52
|
-
return v(ic,{height:"full",overflow:"hidden",children:[/* @__PURE__ */v(ic,{grow:!0,overflowY:"auto",padding:"lg",children:[/* @__PURE__ */v(rc,{style:{textAlign:"center",paddingTop:"8px",paddingBottom:"16px"},children:[/* @__PURE__ */b(hc,{as:"h2",size:"lg",weight:"semibold",children:n.widget_greeting}),/* @__PURE__ */b(hc,{as:"p",variant:"muted",size:"sm",style:{marginTop:"2px"},children:n.widget_body})]}),/* @__PURE__ */v(ic,{gap:"sm",children:[/* @__PURE__ */v(Za,{type:"button",variant:"primary",full:!0,onClick:e,
|
|
52
|
+
return v(ic,{height:"full",overflow:"hidden",children:[/* @__PURE__ */v(ic,{grow:!0,overflowY:"auto",padding:"lg",children:[/* @__PURE__ */v(rc,{style:{textAlign:"center",paddingTop:"8px",paddingBottom:"16px"},children:[/* @__PURE__ */b(hc,{as:"h2",size:"lg",weight:"semibold",children:n.widget_greeting}),/* @__PURE__ */b(hc,{as:"p",variant:"muted",size:"sm",style:{marginTop:"2px"},children:n.widget_body})]}),/* @__PURE__ */v(ic,{gap:"sm",children:[/* @__PURE__ */v(Za,{type:"button",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(Za,{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(hc,{as:"span",weight:"normal",leading:"tight",children:r.text})},r.id))]})]}),r.length>0&&/* @__PURE__ */v(rc,{variant:"floatingCard",children:[
|
|
53
53
|
/* @__PURE__ */b(hc,{as:"p",size:"xs",weight:"semibold",style:{marginBottom:"2px"},children:"Recent conversation"}),
|
|
54
54
|
/* @__PURE__ */b(hc,{as:"p",size:"xs",variant:"muted",style:{display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden"},children:r[r.length-1]?.content||"Message"}),
|
|
55
55
|
/* @__PURE__ */b(Za,{type:"button",variant:"bare",onClick:e,style:{marginTop:"4px"},children:/* @__PURE__ */b(hc,{as:"span",size:"xs",variant:"muted",children:"Continue conversation →"})})]})]})},id=[{id:"home",icon:"home",label:"Home"},{id:"chat",icon:"chat",label:"Chat"}],sd=()=>/* @__PURE__ */b(fu,{render:/* @__PURE__ */b(oc,{align:"center",justify:"around",shrink:!1,border:"top"}),style:{height:48},children:id.map(e=>/* @__PURE__ */v(Ql,{value:e.id,render:/* @__PURE__ */b(Za,{stacked:!0,variant:"tab"}),children:[
|
|
56
56
|
/* @__PURE__ */b("span",{className:"mtx-tab-underline"}),
|
|
57
57
|
/* @__PURE__ */b(hc,{as:"span",inheritColor:!0,"aria-hidden":"true",children:/* @__PURE__ */b(cc,{name:e.icon,size:20})}),
|
|
58
|
-
/* @__PURE__ */b(hc,{as:"span",size:"xs",align:"center",inheritColor:!0,truncate:!0,block:!0,children:e.label})]},e.id))});function ad(e){const t=e.getRootNode();return(t instanceof ShadowRoot?t.activeElement:document.activeElement)??null}function cd({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 ld(e,t){const n=/^\s*(\d+(?:\.\d+)?)px\s*$/.exec(e??"");return n?Number(n[1]):t}var ud=()=>{const e=El(),{state:t,actions:n}=Il(),{isOpen:r,activeView:o}=t,{isPreviewMode:s}=e,{widthPx:c,heightPx:l,grip:h,onResizeStart:f,containerRef:
|
|
59
|
-
return v(ic,{ref:
|
|
60
|
-
/* @__PURE__ */b(gu,{title:e.widget_header,subtitle:e.widget_body,onClose:n.closeWidget,controls:
|
|
61
|
-
/* @__PURE__ */v(Vl,{value:o,onValueChange:e=>n.setActiveView(e),render:/* @__PURE__ */b(ic,{grow:!0,minHeight:"0"}),children:[/* @__PURE__ */v(ic,{grow:!0,overflow:"hidden",minHeight:"0",children:[/* @__PURE__ */b(nu,{value:"home","data-view-transition":!0,"data-direction":
|
|
58
|
+
/* @__PURE__ */b(hc,{as:"span",size:"xs",align:"center",inheritColor:!0,truncate:!0,block:!0,children:e.label})]},e.id))});function ad(e){const t=e.getRootNode();return(t instanceof ShadowRoot?t.activeElement:document.activeElement)??null}function cd({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 ld(e,t){const n=/^\s*(\d+(?:\.\d+)?)px\s*$/.exec(e??"");return n?Number(n[1]):t}var ud=()=>{const e=El(),{state:t,actions:n}=Il(),{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=_e("marketrix_widget_size",r),a=d(null),c=u(()=>(e=>{const t=Rl(e),n=Al[t.vertical],r=Al[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]),[l,h]=p(()=>function(e){try{const t=JSON.parse(Pe(e)??"null");return function(e){return"object"==typeof e&&null!==e&&"number"==typeof e.width&&"number"==typeof e.height}(t)?cd(t):null}catch(t){return Oe("[useResize] Ignoring an unparseable stored size:",t),null}}(s)??cd({width:ld(e,360),height:ld(t,450)})),f=d(l);f.current=l;const m=i(e=>{if(e.preventDefault(),e.stopPropagation(),o)return;const t=e.clientX,n=e.clientY,r=f.current.width,i=f.current.height,{growX:l,growY:u,cursor:d}=c;a.current&&(a.current.dataset.resizing="true");const p=e=>{const o=cd({width:r+(e.clientX-t)*l,height:i+(e.clientY-n)*u});f.current=o,a.current&&(a.current.style.width=`${o.width}px`,a.current.style.height=`${o.height}px`)},m=()=>{document.removeEventListener("mousemove",p),document.removeEventListener("mouseup",m),document.body.style.cursor="",document.body.style.userSelect="",a.current&&delete a.current.dataset.resizing,h({...f.current}),Ne(s,JSON.stringify(f.current))};document.body.style.cursor=d,document.body.style.userSelect="none",document.addEventListener("mousemove",p),document.addEventListener("mouseup",m)},[o,s,c]),g=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=cd({width:f.current.width+t.width,height:f.current.height+t.height});f.current=n,h(n),Ne(s,JSON.stringify(n))},[o,s]);return{widthPx:`${l.width}px`,heightPx:`${l.height}px`,grip:c,onResizeStart:m,onResizeKeyDown:g,containerRef:a}}(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=ad(i)),r.current=!0,(n?.focusTargetRef?.current??bc(i)[0])?.focus({preventScroll:!0});const s=e=>{const t=ad(i);if(!t||!i.contains(t))return;if("Escape"===e.key)return void n?.onEscape?.();if("Tab"!==e.key)return;const r=bc(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=Ol(e.widget_position),[S,k]=p(!1),C=d(null);if(!r)return null;const E=Sl(e.widget_background_color),{vertical:I,horizontal:M}=Rl(e.widget_position),T="chat"===o&&!1!==e.use_screenshare?()=>C.current?.():void 0;/* @__PURE__ */
|
|
59
|
+
return v(ic,{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:La.panel},children:[
|
|
60
|
+
/* @__PURE__ */b(gu,{title:e.widget_header,subtitle:e.widget_body,onClose:n.closeWidget,controls:T&&/* @__PURE__ */v(lc,{variant:"ghost",size:"sm",label:S?"Stop screen sharing":"Start screen sharing",onClick:T,children:[S&&/* @__PURE__ */b(mu,{style:{position:"absolute",top:"2px",right:"2px"}}),/* @__PURE__ */b(cc,{name:"screenShare",size:16})]})}),
|
|
61
|
+
/* @__PURE__ */v(Vl,{value:o,onValueChange:e=>n.setActiveView(e),render:/* @__PURE__ */b(ic,{grow:!0,minHeight:"0"}),children:[/* @__PURE__ */v(ic,{grow:!0,overflow:"hidden",minHeight:"0",children:[/* @__PURE__ */b(nu,{value:"home","data-view-transition":!0,"data-direction":w,style:{width:"100%",height:"100%"},children:/* @__PURE__ */b(od,{onNavigateToChat:()=>n.setActiveView("chat"),onChipClick:e=>{n.addMessage(Vc(e.text,e.type,"chip-message")),n.setMode(e.type),n.messageDispatch(e.text,e.type,!0)}})}),/* @__PURE__ */b(nu,{value:"chat","data-view-transition":!0,"data-direction":w,style:{width:"100%",height:"100%"},children:/* @__PURE__ */b(nd,{onScreenSharingChange:k,toggleScreenShareRef:C,messageInputRef:y})})]}),/* @__PURE__ */b(sd,{})]}),!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})]})},dd=({config:e})=>{const[t,n]=p(!1),[r,o]=p(null),{state:i,actions:s}=Il(),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,d]=p(e.widget_position??"bottom_right"),h=_e("marketrix_widget_position",e);a(()=>{const t=c?null:Pe(h);(e=>Tl.includes(e))(t)?d(t):d(e.widget_position??"bottom_right")},[c,h,e.widget_position]),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:u,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={...kl,...t};return{color:{background:n.widget_background_color,foreground:n.widget_text_color,foregroundMuted:xl(n.widget_text_color,.6),foregroundFaint:xl(n.widget_text_color,.4),border:n.widget_border_color,primary:n.widget_accent_color,primaryForeground:wl(n.widget_accent_color),primaryHover:xl(n.widget_accent_color,.85),secondary:n.widget_secondary_color,secondaryForeground:"#ffffff",secondaryBg:xl(n.widget_secondary_color,.2),secondaryHover:xl(n.widget_secondary_color,.3)},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.primary,"--radius":x.radius,"--duration-animation":x.motion.durationAnimation,"--duration-fade":x.motion.durationFade});var x;/* @__PURE__ */
|
|
62
62
|
return b(Cl,{value:g,children:/* @__PURE__ */b(rc,{ref:o,"data-marketrix-widget":!0,position:"relative",style:{...w,...c&&{width:"100%",height:"100%"}},children:/* @__PURE__ */b(hl,{value:r,children:/* @__PURE__ */v(mc,{container:r,offsetBottom:"top"===Rl(u).vertical?20:90,children:[y&&/* @__PURE__ */b(rc,{"data-screen-edge-glow":!0,position:"fixed",inset:"0",style:{boxShadow:`inset 0 0 22px 2px ${xl(g.widget_accent_color,.72)}, inset 0 0 46px 10px ${xl(g.widget_accent_color,.28)}`,pointerEvents:"none",zIndex:2147483001}}),
|
|
63
63
|
/* @__PURE__ */b(Dl,{label:"Widget",children:/* @__PURE__ */b(ud,{})}),
|
|
64
64
|
/* @__PURE__ */b(Nl,{onPositionCommit:e=>{d(e),c||Ne(h,e)}}),
|