@eeacms/volto-eea-chatbot 1.0.9

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

@@ -0,0 +1,172 @@
+import React from 'react';
+import { Tab, TabPane } from 'semantic-ui-react';
+import SVGIcon from '../Icon';
+import { RenderClaimView } from './RenderClaimView';
+import LinkIcon from '../../../icons/external-link.svg';
+import FileIcon from '../../../icons/file.svg';
+import GlobeIcon from '../../../icons/globe.svg';
+
+const VISIBLE_SEGMENTS = 50; // Number of citations to show by default
+
+export function ClaimSegments({ segmentIds, segments, citedSources }) {
+  const joinedSources = citedSources.reduce((acc, source) => {
+    source.startIndex = acc.length ? acc.length + 1 : 0;
+    const sep = acc ? '\n' : '';
+    return acc + sep + source.halloumiContext; // + '\n---\n';
+  }, '');
+
+  const snippets = (segmentIds || [])
+    .map((id) => {
+      const segment = segments[id];
+      if (!segment) {
+        // eslint-disable-next-line no-console
+        console.warn(`Could not find segment ${id} in `, segments);
+      }
+      return segment;
+    })
+    .filter((segment) => !!segment)
+    .map((segment) => {
+      const startOffset = Math.max(0, segment.startOffset); // sometimes startOffset comes as -1
+      const endOffset = segment.endOffset;
+      const text = joinedSources.slice(startOffset, endOffset);
+      const source = citedSources.find(
+        (source) =>
+          startOffset >= source.startIndex &&
+          endOffset <= source.halloumiContext.length + source.startIndex,
+      );
+      return {
+        ...segment,
+        text,
+        source_id: source?.id,
+      };
+    });
+
+  const sourcesWithSnippets = citedSources
+    .map((source) => ({
+      ...source,
+      snippets: snippets.filter((s) => s.source_id === source.id),
+    }))
+    .filter((source) => source.snippets.length > 0)
+    .sort((sa, sb) => sa.index - sb.index);
+
+  const [activeTab, setActiveTab] = React.useState(0);
+  const [visibleSegmentId, setVisibleSegment] = React.useState();
+  const [showAllButtons, setShowAllButtons] = React.useState(false);
+
+  const segmentContainerRef = React.useRef(null);
+  const spanRefs = React.useRef({});
+
+  const panes = sourcesWithSnippets.map((source, i) => {
+    const snippetButtons = source.snippets || [];
+
+    const segmentButtons = showAllButtons
+      ? snippetButtons
+      : snippetButtons.slice(0, VISIBLE_SEGMENTS);
+
+    const sourceType = source.source_type;
+    const SourceIcon = source.source_type === 'web' ? GlobeIcon : FileIcon;
+
+    return {
+      menuItem: {
+        key: i,
+        content: (
+          <span title={source?.semantic_identifier}>
+            {source?.semantic_identifier}
+          </span>
+        ),
+        className: `${activeTab === i ? 'active' : ''}`,
+        onClick: () => {
+          setActiveTab(i);
+        },
+      },
+      render: () => (
+        <TabPane>
+          <div className="source-card-header">
+            <div className="source-card-info">
+              <SVGIcon name={SourceIcon} size="20" className="source-icon" />
+              <div className="source-card-details">
+                <h5 className="source-card-title">
+                  {source?.semantic_identifier}
+                </h5>
+                <span className="source-type-badge">{sourceType}</span>
+              </div>
+            </div>
+            {source?.link && (
+              <a
+                href={source.link}
+                rel="noreferrer"
+                target="_blank"
+                className="source-external-link"
+                title="Open source"
+              >
+                <SVGIcon name={LinkIcon} size="16" />
+              </a>
+            )}
+          </div>
+
+          <div className="citation-chips-section">
+            <h5 className="citation-chips-header">Jump to Citation</h5>
+            <div className="citation-chips-container">
+              {segmentButtons.map(({ id }) => (
+                <button
+                  key={id}
+                  className={`citation-chip ${
+                    visibleSegmentId === id ? 'active' : ''
+                  }`}
+                  onClick={() => {
+                    const container = segmentContainerRef.current;
+                    const target = spanRefs.current[id];
+                    if (container && target) {
+                      const containerTop =
+                        container.getBoundingClientRect().top;
+                      const targetTop = target.getBoundingClientRect().top;
+                      const scrollOffset =
+                        targetTop - containerTop + container.scrollTop;
+                      container.scrollTo({
+                        top: scrollOffset - 50,
+                        behavior: 'smooth',
+                      });
+                    }
+                    setVisibleSegment(id);
+                  }}
+                >
+                  #{id}
+                </button>
+              ))}
+
+              {snippetButtons.length > VISIBLE_SEGMENTS && (
+                <button
+                  className="citation-chip more-chip"
+                  onClick={() => setShowAllButtons(!showAllButtons)}
+                >
+                  {showAllButtons
+                    ? 'Less'
+                    : `+${snippetButtons.length - VISIBLE_SEGMENTS} More`}
+                </button>
+              )}
+            </div>
+          </div>
+          <RenderClaimView
+            contextText={joinedSources}
+            value={source.halloumiContext}
+            visibleSegmentId={visibleSegmentId}
+            segmentContainerRef={segmentContainerRef}
+            spanRefs={spanRefs}
+            sourceStartIndex={source.startIndex}
+            segments={source.snippets}
+          />
+        </TabPane>
+      ),
+    };
+  });
+
+  return (
+    <div className="chat-window">
+      <Tab
+        menu={{ secondary: true, pointing: true }}
+        panes={panes}
+        activeIndex={activeTab}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,96 @@
+import React from 'react';
+
+export const RenderClaimView = (props) => {
+  const {
+    value,
+    visibleSegmentId,
+    segmentContainerRef,
+    spanRefs,
+    segments = [],
+    sourceStartIndex = 0,
+  } = props;
+
+  const sortedSegments = [...segments].sort(
+    (a, b) => a.startOffset - b.startOffset,
+  );
+
+  const parts = [];
+  let lastIndex = 0;
+
+  sortedSegments.forEach((segment) => {
+    const segmentStart = segment.startOffset - sourceStartIndex;
+    const segmentEnd = segment.endOffset - sourceStartIndex;
+
+    // Add the text part before the current segment
+    if (segmentStart > lastIndex) {
+      parts.push({
+        type: 'text',
+        content: value.slice(lastIndex, segmentStart),
+      });
+    }
+
+    // Add the segment part
+    parts.push({
+      type: 'segment',
+      ...segment,
+      content: value.slice(segmentStart, segmentEnd),
+    });
+
+    lastIndex = segmentEnd;
+  });
+
+  // Add the remaining text part after the last segment
+  if (lastIndex < value.length) {
+    parts.push({
+      type: 'text',
+      content: value.slice(lastIndex),
+    });
+  }
+
+  return (
+    <div className="citation-text-container" ref={segmentContainerRef}>
+      <div className="citation-text-content">
+        {parts.map((part, index) => {
+          const endline = part.content.endsWith('\n');
+          const content = part.content.split('\n');
+
+          if (part.type === 'segment') {
+            const isSelectedSegment = part.id === visibleSegmentId;
+            return (
+              <React.Fragment key={part.id || index}>
+                <span
+                  ref={(el) => {
+                    if (el) spanRefs.current[part.id] = el;
+                  }}
+                  className={`citation-segment ${
+                    isSelectedSegment ? 'active' : ''
+                  }`}
+                >
+                  <mark className="citation-highlight">
+                    {part.content.trim()}
+                    <sup className="citation-ref">{part.id}</sup>
+                  </mark>
+                  {!endline && <>&nbsp;</>}
+                </span>
+                {endline && <span className="br" />}
+              </React.Fragment>
+            );
+          }
+
+          return (
+            <React.Fragment key={index}>
+              {content
+                .filter((line) => !/^(DOCUMENT |Source)/.test(line))
+                .map((line, lineIndex) => (
+                  <React.Fragment key={lineIndex}>
+                    <span className="citation-line">{line}</span>
+                    {lineIndex < content.length - 1 && <span className="br" />}
+                  </React.Fragment>
+                ))}
+            </React.Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/ChatBlock/components/markdown/colors.js

@@ -0,0 +1,29 @@
+export function getSupportedTextColor(score) {
+  if (0 <= score && score < 0.5) {
+    return 'text-red-500';
+  } else if (0.5 <= score && score <= 1) {
+    return 'text-green-500';
+  }
+  return 'text-gray-500';
+}
+
+export function getSupportedBgColor(score, prefix = 'bg') {
+  if (0 <= score && score < 0.125) {
+    return `${prefix}-red-500`;
+  } else if (0.125 <= score && score < 0.25) {
+    return `${prefix}-red-400`;
+  } else if (0.25 <= score && score < 0.375) {
+    return `${prefix}-red-300`;
+  } else if (0.375 <= score && score < 0.5) {
+    return `${prefix}-red-200`;
+  } else if (0.5 <= score && score < 0.625) {
+    return `${prefix}-green-200`;
+  } else if (0.625 <= score && score < 0.75) {
+    return `${prefix}-green-300`;
+  } else if (0.75 <= score && score < 0.875) {
+    return `${prefix}-green-400`;
+  } else if (0.875 <= score && score <= 1) {
+    return `${prefix}-green-500`;
+  }
+  return `${prefix}-gray-500`;
+}

package/src/ChatBlock/components/markdown/colors.less

@@ -0,0 +1,52 @@
+@gray-500: #6b7280;
+@gray-400: #9ca3af;
+@gray-300: #d1d5db;
+@gray-200: #e5e7eb;
+@gray-100: #f3f4f6;
+@gray-50: #f9fafb;
+
+@red-500: #ef4444;
+@red-400: #f87171;
+@red-300: #fca5a5;
+@red-200: #fecaca;
+@red-100: #fee2e2; //
+
+@green-200: #bbf7d0;
+@green-300: #86efac;
+@green-400: #4ade80;
+@green-500: #22c55e;
+@green-100: #dcfce7; //
+@green-700: #166534; //
+
+@yellow-500: #eab308; //
+@yellow-400: #facc15; //
+@yellow-300: #fde047; //
+@yellow-200: #fef08a; //
+@yellow-100: #fef9c3; //
+
+@amber-500: #f59e0b; //
+@amber-100: #fef3c7; //
+@amber-700: #92400e; //
+
+@lime-500: #84cc16; //
+
+.generate-colors(@namespace, @name, @color, @lighter-value: 20, @darker-value: 20) {
+  @var-name: ~'--@{namespace}-color';
+
+  .@{namespace}-@{name} {
+    // Fallback (Less compile-time)
+    --@{namespace}-color: @color;
+    --@{namespace}-lighter-color: lighten(@color, @lighter-value);
+    --@{namespace}-darker-color: darken(@color, @darker-value);
+  }
+}
+
+.generate-colors(claim, gray-500, @gray-500, 45, 20);
+.generate-colors(claim, red-500, @red-500, 35, 20);
+.generate-colors(claim, red-400, @red-400, 25, 25);
+.generate-colors(claim, red-300, @red-300, 15, 25);
+.generate-colors(claim, red-200, @red-200, 8, 30);
+.generate-colors(claim, green-500, @green-500, 45, 20);
+.generate-colors(claim, green-400, @green-400, 35, 25);
+.generate-colors(claim, green-300, @green-300, 20, 35);
+.generate-colors(claim, green-200, @green-200, 10, 45);

package/src/ChatBlock/components/markdown/colors.test.js

@@ -0,0 +1,69 @@
+import { getSupportedTextColor, getSupportedBgColor } from './colors';
+
+describe('getSupportedTextColor', () => {
+  it('should return "text-red-500" for scores between 0 and 0.5', () => {
+    expect(getSupportedTextColor(0)).toBe('text-red-500');
+    expect(getSupportedTextColor(0.4)).toBe('text-red-500');
+    expect(getSupportedTextColor(0.499)).toBe('text-red-500');
+  });
+
+  it('should return "text-green-500" for scores between 0.5 and 1', () => {
+    expect(getSupportedTextColor(0.5)).toBe('text-green-500');
+    expect(getSupportedTextColor(0.75)).toBe('text-green-500');
+    expect(getSupportedTextColor(1)).toBe('text-green-500');
+  });
+
+  it('should return "text-gray-500" for invalid scores', () => {
+    expect(getSupportedTextColor(-1)).toBe('text-gray-500');
+    expect(getSupportedTextColor(1.5)).toBe('text-gray-500');
+  });
+});
+
+describe('getSupportedBgColor', () => {
+  it('should return correct background colors based on score', () => {
+    // Test for scores in the range [0, 0.125)
+    expect(getSupportedBgColor(0)).toBe('bg-red-500');
+    expect(getSupportedBgColor(0.1)).toBe('bg-red-500');
+    expect(getSupportedBgColor(0.124)).toBe('bg-red-500');
+
+    // Test for scores in the range [0.125, 0.25)
+    expect(getSupportedBgColor(0.125)).toBe('bg-red-400');
+    expect(getSupportedBgColor(0.2)).toBe('bg-red-400');
+    expect(getSupportedBgColor(0.249)).toBe('bg-red-400');
+
+    // Test for scores in the range [0.25, 0.375)
+    expect(getSupportedBgColor(0.25)).toBe('bg-red-300');
+    expect(getSupportedBgColor(0.3)).toBe('bg-red-300');
+    expect(getSupportedBgColor(0.374)).toBe('bg-red-300');
+
+    // Test for scores in the range [0.375, 0.5)
+    expect(getSupportedBgColor(0.375)).toBe('bg-red-200');
+    expect(getSupportedBgColor(0.45)).toBe('bg-red-200');
+    expect(getSupportedBgColor(0.499)).toBe('bg-red-200');
+
+    // Test for scores in the range [0.5, 0.625)
+    expect(getSupportedBgColor(0.5)).toBe('bg-green-200');
+    expect(getSupportedBgColor(0.55)).toBe('bg-green-200');
+    expect(getSupportedBgColor(0.624)).toBe('bg-green-200');
+
+    // Test for scores in the range [0.625, 0.75)
+    expect(getSupportedBgColor(0.625)).toBe('bg-green-300');
+    expect(getSupportedBgColor(0.7)).toBe('bg-green-300');
+    expect(getSupportedBgColor(0.749)).toBe('bg-green-300');
+
+    // Test for scores in the range [0.75, 0.875)
+    expect(getSupportedBgColor(0.75)).toBe('bg-green-400');
+    expect(getSupportedBgColor(0.8)).toBe('bg-green-400');
+    expect(getSupportedBgColor(0.874)).toBe('bg-green-400');
+
+    // Test for scores in the range [0.875, 1]
+    expect(getSupportedBgColor(0.875)).toBe('bg-green-500');
+    expect(getSupportedBgColor(0.9)).toBe('bg-green-500');
+    expect(getSupportedBgColor(1)).toBe('bg-green-500');
+  });
+
+  it('should return "bg-gray-500" for invalid scores', () => {
+    expect(getSupportedBgColor(-1)).toBe('bg-gray-500');
+    expect(getSupportedBgColor(1.1)).toBe('bg-gray-500');
+  });
+});

package/src/ChatBlock/components/markdown/index.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import { ClaimModal } from './ClaimModal';
+import { Citation } from './Citation';
+import { transformEmailsToLinks } from '../../utils';
+
+export function components(message, markers, citedSources) {
+  return {
+    table: (props) => {
+      const { node, children, ...rest } = props;
+      return (
+        <table className="ui celled table" {...rest}>
+          {children}
+        </table>
+      );
+    },
+    td: (props) => {
+      const { node, children, ...rest } = props;
+      // Process children to replace <br> strings with actual line breaks
+      const processedChildren = React.Children.map(children, (child) => {
+        if (typeof child === 'string' && child.includes('<br>')) {
+          // Split by <br> and insert actual <br /> elements
+          const parts = child.split('<br>');
+          return parts.reduce((acc, part, index) => {
+            acc.push(part);
+            if (index < parts.length - 1) {
+              acc.push(<br key={`br-${index}`} />);
+            }
+            return acc;
+          }, []);
+        }
+        return child;
+      });
+      return <td {...rest}>{processedChildren}</td>;
+    },
+    span: (props) => {
+      const { node, ...rest } = props;
+      const child = node.children[0];
+      let claim;
+
+      // identifies if the current text belongs to a claim
+      if (child.type === 'text' && child.position && markers) {
+        const start = child.position.start.offset;
+        const end = child.position.end.offset;
+        claim = markers.claims?.find(
+          (claim) =>
+            (start >= claim.startOffset && end <= claim.endOffset) ||
+            (claim.startOffset >= start && end <= claim.endOffset),
+        );
+      }
+
+      return !claim || claim?.score === null ? (
+        rest.children || []
+      ) : (
+        <ClaimModal
+          claim={claim}
+          markers={markers}
+          text={rest.children}
+          citedSources={citedSources}
+        />
+      );
+    },
+    a: (props) => {
+      const { node, children, href, ...rest } = props;
+      const value = children?.toString() || '';
+
+      // Check for blinking dot indicator
+      if (value?.startsWith('*')) {
+        return <div className="" />;
+      }
+
+      // Check if this is a citation pattern [number]
+      if (value?.startsWith('[') && value?.endsWith(']')) {
+        const match = value.match(/\[(\d+)\]/);
+        if (match) {
+          // This is a citation - render Citation component
+          return (
+            <Citation link={href} value={value} message={message}>
+              {children}
+            </Citation>
+          );
+        }
+      }
+
+      // Regular link - render normal anchor
+      const handleClick = (event) => {
+        if (href) {
+          event.preventDefault();
+          window.open(href, '_blank');
+        }
+      };
+
+      return (
+        <a href={href} onClick={handleClick} {...rest}>
+          {children}
+        </a>
+      );
+    },
+    p: ({ node, ...props }) => {
+      // TODO: reimplement this with rehype
+      const children = props.children;
+      const text = React.Children.map(children, (child) => {
+        if (typeof child === 'string') {
+          return transformEmailsToLinks(child);
+        }
+        return child;
+      });
+
+      return (
+        <p {...props} className="text-default">
+          {text}
+        </p>
+      );
+    },
+  };
+}

package/src/ChatBlock/hocs/withOnyxData.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  PlaceholderParagraph,
+  PlaceholderLine,
+  Placeholder,
+} from 'semantic-ui-react';
+
+const Loader = () => (
+  <Placeholder>
+    <PlaceholderParagraph>
+      <PlaceholderLine />
+      <PlaceholderLine />
+      <PlaceholderLine />
+      <PlaceholderLine />
+    </PlaceholderParagraph>
+  </Placeholder>
+);
+
+export default function withOnyxData(callback) {
+  function wrapper(Component) {
+    function WrappedComponent(props) {
+      const [state, setState] = React.useState(null);
+      const [name, fetcher, depKey] = callback(props);
+
+      React.useEffect(() => {
+        async function handler() {
+          if (fetcher) {
+            const response = await fetcher;
+            setState({ [name]: response.body });
+          }
+        }
+        handler();
+        // the fetcher is not a stable function, but we depend on the relevant depKey
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [depKey, name]);
+
+      return state ? (
+        <Component {...props} {...state} />
+      ) : (
+        <Loader active={true} />
+      );
+    }
+    return WrappedComponent;
+  }
+  return wrapper;
+}

package/src/ChatBlock/hooks/index.ts

@@ -0,0 +1,7 @@
+export { useToolDisplayTiming } from './useToolDisplayTiming';
+export { useChatStreaming } from './useChatStreaming';
+export { useChatController } from './useChatController';
+export { useMarked } from './useMarked';
+export { useQualityMarkers } from './useQualityMarkers';
+export { useDeepCompareMemoize } from './useDeepCompareMemoize';
+export { useScrollonStream } from './useScrollonStream';