@sybilion/uilib 1.2.21 → 1.2.22

package/dist/esm/components/ui/Chat/ChatMessage/AgentMessageContent.helpers.js

@@ -56,6 +56,20 @@ const injectBold = (content) => {
         length: matches[0].length,
     };
 };
+/** `_italic_` (underscore) — avoids clashing with `* ` bullet markers. */
+const injectItalic = (content) => {
+    const matches = content.match(/(?<![A-Za-z0-9])_([^_\n]+?)_(?![A-Za-z0-9])/);
+    if (!matches || matches.index === undefined)
+        return null;
+    if (isInsideHtmlListOrTable(content, matches.index)) {
+        return null;
+    }
+    return {
+        elem: jsx("em", { children: matches[1] }),
+        index: matches.index,
+        length: matches[0].length,
+    };
+};
 const injectBullet = (content) => {
     // Match bullet points: * or - followed by space
     // Match at start of string/line or after whitespace/colon (for nested bullets)
@@ -229,6 +243,33 @@ const isAllowedHref = (href) => {
         return true;
     return false;
 };
+const normalizeWwwToHttps = (raw) => {
+    const t = raw.trim();
+    if (/^www\./i.test(t))
+        return `https://${t}`;
+    return t;
+};
+/** Strip ASCII closing punctuation often pasted after URLs. */
+const stripTrailingUrlPunctuation = (s) => {
+    let u = s;
+    while (u.length > 0 && /[.,;:!?)}\]]$/u.test(u)) {
+        u = u.slice(0, -1);
+    }
+    return u;
+};
+function linkTargetRelForHref(href, explicitTarget) {
+    if (explicitTarget) {
+        const t = explicitTarget.trim();
+        if (t.toLowerCase() === '_blank') {
+            return { target: '_blank', rel: 'noopener noreferrer' };
+        }
+        return { target: t || undefined, rel: undefined };
+    }
+    if (/^https?:\/\//i.test(href) || /^mailto:/i.test(href)) {
+        return { target: '_blank', rel: 'noopener noreferrer' };
+    }
+    return { target: undefined, rel: undefined };
+}
 const runFormattingPipeline = (text, injectors) => {
     let result = [text];
     try {
@@ -260,6 +301,76 @@ const runFormattingPipeline = (text, injectors) => {
     }
     return result;
 };
+const linkLabelInjectors = [
+    injectHTMLTags,
+    injectBold,
+    injectItalic,
+    injectNewlines,
+];
+const injectMarkdownLink = (content) => {
+    const matches = content.match(/\[([^\]]+)\]\(([^)]+)\)/);
+    if (!matches || matches.index === undefined)
+        return null;
+    if (isInsideHtmlListOrTable(content, matches.index)) {
+        return null;
+    }
+    const href = normalizeWwwToHttps(matches[2].trim());
+    if (!isAllowedHref(href))
+        return null;
+    const { target, rel } = linkTargetRelForHref(href, undefined);
+    const label = matches[1];
+    return {
+        elem: (jsx("a", { href: href, target: target, rel: rel, children: runFormattingPipeline(label, linkLabelInjectors) })),
+        index: matches.index,
+        length: matches[0].length,
+    };
+};
+const injectAutolinkUrl = (content) => {
+    const candidates = [];
+    const reHttp = /https?:\/\/[^\s<>"']+/gi;
+    let hm;
+    while ((hm = reHttp.exec(content)) !== null) {
+        const href = stripTrailingUrlPunctuation(hm[0]);
+        if (href.length >= (href.startsWith('https://') ? 8 : 7) &&
+            isAllowedHref(href) &&
+            /^https?:\/\//i.test(href)) {
+            candidates.push({
+                index: hm.index,
+                length: href.length,
+                href,
+                display: href,
+            });
+        }
+    }
+    const reWww = /(^|[^A-Za-z0-9/])(www\.[^\s<>"']+)/gi;
+    while ((hm = reWww.exec(content)) !== null) {
+        const prefix = hm[1] ?? '';
+        const rawWww = hm[2];
+        const body = stripTrailingUrlPunctuation(rawWww);
+        const href = `https://${body}`;
+        if (body.length > 4 && isAllowedHref(href)) {
+            candidates.push({
+                index: hm.index + prefix.length,
+                length: body.length,
+                href,
+                display: body,
+            });
+        }
+    }
+    if (candidates.length === 0)
+        return null;
+    candidates.sort((a, b) => a.index - b.index);
+    const c = candidates[0];
+    if (isInsideHtmlListOrTable(content, c.index)) {
+        return null;
+    }
+    const { target, rel } = linkTargetRelForHref(c.href, undefined);
+    return {
+        elem: (jsx("a", { href: c.href, target: target, rel: rel, children: c.display })),
+        index: c.index,
+        length: c.length,
+    };
+};
 const injectAnchor = (content) => {
     const regex = /<a\s+([^>]+)>([\s\S]*?)<\/a\s*>/i;
     const matches = content.match(regex);
@@ -281,15 +392,9 @@ const injectAnchor = (content) => {
     if (!href || !isAllowedHref(href)) {
         return null;
     }
-    const opensNewTab = targetRaw.toLowerCase() === '_blank';
-    const target = opensNewTab ? '_blank' : targetRaw || undefined;
-    const rel = target === '_blank' ? 'noopener noreferrer' : undefined;
+    const { target, rel } = linkTargetRelForHref(href, targetRaw || undefined);
     return {
-        elem: (jsx("a", { href: href, target: target, rel: rel, children: runFormattingPipeline(inner, [
-                injectHTMLTags,
-                injectBold,
-                injectNewlines,
-            ]) })),
+        elem: (jsx("a", { href: href, target: target, rel: rel, children: runFormattingPipeline(inner, linkLabelInjectors) })),
         index: matches.index,
         length: matches[0].length,
     };
@@ -297,16 +402,22 @@ const injectAnchor = (content) => {
 const applyFormatting = (text) => runFormattingPipeline(text, [
     injectHeaders,
     injectAnchor,
+    injectMarkdownLink,
     injectHTMLTags,
     injectBullet,
     injectBold,
+    injectItalic,
+    injectAutolinkUrl,
     injectNewlines,
 ]);
 const applyFormattingInline = (text) => runFormattingPipeline(text, [
     injectAnchor,
+    injectMarkdownLink,
     injectHTMLTags,
     injectBold,
+    injectItalic,
+    injectAutolinkUrl,
     injectNewlines,
 ]);
 
-export { applyFormatting, applyFormattingInline, convertMarkdownTableToHTML, injectAnchor, injectBold, injectBullet, injectHeaders, injectNewlines };
+export { applyFormatting, applyFormattingInline, convertMarkdownTableToHTML, injectAnchor, injectBold, injectBullet, injectHeaders, injectItalic, injectNewlines };

package/dist/esm/components/ui/Chat/ChatMessage/ChatMessage.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
+import { InteractiveContent } from '../../InteractiveContent/InteractiveContent.js';
 import { TextShimmer } from '../../TextShimmer/TextShimmer.js';
 import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT } from '../Chat.types.js';
 import { AgentMessageContent } from './AgentMessageContent.js';
@@ -9,7 +10,7 @@ import { UserCsvAttachmentBubble } from './UserCsvAttachmentBubble.js';
 function ChatMessage({ role, text, userCsvAttachment, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage = true, scriptContinue, onScriptContinue, renderMessageChart, }) {
     const isAssistant = role === MessageRole.ASSISTANT;
     const isSystem = role === MessageRole.SYSTEM;
-    return (jsx("div", { className: cn(S.root, S[`role-${role}`]), children: isSystem ? (jsx("div", { className: S.text, children: text === GENERATING_DASHBOARD_SYSTEM_TEXT ? (jsx(TextShimmer, { as: "span", children: text })) : (text) })) : isAssistant ? (jsx(AgentMessageContent, { text: text, onQuickReply: onQuickReply, suppressedQuickReplyKeys: suppressedQuickReplyKeys, quickReplyDisabled: quickReplyDisabled, isLastMessage: isLastMessage, scriptContinue: scriptContinue, onScriptContinue: onScriptContinue, renderMessageChart: renderMessageChart })) : (jsxs("div", { className: S.userColumn, children: [jsx("div", { className: S.text, children: text }), userCsvAttachment ? (jsx(UserCsvAttachmentBubble, { attachment: userCsvAttachment })) : null] })) }));
+    return (jsx("div", { className: cn(S.root, S[`role-${role}`]), children: isSystem ? (jsx("div", { className: S.text, children: text === GENERATING_DASHBOARD_SYSTEM_TEXT ? (jsx(TextShimmer, { as: "span", children: text })) : (text) })) : isAssistant ? (jsx(AgentMessageContent, { text: text, onQuickReply: onQuickReply, suppressedQuickReplyKeys: suppressedQuickReplyKeys, quickReplyDisabled: quickReplyDisabled, isLastMessage: isLastMessage, scriptContinue: scriptContinue, onScriptContinue: onScriptContinue, renderMessageChart: renderMessageChart })) : (jsxs("div", { className: S.userColumn, children: [jsx("div", { className: S.text, children: jsx(InteractiveContent, { text: text }) }), userCsvAttachment ? (jsx(UserCsvAttachmentBubble, { attachment: userCsvAttachment })) : null] })) }));
 }
 
 export { ChatMessage };

package/dist/esm/components/ui/InteractiveContent/InteractiveContent.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".InteractiveContent_root__FHnlY strong{font-weight:600}";
+var css_248z = ".InteractiveContent_root__FHnlY strong{font-weight:600}.InteractiveContent_root__FHnlY em{font-style:italic}.InteractiveContent_root__FHnlY a{color:var(--sb-green-600);text-decoration:underline;text-underline-offset:2px}.InteractiveContent_root__FHnlY a:hover{color:var(--sb-green-700)}.dark .InteractiveContent_root__FHnlY a{color:var(--sb-green-400)}.dark .InteractiveContent_root__FHnlY a:hover{color:var(--sb-green-300)}";
 var S = {"root":"InteractiveContent_root__FHnlY"};
 styleInject(css_248z);
 

package/dist/esm/types/src/components/ui/Chat/ChatMessage/AgentMessageContent.helpers.d.ts

@@ -9,6 +9,12 @@ declare const injectBold: (content: string) => {
     index: number;
     length: number;
 };
+/** `_italic_` (underscore) — avoids clashing with `* ` bullet markers. */
+declare const injectItalic: (content: string) => {
+    elem: import("react/jsx-runtime").JSX.Element;
+    index: number;
+    length: number;
+};
 declare const injectBullet: (content: string) => {
     elem: import("react/jsx-runtime").JSX.Element;
     index: number;
@@ -28,4 +34,4 @@ type Injector = (content: string) => {
 declare const injectAnchor: Injector;
 declare const applyFormatting: (text: string) => React.ReactNode[];
 declare const applyFormattingInline: (text: string) => React.ReactNode[];
-export { injectHeaders, injectAnchor, injectBold, injectBullet, injectNewlines, convertMarkdownTableToHTML, applyFormatting, applyFormattingInline, };
+export { injectHeaders, injectAnchor, injectBold, injectItalic, injectBullet, injectNewlines, convertMarkdownTableToHTML, applyFormatting, applyFormattingInline, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.2.21",
+  "version": "1.2.22",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

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

@@ -77,6 +77,23 @@ const injectBold = (content: string) => {
   };
 };
 
+/** `_italic_` (underscore) — avoids clashing with `* ` bullet markers. */
+const injectItalic = (content: string) => {
+  const matches = content.match(/(?<![A-Za-z0-9])_([^_\n]+?)_(?![A-Za-z0-9])/);
+
+  if (!matches || matches.index === undefined) return null;
+
+  if (isInsideHtmlListOrTable(content, matches.index)) {
+    return null;
+  }
+
+  return {
+    elem: <em>{matches[1]}</em>,
+    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)
@@ -281,6 +298,38 @@ const isAllowedHref = (href: string): boolean => {
   return false;
 };
 
+const normalizeWwwToHttps = (raw: string): string => {
+  const t = raw.trim();
+  if (/^www\./i.test(t)) return `https://${t}`;
+  return t;
+};
+
+/** Strip ASCII closing punctuation often pasted after URLs. */
+const stripTrailingUrlPunctuation = (s: string): string => {
+  let u = s;
+  while (u.length > 0 && /[.,;:!?)}\]]$/u.test(u)) {
+    u = u.slice(0, -1);
+  }
+  return u;
+};
+
+function linkTargetRelForHref(
+  href: string,
+  explicitTarget?: string,
+): { target?: string; rel?: string } {
+  if (explicitTarget) {
+    const t = explicitTarget.trim();
+    if (t.toLowerCase() === '_blank') {
+      return { target: '_blank', rel: 'noopener noreferrer' };
+    }
+    return { target: t || undefined, rel: undefined };
+  }
+  if (/^https?:\/\//i.test(href) || /^mailto:/i.test(href)) {
+    return { target: '_blank', rel: 'noopener noreferrer' };
+  }
+  return { target: undefined, rel: undefined };
+}
+
 type Injector = (
   content: string,
 ) => { elem: React.ReactNode; index: number; length: number } | null;
@@ -325,6 +374,100 @@ const runFormattingPipeline = (
   return result;
 };
 
+const linkLabelInjectors: Injector[] = [
+  injectHTMLTags,
+  injectBold,
+  injectItalic,
+  injectNewlines,
+];
+
+const injectMarkdownLink: Injector = (content: string) => {
+  const matches = content.match(/\[([^\]]+)\]\(([^)]+)\)/);
+
+  if (!matches || matches.index === undefined) return null;
+
+  if (isInsideHtmlListOrTable(content, matches.index)) {
+    return null;
+  }
+
+  const href = normalizeWwwToHttps(matches[2].trim());
+  if (!isAllowedHref(href)) return null;
+
+  const { target, rel } = linkTargetRelForHref(href, undefined);
+  const label = matches[1];
+
+  return {
+    elem: (
+      <a href={href} target={target} rel={rel}>
+        {runFormattingPipeline(label, linkLabelInjectors)}
+      </a>
+    ),
+    index: matches.index,
+    length: matches[0].length,
+  };
+};
+
+const injectAutolinkUrl: Injector = (content: string) => {
+  type Cand = { index: number; length: number; href: string; display: string };
+
+  const candidates: Cand[] = [];
+
+  const reHttp = /https?:\/\/[^\s<>"']+/gi;
+  let hm: RegExpExecArray | null;
+  while ((hm = reHttp.exec(content)) !== null) {
+    const href = stripTrailingUrlPunctuation(hm[0]);
+    if (
+      href.length >= (href.startsWith('https://') ? 8 : 7) &&
+      isAllowedHref(href) &&
+      /^https?:\/\//i.test(href)
+    ) {
+      candidates.push({
+        index: hm.index,
+        length: href.length,
+        href,
+        display: href,
+      });
+    }
+  }
+
+  const reWww = /(^|[^A-Za-z0-9/])(www\.[^\s<>"']+)/gi;
+  while ((hm = reWww.exec(content)) !== null) {
+    const prefix = hm[1] ?? '';
+    const rawWww = hm[2];
+    const body = stripTrailingUrlPunctuation(rawWww);
+    const href = `https://${body}`;
+    if (body.length > 4 && isAllowedHref(href)) {
+      candidates.push({
+        index: hm.index + prefix.length,
+        length: body.length,
+        href,
+        display: body,
+      });
+    }
+  }
+
+  if (candidates.length === 0) return null;
+
+  candidates.sort((a, b) => a.index - b.index);
+  const c = candidates[0]!;
+
+  if (isInsideHtmlListOrTable(content, c.index)) {
+    return null;
+  }
+
+  const { target, rel } = linkTargetRelForHref(c.href, undefined);
+
+  return {
+    elem: (
+      <a href={c.href} target={target} rel={rel}>
+        {c.display}
+      </a>
+    ),
+    index: c.index,
+    length: c.length,
+  };
+};
+
 const injectAnchor: Injector = (content: string) => {
   const regex = /<a\s+([^>]+)>([\s\S]*?)<\/a\s*>/i;
   const matches = content.match(regex);
@@ -356,18 +499,12 @@ const injectAnchor: Injector = (content: string) => {
     return null;
   }
 
-  const opensNewTab = targetRaw.toLowerCase() === '_blank';
-  const target = opensNewTab ? '_blank' : targetRaw || undefined;
-  const rel = target === '_blank' ? 'noopener noreferrer' : undefined;
+  const { target, rel } = linkTargetRelForHref(href, targetRaw || undefined);
 
   return {
     elem: (
       <a href={href} target={target} rel={rel}>
-        {runFormattingPipeline(inner, [
-          injectHTMLTags,
-          injectBold,
-          injectNewlines,
-        ])}
+        {runFormattingPipeline(inner, linkLabelInjectors)}
       </a>
     ),
     index: matches.index!,
@@ -379,17 +516,23 @@ const applyFormatting = (text: string): React.ReactNode[] =>
   runFormattingPipeline(text, [
     injectHeaders,
     injectAnchor,
+    injectMarkdownLink,
     injectHTMLTags,
     injectBullet,
     injectBold,
+    injectItalic,
+    injectAutolinkUrl,
     injectNewlines,
   ]);
 
 const applyFormattingInline = (text: string): React.ReactNode[] =>
   runFormattingPipeline(text, [
     injectAnchor,
+    injectMarkdownLink,
     injectHTMLTags,
     injectBold,
+    injectItalic,
+    injectAutolinkUrl,
     injectNewlines,
   ]);
 
@@ -397,6 +540,7 @@ export {
   injectHeaders,
   injectAnchor,
   injectBold,
+  injectItalic,
   injectBullet,
   injectNewlines,
   convertMarkdownTableToHTML,

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

@@ -1,5 +1,7 @@
 import cn from 'classnames';
 
+import { InteractiveContent } from '#uilib/components/ui/InteractiveContent';
+
 import { TextShimmer } from '../../TextShimmer';
 import {
   type ChatMessageProps,
@@ -48,7 +50,9 @@ export function ChatMessage({
         />
       ) : (
         <div className={S.userColumn}>
-          <div className={S.text}>{text}</div>
+          <div className={S.text}>
+            <InteractiveContent text={text} />
+          </div>
           {userCsvAttachment ? (
             <UserCsvAttachmentBubble attachment={userCsvAttachment} />
           ) : null}

package/src/components/ui/InteractiveContent/InteractiveContent.styl

@@ -1,3 +1,20 @@
 .root
   strong
     font-weight 600
+
+  em
+    font-style italic
+
+  a
+    color var(--sb-green-600)
+    text-decoration underline
+    text-underline-offset 2px
+
+    &:hover
+      color var(--sb-green-700)
+
+    :global(.dark) &
+      color var(--sb-green-400)
+
+      &:hover
+        color var(--sb-green-300)