@agentiffai/design 1.3.11 → 1.3.13

package/dist/index.d.cts

@@ -5,7 +5,7 @@ import React__default, { ReactNode } from 'react';
 export { ActionButtons, ActionButtonsProps, BrandType, CategoryItem, CategoryNav, CategoryNavProps, CategorySubItem, Icon, IconName, IconNames, IconProps, Layout, LayoutProps, NavHorizontal, NavHorizontalProps, NavVertical, NavVerticalProps, OAuthConnectionData, PaneMenus, PaneMenusProps, PaneSectionHeader, PaneSectionHeaderProps, ServiceBrand, ServiceIcon, ServiceIconProps, WorkflowStatusCard, WorkflowStatusCardProps } from './layout/index.cjs';
 import { AriaButtonProps } from '@react-aria/button';
 export { GlobalStyle, darkTheme, lightTheme, tokens } from './theme/index.cjs';
-export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, w as CopilotUserMessage, U as CopilotUserMessageProps, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as StreamErrorMessage, S as StreamErrorMessageProps, E as StreamStatusIndicator, D as StreamStatusIndicatorProps, C as StreamingText, z as StreamingTextProps, J as Suggestions, G as SuggestionsProps, K as Window, W as WindowProps } from './Window-BcTRumpc.cjs';
+export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, w as CopilotUserMessage, U as CopilotUserMessageProps, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as StreamErrorMessage, S as StreamErrorMessageProps, E as StreamStatusIndicator, D as StreamStatusIndicatorProps, C as StreamingText, z as StreamingTextProps, J as Suggestions, G as SuggestionsProps, K as Window, W as WindowProps } from './Window-pJb3Z5_P.cjs';
 export { FacebookIcon, FacebookIconProps, FacebookIconVariant, GmailIcon, GmailIconProps, GmailIconVariant, InstagramIcon, InstagramIconProps, InstagramVariant, LinkedInIcon, LinkedInIconProps, LinkedInIconVariant, PostizIcon, PostizIconProps, PostizIconVariant, RedditIcon, RedditIconProps, RedditIconVariant, SlackIcon, SlackIconProps, SlackIconVariant, TelegramIcon, TelegramIconProps, TelegramIconVariant, WhatsAppIcon, WhatsAppIconProps, WhatsAppIconVariant, XIcon, XIconProps, XIconVariant, YouTubeIcon, YouTubeIconProps, YouTubeIconVariant } from './icons/index.cjs';
 export { WorkflowCard, WorkflowCardProps, WorkflowErrorAlert, WorkflowErrorAlertProps, WorkflowIntegration, WorkflowProgressBar, WorkflowProgressBarProps, WorkflowResultPanel, WorkflowResultPanelProps, WorkflowStatusBadge, WorkflowStatusBadgeProps } from './workflow/index.cjs';
 import '@react-types/button';
@@ -356,8 +356,9 @@ declare const PLATFORM_CONFIGS: Record<Platform, PlatformConfig>;
 declare const CATEGORY_CONFIGS: Record<ProgressCategory, CategoryConfig>;
 /**
  * Categorize a progress message into a ProgressCategory
+ * Handles undefined/null message gracefully
  */
-declare function categorizeProgress(message: string): ProgressCategory;
+declare function categorizeProgress(message: string | undefined | null): ProgressCategory;
 /**
  * Get the icon for a progress category (with fallback for unknown categories)
  */
@@ -368,8 +369,9 @@ declare function getCategoryIcon(category: ProgressCategory): string;
 declare function getCategoryColor(category: ProgressCategory): string;
 /**
  * Normalize platform name (e.g., 'twitter' -> 'x')
+ * Handles undefined/null platform gracefully
  */
-declare function normalizePlatform(platform: string): Platform | null;
+declare function normalizePlatform(platform: string | undefined | null): Platform | null;
 /**
  * Calculate character count including hashtags
  */

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import React__default, { ReactNode } from 'react';
 export { ActionButtons, ActionButtonsProps, BrandType, CategoryItem, CategoryNav, CategoryNavProps, CategorySubItem, Icon, IconName, IconNames, IconProps, Layout, LayoutProps, NavHorizontal, NavHorizontalProps, NavVertical, NavVerticalProps, OAuthConnectionData, PaneMenus, PaneMenusProps, PaneSectionHeader, PaneSectionHeaderProps, ServiceBrand, ServiceIcon, ServiceIconProps, WorkflowStatusCard, WorkflowStatusCardProps } from './layout/index.js';
 import { AriaButtonProps } from '@react-aria/button';
 export { GlobalStyle, darkTheme, lightTheme, tokens } from './theme/index.js';
