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

package/lib/webchat/hooks/use-webchat-resizer.js

@@ -0,0 +1,34 @@
+import { useContext } from "react";
+import { WebchatContext } from "../context/index.js";
+import { useWebchatDimensions } from "./use-webchat-dimensions.js";
+
+
+
+
+
+
+
+const useWebchatResizer = ()=>{
+    const { webchatContainerRef, chatAreaRef, inputPanelRef, headerRef } = useContext(WebchatContext);
+    const { calculateResizedPercentualWebchatHeight, calculateResizedPxChatAreaHeight } = useWebchatDimensions();
+    const handleKeyboardShown = ()=>{
+        if (webchatContainerRef.current && chatAreaRef.current && headerRef.current && inputPanelRef.current) {
+            webchatContainerRef.current.style.height = `${calculateResizedPercentualWebchatHeight()}%`;
+            chatAreaRef.current.style.height = `${calculateResizedPxChatAreaHeight()}px`;
+        }
+    };
+    const handleKeyboardHidden = ()=>{
+        if (webchatContainerRef.current && chatAreaRef.current && inputPanelRef.current && headerRef.current) {
+            webchatContainerRef.current.style.height = '100%';
+            chatAreaRef.current.style.height = `${calculateResizedPxChatAreaHeight()}px`;
+        }
+    };
+    return {
+        handleKeyboardShown,
+        handleKeyboardHidden
+    };
+};
+
+export { useWebchatResizer };
+
+//# sourceMappingURL=use-webchat-resizer.js.map

package/lib/webchat/hooks/use-webchat-resizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/hooks/use-webchat-resizer.js","sources":["../../../src/webchat/hooks/use-webchat-resizer.ts"],"sourcesContent":["import { useContext } from 'react'\n\nimport { WebchatContext } from '../../webchat/context'\nimport { useWebchatDimensions } from './use-webchat-dimensions'\n\nexport const useWebchatResizer = () => {\n  const { webchatContainerRef, chatAreaRef, inputPanelRef, headerRef } =\n    useContext(WebchatContext)\n\n  const {\n    calculateResizedPercentualWebchatHeight,\n    calculateResizedPxChatAreaHeight,\n  } = useWebchatDimensions()\n\n  const handleKeyboardShown = () => {\n    if (\n      webchatContainerRef.current &&\n      chatAreaRef.current &&\n      headerRef.current &&\n      inputPanelRef.current\n    ) {\n      webchatContainerRef.current.style.height = `${calculateResizedPercentualWebchatHeight()}%`\n      chatAreaRef.current.style.height = `${calculateResizedPxChatAreaHeight()}px`\n    }\n  }\n\n  const handleKeyboardHidden = () => {\n    if (\n      webchatContainerRef.current &&\n      chatAreaRef.current &&\n      inputPanelRef.current &&\n      headerRef.current\n    ) {\n      webchatContainerRef.current.style.height = '100%'\n      chatAreaRef.current.style.height = `${calculateResizedPxChatAreaHeight()}px`\n    }\n  }\n\n  return {\n    handleKeyboardShown,\n    handleKeyboardHidden,\n  }\n}\n"],"names":["useContext","WebchatContext","useWebchatDimensions","useWebchatResizer","webchatContainerRef","chatAreaRef","inputPanelRef","headerRef","calculateResizedPercentualWebchatHeight","calculateResizedPxChatAreaHeight","handleKeyboardShown","handleKeyboardHidden"],"mappings":";;;;;;;AAAkC;AAEoB;AACS;AAExD,MAAMG,iBAAiBA,GAAG;IAC/B,MAAM,EAAEC,mBAAmB,EAAEC,WAAW,EAAEC,aAAa,EAAEC,SAAS,EAAE,GAClEP,UAAUA,CAACC,cAAcA;IAE3B,MAAM,EACJO,uCAAuC,EACvCC,gCAAgC,EACjC,GAAGP,oBAAoBA;IAExB,MAAMQ,sBAAsB;QAC1B,IACEN,oBAAoB,OAAO,IAC3BC,YAAY,OAAO,IACnBE,UAAU,OAAO,IACjBD,cAAc,OAAO,EACrB;YACAF,oBAAoB,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAGI,0CAA0C,CAAC,CAAC;YAC1FH,YAAY,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAGI,mCAAmC,EAAE,CAAC;QAC9E;IACF;IAEA,MAAME,uBAAuB;QAC3B,IACEP,oBAAoB,OAAO,IAC3BC,YAAY,OAAO,IACnBC,cAAc,OAAO,IACrBC,UAAU,OAAO,EACjB;YACAH,oBAAoB,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG;YAC3CC,YAAY,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAGI,mCAAmC,EAAE,CAAC;QAC9E;IACF;IAEA,OAAO;QACLC;QACAC;IACF;AACF,EAAC"}

package/lib/webchat/index-types.d.ts

@@ -0,0 +1,7 @@
+import type { WebchatArgs } from '../index-types.js';
+export interface WebchatDevProps extends WebchatArgs {
+    initialDevSettings?: {
+        keepSessionOnReload?: boolean;
+        showSessionView?: boolean;
+    };
+}

package/lib/webchat/index-types.js

@@ -0,0 +1,4 @@
+
+
+
+//# sourceMappingURL=index-types.js.map

package/lib/webchat/index-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/index-types.js","sources":["../../src/webchat/index-types.ts"],"sourcesContent":["import type { WebchatArgs } from '../index-types'\n\nexport interface WebchatDevProps extends WebchatArgs {\n  initialDevSettings?: {\n    keepSessionOnReload?: boolean\n    showSessionView?: boolean\n  }\n}\n"],"names":[],"mappings":"AAOC"}

