@app-studio/web 0.9.16 → 0.9.17

package/dist/components/Alert/Alert/Alert.props.d.ts

@@ -3,8 +3,9 @@ import { ViewProps } from 'app-studio';
 import { AlertStyles, Variant } from './Alert.type';
 export interface AlertProps extends ViewProps {
     icon?: React.ReactNode;
-    title: string;
-    description: string | React.ReactNode;
+    title?: string;
+    description?: string | React.ReactNode;
+    children?: React.ReactNode;
     variant?: Variant;
     views?: AlertStyles;
     /**

package/dist/components/Alert/Alert/Alert.view.d.ts

@@ -8,4 +8,4 @@ import { AlertProps } from './Alert.props';
 /**
  * Alert component that displays important messages to users
  */
-export declare const AlertView: ({ icon, title, views, description, variant, themeMode: elementMode, ...props }: AlertProps) => React.JSX.Element;
+export declare const AlertView: ({ icon, title, views, description, variant, themeMode: elementMode, children, ...props }: AlertProps) => React.JSX.Element;

package/dist/components/AuthGuard/AuthGuard.d.ts

@@ -0,0 +1,35 @@
+import React, { ReactNode } from 'react';
+/**
+ * Authentication guard props
+ */
+interface AuthGuardProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+    requireAuth?: boolean;
+    autoLogin?: boolean;
+}
+/**
+ * Authentication guard component
+ *
+ * Protects routes by checking authentication status and auto-logging in for ADK pages
+ */
+export declare const AuthGuard: React.FC<AuthGuardProps>;
+/**
+ * HOC for protecting components with authentication
+ */
+export declare const withAuthGuard: <P extends object>(Component: React.ComponentType<P>, options?: {
+    requireAuth?: boolean | undefined;
+    fallback?: ReactNode;
+} | undefined) => React.FC<P>;
+/**
+ * Route-based authentication guard
+ * Automatically determines if auth is required based on the current path
+ */
+export declare const RouteAuthGuard: React.FC<{
+    children: ReactNode;
+}>;
+/**
+ * Authentication status indicator component
+ */
+export declare const AuthStatus: React.FC;
+export {};

package/dist/components/AuthGuard/index.d.ts

@@ -0,0 +1 @@
+export { AuthGuard, withAuthGuard, RouteAuthGuard, AuthStatus } from './AuthGuard';

