@instructure/canvas-rce 5.13.2 → 5.13.6

package/es/rce/plugins/shared/Upload/CanvasContentPanel.js

@@ -0,0 +1,160 @@
+import _pt from "prop-types";
+
+/*
+ * Copyright (C) 2024 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import React, { useState } from 'react';
+import { Flex } from '@instructure/ui-flex';
+import ErrorBoundary from '../ErrorBoundary';
+import { useFilterSettings } from '../useFilterSettings';
+import PanelFilter from './PanelFilter';
+import { FILTER_SETTINGS_BY_PLUGIN, DynamicPanel } from '../canvasContentUtils';
+import { useStoreProps } from '../StoreContext';
+// TODO: Component is only validated for images, need to validate for other content types
+export default function CanvasContentPanel(_ref) {
+  let {
+    trayProps,
+    canvasOrigin,
+    plugin,
+    setFileUrl
+  } = _ref;
+  const [filterSettings, setFilterSettings] = useFilterSettings(FILTER_SETTINGS_BY_PLUGIN[plugin]);
+  const [link, setLink] = useState(null);
+  const [hasLoaded, setHasLoaded] = useState(false); // storeProps has functions that collide with what we want to do in a block editor setting
+
+  const baseStoreProps = useStoreProps();
+  const {
+    onImageEmbed: _,
+    ...storeProps
+  } = baseStoreProps;
+
+  function handleFilterChange(newFilter, onChangeContext, onChangeSearchString, onChangeSortBy) {
+    const newFilterSettings = { ...newFilter
+    };
+
+    if (newFilterSettings.sortValue) {
+      newFilterSettings.sortDir = newFilterSettings.sortValue === 'alphabetical' ? 'asc' : 'desc';
+      onChangeSortBy({
+        sort: newFilterSettings.sortValue,
+        dir: newFilterSettings.sortDir
+      });
+    }
+
+    if ('searchString' in newFilterSettings && filterSettings.searchString !== newFilterSettings.searchString) {
+      onChangeSearchString(newFilterSettings.searchString);
+    }
+
+    setFilterSettings(newFilterSettings);
+
+    if (newFilterSettings.contentType) {
+      let contextType, contextId;
+
+      switch (newFilterSettings.contentType) {
+        case 'user_files':
+          contextType = 'user';
+          contextId = trayProps.containingContext.userId;
+          break;
+
+        case 'group_files':
+          contextType = 'group';
+          contextId = trayProps.containingContext.contextId;
+          break;
+
+        case 'course_files':
+          contextType = trayProps.contextType;
+          contextId = trayProps.containingContext.contextId;
+          break;
+
+        case 'links':
+          contextType = trayProps.containingContext.contextType;
+          contextId = trayProps.containingContext.contextId;
+      }
+
+      onChangeContext({
+        contextType,
+        contextId
+      }); // context is only changed on load
+
+      setHasLoaded(true);
+    }
+  }
+
+  const handleImageClick = image => {
+    setFileUrl(image.href);
+  };
+
+  return /*#__PURE__*/React.createElement(Flex, {
+    as: "div",
+    direction: "column",
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    padding: "medium"
+  }, /*#__PURE__*/React.createElement(PanelFilter, Object.assign({}, filterSettings, {
+    onChange: newFilter => {
+      handleFilterChange(newFilter, storeProps.onChangeContext, storeProps.onChangeSearchString, storeProps.onChangeSortBy);
+    }
+  }))), /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldGrow: true,
+    shouldShrink: true,
+    margin: "xx-small xxx-small 0"
+  }, hasLoaded && /*#__PURE__*/React.createElement(Flex, {
+    justifyItems: "space-between",
+    direction: "column",
+    height: "100%"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldGrow: true,
+    shouldShrink: true
+  }, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(DynamicPanel, Object.assign({
+    contentType: filterSettings.contentType,
+    contentSubtype: filterSettings.contentSubtype,
+    sortBy: {
+      sort: filterSettings.sortValue,
+      order: filterSettings.sortDir
+    },
+    searchString: filterSettings.searchString,
+    canvasOrigin: canvasOrigin,
+    context: {
+      type: trayProps.contextType,
+      id: trayProps.contextId
+    },
+    editing: false,
+    onEditClick: setLink,
+    selectedLink: link,
+    onImageEmbed: handleImageClick
+  }, storeProps)))))));
+}
+CanvasContentPanel.propTypes = {
+  trayProps: _pt.shape({
+    canUploadFiles: _pt.bool.isRequired,
+    contextId: _pt.string.isRequired,
+    contextType: _pt.string.isRequired,
+    containingContext: _pt.shape({
+      contextType: _pt.string.isRequired,
+      contextId: _pt.string.isRequired,
+      userId: _pt.string.isRequired
+    }).isRequired,
+    filesTabDisabled: _pt.bool.isRequired,
+    host: _pt.string.isRequired,
+    jwt: _pt.string.isRequired,
+    source: _pt.shape({}).isRequired,
+    themeUrl: _pt.string.isRequired,
+    storeProps: _pt.any.isRequired
+  }).isRequired,
+  canvasOrigin: _pt.string.isRequired,
+  plugin: _pt.any.isRequired,
+  setFileUrl: _pt.func.isRequired
+};

