@instructure/canvas-rce 5.13.2 → 5.13.5

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

@@ -0,0 +1,510 @@
+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, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import formatMessage from '../../../../format-message';
+import { Button, CloseButton, CondensedButton, IconButton } from '@instructure/ui-buttons';
+import { Flex } from '@instructure/ui-flex';
+import { Heading } from '@instructure/ui-heading';
+import { Tray } from '@instructure/ui-tray';
+import { SVGIcon } from '@instructure/ui-svg-images';
+import { SimpleSelect } from '@instructure/ui-simple-select';
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { Spinner } from '@instructure/ui-spinner';
+import { TextArea } from '@instructure/ui-text-area';
+import { TruncateText } from '@instructure/ui-truncate-text';
+import { View } from '@instructure/ui-view';
+import { uid } from '@instructure/uid';
+import { showFlashAlert } from '../../../../common/FlashAlert';
+import doFetchApi from '../do-fetch-api-effect';
+import { AIWandSVG, AIAvatarSVG, InsertSVG, CopySVG, RefreshSVG, DislikeSVG } from './aiicons';
+import { AIResponseModal } from './AIResponseModal';
+
+const msgid = () => uid('msg', 3);
+
+const modifyAllTaskMessage = formatMessage('Hello. Please describe the modifications you would like to make to your composition.');
+const modifySelectionTaskMessage = formatMessage('Hello. Please describe the modifications you would like to make to your selection.');
+const generateTaskMessage = formatMessage('Please decribe what you would like to compose.');
+export const AIToolsTray = _ref => {
+  let {
+    open,
+    container,
+    mountNode,
+    contextId,
+    contextType,
+    currentContent,
+    onClose,
+    onInsertContent,
+    onReplaceContent
+  } = _ref;
+  const [trayRef, setTrayRef] = useState(null);
+  const [containerStyle] = useState(() => {
+    if (container) {
+      return {
+        width: container.style.width,
+        boxSizing: container.style.boxSizing,
+        transition: container.style.transition
+      };
+    }
+
+    return {};
+  });
+  const [isOpen, setIsOpen] = useState(open);
+  const [task, setTask] = useState(() => {
+    return currentContent.content.trim().length > 0 ? 'modify' : 'generate';
+  });
+  const [userPrompt, setUserPrompt] = useState('');
+  const [waitingForResponse, setWaitingForResponse] = useState(false);
+  const [responseHtml, setResponseHtml] = useState('');
+  const chatContainerRef = useRef(null);
+  const getModifyTaskMessage = useCallback(() => {
+    return currentContent.type === 'selection' ? modifySelectionTaskMessage : modifyAllTaskMessage;
+  }, [currentContent.type]);
+  const initChatMessages = useCallback(() => {
+    return [task === 'modify' ? {
+      id: msgid(),
+      type: 'message',
+      message: getModifyTaskMessage()
+    } : {
+      id: msgid(),
+      type: 'message',
+      message: generateTaskMessage
+    }];
+  }, [getModifyTaskMessage, task]);
+  const chatMessagesRef = useRef(initChatMessages());
+  const reset = useCallback(() => {
+    chatMessagesRef.current = initChatMessages();
+    setWaitingForResponse(false);
+    setUserPrompt('');
+  }, [initChatMessages]);
+  useLayoutEffect(() => {
+    var _chatContainerRef$cur;
+
+    const lastbox = (_chatContainerRef$cur = chatContainerRef.current) === null || _chatContainerRef$cur === void 0 ? void 0 : _chatContainerRef$cur.querySelector('.ai-chat-box:last-child');
+    lastbox === null || lastbox === void 0 ? void 0 : lastbox.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest'
+    });
+  }, [trayRef, chatMessagesRef.current.length]);
+  useEffect(() => {
+    setTask(currentContent.content.trim().length > 0 ? 'modify' : 'generate');
+  }, [currentContent.content]);
+  useEffect(() => {
+    if (open !== isOpen) {
+      setIsOpen(open);
+      reset();
+    }
+  }, [isOpen, open, reset]);
+  useEffect(() => {
+    const shrinking_selector = '#content'; // '.block-editor-editor'
+
+    if (open && trayRef) {
+      const ed = document.querySelector(shrinking_selector);
+      if (!ed) return;
+      const edstyle = window.getComputedStyle(ed);
+      const ed_rect = ed.getBoundingClientRect();
+      const padding = parseInt(edstyle.paddingRight, 10);
+      const tray_left = window.innerWidth - trayRef.offsetWidth;
+
+      if (ed_rect.right > tray_left) {
+        ed.style.boxSizing = 'border-box';
+        ed.style.width = `${ed_rect.width - (ed_rect.right - tray_left - padding)}px`;
+      }
+    } else {
+      const ed = document.querySelector(shrinking_selector);
+      if (!ed) return;
+      ed.style.boxSizing = containerStyle.boxSizing || '';
+      ed.style.width = containerStyle.width || '';
+      ed.style.transition = containerStyle.transition || '';
+    }
+  }, [containerStyle, open, trayRef]);
+  const getResponse = useCallback(prompt => {
+    setWaitingForResponse(true); // the .finally triggered the error even though there is a .catch
+    // eslint-disable-next-line promise/catch-or-return
+
+    doFetchApi({
+      path: '/api/v1/rich_content/generate',
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({
+        // context_id: contextId,
+        // context_type: contextType,
+        course_id: contextId,
+        prompt,
+        current_copy: task === 'modify' ? currentContent : undefined,
+        type_of_request: task
+      })
+    }).then(result => {
+      const {
+        json
+      } = result;
+
+      if (json.error) {
+        chatMessagesRef.current.push({
+          id: msgid(),
+          type: 'error',
+          message: formatMessage(json.error)
+        });
+      } else {
+        chatMessagesRef.current.push({
+          id: msgid(),
+          type: 'response',
+          message: json.content
+        });
+      }
+    }).catch(async err => {
+      const err_result = await err.response.json();
+      const msg = err_result.error || formatMessage('An error occurred processing your request');
+      chatMessagesRef.current.push({
+        id: msgid(),
+        type: 'error',
+        message: msg
+      });
+    }).finally(() => {
+      setWaitingForResponse(false);
+    });
+  }, [contextId, currentContent, task]);
+  const handleCloseTray = useCallback(() => {
+    onClose();
+    chatMessagesRef.current.push({
+      id: msgid(),
+      type: 'message',
+      message: task === 'modify' ? getModifyTaskMessage() : generateTaskMessage
+    });
+    setUserPrompt('');
+  }, [getModifyTaskMessage, onClose, task]);
+  const handleChangeTask = useCallback((event, data) => {
+    setTask(data.value);
+    setWaitingForResponse(false);
+    chatMessagesRef.current.push({
+      id: msgid(),
+      type: 'message',
+      message: data.value === 'modify' ? getModifyTaskMessage() : generateTaskMessage
+    });
+  }, [getModifyTaskMessage]);
+  const handlePromptChange = useCallback(e => {
+    setUserPrompt(e.target.value);
+  }, []);
+  const handleSubmitPrompt = useCallback(() => {
+    chatMessagesRef.current.push({
+      id: msgid(),
+      type: 'user',
+      message: userPrompt.trim()
+    });
+    getResponse(userPrompt);
+    setUserPrompt('');
+  }, [getResponse, userPrompt]);
+  const handleInsertResponse = useCallback(responseText => {
+    onInsertContent(responseText);
+  }, [onInsertContent]);
+  const handleCopyResponse = useCallback(async responseText => {
+    try {
+      // @ts-expect-error ClipboardItem.supports really does exist
+      if (ClipboardItem.supports('text/html')) {
+        const htmlBlob = new Blob([responseText], {
+          type: 'text/html'
+        });
+        await navigator.clipboard.write([new ClipboardItem({
+          'text/html': htmlBlob
+        })]);
+      } else {
+        const div = document.createElement('div');
+        div.innerHTML = responseText;
+        await navigator.clipboard.writeText(div.textContent || '');
+      }
+
+      showFlashAlert({
+        message: formatMessage('Response copied to clipboard'),
+        type: 'success',
+        err: undefined
+      });
+    } catch (err) {
+      showFlashAlert({
+        message: formatMessage('Failed to copy response'),
+        type: 'error',
+        err: undefined
+      });
+    }
+  }, []);
+  const handleRefreshResponse = useCallback(() => {
+    getResponse(userPrompt);
+  }, [getResponse, userPrompt]);
+  const handleDislikeResponse = useCallback(() => {
+    // eslint-disable-next-line no-console
+    console.log('dislike response'); // TODO: what?
+  }, []);
+  const handleShowWholeResponse = useCallback(event => {
+    const msgId = event.target.dataset.messageId;
+    const message = chatMessagesRef.current.find(msg => msg.id === msgId);
+
+    if (message) {
+      setResponseHtml(message.message);
+    }
+  }, []);
+  const handleCloseResponseModal = useCallback(() => {
+    setResponseHtml('');
+  }, []);
+  const handleInsertFromModal = useCallback(() => {
+    handleInsertResponse(responseHtml);
+    handleCloseResponseModal();
+  }, [handleCloseResponseModal, handleInsertResponse, responseHtml]);
+  const handleReplaceFromModal = useCallback(() => {
+    onReplaceContent(responseHtml);
+    handleCloseResponseModal();
+  }, [handleCloseResponseModal, onReplaceContent, responseHtml]);
+
+  const sharkfin = () => {
+    return /*#__PURE__*/React.createElement("svg", {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("polyline", {
+      points: "0,14 0,0 14,14",
+      fill: "none",
+      stroke: "#ccc",
+      strokeWidth: "1"
+    }), /*#__PURE__*/React.createElement("polyline", {
+      points: "0,14 14,14",
+      stroke: "white",
+      strokeWidth: "2"
+    }));
+  };
+
+  const renderResponse = msgId => {
+    const message = chatMessagesRef.current.find(msg => msg.id === msgId);
+
+    if (!message) {
+      return /*#__PURE__*/React.createElement("span", null, formatMessage("I'm sorry, but I cannot find the AI's answer"));
+    }
+
+    const div = document.createElement('div');
+    div.innerHTML = message.message;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/React.createElement(TruncateText, {
+      maxLines: 3
+    }, div.textContent), /*#__PURE__*/React.createElement("span", {
+      style: {
+        alignSelf: 'end'
+      }
+    }, /*#__PURE__*/React.createElement(CondensedButton, {
+      onClick: handleShowWholeResponse,
+      "data-message-id": msgId
+    }, formatMessage('Show all'))));
+  }; // TODO: should the response box get truncated?
+
+
+  const renderChatBox = (message, key) => {
+    return /*#__PURE__*/React.createElement("div", {
+      id: message.id,
+      className: "ai-chat-box",
+      key: key,
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'start',
+        rowGap: '4px'
+      }
+    }, /*#__PURE__*/React.createElement(SVGIcon, {
+      src: AIAvatarSVG,
+      size: "small"
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '.5rem',
+        border: '1px solid #ccc',
+        borderRadius: '.5rem',
+        position: 'relative'
+      }
+    }, message.type === 'waiting' && /*#__PURE__*/React.createElement(Spinner, {
+      renderTitle: message.message,
+      size: "x-small"
+    }), (message.type === 'message' || message.type === 'user') && message.message, message.type === 'response' && renderResponse(message.id), message.type === 'error' && /*#__PURE__*/React.createElement("span", null, message.message), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        top: '-18px',
+        // Adjust this value to position the sharkfin
+        left: '40px' // Adjust this value to align the sharkfin horizontally
+
+      }
+    }, sharkfin())), message.type === 'response' ?
+    /*#__PURE__*/
+
+    /* TODO: why is it to wide w/o maxWidth? */
+    React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '8px',
+        justifyContent: 'end',
+        maxWidth: '95%',
+        margin: '5px 0'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: formatMessage('Insert'),
+      withBackground: false,
+      withBorder: false,
+      onClick: handleInsertResponse.bind(null, message.message)
+    }, /*#__PURE__*/React.createElement(SVGIcon, {
+      src: InsertSVG,
+      size: "x-small"
+    })), /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: formatMessage('Copy'),
+      withBackground: false,
+      withBorder: false,
+      onClick: handleCopyResponse.bind(null, message.message)
+    }, /*#__PURE__*/React.createElement(SVGIcon, {
+      src: CopySVG,
+      size: "x-small"
+    })), /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: formatMessage('Retry'),
+      withBackground: false,
+      withBorder: false,
+      onClick: handleRefreshResponse
+    }, /*#__PURE__*/React.createElement(SVGIcon, {
+      src: RefreshSVG,
+      size: "x-small"
+    })), /*#__PURE__*/React.createElement(IconButton, {
+      screenReaderLabel: formatMessage('Dislike'),
+      withBackground: false,
+      withBorder: false,
+      onClick: handleDislikeResponse
+    }, /*#__PURE__*/React.createElement(SVGIcon, {
+      src: DislikeSVG,
+      size: "x-small"
+    }))) : null);
+  };
+
+  const renderChatMessages = () => {
+    const messages = chatMessagesRef.current.map(message => {
+      return renderChatBox(message, message.id);
+    });
+
+    if (waitingForResponse) {
+      messages.push(renderChatBox({
+        id: msgid(),
+        type: 'waiting',
+        message: formatMessage('Waiting for response')
+      }, 'ai-waiting-message'));
+    }
+
+    return messages;
+  };
+
+  return /*#__PURE__*/React.createElement(Tray, {
+    contentRef: el => setTrayRef(el),
+    label: "AIToolsTray",
+    mountNode: mountNode,
+    open: open,
+    placement: "end",
+    size: "small",
+    onClose: handleCloseTray
+  }, /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    padding: "small",
+    position: "relative",
+    height: "100vh",
+    overflowY: "hidden"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px',
+      height: '100%',
+      minHeight: '1px',
+      maxHeight: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(Flex, {
+    margin: "0 0 medium",
+    gap: "small"
+  }, /*#__PURE__*/React.createElement(CloseButton, {
+    placement: "end",
+    onClick: handleCloseTray,
+    screenReaderLabel: "Close"
+  }), /*#__PURE__*/React.createElement(SVGIcon, {
+    src: AIWandSVG,
+    size: "x-small"
+  }), /*#__PURE__*/React.createElement(Heading, {
+    level: "h3"
+  }, formatMessage('Writing Assistant'))), /*#__PURE__*/React.createElement(SimpleSelect, {
+    renderLabel: formatMessage('What would you like to do?'),
+    value: task,
+    onChange: handleChangeTask
+  }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+    id: "modify",
+    value: "modify",
+    isDisabled: currentContent.content.trim().length === 0
+  }, formatMessage('Modify')), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+    id: "generate",
+    value: "generate"
+  }, formatMessage('Compose'))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flexGrow: 1,
+      overflowY: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: chatContainerRef,
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      justifyContent: 'end',
+      minHeight: '100%'
+    }
+  }, renderChatMessages())), /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    padding: "small 0 0 0",
+    borderWidth: "small 0 0 0"
+  }, /*#__PURE__*/React.createElement(TextArea, {
+    id: "ai-prompt",
+    label: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Enter text')),
+    resize: "vertical",
+    value: userPrompt,
+    onChange: handlePromptChange
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      alignSelf: 'end'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleSubmitPrompt,
+    interaction: waitingForResponse || !userPrompt.trim() ? 'disabled' : 'enabled'
+  }, formatMessage('Submit')))), responseHtml && /*#__PURE__*/React.createElement(AIResponseModal, {
+    open: true,
+    onClose: handleCloseResponseModal,
+    html: responseHtml,
+    onInsert: handleInsertFromModal,
+    onReplace: handleReplaceFromModal
+  })));
+};
+AIToolsTray.propTypes = {
+  open: _pt.bool.isRequired,
+  contextId: _pt.string.isRequired,
+  contextType: _pt.string.isRequired,
+  currentContent: _pt.shape({
+    type: _pt.oneOf(['selection', 'full']).isRequired,
+    content: _pt.string.isRequired
+  }).isRequired,
+  onClose: _pt.func.isRequired,
+  onInsertContent: _pt.func.isRequired,
+  onReplaceContent: _pt.func.isRequired
+};

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

