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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets-v3",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "description": "React widget library v3 for Envive services.",
   "keywords": [
     "react",
@@ -120,6 +120,10 @@
       "import": "./dist/widgets/FloatingChatWidget/index.js",
       "require": "./dist/widgets/FloatingChatWidget/index.cjs"
     },
+    "./widgets/FullPageSalesAgentWidget": {
+      "import": "./dist/widgets/FullPageSalesAgentWidget/index.js",
+      "require": "./dist/widgets/FullPageSalesAgentWidget/index.cjs"
+    },
     "./widgets/ProductCardWidget": {
       "import": "./dist/widgets/ProductCardWidget/index.js",
       "require": "./dist/widgets/ProductCardWidget/index.cjs"

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)}`);
+};

package/src/debug/chatEmbed.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { useAtomValue } from 'jotai';
+import classNames from 'classnames';
+import { chatAtom } from '@envive-ai/react-hooks/atoms/chat';
+import { MessageType } from '@envive-ai/react-hooks/application/models';
+import { PromptCarousel, PromptCarouselRows } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { MessageContent } from './MessageContent';
+
+const containerClassNames = classNames({
+  'envive-tw-font-sans': true,
+  'envive-tw-text-base': true,
+  'envive-tw-leading-6': true,
+  'envive-tw-font-normal': true,
+});
+
+const messagesContainerClassNames = classNames({
+  'envive-tw-flex': true,
+  'envive-tw-flex-col': true,
+  'envive-tw-gap-4': true,
+});
+
+const turnContainerClassNames = classNames({
+  'envive-tw-flex': true,
+  'envive-tw-flex-col': true,
+  'envive-tw-gap-2': true,
+});
+
+const messageBodyClassNames = classNames({
+  'envive-tw-whitespace-pre-wrap': true,
+});
+
+const lastTurnClassNames = classNames({
+  'envive-tw-bg-[#FFFFF0]': true,
+  'envive-tw-p-2': true,
+  'envive-tw-rounded-lg': true,
+});
+
+const lastTurnContentClassNames = classNames({
+  'envive-tw-flex': true,
+  'envive-tw-flex-col': true,
+  'envive-tw-gap-2': true,
+});
+
+const ChatEmbed = () => {
+  const { messages, suggestions } = useAtomValue(chatAtom);
+  const lastTurnRef = React.useRef<HTMLDivElement>(null);
+
+  // Scroll the last turn into view when messages change
+  React.useEffect(() => {
+    if (lastTurnRef.current && messages.length > 0) {
+      lastTurnRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+  }, [messages]);
+
+  const answerSuggestions = suggestions.filter(s => s.isAnswer);
+  const generalSuggestions = suggestions.filter(s => !s.isAnswer);
+
+  return (
+    <div className={containerClassNames}>
+      <div className={messagesContainerClassNames}>
+        {messages.map((turn, turnIdx) => {
+          const isLastTurn = turnIdx === messages.length - 1;
+
+          return (
+            <div key={turnIdx}>
+              <div className={turnContainerClassNames}>
+                {turn
+                  .filter(m => m.type === MessageType.Separator)
+                  .map(message => (
+                    <div key={message.id}>
+                      <div className={messageBodyClassNames}>
+                        <MessageContent message={message} />
+                      </div>
+                    </div>
+                  ))}
+              </div>
+
+              <div
+                ref={isLastTurn ? lastTurnRef : null}
+                className={`${turnContainerClassNames} ${isLastTurn ? lastTurnClassNames : ''}`}
+              >
+                {turn
+                  .filter(m => m.type !== MessageType.Separator)
+                  .map(message => (
+                    <div key={message.id}>
+                      <div className={messageBodyClassNames}>
+                        <MessageContent message={message} />
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {suggestions.length > 0 && (
+        <div className={lastTurnClassNames}>
+          <div className={lastTurnContentClassNames}>
+            <PromptCarousel
+              promptButtonTexts={answerSuggestions.map(s => s.content)}
+              handleButtonClick={() => {}}
+              promptCarouselRows={PromptCarouselRows.ALWAYS_ONE}
+              isLoading={false}
+            />
+            <PromptCarousel
+              promptButtonTexts={generalSuggestions.map(s => s.content)}
+              handleButtonClick={() => {}}
+              promptCarouselRows={PromptCarouselRows.ALWAYS_ONE}
+              isLoading={false}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ChatEmbed;

package/src/debug/debugBar.tsx

@@ -0,0 +1,13 @@
+import { useSystemSettingsContext } from '@envive-ai/react-hooks/hooks/SystemSettingsContext';
+import { ReportIssue } from './reportIssue';
+
+export const DebugBar = () => {
+  const { showDebugBar } = useSystemSettingsContext();
+  console.log('=== showDebugBar ===', showDebugBar);
+  if (!showDebugBar) return null;
+  return (
+    <div className="envive-tw-flex envive-tw-items-center envive-tw-p-[4px]">
+      <ReportIssue />
+    </div>
+  );
+};