@botonic/react 0.56.0-alpha.0 → 0.57.0-rslib-esm.1

package/lib/components/pic.js

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import styled_components from "styled-components";
+import { COLORS, WEBCHAT } from "../constants.js";
+import { staticAsset } from "../util/environment.js";
+import { renderComponent } from "../util/react.js";
+import { COMPONENT_DISPLAY_NAMES } from "./constants.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+const PicStyled = styled_components.img`
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  width: ${WEBCHAT.DEFAULTS.ELEMENT_WIDTH}px;
+  height: 140px;
+  background: ${COLORS.SOLID_WHITE};
+  object-fit: center/cover;
+  border-bottom: 1px solid ${COLORS.SEASHELL_WHITE};
+`;
+const Pic = (props)=>{
+    props = {
+        ...props,
+        src: staticAsset(props.src)
+    };
+    const renderBrowser = ()=>/*#__PURE__*/ jsx(PicStyled, {
+            src: props.src
+        });
+    // @ts-expect-error
+    const renderNode = ()=>/*#__PURE__*/ jsx("pic", {
+            children: props.src
+        });
+    return renderComponent({
+        renderBrowser,
+        renderNode
+    });
+};
+Pic.displayName = COMPONENT_DISPLAY_NAMES.Pic;
+Pic.serialize = (props)=>{
+    return {
+        pic: props.src
+    };
+};
+
+export { Pic };
+
+//# sourceMappingURL=pic.js.map

package/lib/components/pic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/pic.js","sources":["../../src/components/pic.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nimport { COLORS, WEBCHAT } from '../constants'\nimport { staticAsset } from '../util/environment'\nimport { renderComponent } from '../util/react'\nimport { COMPONENT_DISPLAY_NAMES } from './constants'\n\nconst PicStyled = styled.img`\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  width: ${WEBCHAT.DEFAULTS.ELEMENT_WIDTH}px;\n  height: 140px;\n  background: ${COLORS.SOLID_WHITE};\n  object-fit: center/cover;\n  border-bottom: 1px solid ${COLORS.SEASHELL_WHITE};\n`\nexport interface PicProps {\n  src: string\n}\n\nexport const Pic = (props: PicProps) => {\n  props = { ...props, src: staticAsset(props.src) }\n\n  const renderBrowser = () => <PicStyled src={props.src} />\n\n  // @ts-expect-error\n  const renderNode = () => <pic>{props.src}</pic>\n\n  return renderComponent({ renderBrowser, renderNode })\n}\n\nPic.displayName = COMPONENT_DISPLAY_NAMES.Pic\n\nPic.serialize = (props: PicProps) => {\n  return { pic: props.src }\n}\n"],"names":["styled","COLORS","WEBCHAT","staticAsset","renderComponent","COMPONENT_DISPLAY_NAMES","PicStyled","Pic","props","renderBrowser","renderNode"],"mappings":";;;;;;;;;;;;;;AAAsC;AAEQ;AACG;AACF;AACM;AAErD,MAAMM,SAASA,GAAGN,qBAAU,CAAC;;;SAGpB,EAAEE,8BAA8B,CAAC;;cAE5B,EAAED,kBAAkB,CAAC;;2BAER,EAAEA,qBAAqB,CAAC;AACnD,CAAC;AAKM,MAAMM,GAAGA,GAAG,CAACC;IAClBA,QAAQ;QAAE,GAAGA,KAAK;QAAE,KAAKL,WAAWA,CAACK,MAAM,GAAG;IAAE;IAEhD,MAAMC,gBAAgB,kBAAM,IAACH,SAASA;YAAC,KAAKE,MAAM,GAAG;;IAErD,mBAAmB;IACnB,MAAME,aAAa,kBAAM,IAAC;sBAAKF,MAAM,GAAG;;IAExC,OAAOJ,eAAeA,CAAC;QAAEK;QAAeC;IAAW;AACrD,EAAC;AAEDH,GAAGA,CAAC,WAAW,GAAGF,2BAA2B;AAE7CE,GAAGA,CAAC,SAAS,GAAG,CAACC;IACf,OAAO;QAAE,KAAKA,MAAM,GAAG;IAAC;AAC1B"}

package/lib/components/raw.d.ts

@@ -0,0 +1,9 @@
+export function Raw(props: any): import("react").JSX.Element;
+export namespace Raw {
+    export { serialize };
+}
+declare function serialize(rawProps: any): {
+    data: any;
+    alt: any;
+};
+export {};

package/lib/components/raw.js

@@ -0,0 +1,86 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { INPUT, isBrowser } from "@botonic/core";
+import { useState } from "react";
+import styled_components from "styled-components";
+import { COLORS, ROLES } from "../constants.js";
+import { Message } from "./message/index.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+const RawDataButton = styled_components.div`
+  align-self: flex-start;
+  background-color: ${COLORS.CURIOUS_BLUE};
+  padding: 4px;
+  margin: 4px 0px;
+  cursor: pointer;
+  color: ${COLORS.SOLID_WHITE_ALPHA_0_8};
+  font-size: 10px;
+  border-radius: 2px;
+`;
+const Popover = styled_components.div`
+  max-width: 100%;
+  max-height: 500px;
+  overflow: auto;
+  background-color: ${COLORS.LIGHT_GRAY};
+  padding: 10px;
+  pre {
+    margin: 0px;
+  }
+`;
+const serialize = (rawProps)=>{
+    return {
+        data: rawProps.data,
+        alt: rawProps.alt
+    };
+};
+const Raw = (props)=>{
+    let content = props.children;
+    const data = JSON.stringify(props.data, null, ' ');
+    const [isOpen, setIsOpen] = useState(false);
+    if (isBrowser()) {
+        content = /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    children: props.alt
+                }),
+                /*#__PURE__*/ jsxs(RawDataButton, {
+                    onClick: ()=>setIsOpen(!isOpen),
+                    children: [
+                        "RAW DATA ",
+                        /*#__PURE__*/ jsx("small", {
+                            children: isOpen ? '▲' : '▼'
+                        })
+                    ]
+                }),
+                isOpen && /*#__PURE__*/ jsx(Popover, {
+                    children: /*#__PURE__*/ jsx("pre", {
+                        children: data
+                    })
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsx(Message, {
+        role: ROLES.RAW_MESSAGE,
+        json: serialize(props),
+        ...props,
+        data: data,
+        type: INPUT.RAW,
+        children: content
+    });
+};
+Raw.serialize = serialize;
+
+export { Raw };
+
+//# sourceMappingURL=raw.js.map

package/lib/components/raw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/raw.js","sources":["../../src/components/raw.jsx"],"sourcesContent":["import { INPUT, isBrowser } from '@botonic/core'\nimport { useState } from 'react'\nimport styled from 'styled-components'\n\nimport { COLORS, ROLES } from '../constants'\nimport { Message } from './message'\n\nconst RawDataButton = styled.div`\n  align-self: flex-start;\n  background-color: ${COLORS.CURIOUS_BLUE};\n  padding: 4px;\n  margin: 4px 0px;\n  cursor: pointer;\n  color: ${COLORS.SOLID_WHITE_ALPHA_0_8};\n  font-size: 10px;\n  border-radius: 2px;\n`\n\nconst Popover = styled.div`\n  max-width: 100%;\n  max-height: 500px;\n  overflow: auto;\n  background-color: ${COLORS.LIGHT_GRAY};\n  padding: 10px;\n  pre {\n    margin: 0px;\n  }\n`\n\nconst serialize = rawProps => {\n  return { data: rawProps.data, alt: rawProps.alt }\n}\n\nexport const Raw = props => {\n  let content = props.children\n  const data = JSON.stringify(props.data, null, ' ')\n  const [isOpen, setIsOpen] = useState(false)\n  if (isBrowser()) {\n    content = (\n      <>\n        <div>{props.alt}</div>\n        <RawDataButton onClick={() => setIsOpen(!isOpen)}>\n          RAW DATA <small>{isOpen ? '▲' : '▼'}</small>\n        </RawDataButton>\n        {isOpen && (\n          <Popover>\n            <pre>{data}</pre>\n          </Popover>\n        )}\n      </>\n    )\n  }\n  return (\n    <Message\n      role={ROLES.RAW_MESSAGE}\n      json={serialize(props)}\n      {...props}\n      data={data}\n      type={INPUT.RAW}\n    >\n      {content}\n    </Message>\n  )\n}\n\nRaw.serialize = serialize\n"],"names":["INPUT","isBrowser","useState","styled","COLORS","ROLES","Message","RawDataButton","Popover","serialize","rawProps","Raw","props","content","data","JSON","isOpen","setIsOpen"],"mappings":";;;;;;;;;;;;;;AAAgD;AAChB;AACM;AAEM;AACT;AAEnC,MAAMO,aAAaA,GAAGJ,qBAAU,CAAC;;oBAEb,EAAEC,mBAAmB,CAAC;;;;SAIjC,EAAEA,4BAA4B,CAAC;;;AAGxC,CAAC;AAED,MAAMI,OAAOA,GAAGL,qBAAU,CAAC;;;;oBAIP,EAAEC,iBAAiB,CAAC;;;;;AAKxC,CAAC;AAED,MAAMK,SAASA,GAAGC,CAAAA;IAChB,OAAO;QAAE,MAAMA,SAAS,IAAI;QAAE,KAAKA,SAAS,GAAG;IAAC;AAClD;AAEO,MAAMC,GAAGA,GAAGC,CAAAA;IACjB,IAAIC,UAAUD,MAAM,QAAQ;IAC5B,MAAME,OAAOC,KAAK,SAAS,CAACH,MAAM,IAAI,EAAE,MAAM;IAC9C,MAAM,CAACI,QAAQC,UAAU,GAAGf,QAAQA,CAAC;IACrC,IAAID,SAASA,IAAI;QACfY,wBACE;;8BACE,IAAC;8BAAKD,MAAM,GAAG;;8BACf,KAACL,aAAaA;oBAAC,SAAS,IAAMU,UAAU,CAACD;;wBAAS;sCACvC,IAAC;sCAAOA,SAAS,MAAM;;;;gBAEjCA,wBACC,IAACR,OAAOA;8BACN,kBAAC;kCAAKM;;;;;IAKhB;IACA,qBACE,IAACR,OAAOA;QACN,MAAMD,iBAAiB;QACvB,MAAMI,SAASA,CAACG;QACf,GAAGA,KAAK;QACT,MAAME;QACN,MAAMd,SAAS;kBAEda;;AAGP,EAAC;AAEDF,GAAGA,CAAC,SAAS,GAAGF,SAASA"}

package/lib/components/reply.d.ts

@@ -0,0 +1,11 @@
+import type { ReplyProps } from './index-types.js';
+export declare const Reply: {
+    (props: ReplyProps): any;
+    displayName: "Reply";
+    serialize(replyProps: ReplyProps): {
+        reply: {
+            title: string;
+            payload: string | undefined;
+        };
+    };
+};

package/lib/components/reply.js

@@ -0,0 +1,102 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import styled_components from "styled-components";
+import { WEBCHAT } from "../constants.js";
+import { renderComponent } from "../util/react.js";
+import { WebchatContext } from "../webchat/context/index.js";
+import { COMPONENT_DISPLAY_NAMES } from "./constants.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const StyledButton = styled_components.button`
+  width: 100%;
+  padding: 4px 8px;
+  font-family: inherit;
+  border-radius: 8px;
+  border: 1px solid ${(props)=>props.theme.brand?.color};
+  color: ${(props)=>props.theme.brand?.color};
+  cursor: pointer;
+  outline: 0;
+`;
+const Reply = (props)=>{
+    const { sendText, getThemeProperty } = useContext(WebchatContext);
+    const handleClick = (event)=>{
+        event.preventDefault();
+        if (props.children) {
+            let payload = props.payload;
+            if (props.path) {
+                payload = `__PATH_PAYLOAD__${props.path}`;
+            }
+            sendText(props.children, payload);
+        }
+    };
+    const renderBrowser = ()=>{
+        const replyStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.replyStyle);
+        const CustomReply = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customReply);
+        if (CustomReply) {
+            return /*#__PURE__*/ jsx("div", {
+                onClick: (e)=>handleClick(e),
+                children: /*#__PURE__*/ jsx(CustomReply, {
+                    children: props.children
+                })
+            });
+        }
+        return /*#__PURE__*/ jsx(StyledButton, {
+            style: {
+                ...replyStyle
+            },
+            onClick: (e)=>handleClick(e),
+            children: props.children
+        });
+    };
+    const renderNode = ()=>{
+        if (props.path) {
+            const payload = `__PATH_PAYLOAD__${props.path}`;
+            // @ts-expect-error
+            // eslint-disable-next-line react/no-unknown-property
+            return /*#__PURE__*/ jsx("reply", {
+                payload: payload,
+                children: props.children
+            });
+        }
+        // @ts-expect-error
+        // eslint-disable-next-line react/no-unknown-property
+        return /*#__PURE__*/ jsx("reply", {
+            payload: props.payload,
+            children: props.children
+        });
+    };
+    return renderComponent({
+        renderBrowser,
+        renderNode
+    });
+};
+Reply.displayName = COMPONENT_DISPLAY_NAMES.Reply;
+Reply.serialize = (replyProps)=>{
+    let payload = replyProps.payload;
+    if (replyProps.path) {
+        payload = `__PATH_PAYLOAD__${replyProps.path}`;
+    }
+    return {
+        reply: {
+            title: replyProps.children,
+            payload
+        }
+    };
+};
+
+export { Reply };
+
+//# sourceMappingURL=reply.js.map

package/lib/components/reply.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/reply.js","sources":["../../src/components/reply.tsx"],"sourcesContent":["import { useContext } from 'react'\nimport styled from 'styled-components'\n\nimport { WEBCHAT } from '../constants'\nimport { renderComponent } from '../util/react'\nimport { WebchatContext } from '../webchat/context'\nimport { COMPONENT_DISPLAY_NAMES } from './constants'\nimport type { ReplyProps } from './index-types'\n\nconst StyledButton = styled.button`\n  width: 100%;\n  padding: 4px 8px;\n  font-family: inherit;\n  border-radius: 8px;\n  border: 1px solid ${props => props.theme.brand?.color};\n  color: ${props => props.theme.brand?.color};\n  cursor: pointer;\n  outline: 0;\n`\n\nexport const Reply = (props: ReplyProps) => {\n  const { sendText, getThemeProperty } = useContext(WebchatContext)\n\n  const handleClick = (event: any) => {\n    event.preventDefault()\n    if (props.children) {\n      let payload = props.payload\n      if (props.path) {\n        payload = `__PATH_PAYLOAD__${props.path}`\n      }\n      sendText(props.children, payload)\n    }\n  }\n\n  const renderBrowser = () => {\n    const replyStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.replyStyle)\n    const CustomReply = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customReply)\n    if (CustomReply) {\n      return (\n        <div onClick={e => handleClick(e)}>\n          <CustomReply>{props.children}</CustomReply>\n        </div>\n      )\n    }\n\n    return (\n      <StyledButton\n        style={{\n          ...replyStyle,\n        }}\n        onClick={e => handleClick(e)}\n      >\n        {props.children}\n      </StyledButton>\n    )\n  }\n\n  const renderNode = () => {\n    if (props.path) {\n      const payload = `__PATH_PAYLOAD__${props.path}`\n      // @ts-expect-error\n      // eslint-disable-next-line react/no-unknown-property\n      return <reply payload={payload}>{props.children}</reply>\n    }\n    // @ts-expect-error\n    // eslint-disable-next-line react/no-unknown-property\n    return <reply payload={props.payload}>{props.children}</reply>\n  }\n\n  return renderComponent({ renderBrowser, renderNode })\n}\n\nReply.displayName = COMPONENT_DISPLAY_NAMES.Reply\n\nReply.serialize = (replyProps: ReplyProps) => {\n  let payload = replyProps.payload\n  if (replyProps.path) {\n    payload = `__PATH_PAYLOAD__${replyProps.path}`\n  }\n  return { reply: { title: replyProps.children, payload } }\n}\n"],"names":["useContext","styled","WEBCHAT","renderComponent","WebchatContext","COMPONENT_DISPLAY_NAMES","StyledButton","props","Reply","sendText","getThemeProperty","handleClick","event","payload","renderBrowser","replyStyle","CustomReply","e","renderNode","replyProps"],"mappings":";;;;;;;;;;;;;;;;AAAkC;AACI;AAEA;AACS;AACI;AACE;AAGrD,MAAMM,YAAYA,GAAGL,wBAAa,CAAC;;;;;oBAKf,EAAEM,CAAAA,QAASA,MAAM,KAAK,CAAC,KAAK,EAAE,MAAM;SAC/C,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,KAAK,EAAE,MAAM;;;AAG7C,CAAC;AAEM,MAAMC,KAAKA,GAAG,CAACD;IACpB,MAAM,EAAEE,QAAQ,EAAEC,gBAAgB,EAAE,GAAGV,UAAUA,CAACI,cAAcA;IAEhE,MAAMO,cAAc,CAACC;QACnBA,MAAM,cAAc;QACpB,IAAIL,MAAM,QAAQ,EAAE;YAClB,IAAIM,UAAUN,MAAM,OAAO;YAC3B,IAAIA,MAAM,IAAI,EAAE;gBACdM,UAAU,CAAC,gBAAgB,EAAEN,MAAM,IAAI,EAAE;YAC3C;YACAE,SAASF,MAAM,QAAQ,EAAEM;QAC3B;IACF;IAEA,MAAMC,gBAAgB;QACpB,MAAMC,aAAaL,iBAAiBR,oCAAoC;QACxE,MAAMc,cAAcN,iBAAiBR,qCAAqC;QAC1E,IAAIc,aAAa;YACf,qBACE,IAAC;gBAAI,SAASC,CAAAA,IAAKN,YAAYM;0BAC7B,kBAACD;8BAAaT,MAAM,QAAQ;;;QAGlC;QAEA,qBACE,IAACD,YAAYA;YACX,OAAO;gBACL,GAAGS,UAAU;YACf;YACA,SAASE,CAAAA,IAAKN,YAAYM;sBAEzBV,MAAM,QAAQ;;IAGrB;IAEA,MAAMW,aAAa;QACjB,IAAIX,MAAM,IAAI,EAAE;YACd,MAAMM,UAAU,CAAC,gBAAgB,EAAEN,MAAM,IAAI,EAAE;YAC/C,mBAAmB;YACnB,qDAAqD;YACrD,qBAAO,IAAC;gBAAM,SAASM;0BAAUN,MAAM,QAAQ;;QACjD;QACA,mBAAmB;QACnB,qDAAqD;QACrD,qBAAO,IAAC;YAAM,SAASA,MAAM,OAAO;sBAAGA,MAAM,QAAQ;;IACvD;IAEA,OAAOJ,eAAeA,CAAC;QAAEW;QAAeI;IAAW;AACrD,EAAC;AAEDV,KAAKA,CAAC,WAAW,GAAGH,6BAA6B;AAEjDG,KAAKA,CAAC,SAAS,GAAG,CAACW;IACjB,IAAIN,UAAUM,WAAW,OAAO;IAChC,IAAIA,WAAW,IAAI,EAAE;QACnBN,UAAU,CAAC,gBAAgB,EAAEM,WAAW,IAAI,EAAE;IAChD;IACA,OAAO;QAAE,OAAO;YAAE,OAAOA,WAAW,QAAQ;YAAEN;QAAQ;IAAE;AAC1D"}

package/lib/components/share-button.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { renderComponent } from "../util/react.js";
+
+
+
+
+/** biome-ignore-all lint/security/noDangerouslySetInnerHtml: ShareButton is a component that renders a share button */ 
+const ShareButton = (props)=>{
+    const renderBrowser = ()=>null;
+    const renderNode = ()=>/*#__PURE__*/ jsx("button", {
+            type: "element_share",
+            children: /*#__PURE__*/ jsx("pre", {
+                dangerouslySetInnerHTML: {
+                    __html: JSON.stringify(props.payload)
+                }
+            })
+        });
+    return renderComponent({
+        renderBrowser,
+        renderNode
+    });
+};
+
+export { ShareButton };
+
+//# sourceMappingURL=share-button.js.map

package/lib/components/share-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/share-button.js","sources":["../../src/components/share-button.jsx"],"sourcesContent":["/** biome-ignore-all lint/security/noDangerouslySetInnerHtml: ShareButton is a component that renders a share button */\nimport { renderComponent } from '../util/react'\n\nexport const ShareButton = props => {\n  const renderBrowser = () => null\n  const renderNode = () => (\n    <button type='element_share'>\n      <pre\n        dangerouslySetInnerHTML={{ __html: JSON.stringify(props.payload) }}\n      />\n    </button>\n  )\n\n  return renderComponent({ renderBrowser, renderNode })\n}\n"],"names":["renderComponent","ShareButton","props","renderBrowser","renderNode","JSON"],"mappings":";;;;;;AAAA,qHAAqH,GACtE;AAExC,MAAMC,WAAWA,GAAGC,CAAAA;IACzB,MAAMC,gBAAgB,IAAM;IAC5B,MAAMC,aAAa,kBACjB,IAAC;YAAO,MAAK;sBACX,kBAAC;gBACC,yBAAyB;oBAAE,QAAQC,KAAK,SAAS,CAACH,MAAM,OAAO;gBAAE;;;IAKvE,OAAOF,eAAeA,CAAC;QAAEG;QAAeC;IAAW;AACrD,EAAC"}

package/lib/components/subtitle.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import styled_components from "styled-components";
+import { COLORS } from "../constants.js";
+import { renderComponent } from "../util/react.js";
+import { COMPONENT_DISPLAY_NAMES } from "./constants.js";
+
+
+
+
+
+
+
+
+
+
+
+const SubtitleContainer = styled_components.div`
+  font-size: 12px;
+  padding: 0px 15px 10px 15px;
+  color: ${COLORS.MID_GRAY};
+`;
+const Subtitle = (props)=>{
+    const renderBrowser = ()=>/*#__PURE__*/ jsx(SubtitleContainer, {
+            children: props.children
+        });
+    const renderNode = ()=>/*#__PURE__*/ jsx("desc", {
+            children: props.children
+        });
+    return renderComponent({
+        renderBrowser,
+        renderNode
+    });
+};
+Subtitle.displayName = COMPONENT_DISPLAY_NAMES.Subtitle;
+Subtitle.serialize = (props)=>{
+    return {
+        subtitle: props.children
+    };
+};
+
+export { Subtitle };
+
+//# sourceMappingURL=subtitle.js.map

package/lib/components/subtitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/subtitle.js","sources":["../../src/components/subtitle.tsx"],"sourcesContent":["import type React from 'react'\nimport styled from 'styled-components'\n\nimport { COLORS } from '../constants'\nimport { renderComponent } from '../util/react'\nimport { COMPONENT_DISPLAY_NAMES } from './constants'\n\nconst SubtitleContainer = styled.div`\n  font-size: 12px;\n  padding: 0px 15px 10px 15px;\n  color: ${COLORS.MID_GRAY};\n`\n\nexport interface SubtitleProps {\n  children: React.ReactNode\n}\n\nexport const Subtitle = (props: SubtitleProps) => {\n  const renderBrowser = () => (\n    <SubtitleContainer>{props.children}</SubtitleContainer>\n  )\n\n  const renderNode = () => <desc>{props.children}</desc>\n\n  return renderComponent({ renderBrowser, renderNode })\n}\n\nSubtitle.displayName = COMPONENT_DISPLAY_NAMES.Subtitle\n\nSubtitle.serialize = (props: SubtitleProps) => {\n  return { subtitle: props.children }\n}\n"],"names":["styled","COLORS","renderComponent","COMPONENT_DISPLAY_NAMES","SubtitleContainer","Subtitle","props","renderBrowser","renderNode"],"mappings":";;;;;;;;;;;;AACsC;AAED;AACU;AACM;AAErD,MAAMI,iBAAiBA,GAAGJ,qBAAU,CAAC;;;SAG5B,EAAEC,eAAe,CAAC;AAC3B,CAAC;AAMM,MAAMI,QAAQA,GAAG,CAACC;IACvB,MAAMC,gBAAgB,kBACpB,IAACH,iBAAiBA;sBAAEE,MAAM,QAAQ;;IAGpC,MAAME,aAAa,kBAAM,IAAC;sBAAMF,MAAM,QAAQ;;IAE9C,OAAOJ,eAAeA,CAAC;QAAEK;QAAeC;IAAW;AACrD,EAAC;AAEDH,QAAQA,CAAC,WAAW,GAAGF,gCAAgC;AAEvDE,QAAQA,CAAC,SAAS,GAAG,CAACC;IACpB,OAAO;QAAE,UAAUA,MAAM,QAAQ;IAAC;AACpC"}

package/lib/components/system-debug-trace/debug-message.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+import type { DebugEvent } from './types.js';
+interface DebugMessageProps {
+    debugEvent: DebugEvent;
+    messageId?: string;
+}
+export declare const DebugMessage: ({ debugEvent, messageId }: DebugMessageProps) => React.JSX.Element | null;
+export {};

package/lib/components/system-debug-trace/debug-message.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EventAction } from "@botonic/core";
+import { useContext, useEffect, useRef, useState } from "react";
+import { WebchatContext } from "../../webchat/context/index.js";
+import { getAiAgentEventConfig, getAiAgentRouterEventConfig, getBotActionEventConfig, getConditionalChannelEventConfig, getConditionalCountryEventConfig, getConditionalCustomEventConfig, getConditionalQueueStatusEventConfig, getFallbackEventConfig, getHandoffSuccessEventConfig, getKeywordEventConfig, getRedirectFlowEventConfig, getSmartIntentEventConfig, getWebviewActionTriggeredEventConfig } from "./events/index.js";
+import { useLastLabelPosition } from "./hooks/use-last-label-position.js";
+import { CaretDownSvg, CaretUpSvg } from "./icons/index.js";
+import { StyledDebugArrow, StyledDebugContainer, StyledDebugContent, StyledDebugContentWrapper, StyledDebugHeader, StyledDebugIcon, StyledDebugTitle } from "./styles.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const getEventConfig = (debugEvent)=>{
+    switch(debugEvent.action){
+        case EventAction.Keyword:
+            return getKeywordEventConfig(debugEvent);
+        case EventAction.IntentSmart:
+            return getSmartIntentEventConfig(debugEvent);
+        case EventAction.HandoffSuccess:
+            return getHandoffSuccessEventConfig(debugEvent);
+        case EventAction.AiAgent:
+            return getAiAgentEventConfig(debugEvent);
+        case EventAction.AiAgentRouter:
+            return getAiAgentRouterEventConfig(debugEvent);
+        case EventAction.Fallback:
+            return getFallbackEventConfig(debugEvent);
+        case EventAction.BotAction:
+            return getBotActionEventConfig(debugEvent);
+        case EventAction.ConditionalChannel:
+            return getConditionalChannelEventConfig(debugEvent);
+        case EventAction.ConditionalCountry:
+            return getConditionalCountryEventConfig(debugEvent);
+        case EventAction.ConditionalCustom:
+            return getConditionalCustomEventConfig(debugEvent);
+        case EventAction.ConditionalQueueStatus:
+            return getConditionalQueueStatusEventConfig(debugEvent);
+        case EventAction.RedirectFlow:
+            return getRedirectFlowEventConfig(debugEvent);
+        case EventAction.WebviewActionTriggered:
+            return getWebviewActionTriggeredEventConfig(debugEvent);
+        default:
+            return undefined;
+    }
+};
+const DebugMessage = ({ debugEvent, messageId })=>{
+    const [isExpanded, setIsExpanded] = useState(false);
+    const wrapperRef = useRef(null);
+    const { previewUtils } = useContext(WebchatContext);
+    const eventConfig = getEventConfig(debugEvent);
+    useLastLabelPosition({
+        wrapperRef,
+        isExpanded,
+        debugEvent,
+        isCollapsible: eventConfig?.collapsible ?? false
+    });
+    useEffect(()=>{
+        if (isExpanded) {
+            previewUtils?.trackPreviewEventOpened?.({
+                action: debugEvent.action
+            });
+        }
+    }, [
+        previewUtils,
+        isExpanded,
+        debugEvent
+    ]);
+    if (!eventConfig) {
+        return null;
+    }
+    const { title, icon, component, collapsible } = eventConfig;
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const Component = component;
+    const handleClick = (e)=>{
+        if (collapsible) {
+            const target = e.target;
+            const isButton = target.closest('button, a, [role="button"]');
+            if (!isButton) {
+                e.stopPropagation();
+                setIsExpanded(!isExpanded);
+            }
+        }
+    };
+    const containerClassName = collapsible ? `collapsible${isExpanded ? ' expanded' : ''}` : '';
+    return /*#__PURE__*/ jsxs(StyledDebugContainer, {
+        className: containerClassName,
+        onClick: collapsible ? handleClick : undefined,
+        children: [
+            /*#__PURE__*/ jsxs(StyledDebugHeader, {
+                children: [
+                    /*#__PURE__*/ jsx(StyledDebugIcon, {
+                        children: icon
+                    }),
+                    /*#__PURE__*/ jsx(StyledDebugTitle, {
+                        children: title
+                    }),
+                    collapsible && /*#__PURE__*/ jsx(StyledDebugArrow, {
+                        children: isExpanded ? /*#__PURE__*/ jsx(CaretUpSvg, {}) : /*#__PURE__*/ jsx(CaretDownSvg, {})
+                    })
+                ]
+            }),
+            Component && /*#__PURE__*/ jsx(StyledDebugContent, {
+                style: {
+                    display: isExpanded ? 'block' : 'none'
+                },
+                children: /*#__PURE__*/ jsx(StyledDebugContentWrapper, {
+                    ref: wrapperRef,
+                    children: /*#__PURE__*/ jsx(Component, {
+                        ...debugEvent,
+                        messageId: messageId
+                    })
+                })
+            })
+        ]
+    });
+};
+
+export { DebugMessage };
+
+//# sourceMappingURL=debug-message.js.map

package/lib/components/system-debug-trace/debug-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/system-debug-trace/debug-message.js","sources":["../../../src/components/system-debug-trace/debug-message.tsx"],"sourcesContent":["import { EventAction } from '@botonic/core'\nimport type React from 'react'\nimport { useContext, useEffect, useRef, useState } from 'react'\n\nimport { WebchatContext } from '../../webchat/context'\nimport {\n  getAiAgentEventConfig,\n  getAiAgentRouterEventConfig,\n  getBotActionEventConfig,\n  getConditionalChannelEventConfig,\n  getConditionalCountryEventConfig,\n  getConditionalCustomEventConfig,\n  getConditionalQueueStatusEventConfig,\n  getFallbackEventConfig,\n  getHandoffSuccessEventConfig,\n  getKeywordEventConfig,\n  getRedirectFlowEventConfig,\n  getSmartIntentEventConfig,\n  getWebviewActionTriggeredEventConfig,\n} from './events'\nimport { useLastLabelPosition } from './hooks/use-last-label-position'\nimport { CaretDownSvg, CaretUpSvg } from './icons'\nimport {\n  StyledDebugArrow,\n  StyledDebugContainer,\n  StyledDebugContent,\n  StyledDebugContentWrapper,\n  StyledDebugHeader,\n  StyledDebugIcon,\n  StyledDebugTitle,\n} from './styles'\nimport type { DebugEvent, DebugEventConfig } from './types'\n\nconst getEventConfig = (\n  debugEvent: DebugEvent\n): DebugEventConfig | undefined => {\n  switch (debugEvent.action) {\n    case EventAction.Keyword:\n      return getKeywordEventConfig(debugEvent)\n    case EventAction.IntentSmart:\n      return getSmartIntentEventConfig(debugEvent)\n    case EventAction.HandoffSuccess:\n      return getHandoffSuccessEventConfig(debugEvent)\n    case EventAction.AiAgent:\n      return getAiAgentEventConfig(debugEvent)\n    case EventAction.AiAgentRouter:\n      return getAiAgentRouterEventConfig(debugEvent)\n    case EventAction.Fallback:\n      return getFallbackEventConfig(debugEvent)\n    case EventAction.BotAction:\n      return getBotActionEventConfig(debugEvent)\n    case EventAction.ConditionalChannel:\n      return getConditionalChannelEventConfig(debugEvent)\n    case EventAction.ConditionalCountry:\n      return getConditionalCountryEventConfig(debugEvent)\n    case EventAction.ConditionalCustom:\n      return getConditionalCustomEventConfig(debugEvent)\n    case EventAction.ConditionalQueueStatus:\n      return getConditionalQueueStatusEventConfig(debugEvent)\n    case EventAction.RedirectFlow:\n      return getRedirectFlowEventConfig(debugEvent)\n    case EventAction.WebviewActionTriggered:\n      return getWebviewActionTriggeredEventConfig(debugEvent)\n    default:\n      return undefined\n  }\n}\n\ninterface DebugMessageProps {\n  debugEvent: DebugEvent\n  messageId?: string\n}\n\nexport const DebugMessage = ({ debugEvent, messageId }: DebugMessageProps) => {\n  const [isExpanded, setIsExpanded] = useState(false)\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const { previewUtils } = useContext(WebchatContext)\n  const eventConfig = getEventConfig(debugEvent)\n\n  useLastLabelPosition({\n    wrapperRef,\n    isExpanded,\n    debugEvent,\n    isCollapsible: eventConfig?.collapsible ?? false,\n  })\n\n  useEffect(() => {\n    if (isExpanded) {\n      previewUtils?.trackPreviewEventOpened?.({ action: debugEvent.action })\n    }\n  }, [previewUtils, isExpanded, debugEvent])\n\n  if (!eventConfig) {\n    return null\n  }\n\n  const { title, icon, component, collapsible } = eventConfig\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const Component = component\n\n  const handleClick = (e: React.MouseEvent) => {\n    if (collapsible) {\n      const target = e.target as HTMLElement\n      const isButton = target.closest('button, a, [role=\"button\"]')\n\n      if (!isButton) {\n        e.stopPropagation()\n        setIsExpanded(!isExpanded)\n      }\n    }\n  }\n\n  const containerClassName = collapsible\n    ? `collapsible${isExpanded ? ' expanded' : ''}`\n    : ''\n\n  return (\n    <StyledDebugContainer\n      className={containerClassName}\n      onClick={collapsible ? handleClick : undefined}\n    >\n      <StyledDebugHeader>\n        <StyledDebugIcon>{icon}</StyledDebugIcon>\n        <StyledDebugTitle>{title}</StyledDebugTitle>\n        {collapsible && (\n          <StyledDebugArrow>\n            {isExpanded ? <CaretUpSvg /> : <CaretDownSvg />}\n          </StyledDebugArrow>\n        )}\n      </StyledDebugHeader>\n      {Component && (\n        <StyledDebugContent style={{ display: isExpanded ? 'block' : 'none' }}>\n          <StyledDebugContentWrapper ref={wrapperRef}>\n            <Component {...debugEvent} messageId={messageId} />\n          </StyledDebugContentWrapper>\n        </StyledDebugContent>\n      )}\n    </StyledDebugContainer>\n  )\n}\n"],"names":["EventAction","useContext","useEffect","useRef","useState","WebchatContext","getAiAgentEventConfig","getAiAgentRouterEventConfig","getBotActionEventConfig","getConditionalChannelEventConfig","getConditionalCountryEventConfig","getConditionalCustomEventConfig","getConditionalQueueStatusEventConfig","getFallbackEventConfig","getHandoffSuccessEventConfig","getKeywordEventConfig","getRedirectFlowEventConfig","getSmartIntentEventConfig","getWebviewActionTriggeredEventConfig","useLastLabelPosition","CaretDownSvg","CaretUpSvg","StyledDebugArrow","StyledDebugContainer","StyledDebugContent","StyledDebugContentWrapper","StyledDebugHeader","StyledDebugIcon","StyledDebugTitle","getEventConfig","debugEvent","undefined","DebugMessage","messageId","isExpanded","setIsExpanded","wrapperRef","previewUtils","eventConfig","title","icon","component","collapsible","Component","handleClick","e","target","isButton","containerClassName"],"mappings":";;;;;;;;;;;;;;;;;;AAA2C;AAEoB;AAET;AAerC;AACqD;AACpB;AASjC;AAGjB,MAAM6B,cAAcA,GAAG,CACrBC;IAEA,OAAQA,WAAW,MAAM;QACvB,KAAK9B,mBAAmB;YACtB,OAAOe,qBAAqBA,CAACe;QAC/B,KAAK9B,uBAAuB;YAC1B,OAAOiB,yBAAyBA,CAACa;QACnC,KAAK9B,0BAA0B;YAC7B,OAAOc,4BAA4BA,CAACgB;QACtC,KAAK9B,mBAAmB;YACtB,OAAOM,qBAAqBA,CAACwB;QAC/B,KAAK9B,yBAAyB;YAC5B,OAAOO,2BAA2BA,CAACuB;QACrC,KAAK9B,oBAAoB;YACvB,OAAOa,sBAAsBA,CAACiB;QAChC,KAAK9B,qBAAqB;YACxB,OAAOQ,uBAAuBA,CAACsB;QACjC,KAAK9B,8BAA8B;YACjC,OAAOS,gCAAgCA,CAACqB;QAC1C,KAAK9B,8BAA8B;YACjC,OAAOU,gCAAgCA,CAACoB;QAC1C,KAAK9B,6BAA6B;YAChC,OAAOW,+BAA+BA,CAACmB;QACzC,KAAK9B,kCAAkC;YACrC,OAAOY,oCAAoCA,CAACkB;QAC9C,KAAK9B,wBAAwB;YAC3B,OAAOgB,0BAA0BA,CAACc;QACpC,KAAK9B,kCAAkC;YACrC,OAAOkB,oCAAoCA,CAACY;QAC9C;YACE,OAAOC;IACX;AACF;AAOO,MAAMC,YAAYA,GAAG,CAAC,EAAEF,UAAU,EAAEG,SAAS,EAAqB;IACvE,MAAM,CAACC,YAAYC,cAAc,GAAG/B,QAAQA,CAAC;IAC7C,MAAMgC,aAAajC,MAAMA,CAAiB;IAC1C,MAAM,EAAEkC,YAAY,EAAE,GAAGpC,UAAUA,CAACI,cAAcA;IAClD,MAAMiC,cAAcT,cAAcA,CAACC;IAEnCX,oBAAoBA,CAAC;QACnBiB;QACAF;QACAJ;QACA,eAAeQ,aAAa,eAAe;IAC7C;IAEApC,SAASA,CAAC;QACR,IAAIgC,YAAY;YACdG,cAAc,0BAA0B;gBAAE,QAAQP,WAAW,MAAM;YAAC;QACtE;IACF,GAAG;QAACO;QAAcH;QAAYJ;KAAW;IAEzC,IAAI,CAACQ,aAAa;QAChB,OAAO;IACT;IAEA,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAEC,SAAS,EAAEC,WAAW,EAAE,GAAGJ;IAChD,gEAAgE;IAChE,MAAMK,YAAYF;IAElB,MAAMG,cAAc,CAACC;QACnB,IAAIH,aAAa;YACf,MAAMI,SAASD,EAAE,MAAM;YACvB,MAAME,WAAWD,OAAO,OAAO,CAAC;YAEhC,IAAI,CAACC,UAAU;gBACbF,EAAE,eAAe;gBACjBV,cAAc,CAACD;YACjB;QACF;IACF;IAEA,MAAMc,qBAAqBN,cACvB,CAAC,WAAW,EAAER,aAAa,cAAc,IAAI,GAC7C;IAEJ,qBACE,KAACX,oBAAoBA;QACnB,WAAWyB;QACX,SAASN,cAAcE,cAAcb;;0BAErC,KAACL,iBAAiBA;;kCAChB,IAACC,eAAeA;kCAAEa;;kCAClB,IAACZ,gBAAgBA;kCAAEW;;oBAClBG,6BACC,IAACpB,gBAAgBA;kCACdY,2BAAa,IAACb,UAAUA,sBAAM,IAACD,YAAYA;;;;YAIjDuB,2BACC,IAACnB,kBAAkBA;gBAAC,OAAO;oBAAE,SAASU,aAAa,UAAU;gBAAO;0BAClE,kBAACT,yBAAyBA;oBAAC,KAAKW;8BAC9B,kBAACO;wBAAW,GAAGb,UAAU;wBAAE,WAAWG;;;;;;AAMlD,EAAC"}

package/lib/components/system-debug-trace/events/ai-agent/ai-agent.d.ts

@@ -0,0 +1,4 @@
+import type { DebugEventConfig } from '../../types.js';
+import type { AiAgentDebugEvent } from './types.js';
+export declare const AiAgent: (props: AiAgentDebugEvent) => import("react").JSX.Element;
+export declare const getAiAgentEventConfig: (data: AiAgentDebugEvent) => DebugEventConfig;