@sybilion/uilib 1.2.20 → 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/Chat/ChatSheet/useChatPanelChromeModel.js

@@ -3,7 +3,7 @@ import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT } from '../Chat.types.js';
 import { isGraphIntakeAssistantStepComplete, matchUserTextToQuickReply, parseScriptLine, textHasQuickReplyMarkers, branchKeysUsedFromChatHistory, branchKeysUsedByUserMessages, extractQuickReplyLabelKeyPairsFromText, entryBranchKeyBeforeLastAssistant, isPresetScriptGraph, branchesFromPresetScriptGraph } from '../ChatMessage/presetScript.js';
 import { usedPresetIdsFromMessages, formatChatTranscript } from '../chat-preset-utils.js';
-import { useChatsForScopeId, useChat, isChatEmpty } from '../../../../contexts/chat-context.js';
+import { useChatsForScopeId, useChat, useChatOutboundPending, isChatEmpty } from '../../../../contexts/chat-context.js';
 import useEvent from '../../../../hooks/useEvent.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
 import { useQueryParams } from '../../../../hooks/useQueryParams.js';
@@ -25,11 +25,13 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
     const effectiveScopeId = scopeId ?? NO_SCOPE_FALLBACK;
     const isMobile = useIsMobile();
     const { chatPanelContainer, isOpen: sidebarNavOpen, setOpen: setSidebarNavOpen, chatWidthPx, setChatWidthPx, getShellWidth, setChatPanelOpen, } = useSidebar();
+    const [localUiBusy, setLocalUiBusy] = useState(false);
     const { chats, currentChatId, setCurrentChatId, newChat, sendMessage, addMessage, removeMessageById, } = useChatsForScopeId(effectiveScopeId);
     const chat = useChat(effectiveScopeId, currentChatId);
+    const isOutboundPending = useChatOutboundPending(effectiveScopeId, currentChatId);
+    const isLoading = isOutboundPending || localUiBusy;
     const { searchParams, addSearchParams, removeSearchParams, mutateSearchParams, } = useQueryParams();
     const chatOpen = searchParams.has(CHAT_QUERY_PARAM);
-    const [isLoading, setIsLoading] = useState(false);
     const [isOpen, setIsOpen] = useState(false);
     /** `?prompt=` deep link text for one-shot composer pre-fill (see ChatPrompt). */
     const [promptLinkPrefill, setPromptLinkPrefill] = useState(null);
@@ -215,7 +217,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             if (quickReplyLockRef.current)
                 return;
             quickReplyLockRef.current = true;
-            setIsLoading(true);
+            setLocalUiBusy(true);
             setUsedScriptBranchKeysByChat(prev => ({
                 ...prev,
                 [chatId]: [...new Set([...(prev[chatId] || []), branchKey])],
@@ -266,7 +268,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
                     logger.error('Error resolving preset quick reply:', error);
                 }
                 finally {
-                    setIsLoading(false);
+                    setLocalUiBusy(false);
                     quickReplyLockRef.current = false;
                 }
             })();
@@ -274,7 +276,6 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         }
         endLocalDemoFlow(chatId);
         void (async () => {
-            setIsLoading(true);
             try {
                 await sendMessage(displayLabel);
                 onMessage?.(displayLabel);
@@ -282,9 +283,6 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             catch (error) {
                 logger.error('Error sending chat message:', error);
             }
-            finally {
-                setIsLoading(false);
-            }
         })();
     }, [
         currentChatId,
@@ -337,7 +335,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
                 if (quickReplyLockRef.current)
                     return;
                 quickReplyLockRef.current = true;
-                setIsLoading(true);
+                setLocalUiBusy(true);
                 const newAnswers = {
                     ...intake.answers,
                     [intake.scriptStepId]: message,
@@ -381,7 +379,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
                         logger.error('Error advancing freeform preset script:', e);
                     }
                     finally {
-                        setIsLoading(false);
+                        setLocalUiBusy(false);
                         quickReplyLockRef.current = false;
                     }
                 })();
