@eeacms/volto-eea-chatbot 1.0.9

package/src/ChatBlock/chat/ChatWindow.tsx

@@ -0,0 +1,288 @@
+import React, {
+  useRef,
+  useEffect,
+  useState,
+  useMemo,
+  useCallback,
+} from 'react';
+import type { Persona } from '../types/interfaces';
+import { Button, Form, Segment, Checkbox } from 'semantic-ui-react';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
+import { trackEvent } from '@eeacms/volto-matomo/utils';
+
+import { ChatMessage } from '.';
+import { PacketType } from '../types/streamingModels';
+import AutoResizeTextarea from '../components/AutoResizeTextarea';
+import QualityCheckToggle from '../components/QualityCheckToggle';
+import EmptyState from '../components/EmptyState';
+import { useChatController } from '../hooks';
+import SVGIcon from '../components/Icon';
+import PenIcon from '../../icons/square-pen.svg';
+
+import '../style.less';
+
+interface ChatWindowProps {
+  persona: Persona;
+  rehypePrism?: any;
+  remarkGfm?: any;
+  placeholderPrompt?: string;
+  isEditMode?: boolean;
+  height?: string;
+  qgenAsistantId?: number;
+  enableQgen?: boolean;
+  enableFeedback?: boolean;
+  scrollToInput?: boolean;
+  feedbackReasons?: string[];
+  qualityCheck?: string;
+  qualityCheckStages?: string[];
+  qualityCheckContext?: string;
+  noSupportDocumentsMessage?: string;
+  totalFailMessage?: string;
+  enableShowTotalFailMessage?: boolean;
+  deepResearch?: string;
+  showTools?: PacketType[];
+  showAssistantTitle?: boolean;
+  showAssistantDescription?: boolean;
+  starterPromptsPosition?: 'top' | 'bottom';
+  enableMatomoTracking?: boolean;
+  onDemandInputToggle?: boolean;
+  maxContextSegments?: number;
+  [key: string]: any;
+}
+
+function ChatWindow({
+  persona,
+  rehypePrism,
+  remarkGfm,
+  placeholderPrompt = 'Ask a question',
+  isEditMode,
+  ...data
+}: ChatWindowProps) {
+  const {
+    height,
+    qgenAsistantId,
+    enableQgen,
+    enableFeedback = true,
+    scrollToInput,
+    feedbackReasons,
+    qualityCheck = 'disabled',
+    qualityCheckStages = [],
+    qualityCheckContext = 'citations',
+    noSupportDocumentsMessage,
+    totalFailMessage,
+    enableShowTotalFailMessage,
+    deepResearch,
+    showTools,
+    showAssistantTitle,
+    showAssistantDescription,
+    starterPromptsPosition = 'top',
+    enableMatomoTracking = true,
+    onDemandInputToggle = true,
+    maxContextSegments = 0,
+  } = data;
+  const [qualityCheckEnabled, setQualityCheckEnabled] = useState(
+    onDemandInputToggle ?? true,
+  );
+
+  const showDeepResearchToggle =
+    deepResearch === 'user_on' || deepResearch === 'user_off';
+
+  useEffect(() => {
+    if (isEditMode && qualityCheck === 'ondemand_toggle') {
+      setQualityCheckEnabled(onDemandInputToggle ?? true);
+    }
+  }, [onDemandInputToggle, qualityCheck, isEditMode]);
+
+  // Memoize libs object to prevent recreation on every render
+  const libs = useMemo(
+    () => ({ rehypePrism, remarkGfm }),
+    [rehypePrism, remarkGfm],
+  );
+
+  const {
+    onSubmit,
+    onFetchRelatedQuestions,
+    messages,
+    isStreaming,
+    isFetchingRelatedQuestions,
+    clearChat,
+    setIsDeepResearchEnabled,
+    isDeepResearchEnabled,
+  } = useChatController({
+    personaId: persona.id,
+    qgenAsistantId,
+    enableQgen,
+    deepResearch,
+  });
+
+  const [showLandingPage, setShowLandingPage] = useState(true);
+
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const chatWindowRef = useRef(null);
+  const chatWindowEndRef = useRef(null);
+
+  useEffect(() => {
+    setShowLandingPage(messages.length === 0);
+  }, [messages]);
+
+  const handleStarterPromptChoice = useCallback(
+    (message: string) => {
+      if (enableMatomoTracking) {
+        trackEvent({
+          category: persona?.name ? `Chatbot - ${persona.name}` : 'Chatbot',
+          action: 'Chatbot: Starter prompt click',
+          name: 'Message submitted',
+        });
+      }
+      onSubmit({ message });
+      setShowLandingPage(false);
+    },
+    [persona, enableMatomoTracking, onSubmit],
+  );
+
+  return (
+    <div className="chat-window">
+      <div className="messages">
+        {showLandingPage ? (
+          <>
+            {showAssistantTitle && <h2>{persona.name}</h2>}
+            {showAssistantDescription && <p>{persona.description}</p>}
+
+            {starterPromptsPosition === 'top' && (
+              <EmptyState
+                {...data}
+                persona={persona}
+                onChoice={handleStarterPromptChoice}
+              />
+            )}
+          </>
+        ) : (
+          <>
+            {/* @ts-ignore */}
+            <Segment clearing basic>
+              <Button
+                disabled={isStreaming}
+                onClick={clearChat}
+                className="right floated clear-chat"
+                aria-label="Clear chat"
+              >
+                <SVGIcon name={PenIcon} /> New chat
+              </Button>
+            </Segment>
+            <div
+              ref={chatWindowRef}
+              className={`conversation ${height ? 'include-scrollbar' : ''}`}
+              style={{ maxHeight: height }}
+            >
+              {messages.map((message, index) => (
+                <React.Fragment>
+                  <ChatMessage
+                    key={message.messageId}
+                    message={message}
+                    isLoading={isStreaming}
+                    isDeepResearchEnabled={isDeepResearchEnabled}
+                    libs={libs}
+                    onChoice={(message) => onSubmit({ message })}
+                    onFetchRelatedQuestions={onFetchRelatedQuestions}
+                    enableFeedback={enableFeedback}
+                    scrollToInput={scrollToInput}
+                    feedbackReasons={feedbackReasons}
+                    qualityCheck={qualityCheck}
+                    qualityCheckStages={qualityCheckStages}
+                    qualityCheckContext={qualityCheckContext}
+                    qualityCheckEnabled={qualityCheckEnabled}
+                    noSupportDocumentsMessage={noSupportDocumentsMessage}
+                    totalFailMessage={totalFailMessage}
+                    isFetchingRelatedQuestions={isFetchingRelatedQuestions}
+                    enableShowTotalFailMessage={enableShowTotalFailMessage}
+                    enableMatomoTracking={enableMatomoTracking}
+                    persona={persona.id}
+                    maxContextSegments={maxContextSegments}
+                    isLastMessage={index === messages.length - 1}
+                    className={
+                      index === messages.length - 1 ? 'most-recent' : ''
+                    }
+                    chatWindowRef={chatWindowRef}
+                    chatWindowEndRef={chatWindowEndRef}
+                    showTools={showTools}
+                  />
+                </React.Fragment>
+              ))}
+
+              {isStreaming &&
+                !isFetchingRelatedQuestions &&
+                !messages[messages.length - 1].isFinalMessageComing && (
+                  <div className="comment">
+                    <div className="circle assistant placeholder"></div>
+                    <div className="comment-content">
+                      <div className="loader-container">
+                        <div className="loader" />
+                      </div>
+                    </div>
+                  </div>
+                )}
+            </div>
+          </>
+        )}
+      </div>
+
+      <div className="chat-form">
+        {/* @ts-ignore */}
+        <Form>
+          <div className="textarea-wrapper">
+            <AutoResizeTextarea
+              // @ts-ignore TODO: convert AutoResizeTextarea to TypeScript
+              maxRows={8}
+              minRows={1}
+              ref={textareaRef}
+              placeholder={
+                messages.length > 0 ? 'Ask follow-up...' : placeholderPrompt
+              }
+              isStreaming={isStreaming}
+              enableMatomoTracking={enableMatomoTracking}
+              persona={persona}
+              onSubmit={onSubmit}
+            />
+          </div>
+        </Form>
+        <div className="chat-controls">
+          {qualityCheck === 'ondemand_toggle' && (
+            <QualityCheckToggle
+              isEditMode={isEditMode}
+              enabled={qualityCheckEnabled}
+              setEnabled={setQualityCheckEnabled}
+            />
+          )}
+
+          {showDeepResearchToggle && (
+            <div className="deep-research-toggle">
+              <Checkbox
+                id="deep-research-toggle"
+                toggle
+                checked={isDeepResearchEnabled}
+                label="Deep research"
+                onChange={(_, { checked }) => {
+                  setIsDeepResearchEnabled(checked ?? false);
+                  textareaRef.current?.focus();
+                }}
+              />
+            </div>
+          )}
+
+          {deepResearch === 'always_on' && <small>Deep research on</small>}
+        </div>
+        <div ref={chatWindowEndRef} /> {/* End div to mark the bottom */}
+      </div>
+
+      {showLandingPage && starterPromptsPosition === 'bottom' && (
+        <EmptyState
+          {...data}
+          persona={persona}
+          onChoice={handleStarterPromptChoice}
+        />
+      )}
+    </div>
+  );
+}
+
+export default injectLazyLibs(['rehypePrism', 'remarkGfm'])(ChatWindow);