package/lib/webchat/index.d.ts

@@ -0,0 +1,6 @@
+export { type ClientSession, WebchatContext } from './context/index.js';
+export * from './custom-messages/index.js';
+export { Webchat } from './webchat.js';
+export { WebchatDev } from './webchat-dev.js';
+export declare function getBotonicApp(): any;
+export * from './index-types.js';

package/lib/webchat/index.js

@@ -0,0 +1,23 @@
+export * from "./custom-messages/index.js";
+export * from "./index-types.js";
+
+
+
+// @ts-nocheck
+
+
+
+
+function getBotonicApp() {
+    // Botonic is exported from your bot
+    // eslint-disable-next-line no-undef
+    return Botonic;
+}
+
+
+export { getBotonicApp };
+export { WebchatContext } from "./context/index.js";
+export { Webchat } from "./webchat.js";
+export { WebchatDev } from "./webchat-dev.js";
+
+//# sourceMappingURL=index.js.map

package/lib/webchat/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/index.js","sources":["../../src/webchat/index.ts"],"sourcesContent":["// @ts-nocheck\nexport { type ClientSession, WebchatContext } from './context'\nexport * from './custom-messages'\nexport { Webchat } from './webchat'\nexport { WebchatDev } from './webchat-dev'\n\nexport function getBotonicApp() {\n  // Botonic is exported from your bot\n  // eslint-disable-next-line no-undef\n  return Botonic\n}\n\nexport * from './index-types'\n"],"names":["WebchatContext","Webchat","WebchatDev","getBotonicApp","Botonic"],"mappings":";;;;;AAAA,cAAc;AACgD;AAC7B;AACE;AACO;AAEnC,SAASG,aAAaA;IAC3B,oCAAoC;IACpC,oCAAoC;IACpC,OAAOC;AACT;AAE6B"}

package/lib/webchat/input-panel/attachment.d.ts

@@ -0,0 +1,6 @@
+interface AttachmentProps {
+    accept: string;
+    onChange: (event: any) => void;
+}
+export declare const Attachment: ({ accept, onChange }: AttachmentProps) => import("react").JSX.Element;
+export {};

package/lib/webchat/input-panel/attachment.js

