feat(chat): impl file sharing chat

src/lib/components/files/ShareFile.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+    import { Appearance, Shape } from "$lib/enums"
+    import { Button, Icon } from "$lib/elements"
+    import { _ } from "svelte-i18n"
+    import type { Attachment } from "$lib/types"
+    import { UIStore } from "$lib/state/ui"
+    import { ChatPreview } from "$lib/components"
+    import Label from "$lib/elements/Label.svelte"
+    import Checkbox from "$lib/elements/Checkbox.svelte"
+    import { RaygunStoreInstance, type FileAttachment } from "$lib/wasm/RaygunStore"
+    import { createEventDispatcher } from "svelte"
+    import { log } from "$lib/utils/Logger"
+
+    const CHAT_DIRECTORY = "chat_media"
+    type File =
+        | {
+              type: "attachment"
+              chat: string
+              attachment: Attachment
+          }
+        | {
+              type: "storage"
+              path: string
+          }
+    export let file: File
+
+    $: chats = UIStore.state.chats
+
+    let selectedChats: string[] = []
+
+    const dispatch = createEventDispatcher()
+    function onClose() {
+        dispatch("close")
+    }
+
+    async function share() {
+        if (selectedChats.length === 0) return
+        let att: FileAttachment[] = []
+        if (file.type === "attachment") {
+            att = [
+                {
+                    file: `/${CHAT_DIRECTORY}/${file.chat}/${file.attachment.name}`,
+                },
+            ]
+        } else {
+            att = [
+                {
+                    file: file.path,
+                },
+            ]
+        }
+        log.debug("Sharing file ", att, " with ", selectedChats)
+        await RaygunStoreInstance.sendMultiple(selectedChats, [], att)
+        onClose()
+    }
+</script>
+
+<div class="share-files-container">
+    <div class="share-files-top">
+        <Button hook="share-files" text={$_("files.share.files")} appearance={selectedChats.length === 0 ? Appearance.Alt : Appearance.Default} disabled={selectedChats.length === 0} on:click={share}>
+            <Icon icon={Shape.Share} />
+        </Button>
+    </div>
+    <div class="chats-select">
+        <Label text={$_("files.share.selectChats")}></Label>
+        <div class="chats-select-scroll">
+            {#each $chats as chat}
+                <button
+                    class="chat-select"
+                    on:click={_ => {
+                        if (!selectedChats.includes(chat.id)) {
+                            selectedChats.push(chat.id)
+                            selectedChats = selectedChats
+                        } else {
+                            selectedChats = selectedChats.filter(c => c !== chat.id)
+                        }
+                    }}>
+                    <Checkbox checked={selectedChats.includes(chat.id)}></Checkbox>
+                    <ChatPreview chat={chat} loading={false} interactable={false} cta={true} />
+                </button>
+            {/each}
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .share-files-container {
+        width: 85vh;
+        max-height: 75vh;
+        display: flex;
+        flex-direction: column;
+        .share-files-top {
+            display: flex;
+            justify-content: end;
+            padding: var(--padding-less);
+        }
+        .chats-select {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            margin: var(--padding-less);
+            padding: var(--padding);
+            gap: var(--gap-less);
+            background-color: var(--alt-color);
+            border-radius: var(--border-radius-less);
+            overflow: hidden;
+            .chats-select-scroll {
+                height: 100%;
+                overflow-y: auto;
+            }
+            .chat-select {
+                width: 100%;
+                display: flex;
+                align-items: center;
+                background-color: transparent;
+                border-color: transparent;
+                gap: var(--gap-less);
+                &:hover {
+                    background-color: var(--alt-color-alt);
+                    cursor: pointer;
+                }
+                :global(.chat-preview) {
+                    width: 100%;
+                    background-color: transparent;
+                    border-color: transparent;
+                }
+            }
+        }
+    }
+</style>

src/lib/components/messaging/AttachmentRenderer.svelte

@@ -45,7 +45,10 @@
                         type: "unknown/unknown",
                         remotePath: "",
                     }}
-                    on:download={() => download_attachment(messageId, attachment)} />
+                    on:download={() => download_attachment(messageId, attachment)}
+                    on:share={() => {
+                        dispatch("share", attachment)
+                    }} />
             {:else if attachment.kind === MessageAttachmentKind.Image}
                 <ImageEmbed
                     source={attachment.location}

src/lib/components/messaging/ChatPreview.svelte

@@ -19,6 +19,7 @@
     export let chat: Chat
     export let cta: boolean = false
     export let loading: boolean
+    export let interactable: boolean = true
 
     const timeAgo = new TimeAgo("en-US")
 