package/src/ChatBlock/chat/UserMessage.tsx

@@ -0,0 +1,27 @@
+import type { ChatMessageProps } from '../types/interfaces';
+import loadable from '@loadable/component';
+import SVGIcon from '../components/Icon';
+import { components } from '../components/markdown';
+import UserIcon from '../../icons/user.svg';
+
+const Markdown: any = loadable(() => import('react-markdown'));
+
+export function UserMessage({
+  message,
+  className = '',
+  libs,
+}: ChatMessageProps) {
+  const { remarkGfm } = libs;
+  return (
+    <div className={`comment ${className}`}>
+      <div className="circle user">
+        <SVGIcon name={UserIcon} size={20} color="white" />
+      </div>
+      <div>
+        <Markdown components={components(message)} remarkPlugins={[remarkGfm]}>
+          {message.message}
+        </Markdown>
+      </div>
+    </div>
+  );
+}

package/src/ChatBlock/chat/index.ts

@@ -0,0 +1,4 @@
+export { default as ChatWindow } from './ChatWindow';
+export { ChatMessage } from './ChatMessage';
+export { AIMessage } from './AIMessage';
+export { UserMessage } from './UserMessage';

package/src/ChatBlock/components/AutoResizeTextarea.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import { trackEvent } from '@eeacms/volto-matomo/utils';
+import TextareaAutosize from 'react-textarea-autosize';
+
+import SVGIcon from './Icon';
+import SendIcon from '../../icons/send.svg';
+
+export default React.forwardRef(function AutoResizeTextarea(props, ref) {
+  const { onSubmit, isStreaming, enableMatomoTracking, persona, ...rest } =
+    props;
+  const [input, setInput] = React.useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const trimmedInput = input.trim();
+    if (trimmedInput) {
+      if (enableMatomoTracking) {
+        trackEvent({
+          category: persona?.name ? `Chatbot - ${persona.name}` : 'Chatbot',
+          action: 'Chatbot: Type a question',
+          name: 'Message submitted',
+        });
+      }
+      onSubmit({ message: input });
+      setInput('');
+    }
+  };
+
+  return (
+    <>
+      <TextareaAutosize
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            handleSubmit(e);
+          } else if (e.key === 'Enter' && e.shiftKey) {
+            e.preventDefault();
+            setInput(input + '\n');
+          }
+        }}
+        {...rest}
+        ref={ref}
+      />
+
+      <div className="chat-right-actions">
+        <Button
+          className="submit-btn"
+          type="submit"
+          aria-label="Send"
+          onKeyDown={(e) => {
+            handleSubmit(e);
+          }}
+          disabled={isStreaming}
+          onClick={(e) => {
+            handleSubmit(e);
+          }}
+        >
+          <div className="btn-icon">
+            <SVGIcon name={SendIcon} size="28" />
+          </div>
+        </Button>
+      </div>
+    </>
+  );
+});

