@app-studio/web 0.9.20 → 0.9.22

package/dist/web.umd.development.js

@@ -14191,7 +14191,7 @@
     }, 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 {
@@ -14208,6 +14208,7 @@
         hideAttachments = false,
         attachmentText = '',
         promptExamples = [],
+        suggestions = [],
         showReferenceImageButton = false,
         errorMessage,
         size = 'md',
@@ -14361,12 +14362,8 @@
       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);
       },
@@ -28388,7 +28385,7 @@
     }, 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
    *
@@ -28406,6 +28403,10 @@
         enableAudioRecording = false,
         enableVideoRecording = false,
         views,
+        containerProps,
+        colorScheme = 'blue',
+        compact = false,
+        rounded = true,
         ariaLabel = 'Agent Chat',
         ariaDescribedBy,
         // State from hook
@@ -28439,7 +28440,7 @@
      * 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);
         }
@@ -28461,7 +28462,37 @@
       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, {
@@ -29447,7 +29478,7 @@
     }, "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
    *
@@ -29467,6 +29498,10 @@
         showRefreshButton = true,
         compactMode = false,
         views,
+        containerProps,
+        colorScheme = 'blue',
+        layout = 'list',
+        showPreviews = true,
         ariaLabel = 'Agent Session Manager',
         ariaDescribedBy,
         // State from hook
@@ -29550,7 +29585,45 @@
         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, {