@app-studio/web 0.9.20 → 0.9.21

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

@@ -95,16 +95,35 @@ export interface AgentChatViews {
     container?: ViewProps;
     header?: ViewProps;
     messageList?: ViewProps;
+    inputArea?: ViewProps;
+    attachmentArea?: ViewProps;
     message?: ViewProps;
     userMessage?: ViewProps;
     botMessage?: ViewProps;
-    inputArea?: ViewProps;
+    systemMessage?: ViewProps;
+    messageContent?: ViewProps;
+    messageTimestamp?: ViewProps;
+    messageAvatar?: ViewProps;
+    messageActions?: ViewProps;
     inputField?: ViewProps;
     sendButton?: ViewProps;
-    attachmentArea?: ViewProps;
+    attachButton?: ViewProps;
+    recordButton?: ViewProps;
+    inputToolbar?: ViewProps;
     loadingIndicator?: ViewProps;
-    errorMessage?: ViewProps;
     typingIndicator?: ViewProps;
+    errorMessage?: ViewProps;
+    emptyState?: ViewProps;
+    functionCall?: ViewProps;
+    functionResponse?: ViewProps;
+    functionArgs?: ViewProps;
+    codeBlock?: ViewProps;
+    codeOutput?: ViewProps;
+    attachmentPreview?: ViewProps;
+    attachmentItem?: ViewProps;
+    attachmentRemoveButton?: ViewProps;
+    thoughtBubble?: ViewProps;
+    thoughtContent?: ViewProps;
 }
 /**
  * Event Handlers
@@ -147,11 +166,15 @@ export interface AgentChatProps extends ViewProps, AgentChatEventHandlers {
     showTypingIndicator?: boolean;
     autoScroll?: boolean;
     views?: AgentChatViews;
+    containerProps?: ViewProps;
     initialMessages?: AgentMessage[];
     initialSession?: AgentSession;
     enableFunctionCalls?: boolean;
     enableCodeExecution?: boolean;
     enableEvaluation?: boolean;
+    colorScheme?: 'blue' | 'purple' | 'green' | 'orange' | 'red' | 'gray';
+    compact?: boolean;
+    rounded?: boolean;
     ariaLabel?: string;
     ariaDescribedBy?: string;
 }

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

@@ -14,7 +14,7 @@ export declare const MinimalDemo: () => React.JSX.Element;
 /**
  * Customized AgentChat Example
  *
- * Shows advanced customization options
+ * Shows advanced customization options with enhanced views prop
  */
 export declare const CustomizedDemo: () => React.JSX.Element;
 /**

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

@@ -75,23 +75,50 @@ export interface EvaluationConfig {
 export interface AgentEvalViews {
     container?: ViewProps;
     header?: ViewProps;
+    toolbar?: ViewProps;
     evaluationList?: ViewProps;
-    evaluationItem?: ViewProps;
-    activeEvaluationItem?: ViewProps;
     createPanel?: ViewProps;
     resultsPanel?: ViewProps;
     metricsPanel?: ViewProps;
+    configPanel?: ViewProps;
+    evaluationItem?: ViewProps;
+    activeEvaluationItem?: ViewProps;
+    evaluationTitle?: ViewProps;
+    evaluationDescription?: ViewProps;
+    evaluationStatus?: ViewProps;
+    evaluationProgress?: ViewProps;
+    evaluationMetrics?: ViewProps;
+    evaluationTimestamp?: ViewProps;
     testCaseList?: ViewProps;
     testCaseItem?: ViewProps;
+    testCaseInput?: ViewProps;
+    testCaseOutput?: ViewProps;
+    testCaseExpected?: ViewProps;
+    testCaseResult?: ViewProps;
+    testCaseMetrics?: ViewProps;
     progressBar?: ViewProps;
     statusIndicator?: ViewProps;
+    statusBadge?: ViewProps;
+    scoreDisplay?: ViewProps;
+    durationDisplay?: ViewProps;
     actionButtons?: ViewProps;
+    runButton?: ViewProps;
+    stopButton?: ViewProps;
     exportButton?: ViewProps;
     refreshButton?: ViewProps;
+    deleteButton?: ViewProps;
+    duplicateButton?: ViewProps;
     searchInput?: ViewProps;
+    filterDropdown?: ViewProps;
+    sortDropdown?: ViewProps;
+    statusFilter?: ViewProps;
     emptyState?: ViewProps;
     loadingState?: ViewProps;
     errorState?: ViewProps;
+    chartContainer?: ViewProps;
+    metricsChart?: ViewProps;
+    resultsTable?: ViewProps;
+    summaryCard?: ViewProps;
 }
 /**
  * Event Handlers
@@ -151,12 +178,16 @@ export interface AgentEvalProps extends ViewProps, AgentEvalEventHandlers {
     showProgressIndicators?: boolean;
     compactMode?: boolean;
     views?: AgentEvalViews;
+    containerProps?: ViewProps;
     initialEvaluations?: EvaluationRun[];
     selectedEvaluationId?: string;
     availableTemplates?: EvaluationTemplate[];
     enableRealTimeUpdates?: boolean;
     enableResultCaching?: boolean;
     enableCustomMetrics?: boolean;
+    colorScheme?: 'blue' | 'purple' | 'green' | 'orange' | 'red' | 'gray';
+    layout?: 'list' | 'grid' | 'dashboard';
+    showCharts?: boolean;
     ariaLabel?: string;
     ariaDescribedBy?: string;
 }

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

@@ -45,20 +45,38 @@ export interface SessionSummary {
 export interface AgentSessionViews {
     container?: ViewProps;
     header?: ViewProps;
+    toolbar?: ViewProps;
     sessionList?: ViewProps;
+    sessionActions?: ViewProps;
+    filtersPanel?: ViewProps;
     sessionItem?: ViewProps;
     activeSessionItem?: ViewProps;
     sessionInfo?: ViewProps;
-    sessionActions?: ViewProps;
+    sessionTitle?: ViewProps;
+    sessionDescription?: ViewProps;
+    sessionMetadata?: ViewProps;
+    sessionTimestamp?: ViewProps;
+    sessionTags?: ViewProps;
+    sessionStats?: ViewProps;
     createButton?: ViewProps;
     deleteButton?: ViewProps;
     exportButton?: ViewProps;
     importButton?: ViewProps;
     refreshButton?: ViewProps;
+    selectButton?: ViewProps;
+    duplicateButton?: ViewProps;
     searchInput?: ViewProps;
+    filterDropdown?: ViewProps;
+    sortDropdown?: ViewProps;
+    dateRangePicker?: ViewProps;
+    tagFilter?: ViewProps;
     emptyState?: ViewProps;
     loadingState?: ViewProps;
     errorState?: ViewProps;
+    bulkActions?: ViewProps;
+    selectAllCheckbox?: ViewProps;
+    bulkDeleteButton?: ViewProps;
+    bulkExportButton?: ViewProps;
 }
 /**
  * Event Handlers
@@ -114,6 +132,7 @@ export interface AgentSessionProps extends ViewProps, AgentSessionEventHandlers
     showRefreshButton?: boolean;
     compactMode?: boolean;
     views?: AgentSessionViews;
+    containerProps?: ViewProps;
     initialSessions?: AgentSession[];
     selectedSessionId?: string;
     defaultFilters?: SessionFilters;
@@ -121,6 +140,9 @@ export interface AgentSessionProps extends ViewProps, AgentSessionEventHandlers
     enableSessionTags?: boolean;
     enableSessionMetadata?: boolean;
     enableBulkOperations?: boolean;
+    colorScheme?: 'blue' | 'purple' | 'green' | 'orange' | 'red' | 'gray';
+    layout?: 'list' | 'grid' | 'compact';
+    showPreviews?: boolean;
     ariaLabel?: string;
     ariaDescribedBy?: string;
 }

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

@@ -17,6 +17,12 @@ export declare const CompactDemo: () => React.JSX.Element;
  * Shows advanced customization options
  */
 export declare const CustomizedDemo: () => React.JSX.Element;