@@ -0,0 +1,71 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useRef } from "react";
+import attachment_icon from "../../assets/attachment-icon.svg";
+import { ROLES } from "../../constants.js";
+import { WebchatContext } from "../context/index.js";
+import { Icon } from "../components/common.js";
+import { ConditionalAnimation } from "../components/conditional-animation.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const Attachment = ({ accept, onChange })=>{
+    const { webchatState } = useContext(WebchatContext);
+    const fileInputRef = useRef(null);
+    const CustomAttachments = webchatState.theme.userInput?.attachments?.custom;
+    const isAttachmentsEnabled = ()=>{
+        const hasCustomAttachments = !!CustomAttachments;
+        return webchatState.theme.userInput?.attachments?.enable ?? hasCustomAttachments;
+    };
+    const attachmentsEnabled = isAttachmentsEnabled();
+    const handleOnChange = (event)=>{
+        onChange(event);
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    };
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: attachmentsEnabled ? /*#__PURE__*/ jsx(ConditionalAnimation, {
+            children: /*#__PURE__*/ jsxs("div", {
+                role: ROLES.ATTACHMENT_ICON,
+                children: [
+                    /*#__PURE__*/ jsx("label", {
+                        htmlFor: "attachment",
+                        style: {
+                            marginTop: 4
+                        },
+                        children: CustomAttachments ? /*#__PURE__*/ jsx(CustomAttachments, {}) : /*#__PURE__*/ jsx(Icon, {
+                            src: attachment_icon
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("input", {
+                        ref: fileInputRef,
+                        type: "file",
+                        name: "file",
+                        id: "attachment",
+                        style: {
+                            display: 'none'
+                        },
+                        onChange: handleOnChange,
+                        accept: accept
+                    })
+                ]
+            })
+        }) : null
+    });
+};
+
+export { Attachment };
+
+//# sourceMappingURL=attachment.js.map

package/lib/webchat/input-panel/attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/input-panel/attachment.js","sources":["../../../src/webchat/input-panel/attachment.tsx"],"sourcesContent":["import { useContext, useRef } from 'react'\n\nimport AttachmentIcon from '../../assets/attachment-icon.svg'\nimport { ROLES } from '../../constants'\nimport { WebchatContext } from '../../webchat/context'\nimport { Icon } from '../components/common'\nimport { ConditionalAnimation } from '../components/conditional-animation'\n\ninterface AttachmentProps {\n  accept: string\n  onChange: (event: any) => void\n}\n\nexport const Attachment = ({ accept, onChange }: AttachmentProps) => {\n  const { webchatState } = useContext(WebchatContext)\n\n  const fileInputRef = useRef<HTMLInputElement | null>(null)\n\n  const CustomAttachments = webchatState.theme.userInput?.attachments?.custom\n\n  const isAttachmentsEnabled = () => {\n    const hasCustomAttachments = !!CustomAttachments\n    return (\n      webchatState.theme.userInput?.attachments?.enable ?? hasCustomAttachments\n    )\n  }\n  const attachmentsEnabled = isAttachmentsEnabled()\n\n  const handleOnChange = event => {\n    onChange(event)\n    if (fileInputRef.current) {\n      fileInputRef.current.value = ''\n    }\n  }\n\n  return (\n    <>\n      {attachmentsEnabled ? (\n        <ConditionalAnimation>\n          <div role={ROLES.ATTACHMENT_ICON}>\n            <label htmlFor='attachment' style={{ marginTop: 4 }}>\n              {CustomAttachments ? (\n                <CustomAttachments />\n              ) : (\n                <Icon src={AttachmentIcon} />\n              )}\n            </label>\n            <input\n              ref={fileInputRef}\n              type='file'\n              name='file'\n              id='attachment'\n              style={{ display: 'none' }}\n              onChange={handleOnChange}\n              accept={accept}\n            />\n          </div>\n        </ConditionalAnimation>\n      ) : null}\n    </>\n  )\n}\n"],"names":["useContext","useRef","AttachmentIcon","ROLES","WebchatContext","Icon","ConditionalAnimation","Attachment","accept","onChange","webchatState","fileInputRef","CustomAttachments","isAttachmentsEnabled","hasCustomAttachments","attachmentsEnabled","handleOnChange","event"],"mappings":";;;;;;;;;;;;;;;;AAA0C;AAEmB;AACtB;AACe;AACX;AAC+B;AAOnE,MAAMO,UAAUA,GAAG,CAAC,EAAEC,MAAM,EAAEC,QAAQ,EAAmB;IAC9D,MAAM,EAAEC,YAAY,EAAE,GAAGV,UAAUA,CAACI,cAAcA;IAElD,MAAMO,eAAeV,MAAMA,CAA0B;IAErD,MAAMW,oBAAoBF,aAAa,KAAK,CAAC,SAAS,EAAE,aAAa;IAErE,MAAMG,uBAAuB;QAC3B,MAAMC,uBAAuB,CAAC,CAACF;QAC/B,OACEF,aAAa,KAAK,CAAC,SAAS,EAAE,aAAa,UAAUI;IAEzD;IACA,MAAMC,qBAAqBF;IAE3B,MAAMG,iBAAiBC,CAAAA;QACrBR,SAASQ;QACT,IAAIN,aAAa,OAAO,EAAE;YACxBA,aAAa,OAAO,CAAC,KAAK,GAAG;QAC/B;IACF;IAEA,qBACE;kBACGI,mCACC,IAACT,oBAAoBA;sBACnB,mBAAC;gBAAI,MAAMH,qBAAqB;;kCAC9B,IAAC;wBAAM,SAAQ;wBAAa,OAAO;4BAAE,WAAW;wBAAE;kCAC/CS,kCACC,IAACA,uCAED,IAACP,IAAIA;4BAAC,KAAKH,eAAcA;;;kCAG7B,IAAC;wBACC,KAAKS;wBACL,MAAK;wBACL,MAAK;wBACL,IAAG;wBACH,OAAO;4BAAE,SAAS;wBAAO;wBACzB,UAAUK;wBACV,QAAQR;;;;aAIZ;;AAGV,EAAC"}

package/lib/webchat/input-panel/emoji-picker.d.ts

@@ -0,0 +1,5 @@
+interface EmojiPickerProps {
+    onClick: () => void;
+}
+export declare const EmojiPicker: ({ onClick }: EmojiPickerProps) => import("react").JSX.Element;
+export {};

package/lib/webchat/input-panel/emoji-picker.js

@@ -0,0 +1,50 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import emojiButton from "../../assets/emojiButton.svg";
+import { ROLES } from "../../constants.js";
+import { WebchatContext } from "../context/index.js";
+import { Icon } from "../components/common.js";
+import { ConditionalAnimation } from "../components/conditional-animation.js";
+
+
+
+
+
+
+
+
+
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the emoji picker */ /** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the emoji picker */ 
+
+
+
+
+
+const EmojiPicker = ({ onClick })=>{
+    const { webchatState } = useContext(WebchatContext);
+    const CustomEmojiPicker = webchatState.theme.userInput?.emojiPicker?.custom;
+    const isEmojiPickerEnabled = ()=>{
+        const hasCustomEmojiPicker = !!CustomEmojiPicker;
+        return webchatState.theme.userInput?.emojiPicker?.enable ?? hasCustomEmojiPicker;
+    };
+    const emojiPickerEnabled = isEmojiPickerEnabled();
+    const handleClick = (event)=>{
+        onClick();
+        event.stopPropagation();
+    };
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: emojiPickerEnabled ? /*#__PURE__*/ jsx(ConditionalAnimation, {
+            children: /*#__PURE__*/ jsx("div", {
+                role: ROLES.EMOJI_PICKER_ICON,
+                onClick: handleClick,
+                children: CustomEmojiPicker ? /*#__PURE__*/ jsx(CustomEmojiPicker, {}) : /*#__PURE__*/ jsx(Icon, {
+                    src: emojiButton
+                })
+            })
+        }) : null
+    });
+};
+
+export { EmojiPicker };
+
+//# sourceMappingURL=emoji-picker.js.map