-export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, w as CopilotUserMessage, U as CopilotUserMessageProps, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as StreamErrorMessage, S as StreamErrorMessageProps, E as StreamStatusIndicator, D as StreamStatusIndicatorProps, C as StreamingText, z as StreamingTextProps, J as Suggestions, G as SuggestionsProps, K as Window, W as WindowProps } from './Window-BcTRumpc.js';
+export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, w as CopilotUserMessage, U as CopilotUserMessageProps, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as StreamErrorMessage, S as StreamErrorMessageProps, E as StreamStatusIndicator, D as StreamStatusIndicatorProps, C as StreamingText, z as StreamingTextProps, J as Suggestions, G as SuggestionsProps, K as Window, W as WindowProps } from './Window-pJb3Z5_P.js';
 export { FacebookIcon, FacebookIconProps, FacebookIconVariant, GmailIcon, GmailIconProps, GmailIconVariant, InstagramIcon, InstagramIconProps, InstagramVariant, LinkedInIcon, LinkedInIconProps, LinkedInIconVariant, PostizIcon, PostizIconProps, PostizIconVariant, RedditIcon, RedditIconProps, RedditIconVariant, SlackIcon, SlackIconProps, SlackIconVariant, TelegramIcon, TelegramIconProps, TelegramIconVariant, WhatsAppIcon, WhatsAppIconProps, WhatsAppIconVariant, XIcon, XIconProps, XIconVariant, YouTubeIcon, YouTubeIconProps, YouTubeIconVariant } from './icons/index.js';
 export { WorkflowCard, WorkflowCardProps, WorkflowErrorAlert, WorkflowErrorAlertProps, WorkflowIntegration, WorkflowProgressBar, WorkflowProgressBarProps, WorkflowResultPanel, WorkflowResultPanelProps, WorkflowStatusBadge, WorkflowStatusBadgeProps } from './workflow/index.js';
 import '@react-types/button';
@@ -356,8 +356,9 @@ declare const PLATFORM_CONFIGS: Record<Platform, PlatformConfig>;
 declare const CATEGORY_CONFIGS: Record<ProgressCategory, CategoryConfig>;
 /**
  * Categorize a progress message into a ProgressCategory
+ * Handles undefined/null message gracefully
  */
-declare function categorizeProgress(message: string): ProgressCategory;
+declare function categorizeProgress(message: string | undefined | null): ProgressCategory;
 /**
  * Get the icon for a progress category (with fallback for unknown categories)
  */
@@ -368,8 +369,9 @@ declare function getCategoryIcon(category: ProgressCategory): string;
 declare function getCategoryColor(category: ProgressCategory): string;
 /**
  * Normalize platform name (e.g., 'twitter' -> 'x')
+ * Handles undefined/null platform gracefully
  */
-declare function normalizePlatform(platform: string): Platform | null;
+declare function normalizePlatform(platform: string | undefined | null): Platform | null;
 /**
  * Calculate character count including hashtags
  */

package/dist/index.js

@@ -1,4 +1,4 @@
-import { memo, useRef, useEffect, useState, useCallback, useId, useMemo } from 'react';
+import { memo, useRef, useEffect, useMemo, useState, useCallback, useId } from 'react';
 import styled47, { keyframes, css, createGlobalStyle } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useButton } from '@react-aria/button';
@@ -2814,6 +2814,24 @@ function ItemWithLogs({
     isExpanded && /* @__PURE__ */ jsx(ItemDisclosurePanel, { children: run.customContent ? (
       // Render custom content directly
       /* @__PURE__ */ jsx("div", { style: { padding: "16px" }, children: run.customContent })
+    ) : run.logsLoading ? (
+      // Show loading spinner while logs are being fetched
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "center", padding: "16px" }, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "24px",
+              height: "24px",
+              border: `2px solid ${tokens.colors.border.default}`,
+              borderTopColor: tokens.colors.primary,
+              borderRadius: "50%",
+              animation: "spin 1s linear infinite"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+      ] })
     ) : run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsx("div", { style: { color: tokens.colors.text.tertiary, fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
   ] });
 }
@@ -5440,6 +5458,59 @@ var Input2 = ({
     )
   ] }) });
 };
