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

package/src/debug/reportIssue.tsx

@@ -0,0 +1,649 @@
+import {
+  ReportSessionRequest,
+  ReportSessionRequestReportPriorityEnum,
+  ReportSessionRequestReportTypeEnum,
+  Suggestion,
+  TurnInfo,
+} from '@spiffy-ai/commerce-api-client';
+import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { useAtomValue } from 'jotai';
+
+import { Message, MessageType } from '@envive-ai/react-hooks/application/models';
+import classNames from 'classnames';
+import IconCloseVariant from '@envive-ai/react-icons/IconCloseVariant';
+import CommerceApiClient from '@envive-ai/react-hooks/application/commerce-api';
+import { userIdAtom } from '@envive-ai/react-hooks/atoms/app';
+import { orgShortNameAtom } from '@envive-ai/react-hooks/atoms/envive/enviveConfig';
+import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+import { StringUtils, validateEmail } from '@envive-ai/react-hooks/application/utils';
+import { GenericSelect } from './GenericSelect';
+import ChatEmbed from './chatEmbed';
+
+const messageContent = (m: Message) => {
+  if (m.type === MessageType.Text) {
+    return m.metadata.content;
+  }
+  if (m.type === MessageType.Product) {
+    return `PRODUCT ID: ${m.metadata?.id}`;
+  }
+  if (m.type === MessageType.Review) {
+    return `REVIEW: by ${m.metadata?.reviewer}`;
+  }
+  if (m.type === MessageType.Page) {
+    return `PAGE: ${m.metadata?.url}`;
+  }
+  if (m.type === MessageType.Separator) {
+    return `SEPARATOR`;
+  }
+  if (m.type === MessageType.QueryTyped) {
+    return `QUERY TYPED: ${m.metadata?.content}`;
+  }
+  if (m.type === MessageType.SuggestionClicked) {
+    return `SUGGESTION CLICKED`;
+  }
+  if (m.type === MessageType.Search) {
+    return `SEARCH: ${m.metadata?.searchTerm}`;
+  }
+  if (m.type === MessageType.ProductSearch) {
+    return `PRODUCT SEARCH: ${m.metadata?.generatedQuery} (${m.metadata?.productCount} products)`;
+  }
+  if (m.type === MessageType.ProductSearchFilter) {
+    return `PRODUCT SEARCH FILTER: ${m.metadata?.filterName}`;
+  }
+  if (m.type === MessageType.Form) {
+    return `FORM: ${m.metadata?.formType}`;
+  }
+  if (m.type === MessageType.Order) {
+    return `ORDER: ${m.metadata?.orderId}`;
+  }
+  throw new Error(`Unsupported message type: ${m.type}`);
+};
+
+const ReportHeader = ({ onClose }: { onClose: () => void }) => {
+  const userId = useAtomValue(userIdAtom);
+  const handleCopyClick = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(userId);
+    } catch (err) {
+      console.error('Failed to copy to clipboard:', err);
+    }
+  }, [userId]);
+
+  const headerTitleClassnames = classNames({
+    'envive-tw-text-[24px]': true,
+    'md:envive-tw-text-[30px]': true,
+    'envive-tw-mb-[12px]': true,
+    'envive-tw-color-[#161844]': true,
+    'envive-tw-leading-[1.33]': true,
+    'md:envive-tw-leading-[1.2]': true,
+    'envive-tw-font-bold': true,
+  });
+
+  const headerLinkClassnames = classNames({
+    'envive-tw-underline': true,
+    'envive-tw-text-[#3C57AA]': true,
+    'hover:envive-tw-text-[#3C57AA]': true,
+  });
+
+  const headerDescriptionClassnames = classNames({
+    'envive-tw-text-[16px]': true,
+    'envive-tw-text-normal': true,
+    'envive-tw-font-medium': true,
+    'envive-tw-max-w-[70ch]': true,
+    'envive-tw-text-[#161844]': true,
+  });
+
+  const userIdClassnames = classNames({
+    'envive-tw-text-xs': true,
+    'envive-tw-text-gray-500': true,
+    'envive-tw-font-semibold': true,
+  });
+
+  return (
+    <div className="envive-tw-pb-0 envive-tw-mb-[24px] envive-tw-flex envive-tw-w-full envive-tw-flex-row envive-tw-items-start envive-tw-justify-between envive-tw-gap-3 envive-tw-px-[24px] envive-tw-pt-[24px]">
+      <div className="envive-tw-flex envive-tw-w-full envive-tw-flex-col envive-tw-items-stretch envive-tw-gap-3">
+        <div className="envive-tw-flex envive-tw-flex-row envive-tw-items-start envive-tw-justify-between envive-tw-gap-3">
+          <div className="envive-tw-max-w-[100%]">
+            <h2 className={headerTitleClassnames}>Give us feedback on this message</h2>
+            <p className={headerDescriptionClassnames}>
+              For UI bugs and Feature Ideas, please use{' '}
+              <a
+                href="https://spiffy-ai.notion.site/19fe47c0828780b1a6cfd0ac4373cebe"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={headerLinkClassnames}
+              >
+                this form
+              </a>
+              .
+            </p>
+          </div>
+
+          <div className="envive-tw-flex envive-tw-flex-col envive-tw-items-end envive-tw-gap-3">
+            <div className="envive-tw-flex envive-tw-flex-row envive-tw-items-center envive-tw-gap-2">
+              <p className={userIdClassnames}>User Id: {userId.slice(0, 4)}...</p>
+              <button
+                type="button"
+                onClick={handleCopyClick}
+                aria-label="Copy chat ID"
+                className="envive-tw-rounded-base envive-tw-border envive-tw-border-gray-300 envive-tw-px-2 envive-tw-py-0.5 envive-tw-text-xs envive-tw-font-bold hover:envive-tw-bg-gray-50"
+              >
+                Copy
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        type="button"
+        className="envive-tw-p-0 envive-tw-h-[16px] envive-tw-w-[16px]"
+        onClick={onClose}
+      >
+        <IconCloseVariant />
+      </button>
+    </div>
+  );
+};
+
+const ReportFormFields = ({
+  priority,
+  setPriority,
+  reportedBy,
+  onReportedByChanging,
+  reason,
+  onDescriptionChanging,
+  turnInfo,
+  setTurnInfo,
+  lastMessagesText,
+  lastSuggestionsText,
+}: {
+  priority: ReportSessionRequestReportPriorityEnum;
+  setPriority: (key: string) => void;
+  reportedBy: string;
+  onReportedByChanging: (e: ChangeEvent<HTMLInputElement>) => void;
+  reason: string;
+  onDescriptionChanging: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  turnInfo: TurnInfo;
+  setTurnInfo: (
+    e: ChangeEvent<HTMLTextAreaElement>,
+    field: 'message_correction' | 'suggestions_correction',
+  ) => void;
+  lastMessagesText: string;
+  lastSuggestionsText: string;
+}) => {
+  const requiredFieldClassnames = classNames({
+    'envive-tw-text-[#008000]': true,
+    'envive-tw-text-xs': true,
+    'envive-tw-font-normal': true,
+    'envive-tw-italic': true,
+  });
+
+  return (
+    <form
+      onSubmit={e => {
+        e.preventDefault();
+      }}
+      className="envive-tw-pt-0 envive-tw-flex envive-tw-flex-col envive-tw-gap-[24px] envive-tw-px-[24px] envive-tw-pb-[8px]"
+    >
+      <div className="envive-tw-flex envive-tw-flex-col envive-tw-gap-2">
+        <div className="envive-tw-flex envive-tw-flex-row envive-tw-items-center envive-tw-gap-3">
+          <span
+            id="priority-label"
+            className="envive-tw-mb-0 envive-tw-flex envive-tw-shrink-0 envive-tw-items-center envive-tw-gap-2 envive-tw-text-[12px] envive-tw-font-bold envive-tw-text-[#161844]"
+          >
+            Priority
+          </span>
+          <GenericSelect
+            type="priority"
+            selectedKey={priority}
+            onSelect={key => {
+              setPriority(key as ReportSessionRequestReportPriorityEnum);
+            }}
+            aria-labelledby="priority-label"
+          />
+        </div>
+      </div>
+
+      <div className="envive-tw-flex envive-tw-flex-col envive-tw-gap-2">
+        <span
+          id="email-label"
+          className="envive-tw-flex envive-tw-items-center envive-tw-gap-2 envive-tw-text-[12px] envive-tw-font-bold envive-tw-text-[#161844]"
+        >
+          Your Email
+          <p className={requiredFieldClassnames}>* Required so we can follow up with you</p>
+        </span>
+        <input
+          className="envive-tw-rounded-md envive-tw-w-full envive-tw-border envive-tw-border-gray-300 envive-tw-px-3 envive-tw-py-2 envive-tw-text-sm"
+          placeholder="Email address"
+          value={reportedBy}
+          type="email"
+          onChange={onReportedByChanging}
+          aria-labelledby="email-label"
+        />
+      </div>
+
+      <div className="envive-tw-flex envive-tw-flex-col envive-tw-gap-[0]">
+        <span
+          id="chat-history-label"
+          className="envive-tw-flex envive-tw-items-center envive-tw-gap-2 envive-tw-text-[12px] envive-tw-font-bold envive-tw-text-[#161844]"
+        >
+          Chat History
+        </span>
+        <div
+          className="envive-tw-rounded-md envive-tw-h-[250px] envive-tw-w-full envive-tw-overflow-auto envive-tw-border envive-tw-border-[#D9D9D9] envive-tw-p-2"
+          aria-labelledby="chat-history-label"
+        >
+          <ChatEmbed />
+        </div>
+      </div>
+
+      <div className="envive-tw-flex envive-tw-flex-col envive-tw-gap-2">
+        <span
+          id="description-label"
+          className="envive-tw-flex envive-tw-items-center envive-tw-gap-2 envive-tw-text-[12px] envive-tw-font-bold envive-tw-text-[#161844]"
+        >
+          What is the problem with this message?
+          <p className={requiredFieldClassnames}>
+            * Required to train the model and generate the correct message
+          </p>
+        </span>
+        <textarea
+          className="envive-tw-rounded-md envive-tw-w-full envive-tw-border envive-tw-border-gray-300 envive-tw-px-3 envive-tw-py-2 envive-tw-text-sm"
+          placeholder="Please describe the issue"
+          value={reason}
+          onChange={onDescriptionChanging}
+          aria-labelledby="description-label"
+        />
+      </div>
+
+      <div className="envive-tw-flex envive-tw-flex-col envive-tw-gap-2">
+        <span
+          id="message-correction-label"
+          className="envive-tw-flex envive-tw-items-center envive-tw-gap-2 envive-tw-text-[12px] envive-tw-font-bold envive-tw-text-[#161844]"
+        >
+          What should the message have said?
+          <p className="envive-tw-text-xs envive-tw-font-normal envive-tw-italic envive-tw-text-gray-500">
+            Creating an alternative message will ensure the AI sounds the way you want.
+          </p>
+        </span>
+        <textarea
+          className="envive-tw-rounded-md envive-tw-w-full envive-tw-border envive-tw-border-gray-300 envive-tw-px-3 envive-tw-py-2 envive-tw-text-sm"
+          placeholder="Alternative phrasing of the message"
+          value={turnInfo.message_correction ?? lastMessagesText}
+          onChange={e => setTurnInfo(e, 'message_correction')}
+          rows={10}
+          aria-labelledby="message-correction-label"
+        />
+      </div>
+
+      <div className="envive-tw-flex envive-tw-flex-col envive-tw-gap-2">
+        <span
+          id="suggested-responses-label"
+          className="envive-tw-flex envive-tw-items-center envive-tw-gap-2 envive-tw-text-[12px] envive-tw-font-bold envive-tw-text-[#161844]"
+        >
+          What should the suggested responses for the user be?
+        </span>
+        <textarea
+          className="envive-tw-rounded-md envive-tw-w-full envive-tw-border envive-tw-border-gray-300 envive-tw-px-3 envive-tw-py-2 envive-tw-text-sm"
+          placeholder="Alternative suggested responses"
+          value={turnInfo.suggestions_correction ?? lastSuggestionsText}
+          onChange={e => setTurnInfo(e, 'suggestions_correction')}
+          rows={6}
+          aria-labelledby="suggested-responses-label"
+        />
+      </div>
+    </form>
+  );
+};
+
+const ReportFooter = ({
+  isReporting,
+  errorMessage,
+  reportedByIsInvalid,
+  isReasonInvalid,
+  onReportSession,
+  onClose,
+}: {
+  isReporting: boolean;
+  errorMessage: string;
+  reportedByIsInvalid: boolean;
+  isReasonInvalid: boolean;
+  onReportSession: () => void;
+  onClose: () => void;
+}) => {
+  const sendFeedbackButtonClassnames = classNames({
+    'envive-tw-flex': true,
+    'envive-tw-w-full': true,
+    'sm:envive-tw-w-[180px]': true,
+    'envive-tw-h-10': true,
+    'envive-tw-py-2.5': true,
+    'envive-tw-px-6': true,
+    'envive-tw-justify-center': true,
+    'envive-tw-items-center': true,
+    'envive-tw-gap-2': true,
+    'envive-tw-rounded-full': true,
+    'envive-tw-border': true,
+    'envive-tw-border-[#3C57AA]': true,
+    'envive-tw-bg-[#3C57AA]': true,
+    'envive-tw-text-white': true,
+    'hover:envive-tw-bg-[#2B4A8A]': true,
+    'disabled:envive-tw-opacity-50': true,
+    'disabled:envive-tw-cursor-not-allowed': true,
+  });
+
+  const cancelButtonClassnames = classNames({
+    'envive-tw-flex': true,
+    'envive-tw-w-full': true,
+    'sm:envive-tw-w-[171px]': true,
+    'envive-tw-h-10': true,
+    'envive-tw-py-2.5': true,
+    'envive-tw-px-6': true,
+    'envive-tw-justify-center': true,
+    'envive-tw-items-center': true,
+    'envive-tw-gap-2': true,
+    'envive-tw-rounded-full': true,
+    'envive-tw-border': true,
+    'envive-tw-border-[#3C57AA]': true,
+    'envive-tw-text-[#3C57AA]': true,
+    'envive-tw-text-center': true,
+    'envive-tw-text-base': true,
+    'envive-tw-font-medium': true,
+    'envive-tw-bg-[#EDF2F7]': true,
+    'hover:envive-tw-bg-[#F5F5F5]': true,
+    'disabled:envive-tw-opacity-50': true,
+    'disabled:envive-tw-cursor-not-allowed': true,
+  });
+
+  const buttonFooterClassnames = classNames({
+    'envive-tw-flex': true,
+    'envive-tw-items-start': true,
+    'envive-tw-gap-6': true,
+    'envive-tw-justify-start': true,
+    'envive-tw-p-0': true,
+    'envive-tw-shadow-none': true,
+    'envive-tw-flex-0': true,
+    'envive-tw-flex-auto': true,
+    'envive-tw-flex-col': true,
+    'sm:envive-tw-flex-row': true,
+    'envive-tw-w-full': true,
+    'envive-tw-bottom-0': true,
+    'envive-tw-z-[1]': true,
+  });
+
+  const footerClassnames = classNames({
+    'envive-tw-bg-[#FFFFFF70]': true,
+    'envive-tw-py-[24px]': true,
+    'envive-tw-sticky': true,
+    'envive-tw-bottom-0': true,
+    'envive-tw-w-full': true,
+    'envive-tw-px-[24px]': true,
+    'envive-tw-border-t': true,
+    'envive-tw-border-[#EBEBEB]': true,
+  });
+
+  return (
+    <div className={footerClassnames}>
+      <div className={buttonFooterClassnames}>
+        <button
+          type="button"
+          disabled={isReporting || reportedByIsInvalid || isReasonInvalid}
+          onClick={onReportSession}
+          className={sendFeedbackButtonClassnames}
+        >
+          {isReporting ? 'Sending...' : 'Send Feedback'}
+        </button>
+        <button
+          type="button"
+          disabled={isReporting}
+          onClick={onClose}
+          className={cancelButtonClassnames}
+        >
+          Cancel
+        </button>
+        {errorMessage && (
+          <div className="envive-tw-text-xs envive-tw-font-normal envive-tw-italic envive-tw-text-red-500">
+            {errorMessage}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  width?: string;
+}
+
+const Drawer = ({
+  isOpen,
+  onClose,
+  children,
+  width = 'md:envive-tw-w-[80%] lg:envive-tw-w-[67%]',
+}: DrawerProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="envive-tw-fixed envive-tw-right-[0] envive-tw-top-[0] envive-tw-z-[9999] envive-tw-flex envive-tw-w-full envive-tw-flex-row envive-tw-justify-end">
+      <div
+        className="envive-tw-bg envive-tw-flex-grow envive-tw-bg-black/40"
+        onClick={onClose}
+      />
+      <div className={`envive-tw-w-full ${width} envive-tw-h-screen`}>
+        <div className="envive-tw-min-h-0 envive-tw-px-0 envive-tw-relative envive-tw-flex envive-tw-h-screen envive-tw-w-full envive-tw-flex-col envive-tw-border envive-tw-border-solid envive-tw-border-[#0000ff] envive-tw-bg-white">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const ReportIssue = () => {
+  const { messages, suggestions, userEvents } = useAtomValue(chatAtom);
+  const lastMessages = useAtomValue(lastAssistantMessageAtom);
+  const [lastMessagesText, setLastMessagesText] = useState<string>('');
+  const [lastSuggestionsText, setLastSuggestionsText] = useState<string>('');
+  const [lastSuggestions, setLastSuggestions] = useState<Suggestion[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [turnInfo, setTurnInfo] = useState<TurnInfo>({});
+  const reportType = ReportSessionRequestReportTypeEnum.Turn;
+  const [isReasonInvalid, setIsReasonInvalid] = useState(true);
+  const [reason, setReason] = useState('');
+  const [reportedBy, setReportedBy] = useState('');
+  const [reportedByIsInvalid, setReportedByIsInvalid] = useState(true);
+  const [isReporting, setIsReporting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string>('');
+  const [priority, setPriority] = useState<ReportSessionRequestReportPriorityEnum>(
+    ReportSessionRequestReportPriorityEnum.NoPriority,
+  );
+
+  const userId = useAtomValue(userIdAtom);
+  const orgShortName = useAtomValue(orgShortNameAtom);
+  const lastUserEvent =
+    userEvents && userEvents.length > 0 ? userEvents[userEvents.length - 1] : undefined;
+
+  const onOpen = useCallback(() => setIsOpen(true), []);
+  const onClose = useCallback(() => setIsOpen(false), []);
+
+  useEffect(() => {
+    if (messages) {
+      const currentMessages = messages.length > 0 ? messages[messages.length - 1] : [];
+      if (currentMessages.length > 0 && lastUserEvent) {
+        setTurnInfo(prev => ({
+          ...prev,
+          turn_idx: currentMessages.length - 1,
+        }));
+      }
+    }
+  }, [messages]);
+
+  useEffect(() => {
+    if (suggestions) {
+      setLastSuggestions(suggestions as unknown as Suggestion[]);
+    } else {
+      setLastSuggestions([]);
+    }
+  }, [suggestions]);
+
+  useEffect(() => {
+    if (lastUserEvent) {
+      setTurnInfo(prev => ({
+        ...prev,
+        prev_user_event: {
+          id: lastUserEvent.eventId,
+          category: lastUserEvent.category,
+        },
+      }));
+    } else {
+      setTurnInfo(prev => ({ ...prev, prev_user_event: undefined }));
+    }
+  }, [lastUserEvent]);
+
+  useEffect(() => {
+    if (lastMessages) {
+      setLastMessagesText(
+        lastMessages
+          .filter(m => m.type !== MessageType.Separator)
+          .map(m => messageContent(m))
+          .join('\n\n'),
+      );
+      setTurnInfo(prev => ({
+        ...prev,
+        messages: lastMessages.map(m => ({
+          id: m.id,
+          content: messageContent(m),
+        })),
+      }));
+    }
+  }, [lastMessages]);
+
+  useEffect(() => {
+    if (lastSuggestions) {
+      const sortedSuggestions = [
+        ...lastSuggestions.filter(s => s.is_answer),
+        ...lastSuggestions.filter(s => !s.is_answer),
+      ];
+      setLastSuggestionsText(`- ${sortedSuggestions.map(s => s.content).join('\n- ')}`);
+      setTurnInfo(prev => ({
+        ...prev,
+        suggestions: sortedSuggestions.map(s => ({
+          id: s.id,
+          content: s.content,
+        })),
+      }));
+    }
+  }, [lastSuggestions]);
+
+  const reportSession = useCallback(async () => {
+    try {
+      setIsReporting(true);
+      setErrorMessage('');
+      const request: ReportSessionRequest = {
+        user_id: userId,
+        reported_by: reportedBy,
+        org_short_name: orgShortName,
+        report_priority: priority,
+        reason,
+        turn_info: turnInfo,
+        report_type: reportType,
+      };
+      console.info('Submitting report', request);
+      await CommerceApiClient.reportSession(request);
+      onClose();
+    } catch (error) {
+      console.error('Error sending report', error);
+      setErrorMessage(
+        'There was an error sending the report. Please try again or contact Envive Support.',
+      );
+    } finally {
+      setIsReporting(false);
+    }
+  }, [userId, reportedBy, orgShortName, priority, reason, turnInfo, reportType, onClose]);
+
+  const onReportedByChanging = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    const reportedByValue = e.target.value;
+    const isEmail = validateEmail(reportedByValue);
+    setReportedByIsInvalid(!reportedByValue || !isEmail);
+    setReportedBy(reportedByValue);
+  }, []);
+
+  const onDescriptionChanging = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
+    const descriptionValue = e.target.value;
+    setIsReasonInvalid(StringUtils.isNullOrEmpty(descriptionValue));
+    setReason(descriptionValue);
+  }, []);
+
+  const handlePriorityChange = useCallback((key: string) => {
+    setPriority(key as ReportSessionRequestReportPriorityEnum);
+  }, []);
+
+  const handleTurnInfoChange = useCallback(
+    (
+      e: ChangeEvent<HTMLTextAreaElement>,
+      field: 'message_correction' | 'suggestions_correction',
+    ) => {
+      setTurnInfo(prev => ({ ...prev, [field]: e.target.value }));
+    },
+    [],
+  );
+
+  const buttonClassnames = classNames({
+    'envive-tw-underline': true,
+    'envive-tw-text-inherit': true,
+    'envive-tw-text-[12px]': true,
+    'envive-tw-cursor-pointer': true,
+    'envive-tw-bg-transparent': true,
+    'envive-tw-border-none': true,
+    'envive-tw-p-0': true,
+    'envive-tw-m-0': true,
+    'envive-tw-inline': true,
+    'envive-tw-z-[9999]': true,
+  });
+
+  return (
+    <div className="envive-tw-mx-[16px] envive-tw-block envive-tw-h-[24px] envive-tw-w-full">
+      <button
+        type="button"
+        onClick={e => {
+          e.preventDefault();
+          onOpen();
+        }}
+        className={buttonClassnames}
+      >
+        Give us feedback
+      </button>
+      <Drawer
+        isOpen={isOpen}
+        onClose={onClose}
+      >
+        <ReportHeader onClose={onClose} />
+        <div className="envive-tw-min-h-0 envive-tw-p-0 envive-tw-flex envive-tw-flex-[1_1_auto] envive-tw-flex-col envive-tw-overflow-y-auto">
+          {lastMessages && lastSuggestions && lastMessages.length > 0 && (
+            <ReportFormFields
+              priority={priority}
+              setPriority={handlePriorityChange}
+              reportedBy={reportedBy}
+              onReportedByChanging={onReportedByChanging}
+              reason={reason}
+              onDescriptionChanging={onDescriptionChanging}
+              turnInfo={turnInfo}
+              setTurnInfo={handleTurnInfoChange}
+              lastMessagesText={lastMessagesText}
+              lastSuggestionsText={lastSuggestionsText}
+            />
+          )}
+        </div>
+        <ReportFooter
+          isReporting={isReporting}
+          errorMessage={errorMessage}
+          reportedByIsInvalid={reportedByIsInvalid}
+          isReasonInvalid={isReasonInvalid}
+          onReportSession={reportSession}
+          onClose={onClose}
+        />
+      </Drawer>
+    </div>
+  );
+};

package/src/hocs/withBaseWidget/__tests__/withBaseWidget.test.tsx

@@ -362,6 +362,7 @@ describe('withBaseWidget', () => {
   describe('Hardcopy content fetching', () => {
     it('should fetch hardcopy content when widget mounts', async () => {
       const mockHardcopy: HardcopyResponse = {
+        responseId: 'mock-response-id',
         language: 'en',
         values: {
           suggestionBarButtons: ['Button 1', 'Button 2'],
@@ -393,6 +394,7 @@ describe('withBaseWidget', () => {
 
     it('should pass hardcopy content to widget', async () => {
       const mockHardcopy: HardcopyResponse = {
+        responseId: 'mock-response-id',
         language: 'en',
         values: {
           chatPreviewTitle: 'Chat Preview Title',
@@ -498,6 +500,7 @@ describe('withBaseWidget', () => {
 
     it('should render widget with hardcopy content when available', async () => {
       const mockHardcopy: HardcopyResponse = {
+        responseId: 'mock-response-id',
         language: 'en',
         values: {
           imagePromptTitle: 'Image Prompt Title',
@@ -528,6 +531,7 @@ describe('withBaseWidget', () => {
   describe('Integration tests', () => {
     it('should handle full flow: visibility tracking + hardcopy rendering', async () => {
       const mockHardcopy: HardcopyResponse = {
+        responseId: 'mock-response-id',
         language: 'en',
         values: {
           suggestionBarButtons: ['Button 1', 'Button 2', 'Button 3'],
@@ -580,10 +584,12 @@ describe('withBaseWidget', () => {
 
     it('should handle multiple widget instances independently', async () => {
       const mockHardcopy1: HardcopyResponse = {
+        responseId: 'mock-response-id',
         language: 'en',
         values: { buttons: ['Button 1'] },
       };
       const mockHardcopy2: HardcopyResponse = {
+        responseId: 'mock-response-id',
         language: 'en',
         values: { buttons: ['Button 2'] },
       };