package/lib/webchat/input-panel/emoji-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/input-panel/emoji-picker.js","sources":["../../../src/webchat/input-panel/emoji-picker.tsx"],"sourcesContent":["/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the emoji picker */\n/** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the emoji picker */\nimport { useContext } from 'react'\n\nimport LogoEmoji from '../../assets/emojiButton.svg'\nimport { ROLES } from '../../constants'\nimport { WebchatContext } from '../../webchat/context'\nimport { Icon } from '../components/common'\nimport { ConditionalAnimation } from '../components/conditional-animation'\n\ninterface EmojiPickerProps {\n  onClick: () => void\n}\n\nexport const EmojiPicker = ({ onClick }: EmojiPickerProps) => {\n  const { webchatState } = useContext(WebchatContext)\n\n  const CustomEmojiPicker = webchatState.theme.userInput?.emojiPicker?.custom\n\n  const isEmojiPickerEnabled = () => {\n    const hasCustomEmojiPicker = !!CustomEmojiPicker\n    return (\n      webchatState.theme.userInput?.emojiPicker?.enable ?? hasCustomEmojiPicker\n    )\n  }\n  const emojiPickerEnabled = isEmojiPickerEnabled()\n\n  const handleClick = (event: any) => {\n    onClick()\n    event.stopPropagation()\n  }\n\n  return (\n    <>\n      {emojiPickerEnabled ? (\n        <ConditionalAnimation>\n          <div role={ROLES.EMOJI_PICKER_ICON} onClick={handleClick}>\n            {CustomEmojiPicker ? (\n              <CustomEmojiPicker />\n            ) : (\n              <Icon src={LogoEmoji} />\n            )}\n          </div>\n        </ConditionalAnimation>\n      ) : null}\n    </>\n  )\n}\n"],"names":["useContext","LogoEmoji","ROLES","WebchatContext","Icon","ConditionalAnimation","EmojiPicker","onClick","webchatState","CustomEmojiPicker","isEmojiPickerEnabled","hasCustomEmojiPicker","emojiPickerEnabled","handleClick","event"],"mappings":";;;;;;;;;;;;;;;;AAAA,gHAAgH,GAChH,gHAAgH,GAC9E;AAEkB;AACb;AACe;AACX;AAC+B;AAMnE,MAAMM,WAAWA,GAAG,CAAC,EAAEC,OAAO,EAAoB;IACvD,MAAM,EAAEC,YAAY,EAAE,GAAGR,UAAUA,CAACG,cAAcA;IAElD,MAAMM,oBAAoBD,aAAa,KAAK,CAAC,SAAS,EAAE,aAAa;IAErE,MAAME,uBAAuB;QAC3B,MAAMC,uBAAuB,CAAC,CAACF;QAC/B,OACED,aAAa,KAAK,CAAC,SAAS,EAAE,aAAa,UAAUG;IAEzD;IACA,MAAMC,qBAAqBF;IAE3B,MAAMG,cAAc,CAACC;QACnBP;QACAO,MAAM,eAAe;IACvB;IAEA,qBACE;kBACGF,mCACC,IAACP,oBAAoBA;sBACnB,kBAAC;gBAAI,MAAMH,uBAAuB;gBAAE,SAASW;0BAC1CJ,kCACC,IAACA,uCAED,IAACL,IAAIA;oBAAC,KAAKH,WAASA;;;aAIxB;;AAGV,EAAC"}

package/lib/webchat/input-panel/index.d.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+interface InputPanelProps {
+    handleAttachment: (event: any) => void;
+    textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>;
+    host: HTMLElement;
+    onUserInput?: (event: any) => Promise<void>;
+}
+export declare const InputPanel: ({ handleAttachment, textareaRef, host, onUserInput, }: InputPanelProps) => React.JSX.Element;
+export {};

package/lib/webchat/input-panel/index.js

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { WEBCHAT } from "../../constants.js";
+import { getFullMimeWhitelist } from "../../message-utils.js";
+import { WebchatContext } from "../context/index.js";
+import { BotonicContainerId } from "../constants.js";
+import { Attachment } from "./attachment.js";
+import { EmojiPicker } from "./emoji-picker.js";
+import { OpenedEmojiPicker } from "./opened-emoji-picker.js";
+import { PersistentMenu } from "./persistent-menu.js";
+import { SendButton } from "./send-button.js";
+import { UserInputContainer } from "./styles.js";
+import { Textarea } from "./textarea.js";
+import { useTypingChatEventSender } from "./use-typing-chat-event-sender.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const InputPanel = ({ handleAttachment, textareaRef, host, onUserInput })=>{
+    const { getThemeProperty, sendText, togglePersistentMenu, toggleEmojiPicker, webchatState, inputPanelRef } = useContext(WebchatContext);
+    const handleSelectedEmoji = (event)=>{
+        if (!textareaRef.current) {
+            return;
+        }
+        textareaRef.current.value += event.emoji;
+        textareaRef.current.focus();
+    };
+    const handleEmojiClick = ()=>{
+        toggleEmojiPicker(!webchatState.isEmojiPickerOpen);
+    };
+    const handleMenu = ()=>{
+        togglePersistentMenu(!webchatState.isPersistentMenuOpen);
+    };
+    const sendTextAreaText = async ()=>{
+        if (!textareaRef.current) {
+            return;
+        }
+        await sendText(textareaRef.current?.value);
+        textareaRef.current.value = '';
+    };
+    // Network layer: deduplicates typing_on/off before they reach onUserInput.
+    const sendChatEvent = useTypingChatEventSender({
+        onUserInput,
+        session: webchatState.session,
+        lastRoutePath: webchatState.lastRoutePath
+    });
+    return /*#__PURE__*/ jsxs(UserInputContainer, {
+        id: BotonicContainerId.InputPanel,
+        ref: inputPanelRef,
+        style: {
+            ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userInputStyle)
+        },
+        className: "user-input-container",
+        children: [
+            webchatState.isEmojiPickerOpen && /*#__PURE__*/ jsx(OpenedEmojiPicker, {
+                onEmojiClick: handleSelectedEmoji,
+                onClick: handleEmojiClick
+            }),
+            /*#__PURE__*/ jsx(PersistentMenu, {
+                onClick: handleMenu
+            }),
+            /*#__PURE__*/ jsx(Textarea, {
+                host: host,
+                textareaRef: textareaRef,
+                sendChatEvent: sendChatEvent,
+                sendTextAreaText: sendTextAreaText
+            }),
+            /*#__PURE__*/ jsx(EmojiPicker, {
+                onClick: handleEmojiClick
+            }),
+            /*#__PURE__*/ jsx(Attachment, {
+                onChange: handleAttachment,
+                accept: getFullMimeWhitelist().join(',')
+            }),
+            /*#__PURE__*/ jsx(SendButton, {
+                onClick: sendTextAreaText
+            })
+        ]
+    });
+};
+
+export { InputPanel };
+
+//# sourceMappingURL=index.js.map