package/es/rce/plugins/shared/Upload/ComputerPanel.js

@@ -273,6 +273,7 @@ export default function ComputerPanel(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     ref: panelRef
   }, /*#__PURE__*/React.createElement(FileDrop, {
+    "data-testid": "filedrop",
     accept: accept,
     onDropAccepted: _ref2 => {
       let [file] = _ref2;

package/es/rce/plugins/shared/Upload/PanelFilter.js

@@ -0,0 +1,144 @@
+import _pt from "prop-types";
+
+/*
+ * Copyright (C) 2024 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { IconButton } from '@instructure/ui-buttons';
+import { Flex } from '@instructure/ui-flex';
+import { IconSearchLine, IconXLine } from '@instructure/ui-icons';
+import { SimpleSelect } from '@instructure/ui-simple-select';
+import { TextInput } from '@instructure/ui-text-input';
+import formatMessage from 'format-message';
+import React, { useEffect, useState } from 'react';
+
+function shouldSearch(searchString) {
+  return searchString.length === 0 || searchString.length >= 3;
+}
+
+export default function PanelFilter(_ref) {
+  let {
+    mountNode,
+    onChange,
+    sortValue,
+    searchString,
+    contentType
+  } = _ref;
+  const [pendingSearchString, setPendingSearchString] = useState(searchString);
+  const [searchInputTimer, setSearchInputTimer] = useState(0); // only run on mounting to trigger change to correct contextType
+
+  useEffect(() => {
+    onChange({
+      contentType
+    });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  function doSearch(value) {
+    if (shouldSearch(value)) {
+      if (searchInputTimer) {
+        window.clearTimeout(searchInputTimer);
+        setSearchInputTimer(0);
+      }
+
+      onChange({
+        searchString: value
+      });
+    }
+  }
+
+  function handleChangeSearch(value) {
+    setPendingSearchString(value);
+
+    if (searchInputTimer) {
+      window.clearTimeout(searchInputTimer);
+    }
+
+    const tid = window.setTimeout(() => doSearch(value), 250);
+    setSearchInputTimer(tid);
+  }
+
+  function handleClear() {
+    handleChangeSearch('');
+  }
+
+  function renderClearButton() {
+    if (pendingSearchString) {
+      return /*#__PURE__*/React.createElement(IconButton, {
+        screenReaderLabel: formatMessage('Clear'),
+        onClick: handleClear,
+        withBorder: false,
+        withBackground: false,
+        size: "small"
+      }, /*#__PURE__*/React.createElement(IconXLine, null));
+    }
+
+    return undefined;
+  }
+
+  return /*#__PURE__*/React.createElement(Flex, {
+    margin: "none xx-large none none",
+    gap: "small",
+    alignItems: "start"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldShrink: true,
+    shouldGrow: false,
+    margin: "none none none none"
+  }, /*#__PURE__*/React.createElement(SimpleSelect, {
+    "data-testid": "filter-sort-by",
+    mountNode: mountNode,
+    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Sort By')),
+    assistiveText: formatMessage('Use arrow keys to navigate options.'),
+    onChange: (e, selection) => {
+      onChange({
+        sortValue: selection.value
+      });
+    },
+    value: sortValue
+  }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+    id: "date_added",
+    value: "date_added"
+  }, formatMessage('Date Added')), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+    id: "alphabetical",
+    value: "alphabetical"
+  }, formatMessage('Alphabetical')))), /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldGrow: true,
+    margin: "none xx-large none none"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Search')),
+    renderBeforeInput: /*#__PURE__*/React.createElement(IconSearchLine, {
+      inline: false
+    }),
+    renderAfterInput: renderClearButton(),
+    messages: [{
+      type: 'hint',
+      text: formatMessage('Enter at least 3 characters to search')
+    }],
+    placeholder: formatMessage('Search'),
+    value: pendingSearchString,
+    onChange: (e, value) => handleChangeSearch(value),
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        doSearch(pendingSearchString);
+      }
+    }
+  })));
+}
+PanelFilter.propTypes = {
+  sortValue: _pt.string.isRequired,
+  searchString: _pt.string.isRequired,
+  contentType: _pt.string.isRequired
+};

