@app-studio/web 0.9.28 → 0.9.30

package/dist/web.esm.js

@@ -4050,13 +4050,13 @@ var UploadView = _ref => {
     textProps
   }), progress < 100 && (icon || /*#__PURE__*/React.createElement(UploadIcon, Object.assign({
     widthHeight: 32
-  }, iconProps))), !selectedFile && text && renderText({
+  }, iconProps))), !isLoading && !selectedFile && text && renderText({
     text,
     textProps
   }), isLoading && renderProgress({
     progress,
     progressProps
-  }), errorMessage && renderError({
+  }), !isLoading && errorMessage && renderError({
     errorMessage,
     errorMessageProps
   }), /*#__PURE__*/React.createElement(View, Object.assign({
@@ -17189,6 +17189,139 @@ var FormikUploader = _ref => {
 };
 FormikUploader.displayName = 'FormikUploader';
 
+var AttachmentPreview = _ref => {
+  var {
+    files,
+    onRemove,
+    maxHeight = '120px',
+    views = {}
+  } = _ref;
+  if (files.length === 0) {
+    return null;
+  }
+  var formatFileSize = useCallback(bytes => {
+    if (bytes < 1024) return bytes + " B";
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+  }, []);
+  return /*#__PURE__*/React.createElement(View, Object.assign({
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "6px",
+    padding: "8px 0",
+    maxHeight: maxHeight,
+    overflowY: "auto"
+  }, views == null ? void 0 : views.container), files.map((file, index) => {
+    var previewUrl = file.url || '';
+    var isImage = file.type.startsWith('image/');
+    var isVideo = file.type.startsWith('video/');
+    var isAudio = file.type.startsWith('audio/');
+    return /*#__PURE__*/React.createElement(Vertical, Object.assign({
+      key: index,
+      alignItems: "center",
+      gap: "6px",
+      padding: "4px 8px",
+      borderRadius: "6px",
+      backgroundColor: "color.gray.100",
+      position: "relative",
+      animate: {
+        from: {
+          opacity: 0,
+          scale: 0.9
+        },
+        to: {
+          opacity: 1,
+          scale: 1
+        }
+      },
+      animationDuration: 0.2
+    }, views == null ? void 0 : views.item), /*#__PURE__*/React.createElement(HoverCard, null, /*#__PURE__*/React.createElement(HoverCard.Trigger, null, /*#__PURE__*/React.createElement(View, {
+      position: "relative"
+    }, isImage && previewUrl && (/*#__PURE__*/React.createElement(Image, {
+      src: previewUrl,
+      alt: file.name,
+      width: "60px",
+      height: "60px",
+      objectFit: "cover",
+      borderRadius: "4px"
+    })), isVideo && previewUrl && (/*#__PURE__*/React.createElement(View, {
+      as: "video",
+      src: previewUrl,
+      alt: file.name,
+      controls: false,
+      muted: true,
+      width: "60px",
+      height: "60px",
+      objectFit: "cover",
+      borderRadius: "4px"
+    })), isAudio && (/*#__PURE__*/React.createElement(Center, {
+      width: "60px",
+      height: "60px",
+      backgroundColor: "color.gray.200",
+      borderRadius: "4px"
+    }, /*#__PURE__*/React.createElement(AudioIcon, {
+      widthHeight: 24,
+      color: "color.black"
+    }))), !isImage && !isVideo && !isAudio && (/*#__PURE__*/React.createElement(Center, {
+      width: "60px",
+      height: "60px",
+      backgroundColor: "color.gray.200",
+      borderRadius: "4px"
+    }, /*#__PURE__*/React.createElement(FileIcon, {
+      widthHeight: 24,
+      color: "color.black"
+    }))), onRemove && (/*#__PURE__*/React.createElement(Button$1, {
+      position: "absolute",
+      top: "-4px",
+      right: "-4px",
+      width: "20px",
+      height: "20px",
+      minWidth: "20px",
+      minHeight: "20px",
+      borderRadius: "50%",
+      backgroundColor: "color.red.500",
+      color: "white",
+      fontSize: 14,
+      fontWeight: "bold",
+      padding: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      border: "2px solid white",
+      _hover: {
+        backgroundColor: 'color.red.600'
+      },
+      onClick: e => {
+        e.stopPropagation();
+        onRemove(index);
+      },
+      "aria-label": "Remove " + file.name
+    }, "\u00D7")))), /*#__PURE__*/React.createElement(HoverCard.Content, null, isImage && previewUrl && (/*#__PURE__*/React.createElement(Image, {
+      src: previewUrl,
+      alt: file.name,
+      maxWidth: "300px"
+    })), isVideo && previewUrl && (/*#__PURE__*/React.createElement(View, {
+      as: "video",
+      src: previewUrl,
+      controls: true,
+      maxWidth: "300px"
+    })), isAudio && previewUrl && (/*#__PURE__*/React.createElement(View, {
+      as: "audio",
+      src: previewUrl,
+      controls: true,
+      width: '100%'
+    })), /*#__PURE__*/React.createElement(Text, Object.assign({
+      marginTop: "4px",
+      truncateText: true,
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      width: '100%',
+      fontSize: 12
+    }, views == null ? void 0 : views.name), file.name, " (", formatFileSize(file.size), ")"))));
+  }));
+};
+
 var SliderComponent$1 = props => {
   // Get state and handlers from the custom hook
   var sliderState = useSliderState(props);
@@ -35659,5 +35792,5 @@ var AgentEval = props => {
   return /*#__PURE__*/React.createElement(AgentEvalView, Object.assign({}, props, evalState));
 };
 
-export { Accordion, AgentChat, AgentEval, AgentSession, AgentTrace, Alert, ArrowIcon, AspectRatio, AttachmentIcon, AudioIcon, AudioInput, AudioWaveform, Avatar, Background, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, Calendar, CalendarIcon, CameraIcon, Card, Carousel, Chart, ChartIcon, ChatInput, CheckIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ColorInput, ColorPicker, ComboBox, Command, ContextMenu, CookieConsent, CopyIcon, CountryPicker, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DragHandleLinesIcon, DropdownMenu, DustBinIcon, EditIcon, EmojiPicker, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, Flow, FolderIcon, FormikChatInput, FormikCheckbox, FormikColorInput, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSlider, FormikSwitch, FormikTagInput, FormikTextArea, FormikTextField, FormikUploader, GiftIcon, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, KanbanBoard, LikeIcon, Link, LinkedinIcon, Loader, LoadingSpinnerIcon, LocationIcon, LockIcon, LogoutIcon, MagicWandIcon, MediaPreview, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PowerOffIcon, PrintIcon, ProfileIcon, ProgressBar, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, SendIcon, Separator, SettingsIcon, ShapeIcon, ShareButton, ShareIcon, ShieldIcon, Sidebar, Slider, SliderIcon, SpinnerIcon, StarIcon, StatusIndicator, StopIcon, SuccessIcon, Switch, Table, Tabs, TagInput, Text, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Title, Toast, Toggle, ToggleGroup, Tooltip, TrashIcon, Tree, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, showToast, useMessageStore, useModalStore, useToast$1 as useToast };
+export { Accordion, AgentChat, AgentEval, AgentSession, AgentTrace, Alert, ArrowIcon, AspectRatio, AttachmentIcon, AttachmentPreview, AudioIcon, AudioInput, AudioWaveform, Avatar, Background, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, Calendar, CalendarIcon, CameraIcon, Card, Carousel, Chart, ChartIcon, ChatInput, CheckIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ColorInput, ColorPicker, ComboBox, Command, ContextMenu, CookieConsent, CopyIcon, CountryPicker, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DragHandleLinesIcon, DropdownMenu, DustBinIcon, EditIcon, EmojiPicker, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, Flow, FolderIcon, FormikChatInput, FormikCheckbox, FormikColorInput, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSlider, FormikSwitch, FormikTagInput, FormikTextArea, FormikTextField, FormikUploader, GiftIcon, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, KanbanBoard, LikeIcon, Link, LinkedinIcon, Loader, LoadingSpinnerIcon, LocationIcon, LockIcon, LogoutIcon, MagicWandIcon, MediaPreview, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PowerOffIcon, PrintIcon, ProfileIcon, ProgressBar, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, SendIcon, Separator, SettingsIcon, ShapeIcon, ShareButton, ShareIcon, ShieldIcon, Sidebar, Slider, SliderIcon, SpinnerIcon, StarIcon, StatusIndicator, StopIcon, SuccessIcon, Switch, Table, Tabs, TagInput, Text, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Title, Toast, Toggle, ToggleGroup, Tooltip, TrashIcon, Tree, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, showToast, useMessageStore, useModalStore, useToast$1 as useToast };
 //# sourceMappingURL=web.esm.js.map