package/src/ChatBlock/components/BlinkingDot.tsx

@@ -0,0 +1,3 @@
+export function BlinkingDot({ addMargin = false }: { addMargin?: boolean }) {
+  return <span className={`blinking-dot ${addMargin ? 'with-margin' : ''}`} />;
+}

package/src/ChatBlock/components/ChatMessageFeedback.jsx

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { Button, Icon } from 'semantic-ui-react';
+import FeedbackModal from './FeedbackModal';
+import SVGIcon from './Icon';
+import ThumbsUpIcon from '../../icons/thumbs-up.svg';
+import ThumbsDownIcon from '../../icons/thumbs-down.svg';
+
+const Toast = ({ message, type, isActive }) => (
+  <div className={`feedback-toast ${type} ${isActive ? 'active' : ''}`}>
+    <Icon name={type === 'success' ? 'check circle' : 'warning circle'} />
+    {message}
+  </div>
+);
+
+const ChatMessageFeedback = (props) => {
+  const { message, feedbackReasons, enableMatomoTracking, persona } = props;
+  const [modalOpen, setModalOpen] = useState(false);
+  const [toast, setToast] = useState(null);
+  const [isPositive, setIsPositive] = useState(null);
+  const [isToastActive, setIsToastActive] = useState(false);
+
+  const handleFeedback = (boolean) => {
+    setIsPositive(boolean);
+    setModalOpen(true);
+  };
+
+  const handleToast = (message, type) => {
+    setToast({
+      message: message,
+      type: type,
+    });
+  };
+
+  return (
+    <>
+      <Button
+        basic
+        onClick={() => handleFeedback(true)}
+        title="Like"
+        aria-label="Like"
+      >
+        <SVGIcon name={ThumbsUpIcon} />
+      </Button>
+      <Button
+        basic
+        onClick={() => handleFeedback(false)}
+        title="Dislike"
+        aria-label="Dislike"
+      >
+        <SVGIcon name={ThumbsDownIcon} />
+      </Button>
+
+      {toast && (
+        <Toast
+          message={toast.message}
+          type={toast.type}
+          isActive={isToastActive}
+        />
+      )}
+
+      <FeedbackModal
+        modalOpen={modalOpen}
+        onClose={() => setModalOpen(false)}
+        setToast={setToast}
+        onToast={handleToast}
+        isPositive={isPositive}
+        message={message}
+        setIsToastActive={setIsToastActive}
+        feedbackReasons={feedbackReasons}
+        enableMatomoTracking={enableMatomoTracking}
+        persona={persona}
+      />
+    </>
+  );
+};
+
+export default ChatMessageFeedback;

