@envive-ai/react-widgets-v3 0.3.10 → 0.3.12

package/src/CXIntegration/implementations/useShopifyChatUnifiedCXButton.ts

@@ -7,6 +7,7 @@ interface UseShopifyChatUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useShopifyChatUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseShopifyChatUnifiedCXButtonProps): UnifiedCXButton => {
   const shopifyChatContainer = useElementObserver(SelectorFactory.id('ShopifyChat'));
@@ -16,9 +17,7 @@ export const useShopifyChatUnifiedCXButton = ({
   const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
 
   const toggle = () => {
-    if (suppressMerchantButton) {
-      enviveFloatingButton.hide();
-    }
+    enviveFloatingButton.hide();
     shopifyButton.show();
     onSwitchToAgent();
     shopifyButton.fire('click');
@@ -30,45 +29,36 @@ export const useShopifyChatUnifiedCXButton = ({
 
   const isSwitchEnabled = () => isShopifyButtonEnabled();
 
-  const hideEnviveFloatingButton = () => {
-    enviveFloatingButton.hide();
-    shopifyButton.show();
-  };
-
-  const showEnviveFloatingButton = () => {
-    enviveFloatingButton.show();
-    shopifyButton.hide();
-    shopifyChatContainer.hide();
-  };
-
   const handleChatStateChange = async (isOpen: boolean) => {
     if (isOpen) {
-      hideEnviveFloatingButton();
+      enviveFloatingButton.hide();
+      if (suppressMerchantButton) {
+        shopifyButton.show();
+      }
       return;
     }
 
-    showEnviveFloatingButton();
+    onCXClose?.();
+    enviveFloatingButton.show();
+    if (suppressMerchantButton) {
+      shopifyButton.hide();
+      shopifyChatContainer.hide();
+    }
   };
 
   shopifyButton.onAdd(() => {
-    if (suppressMerchantButton) {
-      const isOpen = shopifyChatContainer.targetNode?.getAttribute('is-open') === 'true';
-      handleChatStateChange(isOpen);
-    }
+    const isOpen = shopifyChatContainer.targetNode?.getAttribute('is-open') === 'true';
+    handleChatStateChange(isOpen);
   });
 
   shopifyChatContainer.onAdd(el => {
-    if (suppressMerchantButton) {
-      const isOpen = el?.getAttribute('is-open') === 'true';
-      handleChatStateChange(isOpen);
-    }
+    const isOpen = el?.getAttribute('is-open') === 'true';
+    handleChatStateChange(isOpen);
   });
 
   shopifyChatContainer.onChange(el => {
-    if (suppressMerchantButton) {
-      const isOpen = el?.getAttribute('is-open') === 'true';
-      handleChatStateChange(isOpen);
-    }
+    const isOpen = el?.getAttribute('is-open') === 'true';
+    handleChatStateChange(isOpen);
   });
 
   return {

package/src/CXIntegration/implementations/useTidioUnifiedCXButton.ts

@@ -1,3 +1,6 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
 import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
 
 declare global {
@@ -15,9 +18,11 @@ export const useTidioUnifiedCXButton = ({
   onSwitchToAgent,
 }: UseTidioUnifiedCXButtonProps): UnifiedCXButton => {
   const tidioButton = window.tidioChatApi;
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
 
   const toggle = () => {
     onSwitchToAgent();
+    enviveFloatingButton.hide();
     if (tidioButton) {
       tidioButton.open();
     }

package/src/CXIntegration/implementations/useZendeskUnifiedCXButton.ts

@@ -7,6 +7,7 @@ interface UseZendeskUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useZendeskUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseZendeskUnifiedCXButtonProps): UnifiedCXButton => {
   const zendeskButton = useElementObserver(SelectorFactory.chain('id|launcher @ query|button'));
@@ -18,9 +19,7 @@ export const useZendeskUnifiedCXButton = ({
     zendeskIframe.hide();
     onSwitchToAgent();
     zendeskButton.fire('click');
-    if (suppressMerchantButton) {
-      enviveFloatingButton.hide();
-    }
+    enviveFloatingButton.hide();
   };
 
   const isZendeskButtonEnabled = () => {
@@ -40,22 +39,28 @@ export const useZendeskUnifiedCXButton = ({
   });
 
   zendeskButton.onChange(el => {
-    if (el && suppressMerchantButton) {
+    if (el) {
       const ariaLabel = el.getAttribute('aria-label');
 
       if (ariaLabel === 'Open messaging window') {
+        onCXClose?.();
         enviveFloatingButton.show();
-        zendeskIframe.hide();
+        if (suppressMerchantButton) {
+          zendeskIframe.hide();
+        }
       }
 
       if (ariaLabel === 'Close messaging window') {
         enviveFloatingButton.hide();
-        zendeskIframe.show();
+        if (suppressMerchantButton) {
+          zendeskIframe.show();
+        }
       }
     }
   });
 
   zendeskAlternativeIframe.onRemove(() => {
+    onCXClose?.();
     if (suppressMerchantButton) {
       enviveFloatingButton.show();
       zendeskIframe.hide();

package/src/CXIntegration/implementations/useZowieUnifiedCXButton.ts

@@ -1,3 +1,6 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
 import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
 
 declare global {
@@ -15,9 +18,11 @@ export const useZowieUnifiedCXButton = ({
   onSwitchToAgent,
 }: UseZowieUnifiedCXButtonProps): UnifiedCXButton => {
   const zowieButton = window?.Zowie;
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
 
   const toggle = () => {
     onSwitchToAgent();
+    enviveFloatingButton.hide();
     if (zowieButton) {
       zowieButton?.open();
     }

package/src/CXIntegration/types.ts

@@ -20,5 +20,6 @@ export interface UnifiedCXButton {
 
 export interface CustomerServiceImplProps {
   onSwitchToAgent: () => void;
+  onCXClose?: () => void;
   suppressMerchantButton?: boolean;
 }

package/src/debug/GenericSelect.tsx

@@ -0,0 +1,236 @@
+import React, { CSSProperties, useRef, useState } from 'react';
+
+type SelectType = 'priority';
+
+interface CategorySkillItem {
+  icon: string;
+  label: string;
+}
+
+interface ChipItem {
+  label: string;
+}
+
+type DictionaryItem = CategorySkillItem | ChipItem;
+type Dictionary = Record<string, DictionaryItem>;
+
+const dictionaries: Record<SelectType, Dictionary> = {
+  priority: {
+    p0: { label: 'Urgent' },
+    p1: { label: 'High' },
+    p2: { label: 'Medium' },
+    p3: { label: 'Low' },
+    'no priority': { label: 'No Priority' },
+  },
+};
+
+// Inline styles for Shadow DOM compatibility
+const styles: Record<string, CSSProperties> = {
+  button: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+    fontSize: '0.75rem',
+    backgroundColor: 'transparent',
+    padding: '0.375rem 0.75rem',
+    borderRadius: '0.375rem',
+    cursor: 'pointer',
+    outline: 'none',
+    border: 'none',
+  },
+  buttonHover: {
+    backgroundColor: '#f9fafb',
+  },
+  dropdown: {
+    position: 'absolute',
+    left: '0',
+    zIndex: 10,
+    marginTop: '4px',
+    borderRadius: '8px',
+    width: '125px',
+    backgroundColor: 'white',
+    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    border: '1px solid rgba(0, 0, 0, 0.05)',
+  },
+  dropdownItem: {
+    display: 'flex',
+    width: '100%',
+    alignItems: 'center',
+    padding: '4px 8px',
+    fontSize: '12px',
+    cursor: 'pointer',
+    border: 'none',
+    backgroundColor: 'transparent',
+    textAlign: 'left',
+  },
+  dropdownItemHover: {
+    backgroundColor: '#EBEEF6',
+  },
+  container: {
+    marginLeft: '-1rem',
+    position: 'relative',
+  },
+};
+
+// Badge style generator function
+const getBadgeStyles = (variant?: string): CSSProperties => {
+  let backgroundColor;
+  let textColor;
+
+  switch (variant) {
+    case 'p0':
+      backgroundColor = '#940F24';
+      textColor = '#F9E8EA';
+      break;
+    case 'p1':
+      backgroundColor = '#F9E8EA';
+      textColor = '#940F24';
+      break;
+    case 'p2':
+      backgroundColor = '#FEEBCB';
+      textColor = '#C05621';
+      break;
+    case 'p3':
+      backgroundColor = '#E6F6F4';
+      textColor = '#007F6D';
+      break;
+    default:
+      backgroundColor = '#EBEEF6';
+      textColor = '#3C57AA';
+  }
+
+  // Using fixed medium size values
+  return {
+    display: 'inline-flex',
+    borderRadius: '4px',
+    backgroundColor,
+    color: textColor,
+    fontSize: '0.875rem',
+    paddingLeft: '0.625rem',
+    paddingRight: '0.625rem',
+    paddingTop: '0.25rem',
+    paddingBottom: '0.25rem',
+  };
+};
+
+interface SelectProps {
+  type: SelectType;
+  selectedKey: string;
+  onSelect?: (key: string) => void;
+  buttonStyle?: CSSProperties;
+  menuStyle?: CSSProperties;
+}
+
+export function GenericSelect({
+  type,
+  selectedKey,
+  onSelect,
+  buttonStyle = {},
+  menuStyle = {},
+}: Readonly<SelectProps>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isHovering, setIsHovering] = useState<string | null>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const dictionary = dictionaries[type];
+
+  const renderItem = (key: string, item: DictionaryItem) => {
+    const chipItem = item as ChipItem;
+    const badgeStyles = getBadgeStyles(key);
+
+    return <span style={badgeStyles}>{chipItem.label}</span>;
+  };
+
+  // Close menu when clicking outside
+  React.useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      // Check if the click target is within our menu ref
+      const isOutside = menuRef.current && !menuRef.current.contains(event.target as Node);
+
+      // Also check the event path (for Shadow DOM compatibility)
+      const path = event.composedPath ? event.composedPath() : [];
+      const isInPath = menuRef.current && path.includes(menuRef.current);
+
+      // Only close if truly outside (not in the path)
+      if (isOutside && !isInPath) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mouseup', handleClickOutside, true);
+
+    return () => {
+      document.removeEventListener('mouseup', handleClickOutside, true);
+    };
+  }, [isOpen]);
+
+  if (!dictionary) {
+    console.error(`Invalid type "${type}".`);
+    return null;
+  }
+
+  return (
+    <div
+      style={styles.container}
+      ref={menuRef}
+    >
+      <button
+        type="button"
+        style={{
+          ...styles.button,
+          ...(isHovering === 'button' ? styles.buttonHover : {}),
+          ...buttonStyle,
+        }}
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}
+        onMouseEnter={() => setIsHovering('button')}
+        onMouseLeave={() => setIsHovering(null)}
+      >
+        {dictionary[selectedKey] ? (
+          renderItem(selectedKey, dictionary[selectedKey])
+        ) : (
+          <span
+            style={{ color: '#6b7280' }}
+          >{`Select ${type.charAt(0).toUpperCase() + type.slice(1)}`}</span>
+        )}
+      </button>
+
+      {isOpen && (
+        <div
+          style={{
+            ...styles.dropdown,
+            ...menuStyle,
+          }}
+        >
+          <div style={{ padding: '0.25rem 0' }}>
+            {Object.entries(dictionary)
+              .filter(([key]) => key !== selectedKey)
+              .map(([key, item]) => (
+                <button
+                  type="button"
+                  key={key}
+                  style={{
+                    ...styles.dropdownItem,
+                    ...(isHovering === key ? styles.dropdownItemHover : {}),
+                  }}
+                  onMouseEnter={() => setIsHovering(key)}
+                  onMouseLeave={() => setIsHovering(null)}
+                  onClick={e => {
+                    // Stop event propagation to prevent handleClickOutside from firing
+                    e.stopPropagation();
+
+                    if (onSelect) {
+                      onSelect(key);
+                    }
+                    setIsOpen(false);
+                  }}
+                >
+                  {renderItem(key, item)}
+                </button>
+              ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/debug/MessageContent.tsx

@@ -0,0 +1,248 @@
+import { FaFile, FaLink, FaPaperclip, FaSearch, FaTag } from 'react-icons/fa';
+import { ReviewCard } from '@envive-ai/react-toolkit-v3/ReviewCard';
+import { Message as MessageComponent } from '@envive-ai/react-toolkit-v3/Message';
+import classNames from 'classnames';
+import { Message, MessageType } from '@envive-ai/react-hooks/application/models';
+
+const textContentMessageTypes = new Set([
+  MessageType.Text,
+  MessageType.QueryTyped,
+  MessageType.SuggestionClicked,
+  MessageType.CXAgentResponse,
+]);
+
+const containerClassNames = classNames({
+  'envive-tw-flex': true,
+  'envive-tw-flex-col': true,
+  'envive-tw-gap-1': true,
+});
+
+const fontSemiboldClassNames = classNames({
+  'envive-tw-font-semibold': true,
+});
+
+const flexItemsClassNames = classNames({
+  'envive-tw-flex': true,
+  'envive-tw-items-center': true,
+});
+
+const gap1ClassNames = classNames({
+  'envive-tw-gap-1': true,
+});
+
+const textLinkClassNames = classNames({
+  'envive-tw-text-[--spiffy-colors-text-link]': true,
+  'envive-tw-underline': true,
+});
+
+const textLgClassNames = classNames({
+  'envive-tw-text-lg': true,
+});
+
+const iconClassNames = classNames({
+  'envive-tw-w-3': true,
+  'envive-tw-h-3': true,
+});
+
+export const MessageContent = ({ message: m }: { message: Message }) => {
+  // text messages
+  if (textContentMessageTypes.has(m.type)) {
+    if (m.type === MessageType.Text) {
+      return (
+        <MessageComponent
+          key={m.id}
+          content={m.metadata.content}
+        />
+      );
+    }
+    if (m.type === MessageType.QueryTyped) {
+      return (
+        <MessageComponent
+          key={m.id}
+          content={m.metadata.content}
+        />
+      );
+    }
+    if (m.type === MessageType.SuggestionClicked) {
+      return (
+        <MessageComponent
+          key={m.id}
+          content={m.metadata.suggestionContent}
+        />
+      );
+    }
+    if (m.type === MessageType.CXAgentResponse) {
+      return (
+        <MessageComponent
+          key={m.id}
+          content={m.metadata.message}
+        />
+      );
+    }
+    return (
+      <MessageComponent
+        key={m.id}
+        content="unknown"
+      />
+    );
+  }
+
+  if (m.type === MessageType.Product) {
+    return (
+      <div className={classNames(flexItemsClassNames, gap1ClassNames, 'envive-tw-text-sm')}>
+        <FaTag className={iconClassNames} />
+
+        <a
+          href={m.metadata.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={textLinkClassNames}
+        >
+          {m.metadata.title}
+        </a>
+      </div>
+    );
+  }
+
+  if (m.type === MessageType.Review) {
+    return (
+      <ReviewCard
+        name={m.metadata?.reviewer ?? ''}
+        rating={m.metadata?.stars ?? 0}
+        reviewText={m.metadata?.review ?? ''}
+      />
+    );
+  }
+
+  if (m.type === MessageType.Separator) {
+    return (
+      <div className="envive-tw-relative envive-tw-flex envive-tw-w-full envive-tw-items-center envive-tw-p-2">
+        <div className="envive-tw-flex-grow envive-tw-border-t envive-tw-border-gray-500" />
+
+        <span className="envive-tw-flex-shrink envive-tw-px-4 envive-tw-text-sm envive-tw-text-gray-500">
+          New Discussion
+        </span>
+
+        <div className="envive-tw-flex-grow envive-tw-border-t envive-tw-border-gray-500" />
+      </div>
+    );
+  }
+
+  if (m.type === MessageType.Page) {
+    return (
+      <div className={containerClassNames}>
+        <div className={classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames)}>
+          <FaFile className={iconClassNames} />
+
+          <span className={classNames(textLgClassNames, fontSemiboldClassNames)}>
+            {m.metadata?.title}
+          </span>
+        </div>
+
+        {m.metadata?.url && (
+          <div className={classNames(flexItemsClassNames, gap1ClassNames)}>
+            <FaLink className={iconClassNames} />
+
+            <a
+              href={m.metadata.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={textLinkClassNames}
+            >
+              {m.metadata.url}
+            </a>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (m.type === MessageType.Search) {
+    return (
+      <div className={containerClassNames}>
+        <div className={classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames)}>
+          <FaSearch className={iconClassNames} /> Search
+        </div>
+
+        <div>{m.metadata?.searchTerm}</div>
+      </div>
+    );
+  }
+
+  if (m.type === MessageType.Attachment) {
+    return (
+      <div className={containerClassNames}>
+        <div className={classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames)}>
+          <FaPaperclip className={iconClassNames} /> Attachment
+        </div>
+
+        <div>{m.metadata?.message}</div>
+
+        {m.metadata?.attachment.map(attachment => (
+          <div key={attachment.id}>
+            <a
+              href={attachment.url ?? ''}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={textLinkClassNames}
+            >
+              {attachment.name}
+            </a>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (m.type === MessageType.Form) {
+    return (
+      <div className={containerClassNames}>
+        <div className={classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames)}>
+          <FaPaperclip className={iconClassNames} /> Form Request
+        </div>
+
+        <div>{m.metadata?.formType}</div>
+      </div>
+    );
+  }
+
+  if (m.type === MessageType.ProductSearch) {
+    return (
+      <div className={containerClassNames}>
+        <div className={classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames)}>
+          <FaPaperclip className={iconClassNames} /> Product Search Results
+        </div>
+
+        <div>
+          {m.metadata?.generatedQuery} - {m.metadata?.productCount} results
+        </div>
+      </div>
+    );
+  }
+
+  if (m.type === MessageType.ProductSearchFilter) {
+    return (
+      <div className={containerClassNames}>
+        <div className={classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames)}>
+          <FaPaperclip className={iconClassNames} /> Product Search Filter
+        </div>
+
+        <div>Filter: {m.metadata?.filterName}</div>
+      </div>
+    );
+  }
+
+  if (m.type === MessageType.Order) {
+    return (
+      <div className={containerClassNames}>
+        <div className={classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames)}>
+          <FaPaperclip className={iconClassNames} /> Order Information
+        </div>
+
+        <div>OrderNumber: {m.metadata?.orderNumber}</div>
+      </div>
+    );
+  }
+
+  throw new Error(`Unsupported message type: ${JSON.stringify(m)}`);
+};