From aec323e2c4aa6f03e089ddf541c9ffa29c7da108 Mon Sep 17 00:00:00 2001
From: Flemmli97 <Flemmli97@users.noreply.github.com>
Date: Mon, 14 Oct 2024 14:51:27 +0200
Subject: [PATCH 1/4] impl file sharing chat

---
 src/lib/components/files/ShareFile.svelte     | 128 ++++++++++++++++++
 .../components/messaging/ChatPreview.svelte   |  15 +-
 .../messaging/embeds/FileEmbed.svelte         |  11 +-
 src/routes/chat/+page.svelte                  |  23 +++-
 4 files changed, 171 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/components/files/ShareFile.svelte

diff --git a/src/lib/components/files/ShareFile.svelte b/src/lib/components/files/ShareFile.svelte
new file mode 100644
index 000000000..36e385db9
--- /dev/null
+++ b/src/lib/components/files/ShareFile.svelte
@@ -0,0 +1,128 @@
+<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"
+
+    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,
+                },
+            ]
+        }
+        await RaygunStoreInstance.sendMultiple(selectedChats, [], att)
+        onClose()
+    }
+</script>
+
+<div class="share-files-container">
+    <div class="share-files-top">
+        <Button hook="share-files" text="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="Select Chats"></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>
diff --git a/src/lib/components/messaging/ChatPreview.svelte b/src/lib/components/messaging/ChatPreview.svelte
index cf6235a0a..877e2caef 100644
--- a/src/lib/components/messaging/ChatPreview.svelte
+++ b/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")
 
@@ -69,13 +70,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()
@@ -159,6 +167,11 @@
             margin: 0;
         }
 
+        &:disabled {
+            opacity: var(--disabled-opacity);
+            pointer-events: none;
+        }
+
         &:hover {
             background-color: var(--alt-color-alt);
             cursor: pointer;
diff --git a/src/lib/components/messaging/embeds/FileEmbed.svelte b/src/lib/components/messaging/embeds/FileEmbed.svelte
index deefbd4a0..72d3ba4df 100644
--- a/src/lib/components/messaging/embeds/FileEmbed.svelte
+++ b/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>
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index 65983103b..8604e74a3 100644
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -55,6 +55,7 @@
     import { tempCDN } from "$lib/utils/CommonVariables"
     import { checkMobile } from "$lib/utils/Mobile"
     import BrowseFiles from "../files/BrowseFiles.svelte"
+    import ShareFile from "$lib/components/files/ShareFile.svelte"
 
     let loading = false
     let contentAsideOpen = false
@@ -98,6 +99,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))
 
@@ -418,6 +421,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">
@@ -703,7 +723,8 @@
                                                                             type: "unknown/unknown",
                                                                             remotePath: "",
                                                                         }}
-                                                                        on:download={_ => download_attachment(message.id, attachment)} />
+                                                                        on:download={_ => download_attachment(message.id, attachment)}
+                                                                        on:share={_ => (fileToShare = [attachment, $activeChat.id])} />
                                                                 {:else if attachment.kind === MessageAttachmentKind.Image}
                                                                     <ImageEmbed
                                                                         source={attachment.location}

From f3a116493a5c8360ea311d31cb89e5ec018fdd67 Mon Sep 17 00:00:00 2001
From: Flemmli97 <Flemmli97@users.noreply.github.com>
Date: Mon, 14 Oct 2024 14:56:51 +0200
Subject: [PATCH 2/4] lang

---
 src/lib/components/files/ShareFile.svelte | 4 ++--
 src/lib/lang/en.json                      | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/files/ShareFile.svelte b/src/lib/components/files/ShareFile.svelte
index 36e385db9..5f6308b7c 100644
--- a/src/lib/components/files/ShareFile.svelte
+++ b/src/lib/components/files/ShareFile.svelte
@@ -55,12 +55,12 @@
 
 <div class="share-files-container">
     <div class="share-files-top">
-        <Button hook="share-files" text="Share files" appearance={selectedChats.length === 0 ? Appearance.Alt : Appearance.Default} disabled={selectedChats.length === 0} on:click={share}>
+        <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="Select Chats"></Label>
+        <Label text={$_("files.share.selectChats")}></Label>
         <div class="chats-select-scroll">
             {#each $chats as chat}
                 <button
diff --git a/src/lib/lang/en.json b/src/lib/lang/en.json
index d189b08f3..a31c5374e 100644
--- a/src/lib/lang/en.json
+++ b/src/lib/lang/en.json
@@ -176,6 +176,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",

From 16c5b7e484a3e09be0c7b1746974ca1531c8d1e9 Mon Sep 17 00:00:00 2001
From: Flemmli97 <Flemmli97@users.noreply.github.com>
Date: Thu, 17 Oct 2024 16:47:09 +0200
Subject: [PATCH 3/4] add logging

---
 src/lib/components/files/ShareFile.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/components/files/ShareFile.svelte b/src/lib/components/files/ShareFile.svelte
index 5f6308b7c..18778e092 100644
--- a/src/lib/components/files/ShareFile.svelte
+++ b/src/lib/components/files/ShareFile.svelte
@@ -9,6 +9,7 @@
     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 =
@@ -48,6 +49,7 @@
                 },
             ]
         }
+        log.debug("Sharing file ", att, " with ", selectedChats)
         await RaygunStoreInstance.sendMultiple(selectedChats, [], att)
         onClose()
     }

From b70fc5891e113eb44aff15ba0b12b499394b597a Mon Sep 17 00:00:00 2001
From: Flemmli97 <Flemmli97@users.noreply.github.com>
Date: Thu, 17 Oct 2024 19:09:41 +0200
Subject: [PATCH 4/4] fix error from merge

---
 src/routes/chat/+page.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index 97fb8fc0c..8e5a61d18 100644
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -748,6 +748,7 @@
                                                             }}
                                                             messageId={message.id}
                                                             chatID={$activeChat.id}
+                                                            contextBuilder={attachment => build_context_items(message, attachment)}
                                                             on:share={e => (fileToShare = [e.detail, $activeChat.id])} />
                                                     {/if}
                                                 {/if}