@pingux/astro 2.107.0-alpha.1 → 2.107.0-alpha.3

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -914,6 +914,64 @@ declare const _default: {
                     fill: string;
                 };
             };
+            deleteAttachment: {
+                backgroundColor: string;
+                border: string;
+                borderColor: string;
+                size: string;
+                p: string;
+                cursor: string;
+                transition: string;
+                outline: string;
+                borderRadius: string;
+                path: {
+                    fill: string;
+                };
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+                '&.is-hovered': {
+                    backgroundColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-pressed': {
+                    backgroundColor: string;
+                    borderColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+            };
+            inverted: {
+                cursor: string;
+                transition: string;
+                outline: string;
+                path: {
+                    fill: string;
+                };
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+                '&.is-pressed': {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+                '&.is-hovered': {
+                    border: string;
+                    boxShadow: string;
+                    borderColor: string;
+                    backgroundColor: string;
+                };
+                '&.is-disabled': {
+                    backgroundColor: string;
+                };
+            };
         };
         modalCloseButton: {
             position: string;
@@ -1847,6 +1905,27 @@ declare const _default: {
         };
     };
     variants: {
+        attachment: {
+            container: {
+                backgroundColor: string;
+                mt: string;
+                borderRadius: string;
+                border: string;
+                borderColor: string;
+                position: string;
+                maxWidth: string;
+                minWidth: string;
+                '&.is-full-screen': {
+                    maxWidth: string;
+                    minWidth: string;
+                };
+            };
+            iconWrapper: {
+                position: string;
+                top: string;
+                right: string;
+            };
+        };
         navBar: {
             container: {
                 width: string;

package/lib/cjs/styles/themes/next-gen/variants/button.d.ts

@@ -681,6 +681,64 @@ declare const buttons: {
                 fill: string;
             };
         };
+        deleteAttachment: {
+            backgroundColor: string;
+            border: string;
+            borderColor: string;
+            size: string;
+            p: string;
+            cursor: string;
+            transition: string;
+            outline: string;
+            borderRadius: string;
+            path: {
+                fill: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            '&.is-hovered': {
+                backgroundColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
+        inverted: {
+            cursor: string;
+            transition: string;
+            outline: string;
+            path: {
+                fill: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+            };
+            '&.is-hovered': {
+                border: string;
+                boxShadow: string;
+                borderColor: string;
+                backgroundColor: string;
+            };
+            '&.is-disabled': {
+                backgroundColor: string;
+            };
+        };
     };
     modalCloseButton: {
         position: string;

package/lib/cjs/styles/themes/next-gen/variants/button.js

@@ -294,7 +294,40 @@ var iconButtons = {
       outlineOffset: '1px'
     })
   }),
-  copyButton: _codeView.copyButton
+  copyButton: _codeView.copyButton,
+  deleteAttachment: _objectSpread(_objectSpread({}, baseIconButton), {}, {
+    backgroundColor: 'white',
+    border: '1px solid',
+    borderColor: 'gray-300',
+    size: '24px',
+    p: '4px'
+  }),
+  inverted: {
+    cursor: 'pointer',
+    transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out',
+    outline: 'none',
+    path: {
+      fill: 'white'
+    },
+    '&.is-focused': {
+      outline: '2px solid',
+      outlineColor: 'primary',
+      outlineOffset: '3px'
+    },
+    '&.is-pressed': {
+      backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex(),
+      borderColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.125, 'rgb').hex()
+    },
+    '&.is-hovered': {
+      border: 'none !important',
+      boxShadow: 'none !important',
+      borderColor: 'none !important',
+      backgroundColor: _chromaJs["default"].mix(primaryBlue, 'black', 0.075, 'rgb').hex()
+    },
+    '&.is-disabled': {
+      backgroundColor: 'gray-300'
+    }
+  }
 };
 var buttons = {
   neutral: neutral,

package/lib/cjs/styles/themes/next-gen/variants/input.js

@@ -28,6 +28,7 @@ var readOnlyandDisabledStyles = {
 };
 var input = {
   fontSize: 'md',
+  fontFamily: 'standard',
   p: '0.75rem',
   backgroundColor: 'background.base',
   borderColor: 'border.input',
@@ -38,6 +39,15 @@ var input = {
   '&::placeholder': _text.text.placeholder
 };
 exports.input = input;
+input.promptInput = _objectSpread(_objectSpread({}, input), {}, {
+  pl: '0px',
+  border: 'none',
+  outline: 'none !important',
+  '&.is-focused': {
+    border: 'none !important',
+    outline: 'none !important'
+  }
+});
 input.search = _objectSpread(_objectSpread({}, input), {}, {
   '&.is-disabled': _objectSpread(_objectSpread({}, readOnlyandDisabledStyles), {}, {
     '> input': _objectSpread({}, readOnlyandDisabledStyles)
@@ -108,6 +118,15 @@ var fieldControlWrapper = {
 };
 exports.fieldControlWrapper = fieldControlWrapper;
 input.fieldControlWrapper = _objectSpread({}, fieldControlWrapper);
+input.promptInputWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper), {}, {
+  border: '1px solid',
+  borderColor: 'border.input',
+  px: '.75rem',
+  borderRadius: '4px',
+  '&.is-focused': {
+    boxShadow: '0 1px 1px rgba(0,0,0,.075), 0 0 0 .0625rem blue'
+  }
+});
 input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper), {}, {
   borderColor: 'border.input',
   borderStyle: 'solid',

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -207,6 +207,27 @@ export declare const badges: {
     };
 };
 declare const _default: {
+    attachment: {
+        container: {
+            backgroundColor: string;
+            mt: string;
+            borderRadius: string;
+            border: string;
+            borderColor: string;
+            position: string;
+            maxWidth: string;
+            minWidth: string;
+            '&.is-full-screen': {
+                maxWidth: string;
+                minWidth: string;
+            };
+        };
+        iconWrapper: {
+            position: string;
+            top: string;
+            right: string;
+        };
+    };
     navBar: {
         container: {
             width: string;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.badges = exports.badgeDeleteButton = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _Attachment = _interopRequireDefault(require("../../../../components/AIComponents/Attachment/Attachment.styles"));
 var _codeView = _interopRequireDefault(require("../codeView/codeView"));
 var _avatar = require("./avatar");
 var _button = _interopRequireDefault(require("./button"));
@@ -310,6 +311,7 @@ var overlayPanel = {
   }
 };
 var _default = {
+  attachment: _Attachment["default"],
   navBar: _navbar.navBar,
   fieldHelperText: fieldHelperText,
   message: _messages.message,

package/lib/cjs/types/promptInput.d.ts

@@ -0,0 +1,42 @@
+import type { PressEvent } from '@react-types/shared';
+import { IconTypeExtended } from './icon';
+import { TextFieldProps } from './textField';
+export interface PromptInputProps extends TextFieldProps {
+    attachmentProps?: object;
+    value: string;
+    onFileChange?: (files: FileProps[]) => void;
+    onCancel?: (event: PressEvent) => void;
+    onSubmit?: (event: PressEvent) => void;
+    isLoading?: boolean;
+    uploadButtonContainerProps?: object;
+    uploadButtonProps?: object;
+    fileInputButtonProps?: object;
+    isFullScreen?: boolean;
+}
+export interface AttachmentProps {
+    title: string;
+    isFullScreen?: boolean;
+    fileType: string;
+    removeFile: (id: string) => void;
+    id: string;
+    className?: string;
+    containerProps?: object;
+    iconWrapperProps?: object;
+    deleteButtonProps?: object;
+    icon?: IconTypeExtended;
+}
+export interface FileProps {
+    id: string;
+    name: string;
+    downloadLink: string;
+    fileType: string;
+    status: string;
+    fileObj: object;
+}
+export interface PromptUploadButtonProps {
+    uploadButtonContainerProps?: object;
+    value: string;
+    isLoading?: boolean;
+    onSubmit?: (event: PressEvent) => void;
+    onCancel?: (event: PressEvent) => void;
+}

package/lib/cjs/types/promptInput.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/AIComponents/Attachment/Attachment.js

@@ -0,0 +1,98 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from 'react';
+import CloseIcon from '@pingux/mdi-react/CloseIcon';
+import PaperOutlineIcon from '@pingux/mdi-react/PaperOutlineIcon';
+import { useStatusClasses } from '../../../hooks';
+import { Box, Icon, IconButton, IconWrapper, Text } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var getFileExtension = function getFileExtension(fullString) {
+  var fileExtensionPattern = /\.([0-9a-z]+)(?:[?#]|$)/i;
+  var ext = fullString.match(fileExtensionPattern);
+  if (ext) {
+    return ext[1];
+  }
+  return 'unknown file type';
+};
+var Attachment = function Attachment(props) {
+  var title = props.title,
+    fileType = props.fileType,
+    removeFile = props.removeFile,
+    isFullScreen = props.isFullScreen,
+    className = props.className,
+    id = props.id,
+    containerProps = props.containerProps,
+    iconWrapperProps = props.iconWrapperProps,
+    _props$icon = props.icon,
+    icon = _props$icon === void 0 ? PaperOutlineIcon : _props$icon,
+    deleteButtonProps = props.deleteButtonProps;
+  var _useStatusClasses = useStatusClasses(className, {
+      isFullScreen: isFullScreen
+    }),
+    classNames = _useStatusClasses.classNames;
+  return ___EmotionJSX(Box, _extends({
+    variant: "attachment.container",
+    className: classNames
+  }, containerProps), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    px: "lg",
+    py: "md"
+  }, ___EmotionJSX(IconWrapper, {
+    isCircle: true,
+    title: {
+      name: 'File Icon'
+    },
+    icon: icon,
+    color: "red",
+    size: "sm",
+    wrapperProps: _objectSpread({
+      size: '36px',
+      minHeight: '36px',
+      minWidth: '36px',
+      p: '9px'
+    }, iconWrapperProps)
+  }), ___EmotionJSX(Box, {
+    sx: {
+      ml: 'md'
+    }
+  }, ___EmotionJSX(Text, {
+    as: "h5",
+    sx: {
+      fontWeight: 2,
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    }
+  }, title), ___EmotionJSX(Text, {
+    sx: {
+      textOverflow: 'ellipsis'
+    },
+    variant: "small"
+  }, fileType.toLocaleUpperCase()))), ___EmotionJSX(Box, {
+    variant: "attachment.iconWrapper"
+  }, ___EmotionJSX(IconButton, _extends({
+    "aria-label": "remove attachment",
+    "data-testid": "remove-attachment",
+    onPress: function onPress() {
+      return removeFile(id);
+    },
+    variant: "deleteAttachment"
+  }, deleteButtonProps), ___EmotionJSX(Icon, {
+    title: {
+      name: 'Remove Attachment Icon'
+    },
+    icon: CloseIcon
+  }))));
+};
+export default Attachment;

package/lib/components/AIComponents/Attachment/Attachment.styles.js

@@ -0,0 +1,23 @@
+var container = {
+  backgroundColor: 'light',
+  mt: '12px',
+  borderRadius: '16px',
+  border: '1px solid',
+  borderColor: 'gray-200',
+  position: 'relative',
+  maxWidth: '15rem',
+  minWidth: '15rem',
+  '&.is-full-screen': {
+    maxWidth: '20rem',
+    minWidth: '20rem'
+  }
+};
+var iconWrapper = {
+  position: 'absolute',
+  top: '-8px',
+  right: '-8px'
+};
+export default {
+  container: container,
+  iconWrapper: iconWrapper
+};

package/lib/components/AIComponents/Attachment/index.js

@@ -0,0 +1 @@
+export { default } from './Attachment';

package/lib/components/AIComponents/PromptInput/PromptInput.js

@@ -0,0 +1,133 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["attachmentProps", "onFileChange", "isFullScreen", "isLoading", "fileInputButtonProps", "value", "onCancel", "onSubmit", "uploadButtonContainerProps", "uploadButtonProps"];
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _URL from "@babel/runtime-corejs3/core-js-stable/url";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { v4 as uuid } from 'uuid';
+import { useField, useLocalOrForwardRef } from '../../../hooks';
+import { Box, FileInputField, Input } from '../../../index';
+import statuses from '../../../utils/devUtils/constants/statuses';
+import Attachment, { getFileExtension } from '../Attachment/Attachment';
+import PromptUploadButton from './PromptUploadButton';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var PromptInput = /*#__PURE__*/forwardRef(function (props, ref) {
+  var attachmentProps = props.attachmentProps,
+    onFileChange = props.onFileChange,
+    isFullScreen = props.isFullScreen,
+    isLoading = props.isLoading,
+    fileInputButtonProps = props.fileInputButtonProps,
+    value = props.value,
+    onCancel = props.onCancel,
+    onSubmit = props.onSubmit,
+    uploadButtonContainerProps = props.uploadButtonContainerProps,
+    uploadButtonProps = props.uploadButtonProps,
+    others = _objectWithoutProperties(props, _excluded);
+  var firstUpdate = useRef(true);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    userFiles = _useState2[0],
+    setUserFiles = _useState2[1];
+  var handleFileSelect = function handleFileSelect(event, files) {
+    var arrayWithNewFiles = _Array$from(files);
+    var filesWithIdAndLink = _mapInstanceProperty(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
+      return {
+        fileObj: newFile,
+        name: newFile.name,
+        id: uuid(),
+        downloadLink: _URL.createObjectURL(newFile),
+        status: statuses.DEFAULT,
+        fileType: getFileExtension(newFile.name)
+      };
+    });
+    setUserFiles(function (prevFiles) {
+      var _context;
+      return _concatInstanceProperty(_context = []).call(_context, prevFiles, filesWithIdAndLink);
+    });
+  };
+  useEffect(function () {
+    if (firstUpdate.current) {
+      firstUpdate.current = false;
+      return;
+    }
+    if (onFileChange) {
+      onFileChange(userFiles);
+    }
+  }, [userFiles, onFileChange]);
+  var handleFileRemove = function handleFileRemove(id) {
+    setUserFiles(_filterInstanceProperty(userFiles).call(userFiles, function (_file) {
+      return _file.id !== id;
+    }));
+  };
+  var _useField = useField(others),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps;
+  var inputRef = useLocalOrForwardRef(ref);
+  return ___EmotionJSX(Box, _extends({
+    variant: "forms.input.fieldContainer"
+  }, fieldContainerProps), ___EmotionJSX(Box, _extends({
+    variant: "forms.input.promptInputWrapper"
+  }, fieldControlWrapperProps), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "1.5rem",
+    sx: {
+      overflowX: 'auto',
+      overflowY: 'hidden',
+      whiteSpace: 'nowrap'
+    }
+  }, _mapInstanceProperty(userFiles).call(userFiles, function (_ref) {
+    var name = _ref.name,
+      fileType = _ref.fileType,
+      id = _ref.id;
+    return ___EmotionJSX(Attachment, _extends({
+      key: id,
+      title: name,
+      fileType: fileType,
+      removeFile: handleFileRemove,
+      id: id,
+      isFullScreen: isFullScreen
+    }, attachmentProps));
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    justifyContent: "center",
+    flexGrow: "1"
+  }, ___EmotionJSX(Box, {
+    mr: "md"
+  }, ___EmotionJSX(FileInputField, _extends({
+    onFileSelect: handleFileSelect,
+    onRemove: handleFileRemove,
+    fileList: [],
+    isIconButton: true,
+    buttonProps: {
+      sx: {
+        size: '24px',
+        padding: '0px'
+      }
+    },
+    sx: {
+      width: 'fit-content',
+      border: 'none',
+      p: '0px'
+    },
+    "aria-label": "add attachment"
+  }, fileInputButtonProps))), ___EmotionJSX(Input, _extends({
+    ref: inputRef
+  }, fieldControlInputProps, {
+    variant: "forms.input.promptInput",
+    "data-testid": "prompt-input"
+  })), ___EmotionJSX(PromptUploadButton, _extends({
+    isLoading: isLoading,
+    value: value,
+    onSubmit: onSubmit,
+    onCancel: onCancel
+  }, uploadButtonProps, {
+    uploadButtonContainerProps: uploadButtonContainerProps
+  })))));
+});
+export default PromptInput;

package/lib/components/AIComponents/PromptInput/PromptInput.stories.js

@@ -0,0 +1,61 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useState } from 'react';
+import { AstroProvider, Box, NextGenTheme } from '../../..';
+import { booleanArg } from '../../../utils/docUtils/docArgTypes';
+import PromptInput from './PromptInput';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Ai Components/Prompt Input',
+  component: PromptInput,
+  argTypes: {
+    isLoading: _objectSpread({}, booleanArg)
+  }
+};
+export var Default = function Default(args) {
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    attachments = _useState4[0],
+    setAttachments = _useState4[1];
+  var onFileChange = function onFileChange(files) {
+    console.log(files);
+    setAttachments(files);
+  };
+  var onCancel = function onCancel(event) {
+    console.log(event);
+  };
+  var onSubmit = function onSubmit(event) {
+    console.log(event);
+    console.log(attachments);
+  };
+  return ___EmotionJSX(AstroProvider, {
+    themeOverrides: [NextGenTheme]
+  }, ___EmotionJSX(Box, {
+    maxWidth: "768px"
+  }, ___EmotionJSX(PromptInput, _extends({}, args, {
+    placeholder: "Enter a prompt here",
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    },
+    value: value,
+    "aria-label": "test",
+    onFileChange: onFileChange,
+    onSubmit: onSubmit,
+    onCancel: onCancel
+  }))));
+};