package/lib/webchat/input-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/input-panel/index.js","sources":["../../../src/webchat/input-panel/index.tsx"],"sourcesContent":["import type React from 'react'\nimport { useContext } from 'react'\n\nimport { WEBCHAT } from '../../constants'\nimport { getFullMimeWhitelist } from '../../message-utils'\nimport { WebchatContext } from '../../webchat/context'\nimport { BotonicContainerId } from '../constants'\nimport { Attachment } from './attachment'\nimport { EmojiPicker } from './emoji-picker'\nimport { OpenedEmojiPicker } from './opened-emoji-picker'\nimport { PersistentMenu } from './persistent-menu'\nimport { SendButton } from './send-button'\nimport { UserInputContainer } from './styles'\nimport { Textarea } from './textarea'\nimport { useTypingChatEventSender } from './use-typing-chat-event-sender'\n\ninterface InputPanelProps {\n  handleAttachment: (event: any) => void\n  textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>\n  host: HTMLElement\n  onUserInput?: (event: any) => Promise<void>\n}\n\nexport const InputPanel = ({\n  handleAttachment,\n  textareaRef,\n  host,\n  onUserInput,\n}: InputPanelProps) => {\n  const {\n    getThemeProperty,\n    sendText,\n    togglePersistentMenu,\n    toggleEmojiPicker,\n    webchatState,\n    inputPanelRef,\n  } = useContext(WebchatContext)\n\n  const handleSelectedEmoji = event => {\n    if (!textareaRef.current) {\n      return\n    }\n\n    textareaRef.current.value += event.emoji\n    textareaRef.current.focus()\n  }\n\n  const handleEmojiClick = () => {\n    toggleEmojiPicker(!webchatState.isEmojiPickerOpen)\n  }\n\n  const handleMenu = () => {\n    togglePersistentMenu(!webchatState.isPersistentMenuOpen)\n  }\n\n  const sendTextAreaText = async () => {\n    if (!textareaRef.current) {\n      return\n    }\n\n    await sendText(textareaRef.current?.value)\n    textareaRef.current.value = ''\n  }\n\n  // Network layer: deduplicates typing_on/off before they reach onUserInput.\n  const sendChatEvent = useTypingChatEventSender({\n    onUserInput,\n    session: webchatState.session,\n    lastRoutePath: webchatState.lastRoutePath,\n  })\n\n  return (\n    <UserInputContainer\n      id={BotonicContainerId.InputPanel}\n      ref={inputPanelRef}\n      style={{\n        ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userInputStyle),\n      }}\n      className='user-input-container'\n    >\n      {webchatState.isEmojiPickerOpen && (\n        <OpenedEmojiPicker\n          onEmojiClick={handleSelectedEmoji}\n          onClick={handleEmojiClick}\n        />\n      )}\n\n      <PersistentMenu onClick={handleMenu} />\n\n      <Textarea\n        host={host}\n        textareaRef={textareaRef}\n        sendChatEvent={sendChatEvent}\n        sendTextAreaText={sendTextAreaText}\n      />\n\n      <EmojiPicker onClick={handleEmojiClick} />\n\n      <Attachment\n        onChange={handleAttachment}\n        accept={getFullMimeWhitelist().join(',')}\n      />\n\n      <SendButton onClick={sendTextAreaText} />\n    </UserInputContainer>\n  )\n}\n"],"names":["useContext","WEBCHAT","getFullMimeWhitelist","WebchatContext","BotonicContainerId","Attachment","EmojiPicker","OpenedEmojiPicker","PersistentMenu","SendButton","UserInputContainer","Textarea","useTypingChatEventSender","InputPanel","handleAttachment","textareaRef","host","onUserInput","getThemeProperty","sendText","togglePersistentMenu","toggleEmojiPicker","webchatState","inputPanelRef","handleSelectedEmoji","event","handleEmojiClick","handleMenu","sendTextAreaText","sendChatEvent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACkC;AAEO;AACiB;AACJ;AACL;AACR;AACG;AACa;AACP;AACR;AACG;AACR;AACoC;AASlE,MAAMa,UAAUA,GAAG,CAAC,EACzBC,gBAAgB,EAChBC,WAAW,EACXC,IAAI,EACJC,WAAW,EACK;IAChB,MAAM,EACJC,gBAAgB,EAChBC,QAAQ,EACRC,oBAAoB,EACpBC,iBAAiB,EACjBC,YAAY,EACZC,aAAa,EACd,GAAGvB,UAAUA,CAACG,cAAcA;IAE7B,MAAMqB,sBAAsBC,CAAAA;QAC1B,IAAI,CAACV,YAAY,OAAO,EAAE;YACxB;QACF;QAEAA,YAAY,OAAO,CAAC,KAAK,IAAIU,MAAM,KAAK;QACxCV,YAAY,OAAO,CAAC,KAAK;IAC3B;IAEA,MAAMW,mBAAmB;QACvBL,kBAAkB,CAACC,aAAa,iBAAiB;IACnD;IAEA,MAAMK,aAAa;QACjBP,qBAAqB,CAACE,aAAa,oBAAoB;IACzD;IAEA,MAAMM,mBAAmB;QACvB,IAAI,CAACb,YAAY,OAAO,EAAE;YACxB;QACF;QAEA,MAAMI,SAASJ,YAAY,OAAO,EAAE;QACpCA,YAAY,OAAO,CAAC,KAAK,GAAG;IAC9B;IAEA,2EAA2E;IAC3E,MAAMc,gBAAgBjB,wBAAwBA,CAAC;QAC7CK;QACA,SAASK,aAAa,OAAO;QAC7B,eAAeA,aAAa,aAAa;IAC3C;IAEA,qBACE,KAACZ,kBAAkBA;QACjB,IAAIN,6BAA6B;QACjC,KAAKmB;QACL,OAAO;YACL,GAAGL,iBAAiBjB,wCAAwC,CAAC;QAC/D;QACA,WAAU;;YAETqB,aAAa,iBAAiB,kBAC7B,IAACf,iBAAiBA;gBAChB,cAAciB;gBACd,SAASE;;0BAIb,IAAClB,cAAcA;gBAAC,SAASmB;;0BAEzB,IAAChB,QAAQA;gBACP,MAAMK;gBACN,aAAaD;gBACb,eAAec;gBACf,kBAAkBD;;0BAGpB,IAACtB,WAAWA;gBAAC,SAASoB;;0BAEtB,IAACrB,UAAUA;gBACT,UAAUS;gBACV,QAAQZ,oBAAoBA,GAAG,IAAI,CAAC;;0BAGtC,IAACO,UAAUA;gBAAC,SAASmB;;;;AAG3B,EAAC"}

package/lib/webchat/input-panel/opened-emoji-picker.d.ts

@@ -0,0 +1,6 @@
+interface OpenedEmojiPickerProps {
+    onClick: () => void;
+    onEmojiClick: (event: any) => void;
+}
+export declare const OpenedEmojiPicker: ({ onClick, onEmojiClick, }: OpenedEmojiPickerProps) => import("react").JSX.Element;
+export {};

package/lib/webchat/input-panel/opened-emoji-picker.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import emoji_picker_react from "emoji-picker-react";
+import { ROLES } from "../../constants.js";
+import { useComponentVisible } from "../hooks/index.js";
+import { OpenedEmojiPickerContainer } from "./styles.js";
+
+
+
+
+
+
+
+
+
+
+
+const OpenedEmojiPicker = ({ onClick, onEmojiClick })=>{
+    const { ref, isComponentVisible } = useComponentVisible(true, onClick);
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        children: isComponentVisible && /*#__PURE__*/ jsx(OpenedEmojiPickerContainer, {
+            role: ROLES.EMOJI_PICKER,
+            children: /*#__PURE__*/ jsx(emoji_picker_react, {
+                width: "100%",
+                height: "19rem",
+                previewConfig: {
+                    showPreview: false
+                },
+                lazyLoadEmojis: true,
+                onEmojiClick: onEmojiClick,
+                autoFocusSearch: false
+            })
+        })
+    });
+};
+
+export { OpenedEmojiPicker };
+
+//# sourceMappingURL=opened-emoji-picker.js.map

