@eeacms/volto-eea-chatbot 1.0.9

package/src/ChatBlock/components/HalloumiFeedback.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import cx from 'classnames';
+import { Button, Message, MessageContent } from 'semantic-ui-react';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
+import Spinner from './Spinner';
+import SVGIcon from './Icon';
+import { getSupportedBgColor } from './markdown/colors';
+
+import GlassesIcon from '../../icons/glasses.svg';
+import RotateIcon from '../../icons/rotate.svg';
+
+const VERIFY_CLAIM_MESSAGES = [
+  'Going through each claim and verify against the referenced documents...',
+  'Summarising claim verifications results...',
+  'Calculating scores...',
+];
+
+function visitTextNodes(node, visitor) {
+  if (Array.isArray(node)) {
+    node.forEach((child) => visitTextNodes(child, visitor));
+  } else if (node && typeof node === 'object') {
+    if (node.text !== undefined) {
+      visitor(node);
+    }
+    if (node.children) {
+      visitTextNodes(node.children, visitor);
+    }
+  }
+}
+
+function printSlate(value, score) {
+  if (typeof value === 'string') {
+    return value.replaceAll('{score}', score);
+  }
+  function visitor(node) {
+    if (node.text.indexOf('{score}') > -1) {
+      node.text = node.text.replaceAll('{score}', score);
+    }
+  }
+
+  visitTextNodes(value, visitor);
+  return serializeNodes(value);
+}
+
+function VerifyClaims() {
+  const [message, setMessage] = React.useState(0);
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (message < VERIFY_CLAIM_MESSAGES.length - 1) {
+        setMessage(message + 1);
+      }
+    }, 5000);
+    return () => clearTimeout(timer);
+  }, [message]);
+
+  return (
+    <div className="verify-claims">
+      <Spinner />
+      {VERIFY_CLAIM_MESSAGES[message]}
+    </div>
+  );
+}
+
+const HalloumiFeedback = ({
+  halloumiMessage,
+  isLoadingHalloumi,
+  markers,
+  score,
+  scoreColor,
+  onManualVerify,
+  showVerifyClaimsButton,
+  sources,
+  retryHalloumi,
+}) => {
+  const noClaimsScore = markers?.claims[0]?.score === null;
+  const messageBySource =
+    'Please allow a few minutes for claim verification when many references are involved.';
+
+  return (
+    <>
+      {showVerifyClaimsButton && (
+        <div className="halloumi-feedback-button">
+          <Button onClick={onManualVerify} className="icon claims-btn">
+            <SVGIcon name={GlassesIcon} /> Fact-check AI answer
+          </Button>
+          <div>
+            <span>{messageBySource}</span>{' '}
+          </div>
+        </div>
+      )}
+
+      {isLoadingHalloumi && sources.length > 0 && (
+        <Message color="blue">
+          <VerifyClaims />
+        </Message>
+      )}
+
+      {noClaimsScore && (
+        <>
+          <Message color="red">{markers?.claims?.[0].rationale}</Message>
+          <Button onClick={retryHalloumi} className="icon">
+            <SVGIcon name={RotateIcon} /> Retry Fact-check AI answer
+          </Button>
+        </>
+      )}
+
+      {!!halloumiMessage && !!markers && !noClaimsScore && (
+        <Message
+          color={scoreColor}
+          className={cx(
+            'claim-message',
+            getSupportedBgColor(score / 100, 'claim'),
+          )}
+          icon
+        >
+          <MessageContent>
+            {printSlate(halloumiMessage, `${score}%`)}
+          </MessageContent>
+        </Message>
+      )}
+    </>
+  );
+};
+
+export default HalloumiFeedback;

package/src/ChatBlock/components/Icon.tsx

@@ -0,0 +1,35 @@
+type IconProps = {
+  name: any;
+  size?: number;
+  color?: string;
+  className?: string;
+  title?: string;
+};
+
+const Icon = ({
+  name,
+  size = 25,
+  color = 'currentColor',
+  className = '',
+  title = '',
+}: IconProps) => {
+  return (
+    <svg
+      xmlns={name?.attributes && name?.attributes?.xmlns}
+      width={size}
+      height={size}
+      viewBox={name?.attributes && name?.attributes?.viewBox}
+      fill={name?.attributes?.fill || 'currentColor'}
+      stroke={color}
+      strokeWidth={name?.attributes['stroke-width']}
+      strokeLinecap={name?.attributes['stroke-linecap']}
+      strokeLinejoin={name?.attributes[' stroke-linejoin']}
+      className={className ? `icon ${className}` : 'icon'}
+      dangerouslySetInnerHTML={{
+        __html: title ? `<title>${title}</title>${name.content}` : name.content,
+      }}
+    />
+  );
+};
+
+export default Icon;