+/**
+ * Enhanced Customization Example
+ *
+ * Shows comprehensive customization using enhanced views prop and container props
+ */
+export declare const EnhancedCustomizationDemo: () => React.JSX.Element;
 /**
  * Session with Mock Data Example
  *

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

@@ -65,16 +65,47 @@ export interface TraceFilter {
 export interface AgentTraceViews {
     container?: ViewProps;
     header?: ViewProps;
+    toolbar?: ViewProps;
     timeline?: ViewProps;
     eventList?: ViewProps;
+    detailsPanel?: ViewProps;
+    metricsPanel?: ViewProps;
+    filtersPanel?: ViewProps;
     eventItem?: ViewProps;
     selectedEventItem?: ViewProps;
-    metrics?: ViewProps;
-    filters?: ViewProps;
+    eventHeader?: ViewProps;
+    eventContent?: ViewProps;
+    eventMetadata?: ViewProps;
+    eventTimestamp?: ViewProps;
+    eventDuration?: ViewProps;
+    eventType?: ViewProps;
+    eventLevel?: ViewProps;
+    eventTags?: ViewProps;
+    timelineContainer?: ViewProps;
+    timelineAxis?: ViewProps;
+    timelineEvent?: ViewProps;
+    timelineSpan?: ViewProps;
+    timelineMarker?: ViewProps;
+    metricsCard?: ViewProps;
+    performanceChart?: ViewProps;
+    errorRateChart?: ViewProps;
+    latencyChart?: ViewProps;
+    throughputChart?: ViewProps;
     visualization?: ViewProps;
+    flowDiagram?: ViewProps;
+    dependencyGraph?: ViewProps;
+    heatmap?: ViewProps;
+    searchInput?: ViewProps;
+    typeFilter?: ViewProps;
+    levelFilter?: ViewProps;
+    timeRangeFilter?: ViewProps;
+    tagFilter?: ViewProps;
+    durationFilter?: ViewProps;
     exportButton?: ViewProps;
     refreshButton?: ViewProps;
-    searchInput?: ViewProps;
+    clearButton?: ViewProps;
+    expandAllButton?: ViewProps;
+    collapseAllButton?: ViewProps;
     emptyState?: ViewProps;
     loadingState?: ViewProps;
     errorState?: ViewProps;
@@ -127,12 +158,16 @@ export interface AgentTraceProps extends ViewProps, AgentTraceEventHandlers {
     showPerformanceMetrics?: boolean;
     compactMode?: boolean;
     views?: AgentTraceViews;
+    containerProps?: ViewProps;
     initialEvents?: TraceEvent[];
     initialFilter?: TraceFilter;
     selectedEventId?: string;
     enableRealTimeUpdates?: boolean;
     enableEventGrouping?: boolean;
     enableSpanVisualization?: boolean;
+    colorScheme?: 'blue' | 'purple' | 'green' | 'orange' | 'red' | 'gray';
+    layout?: 'timeline' | 'tree' | 'table' | 'graph';
+    showMinimap?: boolean;
     ariaLabel?: string;
     ariaDescribedBy?: string;
 }

package/dist/web.cjs.development.js

@@ -28420,7 +28420,7 @@ var MessageAttachmentPreview = _ref => {
   }, formatFileSize(file.size)))));
 };
 
-var _excluded$1i = ["placeholder", "showTimestamps", "showAvatars", "showTypingIndicator", "autoScroll", "enableFileUpload", "enableAudioRecording", "enableVideoRecording", "views", "ariaLabel", "ariaDescribedBy", "messages", "currentSession", "isLoading", "isTyping", "error", "inputValue", "selectedFiles", "sessionId", "sendMessage", "setInputValue", "handleFileSelect", "removeFile", "messagesEndRef", "setError", "setSelectedFiles"];
+var _excluded$1i = ["placeholder", "showTimestamps", "showAvatars", "showTypingIndicator", "autoScroll", "enableFileUpload", "enableAudioRecording", "enableVideoRecording", "views", "containerProps", "colorScheme", "compact", "rounded", "ariaLabel", "ariaDescribedBy", "messages", "currentSession", "isLoading", "isTyping", "error", "inputValue", "selectedFiles", "sessionId", "sendMessage", "setInputValue", "handleFileSelect", "removeFile", "messagesEndRef", "setError", "setSelectedFiles"];
 /**
  * AgentChat View Component
  *
@@ -28438,6 +28438,10 @@ var AgentChatView = _ref => {
       enableAudioRecording = false,
       enableVideoRecording = false,
       views,
+      containerProps,
+      colorScheme = 'blue',
+      compact = false,
+      rounded = true,
       ariaLabel = 'Agent Chat',
       ariaDescribedBy,
       // State from hook
@@ -28471,7 +28475,7 @@ var AgentChatView = _ref => {
    * Handle message send from ChatInput
    */
   var handleSubmit = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(function* (message, options) {
+    var _ref2 = _asyncToGenerator(function* (message, _options) {
       if (message.trim() || selectedFiles.length > 0) {
         yield sendMessage(message, selectedFiles);
       }
@@ -28493,7 +28497,37 @@ var AgentChatView = _ref => {
     selectedFiles.forEach(file => URL.revokeObjectURL(file.url));
     setSelectedFiles([]);
   };
-  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentChatStyles.container, views == null ? void 0 : views.container, props, {
+  /**
+   * Get dynamic styles based on theme props
+   */
+  var getThemeStyles = () => {
+    var baseStyles = {
+      borderRadius: rounded ? '12px' : '4px',
+      padding: compact ? '8px' : '16px'
+    };
+    var colorStyles = {
+      blue: {
+        borderColor: 'color.blue.200'
+      },
+      purple: {
+        borderColor: 'color.purple.200'
+      },
+      green: {
+        borderColor: 'color.green.200'
+      },
+      orange: {
+        borderColor: 'color.orange.200'
+      },
+      red: {
+        borderColor: 'color.red.200'
+      },
+      gray: {
+        borderColor: 'color.gray.200'
+      }
+    };
+    return Object.assign({}, baseStyles, colorStyles[colorScheme]);
+  };
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentChatStyles.container, getThemeStyles(), containerProps, views == null ? void 0 : views.container, props, {
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy
   }), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentChatStyles.header, views == null ? void 0 : views.header), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
@@ -29479,7 +29513,7 @@ var SessionFilters = _ref => {
   }, "Clear all filters")))));
 };
 