+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__ */ jsx("br", {}, key++));
+      elements.push(/* @__PURE__ */ jsx("br", {}, key++));
+    }
+    const lines = paragraph.split("\n");
+    lines.forEach((line, lineIndex) => {
+      if (lineIndex > 0) {
+        elements.push(/* @__PURE__ */ 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__ */ jsx("strong", { children: match[2] }, key++));
+    } else if (match[3]) {
+      elements.push(/* @__PURE__ */ jsx("em", { children: match[4] }, key++));
+    } else if (match[5]) {
+      elements.push(/* @__PURE__ */ jsx("code", { children: match[6] }, key++));
+    } else if (match[7]) {
+      elements.push(
+        /* @__PURE__ */ 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 Container12 = styled47.div`
   font-family: ${(props) => props.$variant === "code" ? tokens.typography.fontFamily.monospace : tokens.typography.fontFamily.primary};
   white-space: pre-wrap;
@@ -5448,6 +5519,33 @@ var Container12 = styled47.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 = styled47.span`
   display: inline-block;
@@ -5492,8 +5590,14 @@ var StreamingTextBase = ({
     wasStreamingRef.current = isStreaming;
   }, [isStreaming, onStreamComplete]);
   const showCursor = isStreaming && cursor;
+  const renderedContent = useMemo(() => {
+    if (variant === "markdown") {
+      return parseMarkdown(content);
+    }
+    return content;
+  }, [content, variant]);
   return /* @__PURE__ */ jsxs(Container12, { $variant: variant, className, children: [
-    content,
+    renderedContent,
     showCursor && /* @__PURE__ */ jsx(Cursor, {})
   ] });
 };
@@ -6097,27 +6201,6 @@ var ActionsContainer3 = styled47.div`
   gap: ${tokens.spacing.xs};
   flex-wrap: wrap;
 `;
-var StreamingIndicator2 = styled47.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 = styled47.img`
   width: ${tokens.spacing.xl};
   height: ${tokens.spacing.xl};
@@ -6133,15 +6216,21 @@ var UserMessage2 = ({
   avatarUrl,
   username,
   isStreaming = false,
-  actions = []
+  actions = [],
+  enableMarkdown = true
 }) => {
   return /* @__PURE__ */ jsxs(StyledUserMessage2, { className, children: [
     /* @__PURE__ */ jsxs(MessageBubble, { children: [
       username && /* @__PURE__ */ jsx("strong", { children: username }),
-      /* @__PURE__ */ jsxs(MessageContent2, { children: [
-        content,
-        isStreaming && /* @__PURE__ */ jsx(StreamingIndicator2, {})
-      ] }),
+      /* @__PURE__ */ jsx(MessageContent2, { children: /* @__PURE__ */ jsx(
+        StreamingText2,
+        {
+          content,
+          isStreaming,
+          variant: enableMarkdown ? "markdown" : "default",
+          cursor: false
+        }
+      ) }),
       timestamp && /* @__PURE__ */ jsx(MessageTime2, { children: timestamp }),
       actions.length > 0 && /* @__PURE__ */ jsx(ActionsContainer3, { children: actions.map((action, index) => /* @__PURE__ */ jsxs(ActionButton4, { onClick: action.onClick, children: [
         action.icon,
@@ -7868,6 +7957,7 @@ var CATEGORY_CONFIGS = {
   }
 };
 function categorizeProgress(message) {
+  if (!message) return "setup";
   if (message.includes("Notion")) return "notion";
   if (message.includes("prompts") || message.includes("Loading")) return "setup";
   if (message.includes("accounts") || message.includes("Fetching connected")) return "integration";
@@ -7884,6 +7974,7 @@ function getCategoryColor(category) {
   return CATEGORY_CONFIGS[category]?.color ?? "bg-gray-500";
 }
 function normalizePlatform(platform) {
+  if (!platform) return null;
   const normalized = platform.toLowerCase();
   if (normalized === "twitter") return "x";
   if (Object.keys(PLATFORM_CONFIGS).includes(normalized)) {
@@ -9132,6 +9223,7 @@ var SUBREDDIT_COLORS = {
   startups: tokens.colors.seaGreen
 };
 function getSubredditColor(subreddit) {
+  if (!subreddit) return REDDIT_COLORS.orange;
   const lower = subreddit.toLowerCase();
   return SUBREDDIT_COLORS[lower] || REDDIT_COLORS.orange;
 }