@@ -0,0 +1,59 @@
+/*
+ * 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/>.
+ */
+// @ts-expect-error
+import { IconCopyLine, IconRefreshLine } from '@instructure/ui-icons/es/svg';
+const AIWandSVG = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_5548_26552" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="18" height="18">
+<path d="M8.48511 5.85958C8.34447 5.71049 8.11666 5.71049 7.97603 5.85958L6.54795 7.3735C6.40731 7.52256 6.40731 7.76409 6.54795 7.91315L8.75896 10.2571L8.75968 10.2582L8.76075 10.259L15.9574 17.8882C16.0277 17.9627 16.1198 18 16.2119 18C16.304 18 16.3961 17.9627 16.4664 17.8882L17.8945 16.3743C18.0352 16.2252 18.0352 15.9837 17.8945 15.8346L8.48511 5.85958ZM8.23057 6.66907L9.93327 8.47413L9.01436 9.44848L7.31157 7.64331L8.23057 6.66907ZM16.2119 17.0787L9.52344 9.98813L10.4423 9.01378L17.1309 16.1044L16.2119 17.0787Z" fill="#2D3B45"/>
+<path d="M6.9677 4.52528C6.98177 4.52716 6.99581 4.52789 7.00988 4.52789C7.13082 4.52789 7.24473 4.46343 7.3119 4.35423L7.89726 3.3986L8.97165 3.3688C9.10875 3.3647 9.23182 3.27899 9.28912 3.14703C9.34641 3.01511 9.32815 2.86005 9.242 2.74714L8.56629 1.86119L8.8711 0.769191C8.91013 0.629809 8.87074 0.479228 8.77021 0.380468C8.66999 0.281678 8.52444 0.251498 8.39683 0.304431L7.39345 0.712163L6.50783 0.0674013C6.395 -0.0153617 6.24769 -0.0224389 6.12816 0.0491233C6.00862 0.119925 5.93726 0.256733 5.94426 0.401699L6.00018 1.53956L5.14798 2.23316C5.03898 2.32151 4.98731 2.46759 5.01402 2.61033C5.04075 2.75272 5.1413 2.86675 5.27383 2.90442L6.31166 3.19959L6.67062 4.27372C6.71633 4.4105 6.83164 4.50815 6.9677 4.52528ZM6.16471 2.36772L6.58872 2.0226C6.68292 1.94618 6.73531 1.82543 6.72932 1.7002L6.70157 1.13443L7.14172 1.45495C7.23946 1.52614 7.36393 1.54216 7.47466 1.49672L7.97354 1.29396L7.822 1.83698C7.78827 1.95773 7.81287 2.08781 7.88741 2.18546L8.2235 2.62601L7.68912 2.64089C7.57063 2.64425 7.46131 2.70912 7.39662 2.81458L7.10552 3.28978L6.92693 2.75571C6.88753 2.63718 6.79542 2.54699 6.68083 2.51455L6.16471 2.36772Z" fill="#2D3B45"/>
+<path d="M5.00785 9.67232L5.31265 8.58029C5.35166 8.4409 5.31229 8.29032 5.21174 8.19156C5.11119 8.0928 4.96636 8.06262 4.83838 8.11553L3.83536 8.52329L2.94939 7.8785C2.83617 7.79614 2.68853 7.78904 2.56968 7.86025C2.45015 7.93105 2.37878 8.06783 2.38582 8.21282L2.44171 9.35068L1.5895 10.0443C1.48054 10.1326 1.42884 10.2787 1.45557 10.4215C1.48227 10.5638 1.58283 10.6779 1.71538 10.7155L2.75358 11.0107L3.11251 12.0845C3.15822 12.2212 3.27353 12.3189 3.40959 12.336C3.42366 12.3379 3.43773 12.3386 3.45179 12.3386C3.57273 12.3386 3.68664 12.2742 3.75379 12.1649L4.33915 11.2097L5.41354 11.1799C5.55067 11.1758 5.6737 11.0901 5.731 10.9582C5.78833 10.8262 5.77004 10.6712 5.68391 10.5582L5.00785 9.67232ZM4.13101 10.452C4.01255 10.4554 3.90319 10.5202 3.8385 10.6257L3.54741 11.1009L3.36881 10.5668C3.32945 10.4483 3.23734 10.3581 3.12271 10.3257L2.6066 10.1788L3.03024 9.83369C3.12448 9.7573 3.17687 9.63655 3.17088 9.51133L3.1431 8.94517L3.58363 9.26608C3.68137 9.33764 3.80581 9.35329 3.91655 9.30781L4.41509 9.10506L4.26356 9.6481C4.22982 9.76886 4.25443 9.89894 4.32894 9.99659L4.66541 10.4371L4.13101 10.452Z" fill="#2D3B45"/>
+<path d="M1.96063 6.47752C1.97467 6.47936 1.98874 6.48012 2.00281 6.48012C2.12375 6.48012 2.23765 6.41563 2.3048 6.30643L2.89016 5.35083L3.96458 5.321C4.10168 5.3169 4.22472 5.23119 4.28204 5.09923C4.33934 4.96731 4.32105 4.81225 4.23492 4.69934L3.55922 3.81343L3.86402 2.72139C3.90303 2.58201 3.86366 2.43143 3.76311 2.33267C3.66292 2.23391 3.51701 2.2037 3.38975 2.25663L2.38637 2.66437L1.50076 2.0196C1.38754 1.93687 1.24095 1.92976 1.12106 2.00133C1.00152 2.07216 0.930156 2.20894 0.937191 2.3539L0.993081 3.49176L0.140875 4.18536C0.0319077 4.27371 -0.0197896 4.41982 0.00694182 4.56256C0.0336457 4.70493 0.134199 4.81898 0.266753 4.85662L1.30459 5.15179L1.66355 6.22592C1.70923 6.3627 1.82457 6.46035 1.96063 6.47752ZM1.15764 4.31992L1.58161 3.9748C1.67585 3.89838 1.72824 3.77763 1.72225 3.6524L1.69447 3.08666L2.13464 3.40718C2.23274 3.47872 2.35718 3.49439 2.46759 3.44892L2.96646 3.24616L2.81493 3.78918C2.78119 3.90996 2.8058 4.04001 2.88031 4.13766L3.21643 4.57821L2.68204 4.59312C2.56356 4.59646 2.45421 4.66132 2.38954 4.76678L2.09842 5.24198L1.91983 4.70791C1.88046 4.58938 1.78835 4.49919 1.67373 4.46676L1.15764 4.31992Z" fill="#2D3B45"/>
+</mask>
+<g mask="url(#mask0_5548_26552)">
+<rect width="18" height="18" fill="currentColor"/>
+</g>
+</svg>
+`;
+const InsertSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M16.9455 16.9451H12.375V18H18V12.375H16.9455V16.9451Z" fill="#2D3B45"/>
+  <path d="M1.05487 1.0545H5.625V0H0V5.625H1.0545L1.05487 1.0545Z" fill="#2D3B45"/>
+  <path d="M12.375 0V1.0545H16.9455V5.625H18V0H12.375Z" fill="#2D3B45"/>
+  <path d="M1.05487 12.375H0V18H5.625V16.9451H1.05487V12.375Z" fill="#2D3B45"/>
+  <path d="M3.59082 14.4093H14.4099V3.59058H3.59082V14.4093ZM4.64532 4.64508H13.3551V13.3548H4.64532V4.64508Z" fill="#2D3B45"/>
+  <path d="M9.52752 6.92065H8.47302V8.47278H6.9209V9.52728H8.47302V11.0794H9.52752V9.52728H11.0796V8.47278H9.52752V6.92065Z" fill="#2D3B45"/>
+</svg>`;
+const CopySVG = IconCopyLine === null || IconCopyLine === void 0 ? void 0 : IconCopyLine.src;
+const RefreshSVG = IconRefreshLine === null || IconRefreshLine === void 0 ? void 0 : IconRefreshLine.src;
+const DislikeSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.17647 7.41176L3.2353 7.41176L3.2353 6.35294C2.65189 6.35294 2.17647 5.87859 2.17647 5.29411C2.17647 4.70964 2.65189 4.23529 3.2353 4.23529L4.29412 4.23529L4.29412 3.17647C3.71071 3.17647 3.2353 2.70211 3.2353 2.11764C3.2353 1.53317 3.71071 1.05882 4.29412 1.05882L13.2941 1.05882C14.7532 1.05882 15.9412 2.24576 15.9412 3.70588L15.9412 9.52941L14.9417 9.52941C13.6277 9.52941 12.3698 10.0694 11.4888 11.0086C10.2267 12.3554 8.738 14.4445 8.54953 16.9412L8.20859 16.9412C7.7353 16.9412 7.28953 16.7315 6.98671 16.3652C6.68071 15.9946 6.55683 15.5107 6.64788 15.0385C6.86071 13.9267 7.21224 12.8255 7.69083 11.7656C7.91424 11.2733 7.87188 10.71 7.58071 10.2568C7.28635 9.80153 6.78659 9.52941 6.24341 9.52941L2.17647 9.52941C1.59306 9.52941 1.11765 9.05506 1.11765 8.47059C1.11765 7.88611 1.59306 7.41176 2.17647 7.41176ZM0.0588235 8.47059C0.0588234 9.63847 1.00859 10.5882 2.17647 10.5882L6.24341 10.5882C6.42765 10.5882 6.59071 10.6761 6.69024 10.8307C6.78765 10.9821 6.80141 11.1642 6.72624 11.3294C6.21377 12.4645 5.83682 13.6461 5.60706 14.8405C5.45776 15.624 5.66212 16.4255 6.17035 17.0396C6.67541 17.6495 7.41871 18 8.20859 18L9.58824 18L9.58824 17.4706C9.58824 15.0851 11.042 13.0341 12.2607 11.7328C12.9426 11.0065 13.9199 10.5882 14.9416 10.5882L17 10.5882L17 3.70588C17 1.66235 15.3376 -1.45327e-07 13.2941 -3.23979e-07L4.29412 -1.11078e-06C3.12624 -1.21288e-06 2.17647 0.949763 2.17647 2.11765C2.17647 2.55282 2.30882 2.95835 2.53435 3.29506C1.71059 3.58518 1.11765 4.37188 1.11765 5.29412C1.11765 5.72929 1.25 6.13482 1.47553 6.47153C0.651767 6.76164 0.0588235 7.54835 0.0588235 8.47059Z" fill="#2D3B45"/>
+</svg>`;
+const AIAvatarSVG = `
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Avatar - AI">
+<rect id="Rectangle 2318" x="0.5" y="0.5" width="39" height="39" rx="19.5" fill="white" stroke="#C7CDD1"/>
+<rect id="Untitled-4 1" x="8" y="9" width="24" height="23.4915" fill="url(#pattern0_5509_72095)"/>
+</g>
+<defs>
+<pattern id="pattern0_5509_72095" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_5509_72095" transform="scale(0.0313 0.0313)"/>
+</pattern>
+<image id="image0_5509_72095" data-name="Untitled-4.png" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAgCAYAAACcuBHKAAAAAXNSR0IArs4c6QAAAKZlWElmTU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgExAAIAAAAhAAAAWodpAAQAAAABAAAAfAAAAAAAAABIAAAAAQAAAEgAAAABQWRvYmUgUGhvdG9zaG9wIDI0LjcgKE1hY2ludG9zaCkAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAAAhoAMABAAAAAEAAAAgAAAAALJEp6cAAAAJcEhZcwAACxMAAAsTAQCanBgAAAR2aVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgICAgICAgICAgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgICAgPHhtcE1NOkRlcml2ZWRGcm9tIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgPHN0UmVmOmluc3RhbmNlSUQ+eG1wLmlpZDoyQjczQThGMTYwQTMxMUVFOEVCRkM2RjY3ODM0QTFBMzwvc3RSZWY6aW5zdGFuY2VJRD4KICAgICAgICAgICAgPHN0UmVmOmRvY3VtZW50SUQ+eG1wLmRpZDoyQjczQThGMjYwQTMxMUVFOEVCRkM2RjY3ODM0QTFBMzwvc3RSZWY6ZG9jdW1lbnRJRD4KICAgICAgICAgPC94bXBNTTpEZXJpdmVkRnJvbT4KICAgICAgICAgPHhtcE1NOkRvY3VtZW50SUQ+eG1wLmRpZDoyQjczQThGNDYwQTMxMUVFOEVCRkM2RjY3ODM0QTFBMzwveG1wTU06RG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOkluc3RhbmNlSUQ+eG1wLmlpZDoyQjczQThGMzYwQTMxMUVFOEVCRkM2RjY3ODM0QTFBMzwveG1wTU06SW5zdGFuY2VJRD4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgMjQuNyAoTWFjaW50b3NoKTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KEHeJuAAADKRJREFUWAmNWAt0VdWZ/vY55577zr25eSckIS8CpBGDMgQIJiSgCKYYahCwKKaD0Nbasa0zw+iqKSO46NJoRWd8FGW6VGbMqpSZhUoBgwoUBRJjeCUSCSEm17zuvcl9n3vOnv+cmNrlWu3MXmvf/zz22fv7X9/+92XNzc0CdQ3U6rc/fccEs9yv2uxzmc0ha1Zbf4pF3vXf9y8/gmYu6GNQDQHOcww33cRx3Hgy9VND4hzoOThdaWC/ItGsrX7wl7cFNHG7ZnXkClZbTLDZuhxJzt++8+DaIzQA4Jwx44J+ah7Y/p+KzXO3ZrODm2QwixXckw7RakVqIrriYNPyo9Nj/79y5aafrQoIpkMqzaXJZgj2JJhcHoDmlAT+6gcPNfxAn0vSf27Z8OO3wgprVHyj8fj1L4RoYFwghJA9qXHLzbdYht0eXa2jRacCxXGzvFSVpbyYSUhXgCSRQWIiuGASJqxMGxVEDFm1xIeXc81dYxOBxyOKithkIJqIx2VdMVvuTM2eX8K1GTObqp87AB0Iq13b1OBXpbfj0OLhwQE5euUqQSPLk5H4sI+Lueksa9MWf93ttxTusRW3hbOt8zitbsDXHaR38et73a5OwDGKnm0vPLX0eNup7qGBQTePhMnmAoOagDo6gaTqRdz9d8sSQma2KZlpt0m+sYktCZMFEd+wEB3yQkxNppkAVdNgz0yDmRY5s+vB4JnyzlnJJew7IS+pJoqaAVTgDDS3AUSiWNBBTHDBLLPCp6rr89D8yGTZguXueFhCKBKnz6wQ3G5MHDvBREcSkpxJ8EPbIqZlFT0Zj8Vc0fExMBMZV+NQVQ0ZKQ5c7BjkI9521vq7V8aWV9UKrVHTkhQaECEXkKVE6gItPN1FuhJnMMa+IvlecWrBhtmFM599vsU6PuZAcaGHTQSjYORmIdmJxPgos+fk0QRcFLimmJVImFTgTFM5zGYJmalJ+PRsG2rrioXOrk5e3tBUcNSX+DmiYa5oqkhmAqOxkgqYKK8k6kzPL7qfpFeIg7+uYEXxxnuTL37WyeuXl7IOmi8z1QmrLOl6QovGkAiMg4fDFja7ou5cLK7Nj4eDitMui5e7fQKUi3j55RexqnE9PvKbsOGyn8Nq5qVmk6CKZHdRQJxkXBShkTtIQCa3yXpskKTgRA9FACkmvJ7KWJ0SxJE338S927YCljLMLnJrk+GYmla1zCTbHR+Js0rLeDii1csSF3su9LPq6ln4w8FWFC1Zge2dfuzom0SFQ2Zesv1YAhhXGXwUChOkTYjW1G0YpB6g+3GNYZzkGHUCI8wXGXshqOFzwYz7ltyEHzaswbWeLvzpdC/LLc0X5eQ0uMzsUT2UUHPr9544frx3+8Nbq7p+9viO2afHYW48OwjYLGRv2Zix2iVjVbIZc5JMyLRKSJIZLGQRPS5JZUTJHRN04aXMuRTjeCfG8CGBhUnvhIpiYX+agJpIMPbswz/v2n1+eP7KssJ/fe/VlmbKQxrJmI5dfOKDy+svhbHvDW9ISnHb+RjZ+h9z7FhXkITSZAscJoNWaOj/1TiCClkgzPG2D3giJsDqEHhE1FijXVC/Y8L9j1vZfpolQevregAPt7RYj5hmP3nenf5TCjGYZROPSQI7uTAbi3OmUnZ62QQFpSDo5KCPnGq6wgZZk9C4nr1T779+jfZxBRvIsD1uMomNPrMBxQpeKbl45RfvVpZMGKodiOfu73Mlr0nhicQYk0SVJ1hvXSkKXTYMj41jaGgIZklCfn4+Ma6FwBMlfMP4U2AIiP5cBxClyO+7dg1xRUF2Vhbmp3hw0qFh9ZU4+0SSeSa4esXDtkTmFs0goKtw52sH3PYn9gfwm3d57r7TKl46wT8e9NF8nO/93X4Oe5nuKqPX1Nbz9o5O452maYac/iFyMy67ui7wlbev/fM3cM7hv933Br1L8O7JBMelOE8fIXONc+6c4MGaCZ4qeYdjWaSAM5uC7Hoozh4r9aAiy42n97yIXzz0QyyoXIEQy4FNieP4+59jfsU8XO75HKUlxSAghmtofZIMV6/2oby8jDAXYN7NNdAkGVay0N9vvgdDwyN47JGfYo81gZ9EOPLsjA8JsA8ryEXZjteXyDtbed7zf1Tx1BF+5qsJ3nHxkqHJ0sUrDNmsW3qLjb9Rv8S4/+VjvzK0nrbGtNy969fG+1dXVRnjd7qnLFi95Fbj+dmOdn4lSipfjPGsEZ6Q4pzPDPCVgk9L2EXyY7/KuclBbOm248RHJ0kbwE9p9x9v/hcKWlrQdjGMz3SiKK3CS8+/BX8gYMQFoTFkKBTGgQPvATMXotuvGONT/mkX3njr94gSsent2PsfwWMClpI3hhRwG1kppiJFGIupFrOeJAkNtztknfAw6B02PlqzeB7u3bAOa7duQ+3JcuwOmIHuE9j847sgyzp/UDaQS/RmovRdsboW6PsYz8acNB5oeGArNjauxV11i4wx1we9tC8pmKszK/GJlexjo3yRHAJjOpcbjRAmaEsxm2mxpPk4mlGA29rex8DQCGaY4xi48CFa3/4D7iLmm26iztnUdFA7Hn8UN5TPReP31iIdM3Ho4P9gTuFMHHamUZhUQbaYkaAso/2KlKZFiWEpPMxChAk8qoOgDbQ7rCBMO/Xcigqivxj61zdhqZaEDfesx0CsG807n/wzgFg8jp7Pr+DTzi6SvUY66mDuWtuAlmeewzD60NS0GYuiZly4+z7gqg83LlqICKV2rw6ApM6ygqYxyS0h+hWZNIVc0h1J4Jp3DGULKrG5aRn25Zdj3os7YK5ehU8+OIKm+zbp6yAYCmL3r58jupZhs9swORmBSYhj+z//A+xUut276R7s2L0XBflkgb6r6Fi5Eeu+vwwVtXXoDyRwTBPhIL+HiOZTNR6VIEghTiBkjXYmTcKZXi/ybnai6V8eRVo+mXTbRnTSwi+9she5OTl0xSlVGE59fBbvHz5A93psxLHlRw/Rbkp1HgVqCpHTCy3bcc/G9Zj78VE88mQL1vxgCySzCWeGaLsTLEgiADqImEYMULzjzbK+hHaeO52aak+iGkPFe3VzkO60I041wygx5sjgEG6vLEOGx02BpRdWInR3nPrTaQT8fqRnpKOystIIar0i07PNHwzhyPleJGdmwEOdQh/jVF1t/iKGAbuTtn2eUF1MyoviVqEqN9Zrp91XJcJNY6BKg+PVs1doEQVX/RHcMWKBp6QMKS6XUfLpALzDwzjX3oFl1bfgzjXfxWIC0HGuHUNeKg8JgE5ebocdmXNvwIp4Bs7T9qpS9u3vD2GAmZHOocQlJpmj5A4lcln89ODBxKxb13XFFLVh3OmyZotMOe0PC47JACvISEEmUUMWYStJsUPSzU0a2WiLP3z4CEZGRoxMOnfuHDrPX0BV1RIDhB50nDKtezxKZmeYYxPQ1u/Hb0ISz7ZaFK+NyVZyxQymNnUVmT8Q0fiWOLzn7p6qNQ17o6pQPmRzzcqkYuTYcEATRofZ6txkMp0JTir7ku0yjF2UwMyvuJEIawK9V6/CRcVr/R2rYZL0yo+onED44uRKRUCxpOBQ7ziemQTPdNgw5DZJKSGtvURQas8Xy0cJ7dRWjgdeMuHlrZS8QNG/H3vwuoZnki026auxEQ2RgPCjkjzMy85A/bw8ZLmt+rC/2QJUSxy7HkT7SBA7R8nmJgvPSE5mIwQyhyV2Xa+wP2pMcJabcDNT9HiZavox70IrQ+s6ddGeQ+WXgpGTalqOMxryc8U7xIiNcENyEjYVpaEgxQknuUSm84mutUY9QRkzGdcwGFLw7mgEh8JEAiYiPbeLu+xOhlBAKZS0VR3L8o9ShpG/KI4ZI6d8U5d8DaRZAJ1La+jTLwsX9vnq6l1jN1Zyl0j+8Y3DFyOtKKeofk1QNUvFA+0JJkp4cg/0/UGUqOYjv7mT4HLRkY+OlKMUpRlfXGJZn7QFc/buzDsE+BopBFpJ2alFvw1i6p5vbn7Ncurg/i+Urt6syMJ50WBlrSmSmsFknQOIYc1Wh8j02pMywQCgl31mvR41g2yr+mmeYDQEcfhLntZ+Qkkd6LdIWTnewobGwtZ1iyOGJegE8tdAAI2NIlpb1QVL76jzTcYOJXyTZu1aJ7SiG2iHLIIlKw9K8dynRyyuiCzwzLjFIokWqwarzWuZ9DuFzz75CfuyD1LPRcjdnbDOXwoxNyea4nHd2fba04cbaf5Wmn8agC6/iYm/fEr60a264rvrsweGfNtiiUSNFonmmJhgdWSmj6xp+/2CZp0mv9Vq6BjaT38QJJwFDnHGjLDs8Vy32KxtOTmeV97Z92/eaQW/9Rn+F/W4ovAwCCW5AAAAAElFTkSuQmCC"/>
+</defs>
+</svg>
+`;
+export { AIWandSVG, AIAvatarSVG, InsertSVG, CopySVG, RefreshSVG, DislikeSVG };

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

@@ -0,0 +1,20 @@
+/*
+ * 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/>.
+ */
+export * from './aiicons';
+export * from './AIToolsTray';
+export * from './AIResponseModal';