package/lib/webchat/input-panel/opened-emoji-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/input-panel/opened-emoji-picker.js","sources":["../../../src/webchat/input-panel/opened-emoji-picker.tsx"],"sourcesContent":["import Picker from 'emoji-picker-react'\nimport type { LegacyRef } from 'react'\n\nimport { ROLES } from '../../constants'\nimport { useComponentVisible } from '../hooks'\nimport { OpenedEmojiPickerContainer } from './styles'\n\ninterface OpenedEmojiPickerProps {\n  onClick: () => void\n  onEmojiClick: (event: any) => void\n}\n\nexport const OpenedEmojiPicker = ({\n  onClick,\n  onEmojiClick,\n}: OpenedEmojiPickerProps) => {\n  const { ref, isComponentVisible } = useComponentVisible(true, onClick)\n  return (\n    <div ref={ref as LegacyRef<HTMLDivElement>}>\n      {isComponentVisible && (\n        <OpenedEmojiPickerContainer role={ROLES.EMOJI_PICKER}>\n          <Picker\n            width='100%'\n            height='19rem'\n            previewConfig={{ showPreview: false }}\n            lazyLoadEmojis={true}\n            onEmojiClick={onEmojiClick}\n            autoFocusSearch={false}\n          />\n        </OpenedEmojiPickerContainer>\n      )}\n    </div>\n  )\n}\n"],"names":["Picker","ROLES","useComponentVisible","OpenedEmojiPickerContainer","OpenedEmojiPicker","onClick","onEmojiClick","ref","isComponentVisible"],"mappings":";;;;;;;;;;;;AAAuC;AAGA;AACO;AACO;AAO9C,MAAMI,iBAAiBA,GAAG,CAAC,EAChCC,OAAO,EACPC,YAAY,EACW;IACvB,MAAM,EAAEC,GAAG,EAAEC,kBAAkB,EAAE,GAAGN,mBAAmBA,CAAC,MAAMG;IAC9D,qBACE,IAAC;QAAI,KAAKE;kBACPC,oCACC,IAACL,0BAA0BA;YAAC,MAAMF,kBAAkB;sBAClD,kBAACD,kBAAMA;gBACL,OAAM;gBACN,QAAO;gBACP,eAAe;oBAAE,aAAa;gBAAM;gBACpC,gBAAgB;gBAChB,cAAcM;gBACd,iBAAiB;;;;AAM7B,EAAC"}

package/lib/webchat/input-panel/persistent-menu.d.ts

@@ -0,0 +1,5 @@
+interface PersistentMenuProps {
+    onClick: () => void;
+}
+export declare const PersistentMenu: ({ onClick }: PersistentMenuProps) => import("react").JSX.Element;
+export {};

