@app-studio/web 0.9.24 → 0.9.26

package/docs/adk-components.md

@@ -4,19 +4,20 @@ This document provides an overview of the React components created for compatibi
 
 ## Overview
 
-The ADK Agent Components are a collection of React components designed to work seamlessly with ADK agents, following the same patterns and protocols used in the original adk-web Angular application. These components provide a complete interface for agent interaction, session management, and more.
+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/AgentChat/`
+**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
@@ -32,7 +33,9 @@ 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)}
@@ -41,18 +44,19 @@ import { AgentChat } from '@app-studio/web';
 ```
 
 #### 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
-- `enableStreaming`: Enable real-time streaming responses
-- `enableThoughts`: Show agent thought processes
-- `views`: Custom styling options
+- `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/AgentSession/`
+**Location**: `src/components/adk/AgentSession/`
 
 A comprehensive session management component for ADK agents.
 
@@ -73,6 +77,7 @@ import { AgentSession } from '@app-studio/web';
 <AgentSession
   appName="my-agent"
   userId="user123"
+  apiBaseUrl="https://your-adk-api.com"
   showSessionHistory={true}
   enableSessionImport={true}
   enableSessionExport={true}
@@ -82,14 +87,15 @@ import { AgentSession } from '@app-studio/web';
 ```
 
 #### Props:
-- `appName` (required): Name of the ADK agent application
-- `userId` (required): Unique identifier for the user
-- `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
+- `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
 
@@ -112,7 +118,7 @@ ComponentName/
 
 ### ADK Integration
 
-The components are designed to integrate with the ADK backend using the same API patterns as the original adk-web application:
+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
@@ -138,6 +144,17 @@ interface AgentRunRequest {
 }
 ```
 
+### 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:
@@ -204,6 +221,7 @@ const MyAgentApp = () => {
           <AgentSession
             appName="my-agent"
             userId="user123"
+            apiBaseUrl="https://api.example.com"
           />
         </View>
         
@@ -212,6 +230,7 @@ const MyAgentApp = () => {
           <AgentChat
             appName="my-agent"
             userId="user123"
+            apiBaseUrl="https://api.example.com"
           />
         </View>
       </Horizontal>
@@ -277,22 +296,6 @@ All planned components have been successfully implemented:
 - **Error handling and retry logic**
 - **Connection status monitoring**
 
-## Service Integration
-
-The ADK components include a comprehensive service layer:
-
-```tsx
-import { AgentServiceProvider, useAgentService } from '@app-studio/web';
-
-// Wrap your app with the service provider
-<AgentServiceProvider config={{ baseUrl: 'https://api.example.com' }}>
-  <MyApp />
-</AgentServiceProvider>
-
-// Use the service in components
-const { service, isConnected } = useAgentService();
-```
-
 ## Demo Page
 
 A comprehensive demo page showcasing all components is available at:
@@ -313,4 +316,4 @@ All ADK Agent Components are **production-ready** and provide:
 - ✅ Comprehensive error handling and loading states
 - ✅ Real-time updates and streaming support
 - ✅ Extensive customization options
-- ✅ Complete documentation and examples
+- ✅ Complete documentation and examples

package/docs/adk-quick-start.md

@@ -19,26 +19,13 @@ import {
   AgentChat, 
   AgentSession, 
   AgentTrace, 
-  AgentEval,
-  AgentServiceProvider 
+  AgentEval 
 } from '@app-studio/web';
 ```
 
-### 2. Wrap with Service Provider
+### 2. Use Components
 
-```tsx
-import { AgentServiceProvider } from '@app-studio/web';
-
-function App() {
-  return (
-    <AgentServiceProvider config={{ baseUrl: 'https://your-adk-api.com' }}>
-      <YourApp />
-    </AgentServiceProvider>
-  );
-}
-```
-
-### 3. Use Components
+The ADK components are self-contained and handle their own API communications. Simply add them to your application and provide the necessary props.
 
 ```tsx
 function YourApp() {
@@ -49,6 +36,7 @@ function YourApp() {
         <AgentSession
           appName="my-agent"
           userId="user123"
+          apiBaseUrl="https://your-adk-api.com"
         />
       </div>
       
@@ -57,6 +45,7 @@ function YourApp() {
         <AgentChat
           appName="my-agent"
           userId="user123"
+          apiBaseUrl="https://your-adk-api.com"
           enableFileUpload={true}
           enableStreaming={true}
         />
@@ -70,13 +59,14 @@ function YourApp() {
 
 ### AgentChat
 **Purpose**: Real-time chat interface with ADK agents
-**Key Features**: File uploads, streaming, function calls, code execution
+**Key Features**: File uploads, audio recording, streaming, function calls, code execution
 
 ```tsx
 <AgentChat
   appName="my-agent"
   userId="user123"
   enableFileUpload={true}
+  enableAudioRecording={true}
   enableStreaming={true}
   enableThoughts={true}
   onMessageSent={(message) => console.log(message)}
@@ -173,7 +163,7 @@ function AgentInterface() {
     container: { backgroundColor: 'color.blue.50' },
     userMessage: { backgroundColor: 'color.blue.500' },
     botMessage: { backgroundColor: 'color.green.100' },
-    input: { borderColor: 'color.blue.300' },
+    inputField: { borderColor: 'color.blue.300' },
   }}
 />
 ```
@@ -259,25 +249,9 @@ import type {
 
 ### Common Issues
 
-1. **Components not rendering**: Ensure you've wrapped your app with `AgentServiceProvider`
-2. **API errors**: Check your backend URL and API endpoints
-3. **Styling issues**: Verify you're using the app-studio color system
-4. **TypeScript errors**: Import types from the correct package
-
-### Debug Mode
-
-Enable debug logging:
-
-```tsx
-<AgentServiceProvider 
-  config={{ 
-    baseUrl: 'https://api.example.com',
-    enableLogging: true 
-  }}
->
-  <App />
-</AgentServiceProvider>
-```
+1.  **API errors**: Check the `apiBaseUrl` prop and ensure your backend URL and API endpoints are correct.
+2.  **Styling issues**: Verify you're using the app-studio color system.
+3.  **TypeScript errors**: Import types from the correct package.
 
 ## Next Steps
 

package/package.json

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

package/docs/adk-customization-guide.md

@@ -1,204 +0,0 @@
-# ADK Components Customization Guide
-
-This guide demonstrates how to customize ADK components using the enhanced `views` prop and `containerProps` for complete control over appearance and behavior.
-
-## Overview
-
-All ADK components now support comprehensive customization through:
-
-1. **Enhanced `views` prop** - Granular control over individual component parts
-2. **Container props** - Direct styling of the main container
-3. **Theme props** - Built-in color schemes and layout options
-4. **Responsive design** - Automatic adaptation across devices
-
-## Component Customization
-
-### AgentChat Component
-
-The AgentChat component supports extensive customization of all its parts:
-
-```tsx
-<AgentChat
-  appName="my-agent"
-  userId="user123"
-  colorScheme="purple"
-  compact={false}
-  rounded={true}
-  containerProps={{
-    backgroundColor: 'color.purple.25',
-    border: '2px solid',
-    borderColor: 'color.purple.300',
-  }}
-  views={{
-    // Main areas
-    container: { backgroundColor: 'color.purple.25' },
-    header: { backgroundColor: 'color.purple.500', color: 'white' },
-    messageList: { backgroundColor: 'color.white', padding: '20px' },
-    inputArea: { backgroundColor: 'color.purple.50', padding: '16px' },
-    
-    // Message styling
-    userMessage: {
-      backgroundColor: 'color.purple.500',
-      color: 'white',
-      borderRadius: '18px 18px 4px 18px',
-      padding: '12px 16px',
-    },
-    botMessage: {
-      backgroundColor: 'color.purple.100',
-      color: 'color.purple.900',
-      borderRadius: '18px 18px 18px 4px',
-      padding: '12px 16px',
-    },
-    
-    // Input components
-    inputField: {
-      borderRadius: '24px',
-      border: '2px solid',
-      borderColor: 'color.purple.200',
-    },
-    sendButton: {
-      backgroundColor: 'color.purple.500',
-      borderRadius: '50%',
-    },
-    
-    // State indicators
-    typingIndicator: {
-      color: 'color.purple.600',
-      backgroundColor: 'color.purple.100',
-      borderRadius: '16px',
-    },
-    
-    // Function calls and code
-    functionCall: {
-      backgroundColor: 'color.purple.50',
-      border: '1px solid',
-      borderColor: 'color.purple.200',
-      borderRadius: '8px',
-    },
-    codeBlock: {
-      backgroundColor: 'color.gray.900',
-      color: 'color.gray.100',
-      borderRadius: '8px',
-    },
-  }}
-/>
-```
-
-### AgentSession Component
-
-The AgentSession component provides comprehensive session management customization:
-
-```tsx
-<AgentSession
-  appName="my-agent"
-  userId="user123"
-  colorScheme="green"
-  layout="list"
-  showPreviews={true}
-  enableBulkOperations={true}
-  containerProps={{
-    backgroundColor: 'color.green.25',
-    border: '2px solid',
-    borderColor: 'color.green.300',
-  }}
-  views={{
-    // Main areas
-    container: { backgroundColor: 'color.green.25' },
-    header: { backgroundColor: 'color.green.500', color: 'white' },
-    sessionList: { backgroundColor: 'color.white', padding: '16px' },
-    
-    // Session items
-    sessionItem: {
-      backgroundColor: 'color.green.50',
-      borderRadius: '8px',
-      padding: '12px',
-      border: '1px solid',
-      borderColor: 'color.green.200',
-    },
-    activeSessionItem: {
-      backgroundColor: 'color.green.100',
-      borderColor: 'color.green.500',
-      borderWidth: '2px',
-    },
-    
-    // Session content
-    sessionTitle: { fontWeight: '600', color: 'color.green.900' },
-    sessionDescription: { color: 'color.green.700' },
-    sessionTimestamp: { color: 'color.green.600', fontSize: '12px' },
-    
-    // Action buttons
-    createButton: {
-      backgroundColor: 'color.green.500',
-      color: 'white',
-      borderRadius: '8px',
-    },
-    deleteButton: {
-      backgroundColor: 'color.red.500',
-      color: 'white',
-      borderRadius: '6px',
-    },
-    
-    // Search and filters
-    searchInput: {
-      borderRadius: '20px',
-      border: '2px solid',
-      borderColor: 'color.green.200',
-    },
-  }}
-/>
-```
-
-## Available Views Properties
-
-### AgentChat Views
-
-- **Main Areas**: `container`, `header`, `messageList`, `inputArea`, `attachmentArea`
-- **Messages**: `message`, `userMessage`, `botMessage`, `systemMessage`, `messageContent`, `messageTimestamp`, `messageAvatar`, `messageActions`
-- **Input**: `inputField`, `sendButton`, `attachButton`, `recordButton`, `inputToolbar`
-- **States**: `loadingIndicator`, `typingIndicator`, `errorMessage`, `emptyState`
-- **Features**: `functionCall`, `functionResponse`, `codeBlock`, `codeOutput`, `thoughtBubble`
-- **Attachments**: `attachmentPreview`, `attachmentItem`, `attachmentRemoveButton`
-
-### AgentSession Views
-
-- **Main Areas**: `container`, `header`, `toolbar`, `sessionList`, `sessionActions`, `filtersPanel`
-- **Session Items**: `sessionItem`, `activeSessionItem`, `sessionInfo`, `sessionTitle`, `sessionDescription`, `sessionMetadata`, `sessionTimestamp`, `sessionTags`, `sessionStats`
-- **Actions**: `createButton`, `deleteButton`, `exportButton`, `importButton`, `refreshButton`, `selectButton`, `duplicateButton`
-- **Search/Filter**: `searchInput`, `filterDropdown`, `sortDropdown`, `dateRangePicker`, `tagFilter`
-- **States**: `emptyState`, `loadingState`, `errorState`
-- **Bulk Operations**: `bulkActions`, `selectAllCheckbox`, `bulkDeleteButton`, `bulkExportButton`
-
-## Theme Options
-
-### Color Schemes
-- `blue` (default)
-- `purple`
-- `green`
-- `orange`
-- `red`
-- `gray`
-
-### Layout Options
-
-**AgentSession Layouts:**
-- `list` - Vertical list layout
-- `grid` - Grid layout for sessions
-- `compact` - Condensed view
-
-**AgentTrace Layouts:**
-- `timeline` - Timeline visualization
-- `tree` - Tree structure
-- `table` - Tabular view
-- `graph` - Graph visualization
-
-## Best Practices
-
-1. **Consistent Color Schemes**: Use the same color scheme across related components
-2. **Responsive Design**: Test customizations across different screen sizes
-3. **Accessibility**: Ensure sufficient color contrast and readable fonts
-4. **Performance**: Avoid overly complex styling that might impact performance
-5. **Maintainability**: Use design tokens from the app-studio color system
-
-## Examples
-
-See the enhanced examples in each component's `examples/default.tsx` file for comprehensive demonstrations of all customization options.

package/docs/adk-customization-summary.md

@@ -1,157 +0,0 @@
-# ADK Components Customization Enhancement Summary
-
-## Overview
-
-The ADK components have been enhanced with comprehensive customization capabilities through expanded `views` props and new container customization options. This provides developers with granular control over every aspect of the component appearance and behavior.
-
-## Key Enhancements
-
-### 1. Enhanced Views Props
-
-All ADK components now support significantly more granular customization through expanded `views` interfaces:
-
-#### AgentChat Views (40+ customizable parts)
-- **Main Areas**: container, header, messageList, inputArea, attachmentArea
-- **Message Components**: userMessage, botMessage, systemMessage, messageContent, messageTimestamp, messageAvatar, messageActions
-- **Input Components**: inputField, sendButton, attachButton, recordButton, inputToolbar
-- **State Indicators**: loadingIndicator, typingIndicator, errorMessage, emptyState
-- **Feature Components**: functionCall, functionResponse, codeBlock, codeOutput, thoughtBubble
-- **Attachment Components**: attachmentPreview, attachmentItem, attachmentRemoveButton
-
-#### AgentSession Views (40+ customizable parts)
-- **Main Areas**: container, header, toolbar, sessionList, sessionActions, filtersPanel
-- **Session Items**: sessionItem, activeSessionItem, sessionInfo, sessionTitle, sessionDescription, sessionMetadata, sessionTimestamp, sessionTags, sessionStats
-- **Action Buttons**: createButton, deleteButton, exportButton, importButton, refreshButton, selectButton, duplicateButton
-- **Search/Filter**: searchInput, filterDropdown, sortDropdown, dateRangePicker, tagFilter
-- **Bulk Operations**: bulkActions, selectAllCheckbox, bulkDeleteButton, bulkExportButton
-
-#### AgentEval Views (50+ customizable parts)
-- **Main Areas**: container, header, toolbar, evaluationList, createPanel, resultsPanel, metricsPanel
-- **Evaluation Items**: evaluationItem, activeEvaluationItem, evaluationTitle, evaluationStatus, evaluationProgress
-- **Test Cases**: testCaseList, testCaseItem, testCaseInput, testCaseOutput, testCaseResult
-- **Progress/Status**: progressBar, statusIndicator, statusBadge, scoreDisplay, durationDisplay
-- **Visualization**: chartContainer, metricsChart, resultsTable, summaryCard
-
-#### AgentTrace Views (50+ customizable parts)
-- **Main Areas**: container, header, toolbar, timeline, eventList, detailsPanel, metricsPanel
-- **Event Components**: eventItem, selectedEventItem, eventHeader, eventContent, eventMetadata
-- **Timeline**: timelineContainer, timelineAxis, timelineEvent, timelineSpan, timelineMarker
-- **Metrics**: metricsCard, performanceChart, errorRateChart, latencyChart, throughputChart
-- **Visualization**: flowDiagram, dependencyGraph, heatmap
-
-### 2. Container Props Support
-
-All components now accept `containerProps` for direct styling of the main container:
-
-```tsx
-<AgentChat
-  containerProps={{
-    backgroundColor: 'color.purple.25',
-    border: '2px solid',
-    borderColor: 'color.purple.300',
-    borderRadius: '12px',
-  }}
-/>
-```
-
-### 3. Theme and Appearance Props
-
-New theme-related props for consistent styling:
-
-- **colorScheme**: `'blue' | 'purple' | 'green' | 'orange' | 'red' | 'gray'`
-- **layout**: Component-specific layout options
-- **compact**: Boolean for condensed layouts
-- **rounded**: Boolean for rounded corners
-- **showPreviews**: Boolean for preview features
-
-### 4. Dynamic Styling
-
-Components now include dynamic styling functions that apply theme-based styles automatically:
-
-```tsx
-const getThemeStyles = () => {
-  const colorStyles = {
-    blue: { borderColor: 'color.blue.200' },
-    purple: { borderColor: 'color.purple.200' },
-    // ... other colors
-  };
-  return colorStyles[colorScheme];
-};
-```
-
-## Implementation Details
-
-### File Changes
-
-1. **Props Interfaces Enhanced**:
-   - `AgentChat/AgentChat.props.ts` - Expanded AgentChatViews interface
-   - `AgentSession/AgentSession.props.ts` - Expanded AgentSessionViews interface
-   - `AgentEval/AgentEval.props.ts` - Expanded AgentEvalViews interface
-   - `AgentTrace/AgentTrace.props.ts` - Expanded AgentTraceViews interface
-
-2. **View Components Updated**:
-   - `AgentChat/AgentChat.view.tsx` - Added theme support and containerProps
-   - `AgentSession/AgentSession.view.tsx` - Added theme support and containerProps
-
-3. **Examples Enhanced**:
-   - `AgentChat/examples/default.tsx` - Comprehensive customization example
-   - `AgentSession/examples/default.tsx` - Enhanced customization example
-
-4. **Documentation Created**:
-   - `docs/adk-customization-guide.md` - Complete customization guide
-   - `docs/adk-customization-summary.md` - This summary document
-
-## Usage Examples
-
-### Basic Customization
-```tsx
-<AgentChat
-  appName="my-agent"
-  userId="user123"
-  colorScheme="purple"
-  views={{
-    userMessage: { backgroundColor: 'color.purple.500' },
-    botMessage: { backgroundColor: 'color.purple.100' },
-  }}
-/>
-```
-
-### Advanced Customization
-```tsx
-<AgentSession
-  appName="my-agent"
-  userId="user123"
-  colorScheme="green"
-  layout="grid"
-  containerProps={{ backgroundColor: 'color.green.25' }}
-  views={{
-    sessionItem: {
-      backgroundColor: 'color.green.50',
-      borderRadius: '8px',
-      padding: '12px',
-    },
-    activeSessionItem: {
-      backgroundColor: 'color.green.100',
-      borderColor: 'color.green.500',
-    },
-  }}
-/>
-```
-
-## Benefits
-
-1. **Complete Control**: Developers can customize every visual aspect of the components
-2. **Consistent Theming**: Built-in color schemes ensure visual consistency
-3. **Responsive Design**: Components adapt to different layouts and screen sizes
-4. **Maintainable**: Uses app-studio design tokens for consistent styling
-5. **Flexible**: Supports both simple theme-based and complex custom styling
-
-## Next Steps
-
-The enhanced customization system provides a solid foundation for:
-- Creating branded component themes
-- Building custom layouts and designs
-- Implementing responsive component behaviors
-- Maintaining visual consistency across applications
-
-All components are now ready for comprehensive customization while maintaining their core functionality and accessibility features.