package/src/ChatBlock/components/EmptyState.jsx

@@ -0,0 +1,70 @@
+import { Button } from 'semantic-ui-react';
+import { debounce } from '../utils';
+
+function StarterMessage({ msg, onClick }) {
+  if (!(msg.name || msg.message)) return null;
+
+  return (
+    <Button onClick={onClick} onKeyDown={onClick} className="starter-message">
+      <span className="starter-message-title">{msg.name}</span>
+      {msg.description && (
+        <div className="starter-message-desc">{msg.description}</div>
+      )}
+    </Button>
+  );
+}
+
+let click_signal = { current: null };
+
+export default function EmptyState(props) {
+  const {
+    persona,
+    onChoice,
+    showAssistantPrompts = true,
+    enableStarterPrompts,
+    starterPrompts = [],
+    starterPromptsHeading,
+  } = props;
+
+  return (
+    <div className="empty-state">
+      {starterPromptsHeading &&
+        (showAssistantPrompts || enableStarterPrompts) && (
+          <h4 className="starter-message-heading">{starterPromptsHeading}</h4>
+        )}
+
+      <div className="starter-messages-container">
+        {enableStarterPrompts &&
+          starterPrompts.map((msg, idx) => (
+            <StarterMessage
+              key={msg.name || `starter-${idx}`}
+              msg={msg}
+              onClick={() =>
+                debounce(
+                  () =>
+                    onChoice(msg.message || `${msg.name}\n${msg.description}`),
+                  click_signal,
+                )
+              }
+            />
+          ))}
+
+        {showAssistantPrompts &&
+          !enableStarterPrompts &&
+          persona?.starter_messages?.map((msg, idx) => (
+            <StarterMessage
+              key={msg.name || `assistant-${idx}`}
+              msg={msg}
+              onClick={() =>
+                debounce(
+                  () =>
+                    onChoice(msg.message || `${msg.name}\n${msg.description}`),
+                  click_signal,
+                )
+              }
+            />
+          ))}
+      </div>
+    </div>
+  );
+}