@@ -401,7 +399,6 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
                 }
             }
         }
-        setIsLoading(true);
         try {
             if (chatId)
                 endLocalDemoFlow(chatId);
@@ -411,9 +408,6 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         catch (error) {
             logger.error('Error sending chat message:', error);
         }
-        finally {
-            setIsLoading(false);
-        }
     }, [
         currentChatId,
         chat?.messages,
@@ -443,7 +437,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             await handlePromptSubmit(preset.text);
             return;
         }
-        setIsLoading(true);
+        setLocalUiBusy(true);
         try {
             if (!currentChatId)
                 return;
@@ -518,7 +512,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             logger.error('Error sending chat message:', error);
         }
         finally {
-            setIsLoading(false);
+            setLocalUiBusy(false);
         }
     };
     const activeScript = currentChatId
@@ -550,7 +544,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             return;
         const chatId = currentChatId;
         scriptAdvanceLockRef.current = true;
-        setIsLoading(true);
+        setLocalUiBusy(true);
         addMessage(chatId, MessageRole.USER, step.buttonLabel);
         void (async () => {
             try {
@@ -593,7 +587,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
                 logger.error('Error advancing preset script:', error);
             }
             finally {
-                setIsLoading(false);
+                setLocalUiBusy(false);
                 scriptAdvanceLockRef.current = false;
             }
         })();

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/contexts/chat-context.js

@@ -7,6 +7,10 @@ import { LS } from '@homecode/ui';
 const CHATS_PREFIX = 'chats-';
 const CHAT_SCOPE_IDS_REGISTRY_KEY = 'chat-scope-ids';
 const ChatContext = createContext(undefined);
+/** Stable composite key; avoids collisions if `scopeId` contains `:`. */
+function outboundPendingKey(scopeId, chatSessionId) {
+    return `${scopeId}\0${chatSessionId}`;
+}
 function getCurrentChatIdKey(scopeId) {
     return `chat-current-id-${scopeId}`;
 }
@@ -86,6 +90,26 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
             return {};
         return loadChatsFromLS(userSwitchKey).currentChatId;
     });
+    const [outboundPendingByKey, setOutboundPendingByKey] = useState({});
+    const beginOutboundPending = useCallback((scopeId, chatSessionId) => {
+        const key = outboundPendingKey(scopeId, chatSessionId);
+        setOutboundPendingByKey(prev => ({
+            ...prev,
+            [key]: (prev[key] ?? 0) + 1,
+        }));
+    }, []);
+    const endOutboundPending = useCallback((scopeId, chatSessionId) => {
+        const key = outboundPendingKey(scopeId, chatSessionId);
+        setOutboundPendingByKey(prev => {
+            const next = { ...prev };
+            const n = (next[key] ?? 0) - 1;
+            if (n <= 0)
+                delete next[key];
+            else
+                next[key] = n;
+            return next;
+        });
+    }, []);
     const getChatsForScopeId = useCallback((scopeId) => chats[scopeId] ?? [], [chats]);
     const getCurrentChatId = useCallback((scopeId) => {
         const v = currentChatId[scopeId];
@@ -211,12 +235,14 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
                 userCsvAttachment: message.userCsvAttachment,
             });
         }
