@agentiffai/design 0.1.4 → 0.1.6

package/dist/{Window-CukhSS8T.d.cts → StreamStatusIndicator-DM5n4MI1.d.cts}

@@ -209,6 +209,11 @@ interface FileAttachmentProps extends Omit<AriaButtonProps$1, 'children'> {
  */
 declare const FileAttachment: React__default.FC<FileAttachmentProps>;
 
+interface ActionButtonType$1 {
+    label: string;
+    onClick: () => void;
+    icon?: React__default.ReactNode;
+}
 interface AssistantMessageProps {
     /** Message content to display */
     content?: string;
@@ -218,12 +223,18 @@ interface AssistantMessageProps {
     avatarInitials?: string;
     /** Whether to show loading state */
     isLoading?: boolean;
+    /** Whether message is currently streaming */
+    isStreaming?: boolean;
     /** Custom className for styling */
     className?: string;
     /** Support for markdown rendering (future enhancement) */
     enableMarkdown?: boolean;
     /** File attachments to display below the message */
     attachments?: FileAttachmentProps[];
+    /** Optional timestamp */
+    timestamp?: string;
+    /** Action buttons to display */
+    actions?: ActionButtonType$1[];
 }
 /**
  * AssistantMessage component displays AI assistant messages with avatar
@@ -231,8 +242,12 @@ interface AssistantMessageProps {
  * Features:
  * - Avatar with image or initials fallback
  * - Loading state with animated dots
+ * - Streaming state indicator
  * - Markdown support (optional)
- * - Clean, modern design
+ * - Dark gray bubble (#2D2D3D) from Figma design
+ * - Left-aligned layout
+ * - Action buttons support
+ * - Timestamp display
  */
 declare const AssistantMessage: React__default.FC<AssistantMessageProps>;
 
@@ -305,6 +320,11 @@ declare const MessagesListContainer: styled_components_dist_types.IStyledCompone
 }>> & string;
 declare const MessagesListContent: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 
+interface ActionButtonType {
+    label: string;
+    onClick: () => void;
+    icon?: React__default.ReactNode;
+}
 interface UserMessageProps {
     /** The message content to display */
     content: string;
@@ -316,12 +336,24 @@ interface UserMessageProps {
     avatarUrl?: string;
     /** Optional username */
     username?: string;
+    /** Whether the message is currently streaming */
+    isStreaming?: boolean;
+    /** Action buttons to display below the message */
+    actions?: ActionButtonType[];
 }
 /**
  * UserMessage component displays a user's message in a chat interface.
- * Styled with right alignment and distinct styling from assistant messages.
+ * Styled with right alignment and pink/purple gradient from Figma design.
+ *
+ * Features:
+ * - Right-aligned layout
+ * - Pink/purple gradient background (#D8B4FE)
+ * - Support for streaming state
+ * - Optional timestamp display
+ * - Action buttons support
+ * - Avatar display
  */
-declare const UserMessage: ({ content, timestamp, className, avatarUrl, username, }: UserMessageProps) => react_jsx_runtime.JSX.Element;
+declare const UserMessage: ({ content, timestamp, className, avatarUrl, username, isStreaming, actions, }: UserMessageProps) => react_jsx_runtime.JSX.Element;
 
 interface ResponseProps {
     /** Loading state - shows animated dots */
@@ -428,4 +460,109 @@ interface WindowProps {
  */
 declare const Window: React__default.FC<WindowProps>;
 
-export { type Action as A, type ButtonProps as B, type FooterProps as F, type HeaderProps as H, type InputProps as I, type Message as M, type ResponseProps as R, type SuggestionsProps as S, type UserMessageProps as U, type WindowProps as W, type ActionsLayout as a, type ActionsProps as b, type ActionVariant as c, Actions as d, type AgentStateProps as e, AgentState as f, type ButtonSize as g, type ButtonVariant as h, Button as i, Footer as j, Header as k, Input as l, type AssistantMessageProps as m, type FileAttachmentProps as n, type MessagesListProps as o, type MessagesProps as p, AssistantMessage as q, FileAttachment as r, Messages as s, MessagesList as t, MessagesListContainer as u, MessagesListContent as v, UserMessage as w, Response as x, Suggestions as y, Window as z };
+/**
+ * StreamingText Component
+ *
+ * Provides typewriter animation for streaming AI responses.
+ *
+ * @see specs/015-restyle-ai-chat/spec.md:FR-031, FR-042
+ * @see UI_COMPONENTS_SSE.md:548-595
+ */
+interface StreamingTextProps {
+    /** The text content to display */
+    content: string;
+    /** Whether text is currently streaming */
+    isStreaming?: boolean;
+    /** Typing speed in milliseconds per character */
+    typingSpeed?: number;
+    /** Whether to show blinking cursor */
+    cursor?: boolean;
+    /** Visual variant */
+    variant?: 'default' | 'code' | 'markdown';
+    /** Callback when streaming completes */
+    onStreamComplete?: () => void;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * StreamingText component with typewriter animation
+ *
+ * Features:
+ * - Character-by-character streaming animation
+ * - Configurable typing speed
+ * - Optional blinking cursor
+ * - Code and markdown variants
+ * - Completion callback
+ */
+declare const StreamingText: React.FC<StreamingTextProps>;
+
+/**
+ * StreamErrorMessage Component
+ *
+ * Displays inline chat errors with retry support.
+ *
+ * @see specs/015-restyle-ai-chat/spec.md
+ */
+
+interface StreamErrorMessageProps {
+    /** Error message to display */
+    error: string | Error;
+    /** Visual variant */
+    variant?: 'inline' | 'banner';
+    /** Whether the error can be retried */
+    retryable?: boolean;
+    /** Callback when retry is clicked */
+    onRetry?: () => void;
+    /** Callback when dismiss is clicked */
+    onDismiss?: () => void;
+    /** Additional error details */
+    details?: string;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * StreamErrorMessage component for inline chat errors
+ *
+ * Features:
+ * - Inline and banner variants
+ * - Retry support for recoverable errors
+ * - Dismissible errors
+ * - Error details display
+ * - Accessible error reporting
+ */
+declare const StreamErrorMessage: React__default.FC<StreamErrorMessageProps>;
+
+/**
+ * StreamStatusIndicator Component
+ *
+ * Displays connection status for streaming chat (SSE).
+ *
+ * @see specs/015-restyle-ai-chat/spec.md
+ */
+
+interface StreamStatusIndicatorProps {
+    /** Connection status */
+    status: 'connected' | 'streaming' | 'disconnected' | 'reconnecting';
+    /** Visual variant */
+    variant?: 'dot' | 'badge';
+    /** Size of the indicator */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether to show text label */
+    showLabel?: boolean;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * StreamStatusIndicator component for showing connection status
+ *
+ * Features:
+ * - Visual status indicators (connected/streaming/disconnected/reconnecting)
+ * - Color-coded status (green/blue/red/yellow)
+ * - Pulsing animation for streaming state
+ * - Dot and badge variants
+ * - Size options (sm/md/lg)
+ * - Optional text labels
+ */
+declare const StreamStatusIndicator: React__default.FC<StreamStatusIndicatorProps>;
+
+export { type Action as A, type ButtonProps as B, StreamingText as C, type StreamingTextProps as D, StreamErrorMessage as E, type FooterProps as F, type StreamErrorMessageProps as G, type HeaderProps as H, type InputProps as I, StreamStatusIndicator as J, type StreamStatusIndicatorProps as K, type Message as M, type ResponseProps as R, type SuggestionsProps as S, type UserMessageProps as U, type WindowProps as W, type ActionsLayout as a, type ActionsProps as b, type ActionVariant as c, Actions as d, type AgentStateProps as e, AgentState as f, type ButtonSize as g, type ButtonVariant as h, Button as i, Footer as j, Header as k, Input as l, type AssistantMessageProps as m, type FileAttachmentProps as n, type MessagesListProps as o, type MessagesProps as p, AssistantMessage as q, FileAttachment as r, Messages as s, MessagesList as t, MessagesListContainer as u, MessagesListContent as v, UserMessage as w, Response as x, Suggestions as y, Window as z };

package/dist/{Window-CukhSS8T.d.ts → StreamStatusIndicator-DM5n4MI1.d.ts}

@@ -209,6 +209,11 @@ interface FileAttachmentProps extends Omit<AriaButtonProps$1, 'children'> {
  */
 declare const FileAttachment: React__default.FC<FileAttachmentProps>;
 
+interface ActionButtonType$1 {
+    label: string;
+    onClick: () => void;
+    icon?: React__default.ReactNode;
+}
 interface AssistantMessageProps {
     /** Message content to display */
     content?: string;
@@ -218,12 +223,18 @@ interface AssistantMessageProps {
     avatarInitials?: string;
     /** Whether to show loading state */
     isLoading?: boolean;
+    /** Whether message is currently streaming */
+    isStreaming?: boolean;
     /** Custom className for styling */
     className?: string;
     /** Support for markdown rendering (future enhancement) */
     enableMarkdown?: boolean;
     /** File attachments to display below the message */
     attachments?: FileAttachmentProps[];
+    /** Optional timestamp */
+    timestamp?: string;
+    /** Action buttons to display */
+    actions?: ActionButtonType$1[];
 }
 /**
  * AssistantMessage component displays AI assistant messages with avatar
@@ -231,8 +242,12 @@ interface AssistantMessageProps {
  * Features:
  * - Avatar with image or initials fallback
  * - Loading state with animated dots
+ * - Streaming state indicator
  * - Markdown support (optional)
- * - Clean, modern design
+ * - Dark gray bubble (#2D2D3D) from Figma design
+ * - Left-aligned layout
+ * - Action buttons support
+ * - Timestamp display
  */
 declare const AssistantMessage: React__default.FC<AssistantMessageProps>;
 
@@ -305,6 +320,11 @@ declare const MessagesListContainer: styled_components_dist_types.IStyledCompone
 }>> & string;
 declare const MessagesListContent: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 
+interface ActionButtonType {
+    label: string;
+    onClick: () => void;
+    icon?: React__default.ReactNode;
+}
 interface UserMessageProps {
     /** The message content to display */
     content: string;
@@ -316,12 +336,24 @@ interface UserMessageProps {
     avatarUrl?: string;
     /** Optional username */
     username?: string;
+    /** Whether the message is currently streaming */
+    isStreaming?: boolean;
+    /** Action buttons to display below the message */
+    actions?: ActionButtonType[];
 }
 /**
  * UserMessage component displays a user's message in a chat interface.
- * Styled with right alignment and distinct styling from assistant messages.
+ * Styled with right alignment and pink/purple gradient from Figma design.
+ *
+ * Features:
+ * - Right-aligned layout
+ * - Pink/purple gradient background (#D8B4FE)
+ * - Support for streaming state
+ * - Optional timestamp display
+ * - Action buttons support
+ * - Avatar display
  */
-declare const UserMessage: ({ content, timestamp, className, avatarUrl, username, }: UserMessageProps) => react_jsx_runtime.JSX.Element;
+declare const UserMessage: ({ content, timestamp, className, avatarUrl, username, isStreaming, actions, }: UserMessageProps) => react_jsx_runtime.JSX.Element;
 
 interface ResponseProps {
     /** Loading state - shows animated dots */
@@ -428,4 +460,109 @@ interface WindowProps {
  */
 declare const Window: React__default.FC<WindowProps>;
 
-export { type Action as A, type ButtonProps as B, type FooterProps as F, type HeaderProps as H, type InputProps as I, type Message as M, type ResponseProps as R, type SuggestionsProps as S, type UserMessageProps as U, type WindowProps as W, type ActionsLayout as a, type ActionsProps as b, type ActionVariant as c, Actions as d, type AgentStateProps as e, AgentState as f, type ButtonSize as g, type ButtonVariant as h, Button as i, Footer as j, Header as k, Input as l, type AssistantMessageProps as m, type FileAttachmentProps as n, type MessagesListProps as o, type MessagesProps as p, AssistantMessage as q, FileAttachment as r, Messages as s, MessagesList as t, MessagesListContainer as u, MessagesListContent as v, UserMessage as w, Response as x, Suggestions as y, Window as z };
+/**
+ * StreamingText Component
+ *
+ * Provides typewriter animation for streaming AI responses.
+ *
+ * @see specs/015-restyle-ai-chat/spec.md:FR-031, FR-042
+ * @see UI_COMPONENTS_SSE.md:548-595
+ */
+interface StreamingTextProps {
+    /** The text content to display */
+    content: string;
+    /** Whether text is currently streaming */
+    isStreaming?: boolean;
+    /** Typing speed in milliseconds per character */
+    typingSpeed?: number;
+    /** Whether to show blinking cursor */
+    cursor?: boolean;
+    /** Visual variant */
+    variant?: 'default' | 'code' | 'markdown';
+    /** Callback when streaming completes */
+    onStreamComplete?: () => void;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * StreamingText component with typewriter animation
+ *
+ * Features:
+ * - Character-by-character streaming animation
+ * - Configurable typing speed
+ * - Optional blinking cursor
+ * - Code and markdown variants
+ * - Completion callback
+ */
+declare const StreamingText: React.FC<StreamingTextProps>;
+
+/**
+ * StreamErrorMessage Component
+ *
+ * Displays inline chat errors with retry support.
+ *
+ * @see specs/015-restyle-ai-chat/spec.md
+ */
+
+interface StreamErrorMessageProps {
+    /** Error message to display */
+    error: string | Error;
+    /** Visual variant */
+    variant?: 'inline' | 'banner';
+    /** Whether the error can be retried */
+    retryable?: boolean;
+    /** Callback when retry is clicked */
+    onRetry?: () => void;
+    /** Callback when dismiss is clicked */
+    onDismiss?: () => void;
+    /** Additional error details */
+    details?: string;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * StreamErrorMessage component for inline chat errors
+ *
+ * Features:
+ * - Inline and banner variants
+ * - Retry support for recoverable errors
+ * - Dismissible errors
+ * - Error details display
+ * - Accessible error reporting
+ */
+declare const StreamErrorMessage: React__default.FC<StreamErrorMessageProps>;
+
+/**
+ * StreamStatusIndicator Component
+ *
+ * Displays connection status for streaming chat (SSE).
+ *
+ * @see specs/015-restyle-ai-chat/spec.md
+ */
+
+interface StreamStatusIndicatorProps {
+    /** Connection status */
+    status: 'connected' | 'streaming' | 'disconnected' | 'reconnecting';
+    /** Visual variant */
+    variant?: 'dot' | 'badge';
+    /** Size of the indicator */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether to show text label */
+    showLabel?: boolean;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * StreamStatusIndicator component for showing connection status
+ *
+ * Features:
+ * - Visual status indicators (connected/streaming/disconnected/reconnecting)
+ * - Color-coded status (green/blue/red/yellow)
+ * - Pulsing animation for streaming state
+ * - Dot and badge variants
+ * - Size options (sm/md/lg)
+ * - Optional text labels
+ */
+declare const StreamStatusIndicator: React__default.FC<StreamStatusIndicatorProps>;
+
+export { type Action as A, type ButtonProps as B, StreamingText as C, type StreamingTextProps as D, StreamErrorMessage as E, type FooterProps as F, type StreamErrorMessageProps as G, type HeaderProps as H, type InputProps as I, StreamStatusIndicator as J, type StreamStatusIndicatorProps as K, type Message as M, type ResponseProps as R, type SuggestionsProps as S, type UserMessageProps as U, type WindowProps as W, type ActionsLayout as a, type ActionsProps as b, type ActionVariant as c, Actions as d, type AgentStateProps as e, AgentState as f, type ButtonSize as g, type ButtonVariant as h, Button as i, Footer as j, Header as k, Input as l, type AssistantMessageProps as m, type FileAttachmentProps as n, type MessagesListProps as o, type MessagesProps as p, AssistantMessage as q, FileAttachment as r, Messages as s, MessagesList as t, MessagesListContainer as u, MessagesListContent as v, UserMessage as w, Response as x, Suggestions as y, Window as z };