@agentiffai/design 1.3.11 → 1.3.13

package/dist/{Window-BcTRumpc.d.cts → Window-pJb3Z5_P.d.cts}

@@ -332,6 +332,8 @@ interface UserMessageProps {
     isStreaming?: boolean;
     /** Action buttons to display below the message */
     actions?: ActionButtonType[];
+    /** Whether to enable markdown rendering */
+    enableMarkdown?: boolean;
 }
 /**
  * UserMessage component displays a user's message in a chat interface.
@@ -345,7 +347,7 @@ interface UserMessageProps {
  * - Action buttons support
  * - Avatar display
  */
-declare const UserMessage: ({ content, timestamp, className, avatarUrl, username, isStreaming, actions, }: UserMessageProps) => react_jsx_runtime.JSX.Element;
+declare const UserMessage: ({ content, timestamp, className, avatarUrl, username, isStreaming, actions, enableMarkdown, }: UserMessageProps) => react_jsx_runtime.JSX.Element;
 
 interface ResponseProps {
     /** Loading state - shows animated dots */
@@ -407,6 +409,7 @@ declare const StreamErrorMessage: React__default.FC<StreamErrorMessageProps>;
  * StreamingText Component
  *
  * Provides typewriter animation for streaming AI responses.
+ * Supports basic markdown rendering (bold, italic, code, links).
  *
  * @see specs/015-restyle-ai-chat/spec.md:FR-031, FR-042
  * @see UI_COMPONENTS_SSE.md:548-595

package/dist/{Window-BcTRumpc.d.ts → Window-pJb3Z5_P.d.ts}

@@ -332,6 +332,8 @@ interface UserMessageProps {
     isStreaming?: boolean;
     /** Action buttons to display below the message */
     actions?: ActionButtonType[];
+    /** Whether to enable markdown rendering */
+    enableMarkdown?: boolean;
 }
 /**
  * UserMessage component displays a user's message in a chat interface.
@@ -345,7 +347,7 @@ interface UserMessageProps {
  * - Action buttons support
  * - Avatar display
  */
-declare const UserMessage: ({ content, timestamp, className, avatarUrl, username, isStreaming, actions, }: UserMessageProps) => react_jsx_runtime.JSX.Element;
+declare const UserMessage: ({ content, timestamp, className, avatarUrl, username, isStreaming, actions, enableMarkdown, }: UserMessageProps) => react_jsx_runtime.JSX.Element;
 
 interface ResponseProps {
     /** Loading state - shows animated dots */
@@ -407,6 +409,7 @@ declare const StreamErrorMessage: React__default.FC<StreamErrorMessageProps>;
  * StreamingText Component
  *
  * Provides typewriter animation for streaming AI responses.
+ * Supports basic markdown rendering (bold, italic, code, links).
  *
  * @see specs/015-restyle-ai-chat/spec.md:FR-031, FR-042
  * @see UI_COMPONENTS_SSE.md:548-595

package/dist/copilotkit/index.cjs

@@ -110,7 +110,9 @@ var tokens = {
     fontWeight: {
       regular: 400,
       medium: 500,
-      semibold: 600},
+      semibold: 600,
+      bold: 700
+    },
     lineHeight: {
       tight: 1.25,
       normal: 1.5}
@@ -828,6 +830,59 @@ function AssistantThinking({
   );
 }
 AssistantThinking.displayName = "AssistantThinking";
+function parseMarkdown(text) {
+  if (!text) return [];
+  const elements = [];
+  let key = 0;
+  const paragraphs = text.split(/\n\n+/);
+  paragraphs.forEach((paragraph, pIndex) => {
+    if (pIndex > 0) {
+      elements.push(/* @__PURE__ */ jsxRuntime.jsx("br", {}, key++));
+      elements.push(/* @__PURE__ */ jsxRuntime.jsx("br", {}, key++));
+    }
+    const lines = paragraph.split("\n");
+    lines.forEach((line, lineIndex) => {
+      if (lineIndex > 0) {
+        elements.push(/* @__PURE__ */ jsxRuntime.jsx("br", {}, key++));
+      }
+      const parsed = parseInlineMarkdown(line, key);
+      elements.push(...parsed.elements);
+      key = parsed.nextKey;
+    });
+  });
+  return elements;
+}
+function parseInlineMarkdown(text, startKey) {
+  const elements = [];
+  let key = startKey;
+  const inlineRegex = /(\*\*(.+?)\*\*)|(\*(.+?)\*)|(`([^`]+)`)|(\[([^\]]+)\]\(([^)]+)\))/g;
+  let lastIndex = 0;
+  let match;
+  while ((match = inlineRegex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      elements.push(text.slice(lastIndex, match.index));
+    }
+    if (match[1]) {
+      elements.push(/* @__PURE__ */ jsxRuntime.jsx("strong", { children: match[2] }, key++));
+    } else if (match[3]) {
+      elements.push(/* @__PURE__ */ jsxRuntime.jsx("em", { children: match[4] }, key++));
+    } else if (match[5]) {
+      elements.push(/* @__PURE__ */ jsxRuntime.jsx("code", { children: match[6] }, key++));
+    } else if (match[7]) {
+      elements.push(
+        /* @__PURE__ */ jsxRuntime.jsx("a", { href: match[9], target: "_blank", rel: "noopener noreferrer", children: match[8] }, key++)
+      );
+    }
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    elements.push(text.slice(lastIndex));
+  }
+  if (elements.length === 0) {
+    elements.push(text);
+  }
+  return { elements, nextKey: key };
+}
 var Container3 = styled8__default.default.div`
   font-family: ${(props) => props.$variant === "code" ? tokens.typography.fontFamily.monospace : tokens.typography.fontFamily.primary};
   white-space: pre-wrap;
@@ -836,6 +891,33 @@ var Container3 = styled8__default.default.div`
   /* Performance optimizations for streaming text */
   text-rendering: optimizeSpeed;
   contain: content;
+
+  /* Markdown element styles */
+  strong {
+    font-weight: ${tokens.typography.fontWeight.bold};
+    color: ${tokens.colors.text.primary};
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  code {
+    font-family: ${tokens.typography.fontFamily.monospace};
+    background: ${tokens.colors.surface.overlay};
+    padding: 0.15em 0.4em;
+    border-radius: ${tokens.borderRadius.sm};
+    font-size: 0.9em;
+  }
+
+  a {
+    color: ${tokens.colors.primary};
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 `;
 var Cursor = styled8__default.default.span`
   display: inline-block;
@@ -880,8 +962,14 @@ var StreamingTextBase = ({
     wasStreamingRef.current = isStreaming;
   }, [isStreaming, onStreamComplete]);
   const showCursor = isStreaming && cursor;
+  const renderedContent = react.useMemo(() => {
+    if (variant === "markdown") {
+      return parseMarkdown(content);
+    }
+    return content;
+  }, [content, variant]);
   return /* @__PURE__ */ jsxRuntime.jsxs(Container3, { $variant: variant, className, children: [
-    content,
+    renderedContent,
     showCursor && /* @__PURE__ */ jsxRuntime.jsx(Cursor, {})
   ] });
 };
@@ -1313,20 +1401,30 @@ var AssistantMessageAdapterBase = ({
   // markdownTagRenderers,
   // ImageRenderer,
 }) => {
-  if (isLoading || isGenerating && !message?.content) {
-    return /* @__PURE__ */ jsxRuntime.jsx(AssistantThinking, { message: "Thinking..." });
-  }
+  const lastGenerativeUIRef = react.useRef(null);
   const rawContent = message?.content || "";
   const content = stripToolCallMarkers(rawContent);
   let generativeUIOutput = null;
   const msgWithUI = message;
   if (msgWithUI && typeof msgWithUI.generativeUI === "function") {
     try {
-      generativeUIOutput = msgWithUI.generativeUI();
+      const newOutput = msgWithUI.generativeUI();
+      if (newOutput !== null && newOutput !== void 0) {
+        generativeUIOutput = newOutput;
+        lastGenerativeUIRef.current = newOutput;
+      }
     } catch (e) {
       console.warn("[AssistantMessageAdapter] Error rendering generativeUI:", e);
     }
   }
+  if (!generativeUIOutput && lastGenerativeUIRef.current) {
+    generativeUIOutput = lastGenerativeUIRef.current;
+  }
+  const hasGenerativeUI = generativeUIOutput !== null;
+  const showThinking = (isLoading || isGenerating && !content) && !hasGenerativeUI;
+  if (showThinking) {
+    return /* @__PURE__ */ jsxRuntime.jsx(AssistantThinking, { message: "Thinking..." });
+  }
   const attachments = [];
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     generativeUIOutput && /* @__PURE__ */ jsxRuntime.jsx(GenerativeUIContainer, { children: generativeUIOutput }),
@@ -1345,35 +1443,39 @@ var AssistantMessageAdapterBase = ({
 };
 var AssistantMessageAdapter = react.memo(AssistantMessageAdapterBase);
 AssistantMessageAdapter.displayName = "AssistantMessageAdapter";
-function createAssistantMessageAdapter(ThinkingIndicator, ToolCallsComponent) {
+function createAssistantMessageAdapter(ThinkingIndicator, _ToolCallsComponent) {
   const CustomAssistantMessageAdapter = ({
     message,
     isLoading,
-    isGenerating,
-    isCurrentMessage
+    isGenerating
+    // isCurrentMessage and ToolCallsComponent are no longer used but kept for backwards compat
   }) => {
-    const showThinking = isLoading || isGenerating && !message?.content;
-    const shouldShowToolCalls = isCurrentMessage && ToolCallsComponent;
+    const lastGenerativeUIRef = react.useRef(null);
     const rawContent = message?.content || "";
     const content = stripToolCallMarkers(rawContent);
     let generativeUIOutput = null;
     const msgWithUI = message;
     if (msgWithUI && typeof msgWithUI.generativeUI === "function") {
       try {
-        generativeUIOutput = msgWithUI.generativeUI();
+        const newOutput = msgWithUI.generativeUI();
+        if (newOutput !== null && newOutput !== void 0) {
+          generativeUIOutput = newOutput;
+          lastGenerativeUIRef.current = newOutput;
+        }
       } catch (e) {
         console.warn("[AssistantMessageAdapter] Error rendering generativeUI:", e);
       }
     }
+    if (!generativeUIOutput && lastGenerativeUIRef.current) {
+      generativeUIOutput = lastGenerativeUIRef.current;
+    }
     const attachments = [];
+    const hasGenerativeUI = generativeUIOutput !== null;
+    const showThinking = (isLoading || isGenerating && !content) && !hasGenerativeUI;
     if (showThinking) {
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        ThinkingIndicator ? /* @__PURE__ */ jsxRuntime.jsx(ThinkingIndicator, { isLoading, isGenerating }) : /* @__PURE__ */ jsxRuntime.jsx(AssistantThinking, { message: "Thinking..." }),
-        shouldShowToolCalls && /* @__PURE__ */ jsxRuntime.jsx(ToolCallsComponent, {})
-      ] });
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: ThinkingIndicator ? /* @__PURE__ */ jsxRuntime.jsx(ThinkingIndicator, { isLoading, isGenerating }) : /* @__PURE__ */ jsxRuntime.jsx(AssistantThinking, { message: "Thinking..." }) });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      shouldShowToolCalls && /* @__PURE__ */ jsxRuntime.jsx(ToolCallsComponent, {}),
       generativeUIOutput && /* @__PURE__ */ jsxRuntime.jsx(GenerativeUIContainer, { children: generativeUIOutput }),
       content && /* @__PURE__ */ jsxRuntime.jsx(
         AssistantMessage,
@@ -1391,16 +1493,15 @@ function createAssistantMessageAdapter(ThinkingIndicator, ToolCallsComponent) {
   CustomAssistantMessageAdapter.displayName = "CustomAssistantMessageAdapter";
   return react.memo(CustomAssistantMessageAdapter);
 }
-function createAssistantMessageAdapterWithErrorReporting(onReportIssue, ThinkingIndicator, ToolCallsComponent) {
+function createAssistantMessageAdapterWithErrorReporting(onReportIssue, ThinkingIndicator, _ToolCallsComponent) {
   const ErrorReportingAssistantMessageAdapter = ({
     message,
     isLoading,
-    isGenerating,
-    isCurrentMessage
+    isGenerating
+    // isCurrentMessage and ToolCallsComponent are no longer used but kept for backwards compat
   }) => {
+    const lastGenerativeUIRef = react.useRef(null);
     const { visibleMessages } = reactCore.useCopilotChat();
-    const showThinking = isLoading || isGenerating && !message?.content;
-    const shouldShowToolCalls = isCurrentMessage && ToolCallsComponent;
     const rawContent = message?.content || "";
     const content = stripToolCallMarkers(rawContent);
     const errorContext = react.useMemo(() => detectErrorInMessage(content), [content]);
@@ -1448,20 +1549,25 @@ function createAssistantMessageAdapterWithErrorReporting(onReportIssue, Thinking
     const msgWithUI = message;
     if (msgWithUI && typeof msgWithUI.generativeUI === "function") {
       try {
-        generativeUIOutput = msgWithUI.generativeUI();
+        const newOutput = msgWithUI.generativeUI();
+        if (newOutput !== null && newOutput !== void 0) {
+          generativeUIOutput = newOutput;
+          lastGenerativeUIRef.current = newOutput;
+        }
       } catch (e) {
         console.warn("[AssistantMessageAdapter] Error rendering generativeUI:", e);
       }
     }
+    if (!generativeUIOutput && lastGenerativeUIRef.current) {
+      generativeUIOutput = lastGenerativeUIRef.current;
+    }
     const attachments = [];
+    const hasGenerativeUI = generativeUIOutput !== null;
+    const showThinking = (isLoading || isGenerating && !content) && !hasGenerativeUI;
     if (showThinking) {
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        ThinkingIndicator ? /* @__PURE__ */ jsxRuntime.jsx(ThinkingIndicator, { isLoading, isGenerating }) : /* @__PURE__ */ jsxRuntime.jsx(AssistantThinking, { message: "Thinking..." }),
-        shouldShowToolCalls && /* @__PURE__ */ jsxRuntime.jsx(ToolCallsComponent, {})
-      ] });
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: ThinkingIndicator ? /* @__PURE__ */ jsxRuntime.jsx(ThinkingIndicator, { isLoading, isGenerating }) : /* @__PURE__ */ jsxRuntime.jsx(AssistantThinking, { message: "Thinking..." }) });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      shouldShowToolCalls && /* @__PURE__ */ jsxRuntime.jsx(ToolCallsComponent, {}),
       generativeUIOutput && /* @__PURE__ */ jsxRuntime.jsx(GenerativeUIContainer, { children: generativeUIOutput }),
       content && /* @__PURE__ */ jsxRuntime.jsx(
         AssistantMessage,
@@ -3090,7 +3196,7 @@ function CustomCopilotSidebar2({
     [disabled, disabledReason, onSetOpen]
   );
   const AssistantMessageAdapterMemo = react.useMemo(
-    () => onReportIssue ? createAssistantMessageAdapterWithErrorReporting(onReportIssue, ThinkingIndicator, ToolCallsComponent) : ThinkingIndicator || ToolCallsComponent ? createAssistantMessageAdapter(ThinkingIndicator, ToolCallsComponent) : AssistantMessageAdapter,
+    () => onReportIssue ? createAssistantMessageAdapterWithErrorReporting(onReportIssue, ThinkingIndicator) : ThinkingIndicator || ToolCallsComponent ? createAssistantMessageAdapter(ThinkingIndicator) : AssistantMessageAdapter,
     [ThinkingIndicator, ToolCallsComponent, onReportIssue]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -3646,27 +3752,6 @@ var ActionsContainer3 = styled8__default.default.div`
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
 `;
-var StreamingIndicator2 = styled8__default.default.span`
-  display: inline-block;
-  width: ${tokens.spacing.xs};
-  height: ${tokens.spacing.xs};
-  margin-left: ${tokens.spacing.xs};
-  background-color: ${tokens.colors.text.tertiary};
-  border-radius: ${tokens.borderRadius.full};
-  animation: pulse 1.5s ease-in-out infinite;
-
-  @keyframes pulse {
-    0%,
-    100% {
-      opacity: 0.3;
-      transform: scale(0.8);
-    }
-    50% {
-      opacity: 1;
-      transform: scale(1.2);
-    }
-  }
-`;
 var Avatar3 = styled8__default.default.img`
   width: ${tokens.spacing.xl};
   height: ${tokens.spacing.xl};
@@ -3682,15 +3767,21 @@ var UserMessage2 = ({
   avatarUrl,
   username,
   isStreaming = false,
-  actions = []
+  actions = [],
+  enableMarkdown = true
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(StyledUserMessage2, { className, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(MessageBubble, { children: [
       username && /* @__PURE__ */ jsxRuntime.jsx("strong", { children: username }),
-      /* @__PURE__ */ jsxRuntime.jsxs(MessageContent2, { children: [
-        content,
-        isStreaming && /* @__PURE__ */ jsxRuntime.jsx(StreamingIndicator2, {})
-      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(MessageContent2, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        StreamingText2,
+        {
+          content,
+          isStreaming,
+          variant: enableMarkdown ? "markdown" : "default",
+          cursor: false
+        }
+      ) }),
       timestamp && /* @__PURE__ */ jsxRuntime.jsx(MessageTime2, { children: timestamp }),
       actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ActionsContainer3, { children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(ActionButton3, { onClick: action.onClick, children: [
         action.icon,