package/lib/webchat/input-panel/persistent-menu.js

@@ -0,0 +1,42 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import menuButton from "../../assets/menuButton.svg";
+import { ROLES } from "../../constants.js";
+import { WebchatContext } from "../context/index.js";
+import { Icon } from "../components/common.js";
+import { ConditionalAnimation } from "../components/conditional-animation.js";
+
+
+
+
+
+
+
+
+
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the persistent menu */ /** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the persistent menu */ 
+
+
+
+
+
+const PersistentMenu = ({ onClick })=>{
+    const { webchatState } = useContext(WebchatContext);
+    const persistentMenuOptions = webchatState.theme.userInput?.persistentMenu;
+    const CustomMenuButton = webchatState.theme.userInput?.menuButton?.custom;
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: persistentMenuOptions ? /*#__PURE__*/ jsx(ConditionalAnimation, {
+            children: /*#__PURE__*/ jsx("div", {
+                role: ROLES.PERSISTENT_MENU_ICON,
+                onClick: onClick,
+                children: CustomMenuButton ? /*#__PURE__*/ jsx(CustomMenuButton, {}) : /*#__PURE__*/ jsx(Icon, {
+                    src: menuButton
+                })
+            })
+        }) : null
+    });
+};
+
+export { PersistentMenu };
+
+//# sourceMappingURL=persistent-menu.js.map

package/lib/webchat/input-panel/persistent-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/input-panel/persistent-menu.js","sources":["../../../src/webchat/input-panel/persistent-menu.tsx"],"sourcesContent":["/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the persistent menu */\n/** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the persistent menu */\nimport { useContext } from 'react'\n\nimport LogoMenu from '../../assets/menuButton.svg'\nimport { ROLES } from '../../constants'\nimport { WebchatContext } from '../../webchat/context'\nimport { Icon } from '../components/common'\nimport { ConditionalAnimation } from '../components/conditional-animation'\n\ninterface PersistentMenuProps {\n  onClick: () => void\n}\n\nexport const PersistentMenu = ({ onClick }: PersistentMenuProps) => {\n  const { webchatState } = useContext(WebchatContext)\n\n  const persistentMenuOptions = webchatState.theme.userInput?.persistentMenu\n\n  const CustomMenuButton = webchatState.theme.userInput?.menuButton?.custom\n\n  return (\n    <>\n      {persistentMenuOptions ? (\n        <ConditionalAnimation>\n          <div role={ROLES.PERSISTENT_MENU_ICON} onClick={onClick}>\n            {CustomMenuButton ? <CustomMenuButton /> : <Icon src={LogoMenu} />}\n          </div>\n        </ConditionalAnimation>\n      ) : null}\n    </>\n  )\n}\n"],"names":["useContext","LogoMenu","ROLES","WebchatContext","Icon","ConditionalAnimation","PersistentMenu","onClick","webchatState","persistentMenuOptions","CustomMenuButton"],"mappings":";;;;;;;;;;;;;;;;AAAA,mHAAmH,GACnH,mHAAmH,GACjF;AAEgB;AACX;AACe;AACX;AAC+B;AAMnE,MAAMM,cAAcA,GAAG,CAAC,EAAEC,OAAO,EAAuB;IAC7D,MAAM,EAAEC,YAAY,EAAE,GAAGR,UAAUA,CAACG,cAAcA;IAElD,MAAMM,wBAAwBD,aAAa,KAAK,CAAC,SAAS,EAAE;IAE5D,MAAME,mBAAmBF,aAAa,KAAK,CAAC,SAAS,EAAE,YAAY;IAEnE,qBACE;kBACGC,sCACC,IAACJ,oBAAoBA;sBACnB,kBAAC;gBAAI,MAAMH,0BAA0B;gBAAE,SAASK;0BAC7CG,iCAAmB,IAACA,sCAAsB,IAACN,IAAIA;oBAAC,KAAKH,UAAQA;;;aAGhE;;AAGV,EAAC"}

package/lib/webchat/input-panel/send-button.d.ts

@@ -0,0 +1,5 @@
+interface SendButtonProps {
+    onClick: () => Promise<void>;
+}
+export declare const SendButton: ({ onClick }: SendButtonProps) => import("react").JSX.Element;
+export {};

package/lib/webchat/input-panel/send-button.js

@@ -0,0 +1,46 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import send_button from "../../assets/send-button.svg";
+import { ROLES } from "../../constants.js";
+import { WebchatContext } from "../context/index.js";
+import { Icon } from "../components/common.js";
+import { ConditionalAnimation } from "../components/conditional-animation.js";
+
+
+
+
+
+
+
+
+
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the send button */ /** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the send button */ 
+
+
+
+
+
+const SendButton = ({ onClick })=>{
+    const { webchatState } = useContext(WebchatContext);
+    const CustomSendButton = webchatState.theme.userInput?.sendButton?.custom;
+    const isSendButtonEnabled = ()=>{
+        const hasCustomSendButton = !!CustomSendButton;
+        return webchatState.theme.userInput?.sendButton?.enable ?? hasCustomSendButton;
+    };
+    const sendButtonEnabled = isSendButtonEnabled();
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: sendButtonEnabled ? /*#__PURE__*/ jsx(ConditionalAnimation, {
+            children: /*#__PURE__*/ jsx("div", {
+                onClick: onClick,
+                role: ROLES.SEND_BUTTON_ICON,
+                children: CustomSendButton ? /*#__PURE__*/ jsx(CustomSendButton, {}) : /*#__PURE__*/ jsx(Icon, {
+                    src: send_button
+                })
+            })
+        }) : null
+    });
+};
+
+export { SendButton };
+
+//# sourceMappingURL=send-button.js.map

