@app-studio/web 0.9.20 → 0.9.22

package/dist/web.esm.js

@@ -14216,7 +14216,7 @@ var PromptExamples = _ref => {
   }, views == null ? void 0 : views.text), example.text)))));
 };
 
-var _excluded$H = ["onSubmit", "placeholder", "loading", "disabled", "isAgentRunning", "leftButtons", "rightButtons", "onStopAgent", "loadingText", "autoFocus", "sandboxId", "hideAttachments", "attachmentText", "promptExamples", "showReferenceImageButton", "errorMessage", "size", "shape", "variant", "views", "mentionData", "mentionTrigger", "onMentionSelect", "value", "handleChange", "handleSubmit", "editableRef", "fileInputRef", "isUploading", "isDraggingOver", "uploadedFiles", "removeUploadedFile", "setPendingFiles", "setUploadedFiles", "setIsUploading", "selectedModel", "handleModelChange", "modelOptions", "subscriptionStatus", "canAccessModel", "isGuideTipShown", "hideGuideTip", "isReferenceImageModalShown", "toggleReferenceImageModal", "handlePromptExampleSelect", "handleDragOver", "handleDragLeave", "handleReferenceImageUpload", "removeReferenceImage", "setFileAsReference"];
+var _excluded$H = ["onSubmit", "placeholder", "loading", "disabled", "isAgentRunning", "leftButtons", "rightButtons", "onStopAgent", "loadingText", "autoFocus", "sandboxId", "hideAttachments", "attachmentText", "promptExamples", "suggestions", "showReferenceImageButton", "errorMessage", "size", "shape", "variant", "views", "mentionData", "mentionTrigger", "onMentionSelect", "value", "handleChange", "handleSubmit", "editableRef", "fileInputRef", "isUploading", "isDraggingOver", "uploadedFiles", "removeUploadedFile", "setPendingFiles", "setUploadedFiles", "setIsUploading", "selectedModel", "handleModelChange", "modelOptions", "subscriptionStatus", "canAccessModel", "isGuideTipShown", "hideGuideTip", "isReferenceImageModalShown", "toggleReferenceImageModal", "handlePromptExampleSelect", "handleDragOver", "handleDragLeave", "handleReferenceImageUpload", "removeReferenceImage", "setFileAsReference"];
 var ChatInputView = _ref => {
   var _value$trim$length;
   var {
@@ -14233,6 +14233,7 @@ var ChatInputView = _ref => {
       hideAttachments = false,
       attachmentText = '',
       promptExamples = [],
+      suggestions = [],
       showReferenceImageButton = false,
       errorMessage,
       size = 'md',
@@ -14386,12 +14387,8 @@ var ChatInputView = _ref => {
     placeholder: placeholder,
     disabled: disabled && !isAgentRunning,
     autoFocus: autoFocus,
-    suggestions: (promptExamples == null ? void 0 : promptExamples.map(example => ({
-      id: example.id,
-      text: example.text,
-      description: undefined
-    }))) || [],
-    showSuggestions: promptExamples && promptExamples.length > 0 && !value,
+    suggestions: suggestions || [],
+    showSuggestions: suggestions && suggestions.length > 0 && !value,
     onSuggestionSelect: suggestion => {
       handleChange(suggestion.text);
     },
@@ -28413,7 +28410,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
  *
@@ -28431,6 +28428,10 @@ var AgentChatView = _ref => {
       enableAudioRecording = false,
       enableVideoRecording = false,
       views,
+      containerProps,
+      colorScheme = 'blue',
+      compact = false,
+      rounded = true,
       ariaLabel = 'Agent Chat',
       ariaDescribedBy,
       // State from hook
@@ -28464,7 +28465,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);
       }
@@ -28486,7 +28487,37 @@ var AgentChatView = _ref => {
     selectedFiles.forEach(file => URL.revokeObjectURL(file.url));
     setSelectedFiles([]);
   };
-  return /*#__PURE__*/React.createElement(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.createElement(View, Object.assign({}, DefaultAgentChatStyles.container, getThemeStyles(), containerProps, views == null ? void 0 : views.container, props, {
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy
   }), /*#__PURE__*/React.createElement(View, Object.assign({}, DefaultAgentChatStyles.header, views == null ? void 0 : views.header), /*#__PURE__*/React.createElement(Horizontal, {
@@ -29472,7 +29503,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
  *
@@ -29492,6 +29523,10 @@ var AgentSessionView = _ref => {
       showRefreshButton = true,
       compactMode = false,
       views,
+      containerProps,
+      colorScheme = 'blue',
+      layout = 'list',
+      showPreviews = true,
       ariaLabel = 'Agent Session Manager',
       ariaDescribedBy,
       // State from hook
@@ -29575,7 +29610,45 @@ var AgentSessionView = _ref => {
       minute: '2-digit'
     });
   };
-  return /*#__PURE__*/React.createElement(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.createElement(View, Object.assign({}, DefaultAgentSessionStyles.container, getThemeStyles(), containerProps, views == null ? void 0 : views.container, props, {
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy
   }), /*#__PURE__*/React.createElement(View, Object.assign({}, DefaultAgentSessionStyles.header, views == null ? void 0 : views.header), /*#__PURE__*/React.createElement(Horizontal, {