+        const pendingChatSessionId = targetChatId;
+        beginOutboundPending(scopeId, pendingChatSessionId);
         try {
-            const data = await sendChatMessageFn(apiPayload, targetChatId);
-            if (data.session_id && data.session_id !== targetChatId) {
+            const data = await sendChatMessageFn(apiPayload, pendingChatSessionId);
+            if (data.session_id && data.session_id !== pendingChatSessionId) {
                 setChats(prev => {
                     const scopeChats = prev[scopeId] ?? [];
-                    const updatedChats = scopeChats.map(chat => chat.session_id === targetChatId
+                    const updatedChats = scopeChats.map(chat => chat.session_id === pendingChatSessionId
                         ? { ...chat, session_id: data.session_id }
                         : chat);
                     const chatsKey = getChatsKey(scopeId);
@@ -225,21 +251,32 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
                 });
                 setCurrentChatId(scopeId, data.session_id);
             }
-            addMessage(scopeId, data.session_id ? data.session_id : targetChatId, MessageRole.ASSISTANT, data.response);
+            addMessage(scopeId, data.session_id ? data.session_id : pendingChatSessionId, MessageRole.ASSISTANT, data.response);
             return data.response;
         }
         catch (error) {
             const errorMessage = error instanceof Error
                 ? error.message
                 : 'Sorry, I encountered an error processing your message. Please try again.';
-            addMessage(scopeId, targetChatId, MessageRole.ASSISTANT, errorMessage);
+            addMessage(scopeId, pendingChatSessionId, MessageRole.ASSISTANT, errorMessage);
             throw error;
         }
-    }, [addMessage, getCurrentChatId, sendChatMessageFn, setCurrentChatId]);
+        finally {
+            endOutboundPending(scopeId, pendingChatSessionId);
+        }
+    }, [
+        addMessage,
+        beginOutboundPending,
+        endOutboundPending,
+        getCurrentChatId,
+        sendChatMessageFn,
+        setCurrentChatId,
+    ]);
     useEffect(() => {
         if (userSwitchKey === null) {
             setChats({});
             setCurrentChatIdState({});
+            setOutboundPendingByKey({});
             return;
         }
         const loaded = loadChatsFromLS(userSwitchKey);
@@ -263,6 +300,7 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
             getChatsForScopeId,
             getCurrentChatId,
             deleteChat,
+            outboundPendingByKey,
         }, children: children }));
 }
 const isChatEmpty = (chat) => chat?.messages.length === 0;
@@ -282,15 +320,26 @@ function useChat(scopeId, chatId) {
             null);
     }, [scopeId, chatId, getChatsForScopeId]);
 }