package/es/rce/plugins/shared/Upload/UploadFile.js

@@ -28,12 +28,14 @@ import { StoreProvider } from '../StoreContext';
 import Bridge from '../../../../bridge';
 import UploadFileModal from './UploadFileModal';
 import RCEWrapper from '../../../RCEWrapper';
+import { UploadCanvasPanelIds } from '../canvasContentUtils';
 export const UploadFilePanelIds = ['COMPUTER', 'URL'];
+export const FullPanelIds = [...UploadCanvasPanelIds, ...UploadFilePanelIds];
 
 /**
  * Handles uploading data based on what type of data is submitted.
  */
-export const handleSubmit = function (editor, accept, selectedPanel, uploadData, storeProps, source) {
+export const handleSubmit = function (editor, accept, selectedPanel, uploadData, storeProps, _source) {
   let afterInsert = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : () => undefined;
   Bridge.focusEditor(RCEWrapper.getByEditor(editor)); // necessary since it blurred when the modal opened
 
@@ -116,6 +118,8 @@ export function UploadFile(_ref) {
     panels,
     onDismiss,
     requireA11yAttributes = true,
+    forBlockEditorUse = false,
+    uploading = false,
     trayProps,
     canvasOrigin,
     onSubmit = handleSubmit,
@@ -158,7 +162,9 @@ export function UploadFile(_ref) {
     accept: accept,
     modalBodyWidth: modalBodyWidth,
     modalBodyHeight: modalBodyHeight,
-    requireA11yAttributes: requireA11yAttributes
+    requireA11yAttributes: requireA11yAttributes,
+    forBlockEditorUse: forBlockEditorUse,
+    uploading: uploading
   }));
 }
 UploadFile.propTypes = {
@@ -166,6 +172,8 @@ UploadFile.propTypes = {
   label: _pt.string.isRequired,
   panels: _pt.array,
   requireA11yAttributes: _pt.bool,
+  forBlockEditorUse: _pt.bool,
+  uploading: _pt.bool,
   trayProps: _pt.object,
   canvasOrigin: _pt.string
 };

package/es/rce/plugins/shared/Upload/UploadFileModal.js

@@ -29,6 +29,8 @@ import RceApiSource from '../../../../rcs/api';
 import ImageOptionsForm from '../ImageOptionsForm';
 import UsageRightsSelectBox from './UsageRightsSelectBox';
 import { View } from '@instructure/ui-view';
+import { UploadCanvasPanelIds, CanvasPanelTitles } from '../canvasContentUtils';
+const CanvasContentPanel = /*#__PURE__*/React.lazy(() => import('./CanvasContentPanel'));
 const ComputerPanel = /*#__PURE__*/React.lazy(() => import('./ComputerPanel'));
 const UrlPanel = /*#__PURE__*/React.lazy(() => import('./UrlPanel'));
 
@@ -51,6 +53,7 @@ function shouldBeDisabled(_ref, selectedPanel, usageRightNotSet) {
       return !fileUrl;
 
     default:
+      if (UploadCanvasPanelIds.includes(selectedPanel)) return !fileUrl;
       return false;
     // When in doubt, don't disable (but we shouldn't get here either)
   }
@@ -72,7 +75,9 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     accept,
     modalBodyWidth,
     modalBodyHeight,
-    requireA11yAttributes = true
+    requireA11yAttributes = true,
+    forBlockEditorUse = false,
+    uploading = false
   } = _ref2;
   const [theFile, setFile] = useState(preselectedFile);
   const [error, setError] = useState(null);
@@ -103,6 +108,11 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     setDisplayAs(event.target.value);
   }
 
