@@ -84204,9 +84237,10 @@
`,
- disconnected: `
`,
+ disconnected: `
+`,
noWiFi: `
@@ -84261,32 +84295,6 @@
return textChatOptions?.popup?.icons?.mute?.svgOn || chatIcons.unmute;
}
- // alan_btn/src/state.ts
- var uiState = {
- lib: {
- version: ""
- },
- project: {
- id: null
- },
- btn: {
- isTopAligned: false,
- zIndex: void 0
- },
- textChat: {
- available: false,
- expanded: false,
- inlined: false,
- options: null,
- loaderTimeoutMs: 3e4,
- defaults: {
- minChatWidth: 250,
- appearAnimationMs: 200,
- chatMargin: 25
- }
- }
- };
-
// alan_btn/src/textChat/fullscreen.ts
function openChatInFullScreen(chatHolderDiv) {
chatHolderDiv.classList.add("alan-btn_text-chat-full-screen");
@@ -84314,7 +84322,7 @@
sideChatHeader.appendChild(chatCollapseSideBarBtn);
chatCloseSideBarBtn.addEventListener("click", options.closeTextChat);
chatCollapseSideBarBtn.addEventListener("click", options.expandCollapseChatSidePanel);
- newChatSideBarBtn.addEventListener("click", options.onClearChatClick);
+ newChatSideBarBtn.addEventListener("click", options.clearTextChat);
}
}
@@ -84696,14 +84704,12 @@
}
return null;
}
- function fixTextChatSizeIfNeeded(width, height, doubleMargin) {
- var defaultChatMargin = uiState.textChat.defaults.chatMargin;
- const margin = doubleMargin ? 2 * defaultChatMargin : defaultChatMargin;
- if (height !== null && window.innerHeight - defaultChatMargin < height) {
- setChatHeight(window.innerHeight - margin);
+ function fixTextChatSizeIfNeeded(width, height) {
+ if (height !== null && window.innerHeight < height) {
+ setChatHeight(window.innerHeight);
}
- if (width !== null && window.innerWidth - defaultChatMargin < width) {
- setChatWidth(window.innerWidth - margin);
+ if (width !== null && window.innerWidth < width) {
+ setChatWidth(window.innerWidth);
}
}
@@ -84852,14 +84858,34 @@
function getPaddingProp(top, right, bottom, left) {
return `${top}px ${right}px ${bottom}px ${left}px;`;
}
-
- // alan_btn/src/styles/chat.ts
+ function getInnerBorderRadiusProp(br) {
+ if (+br > 0) {
+ return +br - 1;
+ }
+ return 0;
+ }
function getNumPropVal(val, defaultVal) {
if (+val >= 0) {
return val;
}
return defaultVal;
}
+ function svgToBase64(svg) {
+ return btoa(unescape(encodeURIComponent(svg)));
+ }
+ function parseSvgSize(svgString) {
+ if (!svgString)
+ return [];
+ const parser = new DOMParser();
+ const svgDoc = parser.parseFromString(svgString, "image/svg+xml");
+ const svgElement = svgDoc.querySelector("svg");
+ const width = svgElement.getAttribute("width");
+ const height = svgElement.getAttribute("height");
+ const defaultSize = uiState.textChat.defaults.defaultSvgIconSize;
+ return [width || defaultSize, height || defaultSize];
+ }
+
+ // alan_btn/src/styles/chat.ts
var flexMap = {
left: "flex-start",
right: "flex-end",
@@ -84871,11 +84897,11 @@
const defaultMinChatHeight = 400;
const defaultChatHeight = 700;
const chatHeaderHeight = +textChatOptions?.header?.height || 40;
- const chatTextareaLineHieght = 1.25;
+ const chatTextareaLineHieght = uiState.textChat.defaults.textareaLineHeight;
const textareaHolderHeight = +textChatOptions?.footer?.height || 67;
const chatMicBtnActiveSize = 32;
const textChatScrollSize = 6;
- const defaultChatTextareaFontSize = 15;
+ const defaultChatTextareaFontSize = uiState.textChat.defaults.textareaFontSize;
const withSendBtnOutside = textChatOptions?.footer?.layout?.name === "send-btn-outside";
const footerTopPadding = getNumPropVal(textChatOptions?.footer?.padding?.top, 2);
const footerRightPadding = getNumPropVal(textChatOptions?.footer?.padding?.right, 18);
@@ -84901,6 +84927,7 @@
const responseBubbleRightPadding = getNumPropVal(textChatOptions?.bubbles?.response?.padding?.right, 20);
const responseBubbleBottomPadding = getNumPropVal(textChatOptions?.bubbles?.response?.padding?.bottom, 9);
const responseBubbleLeftPadding = getNumPropVal(textChatOptions?.bubbles?.response?.padding?.left, 20);
+ const waitingResponseBubbleLayout = textChatOptions?.bubbles?.waitingResponse?.layout || "default";
const responseBubbleBorderRadiusTopLeft = getNumPropVal(textChatOptions?.bubbles?.response?.borderRadius?.topLeft, defaultBubbleBorderRadius);
const responseBubbleBorderRadiusTopRight = getNumPropVal(textChatOptions?.bubbles?.response?.borderRadius?.topRight, defaultBubbleBorderRadius);
const responseBubbleBorderRadiusBottomRight = getNumPropVal(textChatOptions?.bubbles?.response?.borderRadius?.bottomRight, defaultBubbleBorderRadius);
@@ -84930,7 +84957,7 @@
const headerLayoutName = textChatOptions?.header?.layout?.name || "centered-title";
let cssChatHeight = getTextChatSizeAfterResize("height");
let cssChatWidth = getTextChatSizeAfterResize("width");
- fixTextChatSizeIfNeeded(cssChatWidth, cssChatHeight, true);
+ fixTextChatSizeIfNeeded(cssChatWidth, cssChatHeight);
cssChatHeight = getTextChatSizeAfterResize("height");
cssChatWidth = getTextChatSizeAfterResize("width");
if (cssChatHeight) {
@@ -84952,6 +84979,7 @@
const chatBgColor1 = textChatOptions?.popup?.backgroundColor || `#DAEBFF`;
const chatBgColor2 = textChatOptions?.popup?.backgroundColor2 || `#ffffff`;
const chatGradientType = textChatOptions?.popup?.gradientType || `linear`;
+ const chatCustomBg = textChatOptions?.popup?.background?.customCss;
keyFrames += getStyleSheetMarker() + `.alan-btn__chat-holder {
position: fixed;
height: ${cssChatHeight};
@@ -85150,6 +85178,9 @@
if (chatGradientType === "radial") {
chatBackgroud = `radial-gradient(circle, ${chatBgColor2} 0%, ${chatBgColor1} 100%)`;
}
+ if (chatGradientType === "custom" && chatCustomBg) {
+ chatBackgroud = chatCustomBg;
+ }
keyFrames += getStyleSheetMarker() + `.alan-btn__popup-chat {
height: 100%;
position: relative;
@@ -85177,11 +85208,11 @@
}`;
keyFrames += getStyleSheetMarker() + `.alan-btn__chat-textarea-holder {
width: 100%;
- height: ${textareaHolderHeight}px;
- max-height: ${textareaHolderHeight}px;
min-height: ${textareaHolderHeight}px;
- background-color: ${textChatOptions?.footer?.backgroundColor || "transparent"};
+ background-color: ${textChatOptions?.footer?.backgroundColor || "#DAEBFF"};
position: relative;
+ display: flex;
+ flex-shrink: 0;
padding: ${getPaddingProp(footerTopPadding, footerRightPadding, footerBottomPadding, footerLeftPadding)};
}`;
keyFrames += getStyleSheetMarker() + `.alan-btn__chat-textarea-holder-outer-content {
@@ -85195,20 +85226,20 @@
width: 100%;
height: 100%;
position: relative;
+ display: flex;
+ align-items: center;
}`;
keyFrames += getStyleSheetMarker() + `.alan-btn__chat-messages-empty-block {
flex: 1 1 auto;
}`;
keyFrames += getStyleSheetMarker() + `.alan-btn__chat-messages-wrapper {
width: 100%;
- height: calc(100% - ${chatHeaderHeight + textareaHolderHeight}px);
- max-height: calc(100% - ${chatHeaderHeight + textareaHolderHeight}px);
- min-height: calc(100% - ${chatHeaderHeight + textareaHolderHeight}px);
+ height: 100%;
overflow-y: scroll;
overflow-x: hidden;
padding: ${getPaddingProp(msgsTopPadding, msgsRightPadding, msgsBottomPadding, msgsLeftPadding)};
display: flex;
- flex-shrink: 0;
+ flex-shrink: 1;
flex-direction: column-reverse;
}`;
keyFrames += getStyleSheetMarker() + `.alan-btn__chat-messages {
@@ -85242,16 +85273,24 @@
position:relative;
}`;
const headerFontSize = textChatOptions?.header?.fontSize || 16;
+ const headerIconGap = getNumPropVal(textChatOptions?.header?.icon?.gap, 12);
+ const headerAlignment = textChatOptions?.header?.alignment || "center";
keyFrames += getStyleSheetMarker() + `.alan-btn__chat-header-title {
max-width: calc(100% - 112px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- display: inline-block;
+ display: flex;
+ align-items: ${headerAlignment};
font-weight: 600;
font-size: ${headerFontSize}px;
- position: relative;
- top: ${headerFontSize >= 20 ? "-2" : "0"}px;
+ gap: ${headerIconGap}px;
+ }`;
+ keyFrames += getStyleSheetMarker() + `.alan-btn__chat-header-title-icon {
+ display: flex;
+ }`;
+ keyFrames += getStyleSheetMarker() + `.alan-btn__chat-header-title-label {
+ display: flex;
}`;
const withGradientForHeader = uiState.textChat.options?.header?.withBottomGradient !== false;
keyFrames += getStyleSheetMarker() + `.alan-btn__chat-header-gradient {
@@ -85304,8 +85343,10 @@
height: 100%;
cursor: pointer;
position: relative;
- top:50%;
- transform: translateY(-50%);
+ }`;
+ keyFrames += getStyleSheetMarker() + `.multi-line .alan-btn__chat-clear-btn {
+ align-items: flex-end;
+ padding-bottom: ${textareaBottomPadding}px;
}`;
keyFrames += getStyleSheetMarker() + `.alan-btn__chat-clear-btn.disabled {
pointer-events: none;
@@ -85508,7 +85549,7 @@
min-height:15px;
width: 100%;
position: absolute;
- bottom: ${textareaHolderHeight}px;
+ top: -15px;
display: ${withGradientForFooter ? "block" : "none"};
left:0;
}`;
@@ -85527,8 +85568,6 @@
font-size: ${getTextAreaFontSize(isMobile(), textChatOptions?.textarea?.fontSize || defaultChatTextareaFontSize)}px;
line-height: ${chatTextareaLineHieght};
text-align: left;
- max-height: 100%;
- height: 100%;
padding: ${getPaddingProp(textareaTopPadding, textareaRightPadding, textareaBottomPadding, textareaLeftPadding)};
margin: 0px!important;
-webkit-user-select: text;
@@ -85558,8 +85597,9 @@
border-radius: 3px;
background: transparent;
}`;
+ const micHolderWidth = 44;
keyFrames += getStyleSheetMarker() + `.alan-btn__chat-holder.alan-text-chat__voice-enabled .alan-btn__chat-textarea {
- padding-left: 44px;
+ padding-left: ${micHolderWidth}px;
}`;
keyFrames += getStyleSheetMarker() + `.alan-btn__chat.alan-btn__mic-active .alan-btn__chat-textarea {
opacity: 0.6;
@@ -85633,11 +85673,11 @@
keyFrames += getStyleSheetMarker() + `.alan-btn__chat-send-btn {
${!withSendBtnOutside && `
position: absolute;
- top: 50%;
+ top: 0;
right: 0px;
- transform: translateY(-50%);
+ width: 44px;
`}
-
+ height: 100%;
transition: opacity 300ms ease-in-out;
display: flex;
flex-direction: row;
@@ -85651,6 +85691,10 @@
-ms-user-select: none; /* IE/Edge */
user-select: none;
}`;
+ keyFrames += getStyleSheetMarker() + `.multi-line .alan-btn__chat-send-btn {
+ align-items: flex-end;
+ padding-bottom: ${textareaBottomPadding}px;
+ }`;
keyFrames += getStyleSheetMarker() + `.alan-btn__chat-send-btn svg path {
stroke: ${textChatOptions?.textarea?.placeholderColor || `#747474`};
opacity: 0.5;
@@ -85670,10 +85714,11 @@
}
keyFrames += getStyleSheetMarker() + `.alan-btn__chat-mic-btn {
position: absolute;
- left: 3px;
- top:50%;
- transform: translateY(-50%);
- transform-origin: top;
+ left: 0px;
+ top:0;
+ height: 100%;
+ width: ${micHolderWidth}px;
+ transform-origin: center;
display: flex;
flex-direction: row;
cursor: pointer;
@@ -85681,6 +85726,10 @@
align-items: center;
border-radius: 50%;
}`;
+ keyFrames += getStyleSheetMarker() + `.multi-line .alan-btn__chat-mic-btn {
+ align-items: flex-end;
+ padding-bottom: ${textareaBottomPadding}px;
+ }`;
keyFrames += getStyleSheetMarker() + `.alan-btn__chat-notifications-bubble {
position: absolute;
right: 4px;
@@ -85847,8 +85896,13 @@
}`;
const responseBubbleFontSize = +(textChatOptions?.bubbles?.response?.fontSize || 15);
const responseBubbleFontColor = textChatOptions?.bubbles?.response?.color || `#171717`;
+ const responseBubbleLabelIconGap = getNumPropVal(textChatOptions?.bubbles?.response?.label?.icon?.gap, 12);
+ const responseBubbleLabelAlignment = textChatOptions?.bubbles?.response?.label?.alignment || "center";
+ const responseLabelIcon = textChatOptions?.bubbles?.response?.label?.icon?.svg;
keyFrames += getStyleSheetMarker() + `.alan-btn__chat-response-label {
- display: ${responseBubbleLabelEnabled ? "block" : "none"};
+ display: ${responseBubbleLabelEnabled ? "flex" : "none"};
+ align-items:${responseBubbleLabelAlignment};
+ gap: ${responseBubbleLabelIconGap}px;
position: relative;
color: ${responseBubbleLabelColor};
font-size: ${responseBubbleLabelFontSize}px;
@@ -85862,6 +85916,19 @@
-ms-user-select: text; /* IE/Edge */
user-select: text;
}`;
+ const [responseLabelWidth, responseLabelHeight] = parseSvgSize(responseLabelIcon);
+ keyFrames += getStyleSheetMarker() + `.alan-btn__chat-response-label-icon {
+ display: ${responseLabelIcon ? "flex" : "none"};
+ background-image: url('data:image/svg+xml;base64,${svgToBase64(responseLabelIcon)}');
+ background-size: cover;
+ ${responseLabelIcon ? `
+ width: ${responseLabelWidth}px;
+ height: ${responseLabelHeight}px;
+ ` : ""}
+ }`;
+ keyFrames += getStyleSheetMarker() + `.alan-btn__chat-response-label-text {
+ display: flex;
+ }`;
keyFrames += getStyleSheetMarker() + `.alan-btn_text-chat-full-screen .alan-btn__chat-response-label {
text-align: left;
padding-left: ${avatarSize + avatarRightMargin}px;
@@ -85890,6 +85957,11 @@
-ms-user-select: text; /* IE/Edge */
user-select: text;
}`;
+ keyFrames += getStyleSheetMarker() + `.alan-btn__chat-response.alan-incoming-msg {
+ ${waitingResponseBubbleLayout === "loader-and-label-wo-bubble" ? `padding: ${getPaddingProp(responseBubbleTopPadding, 0, responseBubbleBottomPadding, 0)};
+ background: none;
+ border-color:transparent;` : ``}
+ }`;
keyFrames += getStyleSheetMarker() + `.alan-btn__chat-buttons {
margin-bottom: 16px;
display:flex;
@@ -86156,31 +86228,7 @@
padding: 0px;
margin-bottom:0;
}`);
- keyFrames += getStyleSheetMarker() + `.alan-btn__chat-incomming-msg-wrapper {
- display: flex;
- align-items: center;
- }`;
- keyFrames += getStyleSheetMarker() + `.alan-btn__chat-incomming-msg {
- border-radius: 50%;
- background-color: ${textChatOptions?.bubbles?.response?.color || `#080808`};
- margin: 2px;
- height: 6px;
- width: 6px;
- animation: alan-dot-bounce 1.5s infinite ease;
- }`;
- keyFrames += getStyleSheetMarker() + `.msg-2 {
- animation-delay: .2s;
- }`;
- keyFrames += getStyleSheetMarker() + `.msg-3 {
- animation-delay: .3s;
- }`;
- keyFrames += getStyleSheetMarker() + generateKeyFrame("alan-dot-bounce", `
- 0%, 100% { opacity:1;}
-
- 60% {
- transform: translateY(3px);
- opacity:.0;
- }`);
+ keyFrames += getCssForResponseLoader(getStyleSheetMarker(), uiState.textChat.options);
keyFrames += getStyleSheetMarker() + `.alan-btn_text-chat-full-screen .alan-btn__chat-popup {
width: 100%;
margin-left: 51px;
@@ -86432,9 +86480,71 @@
}`;
return keyFrames;
}
+ function getCssForResponseLoader(styleSheetMarker, textChatOptions) {
+ let keyFrames = "";
+ const waitingResponseBubbleLayout = textChatOptions?.bubbles?.waitingResponse?.layout || "default";
+ const waitingResponseBubbleLabelIconAlignment = textChatOptions?.bubbles?.waitingResponse?.alignment || "center";
+ const waitingResponseBubbleLoaderIcon = textChatOptions?.bubbles?.waitingResponse?.icon?.svg;
+ const waitingResponseBubbleLoaderIconGap = getNumPropVal(textChatOptions?.bubbles?.waitingResponse?.icon?.gap, 8);
+ const [responseLabelWidth, responseLabelHeight] = parseSvgSize(waitingResponseBubbleLoaderIcon);
+ keyFrames += styleSheetMarker + `.alan-btn__chat-incomming-msg-wrapper {
+ display: flex;
+ ${waitingResponseBubbleLayout !== "default" ? `
+ align-items: ${waitingResponseBubbleLabelIconAlignment};
+ gap: ${waitingResponseBubbleLoaderIconGap}px;
+ ` : ``}
+ }`;
+ keyFrames += styleSheetMarker + `.alan-btn__chat-incomming-msg-loader-icon {
+ display: ${waitingResponseBubbleLoaderIcon ? "flex" : "none"};
+ background-image: url('data:image/svg+xml;base64,${svgToBase64(waitingResponseBubbleLoaderIcon)}');
+ background-size: cover;
+ ${waitingResponseBubbleLoaderIcon ? `
+ width: ${responseLabelWidth}px;
+ height: ${responseLabelHeight}px;
+ ` : ""}
+ }`;
+ keyFrames += styleSheetMarker + `.alan-btn__chat-incomming-msg-loader-label {
+ display: inline-block;
+ }`;
+ keyFrames += styleSheetMarker + `.alan-btn__chat-incomming-msg {
+ border-radius: 50%;
+ background-color: ${textChatOptions?.bubbles?.response?.color || `#080808`};
+ margin: 2px;
+ height: 6px;
+ width: 6px;
+ animation: alan-dot-bounce 1.5s infinite ease;
+ }`;
+ keyFrames += styleSheetMarker + `.msg-2 {
+ animation-delay: .2s;
+ }`;
+ keyFrames += styleSheetMarker + `.msg-3 {
+ animation-delay: .3s;
+ }`;
+ keyFrames += styleSheetMarker + generateKeyFrame("alan-dot-bounce", `
+ 0%, 100% { opacity:1;}
+
+ 60% {
+ transform: translateY(3px);
+ opacity:.0;
+ }`);
+ return keyFrames;
+ }
function getCssForTextChatLinks(styleSheetMarker, textChatOptions) {
let result = "";
const responseBubbleFontSize = +(textChatOptions?.bubbles?.response?.fontSize || 15);
+ const learnMoreLinkBorderColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.default?.borderColor || `#EAF2FC`;
+ const learnMoreLinkHoverBorderColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.hover?.borderColor || `#EAF2FC`;
+ const learnMoreLinkActiveBorderColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.active?.borderColor || `#EAF2FC`;
+ const learnMoreLinkBackgroundColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.default?.backgroundColor || `transparent`;
+ const learnMoreLinkHoverBackgroundColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.hover?.backgroundColor || `#EAF2FC`;
+ const learnMoreLinkActiveBackgroundColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.active?.backgroundColor || `#EAF2FC`;
+ const learnMoreLinkNumberBackgroundColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.default?.linkNumberBackgroundColor || `#EAF2FC`;
+ const learnMoreLinkNumberHoverBackgroundColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.hover?.linkNumberBackgroundColor || `#EAF2FC`;
+ const learnMoreLinkNumberActiveBackgroundColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.active?.linkNumberBackgroundColor || `#EAF2FC`;
+ const learnMoreTopLeftBorderRadius = getNumPropVal(uiState.textChat.options?.bubbles?.response?.learnMore?.links?.borderRadius?.topLeft, 4);
+ const learnMoreTopRightBorderRadius = getNumPropVal(uiState.textChat.options?.bubbles?.response?.learnMore?.links?.borderRadius?.topRight, 4);
+ const learnMoreBottomRightBorderRadius = getNumPropVal(uiState.textChat.options?.bubbles?.response?.learnMore?.links?.borderRadius?.bottomRight, 4);
+ const learnMoreBottomLeftBorderRadius = getNumPropVal(uiState.textChat.options?.bubbles?.response?.learnMore?.links?.borderRadius?.bottomLeft, 4);
result += styleSheetMarker + `.alan-btn__chat-response-links-wrapper {
display: flex;
flex-wrap: wrap;
@@ -86445,32 +86555,46 @@
margin-top: 10px;
}`;
result += styleSheetMarker + `.alan-btn__chat-response-link {
- border: 1px solid #EAF2FC;
- border-radius: 4px;
+ border: 1px solid ${learnMoreLinkBorderColor};
+ border-radius: ${learnMoreTopLeftBorderRadius}px ${learnMoreTopRightBorderRadius}px ${learnMoreBottomRightBorderRadius}px ${learnMoreBottomLeftBorderRadius}px;
+ background-color: ${learnMoreLinkBackgroundColor};
margin-right: 10px;
margin-bottom: 4px;
display: flex;
align-items: center;
max-width: 100%;
- font-size: ${responseBubbleFontSize - 2}px;
}`;
if (!isMobile()) {
result += styleSheetMarker + `.alan-btn__chat-response-links-wrapper a.alan-btn__chat-response-link:hover {
text-decoration: none !important;
- background-color: #EAF2FC;
+ background-color: ${learnMoreLinkHoverBackgroundColor};
+ border-color: ${learnMoreLinkHoverBorderColor};
+ }`;
+ result += styleSheetMarker + `.alan-btn__chat-response-links-wrapper a.alan-btn__chat-response-link:active {
+ text-decoration: none !important;
+ background-color: ${learnMoreLinkActiveBackgroundColor};
+ border-color: ${learnMoreLinkActiveBorderColor};
}`;
}
result += styleSheetMarker + `.alan-btn__chat-response-link-icon-wrapper {
padding: 9px 4px;
- background-color: #EAF2FC;
- border-radius: 3px;
+ background-color: ${learnMoreLinkNumberBackgroundColor};
+ border-radius: ${getInnerBorderRadiusProp(learnMoreTopLeftBorderRadius)}px ${getInnerBorderRadiusProp(learnMoreTopRightBorderRadius)}px ${getInnerBorderRadiusProp(learnMoreBottomRightBorderRadius)}px ${getInnerBorderRadiusProp(learnMoreBottomLeftBorderRadius)}px;
display: inline-block;
- min-width: 26px;
+ min-width: 28px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}`;
+ if (!isMobile()) {
+ result += styleSheetMarker + `.alan-btn__chat-response-link:hover .alan-btn__chat-response-link-icon-wrapper {
+ background-color: ${learnMoreLinkNumberHoverBackgroundColor};
+ }`;
+ result += styleSheetMarker + `.alan-btn__chat-response-link:active .alan-btn__chat-response-link-icon-wrapper {
+ background-color: ${learnMoreLinkNumberActiveBackgroundColor};
+ }`;
+ }
const linkColor = uiState.textChat.options?.bubbles?.response?.links?.color?.default || `#4183c4`;
const linkHoverColor = uiState.textChat.options?.bubbles?.response?.links?.color?.hover || `#4183c4`;
result += styleSheetMarker + `.alan-btn__chat-response-link svg path {
@@ -86608,13 +86732,27 @@
// alan_btn/src/styles/markdown.ts
function generateCssForMarkdown(stylesheetMarker, classPrefix) {
let keyFrames = "";
+ const tableBorderColor = uiState.textChat.options?.bubbles?.response?.table?.borderColor || `#b7b5b5`;
const responseBubbleFontSize = +(uiState.textChat.options?.bubbles?.response?.fontSize || 15);
const responseBubbleBg = uiState.textChat.options?.bubbles?.response?.backgroundColor || `#ffffff`;
const responseBubbleFontColor = uiState.textChat.options?.bubbles?.response?.color || `#171717`;
const responseBubbleCodeBackgroundColor = uiState.textChat.options?.bubbles?.response?.codeBackgroundColor || `#f8f8f8`;
+ const responseBubbleCodeBorderColor = uiState.textChat.options?.bubbles?.response?.codeBorderColor || `#DDD`;
const linkColor = uiState.textChat.options?.bubbles?.response?.links?.color?.default || `#4183c4`;
const linkHoverColor = uiState.textChat.options?.bubbles?.response?.links?.color?.hover || `#4183c4`;
- const footerLinkBgColor = "#EAF2FC";
+ const learnMoreLinkBorderColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.default?.borderColor || `#EAF2FC`;
+ const learnMoreLinkHoverBorderColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.hover?.borderColor || `#EAF2FC`;
+ const learnMoreLinkActiveBorderColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.active?.borderColor || `#EAF2FC`;
+ const learnMoreLinkBackgroundColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.default?.backgroundColor || `transparent`;
+ const learnMoreLinkHoverBackgroundColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.hover?.backgroundColor || `#EAF2FC`;
+ const learnMoreLinkActiveBackgroundColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.active?.backgroundColor || `#EAF2FC`;
+ const learnMoreLinkNumberBackgroundColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.default?.linkNumberBackgroundColor || `#EAF2FC`;
+ const learnMoreLinkNumberHoverBackgroundColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.hover?.linkNumberBackgroundColor || `#EAF2FC`;
+ const learnMoreLinkNumberActiveBackgroundColor = uiState.textChat.options?.bubbles?.response?.learnMore?.links?.active?.linkNumberBackgroundColor || `#EAF2FC`;
+ const learnMoreTopLeftBorderRadius = getNumPropVal(uiState.textChat.options?.bubbles?.response?.learnMore?.links?.borderRadius?.topLeft, 4);
+ const learnMoreTopRightBorderRadius = getNumPropVal(uiState.textChat.options?.bubbles?.response?.learnMore?.links?.borderRadius?.topRight, 4);
+ const learnMoreBottomRightBorderRadius = getNumPropVal(uiState.textChat.options?.bubbles?.response?.learnMore?.links?.borderRadius?.bottomRight, 4);
+ const learnMoreBottomLeftBorderRadius = getNumPropVal(uiState.textChat.options?.bubbles?.response?.learnMore?.links?.borderRadius?.bottomLeft, 4);
const cssRules = [
`a {
color: ${linkColor}!important;
@@ -86753,7 +86891,7 @@
`code {
background-color: ${responseBubbleCodeBackgroundColor}!important;
border-radius: 3px!important;
- border: 1px solid #DDD!important;
+ border: 1px solid ${responseBubbleCodeBorderColor}!important;
font-family: Consolas, "Liberation Mono", Courier, monospace!important;
margin: 0 2px!important;
padding: 0 5px!important;
@@ -86767,7 +86905,7 @@
`pre {
background-color: ${responseBubbleCodeBackgroundColor}!important;
border-radius: 3px!important;
- border: 1px solid #DDD!important;
+ border: 1px solid ${responseBubbleCodeBorderColor}!important;
font-family: Consolas, "Liberation Mono", Courier, monospace!important;
padding: 10px!important;
white-space: pre-line!important;
@@ -86807,19 +86945,19 @@
}`,
`table > thead > tr > th {
padding: 4px!important;
- border-top: 1px solid #b7b5b5!important;
+ border-top: 1px solid ${tableBorderColor}!important;
}`,
`table > tbody > tr > th {
padding: 4px!important;
- border-top: 1px solid #b7b5b5!important;
+ border-top: 1px solid ${tableBorderColor}!important;
}`,
`table > thead > tr > td {
padding: 4px!important;
- border-top: 1px solid #b7b5b5!important;
+ border-top: 1px solid ${tableBorderColor}!important;
}`,
`table > tbody > tr > td {
padding: 4px;
- border-top: 1px solid #b7b5b5!important;
+ border-top: 1px solid ${tableBorderColor}!important;
}`,
`strong {
font-weight: bold!important;
@@ -86828,11 +86966,18 @@
font-style: italic!important;
}`,
`sup.footnote-ref{
- background: ${footerLinkBgColor};
+ background: ${learnMoreLinkNumberBackgroundColor};
padding: 1px;
border-radius: 4px;
position: relative;
top: -5px;
+ font-size: ${responseBubbleFontSize}px!important;
+ }`,
+ `sup.footnote-ref:hover{
+ background: ${learnMoreLinkNumberHoverBackgroundColor};
+ }`,
+ `sup.footnote-ref:active{
+ background: ${learnMoreLinkNumberActiveBackgroundColor};
}`,
`.footnotes{
padding-top: 10px;
@@ -86849,13 +86994,19 @@
`.footnote-item {
position: relative;
display: inline-block;
- border-radius: 4px;
+ border-radius: ${learnMoreTopLeftBorderRadius}px ${learnMoreTopRightBorderRadius}px ${learnMoreBottomRightBorderRadius}px ${learnMoreBottomLeftBorderRadius}px;
cursor: pointer;
- border: 1px solid ${footerLinkBgColor};
+ border: 1px solid ${learnMoreLinkBorderColor};
margin-bottom:4px;
+ background-color: ${learnMoreLinkBackgroundColor};
}`,
`.footnote-item:hover {
- background-color: ${footerLinkBgColor};
+ border: 1px solid ${learnMoreLinkHoverBorderColor};
+ background-color: ${learnMoreLinkHoverBackgroundColor};
+ }`,
+ `.footnote-item:active {
+ border: 1px solid ${learnMoreLinkActiveBorderColor};
+ background-color: ${learnMoreLinkActiveBackgroundColor};
}`,
`.footnote-item p {
margin-top: 0;
@@ -86872,17 +87023,23 @@
counter-increment: list-counter;
content: counter(list-counter);
padding: 4px 4px;
- background-color: ${footerLinkBgColor};
- border-radius: 3px;
+ background-color: ${learnMoreLinkNumberBackgroundColor};
+ border-radius: ${getInnerBorderRadiusProp(learnMoreTopLeftBorderRadius)}px ${getInnerBorderRadiusProp(learnMoreTopRightBorderRadius)}px ${getInnerBorderRadiusProp(learnMoreBottomRightBorderRadius)}px ${getInnerBorderRadiusProp(learnMoreBottomLeftBorderRadius)}px;
+ box-sizing: border-box;
display: inline-block;
- min-width: 18px;
+ min-width: 28px;
text-align: center;
color: ${linkColor}!important;
}`,
`.footnotes-list>.footnote-item:hover::before {
color: ${linkHoverColor}!important;
+ background-color: ${learnMoreLinkNumberHoverBackgroundColor};
}`,
- `.footnotes-sep{
+ `.footnotes-list>.footnote-item:active::before {
+ color: ${linkHoverColor}!important;
+ background-color: ${learnMoreLinkNumberActiveBackgroundColor};
+ }`,
+ `.footnotes-sep {
display: none!important;
}`,
`.scroll-table {
@@ -86964,7 +87121,7 @@
keyFrames += getStyleSheetMarker() + ".alan-overlay-popup:hover .alan-overlay-popup__ok{opacity:1;transition:opacity 300ms ease-in-out;}";
keyFrames += getStyleSheetMarker() + generateKeyFrame("alan-gradient", "0%{backgroundPosition: 0 0;}50%{backgroundPosition: -100% 0;}100%{backgroundPosition: 0 0;}");
keyFrames += getStyleSheetMarker() + generateKeyFrame("alan-pulsating", "0%{transform: scale(1.11111);}50%{transform: scale(1.0);}100%{transform: scale(1.11111);}");
- keyFrames += getStyleSheetMarker() + generateKeyFrame("alan-text-chat-pulsating", "0%{transform: scale(1) translateY(-50%);}50%{transform: scale(0.91) translateY(-50%);}100%{transform: scale(1) translateY(-50%);}");
+ keyFrames += getStyleSheetMarker() + generateKeyFrame("alan-text-chat-pulsating", "0%{transform: scale(1)} 50%{transform: scale(0.91);} 100%{transform: scale(1) }");
keyFrames += getStyleSheetMarker() + generateKeyFrame("alan-mic-pulsating", "0%{transform: scale(0.91);}50%{transform: scale(1.0);}100%{transform: scale(0.91);}");
keyFrames += getStyleSheetMarker() + generateKeyFrame("alan-triangle-mic-pulsating", "0%{transform: scale(0.94);}50%{transform: scale(1.0);}100%{transform: scale(0.94);}");
keyFrames += getStyleSheetMarker() + generateKeyFrame("alan-fade-in", "0%{opacity: 0;}100%{opacity:1;}");
@@ -87123,13 +87280,13 @@
// alan_btn/src/textChat/highlightJs.ts
window.hljs = es_default;
- var hljsWasInit = false;
- function initHighlightJs() {
- if (hljsWasInit)
+ var hljsTheme = false;
+ function initHighlightJs(theme) {
+ if (hljsTheme === theme)
return;
- hljsWasInit = true;
+ hljsTheme = theme;
var style = document.createElement("style");
- style.textContent = highlightJsCss();
+ style.textContent = highlightJsCss(theme);
document.getElementsByTagName("head")[0].appendChild(style);
}
function highlightCode(msgsHolder) {
@@ -87144,8 +87301,8 @@
});
}
}
- function highlightJsCss() {
- return `
+ function highlightJsCss(theme) {
+ const lightTheme = `
pre code.hljs {
display: block;
overflow-x: auto;
@@ -87264,6 +87421,130 @@
/* purposely ignored */
}`;
+ const darkTheme = `
+ pre code.hljs {
+ display: block;
+ overflow-x: auto;
+ padding: 1em
+}
+code.hljs {
+ padding: 3px 5px
+}
+/*!
+ Theme: GitHub Dark
+ Description: Dark theme as seen on github.com
+ Author: github.com
+ Maintainer: @Hirse
+ Updated: 2021-05-15
+
+ Outdated base version: https://github.com/primer/github-syntax-dark
+ Current colors taken from GitHub's CSS
+*/
+.hljs {
+ color: #c9d1d9;
+ background: #0d1117
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+ /* prettylights-syntax-keyword */
+ color: #ff7b72
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+ /* prettylights-syntax-entity */
+ color: #d2a8ff
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+ /* prettylights-syntax-constant */
+ color: #79c0ff
+}
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+ /* prettylights-syntax-string */
+ color: #a5d6ff
+}
+.hljs-built_in,
+.hljs-symbol {
+ /* prettylights-syntax-variable */
+ color: #ffa657
+}
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+ /* prettylights-syntax-comment */
+ color: #8b949e
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+ /* prettylights-syntax-entity-tag */
+ color: #7ee787
+}
+.hljs-subst {
+ /* prettylights-syntax-storage-modifier-import */
+ color: #c9d1d9
+}
+.hljs-section {
+ /* prettylights-syntax-markup-heading */
+ color: #1f6feb;
+ font-weight: bold
+}
+.hljs-bullet {
+ /* prettylights-syntax-markup-list */
+ color: #f2cc60
+}
+.hljs-emphasis {
+ /* prettylights-syntax-markup-italic */
+ color: #c9d1d9;
+ font-style: italic
+}
+.hljs-strong {
+ /* prettylights-syntax-markup-bold */
+ color: #c9d1d9;
+ font-weight: bold
+}
+.hljs-addition {
+ /* prettylights-syntax-markup-inserted */
+ color: #aff5b4;
+ background-color: #033a16
+}
+.hljs-deletion {
+ /* prettylights-syntax-markup-deleted */
+ color: #ffdcd7;
+ background-color: #67060c
+}
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+ /* purposely ignored */
+
+}`;
+ const themes = {
+ light: lightTheme,
+ dark: darkTheme
+ };
+ return themes[theme];
}
// node_modules/dont-crop/dist/mjs/linearRegression.js
@@ -87400,7 +87681,7 @@
if (button.setVisualState) {
resultBtn += ` data-alan-button-set-visual-state="${encodeValueForHtmlAttr(button.setVisualState)}" `;
}
- resultBtn += ` >${button.label}
`;
+ resultBtn += ` >${button.html || button.label}`;
return resultBtn;
}).join("") || ""}`;
}
@@ -87540,7 +87821,7 @@
// alan_btn/alan_btn.ts
(function(ns) {
- uiState.lib.version = "alan-version.1.8.60".replace("alan-version.", "");
+ uiState.lib.version = "alan-version.1.8.61".replace("alan-version.", "");
if (window.alanBtn) {
console.warn("Alan: the Alan Button source code has already added (v." + uiState.lib.version + ")");
}
@@ -87655,6 +87936,19 @@
},
isAudioOutputEnabled: () => {
return textToSpeachVoiceEnabled;
+ },
+ setFullScreenMode: (value) => {
+ if (value) {
+ enterFullScreenModeForTextChat();
+ } else {
+ exitFullScreenModeForTextChat();
+ }
+ },
+ close: () => {
+ closeTextChat();
+ },
+ clear: () => {
+ clearTextChat();
}
},
//deprecated
@@ -88534,7 +88828,7 @@
onresizeDebounced({});
if (!(uiState.textChat.expanded || uiState.textChat.inlined)) {
var chatHolderRect = chatHolderDiv.getBoundingClientRect();
- fixTextChatSizeIfNeeded(chatHolderRect.width, chatHolderRect.height, false);
+ fixTextChatSizeIfNeeded(chatHolderRect.width, chatHolderRect.height);
}
};
var initialPermissionWasAsked = false;
@@ -88656,7 +88950,7 @@
continueWithAudio = false;
if (textChatIsHidden) {
sendClientEvent({ buttonClicked: true });
- fixTextChatSizeIfNeeded(getTextChatSizeAfterResize("width"), getTextChatSizeAfterResize("height"), true);
+ fixTextChatSizeIfNeeded(getTextChatSizeAfterResize("width"), getTextChatSizeAfterResize("height"));
showTextChat();
setTextChatPosition(chatHolderDiv);
}
@@ -89044,6 +89338,11 @@
if (data && data.web && data.web.chatOptions?.textChat?.enabled === true) {
uiState.textChat.available = true;
voiceEnabledInTextChat = data.web.chatOptions?.textChat?.voice?.enabled;
+ const themeFromOptions = data.web.chatOptions?.textChat?.bubbles?.response?.codeTheme || "light";
+ const currentTheme = uiState.textChat.options?.bubbles?.response?.codeTheme;
+ if (currentTheme !== themeFromOptions) {
+ initHighlightJs(themeFromOptions);
+ }
uiState.textChat.options = data.web.chatOptions?.textChat;
if (getVoiceEnabledFlag() !== data.web.chatOptions?.textChat?.audio?.enabled) {
if (data.web.chatOptions?.textChat?.audio?.enabled) {
@@ -89674,7 +89973,6 @@
function buildMsgContent(msg) {
return `${buildImagesContent(msg)}${buildMsgTextContent(msg)}${buildLinksContent(msg)}${buildCommandsBlock(msg)}${buildMsgIncommingLoader(msg)}`;
}
- initHighlightJs();
initMathJax(textChatMessages.length, (i2) => getMsgElForMathJax(i2));
document.addEventListener("click", (e) => {
let clickedEl = e.target;
@@ -89708,9 +90006,12 @@ ${LEARN_MORE_LABEL}
}
function getMsgBubbleLabel(msg) {
if (msg.type === "request" || msg.type === "response") {
+ const isResponse = msg.type === "response";
const requestLabel = uiState?.textChat?.options?.bubbles?.request?.label?.text || "Me";
const responseLabel = uiState?.textChat?.options?.bubbles?.response?.label?.text || "Alan";
- const msgLabel = `