+function useChatOutboundPending(scopeId, chatSessionId) {
+    const { outboundPendingByKey } = useChats();
+    return useMemo(() => {
+        if (!scopeId || !chatSessionId)
+            return false;
+        const key = outboundPendingKey(scopeId, chatSessionId);
+        return (outboundPendingByKey[key] ?? 0) > 0;
+    }, [scopeId, chatSessionId, outboundPendingByKey]);
+}
 function useChatsForScopeId(scopeId) {
     const { getChatsForScopeId, getCurrentChatId, setCurrentChatId, newChat, addMessage, removeMessageById, sendMessage, deleteChat, } = useChats();
     const chats = getChatsForScopeId(scopeId);
     const currentChatId = getCurrentChatId(scopeId);
     const currentChat = useChat(scopeId, currentChatId ?? undefined);
+    const isOutboundPending = useChatOutboundPending(scopeId, currentChatId);
     return {
         chats,
         currentChat,
         currentChatId,
+        isOutboundPending,
         setCurrentChatId: (targetId) => setCurrentChatId(scopeId, targetId),
         newChat: () => newChat(scopeId),
         addMessage: (chatId, role, text, options) => addMessage(scopeId, chatId, role, text, options),
@@ -309,4 +358,4 @@ function useCurrentChat(scopeId) {
     return useChat(scopeId, chatId ?? undefined);
 }
 
-export { ChatContext, ChatProvider, isChatEmpty, useChat, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat };
+export { ChatContext, ChatProvider, isChatEmpty, outboundPendingKey, useChat, useChatOutboundPending, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat };

package/dist/esm/index.js

@@ -4,7 +4,7 @@ export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme.js';
 export { SybilionAuthProvider, createSybilionApiFetch, getSybilionApiOriginFromSdk, sybilionApiFetch, useSybilionApiFetch, useSybilionAuth } from './sybilion-auth/SybilionAuthProvider.js';
 export { SYBILION_AUTH_LOGIN_PATH, normalizeApiBaseUrl } from './sybilion-auth/authPaths.js';
 export { exchangeAuth0AccessTokenForSybilionJwt } from './sybilion-auth/exchangeSybilionToken.js';
-export { ChatContext, ChatProvider, isChatEmpty, useChat, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat } from './contexts/chat-context.js';
+export { ChatContext, ChatProvider, isChatEmpty, outboundPendingKey, useChat, useChatOutboundPending, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat } from './contexts/chat-context.js';
 export { AnalysesSelector } from './components/ui/AnalysesSelector/AnalysesSelector.js';
 export { AnalysisLineIcon } from './components/ui/AnalysisLineIcon/AnalysisLineIcon.js';
 export { AppHeaderHost, AppHeaderPortal } from './components/ui/AppHeader/AppHeader.js';

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/dist/esm/types/src/contexts/chat-context.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { type Chat, type ChatSendMessagePayload, type UserCsvAttachment, MessageRole } from '#uilib/components/ui/Chat/Chat.types';
+import { type Chat, type ChatSendMessagePayload, MessageRole, type UserCsvAttachment } from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatResponse } from '#uilib/types/chat-api.types';
 export type SendChatMessageFn = (message: string, targetChatId: string) => Promise<ChatResponse>;
-export type { ChatSendMessagePayload, UserCsvAttachment } from '#uilib/components/ui/Chat/Chat.types';
+export type { ChatSendMessagePayload, UserCsvAttachment, } from '#uilib/components/ui/Chat/Chat.types';
 export type AddChatMessageOptions = {
     userCsvAttachment?: UserCsvAttachment;
 };
@@ -16,8 +16,15 @@ export interface ChatContextType {
     getChatsForScopeId: (scopeId: string) => Chat[];
     getCurrentChatId: (scopeId: string) => string | null;
     deleteChat: (scopeId: string, sessionId: string) => void;
+    /**
+     * Ref-count of in-flight `sendChatMessage` requests keyed by
+     * `outboundPendingKey(scopeId, chatSessionId)` (session id at send start).
+     */
+    outboundPendingByKey: Readonly<Record<string, number>>;
 }
 declare const ChatContext: import("react").Context<ChatContextType>;
+/** Stable composite key; avoids collisions if `scopeId` contains `:`. */
+export declare function outboundPendingKey(scopeId: string, chatSessionId: string): string;
 export interface ChatProviderProps {
     children: ReactNode;
     /** When null, chat state is cleared (logged out). When set, only LS rows for scopes starting with `${userId}-` are loaded. */
@@ -28,10 +35,12 @@ export declare function ChatProvider({ children, userSwitchKey, sendChatMessage:
 export declare const isChatEmpty: (chat: Chat | null) => boolean;
 export declare function useChats(): ChatContextType;
 export declare function useChat(scopeId: string | undefined, chatId: string | undefined): Chat | null;
+export declare function useChatOutboundPending(scopeId: string | undefined | null, chatSessionId: string | null | undefined): boolean;
 export declare function useChatsForScopeId(scopeId: string): {
     chats: Chat[];
     currentChat: Chat;
     currentChatId: string;
+    isOutboundPending: boolean;
     setCurrentChatId: (targetId: string) => void;
     newChat: () => string;
     addMessage: (chatId: string, role: MessageRole, text: string, options?: AddChatMessageOptions) => string;
@@ -44,6 +53,7 @@ export declare function useChatsForDataset(scopeId: string): {
     chats: Chat[];
     currentChat: Chat;
     currentChatId: string;
+    isOutboundPending: boolean;
     setCurrentChatId: (targetId: string) => void;
     newChat: () => string;
     addMessage: (chatId: string, role: MessageRole, text: string, options?: AddChatMessageOptions) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.2.20",
+  "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/Chat/ChatSheet/useChatPanelChromeModel.tsx

@@ -26,6 +26,7 @@ import {
 import {
   isChatEmpty,
   useChat,
+  useChatOutboundPending,
   useChatsForScopeId,
 } from '#uilib/contexts/chat-context';
 import useEvent from '#uilib/hooks/useEvent';
@@ -112,6 +113,7 @@ export function useChatPanelChromeModel({
     getShellWidth,
     setChatPanelOpen,
   } = useSidebar();
+  const [localUiBusy, setLocalUiBusy] = useState(false);
   const {
     chats,
     currentChatId,
@@ -122,6 +124,11 @@ export function useChatPanelChromeModel({
     removeMessageById,
   } = useChatsForScopeId(effectiveScopeId);
   const chat = useChat(effectiveScopeId, currentChatId);
+  const isOutboundPending = useChatOutboundPending(
+    effectiveScopeId,
+    currentChatId,
+  );
+  const isLoading = isOutboundPending || localUiBusy;
 
   const {
     searchParams,
@@ -130,7 +137,6 @@ export function useChatPanelChromeModel({
     mutateSearchParams,
   } = useQueryParams();
   const chatOpen = searchParams.has(CHAT_QUERY_PARAM);
-  const [isLoading, setIsLoading] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   /** `?prompt=` deep link text for one-shot composer pre-fill (see ChatPrompt). */
   const [promptLinkPrefill, setPromptLinkPrefill] = useState<string | null>(
@@ -355,7 +361,7 @@ export function useChatPanelChromeModel({
       ) {
         if (quickReplyLockRef.current) return;
         quickReplyLockRef.current = true;
-        setIsLoading(true);
+        setLocalUiBusy(true);
         setUsedScriptBranchKeysByChat(prev => ({
           ...prev,
           [chatId]: [...new Set([...(prev[chatId] || []), branchKey])],
@@ -413,7 +419,7 @@ export function useChatPanelChromeModel({
           } catch (error) {
             logger.error('Error resolving preset quick reply:', error);
           } finally {
-            setIsLoading(false);
+            setLocalUiBusy(false);
             quickReplyLockRef.current = false;
           }
         })();
@@ -422,14 +428,11 @@ export function useChatPanelChromeModel({
 
       endLocalDemoFlow(chatId);
       void (async () => {
-        setIsLoading(true);
         try {
           await sendMessage(displayLabel);
           onMessage?.(displayLabel);
         } catch (error) {
           logger.error('Error sending chat message:', error);
-        } finally {
-          setIsLoading(false);
         }
       })();
     },
@@ -499,7 +502,7 @@ export function useChatPanelChromeModel({
         ) {
           if (quickReplyLockRef.current) return;
           quickReplyLockRef.current = true;
-          setIsLoading(true);
+          setLocalUiBusy(true);
           const newAnswers = {
             ...intake.answers,
             [intake.scriptStepId]: message,
@@ -544,7 +547,7 @@ export function useChatPanelChromeModel({
             } catch (e) {
               logger.error('Error advancing freeform preset script:', e);
             } finally {
-              setIsLoading(false);
+              setLocalUiBusy(false);
               quickReplyLockRef.current = false;
             }
           })();
@@ -569,15 +572,12 @@ export function useChatPanelChromeModel({
         }
       }
 
-      setIsLoading(true);
       try {
         if (chatId) endLocalDemoFlow(chatId);
         await sendMessage(message);
         onMessage?.(message);
       } catch (error) {
         logger.error('Error sending chat message:', error);
-      } finally {
-        setIsLoading(false);
       }
     },
     [
@@ -613,7 +613,7 @@ export function useChatPanelChromeModel({
       return;
     }
 
-    setIsLoading(true);
+    setLocalUiBusy(true);
     try {
       if (!currentChatId) return;
       setScriptCompleteByChatId(prev => {
@@ -683,7 +683,7 @@ export function useChatPanelChromeModel({
     } catch (error) {
       logger.error('Error sending chat message:', error);
     } finally {
-      setIsLoading(false);
+      setLocalUiBusy(false);
     }
   };
 
@@ -717,7 +717,7 @@ export function useChatPanelChromeModel({
 
     const chatId = currentChatId;
     scriptAdvanceLockRef.current = true;
-    setIsLoading(true);
+    setLocalUiBusy(true);
     addMessage(chatId, MessageRole.USER, step.buttonLabel);
 
     void (async () => {
@@ -761,7 +761,7 @@ export function useChatPanelChromeModel({
       } catch (error) {
         logger.error('Error advancing preset script:', error);
       } finally {
-        setIsLoading(false);
+        setLocalUiBusy(false);
         scriptAdvanceLockRef.current = false;
       }
     })();

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)

package/src/contexts/chat-context.tsx

@@ -12,8 +12,8 @@ import {
   type Chat,
   type ChatSendMessagePayload,
   type Message,
-  type UserCsvAttachment,
   MessageRole,
+  type UserCsvAttachment,
 } from '#uilib/components/ui/Chat/Chat.types';
 import { stripJsonDashboardFences } from '#uilib/lib/dashboard-spec/stripJsonDashboardFences';
 import type { ChatResponse } from '#uilib/types/chat-api.types';
@@ -24,7 +24,10 @@ export type SendChatMessageFn = (
   targetChatId: string,
 ) => Promise<ChatResponse>;
 
-export type { ChatSendMessagePayload, UserCsvAttachment } from '#uilib/components/ui/Chat/Chat.types';
+export type {
+  ChatSendMessagePayload,
+  UserCsvAttachment,
+} from '#uilib/components/ui/Chat/Chat.types';
 
 const CHATS_PREFIX = 'chats-';
 const CHAT_SCOPE_IDS_REGISTRY_KEY = 'chat-scope-ids';
@@ -57,10 +60,20 @@ export interface ChatContextType {
   getChatsForScopeId: (scopeId: string) => Chat[];
   getCurrentChatId: (scopeId: string) => string | null;
   deleteChat: (scopeId: string, sessionId: string) => void;
+  /**
+   * Ref-count of in-flight `sendChatMessage` requests keyed by
+   * `outboundPendingKey(scopeId, chatSessionId)` (session id at send start).
+   */
+  outboundPendingByKey: Readonly<Record<string, number>>;
 }
 
 const ChatContext = createContext<ChatContextType | undefined>(undefined);
 
+/** Stable composite key; avoids collisions if `scopeId` contains `:`. */
+export function outboundPendingKey(scopeId: string, chatSessionId: string) {
+  return `${scopeId}\0${chatSessionId}`;
+}
+
 function getCurrentChatIdKey(scopeId: string) {
   return `chat-current-id-${scopeId}`;
 }
@@ -158,6 +171,35 @@ export function ChatProvider({
     return loadChatsFromLS(userSwitchKey).currentChatId;
   });
 
+  const [outboundPendingByKey, setOutboundPendingByKey] = useState<
+    Record<string, number>
+  >({});
+
+  const beginOutboundPending = useCallback(
+    (scopeId: string, chatSessionId: string) => {
+      const key = outboundPendingKey(scopeId, chatSessionId);
+      setOutboundPendingByKey(prev => ({
+        ...prev,
+        [key]: (prev[key] ?? 0) + 1,
+      }));
+    },
+    [],
+  );
+
+  const endOutboundPending = useCallback(
+    (scopeId: string, chatSessionId: string) => {
+      const key = outboundPendingKey(scopeId, chatSessionId);
+      setOutboundPendingByKey(prev => {
+        const next = { ...prev };
+        const n = (next[key] ?? 0) - 1;
+        if (n <= 0) delete next[key];
+        else next[key] = n;
+        return next;
+      });
+    },
+    [],
+  );
+
   const getChatsForScopeId = useCallback(
     (scopeId: string): Chat[] => chats[scopeId] ?? [],
     [chats],
@@ -324,19 +366,27 @@ export function ChatProvider({
       if (typeof message === 'string') {
         addMessage(scopeId, targetChatId, MessageRole.USER, message);
       } else {
-        addMessage(scopeId, targetChatId, MessageRole.USER, message.displayText, {
-          userCsvAttachment: message.userCsvAttachment,
-        });
+        addMessage(
+          scopeId,
+          targetChatId,
+          MessageRole.USER,
+          message.displayText,
+          {
+            userCsvAttachment: message.userCsvAttachment,
+          },
+        );
       }
 
+      const pendingChatSessionId = targetChatId;
+      beginOutboundPending(scopeId, pendingChatSessionId);
       try {
-        const data = await sendChatMessageFn(apiPayload, targetChatId);
+        const data = await sendChatMessageFn(apiPayload, pendingChatSessionId);
 
-        if (data.session_id && data.session_id !== targetChatId) {
+        if (data.session_id && data.session_id !== pendingChatSessionId) {
           setChats(prev => {
             const scopeChats = prev[scopeId] ?? [];
             const updatedChats = scopeChats.map(chat =>
-              chat.session_id === targetChatId
+              chat.session_id === pendingChatSessionId
                 ? { ...chat, session_id: data.session_id! }
                 : chat,
             );
@@ -351,7 +401,7 @@ export function ChatProvider({
 
         addMessage(
           scopeId,
-          data.session_id ? data.session_id : targetChatId,
+          data.session_id ? data.session_id : pendingChatSessionId,
           MessageRole.ASSISTANT,
           data.response,
         );
@@ -363,17 +413,32 @@ export function ChatProvider({
             ? error.message
             : 'Sorry, I encountered an error processing your message. Please try again.';
 
-        addMessage(scopeId, targetChatId, MessageRole.ASSISTANT, errorMessage);
+        addMessage(
+          scopeId,
+          pendingChatSessionId,
+          MessageRole.ASSISTANT,
+          errorMessage,
+        );
         throw error;
+      } finally {
+        endOutboundPending(scopeId, pendingChatSessionId);
       }
     },
-    [addMessage, getCurrentChatId, sendChatMessageFn, setCurrentChatId],
+    [
+      addMessage,
+      beginOutboundPending,
+      endOutboundPending,
+      getCurrentChatId,
+      sendChatMessageFn,
+      setCurrentChatId,
+    ],
   );
 
   useEffect(() => {
     if (userSwitchKey === null) {
       setChats({});
       setCurrentChatIdState({});
+      setOutboundPendingByKey({});
       return;
     }
 
@@ -404,6 +469,7 @@ export function ChatProvider({
         getChatsForScopeId,
         getCurrentChatId,
         deleteChat,
+        outboundPendingByKey,
       }}
     >
       {children}
@@ -436,6 +502,18 @@ export function useChat(
   }, [scopeId, chatId, getChatsForScopeId]);
 }
 
+export function useChatOutboundPending(
+  scopeId: string | undefined | null,
+  chatSessionId: string | null | undefined,
+): boolean {
+  const { outboundPendingByKey } = useChats();
+  return useMemo(() => {
+    if (!scopeId || !chatSessionId) return false;
+    const key = outboundPendingKey(scopeId, chatSessionId);
+    return (outboundPendingByKey[key] ?? 0) > 0;
+  }, [scopeId, chatSessionId, outboundPendingByKey]);
+}
+
 export function useChatsForScopeId(scopeId: string) {
   const {
     getChatsForScopeId,
@@ -450,11 +528,13 @@ export function useChatsForScopeId(scopeId: string) {
   const chats = getChatsForScopeId(scopeId);
   const currentChatId = getCurrentChatId(scopeId);
   const currentChat = useChat(scopeId, currentChatId ?? undefined);
+  const isOutboundPending = useChatOutboundPending(scopeId, currentChatId);
 
   return {
     chats,
     currentChat,
     currentChatId,
+    isOutboundPending,
     setCurrentChatId: (targetId: string) => setCurrentChatId(scopeId, targetId),
     newChat: () => newChat(scopeId),
     addMessage: (