+  const handleRequestTabChange = index => {
+    setSelectedPanel(panels[index]);
+    setFileUrl('');
+  };
+
   const submitDisabled = shouldBeDisabled({
     fileUrl,
     theFile,
@@ -119,6 +129,11 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     host: trayProps.host,
     canvasOrigin
   });
+
+  if (forBlockEditorUse && !['COMPUTER', 'URL'].includes(selectedPanel)) {
+    requireA11yAttributes = false;
+  }
+
   return /*#__PURE__*/React.createElement(Modal, {
     "data-mce-component": true,
     as: "form",
@@ -130,7 +145,7 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     onSubmit: e => {
       e.preventDefault();
 
-      if (submitDisabled) {
+      if (submitDisabled || uploading) {
         return false;
       }
 
@@ -160,7 +175,7 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       let {
         index
       } = _ref3;
-      return setSelectedPanel(panels[index]);
+      return handleRequestTabChange(index);
     }
   }, panels.map(panel => {
     switch (panel) {
@@ -177,7 +192,6 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
             size: "large"
           })
         }, /*#__PURE__*/React.createElement(ComputerPanel, {
-          editor: editor,
           theFile: theFile,
           setFile: setFile,
           setError: setError,
@@ -205,9 +219,28 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           fileUrl: fileUrl,
           setFileUrl: setFileUrl
         })));
-    }
 
-    return null;
+      default:
+        if (UploadCanvasPanelIds.includes(panel)) {
+          return /*#__PURE__*/React.createElement(Tabs.Panel, {
+            key: panel,
+            renderTitle: () => CanvasPanelTitles[panel],
+            isSelected: selectedPanel === panel
+          }, /*#__PURE__*/React.createElement(Suspense, {
+            fallback: /*#__PURE__*/React.createElement(Spinner, {
+              renderTitle: formatMessage('Loading'),
+              size: "large"
+            })
+          }, /*#__PURE__*/React.createElement(CanvasContentPanel, {
+            trayProps: trayProps,
+            canvasOrigin: canvasOrigin,
+            plugin: panel,
+            setFileUrl: setFileUrl
+          })));
+        }
+
+        return null;
+    }
   })), // We shouldn't show the accordions until the session data is loaded.
   Object.keys(contentProps.session || {}).length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, selectedPanel === 'COMPUTER' && requiresUsageRights && /*#__PURE__*/React.createElement(View, {
     as: "div",
@@ -245,28 +278,31 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     handleAltTextChange: handleAltTextChange,
     handleIsDecorativeChange: handleIsDecorativeChange,
     handleDisplayAsChange: handleDisplayAsChange,
-    hideDimensions: true
+    hideDimensions: true,
+    forBlockEditorUse: forBlockEditorUse
   }))))), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(Button, {
     onClick: onDismiss
   }, formatMessage('Close')), "\xA0", /*#__PURE__*/React.createElement(Button, {
     color: "primary",
     type: "submit",
-    disabled: submitDisabled
-  }, formatMessage('Submit'))));
+    disabled: submitDisabled || uploading
+  }, uploading ? formatMessage('Submitting...') : formatMessage('Submit'))));
 });
 UploadFileModal.propTypes = {
-  editor: object.isRequired,
+  editor: object,
   contentProps: object,
   trayProps: object,
   canvasOrigin: string,
   onSubmit: func,
   onDismiss: func.isRequired,
-  panels: arrayOf(oneOf(['COMPUTER', 'URL'])),
+  panels: arrayOf(oneOf(['COMPUTER', 'URL', ...UploadCanvasPanelIds])),
   label: string.isRequired,
   accept: oneOfType([arrayOf(string), string]),
   modalBodyWidth: number,
   modalBodyHeight: number,
   requireA11yAttributes: bool,
+  forBlockEditorUse: bool,
+  uploading: bool,
   preselectedFile: object // JS File
 
 };

package/es/rce/plugins/shared/Upload/UsageRightsSelectBox.js

@@ -21,25 +21,6 @@ import formatMessage from '../../../../format-message';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { View } from '@instructure/ui-view';
 import { TextInput } from '@instructure/ui-text-input';