-var _excluded$1j = ["showSessionHistory", "enableSessionImport", "enableSessionExport", "enableSessionDelete", "enableSessionSearch", "showSessionInfo", "showSessionActions", "showCreateButton", "showRefreshButton", "compactMode", "views", "ariaLabel", "ariaDescribedBy", "sessions", "selectedSession", "isLoading", "isCreating", "error", "searchQuery", "filters", "sortOptions", "fetchSessions", "createSession", "selectSession", "deleteSession", "exportSession", "handleFileImport", "setSearchQuery", "setFilters", "setSortOptions", "setError", "fileInputRef", "handleFileSelect"];
+var _excluded$1j = ["showSessionHistory", "enableSessionImport", "enableSessionExport", "enableSessionDelete", "enableSessionSearch", "showSessionInfo", "showSessionActions", "showCreateButton", "showRefreshButton", "compactMode", "views", "containerProps", "colorScheme", "layout", "showPreviews", "ariaLabel", "ariaDescribedBy", "sessions", "selectedSession", "isLoading", "isCreating", "error", "searchQuery", "filters", "sortOptions", "fetchSessions", "createSession", "selectSession", "deleteSession", "exportSession", "handleFileImport", "setSearchQuery", "setFilters", "setSortOptions", "setError", "fileInputRef", "handleFileSelect"];
 /**
  * AgentSession View Component
  *
@@ -29499,6 +29533,10 @@ var AgentSessionView = _ref => {
       showRefreshButton = true,
       compactMode = false,
       views,
+      containerProps,
+      colorScheme = 'blue',
+      layout = 'list',
+      showPreviews = true,
       ariaLabel = 'Agent Session Manager',
       ariaDescribedBy,
       // State from hook
@@ -29582,7 +29620,45 @@ var AgentSessionView = _ref => {
       minute: '2-digit'
     });
   };
-  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentSessionStyles.container, views == null ? void 0 : views.container, props, {
+  /**
+   * Get dynamic styles based on theme props
+   */
+  var getThemeStyles = () => {
+    var colorStyles = {
+      blue: {
+        borderColor: 'color.blue.200'
+      },
+      purple: {
+        borderColor: 'color.purple.200'
+      },
+      green: {
+        borderColor: 'color.green.200'
+      },
+      orange: {
+        borderColor: 'color.orange.200'
+      },
+      red: {
+        borderColor: 'color.red.200'
+      },
+      gray: {
+        borderColor: 'color.gray.200'
+      }
+    };
+    var layoutStyles = {
+      list: {
+        flexDirection: 'column'
+      },
+      grid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+      },
+      compact: {
+        padding: '8px'
+      }
+    };
+    return Object.assign({}, colorStyles[colorScheme], layoutStyles[layout]);
+  };
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentSessionStyles.container, getThemeStyles(), containerProps, views == null ? void 0 : views.container, props, {
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy
   }), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultAgentSessionStyles.header, views == null ? void 0 : views.header), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {