@app-studio/web 0.9.22 → 0.9.25

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/docs/api-reference/form/chat-input.md

@@ -1,6 +1,6 @@
 # ChatInput
 
-The ChatInput component is a customizable chat input field with support for file uploads, prompt examples, and reference images.
+The ChatInput component is a customizable chat input field with support for file uploads and prompt examples.
 
 ## Import
 
@@ -30,8 +30,6 @@ import { ChatInput } from '@app-studio/web';
 | onGuideClose | () => void | undefined | Callback function when the guide tip is closed |
 | promptExamples | PromptExample[] | [] | List of prompt examples |
 | onPromptExampleSelect | (example: PromptExample) => void | undefined | Callback function when a prompt example is selected |
-| showReferenceImageButton | boolean | false | Whether to show the reference image button |
-| onReferenceImageClick | () => void | undefined | Callback function when the reference image button is clicked |
 | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Size of the chat input |
 | shape | 'default' \| 'sharp' \| 'rounded' \| 'pillShaped' | 'rounded' | Shape of the chat input |
 | variant | 'default' \| 'outline' \| 'none' | 'default' | Visual variant of the chat input |
@@ -182,8 +180,6 @@ The ChatInput component can be customized using the `views` prop:
     guideTip: { /* styles for the guide tip */ },
     promptExamples: { /* styles for the prompt examples container */ },
     promptExampleItem: { /* styles for each prompt example item */ },
-    referenceImageButton: { /* styles for the reference image button */ },
-    referenceImageModal: { /* styles for the reference image modal */ },
     attachments: { /* styles for the attachments container */ },
     attachmentItem: { /* styles for each attachment item */ },
     submitButton: { /* styles for the submit button */ },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@app-studio/web",