@@ -72,13 +73,20 @@
             timeago = getTimeAgo(chat.last_message_at)
         }, 500)
     })
+
+    function getClass() {
+        if (!interactable) return ""
+        return `${cta ? "cta" : ""} ${get(Store.state.activeChat)?.id === chat.id ? "active-chat" : ""}`
+    }
 </script>
 
 <button
     data-cy="chat-preview"
-    class="chat-preview {cta ? 'cta' : ''} {get(Store.state.activeChat)?.id === chat.id ? 'active-chat' : ''}"
+    class="chat-preview {getClass()}"
+    disabled={!interactable}
     on:contextmenu
     on:click={_ => {
+        if (!interactable) return
         dispatch("click")
         Store.setActiveChat(chat)
         let isMobile = checkMobile()
@@ -170,6 +178,11 @@
             margin: 0;
         }
 
+        &:disabled {
+            opacity: var(--disabled-opacity);
+            pointer-events: none;
+        }
+
         &:hover {
             background-color: var(--alt-color-alt);
             cursor: pointer;

src/lib/components/messaging/embeds/FileEmbed.svelte

@@ -28,6 +28,10 @@
     function download() {
         dispatch("download")
     }
+
+    function share() {
+        dispatch("share")
+    }
 </script>
 
 <div class="file-embed {altBackgroundColor ? 'alt-bg' : ''}" data-cy="file-embed">
@@ -43,14 +47,13 @@
             <Button hook="file-embed-download-button" icon tooltip={$_("files.download")} on:click={download}>
                 <Icon icon={Shape.Download} />
             </Button>
-            <!-- TODO: Needs implementation 
-            <Button hook="file-embed-share-button" icon appearance={Appearance.Alt} tooltip={$_("files.share")}>
+            <Button hook="file-embed-share-button" icon appearance={Appearance.Alt} tooltip={$_("files.share")} on:click={share}>
                 <Icon icon={Shape.Share} />
             </Button>
+            <!-- TODO: Needs implementation 
             <Button hook="file-embed-add-to-files-button" appearance={Appearance.Alt} text={$_("files.addFiles")}>
                 <Icon icon={Shape.Plus} />
-            </Button>
-            -->
+            </Button> -->
         </Controls>
     </div>
 </div>

src/lib/lang/en.json

@@ -177,6 +177,8 @@
         "download": "Download",
         "rename": "Rename",
         "share": "Share",
+        "share.selectChats": "Select Chats",
+        "share.files": "Share Files with Chats",
         "addFiles": "Add to Files",
         "quickActions": "Quick Actions",
         "sync": "Sync",

src/routes/chat/+page.svelte

@@ -56,6 +56,7 @@
     import { checkMobile } from "$lib/utils/Mobile"
     import BrowseFiles from "../files/BrowseFiles.svelte"
     import AttachmentRenderer from "$lib/components/messaging/AttachmentRenderer.svelte"
+    import ShareFile from "$lib/components/files/ShareFile.svelte"
 
     let loading = false
     let contentAsideOpen = false
@@ -113,6 +114,8 @@
     let reactingTo: string | undefined
     let fileUpload: FileInput
 
+    let fileToShare: [Attachment, string] | undefined
+
     $: chats = UIStore.state.chats
     $: pendingMessages = derived(ConversationStore.getPendingMessages($activeChat), msg => Object.values(msg))
 
@@ -293,9 +296,6 @@
         })
     }
 
-    async function download_attachment(message: string, attachment: Attachment) {
-        await RaygunStoreInstance.downloadAttachment($conversation!.id, message, attachment.name, attachment.size)
-    }
     let activeCallInProgress = false
     let activeCallDid = ""
 
@@ -458,6 +458,23 @@
             }} />
     {/if}
 
+    {#if fileToShare}
+        <Modal
+            on:close={_ => {
+                fileToShare = undefined
+            }}>
+            <ShareFile
+                file={{
+                    type: "attachment",
+                    chat: fileToShare[1],
+                    attachment: fileToShare[0],
+                }}
+                on:close={_ => {
+                    fileToShare = undefined
+                }} />
+        </Modal>
+    {/if}
+
     {#if dragging_files > 0}
         <div class="upload-overlay">
             <div class="upload-element">
@@ -731,7 +748,8 @@
                                                             }}
                                                             messageId={message.id}
                                                             chatID={$activeChat.id}
-                                                            contextBuilder={attachment => build_context_items(message, attachment)} />
+                                                            contextBuilder={attachment => build_context_items(message, attachment)}
+                                                            on:share={e => (fileToShare = [e.detail, $activeChat.id])} />
                                                     {/if}
                                                 {/if}
                                             </Message>