package/dist/components/Avatar/Avatar/Avatar.props.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { AvatarStyles, Size } from './Avatar.type';
 export interface AvatarProps {
-    src: string;
+    src?: string;
     size?: Size;
     fallback?: string;
     views?: AvatarStyles;
     onClick?: Function;
+    children?: React.ReactNode;
 }
 export interface AvatarViewProps extends AvatarProps {
     imageError: boolean;

package/dist/components/Avatar/Avatar/Avatar.view.d.ts

@@ -6,4 +6,4 @@
  */
 import React from 'react';
 import { AvatarViewProps } from './Avatar.props';
-export declare const AvatarView: ({ src, size, fallback, views, imageError, setImageError, onClick, }: AvatarViewProps) => React.JSX.Element;
+export declare const AvatarView: ({ src, size, fallback, views, imageError, setImageError, onClick, children, }: AvatarViewProps) => React.JSX.Element;

package/dist/components/Avatar/Avatar.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { AvatarProps } from './Avatar/Avatar.props';
-export declare const Avatar: ({ src, size, views, fallback, onClick, }: AvatarProps) => React.JSX.Element;
+export declare const Avatar: ({ src, size, views, fallback, onClick, children, }: AvatarProps) => React.JSX.Element;

package/dist/components/Tabs/Tabs/Tabs.props.d.ts

@@ -1,13 +1,15 @@
 import React from 'react';
 import { TabsStyles, Tab } from './Tabs.type';
+import { ViewProps } from 'app-studio';
 /**
  * Props for the main Tabs component (External API).
+ * Supports both data-driven approach (with tabs prop) and compound component pattern.
  */
 export interface TabsProps {
-    /** Array of tab objects to be displayed. Each tab needs a unique `value`. */
-    tabs: Tab[];
+    /** Array of tab objects to be displayed. Each tab needs a unique `value`. (Data-driven approach) */
+    tabs?: Tab[];
     /** Optional value of the tab to be active initially. Defaults to the first tab if not provided or not found. */
-    initialTabValue?: string | number;
+    defaultValue?: string | number;
     /** Optional callback function triggered when the active tab changes. Receives the newly active tab object. */
     onTabChange?: (activeTab: Tab) => void;
     /** Optional styles object to customize the appearance of the tabs container, headers, text, and content area. */
@@ -25,6 +27,12 @@ export interface TabsProps {
      * If not provided, the `content` property from the active tab object will be rendered.
      */
     renderContent?: (activeTab: Tab) => React.ReactNode;
+    /** Current value for controlled compound component pattern */
+    value?: string;
+    /** Callback when tab value changes in compound component pattern */
+    onValueChange?: (value: any) => void;
+    /** Children for compound component pattern */
+    children?: React.ReactNode;
 }
 /**
  * Props specifically for the TabsView component (Internal).
@@ -45,3 +53,43 @@ export interface TabsViewProps {
     /** Optional custom renderer for the content area. */
     renderContent?: (activeTab: Tab) => React.ReactNode;
 }
+/**
+ * Props for TabsList compound component
+ */
+export interface TabsListProps {
+    /** Children (TabsTrigger components) */
+    children: React.ReactNode;
+    /** Custom styles for the list container */
+    views?: {
+        container?: ViewProps;
+    };
+}
+/**
+ * Props for TabsTrigger compound component
+ */
+export interface TabsTriggerProps {
+    /** Unique value for this tab */
+    value: string;
+    /** Children content for the trigger */
+    children: React.ReactNode;
+    /** Whether this trigger is disabled */
+    disabled?: boolean;
+    /** Custom styles for the trigger */
+    views?: {
+        trigger?: ViewProps;
+        activeState?: ViewProps;
+    };
+}
+/**
+ * Props for TabsContent compound component
+ */
+export interface TabsContentProps {
+    /** Value that this content corresponds to */
+    value: string;
+    /** Children content to display when this tab is active */
+    children: React.ReactNode;
+    /** Custom styles for the content */
+    views?: {
+        content?: ViewProps;
+    };
+}

package/dist/components/Tabs/Tabs/Tabs.state.d.ts

@@ -3,10 +3,21 @@ import { Tab } from './Tabs.type';
 /**
  * Custom hook to manage the state of the active tab.
  * @param propTabs - The array of tab objects provided as props.
- * @param initialTabValue - The optional title of the tab to be initially active.
+ * @param defaultValue - The optional title of the tab to be initially active.
  * @returns An object containing the current activeTab and a function to update it.
  */
-export declare const useTabsState: (propTabs: Tab[], initialTabValue?: string | number | undefined) => {
+export declare const useTabsState: (propTabs: Tab[], defaultValue?: string | number | undefined) => {
     activeTab: Tab | undefined;
     setActiveTab: import("react").Dispatch<import("react").SetStateAction<Tab | undefined>>;
 };
+/**
+ * Custom hook to manage the state for compound component pattern.
+ * @param defaultValue - The default value for the active tab (uncontrolled)
+ * @param value - The current value for the active tab (controlled)
+ * @param onValueChange - Callback when the active value changes
+ * @returns An object containing the current activeValue and a function to update it.
+ */
+export declare const useTabsCompoundState: (defaultValue?: string | number | undefined, value?: string | number | undefined, onValueChange?: ((value: string | number) => void) | undefined) => {
+    activeValue: string | number | null;
+    setActiveValue: (newValue: string | number) => void;
+};

package/dist/components/Tabs/Tabs/Tabs.view.d.ts

@@ -1,6 +1,12 @@
 import React from 'react';
-import { TabsViewProps } from './Tabs.props';
+import { TabsViewProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './Tabs.props';
+import { TabsContextType } from './Tabs.type';
 /**
  * The presentation component for Tabs. Renders the UI based on props.
  */
 export declare const TabsView: React.FC<TabsViewProps>;
+export declare const TabsContext: React.Context<TabsContextType | null>;
+export declare const useTabsContext: () => TabsContextType;
+export declare const TabsList: React.FC<TabsListProps>;
+export declare const TabsTrigger: React.FC<TabsTriggerProps>;
+export declare const TabsContent: React.FC<TabsContentProps>;

package/dist/components/Tabs/Tabs.d.ts

@@ -1,3 +1,10 @@
 import React from 'react';
 import { TabsProps } from './Tabs/Tabs.props';
-export declare const Tabs: React.NamedExoticComponent<TabsProps>;
+import { TabsList, TabsTrigger, TabsContent } from './Tabs/Tabs.view';
+interface TabsType extends React.FC<TabsProps> {
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Content: typeof TabsContent;
+}
+export declare const Tabs: TabsType;
+export {};

package/dist/components/Tabs/examples/compound.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Example demonstrating the compound component pattern for Tabs
+ */
+export declare const CompoundTabs: () => React.JSX.Element;

package/dist/components/Tabs/examples/index.d.ts

@@ -1,3 +1,4 @@
 export * from './default';
 export * from './styles';
 export * from './customHeader';
+export * from './compound';

package/dist/components/adk/AgentChat/AgentChat/AgentChat.props.d.ts

@@ -0,0 +1,157 @@
+import { ViewProps } from 'app-studio';
+/**
+ * Core ADK Agent Types
+ */
+export interface AgentRunRequest {
+    appName: string;
+    userId: string;
+    sessionId: string;
+    newMessage: {
+        role: string;
+        parts: MessagePart[];
+    };
+    functionCallEventId?: string;
+    streaming?: boolean;
+}
+export interface MessagePart {
+    text?: string;
+    inlineData?: {
+        displayName: string;
+        data: string | ArrayBuffer;
+        mimeType: string;
+    };
+    functionCall?: {
+        id: string;
+        name: string;
+        args: any;
+    };
+    functionResponse?: {
+        id: string;
+        name: string;
+        response: any;
+    };
+    executableCode?: {
+        language: string;
+        code: string;
+    };
+    codeExecutionResult?: {
+        outcome: string;
+        output?: string;
+    };
+    thought?: boolean;
+}
+export interface AgentMessage {
+    id: string;
+    role: 'user' | 'bot';
+    text?: string;
+    parts?: MessagePart[];
+    timestamp: number;
+    isLoading?: boolean;
+    thought?: boolean;
+    eventId?: string;
+    attachments?: MessageAttachment[];
+    inlineData?: {
+        displayName?: string;
+        data: string;
+        mimeType: string;
+        mediaType?: 'image' | 'video' | 'audio' | 'document';
+    };
+    functionCall?: any;
+    functionResponse?: any;
+    executableCode?: any;
+    codeExecutionResult?: any;
+    renderedContent?: string;
+    evalStatus?: string;
+    failedMetric?: string;
+    evalScore?: number;
+    evalThreshold?: number;
+}
+export interface MessageAttachment {
+    file: File;
+    url: string;
+    type: 'image' | 'video' | 'audio' | 'document';
+}
+export interface AgentSession {
+    id: string;
+    userId: string;
+    appName: string;
+    state: any;
+    events: any[];
+    createdAt: number;
+    updatedAt: number;
+}
+export interface AgentEvent {
+    id: string;
+    sessionId: string;
+    type: string;
+    data: any;
+    timestamp: number;
+    title?: string;
+}
+/**
+ * Component View Customization
+ */
+export interface AgentChatViews {
+    container?: ViewProps;
+    header?: ViewProps;
+    messageList?: ViewProps;
+    message?: ViewProps;
+    userMessage?: ViewProps;
+    botMessage?: ViewProps;
+    inputArea?: ViewProps;
+    inputField?: ViewProps;
+    sendButton?: ViewProps;
+    attachmentArea?: ViewProps;
+    loadingIndicator?: ViewProps;
+    errorMessage?: ViewProps;
+    typingIndicator?: ViewProps;
+}
+/**
+ * Event Handlers
+ */
+export interface AgentChatEventHandlers {
+    onSessionCreate?: (session: AgentSession) => void;
+    onSessionUpdate?: (session: AgentSession) => void;
+    onMessageSent?: (message: AgentMessage) => void;
+    onMessageReceived?: (message: AgentMessage) => void;
+    onError?: (error: Error) => void;
+    onFileUpload?: (files: File[]) => void;
+    onTypingStart?: () => void;
+    onTypingStop?: () => void;
+    onAudioRecordingStart?: () => void;
+    onAudioRecordingStop?: (audioData: Blob) => void;
+    onVideoRecordingStart?: () => void;
+    onVideoRecordingStop?: (videoData: Blob) => void;
+}
+/**
+ * Main AgentChat Props Interface
+ */
+export interface AgentChatProps extends ViewProps, AgentChatEventHandlers {
+    appName: string;
+    userId: string;
+    sessionId?: string;
+    apiBaseUrl?: string;
+    wsBaseUrl?: string;
+    enableFileUpload?: boolean;
+    enableAudioRecording?: boolean;
+    enableVideoRecording?: boolean;
+    enableStreaming?: boolean;
+    enableThoughts?: boolean;
+    maxFileSize?: number;
+    maxFiles?: number;
+    allowedFileTypes?: string[];
+    maxMessageLength?: number;
+    placeholder?: string;
+    showTimestamps?: boolean;
+    showAvatars?: boolean;
+    showTypingIndicator?: boolean;
+    autoScroll?: boolean;
+    views?: AgentChatViews;
+    initialMessages?: AgentMessage[];
+    initialSession?: AgentSession;
+    enableFunctionCalls?: boolean;
+    enableCodeExecution?: boolean;
+    enableEvaluation?: boolean;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+}

package/dist/components/adk/AgentChat/AgentChat/AgentChat.state.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { AgentChatProps, AgentMessage, AgentSession, MessageAttachment } from './AgentChat.props';
+/**
+ * Custom hook for managing AgentChat state and interactions
+ */
+export declare const useAgentChat: (props: AgentChatProps) => {
+    messages: AgentMessage[];
+    currentSession: AgentSession | null;
+    isLoading: boolean;
+    isTyping: boolean;
+    error: string | null;
+    inputValue: string;
+    selectedFiles: MessageAttachment[];
+    isConnected: boolean;
+    sessionId: string;
+    sendMessage: (text: string, attachments?: MessageAttachment[]) => Promise<void>;
+    setInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    handleFileSelect: (files: FileList | File[]) => void;
+    removeFile: (index: number) => void;
+    createSession: () => Promise<AgentSession>;
+    messagesEndRef: import("react").RefObject<HTMLDivElement>;
+    setError: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    setSelectedFiles: import("react").Dispatch<import("react").SetStateAction<MessageAttachment[]>>;
+};

package/dist/components/adk/AgentChat/AgentChat/AgentChat.style.d.ts

@@ -0,0 +1,130 @@
+import { ViewProps } from 'app-studio';
+/**
+ * Default styles for AgentChat component
+ * Following the app-studio design system with 4px grid, Inter/Geist fonts, and neutral palette
+ */
+export declare const DefaultAgentChatStyles: {
+    container: ViewProps;
+    header: ViewProps;
+    messageList: ViewProps;
+    emptyState: ViewProps;
+    inputArea: ViewProps;
+    attachmentArea: ViewProps;
+    message: ViewProps;
+    userMessage: ViewProps;
+    botMessage: ViewProps;
+    thoughtMessage: ViewProps;
+    loadingMessage: ViewProps;
+    messageHeader: ViewProps;
+    messageContent: ViewProps;
+    messageFooter: ViewProps;
+    timestamp: ViewProps;
+    avatar: ViewProps;
+    userAvatar: ViewProps;
+    botAvatar: ViewProps;
+    attachmentPreview: ViewProps;
+    attachmentRemove: ViewProps;
+    typingIndicator: ViewProps;
+    typingDot: ViewProps;
+    functionCall: ViewProps;
+    functionResponse: ViewProps;
+    codeBlock: ViewProps;
+    inlineData: ViewProps;
+    errorMessage: ViewProps;
+};
+/**
+ * Animation styles for typing indicator
+ */
+export declare const TypingAnimationStyles: {
+    dot1: {
+        animationDelay: string;
+    };
+    dot2: {
+        animationDelay: string;
+    };
+    dot3: {
+        animationDelay: string;
+    };
+};
+/**
+ * Responsive breakpoints for AgentChat
+ */
+export declare const AgentChatBreakpoints: {
+    mobile: string;
+    tablet: string;
+    desktop: string;
+};
+/**
+ * Size variants for AgentChat
+ */
+export declare const AgentChatSizes: {
+    sm: {
+        container: {
+            height: string;
+        };
+        messageList: {
+            minHeight: string;
+            maxHeight: string;
+        };
+    };
+    md: {
+        container: {
+            height: string;
+        };
+        messageList: {
+            minHeight: string;
+            maxHeight: string;
+        };
+    };
+    lg: {
+        container: {
+            height: string;
+        };
+        messageList: {
+            minHeight: string;
+            maxHeight: string;
+        };
+    };
+    xl: {
+        container: {
+            height: string;
+        };
+        messageList: {
+            minHeight: string;
+            maxHeight: string;
+        };
+    };
+};
+/**
+ * Theme variants for AgentChat
+ */
+export declare const AgentChatThemes: {
+    light: {
+        container: {
+            backgroundColor: string;
+        };
+        header: {
+            backgroundColor: string;
+        };
+        messageList: {
+            backgroundColor: string;
+        };
+        inputArea: {
+            backgroundColor: string;
+        };
+    };
+    dark: {
+        container: {
+            backgroundColor: string;
+        };
+        header: {
+            backgroundColor: string;
+        };
+        messageList: {
+            backgroundColor: string;
+        };
+        inputArea: {
+            backgroundColor: string;
+        };
+    };
+};

package/dist/components/adk/AgentChat/AgentChat/AgentChat.view.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AgentChatProps } from './AgentChat.props';
+import { useAgentChat } from './AgentChat.state';
+export interface AgentChatViewProps extends Omit<AgentChatProps, 'sessionId'>, ReturnType<typeof useAgentChat> {
+}
+/**
+ * AgentChat View Component
+ *
+ * Renders the complete chat interface with message list, input area, and controls
+ */
+declare const AgentChatView: React.FC<AgentChatViewProps>;
+export default AgentChatView;

package/dist/components/adk/AgentChat/AgentChat/AgentMessage.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { AgentMessage as AgentMessageType } from './AgentChat.props';
+export interface AgentMessageProps {
+    message: AgentMessageType;
+    showTimestamp?: boolean;
+    showAvatar?: boolean;
+    isLast?: boolean;
+    views?: {
+        container?: any;
+        content?: any;
+        timestamp?: any;
+        avatar?: any;
+    };
+}
+/**
+ * AgentMessage Component
+ *
+ * Renders individual messages in the chat with support for different message types,
+ * attachments, function calls, code execution, and more.
+ */
+export declare const AgentMessage: React.FC<AgentMessageProps>;

package/dist/components/adk/AgentChat/AgentChat/AgentTypingIndicator.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * AgentTypingIndicator Component
+ *
+ * Shows an animated typing indicator when the agent is processing a response
+ */
+export declare const AgentTypingIndicator: React.FC;

package/dist/components/adk/AgentChat/AgentChat/MessageAttachmentPreview.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MessageAttachment } from './AgentChat.props';
+export interface MessageAttachmentPreviewProps {
+    attachment: MessageAttachment;
+    onRemove: () => void;
+}
+/**
+ * MessageAttachmentPreview Component
+ *
+ * Shows a preview of attached files with the ability to remove them
+ */
+export declare const MessageAttachmentPreview: React.FC<MessageAttachmentPreviewProps>;

package/dist/components/adk/AgentChat/AgentChat.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { AgentChatProps } from './AgentChat/AgentChat.props';
+/**
+ * AgentChat Component
+ *
+ * A comprehensive chat interface for interacting with ADK agents.
+ * Supports real-time messaging, file uploads, agent responses, and session management.
+ *
+ * @example
+ * ```tsx
+ * <AgentChat
+ *   appName="my-agent"
+ *   userId="user123"
+ *   onSessionCreate={(session) => console.log('Session created:', session)}
+ *   onMessageSent={(message) => console.log('Message sent:', message)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom styling and configuration
+ * <AgentChat
+ *   appName="my-agent"
+ *   userId="user123"
+ *   enableFileUpload={true}
+ *   enableAudioRecording={true}
+ *   enableVideoRecording={true}
+ *   maxFileSize={10 * 1024 * 1024} // 10MB
+ *   apiBaseUrl="http://localhost:3000/adk"
+ *   views={{
+ *     container: { backgroundColor: 'color.gray.50' },
+ *     messageList: { maxHeight: '400px' },
+ *     inputArea: { borderRadius: '12px' }
+ *   }}
+ * />
+ * ```
+ */
+declare const AgentChat: React.FC<AgentChatProps>;
+export default AgentChat;
+export { AgentChat };
+export type { AgentChatProps };

package/dist/components/adk/AgentChat/examples/default.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+/**
+ * Default AgentChat Example
+ *
+ * Demonstrates basic usage of the AgentChat component with ADK agents
+ */
+export declare const DefaultDemo: () => React.JSX.Element;
+/**
+ * Minimal AgentChat Example
+ *
+ * Shows the simplest possible usage
+ */
+export declare const MinimalDemo: () => React.JSX.Element;
+/**
+ * Customized AgentChat Example
+ *
+ * Shows advanced customization options
+ */
+export declare const CustomizedDemo: () => React.JSX.Element;
+/**
+ * Agent with Function Calls Example
+ *
+ * Demonstrates function call capabilities
+ */
+export declare const FunctionCallsDemo: () => React.JSX.Element;