-  "version": "0.9.22",
+  "version": "0.9.25",
   "main": "dist/index.js",
   "typings": "dist/components/index.d.ts",
   "files": [
@@ -85,7 +85,6 @@
     "zustand": "^4.3.8"
   },
   "devDependencies": {
-    "@babel/standalone": "^7.27.3",
     "@anthropic-ai/sdk": "^0.39.0",
     "@app-studio/react-api": "^0.15.28",
     "@app-studio/react-request": "^0.1.3",
@@ -94,6 +93,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
+    "@babel/standalone": "^7.27.3",
     "@commitlint/cli": "^19.2.0",
     "@commitlint/config-conventional": "^19.1.0",
     "@google/generative-ai": "^0.24.0",
@@ -154,6 +154,7 @@
     "replicate": "^1.0.1",
     "router": "^1.3.8",
     "simple-git": "^3.22.0",
+    "store": "^2.0.12",
     "style-loader": "^3.3.2",
     "tiktoken": "^1.0.20",
     "ts-loader": "^9.4.2",

package/dist/components/Accordion/examples/collapsible.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const CollapsibleAccordion: () => React.JSX.Element;

package/dist/components/Accordion/examples/default.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultAccordion: () => React.JSX.Element;

package/dist/components/Accordion/examples/disabled.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DisabledAccordion: () => React.JSX.Element;

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

@@ -1,5 +0,0 @@
-export * from './default';
-export * from './variants';
-export * from './multiple';
-export * from './disabled';
-export * from './collapsible';

package/dist/components/Accordion/examples/multiple.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const MultipleAccordion: () => React.JSX.Element;

package/dist/components/Accordion/examples/variants.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const AccordionVariants: () => React.JSX.Element;

package/dist/components/Alert/examples/darkMode.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DarkModeDemo: () => React.JSX.Element;

package/dist/components/Alert/examples/default.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultDemo: () => React.JSX.Element;

package/dist/components/Alert/examples/designSystem.d.ts

@@ -1,12 +0,0 @@
-/**
- * Alert Examples - Design System
- *
- * Showcases the Alert component following the design guidelines:
- * - Typography: Inter/Geist font, specific sizes/weights
- * - Spacing: 4px grid system
- * - Colors: Neutral palette with semantic colors
- * - Rounded corners: Consistent border radius
- * - Transitions: Subtle animations
- */
-import React from 'react';
-export declare const DesignSystemAlerts: () => React.JSX.Element;

package/dist/components/Alert/examples/icon.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const IconDemo: () => React.JSX.Element;

package/dist/components/Alert/examples/styles.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const StylesDemo: () => React.JSX.Element;

package/dist/components/Alert/examples/variant.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const VariantDemo: () => React.JSX.Element;

package/dist/components/AspectRatio/examples/default.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultDemo: () => React.JSX.Element;

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

@@ -1,2 +0,0 @@
-export * from './default';
-export * from './ratio';

package/dist/components/AspectRatio/examples/ratio.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const RatioDemo: () => React.JSX.Element;

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

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultDemo: () => React.JSX.Element;

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

@@ -1,12 +0,0 @@
-/**
- * Avatar Examples - Design System
- *
- * Showcases the Avatar component following the design guidelines:
- * - Typography: Inter/Geist font, specific sizes/weights
- * - Spacing: 4px grid system
- * - Colors: Neutral palette with semantic colors
- * - Rounded corners: Consistent border radius
- * - Transitions: Subtle animations
- */
-import React from 'react';
-export declare const DesignSystemAvatars: () => React.JSX.Element;

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

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const FallbackDemo: () => React.JSX.Element;

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

@@ -1,5 +0,0 @@
-export * from './default';
-export * from './designSystem';
-export * from './fallback';
-export * from './size';
-export * from './styles';

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

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const SizeDemo: () => React.JSX.Element;

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

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const StylesDemo: () => React.JSX.Element;

package/dist/components/Background/examples/aurora.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const AuroraDemo: () => React.JSX.Element;

package/dist/components/Background/examples/combinedEffects.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const CombinedEffectsDemo: () => React.JSX.Element;

package/dist/components/Background/examples/default.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultDemo: () => React.JSX.Element;

package/dist/components/Background/examples/grid.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const GridDemo: () => React.JSX.Element;

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

@@ -1,8 +0,0 @@
-export { DefaultDemo } from './default';
-export { AuroraDemo } from './aurora';
-export { MeteorsDemo } from './meteors';
-export { WallDemo } from './wall';
-export { ParticlesDemo } from './particles';
-export { GridDemo } from './grid';
-export { RipplesDemo } from './ripples';
-export { CombinedEffectsDemo } from './combinedEffects';

package/dist/components/Background/examples/meteors.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const MeteorsDemo: () => React.JSX.Element;

package/dist/components/Background/examples/particles.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ParticlesDemo: () => React.JSX.Element;

package/dist/components/Background/examples/ripples.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const RipplesDemo: () => React.JSX.Element;

package/dist/components/Background/examples/wall.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const WallDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/colorScheme.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ColorSchemeDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/content.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ContentDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/darkMode.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DarkModeDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/default.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/designSystem.d.ts

@@ -1,12 +0,0 @@
-/**
- * Badge Examples - Design System
- *
- * Showcases the Badge component following the design guidelines:
- * - Typography: Inter/Geist font, specific sizes/weights
- * - Spacing: 4px grid system
- * - Colors: Neutral palette with semantic colors
- * - Rounded corners: Consistent border radius
- * - Transitions: Subtle animations
- */
-import React from 'react';
-export declare const DesignSystemBadges: () => React.JSX.Element;

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

@@ -1,9 +0,0 @@
-export * from './content';
-export * from './default';
-export * from './designSystem';
-export * from './position';
-export * from './shape';
-export * from './size';
-export * from './styles';
-export * from './variant';
-export * from './darkMode';

package/dist/components/Badge/examples/position.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const PositionDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/shape.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ShapeDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/size.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const SizeDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/styles.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const StylesDemo: () => React.JSX.Element;

package/dist/components/Badge/examples/variant.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const VariantDemo: () => React.JSX.Element;

package/dist/components/Button/examples/animatedStroke.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const AnimatedStrokeButtons: () => React.JSX.Element;

package/dist/components/Button/examples/autofocus.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ExternalButton: () => React.JSX.Element;

package/dist/components/Button/examples/borderMoving.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const BorderMovingButtons: () => React.JSX.Element;

package/dist/components/Button/examples/colorScheme.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ColoredButtons: () => React.JSX.Element;

package/dist/components/Button/examples/default.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DefaultButton: () => React.JSX.Element;

package/dist/components/Button/examples/designSystem.d.ts

@@ -1,12 +0,0 @@
-/**
- * Button Examples - Design System
- *
- * Showcases the Button component following the design guidelines:
- * - Typography: Inter/Geist font, specific sizes/weights
- * - Spacing: 4px grid system
- * - Colors: Neutral palette with semantic colors
- * - Rounded corners: Consistent border radius
- * - Transitions: Subtle animations
- */
-import React from 'react';
-export declare const DesignSystemButtons: () => React.JSX.Element;

package/dist/components/Button/examples/effectsTest.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const EffectsTestButtons: () => React.JSX.Element;

package/dist/components/Button/examples/icon.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const IconButtons: () => React.JSX.Element;

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

@@ -1,12 +0,0 @@
-export * from './animatedStroke';
-export * from './autofocus';
-export * from './borderMoving';
-export * from './default';
-export * from './designSystem';
-export * from './icon';
-export * from './isAuto';
-export * from './isDisabled';
-export * from './loaderProps';
-export * from './shadow';
-export * from './size';
-export * from './variant';

package/dist/components/Button/examples/isAuto.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const BorderedButtons: () => React.JSX.Element;

package/dist/components/Button/examples/isDisabled.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const DisabledButton: () => React.JSX.Element;

package/dist/components/Button/examples/loaderProps.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const LoaderButtons: () => React.JSX.Element;

package/dist/components/Button/examples/shadow.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ShadowButton: () => React.JSX.Element;

package/dist/components/Button/examples/size.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ButtonSizes: () => React.JSX.Element;

package/dist/components/Button/examples/variant.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const VariantButtons: () => React.JSX.Element;

package/dist/components/Card/examples/contextStyling.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ContextStylingDemo: () => React.JSX.Element;

package/dist/components/Card/examples/custom.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const CustomDemo: () => React.JSX.Element;