Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/widget/components/ChatAttachment.vue

@@ -0,0 +1,167 @@
+<script>
+import FileUpload from 'vue-upload-component';
+import Spinner from 'shared/components/Spinner.vue';
+import {
+  checkFileSizeLimit,
+  resolveMaximumFileUploadSize,
+} from 'shared/helpers/FileHelper';
+import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import { DirectUpload } from 'activestorage';
+import { mapGetters } from 'vuex';
+import { emitter } from 'shared/helpers/mitt';
+import { useAttachments } from '../composables/useAttachments';
+
+export default {
+  components: { FluentIcon, FileUpload, Spinner },
+  props: {
+    onAttach: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  setup() {
+    const { canHandleAttachments } = useAttachments();
+    return { canHandleAttachments };
+  },
+  data() {
+    return { isUploading: false };
+  },
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+    }),
+    fileUploadSizeLimit() {
+      return resolveMaximumFileUploadSize(
+        this.globalConfig.maximumFileUploadSize
+      );
+    },
+    allowedFileTypes() {
+      return ALLOWED_FILE_TYPES;
+    },
+  },
+  mounted() {
+    document.addEventListener('paste', this.handleClipboardPaste);
+  },
+  unmounted() {
+    document.removeEventListener('paste', this.handleClipboardPaste);
+  },
+  methods: {
+    handleClipboardPaste(e) {
+      // If file picker is not enabled, do not allow paste
+      if (!this.canHandleAttachments) return;
+
+      const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+      // items is a DataTransferItemList object which does not have forEach method
+      const itemsArray = Array.from(items);
+      itemsArray.forEach(item => {
+        if (item.kind === 'file') {
+          e.preventDefault();
+          const file = item.getAsFile();
+          this.$refs.upload.add(file);
+        }
+      });
+    },
+    getFileType(fileType) {
+      return fileType.includes('image') ? 'image' : 'file';
+    },
+    async onFileUpload(file) {
+      if (this.globalConfig.directUploadsEnabled) {
+        await this.onDirectFileUpload(file);
+      } else {
+        await this.onIndirectFileUpload(file);
+      }
+    },
+    async onDirectFileUpload(file) {
+      if (!file) {
+        return;
+      }
+      this.isUploading = true;
+      try {
+        if (checkFileSizeLimit(file, this.fileUploadSizeLimit)) {
+          const { websiteToken } = window.chatwootWebChannel;
+          const upload = new DirectUpload(
+            file.file,
+            `/api/v1/widget/direct_uploads?website_token=${websiteToken}`,
+            {
+              directUploadWillCreateBlobWithXHR: xhr => {
+                xhr.setRequestHeader('X-Auth-Token', window.authToken);
+              },
+            }
+          );
+
+          upload.create((error, blob) => {
+            if (error) {
+              emitter.emit(BUS_EVENTS.SHOW_ALERT, {
+                message: error,
+              });
+            } else {
+              this.onAttach({
+                file: blob.signed_id,
+                ...this.getLocalFileAttributes(file),
+              });
+            }
+          });
+        } else {
+          emitter.emit(BUS_EVENTS.SHOW_ALERT, {
+            message: this.$t('FILE_SIZE_LIMIT', {
+              MAXIMUM_FILE_UPLOAD_SIZE: this.fileUploadSizeLimit,
+            }),
+          });
+        }
+      } catch (error) {
+        // Error
+      }
+      this.isUploading = false;
+    },
+    async onIndirectFileUpload(file) {
+      if (!file) {
+        return;
+      }
+      this.isUploading = true;
+      try {
+        if (checkFileSizeLimit(file, this.fileUploadSizeLimit)) {
+          await this.onAttach({
+            file: file.file,
+            ...this.getLocalFileAttributes(file),
+          });
+        } else {
+          emitter.emit(BUS_EVENTS.SHOW_ALERT, {
+            message: this.$t('FILE_SIZE_LIMIT', {
+              MAXIMUM_FILE_UPLOAD_SIZE: this.fileUploadSizeLimit,
+            }),
+          });
+        }
+      } catch (error) {
+        // Error
+      }
+      this.isUploading = false;
+    },
+    getLocalFileAttributes(file) {
+      return {
+        thumbUrl: window.URL.createObjectURL(file.file),
+        fileType: this.getFileType(file.type),
+      };
+    },
+  },
+};
+</script>
+
+<template>
+  <FileUpload
+    ref="upload"
+    :size="4096 * 2048"
+    :accept="allowedFileTypes"
+    :data="{
+      direct_upload_url: '/api/v1/widget/direct_uploads',
+      direct_upload: true,
+    }"
+    @input-file="onFileUpload"
+  >
+    <button class="min-h-8 min-w-8 flex items-center justify-center">
+      <FluentIcon v-if="!isUploading.image" icon="attach" />
+      <Spinner v-if="isUploading" size="small" />
+    </button>
+  </FileUpload>
+</template>