@mantine-vue/whatsapp-inbox 3.6.0 → 3.7.0

package/lib/component-props.d.ts

@@ -1,6 +1,24 @@
 import type { VNodeChild } from 'vue';
 import type { EmitsToProps } from '@mantine-vue/core';
-import type { WhatsAppAttachment, WhatsAppContact, WhatsAppConversationSummary, WhatsAppMessageData, WhatsAppTemplate, WhatsAppUpload } from './types';
+import type { WhatsAppAttachment, WhatsAppContact, WhatsAppConversationSummary, WhatsAppMessageData, WhatsAppTemplate, WhatsAppTemplateValues, WhatsAppUpload } from './types';
+export interface WhatsAppTemplateSelectorSlotProps {
+    /** Whether the selector should be shown. */
+    opened: boolean;
+    /** Closes the selector without sending. */
+    close: () => void;
+    submit: (payload: {
+        template: WhatsAppTemplate;
+        values: WhatsAppTemplateValues;
+    }) => void;
+    /** Approved templates passed to the composer. */
+    templates: WhatsAppTemplate[];
+    /** Whether the template list is loading. */
+    loading: boolean;
+    /** Failure of the last template load. */
+    error: string | null | undefined;
+    /** Asks the consumer to load the templates again, through the `templatesRetryLoad` event. */
+    retryLoad: () => void;
+}
 /**
  * Props forwarded to a component the inbox renders internally, plus the `on*` listeners for its
  * events so a nested object can subscribe to them.
@@ -120,6 +138,8 @@ export interface WhatsAppConversationSlots extends WhatsAppMessageSlots {
     templatePreview?: (props: {
         template: WhatsAppTemplate;
     }) => VNodeChild;
+    /** Replaces the composer's template modal with a dialog of your own. */
+    templateSelector?: (props: WhatsAppTemplateSelectorSlotProps) => VNodeChild;
 }
 /** Slots of the contact panel. */
 export interface WhatsAppContactPanelSlots {

package/lib/components/WhatsAppComposer/WhatsAppComposer.types.d.ts

@@ -1,7 +1,7 @@
 import type { VNodeChild } from 'vue';
 import type { BoxProps, Factory, ModalProps } from '@mantine-vue/core';
 import type { StylesApiProps } from '@mantine-vue/core/styles-api';
-import type { ForwardedProps } from '../../component-props';
+import type { ForwardedProps, WhatsAppTemplateSelectorSlotProps } from '../../component-props';
 import type { WhatsAppInboxLabelsOverride } from '../../labels';
 import type { WhatsAppAttachmentsAddPayload, WhatsAppConversationCapabilities, WhatsAppMessageReference, WhatsAppOutgoingMessage, WhatsAppRejectedFile, WhatsAppTemplate, WhatsAppUpload } from '../../types';
 import type { WhatsAppAttachmentPreviewStylesNames } from '../WhatsAppAttachmentPreview';
@@ -35,6 +35,8 @@ export interface WhatsAppComposerSlots {
     templatePreview?: (props: {
         template: WhatsAppTemplate;
     }) => VNodeChild;
+    /** Replaces the template modal with a dialog of your own. */
+    templateSelector?: (props: WhatsAppTemplateSelectorSlotProps) => VNodeChild;
 }
 export interface WhatsAppComposerOwnProps extends StylesApiProps<WhatsAppComposerFactory> {
     /** Conversation the message is sent to. Included in every outgoing payload. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine-vue/whatsapp-inbox",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "Backend-agnostic WhatsApp inbox components for Mantine Vue",
   "license": "MIT",
   "files": [
@@ -39,8 +39,8 @@
     "vue": "^3.5.0"
   },
   "peerDependencies": {
-    "@mantine-vue/core": "3.6.0",
-    "@mantine-vue/hooks": "3.6.0",
+    "@mantine-vue/core": "3.7.0",
+    "@mantine-vue/hooks": "3.7.0",
     "vue": "^3.5.0"
   }
 }

package/styles.css

@@ -1081,7 +1081,7 @@
   font-style: italic;
   color: var(--mantine-color-dimmed);
 }
-._messageListRoot_1efgx_1 {
+._messageListRoot_1xgoq_1 {
   position: relative;
   flex: 1;
   min-height: 0;
@@ -1090,12 +1090,12 @@
   background-color: var(--wa-conversation-bg, var(--mantine-color-default));
 }
 
-._messageListScrollArea_1efgx_10 {
+._messageListScrollArea_1xgoq_10 {
   flex: 1;
   min-height: 0;
 }
 
-._messageListContent_1efgx_15 {
+._messageListContent_1xgoq_15 {
   display: flex;
   flex-direction: column;
   gap: var(--mantine-spacing-xs);
@@ -1104,10 +1104,10 @@
   justify-content: flex-end;
 }
 
-._messageListItems_1efgx_24 {
+._messageListItems_1xgoq_24 {
   display: flex;
   flex-direction: column;
-  gap: calc(0.125rem * var(--mantine-scale));
+  gap: calc(0.375rem * var(--mantine-scale));
   list-style: none;
   margin: 0;
   padding: 0;
@@ -1117,30 +1117,30 @@
  * One day of messages. The divider sticks inside this box rather than inside the whole list,
  * so the label of the next day pushes the previous one out instead of stacking on top of it.
  */
-._messageListGroup_1efgx_37 {
+._messageListGroup_1xgoq_37 {
   display: flex;
   flex-direction: column;
 }
 
-._messageListGroupItems_1efgx_42 {
+._messageListGroupItems_1xgoq_42 {
   display: flex;
   flex-direction: column;
-  gap: calc(0.125rem * var(--mantine-scale));
+  gap: calc(0.375rem * var(--mantine-scale));
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-._messageListItem_1efgx_24 {
+._messageListItem_1xgoq_24 {
   display: flex;
   flex-direction: column;
 }
 
-._messageListItem_1efgx_24:where([data-first-of-run]) {
-  margin-top: calc(0.5rem * var(--mantine-scale));
+._messageListItem_1xgoq_24:where([data-first-of-run]) {
+  margin-top: calc(0.75rem * var(--mantine-scale));
 }
 
-._messageListDayDivider_1efgx_60 {
+._messageListDayDivider_1xgoq_60 {
   display: flex;
   justify-content: center;
   padding-block: var(--mantine-spacing-xs);
@@ -1149,7 +1149,7 @@
   z-index: 1;
 }
 
-._messageListDayLabel_1efgx_69 {
+._messageListDayLabel_1xgoq_69 {
   font-size: var(--mantine-font-size-xs);
   color: var(--mantine-color-dimmed);
   background-color: var(--mantine-color-body);
@@ -1158,13 +1158,13 @@
   box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
 }
 
-._messageListLoadOlder_1efgx_78 {
+._messageListLoadOlder_1xgoq_78 {
   display: flex;
   justify-content: center;
   padding-block: var(--mantine-spacing-xs);
 }
 
-._messageListState_1efgx_84 {
+._messageListState_1xgoq_84 {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1175,7 +1175,7 @@
   text-align: center;
 }
 
-._messageListScrollToBottom_1efgx_95 {
+._messageListScrollToBottom_1xgoq_95 {
   position: absolute;
   inset-block-end: var(--mantine-spacing-md);
   inset-inline-end: var(--mantine-spacing-md);
@@ -1457,7 +1457,7 @@
 ._inboxRoot_1pu3o_1:where([data-narrow]) ._inboxPanel_1pu3o_39 {
   border-inline-start: none;
 }
-._modalRoot_1mb1l_1 {
+._modalRoot_1xrov_1 {
   display: contents;
 }
 
@@ -1465,19 +1465,25 @@
  * The dialog is a column: the header keeps its own padding, and the body is the only part that
  * loses it so the conversation can run edge to edge.
  */
-._modalContent_1mb1l_9 {
+._modalContent_1xrov_9 {
   display: flex;
   flex-direction: column;
 }
 
-._modalBody_1mb1l_14 {
+._modalBody_1xrov_14 {
   display: flex;
   flex-direction: column;
-  flex: 1;
+  flex: 0 1 auto;
   height: var(--wa-modal-height, 70vh);
   min-height: 0;
+  overflow: hidden;
   padding: 0;
 }
+
+._modalRoot_1xrov_1:where([data-full-screen]) ._modalBody_1xrov_14 {
+  flex: 1 1 0;
+  height: auto;
+}
 ._drawerRoot_1qheq_1 {
   display: contents;
 }

package/styles.layer.css

@@ -1082,7 +1082,7 @@
   font-style: italic;
   color: var(--mantine-color-dimmed);
 }
-._messageListRoot_1efgx_1 {
+._messageListRoot_1xgoq_1 {
   position: relative;
   flex: 1;
   min-height: 0;
@@ -1091,12 +1091,12 @@
   background-color: var(--wa-conversation-bg, var(--mantine-color-default));
 }
 
-._messageListScrollArea_1efgx_10 {
+._messageListScrollArea_1xgoq_10 {
   flex: 1;
   min-height: 0;
 }
 
-._messageListContent_1efgx_15 {
+._messageListContent_1xgoq_15 {
   display: flex;
   flex-direction: column;
   gap: var(--mantine-spacing-xs);
@@ -1105,10 +1105,10 @@
   justify-content: flex-end;
 }
 
-._messageListItems_1efgx_24 {
+._messageListItems_1xgoq_24 {
   display: flex;
   flex-direction: column;
-  gap: calc(0.125rem * var(--mantine-scale));
+  gap: calc(0.375rem * var(--mantine-scale));
   list-style: none;
   margin: 0;
   padding: 0;
@@ -1118,30 +1118,30 @@
  * One day of messages. The divider sticks inside this box rather than inside the whole list,
  * so the label of the next day pushes the previous one out instead of stacking on top of it.
  */
-._messageListGroup_1efgx_37 {
+._messageListGroup_1xgoq_37 {
   display: flex;
   flex-direction: column;
 }
 
-._messageListGroupItems_1efgx_42 {
+._messageListGroupItems_1xgoq_42 {
   display: flex;
   flex-direction: column;
-  gap: calc(0.125rem * var(--mantine-scale));
+  gap: calc(0.375rem * var(--mantine-scale));
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-._messageListItem_1efgx_24 {
+._messageListItem_1xgoq_24 {
   display: flex;
   flex-direction: column;
 }
 
-._messageListItem_1efgx_24:where([data-first-of-run]) {
-  margin-top: calc(0.5rem * var(--mantine-scale));
+._messageListItem_1xgoq_24:where([data-first-of-run]) {
+  margin-top: calc(0.75rem * var(--mantine-scale));
 }
 
-._messageListDayDivider_1efgx_60 {
+._messageListDayDivider_1xgoq_60 {
   display: flex;
   justify-content: center;
   padding-block: var(--mantine-spacing-xs);
@@ -1150,7 +1150,7 @@
   z-index: 1;
 }
 
-._messageListDayLabel_1efgx_69 {
+._messageListDayLabel_1xgoq_69 {
   font-size: var(--mantine-font-size-xs);
   color: var(--mantine-color-dimmed);
   background-color: var(--mantine-color-body);
@@ -1159,13 +1159,13 @@
   box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
 }
 
-._messageListLoadOlder_1efgx_78 {
+._messageListLoadOlder_1xgoq_78 {
   display: flex;
   justify-content: center;
   padding-block: var(--mantine-spacing-xs);
 }
 
-._messageListState_1efgx_84 {
+._messageListState_1xgoq_84 {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1176,7 +1176,7 @@
   text-align: center;
 }
 
-._messageListScrollToBottom_1efgx_95 {
+._messageListScrollToBottom_1xgoq_95 {
   position: absolute;
   inset-block-end: var(--mantine-spacing-md);
   inset-inline-end: var(--mantine-spacing-md);
@@ -1458,7 +1458,7 @@
 ._inboxRoot_1pu3o_1:where([data-narrow]) ._inboxPanel_1pu3o_39 {
   border-inline-start: none;
 }
-._modalRoot_1mb1l_1 {
+._modalRoot_1xrov_1 {
   display: contents;
 }
 
@@ -1466,19 +1466,25 @@
  * The dialog is a column: the header keeps its own padding, and the body is the only part that
  * loses it so the conversation can run edge to edge.
  */
-._modalContent_1mb1l_9 {
+._modalContent_1xrov_9 {
   display: flex;
   flex-direction: column;
 }
 
-._modalBody_1mb1l_14 {
+._modalBody_1xrov_14 {
   display: flex;
   flex-direction: column;
-  flex: 1;
+  flex: 0 1 auto;
   height: var(--wa-modal-height, 70vh);
   min-height: 0;
+  overflow: hidden;
   padding: 0;
 }
+
+._modalRoot_1xrov_1:where([data-full-screen]) ._modalBody_1xrov_14 {
+  flex: 1 1 0;
+  height: auto;
+}
 ._drawerRoot_1qheq_1 {
   display: contents;
 }