feat(v4): Compose new conversation without multiple clicks (#10545)

--------- Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Pranav <pranavrajs@gmail.com>
2024-12-05 20:16:29 -08:00
parent 67c90231b6
commit b116ab5ad3
26 changed files with 850 additions and 101 deletions
@@ -0,0 +1,91 @@
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import { DirectUpload } from 'activestorage';
+import {
+  MAXIMUM_FILE_UPLOAD_SIZE,
+  MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL,
+} from 'shared/constants/messages';
+import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+
+/**
+ * Composable for handling file uploads in conversations
+ * @param {Object} options - Configuration options
+ * @param {boolean} options.isATwilioSMSChannel - Whether the current channel is Twilio SMS
+ * @param {Function} options.attachFile - Callback function to handle file attachment
+ * @returns {Object} File upload methods and utilities
+ */
+export const useFileUpload = ({ isATwilioSMSChannel, attachFile }) => {
+  const { t } = useI18n();
+
+  const accountId = useMapGetter('getCurrentAccountId');
+  const currentUser = useMapGetter('getCurrentUser');
+  const currentChat = useMapGetter('getSelectedChat');
+  const globalConfig = useMapGetter('globalConfig/get');
+
+  const maxFileSize = computed(() =>
+    isATwilioSMSChannel
+      ? MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
+      : MAXIMUM_FILE_UPLOAD_SIZE
+  );
+
+  const handleDirectFileUpload = file => {
+    if (!file) return;
+
+    if (checkFileSizeLimit(file, maxFileSize.value)) {
+      const upload = new DirectUpload(
+        file.file,
+        `/api/v1/accounts/${accountId.value}/conversations/${currentChat.value.id}/direct_uploads`,
+        {
+          directUploadWillCreateBlobWithXHR: xhr => {
+            xhr.setRequestHeader(
+              'api_access_token',
+              currentUser.value.access_token
+            );
+          },
+        }
+      );
+
+      upload.create((error, blob) => {
+        if (error) {
+          useAlert(error);
+        } else {
+          attachFile({ file, blob });
+        }
+      });
+    } else {
+      useAlert(
+        t('CONVERSATION.FILE_SIZE_LIMIT', {
+          MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE: maxFileSize.value,
+        })
+      );
+    }
+  };
+
+  const handleIndirectFileUpload = file => {
+    if (!file) return;
+
+    if (checkFileSizeLimit(file, maxFileSize.value)) {
+      attachFile({ file });
+    } else {
+      useAlert(
+        t('CONVERSATION.FILE_SIZE_LIMIT', {
+          MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE: maxFileSize.value,
+        })
+      );
+    }
+  };
+
+  const onFileUpload = file => {
+    if (globalConfig.value.directUploadsEnabled) {
+      handleDirectFileUpload(file);
+    } else {
+      handleIndirectFileUpload(file);
+    }
+  };
+
+  return {
+    onFileUpload,
+  };
+};