package/src/ChatBlock/components/QualityCheckToggle.jsx

@@ -0,0 +1,26 @@
+import { Checkbox, Popup } from 'semantic-ui-react';
+
+const QualityCheckToggle = ({ isEditMode, enabled, setEnabled }) => {
+  return (
+    <div className="quality-check-toggle">
+      <Popup
+        wide
+        basic
+        className="quality-check-popup"
+        content="Checks the AI's statements against cited sources to highlight possible inaccuracies and hallucinations."
+        trigger={
+          <Checkbox
+            id="fact-check-toggle"
+            toggle
+            label="Fact-check AI answer"
+            disabled={isEditMode}
+            checked={enabled}
+            onChange={() => setEnabled((v) => !v)}
+          />
+        }
+      />
+    </div>
+  );
+};
+
+export default QualityCheckToggle;

package/src/ChatBlock/components/RelatedQuestions.jsx

@@ -0,0 +1,59 @@
+import { trackEvent } from '@eeacms/volto-matomo/utils';
+
+const RelatedQuestions = ({
+  persona,
+  message,
+  isLoading,
+  onChoice,
+  enableMatomoTracking,
+}) => {
+  const showRelatedQuestions = message.relatedQuestions?.length > 0;
+
+  const handleRelatedQuestionClick = (question) => {
+    if (!isLoading) {
+      if (enableMatomoTracking) {
+        trackEvent({
+          category: persona?.name ? `Chatbot - ${persona.name}` : 'Chatbot',
+          action: 'Chatbot: Related question click',
+          name: 'Message submitted',
+        });
+      }
+      onChoice(question);
+    }
+  };
+
+  return (
+    <>
+      {showRelatedQuestions && (
+        <>
+          <h5>Related questions:</h5>
+          <div className="chat-related-questions">
+            {message.relatedQuestions.map(({ question }, idx) => (
+              <div
+                key={idx}
+                className="relatedQuestionButton"
+                role="button"
+                onClick={(e) => {
+                  e.currentTarget.blur();
+                  handleRelatedQuestionClick(question);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault(); // Prevent space from scrolling
+                    e.currentTarget.blur();
+                    handleRelatedQuestionClick(question);
+                  }
+                }}
+                tabIndex="0"
+              >
+                {question}
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+export default RelatedQuestions;

package/src/ChatBlock/components/Source.jsx

@@ -0,0 +1,93 @@
+import { Popup } from 'semantic-ui-react';
+import SVGIcon from './Icon';
+
+import FileIcon from '../../icons/file.svg';
+import GlobeIcon from '../../icons/globe.svg';
+
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+const SourceDetails_ = ({ source, index, luxon }) => {
+  // Ensure source is an object
+  if (!source || typeof source !== 'object') {
+    return null;
+  }
+
+  const { link, blurb, updated_at, source_type, semantic_identifier } = source;
+  const parsedDate = updated_at ? luxon.DateTime.fromISO(updated_at) : null;
+  const relativeTime = parsedDate?.toRelative();
+  const isLinkType = source_type === 'web';
+  const isDocumentType = source_type === 'file';
+
+  const renderIcon = () => {
+    if (isLinkType) {
+      return <SVGIcon name={GlobeIcon} size="16" alt="Web icon" />;
+    }
+    if (isDocumentType) {
+      return <SVGIcon name={FileIcon} size="16" alt="File icon" />;
+    }
+    return null;
+  };
+
+  const sourceContent = (
+    <>
+      {blurb && (
+        <div className="source-desc">
+          <span>{blurb}</span>
+        </div>
+      )}
+      {updated_at && (
+        <div className="source-date">
+          <span>{relativeTime}</span>
+        </div>
+      )}
+    </>
+  );
+
+  // Ensure we have valid data before rendering
+  if (!semantic_identifier) {
+    return null;
+  }
+
+  return (
+    <>
+      {isLinkType && link ? (
+        <a
+          href={link}
+          rel="noreferrer"
+          target="_blank"
+          className="source source-link"
+        >
+          <div className="source-header">
+            <span className="chat-citation">{index}</span>
+            <div className="source-title" title={semantic_identifier}>
+              {semantic_identifier}
+            </div>
+            {renderIcon()}
+          </div>
+          {sourceContent}
+        </a>
+      ) : (
+        <div className="source">
+          <div className="source-header">
+            <Popup
+              on="click"
+              wide="very"
+              content="This doc doesn't have a link."
+              trigger={<span className="chat-citation">{index}</span>}
+              popper={{ id: 'chat-citation-popup' }}
+            />
+            <div className="source-title" title={semantic_identifier}>
+              {semantic_identifier}
+            </div>
+            {renderIcon()}
+          </div>
+          {sourceContent}
+        </div>
+      )}
+    </>
+  );
+};
+
+const SourceDetails = injectLazyLibs(['luxon'])(SourceDetails_);
+
+export default SourceDetails;

package/src/ChatBlock/components/SourceChip.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+
+interface SourceChipProps {
+  icon?: React.ReactNode;
+  title: string;
+  onRemove?: () => void;
+  onClick?: () => void;
+  includeAnimation?: boolean;
+}
+
+export function SourceChip({
+  icon,
+  title,
+  onRemove,
+  onClick,
+  includeAnimation,
+}: SourceChipProps) {
+  const [isNew, setIsNew] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsNew(false), 300);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <button
+      onClick={onClick}
+      className={`source-chip ${includeAnimation && isNew ? 'animate-in' : ''}`}
+    >
+      {icon && <div className="source-chip-icon">{icon}</div>}
+      <span>{title}</span>
+      {onRemove && (
+        <span
+          className="source-chip-remove"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
+          aria-label={`Remove ${title}`}
+          title={`Remove ${title}`}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              onRemove();
+            }
+          }}
+        >
+          ✕
+        </span>
+      )}
+    </button>
+  );
+}

package/src/ChatBlock/components/Spinner.jsx

@@ -0,0 +1,3 @@
+export default function Spinner() {
+  return <div className="spinner"></div>;
+}

package/src/ChatBlock/components/UserActionsToolbar.jsx

@@ -0,0 +1,44 @@
+import cx from 'classnames';
+import { Button } from 'semantic-ui-react';
+import { useCopyToClipboard } from '../utils';
+import SVGIcon from './Icon';
+import ChatMessageFeedback from './ChatMessageFeedback';
+
+import CopyIcon from '../../icons/copy.svg';
+import CheckIcon from '../../icons/check.svg';
+
+const UserActionsToolbar = ({
+  className,
+  message,
+  enableFeedback,
+  feedbackReasons,
+  enableMatomoTracking,
+  persona,
+}) => {
+  const [copied, handleCopy] = useCopyToClipboard(message?.message || '');
+
+  return (
+    <div className={cx('message-actions', className)}>
+      <Button
+        basic
+        onClick={() => handleCopy()}
+        title="Copy"
+        aria-label="Copy"
+        disabled={copied}
+      >
+        {copied ? <SVGIcon name={CheckIcon} /> : <SVGIcon name={CopyIcon} />}
+      </Button>
+
+      {enableFeedback && (
+        <ChatMessageFeedback
+          message={message}
+          feedbackReasons={feedbackReasons}
+          enableMatomoTracking={enableMatomoTracking}
+          persona={persona}
+        />
+      )}
+    </div>
+  );
+};
+
+export default UserActionsToolbar;

package/src/ChatBlock/components/WebResultIcon.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import SVGIcon from './Icon';
+import FileIcon from '../../icons/file.svg';
+import GlobeIcon from '../../icons/globe.svg';
+
+interface WebResultIconProps {
+  url: string;
+  size?: number;
+}
+
+export function WebResultIcon({ url, size = 10 }: WebResultIconProps) {
+  const [error, setError] = useState(false);
+
+  let hostname;
+  try {
+    hostname = new URL(url).hostname;
+  } catch (e) {
+    // If URL parsing fails, fall back to FileIcon
+    return <SVGIcon name={FileIcon} size={size} />;
+  }
+
+  // If favicon failed to load, show GlobeIcon
+  if (error) {
+    return <SVGIcon name={GlobeIcon} size={size} />;
+  }
+
+  // Use Google's advanced favicon service
+  return (
+    <img
+      src={`https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://${hostname}&size=128`}
+      alt="favicon"
+      height={size}
+      width={size}
+      onError={() => setError(true)}
+      style={{
+        height: `${size}px`,
+        width: `${size}px`,
+        objectFit: 'contain',
+      }}
+    />
+  );
+}

package/src/ChatBlock/components/markdown/Citation.jsx

@@ -0,0 +1,70 @@
+import { Popup } from 'semantic-ui-react';
+
+export function Citation({ link, index, value, message }) {
+  const isLinkType = value?.toString().startsWith('[');
+
+  const innerText = isLinkType
+    ? value?.toString().split('[')[1].split(']')[0]
+    : index;
+
+  // New streaming architecture: use citations map to find document
+  const citationNum = parseInt(innerText);
+  const documentId = message?.citations?.[citationNum];
+  const document = documentId
+    ? message?.documents?.find((doc) => doc.document_id === documentId)
+    : null;
+
+  const handleClick = (event) => {
+    if (link) {
+      event.preventDefault();
+      window.open(link, '_blank');
+    }
+  };
+
+  const content = link ? (
+    <div>
+      <p>
+        <a href={link} tabIndex="-1" onClick={handleClick}>
+          {link}
+        </a>
+      </p>
+
+      {document?.match_highlights?.map((text, i) =>
+        text ? (
+          <p key={i} dangerouslySetInnerHTML={{ __html: `...${text}...` }} />
+        ) : null,
+      )}
+    </div>
+  ) : (
+    <div>This doc doesn't have a link.</div>
+  );
+
+  const popupContent = isLinkType ? (
+    content
+  ) : (
+    <div>
+      {document?.match_highlights?.map((text, i) => (
+        <div key={i} dangerouslySetInnerHTML={{ __html: text }} />
+      ))}
+    </div>
+  );
+
+  return (
+    <>
+      {link ? (
+        <a href={link} tabIndex="-1" onClick={handleClick}>
+          <span className="chat-citation">{innerText}</span>
+        </a>
+      ) : (
+        <Popup
+          on="click"
+          wide="very"
+          content={popupContent}
+          header={!isLinkType ? document.semantic_identifier : undefined}
+          trigger={<span className="chat-citation">{innerText}</span>}
+          popper={{ id: 'chat-citation-popup' }}
+        />
+      )}
+    </>
+  );
+}

package/src/ChatBlock/components/markdown/ClaimModal.jsx

@@ -0,0 +1,98 @@
+import { Modal, ModalContent, ModalHeader } from 'semantic-ui-react';
+import cx from 'classnames';
+import { convertToPercentage } from '../../utils';
+import SVGIcon from '../Icon';
+import { getSupportedBgColor } from './colors';
+import { ClaimSegments } from './ClaimSegments';
+
+import BotIcon from '../../../icons/bot.svg';
+
+const stripHtml = (html) => {
+  const tmp = document.createElement('div');
+  tmp.innerHTML = html;
+  return tmp.textContent || tmp.innerText || '';
+};
+
+function stripMarkdown(md) {
+  return (
+    stripHtml(md)
+      .replace(/[`*_~>#-]/g, '') // formatting chars
+      .replace(/\n{2,}/g, '\n') // extra newlines
+      // [[1]](url) → <sup>1</sup>
+      .replace(/\[\[(\d+)\]\]\([^)]*\)/g, '<sup>$1</sup>')
+      // optional: strip normal markdown links [text](url) → text
+      .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+      .trim()
+  );
+}
+
+const trimNonAlphanumeric = (str) =>
+  stripMarkdown(str).replace(/(?:^[^a-zA-Z0-9]+)|(?:[^a-zA-Z0-9]+$)/g, '');
+
+export function ClaimModal({ claim, markers, text, citedSources }) {
+  const highlightText = trimNonAlphanumeric(text?.[0] || '');
+
+  return (
+    <Modal
+      className={cx('claim-modal', getSupportedBgColor(claim.score, 'claim'))}
+      trigger={
+        <span
+          className={cx('claim', getSupportedBgColor(claim.score, 'claim'))}
+        >
+          {text}
+        </span>
+      }
+    >
+      <ModalHeader>
+        <div className="claim-modal-header">
+          <div className="claim-header-top">
+            <div className="circle assistant">
+              <SVGIcon name={BotIcon} size="20" color="white" />
+            </div>
+            <span className="claim-label">Verified Claim</span>
+          </div>
+          <blockquote className="claim-quote">
+            &ldquo;
+            <span
+              dangerouslySetInnerHTML={{
+                __html: stripMarkdown(claim.claimString).replace(
+                  highlightText,
+                  `<b>${highlightText}</b>`,
+                ),
+              }}
+            />
+            &rdquo;
+          </blockquote>
+        </div>
+      </ModalHeader>
+      <ModalContent>
+        <div className="claim-verification-card">
+          <div className="score-badge-section">
+            <div className="score-badge">
+              <span className="score-percentage">
+                {convertToPercentage(claim.score)}
+              </span>
+              <span className="score-label">Citation Support</span>
+            </div>
+            <div className="score-progress-bar">
+              <div
+                className="score-progress-fill"
+                style={{ width: `${claim.score * 100}%` }}
+              />
+            </div>
+          </div>
+          <div className="rationale-section">
+            <h5 className="rationale-header">Rationale</h5>
+            <p className="claim-rationale">{claim.rationale}</p>
+          </div>
+        </div>
+
+        <ClaimSegments
+          segmentIds={claim.segmentIds}
+          segments={markers?.segments || {}}
+          citedSources={citedSources}
+        />
+      </ModalContent>
+    </Modal>
+  );
+}