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

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