@app-studio/web 0.9.39 → 0.9.43

package/docs/components/Vertical.mdx

@@ -6,14 +6,14 @@ A flexible layout component that arranges its children in a vertical stack using
   ```tsx
   import { Vertical } from '@app-studio/web';
   // or from app-studio
-  import { Vertical } from 'app-studio';
+  import { Vertical } from '@app-studio/web';
   ```
 
 ### **Basic Usage**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
-import { View, Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { View, Text } from '@app-studio/web';
 
 export const BasicVertical = () => (
   <Vertical>
@@ -27,8 +27,8 @@ export const BasicVertical = () => (
 ### **With Gap Spacing**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
-import { View, Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { View, Text } from '@app-studio/web';
 
 export const VerticalWithGap = () => (
   <Vertical gap={16}>
@@ -48,8 +48,8 @@ export const VerticalWithGap = () => (
 ### **Alignment Options**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
-import { View, Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { View, Text } from '@app-studio/web';
 
 export const VerticalAlignment = () => (
   <Vertical gap={20}>
@@ -91,8 +91,8 @@ export const VerticalAlignment = () => (
 ### **Justification Options**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
-import { View, Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { View, Text } from '@app-studio/web';
 
 export const VerticalJustification = () => (
   <Vertical gap={20}>
@@ -138,9 +138,9 @@ export const VerticalJustification = () => (
 ### **Form Layout Example**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
+import { Vertical } from '@app-studio/web';
 import { TextField, Button, Checkbox } from '@app-studio/web';
-import { Text } from 'app-studio';
+import { Text } from '@app-studio/web';
 
 export const FormLayout = () => (
   <Vertical gap={20} width="100%" maxWidth={400} padding={24}>
@@ -188,8 +188,8 @@ export const FormLayout = () => (
 ### **Navigation Menu Example**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
-import { View, Text, Horizontal } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { View, Text, Horizontal } from '@app-studio/web';
 import { HomeIcon, UserIcon, SettingsIcon, LogoutIcon } from '@app-studio/web';
 
 export const NavigationMenu = () => (
@@ -261,8 +261,8 @@ export const NavigationMenu = () => (
 ### **Card Layout Example**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
-import { View, Text, Horizontal } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { View, Text, Horizontal } from '@app-studio/web';
 import { Button } from '@app-studio/web';
 import { StarIcon, HeartIcon, ShareIcon } from '@app-studio/web';
 
@@ -344,8 +344,8 @@ The Vertical component extends ViewProps from app-studio, inheriting all standar
 ### **Responsive Design**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
-import { View, Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { View, Text } from '@app-studio/web';
 
 export const ResponsiveVertical = () => (
   <Vertical
@@ -377,8 +377,8 @@ export const ResponsiveVertical = () => (
 **Sticky Header with Scrollable Content:**
 ```tsx
 import React from 'react';
-import { Vertical } from 'app-studio';
-import { View, Text } from 'app-studio';
+import { Vertical } from '@app-studio/web';
+import { View, Text } from '@app-studio/web';
 
 export const StickyHeaderLayout = () => (
   <Vertical height="100vh">
@@ -417,8 +417,8 @@ export const StickyHeaderLayout = () => (
 **Split Layout:**
 ```tsx
 import React from 'react';
-import { Vertical, Horizontal } from 'app-studio';
-import { View, Text } from 'app-studio';
+import { Vertical, Horizontal } from '@app-studio/web';
+import { View, Text } from '@app-studio/web';
 
 export const SplitLayout = () => (
   <Horizontal height="100vh">
@@ -544,7 +544,7 @@ export const SplitLayout = () => (
 The Vertical component works seamlessly with other layout components:
 
 ```tsx
-import { Vertical, Horizontal, Center } from 'app-studio';
+import { Vertical, Horizontal, Center } from '@app-studio/web';
 
 // Nested layouts
 <Vertical gap={20}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@app-studio/web",
-  "version": "0.9.39",
+  "version": "0.9.43",
   "main": "dist/index.js",
   "typings": "dist/components/index.d.ts",
   "files": [

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

@@ -1,35 +0,0 @@
-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

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

package/docs/adk-components.md

@@ -1,319 +0,0 @@
-# ADK Agent Components
-
-This document provides an overview of the React components created for compatibility with the ADK (Agent Development Kit) system.
-
-## Overview
-
-The ADK Agent Components are a collection of React components designed to work seamlessly with ADK agents. These components are self-contained, handling their own state and API communications, providing a complete interface for agent interaction, session management, and more.
-
-## Components
-
-### 1. AgentChat Component
-
-**Location**: `src/components/adk/AgentChat/`
-
-A comprehensive chat interface for interacting with ADK agents.
-
-#### Key Features:
-- ✅ Real-time messaging via Server-Sent Events (SSE)
-- ✅ File upload support (images, videos, audio, documents)
-- ✅ Audio recording with live waveform visualization
-- ✅ Function call visualization and execution
-- ✅ Code execution and result display
-- ✅ Agent thought process visualization
-- ✅ Evaluation and scoring support
-- ✅ Streaming and non-streaming responses
-- ✅ Fully customizable styling and theming
-- ✅ Accessibility-first design
-
-#### Usage:
-```tsx
-import { AgentChat } from '@app-studio/web';
-
-<AgentChat
-  appName="my-agent"
-  userId="user123"
-  apiBaseUrl="https://your-adk-api.com"
-  enableFileUpload={true}
-  enableAudioRecording={true}
-  enableStreaming={true}
-  enableThoughts={true}
-  onSessionCreate={(session) => console.log('Session created:', session)}
-  onMessageSent={(message) => console.log('Message sent:', message)}
-/>
-```
-
-#### Props:
-- `appName` (required): Name of the ADK agent application.
-- `userId` (required): Unique identifier for the user.
-- `sessionId`: Existing session ID to resume.
-- `apiBaseUrl`: Base URL for ADK API endpoints.
-- `enableFileUpload`: Enable file attachment functionality.
-- `enableAudioRecording`: Enable audio recording from the microphone.
-- `enableStreaming`: Enable real-time streaming responses.
-- `enableThoughts`: Show agent thought processes.
-- `views`: Custom styling options.
-
-### 2. AgentSession Component
-
-**Location**: `src/components/adk/AgentSession/`
-
-A comprehensive session management component for ADK agents.
-
-#### Key Features:
-- ✅ Session creation, listing, and selection
-- ✅ Session deletion and management
-- ✅ Import/export functionality
-- ✅ Search and filtering capabilities
-- ✅ Auto-refresh and real-time updates
-- ✅ Session metadata and tagging
-- ✅ Compact and full display modes
-- ✅ Bulk operations support
-
-#### Usage:
-```tsx
-import { AgentSession } from '@app-studio/web';
-
-<AgentSession
-  appName="my-agent"
-  userId="user123"
-  apiBaseUrl="https://your-adk-api.com"
-  showSessionHistory={true}
-  enableSessionImport={true}
-  enableSessionExport={true}
-  onSessionSelect={(session) => console.log('Selected:', session)}
-  onSessionCreate={(session) => console.log('Created:', session)}
-/>
-```
-
-#### Props:
-- `appName` (required): Name of the ADK agent application.
-- `userId` (required): Unique identifier for the user.
-- `apiBaseUrl`: Base URL for ADK API endpoints.
-- `showSessionHistory`: Show session history list.
-- `enableSessionImport`: Enable session import from JSON.
-- `enableSessionExport`: Enable session export to JSON.
-- `enableSessionSearch`: Enable search functionality.
-- `maxSessions`: Maximum number of sessions to display.
-- `views`: Custom styling options.
-
-## Architecture
-
-### Component Structure
-
-Each component follows the established app-studio pattern:
-
-```
-ComponentName/
-├── ComponentName.tsx                 # Main component file
-├── ComponentName/                    # Inner folder for core files
-│   ├── ComponentName.props.ts        # Props interface definitions
-│   ├── ComponentName.state.ts        # Custom state hook
-│   ├── ComponentName.view.tsx        # Presentational component
-│   ├── ComponentName.style.ts        # Style constants
-│   └── [SupportingComponents].tsx    # Additional components
-└── examples/                         # Usage examples
-    └── default.tsx                   # Default usage examples
-```
-
-### ADK Integration
-
-The components are self-contained and integrate directly with an ADK backend using `fetch`. You can specify the backend URL via the `apiBaseUrl` prop.
-
-#### Required Backend Endpoints:
-- `POST /sessions` - Create new agent session
-- `POST /run_sse` - Send message with streaming response
-- `POST /run` - Send message with regular response
-- `GET /sessions/:id` - Get session details
-- `DELETE /sessions/:id` - Delete session
-- `POST /sessions/import` - Import session
-
-#### Message Format:
-The components use the same message format as the original ADK system:
-
-```typescript
-interface AgentRunRequest {
-  appName: string;
-  userId: string;
-  sessionId: string;
-  newMessage: {
-    role: string;
-    parts: MessagePart[];
-  };
-  streaming?: boolean;
-}
-```
-
-### Direct API Interaction (`useAdk` Hook)
-For developers who need to interact with the ADK API without using the pre-built UI components, a `useAdk` hook is available. This hook provides functions for all core ADK operations like creating sessions, running agents, and managing responses.
-
-**Location**: `src/components/adk/useAdk.ts`
-
-```tsx
-import { useAdk } from '@app-studio/web';
-
-const { createSession, runAgent, sessions, isLoadingSessions } = useAdk();
-```
-
-### Design System Compliance
-
-All components follow the app-studio design system:
-
-- **Typography**: Inter/Geist font family with standardized sizes (xs:10, sm:12, md:14, lg:16, xl:20)
-- **Spacing**: 4px grid system for consistent spacing
-- **Colors**: app-studio color system (color.[color].[number]) instead of hardcoded values
-- **Shapes**: Consistent border radius and rounded corners
-- **Animations**: Using app-studio Animation object with proper duration and timing
-
-### Reusability
-
-The components are designed to be:
-
-- **Modular**: Each component can be used independently
-- **Customizable**: Extensive styling options via the `views` prop
-- **Accessible**: ARIA labels, keyboard navigation, and screen reader support
-- **Responsive**: Works across mobile, tablet, and desktop breakpoints
-- **Themeable**: Support for light/dark themes and custom color schemes
-
-## Examples and Documentation
-
-### Demo Pages
-
-- **AgentChat Demo**: `src/pages/agentChat.page.tsx`
-- **Component Examples**: Available in each component's `examples/` directory
-
-### Usage Examples
-
-Each component includes multiple usage examples:
-
-1. **Default Usage**: Basic implementation with minimal configuration
-2. **Minimal Usage**: Simplest possible setup
-3. **Customized Usage**: Advanced styling and configuration options
-4. **Feature Demos**: Showcasing specific features like function calls, file uploads, etc.
-
-## Integration Guide
-
-### 1. Installation
-
-The components are part of the app-studio component library and can be imported directly:
-
-```tsx
-import { AgentChat, AgentSession } from '@app-studio/web';
-```
-
-### 2. Backend Setup
-
-Ensure your ADK backend provides the required endpoints and follows the expected API format.
-
-### 3. Basic Implementation
-
-```tsx
-import React from 'react';
-import { AgentChat, AgentSession } from '@app-studio/web';
-import { View, Horizontal } from 'app-studio';
-
-const MyAgentApp = () => {
-  return (
-    <View height="100vh" padding={20}>
-      <Horizontal gap={20} height="100%">
-        {/* Session Management */}
-        <View width="300px">
-          <AgentSession
-            appName="my-agent"
-            userId="user123"
-            apiBaseUrl="https://api.example.com"
-          />
-        </View>
-        
-        {/* Chat Interface */}
-        <View flex={1}>
-          <AgentChat
-            appName="my-agent"
-            userId="user123"
-            apiBaseUrl="https://api.example.com"
-          />
-        </View>
-      </Horizontal>
-    </View>
-  );
-};
-```
-
-### 4. Advanced Configuration
-
-```tsx
-<AgentChat
-  appName="my-agent"
-  userId="user123"
-  apiBaseUrl="https://api.example.com"
-  enableFileUpload={true}
-  enableStreaming={true}
-  enableThoughts={true}
-  maxFileSize={10 * 1024 * 1024}
-  allowedFileTypes={['image/*', 'video/*', 'application/pdf']}
-  onSessionCreate={(session) => {
-    console.log('New session:', session);
-  }}
-  onMessageSent={(message) => {
-    console.log('Message sent:', message);
-  }}
-  onError={(error) => {
-    console.error('Chat error:', error);
-  }}
-  views={{
-    container: { backgroundColor: 'color.gray.50' },
-    userMessage: { backgroundColor: 'color.blue.500' },
-    botMessage: { backgroundColor: 'color.green.100' },
-  }}
-/>
-```
-
-## Complete Component Library
-
-All planned components have been successfully implemented:
-
-### ✅ **AgentTrace Component**
-- **Timeline visualization** of agent execution traces
-- **Event filtering and search** capabilities
-- **Performance metrics** and analytics
-- **Real-time trace updates** via WebSocket
-- **Multiple visualization types** (timeline, tree, table, flamegraph)
-- **Export functionality** (JSON, CSV, SVG)
-
-### ✅ **AgentEval Component**
-- **Evaluation creation and management** interface
-- **Test case execution** and monitoring
-- **Results analysis** and comparison
-- **Metrics calculation** and visualization
-- **Batch evaluation** support
-- **Template system** for reusable evaluations
-
-### ✅ **Agent Service Integration**
-- **Enhanced service layer** for backend communication
-- **React Provider pattern** for service management
-- **Utility functions** for common operations
-- **Real-time updates** via WebSocket and SSE
-- **Error handling and retry logic**
-- **Connection status monitoring**
-
-## Demo Page
-
-A comprehensive demo page showcasing all components is available at:
-- **File**: `src/pages/adkComponents.page.tsx`
-- **Features**: Interactive demos, customization examples, integration guides
-
-## Support
-
-For questions, issues, or contributions related to the ADK Agent Components, please refer to the main app-studio documentation or create an issue in the repository.
-
-## Production Ready
-
-All ADK Agent Components are **production-ready** and provide:
-- ✅ Full ADK backend compatibility
-- ✅ TypeScript support with comprehensive type definitions
-- ✅ Accessibility compliance (ARIA labels, keyboard navigation)
-- ✅ Responsive design for mobile, tablet, and desktop
-- ✅ Comprehensive error handling and loading states
-- ✅ Real-time updates and streaming support
-- ✅ Extensive customization options
-- ✅ Complete documentation and examples