+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/AChat/AChatAttachment/AChatFileLoader.tsx b/src/components/AChat/AChatAttachment/AChatFileLoader.tsx
new file mode 100644
index 000000000..ba17176ac
--- /dev/null
+++ b/src/components/AChat/AChatAttachment/AChatFileLoader.tsx
@@ -0,0 +1,103 @@
+import { computed, defineComponent, PropType, unref } from 'vue'
+import { useStore } from 'vuex'
+import { useQuery } from '@tanstack/vue-query'
+
+import { FileAsset } from '@/lib/adamant-api/asset'
+import { LocalFile, NormalizedChatMessageTransaction } from '@/lib/chat/helpers'
+
+function isLocalFile(file: FileAsset | LocalFile): file is LocalFile {
+ return 'file' in file && file.file?.file instanceof File
+}
+
+export const AChatFileLoader = defineComponent(
+ (props, { slots }) => {
+ const store = useStore()
+ const myAddress = computed(() => store.state.address)
+
+ const publicKey = computed(() => {
+ return props.transaction.senderId === myAddress.value
+ ? props.transaction.recipientPublicKey
+ : props.transaction.senderPublicKey
+ })
+
+ const width = computed(() => {
+ if (isLocalFile(props.file)) {
+ return props.file.file.width
+ } else {
+ return props.file.resolution?.[0]
+ }
+ })
+
+ const height = computed(() => {
+ if (isLocalFile(props.file)) {
+ return props.file.file.height
+ } else {
+ return props.file.resolution?.[1]
+ }
+ })
+
+ const { data, isLoading, error } = useQuery({
+ queryKey: ['file', (props.file as FileAsset).id],
+ queryFn: async () => {
+ const file = props.file as FileAsset
+
+ const fileUrl = await store.dispatch('attachment/getAttachmentUrl', {
+ cid: file.id,
+ publicKey: publicKey.value,
+ nonce: file.nonce
+ })
+
+ return fileUrl
+ },
+ enabled: !isLocalFile(props.file),
+ retry: false,
+ refetchOnWindowFocus: false,
+ refetchOnMount: true
+ })
+
+ const fileUrl = computed(() => {
+ if (isLocalFile(props.file)) {
+ return store.getters['attachment/getImageUrl'](props.file.file.cid)
+ }
+
+ return data.value
+ })
+
+ const uploadProgress = computed(() => {
+ if (isLocalFile(props.file)) {
+ return store.getters['attachment/getUploadProgress'](props.file.file.cid)
+ }
+
+ return 100
+ })
+
+ return () => (
+ <>
+ {slots.default?.({
+ isLoading: unref(isLoading),
+ uploadProgress: unref(uploadProgress),
+ fileUrl: unref(fileUrl),
+ error: unref(error),
+ width: unref(width),
+ height: unref(height)
+ })}
+
+ )
+ },
+ {
+ props: {
+ file: {
+ type: Object as PropType
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ fileName }}
+ {{ formatBytes(fileSize) }}
+
+
+
+
+
+
+
+
+
+
+ {{ slide + 1 }} of {{ files.length }}
+
+
+
+
+
+ Download
+
+
+ {{ fileName }}
+ {{ formatBytes(fileSize) }}
+
+
+
+
+
+
+
+
diff --git a/src/components/AChat/AChatAttachment/InlineLayout.vue b/src/components/AChat/AChatAttachment/InlineLayout.vue
new file mode 100644
index 000000000..5c0f322f4
--- /dev/null
+++ b/src/components/AChat/AChatAttachment/InlineLayout.vue
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/AChat/AChatForm.vue b/src/components/AChat/AChatForm.vue
index 80e146bdd..2d37889f6 100644
--- a/src/components/AChat/AChatForm.vue
+++ b/src/components/AChat/AChatForm.vue
@@ -3,6 +3,7 @@
+
+
+
+
+
+
diff --git a/src/components/AChat/FilesPreview/FilesPreviewItem.vue b/src/components/AChat/FilesPreview/FilesPreviewItem.vue
new file mode 100644
index 000000000..242c63565
--- /dev/null
+++ b/src/components/AChat/FilesPreview/FilesPreviewItem.vue
@@ -0,0 +1,115 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/AChat/QuotedMessage.vue b/src/components/AChat/QuotedMessage.vue
index c6aa11277..d0fe2cad4 100644
--- a/src/components/AChat/QuotedMessage.vue
+++ b/src/components/AChat/QuotedMessage.vue
@@ -8,17 +8,25 @@
+ ![]()
+
+
+ {{ file.name }}
+
- {{ '{ ' + $t('chats.invalid_message') + ' }' }}
+ {{ '{ ' + t('chats.invalid_message') + ' }' }}
- {{ '{ ' + $t('chats.message_not_found') + ' }' }}
+ {{ '{ ' + t('chats.message_not_found') + ' }' }}
{{ cryptoTransferLabel }}
+
+
+
+ [{{ transaction.asset.files.length }} {{ t('chats.files') }}]:
+
+ {{ transaction.message }}
+
+
@@ -26,16 +34,17 @@