@sybilion/uilib 1.0.20

package/src/components/ui/Chat/ChatMessage/AgentMessageContent.helpers.tsx

@@ -0,0 +1,405 @@
+import React from 'react';
+
+import logger from '#uilib/lib/logger';
+
+import S from './ChatMessage.styl';
+
+const injectHeaders = (content: string) => {
+  // Match #, ##, ###, or #### headers at start of line
+  const regex = /(^|\n)(#{1,4})\s+(.+?)(?=\n|$)/m;
+  const matches = content.match(regex);
+
+  if (!matches) return null;
+
+  const level = matches[2].length;
+  const headerText = matches[3].replace(/^\*+|\*+$/g, '');
+  const Tag =
+    level === 1 ? 'h1' : level === 2 ? 'h2' : level === 3 ? 'h3' : 'h4';
+
+  // Calculate the actual match position and length
+  // matches[0] includes the leading \n if present, but we want to replace from the # position
+  const hasLeadingNewline = matches[1] === '\n';
+  const startIndex = matches.index! + (hasLeadingNewline ? 1 : 0);
+  // Length is: # markers + space + header text (excluding leading newline)
+  const length = matches[2].length + 1 + matches[3].length;
+
+  return {
+    elem: <Tag>{headerText}</Tag>,
+    index: startIndex,
+    length: length,
+  };
+};
+
+/** Match sits inside list/table HTML (those blocks use dangerouslySetInnerHTML elsewhere). */
+const isInsideHtmlListOrTable = (content: string, matchStartIndex: number) => {
+  const before = content.substring(0, matchStartIndex);
+  const lastOpen = Math.max(
+    before.lastIndexOf('<ul'),
+    before.lastIndexOf('<ol'),
+    before.lastIndexOf('<table'),
+  );
+  const lastClose = Math.max(
+    before.lastIndexOf('</ul>'),
+    before.lastIndexOf('</ol>'),
+    before.lastIndexOf('</table>'),
+  );
+  return lastOpen > lastClose;
+};
+
+const injectHTMLTags = (content: string) => {
+  // Match <strong> or <b> tags (with optional whitespace, handles nested tags)
+  const regex = /<(strong|b)\s*>([\s\S]*?)<\/\1\s*>/i;
+  const matches = content.match(regex);
+
+  if (!matches) return null;
+
+  if (isInsideHtmlListOrTable(content, matches.index!)) {
+    return null;
+  }
+
+  return {
+    elem: <strong>{matches[2]}</strong>,
+    index: matches.index!,
+    length: matches[0].length,
+  };
+};
+
+const injectBold = (content: string) => {
+  const regex = /\*\*([^*]+?)\*\*/;
+  const matches = content.match(regex);
+
+  if (!matches) return null;
+
+  return {
+    elem: <strong>{matches[1]}</strong>,
+    index: matches.index!,
+    length: matches[0].length,
+  };
+};
+
+const injectBullet = (content: string) => {
+  // Match bullet points: * or - followed by space
+  // Match at start of string/line or after whitespace/colon (for nested bullets)
+  // Then check manually that it's not part of **
+  const regex = /(\n|^|[\s:])(\*|\-)\s/;
+  const matches = content.match(regex);
+
+  if (!matches) return null;
+
+  // Skip if this is part of ** (double asterisk for bold)
+  const bulletIndex = matches.index! + matches[1].length;
+  if (bulletIndex > 0 && content[bulletIndex - 1] === '*') {
+    return null;
+  }
+
+  const hasLeadingNewline = matches[1] === '\n';
+  return {
+    elem: (
+      <>
+        {hasLeadingNewline && <br />}
+        <span className={(S as any).bullet} />
+      </>
+    ),
+    index: hasLeadingNewline ? matches.index! : bulletIndex,
+    length: (hasLeadingNewline ? 1 : 0) + matches[2].length + 1,
+  };
+};
+
+const injectNewlines = (content: string) => {
+  const regex = /\n/;
+  const matches = content.match(regex);
+
+  if (!matches) return null;
+
+  return {
+    elem: <br />,
+    index: matches.index!,
+    length: matches[0].length,
+  };
+};
+
+const formatTableCellContent = (content: string): string => {
+  // Process markdown formatting in table cells
+  // Currently supports bold (**text**)
+  let result = content;
+
+  // Process bold (**text**)
+  result = result.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+
+  return result;
+};
+
+const convertMarkdownTableToHTML = (text: string): string => {
+  // Find markdown tables by looking for header row followed by separator row
+  // Then collect all subsequent rows that start with |
+  const lines = text.split('\n');
+  const replacements: Array<{
+    start: number;
+    end: number;
+    replacement: string;
+  }> = [];
+
+  // Track character positions as we iterate
+  let charPos = 0;
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+    const lineTrimmed = line.trim();
+    const lineStartPos = charPos;
+
+    // Check if this line looks like a table header (starts with |)
+    if (lineTrimmed.startsWith('|') && i + 1 < lines.length) {
+      const nextLineTrimmed = lines[i + 1].trim();
+
+      // Check if next line is a separator row (contains : and -)
+      if (nextLineTrimmed.startsWith('|') && /[:|\-]/.test(nextLineTrimmed)) {
+        // Found a table! Collect all rows
+        const tableRows: string[] = [];
+        let rowIndex = i;
+        let tableStartPos = lineStartPos;
+
+        // Collect header and separator
+        tableRows.push(lineTrimmed);
+        tableRows.push(nextLineTrimmed);
+        rowIndex = i + 2;
+        charPos += line.length + 1; // +1 for newline
+        charPos += lines[i + 1].length + 1;
+
+        // Collect all data rows until we hit a blank line or non-table line
+        while (rowIndex < lines.length) {
+          const rowLine = lines[rowIndex];
+          const rowLineTrimmed = rowLine.trim();
+          if (rowLineTrimmed.startsWith('|')) {
+            tableRows.push(rowLineTrimmed);
+            charPos += rowLine.length + 1;
+            rowIndex++;
+          } else if (rowLineTrimmed.length === 0) {
+            // Blank line ends the table
+            charPos += rowLine.length + 1;
+            break;
+          } else {
+            // Non-table line ends the table
+            break;
+          }
+        }
+
+        const tableEndPos = charPos;
+
+        // Parse the table
+        if (tableRows.length >= 2) {
+          const headerRow = tableRows[0];
+          const separatorRow = tableRows[1];
+          const dataRows = tableRows.slice(2);
+
+          // Parse header cells
+          const headerCells = headerRow
+            .split('|')
+            .map(cell => cell.trim())
+            .filter(cell => cell.length > 0);
+
+          // Parse alignment from separator row
+          const alignments = separatorRow
+            .split('|')
+            .map(cell => cell.trim())
+            .filter(cell => cell.length > 0)
+            .map(cell => {
+              const leftAlign = cell.startsWith(':');
+              const rightAlign = cell.endsWith(':');
+              if (leftAlign && rightAlign) return 'center';
+              if (rightAlign) return 'right';
+              return 'left';
+            });
+
+          // Build HTML table
+          let htmlTable = '<table>';
+
+          // Header row
+          htmlTable += '<thead><tr>';
+          headerCells.forEach((cell, idx) => {
+            const align = alignments[idx] || 'left';
+            const formattedCell = formatTableCellContent(cell);
+            htmlTable += `<th style="text-align: ${align}">${formattedCell}</th>`;
+          });
+          htmlTable += '</tr></thead>';
+
+          // Data rows
+          if (dataRows.length > 0) {
+            htmlTable += '<tbody>';
+            dataRows.forEach(row => {
+              const cells = row
+                .split('|')
+                .map(cell => cell.trim())
+                .filter(cell => cell.length > 0);
+
+              htmlTable += '<tr>';
+              cells.forEach((cell, idx) => {
+                const align = alignments[idx] || 'left';
+                const formattedCell = formatTableCellContent(cell);
+                htmlTable += `<td style="text-align: ${align}">${formattedCell}</td>`;
+              });
+              htmlTable += '</tr>';
+            });
+            htmlTable += '</tbody>';
+          }
+
+          htmlTable += '</table>';
+
+          replacements.push({
+            start: tableStartPos,
+            end: tableEndPos,
+            replacement: htmlTable,
+          });
+
+          i = rowIndex;
+          continue;
+        }
+      }
+    }
+
+    charPos += line.length + 1; // +1 for newline
+    i++;
+  }
+
+  // Apply replacements in reverse order
+  let result = text;
+  for (let i = replacements.length - 1; i >= 0; i--) {
+    const { start, end, replacement } = replacements[i];
+    result = result.substring(0, start) + replacement + result.substring(end);
+  }
+
+  return result;
+};
+
+/** http(s), mailto, or same-app path (single leading slash). */
+const isAllowedHref = (href: string): boolean => {
+  const h = href.trim();
+  if (!h) return false;
+  if (/^https?:\/\//i.test(h)) return true;
+  if (/^mailto:/i.test(h)) return true;
+  if (h.startsWith('/') && !h.startsWith('//')) return true;
+  return false;
+};
+
+type Injector = (
+  content: string,
+) => { elem: React.ReactNode; index: number; length: number } | null;
+
+const runFormattingPipeline = (
+  text: string,
+  injectors: Injector[],
+): React.ReactNode[] => {
+  let result: React.ReactNode[] = [text];
+
+  try {
+    injectors.forEach(fn => {
+      let hasMore = true;
+      while (hasMore) {
+        hasMore = false;
+        for (let i = 0; i < result.length; i++) {
+          const item = result[i];
+
+          if (typeof item === 'string') {
+            const res = fn(item);
+
+            if (!res) continue;
+
+            const { elem, index, length } = res;
+
+            if (index >= 0) {
+              const before = item.substring(0, index);
+              const after = item.substring(index + length);
+
+              result.splice(i, 1, before, elem, after);
+              hasMore = true;
+              break;
+            }
+          }
+        }
+      }
+    });
+  } catch (e) {
+    logger.error('Formatting error:', e);
+  }
+
+  return result;
+};
+
+const injectAnchor: Injector = (content: string) => {
+  const regex = /<a\s+([^>]+)>([\s\S]*?)<\/a\s*>/i;
+  const matches = content.match(regex);
+
+  if (!matches) return null;
+
+  if (isInsideHtmlListOrTable(content, matches.index!)) {
+    return null;
+  }
+
+  const attrs = matches[1];
+  const inner = matches[2];
+
+  const hrefMatch = attrs.match(
+    /href\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/i,
+  );
+  const href = hrefMatch
+    ? (hrefMatch[1] ?? hrefMatch[2] ?? hrefMatch[3] ?? '').trim()
+    : '';
+
+  const targetMatch = attrs.match(
+    /target\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/i,
+  );
+  const targetRaw = targetMatch
+    ? (targetMatch[1] ?? targetMatch[2] ?? targetMatch[3] ?? '').trim()
+    : '';
+
+  if (!href || !isAllowedHref(href)) {
+    return null;
+  }
+
+  const opensNewTab = targetRaw.toLowerCase() === '_blank';
+  const target = opensNewTab ? '_blank' : targetRaw || undefined;
+  const rel = target === '_blank' ? 'noopener noreferrer' : undefined;
+
+  return {
+    elem: (
+      <a href={href} target={target} rel={rel}>
+        {runFormattingPipeline(inner, [
+          injectHTMLTags,
+          injectBold,
+          injectNewlines,
+        ])}
+      </a>
+    ),
+    index: matches.index!,
+    length: matches[0].length,
+  };
+};
+
+const applyFormatting = (text: string): React.ReactNode[] =>
+  runFormattingPipeline(text, [
+    injectHeaders,
+    injectAnchor,
+    injectHTMLTags,
+    injectBullet,
+    injectBold,
+    injectNewlines,
+  ]);
+
+const applyFormattingInline = (text: string): React.ReactNode[] =>
+  runFormattingPipeline(text, [
+    injectAnchor,
+    injectHTMLTags,
+    injectBold,
+    injectNewlines,
+  ]);
+
+export {
+  injectHeaders,
+  injectAnchor,
+  injectBold,
+  injectBullet,
+  injectNewlines,
+  convertMarkdownTableToHTML,
+  applyFormatting,
+  applyFormattingInline,
+};

package/src/components/ui/Chat/ChatMessage/AgentMessageContent.tsx

@@ -0,0 +1,234 @@
+import { type ReactNode, useMemo, useState } from 'react';
+
+import { Button } from '#uilib/components/ui/Button';
+import { InteractiveContent } from '#uilib/components/ui/InteractiveContent';
+import { parseDatasetAppToken } from '#uilib/utils/datasetApplicationLink';
+import { Scroll } from '@homecode/ui';
+import { PaperPlaneRightIcon } from '@phosphor-icons/react';
+import { Presentation } from 'lucide-react';
+
+import { convertMarkdownTableToHTML } from './AgentMessageContent.helpers';
+import { ChatDatasetApplicationLink } from './ChatDatasetApplicationLink';
+import S from './ChatMessage.styl';
+import { DocIcon } from './icons/DocIcon';
+import { XlsIcon } from './icons/XlsIcon';
+
+export function AgentMessageContent({
+  text,
+  onQuickReply,
+  suppressedQuickReplyKeys,
+  quickReplyDisabled,
+  isLastMessage = true,
+  scriptContinue,
+  onScriptContinue,
+  renderMessageChart,
+}: {
+  text: string;
+  onQuickReply?: (branchKey: string, displayLabel: string) => void;
+  suppressedQuickReplyKeys?: ReadonlySet<string>;
+  quickReplyDisabled?: boolean;
+  isLastMessage?: boolean;
+  scriptContinue?: { label: string };
+  onScriptContinue?: () => void;
+  renderMessageChart?: () => ReactNode;
+}) {
+  const [showRaw, setShowRaw] = useState(false);
+
+  const parts = useMemo(() => {
+    // Convert markdown tables to HTML first
+    const textWithHTMLTables = convertMarkdownTableToHTML(text);
+
+    const result: React.ReactNode[] = [];
+    let lastIndex = 0;
+    let previousWasDownload = false;
+    const combinedRegex =
+      /(?:<table[^>]*>[\s\S]*?<\/table>|<ul[^>]*>[\s\S]*?<\/ul>|<ol[^>]*>[\s\S]*?<\/ol>|\[CHART\]|\[DOWNLOAD_BUTTONS\]|\[DOWNLOAD:([^\]]+)\]|\[datasetId:\d+(?:;analysisId:\d+)?\]|\[(?!CHART\]|DOWNLOAD_BUTTONS\]|DOWNLOAD:)([^\]]+)\](?!\())/gi;
+    let match;
+
+    while ((match = combinedRegex.exec(textWithHTMLTables)) !== null) {
+      // Add non-match part before this match
+      if (match.index > lastIndex) {
+        let nonMatchPart = textWithHTMLTables.slice(lastIndex, match.index);
+        if (match[0].startsWith('<table') && /\n\|\s*$/.test(nonMatchPart)) {
+          nonMatchPart = nonMatchPart.replace(/\n\|\s*$/, '\n');
+        }
+        const currentIsDownload = match[0].startsWith('[DOWNLOAD:');
+
+        // Skip formatting for very short text between download markers (like "-")
+        // to avoid unwanted line breaks
+        if (
+          previousWasDownload &&
+          currentIsDownload &&
+          nonMatchPart.trim().length <= 5
+        ) {
+          // Skip rendering short separators between download buttons
+          // This prevents "-" or similar characters from creating <br> tags
+        } else {
+          result.push(<InteractiveContent text={nonMatchPart} />);
+        }
+      }
+
+      // Check if it's a table, list, [CHART], [DOWNLOAD_BUTTONS], or [DOWNLOAD:filename]
+      if (match[0].startsWith('<table')) {
+        // Add table wrapped in Scroll
+        result.push(
+          <Scroll
+            key={`table-${match.index}`}
+            x
+            size="s"
+            className={S.scrollHorizontal}
+          >
+            <div dangerouslySetInnerHTML={{ __html: match[0] }} />
+          </Scroll>,
+        );
+      } else if (match[0].startsWith('<ul') || match[0].startsWith('<ol')) {
+        // Add HTML list
+        result.push(
+          <div
+            key={`list-${match.index}`}
+            dangerouslySetInnerHTML={{ __html: match[0] }}
+          />,
+        );
+      } else if (match[0] === '[CHART]') {
+        const chart = renderMessageChart?.();
+        if (chart != null) {
+          result.push(<span key={`chart-${match.index}`}>{chart}</span>);
+        }
+      } else if (match[0].startsWith('[DOWNLOAD:')) {
+        // Parse filename from [DOWNLOAD:filename] format
+        // Extract filename from the full match string or use match[2] if available
+        const fullMatch = match[0];
+        const filenameMatch = fullMatch.match(/\[DOWNLOAD:\s*([^\]]+)\]/i);
+        const filename = (filenameMatch?.[1] || match[1] || '').trim();
+        const extension = filename.split('.').pop()?.toLowerCase() || '';
+        const filenameWithoutExt = filename.replace(/\.[^.]+$/, '');
+
+        // Determine file type and icon
+        const isDoc = extension === 'doc' || extension === 'docx';
+        const isXls = extension === 'xls' || extension === 'xlsx';
+        const isPpt = extension === 'ppt' || extension === 'pptx';
+
+        // Only render if it's a recognized file type
+        if (isDoc || isXls || isPpt) {
+          let Icon, fileTypeLabel;
+
+          if (isDoc) {
+            Icon = DocIcon;
+            fileTypeLabel = 'DOC';
+          } else if (isXls) {
+            Icon = XlsIcon;
+            fileTypeLabel = 'XLS';
+          } else if (isPpt) {
+            Icon = Presentation;
+            fileTypeLabel = 'PPT';
+          }
+
+          result.push(
+            <div key={`download-${match.index}`} className={S.downloadCard}>
+              <div className={S.downloadCardIcon}>
+                <Icon size={32} />
+              </div>
+              <div className={S.downloadCardContent}>
+                <div className={S.downloadCardTitle}>{filenameWithoutExt}</div>
+                <div className={S.downloadCardSubtitle}>
+                  Download .{fileTypeLabel} file
+                </div>
+              </div>
+            </div>,
+          );
+        }
+      } else if (match[0].startsWith('[datasetId:')) {
+        const parsed = parseDatasetAppToken(match[0]);
+        if (parsed) {
+          result.push(
+            <ChatDatasetApplicationLink
+              key={`dataset-app-${match.index}`}
+              datasetId={parsed.datasetId}
+              analysisId={parsed.analysisId}
+            />,
+          );
+        }
+      } else if (isLastMessage && match[2] != null && match[2] !== '') {
+        const inner = match[2].trim();
+        const pipeIdx = inner.indexOf('|');
+        const displayLabel =
+          pipeIdx >= 0 ? inner.slice(0, pipeIdx).trim() : inner;
+        const branchKey =
+          pipeIdx >= 0 ? inner.slice(pipeIdx + 1).trim() : inner;
+        if (branchKey && displayLabel) {
+          const suppressed = suppressedQuickReplyKeys?.has(branchKey);
+          if (!suppressed && onQuickReply) {
+            result.push(
+              <span key={`quick-${match.index}`} className={S.quickReplyWrap}>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  disabled={quickReplyDisabled}
+                  onClick={() => onQuickReply(branchKey, displayLabel)}
+                >
+                  <PaperPlaneRightIcon />
+                  {displayLabel}
+                </Button>
+              </span>,
+            );
+          } else if (!suppressed) {
+            result.push(
+              <span key={`quick-${match.index}`}>{displayLabel}</span>,
+            );
+          }
+        }
+      }
+
+      // Track if current match is a download marker for next iteration
+      previousWasDownload = match[0].startsWith('[DOWNLOAD:');
+      lastIndex = match.index + match[0].length;
+    }
+
+    // Add remaining non-match part
+    if (lastIndex < textWithHTMLTables.length) {
+      const nonMatchPart = textWithHTMLTables.slice(lastIndex);
+      result.push(
+        <div key={`text-${lastIndex}`}>
+          <InteractiveContent text={nonMatchPart} />
+        </div>,
+      );
+    }
+
+    return result;
+  }, [
+    text,
+    onQuickReply,
+    suppressedQuickReplyKeys,
+    quickReplyDisabled,
+    isLastMessage,
+    renderMessageChart,
+  ]);
+
+  return (
+    <div
+      className={S.text}
+      // onClick={() => setShowRaw(!showRaw)}
+    >
+      {showRaw ? text : parts}
+      {!showRaw &&
+        isLastMessage &&
+        scriptContinue &&
+        onScriptContinue &&
+        scriptContinue.label && (
+          <span className={S.quickReplyWrap}>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={quickReplyDisabled}
+              onClick={() => onScriptContinue()}
+            >
+              <PaperPlaneRightIcon />
+              {scriptContinue.label}
+            </Button>
+          </span>
+        )}
+    </div>
+  );
+}

package/src/components/ui/Chat/ChatMessage/ChatDatasetApplicationLink.tsx

@@ -0,0 +1,38 @@
+import { Link, useSearchParams } from 'react-router-dom';
+
+import { buildDatasetApplicationPath } from '#uilib/utils/datasetApplicationLink';
+import { LayoutDashboard } from 'lucide-react';
+
+import S from './ChatMessage.styl';
+
+export function ChatDatasetApplicationLink({
+  datasetId,
+  analysisId,
+  label = 'Open application',
+}: {
+  datasetId: number;
+  analysisId?: number;
+  label?: string;
+}) {
+  const url = buildDatasetApplicationPath(datasetId, analysisId);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (location.pathname !== '/datasets') return;
+
+    e.preventDefault();
+    const params = new URLSearchParams(searchParams);
+
+    params.set('id', datasetId.toString());
+    if (analysisId) params.set('analysisId', analysisId.toString());
+
+    setSearchParams(params);
+  };
+
+  return (
+    <Link className={S.datasetAppLink} to={url} onClickCapture={handleClick}>
+      <LayoutDashboard size={16} aria-hidden />
+      <span className={S.datasetAppLinkLabel}>{label}</span>
+    </Link>
+  );
+}