@promotedai/react-introspection/dist/PromotedIntrospectionBanner-24258f89.js

Promoted Introspection integration for React web apps

import e,{useContext as t,useState as a,useMemo as n}from"react";import{P as r,i as l}from"./index-9ae1c7e8.js";import{makeStyles as o,createTheme as i,ThemeProvider as c}from"@material-ui/core/styles";import{Box as m,Accordion as s,AccordionSummary as d,AccordionDetails as p,Typography as u,Button as E}from"@material-ui/core";import{blue as g}from"@material-ui/core/colors";import{WbSunny as b,ExpandMore as x,HelpOutlineOutlined as y}from"@material-ui/icons";import{s as h,C as N}from"./CopyButton-630e99b4.js";import f from"copy-to-clipboard";import"@material-ui/core/colors/blue";const v={ACTIVE:{label:"Active",color:"green"},SHADOW:{label:"Shadow",color:"orange"},DISABLED:{label:"Disabled",color:"red"},NOT_CONFIGURED:{label:"Not Configured",color:"black"}},I=o({label:{marginRight:"10px"},container:{display:"flex",alignItems:"center",margin:"15px 0"}}),O=({className:t="",status:a="NOT_CONFIGURED"})=>{var n,r;const l=I(),o=(null===(n=v[a])||void 0===n?void 0:n.label)||"Not Configured",i=(null===(r=v[a])||void 0===r?void 0:r.color)||"black";return e.createElement("span",{className:`${l.container} ${t}`},e.createElement("span",{className:l.label},o)," ",e.createElement(b,{style:{color:i,fontSize:"20px"}}))},T=o(h),C=o((()=>({container:{position:"fixed",width:"min(100vw,600px)",alignItems:"center",background:"#eee",borderRadius:"0 0 5px 0",top:0,left:0,zIndex:1001},header:{display:"flex",alignItems:"center",padding:"0 10px",height:"50px"},header__contents:{display:"flex",alignItems:"center"},"container--top-right":{borderRadius:"0 0 0 5px",top:0,right:0},"container--bottom-left":{borderRadius:"0 5px 0 0",bottom:0,left:0},"container--bottom-right":{borderRadius:"5px 0 0 0",bottom:0,right:0},"tab-body":{paddingTop:"30px"},details:{width:"100%"},"integration-state":{},"integration-state--active":{fontWeight:"bold",color:"green"},"primary-accordion":{background:"#eee"},accordion:{marginTop:"10px"},"accordion-container":{width:"100%"},dl:{marginTop:0},dt:{marginTop:"10px"},"button-container":{padding:"0 10px 10px"},status:{margin:"0 20px"}}))),R=({position:o="TOP_LEFT"})=>{const b=i({typography:{body1:{fontSize:12}},palette:{primary:g}}),{experimentDetails:h,introspectionPayload:v,errorPayload:I,metadata:R}=t(r),[w,_]=a(!0),D=C(b),S=T(b),k=n((()=>{if(I)return I;if(v)try{return JSON.stringify(v,null,2)}catch(e){return"Error parsing response.  Invalid JSON."}return""}),[I,v]);return e.createElement(c,{theme:b},e.createElement(m,{onContextMenu:e=>e.stopPropagation(),className:`${D.container} ${{TOP_RIGHT:"container--top-right",BOTTOM_LEFT:"container--bottom-left",BOTTOM_RIGHT:"container--bottom-right"}[o]||""}`},e.createElement(s,{className:D["primary-accordion"]},e.createElement(d,{className:D.header,expandIcon:e.createElement(x,null)},e.createElement("div",{className:D.header__contents},e.createElement("img",{style:{height:"20px",width:"20px"},src:l}),e.createElement("span",{style:{margin:"0 10px 0 15px"}},"Introspection Mode"),e.createElement("a",{style:{color:"inherit"},target:"_blank",href:"https://www.npmjs.com/package/@promotedai/react-introspection"},e.createElement(y,{fontSize:"small"})),e.createElement(O,{className:D.status,status:"ACTIVE"}))),e.createElement(p,null,e.createElement("div",{className:D["accordion-container"]},e.createElement(s,{className:D.accordion},e.createElement(d,{expandIcon:e.createElement(x,null)},e.createElement(u,null,"Ids and Metadata")),e.createElement(p,null,Array.isArray(R)?e.createElement("dl",{className:D.dl},R.map(((t,a)=>e.createElement(e.Fragment,null,e.createElement("dt",{className:a>0?D.dt:""},t.label),e.createElement("dd",null,t.value))))):e.createElement("i",null,"None provided"))),e.createElement(s,{className:D.accordion},e.createElement(d,{expandIcon:e.createElement(x,null)},e.createElement(u,null,"Experiment Details")),e.createElement(p,null,Array.isArray(h)?e.createElement("dl",{className:D.dl},h.map(((t,a)=>e.createElement(e.Fragment,null,e.createElement("dt",{className:a>0?D.dt:""},t.label),e.createElement("dd",null,t.value))))):e.createElement("i",null,"None provided"))),e.createElement(s,{className:D.accordion},e.createElement(d,{expandIcon:e.createElement(x,null)},e.createElement(u,null,"Raw Response for Debugging")),e.createElement(p,null,e.createElement("div",{style:{width:"100%"}},e.createElement("textarea",{readOnly:!0,style:{resize:"none",height:"400px",width:"calc(100% - 7px)",display:"block"},value:k}),e.createElement(m,{className:S.buttonContainer},e.createElement(N,{copyButtonVisible:w,handleCopy:()=>{_(!1),f(JSON.stringify(v)),setTimeout((()=>{_(!0)}),2e3)}}))))))),e.createElement(m,{className:`${S.buttonContainer} ${D["button-container"]}`},e.createElement(E,{onClick:()=>{const e=document.createElement("a");e.href=`mailto:introspection@promoted.ai?subject=${encodeURIComponent("Introspection Full Report")}&body=${encodeURIComponent(JSON.stringify({metadata:null==R?void 0:R.reduce(((e,{label:t,value:a})=>Object.assign(Object.assign({},e),{[t]:a})),{}),experimentDetails:null==h?void 0:h.reduce(((e,{label:t,value:a})=>Object.assign(Object.assign({},e),{[t]:a})),{})}))}`,e.click()},className:S.button,variant:"contained"},"Generate Full Report")))))};export{R as PromotedIntrospectionBanner};
//# sourceMappingURL=PromotedIntrospectionBanner-24258f89.js.map