@capillarytech/creatives-library 9.0.67 → 9.0.68

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.67",
+  "version": "9.0.68",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/ErrorInfoNote/index.js

@@ -18,6 +18,7 @@ import { ANDROID, GENERIC, IOS } from '../../v2Containers/CreativesContainer/con
 import { ERROR_TAB_KEYS } from '../HtmlEditor/utils/validationConstants';
 import { SEVERITY } from '../HtmlEditor/components/ValidationPanel/constants';
 import { LIQUID_DOC_URL } from './constants';
+import renderIssueMessage from '../HtmlEditor/utils/renderIssueMessage';
 
 const { CapLabelInline } = CapLabel;
 
@@ -120,7 +121,7 @@ const TabContent = ({ issues, onErrorClick, intl }) => {
           >
             <CapRow useLegacy className="error-info-note__item-content">
               <CapLabelInline type="label2" className="error-info-note__item-message">
-                {displayMessage}
+                {renderIssueMessage(displayMessage)}
               </CapLabelInline>
               {line && (
                 <CapLabelInline type="label2" className="error-info-note__item-location">
@@ -426,7 +427,7 @@ const ErrorSection = ({
       {(errors || []).map((error) => (
         <CapRow useLegacy key={`${error}`} className="error-list-legacy__item">
           <CapLabel type="label2" className="cap-list-v2-error-item">
-            <CapLabel type="label2">{error}</CapLabel>
+            <CapLabel type="label2">{renderIssueMessage(error)}</CapLabel>
           </CapLabel>
         </CapRow>
       ))}

package/v2Components/HtmlEditor/components/ValidationTabs/index.js

@@ -18,6 +18,7 @@ import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 // Messages
 import messages from './messages';
 import { BLOCKING_ERROR_RULE_IDS, VALIDATION_SEVERITY } from '../../constants';
+import renderIssueMessage from '../../utils/renderIssueMessage';
 
 // Styles
 import './_validationTabs.scss';
@@ -109,7 +110,7 @@ const ValidationTabContent = ({
           >
             <div className="validation-tabs__item-content">
               <span className="validation-tabs__item-message">
-                {message}
+                {renderIssueMessage(message)}
               </span>
               {line && (
                 <span className="validation-tabs__item-location">

package/v2Components/HtmlEditor/utils/__tests__/renderIssueMessage.test.js

@@ -0,0 +1,74 @@
+/**
+ * renderIssueMessage Tests
+ *
+ * Tests for rendering AI-generated liquid validation messages, including tolerance for
+ * non-guaranteed LLM formatting quirks (lead-in text before the first label, markdown-wrapped
+ * labels).
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import renderIssueMessage from '../renderIssueMessage';
+
+const renderMessage = (message) => render(<div>{renderIssueMessage(message)}</div>);
+
+describe('renderIssueMessage', () => {
+  it('returns non-string input unchanged', () => {
+    const node = <span>already a node</span>;
+    expect(renderIssueMessage(node)).toBe(node);
+    expect(renderIssueMessage(null)).toBeNull();
+    expect(renderIssueMessage(undefined)).toBeUndefined();
+  });
+
+  it('returns a plain message unchanged when no known labels are present', () => {
+    expect(renderIssueMessage('Something went wrong')).toBe('Something went wrong');
+  });
+
+  it('renders all three labels in order, bolding only "Issue text:" and stripping it from the body', () => {
+    const message = 'Issue text: bad tag Explanation: the tag is malformed Solution: fix the tag';
+    const { container } = renderMessage(message);
+
+    const strong = container.querySelector('strong');
+    expect(strong).toHaveTextContent('Issue text:');
+    expect(container).toHaveTextContent('Issue text: bad tag');
+    expect(container).toHaveTextContent('Explanation: the tag is malformed');
+    expect(container).toHaveTextContent('Solution: fix the tag');
+    // Only the "Issue text:" label should be wrapped in <strong>.
+    expect(container.querySelectorAll('strong')).toHaveLength(1);
+  });
+
+  it('renders correctly when only some labels are present', () => {
+    const message = 'Issue text: bad tag Solution: fix the tag';
+    const { container } = renderMessage(message);
+
+    expect(container).toHaveTextContent('Issue text: bad tag');
+    expect(container).toHaveTextContent('Solution: fix the tag');
+    expect(container).not.toHaveTextContent('Explanation:');
+  });
+
+  it('preserves lead-in text before the first recognized label instead of dropping it', () => {
+    const message = "Here's what I found. Issue text: bad tag Explanation: the tag is malformed";
+    const { container } = renderMessage(message);
+
+    expect(container).toHaveTextContent("Here's what I found.");
+    expect(container).toHaveTextContent('Issue text: bad tag');
+  });
+
+  it('strips markdown bold wrapping around a label instead of leaking asterisks', () => {
+    const message = '**Issue text:** bad tag **Explanation:** the tag is malformed';
+    const { container } = renderMessage(message);
+
+    expect(container.textContent).not.toContain('*');
+    expect(container.querySelector('strong')).toHaveTextContent('Issue text:');
+    expect(container).toHaveTextContent('Explanation: the tag is malformed');
+  });
+
+  it('strips markdown underscore-bold wrapping around a label', () => {
+    const message = '__Issue text:__ bad tag';
+    const { container } = renderMessage(message);
+
+    expect(container.textContent).not.toContain('_');
+    expect(container.querySelector('strong')).toHaveTextContent('Issue text:');
+  });
+});

package/v2Components/HtmlEditor/utils/renderIssueMessage.js

@@ -0,0 +1,56 @@
+import React, { Fragment } from 'react';
+import {
+  AI_ISSUE_TEXT_LABEL,
+  AI_ISSUE_MESSAGE_LABELS,
+  AI_ISSUE_MESSAGE_LEADING_SEGMENT_KEY,
+} from './validationConstants';
+
+// Renders askAiraForLiquid's LLM-generated messages, splitting on known labels rather than "\n"
+// since the API doesn't guarantee newlines; tolerates lead-in text and markdown-wrapped labels.
+
+const stripLabelMarkdown = (text) => AI_ISSUE_MESSAGE_LABELS.reduce(
+  (acc, label) => acc.split(`**${label}**`).join(label).split(`__${label}__`).join(label),
+  text
+);
+
+const renderIssueMessage = (message) => {
+  if (typeof message !== 'string') {
+    return message;
+  }
+
+  const normalizedMessage = stripLabelMarkdown(message);
+
+  const labelPositions = AI_ISSUE_MESSAGE_LABELS
+    .map((label) => ({ label, index: normalizedMessage.indexOf(label) }))
+    .filter(({ index }) => index !== -1)
+    .sort((a, b) => a.index - b.index);
+
+  if (labelPositions.length === 0) {
+    return normalizedMessage;
+  }
+
+  const segments = labelPositions.map(({ label, index }, i) => {
+    const end = i + 1 < labelPositions.length ? labelPositions[i + 1].index : normalizedMessage.length;
+    return { key: label, label, text: normalizedMessage.slice(index, end).trim() };
+  });
+
+  const leadingText = normalizedMessage.slice(0, labelPositions[0].index).trim();
+  if (leadingText) {
+    segments.unshift({ key: AI_ISSUE_MESSAGE_LEADING_SEGMENT_KEY, label: null, text: leadingText });
+  }
+
+  return segments.map(({ key, label, text }, index) => (
+    <Fragment key={key}>
+      {index > 0 && <br />}
+      {index > 0 && '  - '}
+      {label === AI_ISSUE_TEXT_LABEL ? (
+        <>
+          <strong>{label}</strong>
+          {text.slice(label.length)}
+        </>
+      ) : text}
+    </Fragment>
+  ));
+};
+
+export default renderIssueMessage;

package/v2Components/HtmlEditor/utils/validationConstants.js

@@ -36,3 +36,8 @@ export const ERROR_TAB_KEYS = {
   ERRORS: 'errors',
   WARNINGS: 'warnings',
 };
+
+// Labels used to segment AI-generated liquid validation messages (see renderIssueMessage.js)
+export const AI_ISSUE_TEXT_LABEL = 'Issue text:';
+export const AI_ISSUE_MESSAGE_LABELS = [AI_ISSUE_TEXT_LABEL, 'Explanation:', 'Solution:'];
+export const AI_ISSUE_MESSAGE_LEADING_SEGMENT_KEY = 'leading-text';