| 1 | <script type="module"> |
| 2 | import { store } from "/components/chat/attachments/attachmentsStore.js"; |
| 3 | import { store as imageViewerStore } from "/components/modals/image-viewer/image-viewer-store.js"; |
| 4 | </script> |
| 5 | |
| 6 | <div x-data> |
| 7 | <template x-if="$store.chatAttachments"> |
| 8 | |
| 9 | <div x-show="$store.chatAttachments.hasAttachments" class="preview-section scrollbar"> |
| 10 | <template x-for="(attachment, index) in $store.chatAttachments.attachments" :key="index"> |
| 11 | <div class="attachment-item" |
| 12 | :class="{'image-type': attachment.type === 'image', 'file-type': attachment.type === 'file'}"> |
| 13 | <template x-if="attachment.type === 'image'"> |
| 14 | <img :src="attachment.url" class="attachment-preview" :alt="attachment.name" style="cursor: pointer;" |
| 15 | @click="$store.imageViewer.open(attachment.url, { name: attachment.name })"> |
| 16 | </template> |
| 17 | <template x-if="attachment.type === 'file'"> |
| 18 | <div> |
| 19 | <img :src="attachment.displayInfo.previewUrl" class="file-icon" :alt="attachment.extension"> |
| 20 | <span class="file-title" x-text="attachment.name"></span> |
| 21 | </div> |
| 22 | </template> |
| 23 | <button @click="$store.chatAttachments.removeAttachment(index)" |
| 24 | class="remove-attachment">×</button> |
| 25 | </div> |
| 26 | </template> |
| 27 | </div> |
| 28 | |
| 29 | </template> |
| 30 | </div> |