-const CONTENT_OPTIONS = [{
-  display: formatMessage('Choose usage rights...'),
-  value: 'choose'
-}, {
-  display: formatMessage('I hold the copyright'),
-  value: 'own_copyright'
-}, {
-  display: formatMessage('I have obtained permission to use this file.'),
-  value: 'used_by_permission'
-}, {
-  display: formatMessage('The material is in the public domain'),
-  value: 'public_domain'
-}, {
-  display: formatMessage('The material is subject to an exception - e.g. fair use, the right to quote, or others under applicable copyright laws'),
-  value: 'fair_use'
-}, {
-  display: formatMessage('The material is licensed under Creative Commons'),
-  value: 'creative_commons'
-}];
 
 const ShowCreativeCommonsOptions = _ref => {
   let {
@@ -96,6 +77,25 @@ const UsageRightsSelectBox = _ref3 => {
   const showCreativeCommonsOptions = usageRight === 'creative_commons';
   const [licenseOptions, setLicenseOptions] = React.useState([]);
   const [showMessage, setShowMessage] = React.useState(showMessageProp);
+  const CONTENT_OPTIONS = [{
+    display: formatMessage('Choose usage rights...'),
+    value: 'choose'
+  }, {
+    display: formatMessage('I hold the copyright'),
+    value: 'own_copyright'
+  }, {
+    display: formatMessage('I have obtained permission to use this file.'),
+    value: 'used_by_permission'
+  }, {
+    display: formatMessage('The material is in the public domain'),
+    value: 'public_domain'
+  }, {
+    display: formatMessage('The material is subject to an exception - e.g. fair use, the right to quote, or others under applicable copyright laws'),
+    value: 'fair_use'
+  }, {
+    display: formatMessage('The material is licensed under Creative Commons'),
+    value: 'creative_commons'
+  }];
   React.useEffect(() => {
     function getUsageRightsOptions() {
       fetch(apiUrl()).then(res => res.text()).then(res => setLicenseOptions(JSON.parse(res))).catch(() => {});
@@ -161,7 +161,7 @@ const UsageRightsSelectBox = _ref3 => {
 UsageRightsSelectBox.propTypes = {
   usageRightsState: PropTypes.shape({
     ccLicense: PropTypes.string,
-    usageRight: PropTypes.oneOf(Object.values(CONTENT_OPTIONS).map(o => o.value)),
+    usageRight: PropTypes.oneOf(['choose', 'own_copyright', 'used_by_permission', 'public_domain', 'fair_use', 'creative_commons']),
     copyrightHolder: PropTypes.string
   }),
   setUsageRightsState: PropTypes.func,

package/es/rce/plugins/shared/Upload/index.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright (C) 2024 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { UploadFilePanelIds, handleSubmit, UploadFile } from './UploadFile';
+export { UploadFilePanelIds, handleSubmit, UploadFile };

package/es/rce/plugins/shared/ai_tools/AIResponseModal.js

@@ -0,0 +1,70 @@
+import _pt from "prop-types";
+
+/*
+ * Copyright (C) 2024 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import React from 'react';
+import formatMessage from '../../../../format-message';
+import { Button, CloseButton } from '@instructure/ui-buttons';
+import { Heading } from '@instructure/ui-heading';
+import { Modal } from '@instructure/ui-modal';
+
+const AIResponseModal = _ref => {
+  let {
+    open,
+    html,
+    onClose,
+    onInsert,
+    onReplace
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Modal, {
+    open: open,
+    onDismiss: onClose,
+    size: "medium",
+    label: formatMessage('AI Response')
+  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: onClose,
+    placement: "end",
+    offset: "medium",
+    screenReaderLabel: formatMessage('Close')
+  }), /*#__PURE__*/React.createElement(Heading, {
+    level: "h3"
+  }, "AI Response")), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: html
+    }
+  })), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: onClose,
+    margin: "medium 0 0 0"
+  }, formatMessage('Close')), /*#__PURE__*/React.createElement(Button, {
+    onClick: onReplace,
+    margin: "medium 0 0 medium"
+  }, formatMessage('Replace')), /*#__PURE__*/React.createElement(Button, {
+    onClick: onInsert,
+    color: "primary",
+    margin: "medium 0 0 medium"
+  }, formatMessage('Insert'))));
+};
+
+AIResponseModal.propTypes = {
+  open: _pt.bool.isRequired,
+  html: _pt.string.isRequired,
+  onClose: _pt.func.isRequired,
+  onInsert: _pt.func.isRequired,
+  onReplace: _pt.func.isRequired
+};
+export { AIResponseModal };