package/lib/webchat/input-panel/send-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/input-panel/send-button.js","sources":["../../../src/webchat/input-panel/send-button.tsx"],"sourcesContent":["/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the send button */\n/** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the send button */\nimport { useContext } from 'react'\n\nimport SendButtonIcon from '../../assets/send-button.svg'\nimport { ROLES } from '../../constants'\nimport { WebchatContext } from '../../webchat/context'\nimport { Icon } from '../components/common'\nimport { ConditionalAnimation } from '../components/conditional-animation'\n\ninterface SendButtonProps {\n  onClick: () => Promise<void>\n}\n\nexport const SendButton = ({ onClick }: SendButtonProps) => {\n  const { webchatState } = useContext(WebchatContext)\n\n  const CustomSendButton = webchatState.theme.userInput?.sendButton?.custom\n\n  const isSendButtonEnabled = () => {\n    const hasCustomSendButton = !!CustomSendButton\n    return (\n      webchatState.theme.userInput?.sendButton?.enable ?? hasCustomSendButton\n    )\n  }\n  const sendButtonEnabled = isSendButtonEnabled()\n\n  return (\n    <>\n      {sendButtonEnabled ? (\n        <ConditionalAnimation>\n          <div onClick={onClick} role={ROLES.SEND_BUTTON_ICON}>\n            {CustomSendButton ? (\n              <CustomSendButton />\n            ) : (\n              <Icon src={SendButtonIcon} />\n            )}\n          </div>\n        </ConditionalAnimation>\n      ) : null}\n    </>\n  )\n}\n"],"names":["useContext","SendButtonIcon","ROLES","WebchatContext","Icon","ConditionalAnimation","SendButton","onClick","webchatState","CustomSendButton","isSendButtonEnabled","hasCustomSendButton","sendButtonEnabled"],"mappings":";;;;;;;;;;;;;;;;AAAA,+GAA+G,GAC/G,+GAA+G,GAC7E;AAEuB;AAClB;AACe;AACX;AAC+B;AAMnE,MAAMM,UAAUA,GAAG,CAAC,EAAEC,OAAO,EAAmB;IACrD,MAAM,EAAEC,YAAY,EAAE,GAAGR,UAAUA,CAACG,cAAcA;IAElD,MAAMM,mBAAmBD,aAAa,KAAK,CAAC,SAAS,EAAE,YAAY;IAEnE,MAAME,sBAAsB;QAC1B,MAAMC,sBAAsB,CAAC,CAACF;QAC9B,OACED,aAAa,KAAK,CAAC,SAAS,EAAE,YAAY,UAAUG;IAExD;IACA,MAAMC,oBAAoBF;IAE1B,qBACE;kBACGE,kCACC,IAACP,oBAAoBA;sBACnB,kBAAC;gBAAI,SAASE;gBAAS,MAAML,sBAAsB;0BAChDO,iCACC,IAACA,sCAED,IAACL,IAAIA;oBAAC,KAAKH,WAAcA;;;aAI7B;;AAGV,EAAC"}

package/lib/webchat/input-panel/styles.js

@@ -0,0 +1,35 @@
+import styled_components from "styled-components";
+import { COLORS } from "../../constants.js";
+
+
+
+
+
+const UserInputContainer = styled_components.div`
+  min-height: 52px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 16px;
+  padding: 0px 16px;
+  z-index: 1;
+  border-top: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_5};
+`;
+const TextAreaContainer = styled_components.div`
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  padding: 5px 0px;
+`;
+const OpenedEmojiPickerContainer = styled_components.div`
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  right: 3px;
+  top: -324px;
+`;
+
+export { OpenedEmojiPickerContainer, TextAreaContainer, UserInputContainer };
+
+//# sourceMappingURL=styles.js.map

package/lib/webchat/input-panel/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/input-panel/styles.js","sources":["../../../src/webchat/input-panel/styles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nimport { COLORS } from '../../constants'\n\nexport const UserInputContainer = styled.div`\n  min-height: 52px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 16px;\n  padding: 0px 16px;\n  z-index: 1;\n  border-top: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_5};\n`\n\nexport const TextAreaContainer = styled.div`\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  padding: 5px 0px;\n`\n\nexport const OpenedEmojiPickerContainer = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  position: absolute;\n  right: 3px;\n  top: -324px;\n`\n"],"names":["styled","COLORS","UserInputContainer","TextAreaContainer","OpenedEmojiPickerContainer"],"mappings":";;;;;AAAsC;AAEE;AAEjC,MAAME,kBAAkBA,GAAGF,qBAAU,CAAC;;;;;;;;;wBASrB,EAAEC,4BAA4B,CAAC;AACvD,CAAC;AAEM,MAAME,iBAAiBA,GAAGH,qBAAU,CAAC;;;;;AAK5C,CAAC;AAEM,MAAMI,0BAA0BA,GAAGJ,qBAAU,CAAC;;;;;;AAMrD,CAAC"}

package/lib/webchat/input-panel/textarea.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+import type { TypingChatEvent } from './typing-network-sender.js';
+interface TextareaProps {
+    host: HTMLElement;
+    textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>;
+    sendChatEvent: (event: TypingChatEvent) => Promise<boolean>;
+    sendTextAreaText: () => Promise<void>;
+}
+export { TYPING_IDLE_MS } from './use-typing-session.js';
+export declare const Textarea: ({ host, textareaRef, sendChatEvent, sendTextAreaText, }: TextareaProps) => React.JSX.Element;