package/src/ChatBlock/components/FeedbackModal.jsx

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { trackEvent } from '@eeacms/volto-matomo/utils';
+import { Modal, Button, TextArea, Form, Icon } from 'semantic-ui-react';
+import { createChatMessageFeedback } from '../utils';
+
+const FeedbackModal = ({
+  modalOpen,
+  onClose,
+  setToast,
+  onToast,
+  isPositive,
+  message,
+  setIsToastActive,
+  feedbackReasons,
+  enableMatomoTracking,
+  persona,
+}) => {
+  const [feedbackText, setFeedbackText] = useState('');
+  const [selectedReason, setSelectedReason] = useState('');
+  const isPositiveFeedback = isPositive;
+
+  const resetForm = () => {
+    setFeedbackText('');
+    setSelectedReason('');
+  };
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  const submitFeedback = async () => {
+    try {
+      await createChatMessageFeedback({
+        chat_message_id: message.messageId,
+        feedback_text: feedbackText,
+        is_positive: isPositive,
+        predefined_feedback: selectedReason,
+      });
+      if (enableMatomoTracking) {
+        trackEvent({
+          category: persona?.name ? `Chatbot - ${persona.name}` : 'Chatbot',
+          action: isPositive
+            ? 'Chatbot: Positive feedback submitted'
+            : 'Chatbot: Negative feedback submitted',
+          name: 'Feedback submitted',
+        });
+      }
+      setIsToastActive(true);
+      onToast('Thanks for your feedback!', 'success');
+    } catch (error) {
+      setIsToastActive(true);
+      onToast('Failed to submit feedback.', 'error');
+    } finally {
+      setTimeout(() => setIsToastActive(false), 5000);
+      setTimeout(() => setToast(null), 3500);
+      resetForm();
+      onClose();
+    }
+  };
+
+  return (
+    <Modal
+      open={modalOpen}
+      onClose={handleClose}
+      className="feedback-modal"
+      size="small"
+    >
+      <Modal.Header>
+        <h3>
+          {isPositiveFeedback ? (
+            <>
+              <Icon name="thumbs up outline" />
+              Share your positive feedback
+            </>
+          ) : (
+            <>
+              <Icon name="thumbs down outline" />
+              Tell us how we can improve
+            </>
+          )}
+        </h3>
+      </Modal.Header>
+
+      <Modal.Content>
+        {!isPositiveFeedback && (
+          <div className="reason-buttons">
+            {feedbackReasons?.map((reason) => (
+              <Button
+                primary
+                size="small"
+                key={reason}
+                onClick={() => setSelectedReason(reason)}
+                inverted={selectedReason !== reason}
+              >
+                {reason}
+              </Button>
+            ))}
+          </div>
+        )}
+
+        <Form>
+          <TextArea
+            placeholder={
+              isPositiveFeedback
+                ? 'What did you like about this response? (Optional)'
+                : 'What could be improved? (Optional)'
+            }
+            value={feedbackText}
+            onChange={(e) => setFeedbackText(e.target.value)}
+          />
+        </Form>
+      </Modal.Content>
+
+      <Modal.Actions>
+        <Button onClick={handleClose}>Cancel</Button>
+        <Button primary onClick={submitFeedback}>
+          Submit Feedback
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  );
+};
+
+export default FeedbackModal;