Add in differentiation of inline and root modals

src/core/components.tsx

@@ -516,7 +516,7 @@ export const Message = (props: MessageProps) => (
   />
 );
 
-interface ModalProps {
+interface BaseModalProps {
   /** Array of Actions, Context, Divider, ImageBlock, Input, or Section components	 */
   children: PheliaChildren;
   /** The title of the modal. */
@@ -543,6 +543,26 @@ interface ModalProps {
   onCancel?: (event: InteractionEvent) => Promise<void>;
 }
 
+type RootModalProps = BaseModalProps & {
+  /** A modal subtype indicating this modal was opened by a shortcut or command. */
+  type: "root";
+  /**
+   * An optional callback that executes when the modal is submitted.
+   */
+  onSubmit?: (event: SubmitEvent) => Promise<void>;
+  /**
+   * An optional callback that executes when the modal is canceled.
+   */
+  onCancel?: (event: InteractionEvent) => Promise<void>;
+}
+
+type InlineModalProps = BaseModalProps & {
+  /** A modal subtype indicating this modal was opened by another component. */
+  type?: "inline";
+};
+
+type ModalProps = RootModalProps | InlineModalProps;
+
 /**
  * Modals provide focused spaces ideal for requesting and collecting data from users,
  * or temporarily displaying dynamic and interactive information.

src/core/interfaces.ts

@@ -131,6 +131,11 @@ export interface PheliaMessageContainer {
   type: "message" | "modal" | "home";
   /** When `type` === message: whether the message is ephemeral or not */
   isEphemeral?: true;
+  /**
+   * When `type` === modal, whether the modal was initiated inside another
+   * component (by use of `useModal`) or by a command or shortcut.
+   */
+  modalType: "inline" | "root";
   /** An id for the surface */
   viewID: string;
   /** A user who interacts with the message */

src/core/phelia.ts

@@ -79,6 +79,7 @@ export class Phelia {
         props,
         state: initializedState,
         type: "modal",
+        modalType: "root",
         viewID,
       })
     );
@@ -552,6 +553,7 @@ export class Phelia {
             props,
             state: initializedState,
             type: "modal",
+            modalType: "inline",
             viewID,
             user,
           })
@@ -753,13 +755,14 @@ export class Phelia {
       return async () => null;
     }
 
+    const isRootModal = invokerContainer.modalType === "root";
     await render(
       React.createElement(this.messageCache.get(invokerContainer.name) as any, {
         useState,
         props: invokerContainer.props,
         useModal,
         user: invokerContainer.type === "home" ? payload.user : undefined,
-      }), {
+      }), !isRootModal ? undefined : {
         value: undefined,
         event: {
           form,