From 2cd0cde5fc7d650929c6a4e2d559326becc2ca6d Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Mon, 16 Dec 2024 15:16:40 -0800
Subject: [PATCH] added button to remove staged asset

---
 app/client/web/src/conversation/Conversation.tsx   | 12 +++++-------
 .../conversation/audioFile/AudioFile.module.css    | 14 ++++++++++----
 .../web/src/conversation/audioFile/AudioFile.tsx   |  8 ++++++--
 .../conversation/binaryFile/BinaryFile.module.css  |  6 ++++++
 .../web/src/conversation/binaryFile/BinaryFile.tsx |  8 ++++++--
 .../conversation/imageFile/ImageFile.module.css    |  7 +++++++
 .../web/src/conversation/imageFile/ImageFile.tsx   | 10 ++++++++--
 .../web/src/conversation/useConversation.hook.ts   |  4 ++++
 .../conversation/videoFile/VideoFile.module.css    |  6 ++++++
 .../web/src/conversation/videoFile/VideoFile.tsx   |  9 +++++++--
 10 files changed, 65 insertions(+), 19 deletions(-)

diff --git a/app/client/web/src/conversation/Conversation.tsx b/app/client/web/src/conversation/Conversation.tsx
index 9db4700e..8f305629 100644
--- a/app/client/web/src/conversation/Conversation.tsx
+++ b/app/client/web/src/conversation/Conversation.tsx
@@ -134,18 +134,16 @@ export function Conversation() {
 
   const media = state.assets.map((asset, index: number) => {
     if (asset.type === 'image') {
-      return <ImageFile key={index} source={asset.file} />
+      return <ImageFile key={index} source={asset.file} disabled={sending} remove={() => actions.removeAsset(index)} />
     } else if (asset.type === 'video') {
-      return <VideoFile key={index} source={asset.file} thumbPosition={(position: number) => actions.setThumbPosition(index, position)} disabled={sending} />
+      return <VideoFile key={index} source={asset.file} thumbPosition={(position: number) => actions.setThumbPosition(index, position)} disabled={sending} remove={() => actions.removeAsset(index)}/>
     } else if (asset.type === 'audio') {
-      return <AudioFile key={index} source={asset.file} updateLabel={(label: string) => actions.setLabel(index, label)} disabled={sending} />
+      return <AudioFile key={index} source={asset.file} updateLabel={(label: string) => actions.setLabel(index, label)} disabled={sending} remove={() => actions.removeAsset(index)} />
     } else {
-      return <BinaryFile key={index} source={asset.file} />
+      return <BinaryFile key={index} source={asset.file} disabled={sending} remove={() => actions.removeAsset(index)} />
     }
   });
 
-console.log("HIIGHT: ", height);
-
   return (
     <div className={classes.conversation}>
       <div className={classes.header}>
@@ -209,7 +207,7 @@ console.log("HIIGHT: ", height);
           <div className={classes.progress} style={{ width: `${state.progress}%` }}/>
         )}
       </div>
-      <AnimateHeight className={classes.add} duration={500} height={height}>
+      <AnimateHeight className={classes.add} duration={333} height={height ? height : 132}>
         <div ref={ref} className={classes.staging}>
           <input type='file' name="asset" accept="image/*" ref={attachImage} onChange={e => addImage(e.target?.files?.[0])} style={{display: 'none'}}/>
           <input type='file' name="asset" accept="video/*" ref={attachVideo} onChange={e => addVideo(e.target?.files?.[0])} style={{display: 'none'}}/>
diff --git a/app/client/web/src/conversation/audioFile/AudioFile.module.css b/app/client/web/src/conversation/audioFile/AudioFile.module.css
index 4864a8fb..da6db231 100644
--- a/app/client/web/src/conversation/audioFile/AudioFile.module.css
+++ b/app/client/web/src/conversation/audioFile/AudioFile.module.css
@@ -1,6 +1,9 @@
 .asset {
-  padding-top: 16px;
+  margin-top: 16px;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   .thumb {
     width: auto;
@@ -8,14 +11,17 @@
   }
 
   .label {
-    padding-top: 16px;
     padding-left: 2px;
     padding-right: 2px;
     position: absolute;
     font-size: 8px;
+    bottom: 0;
+  }
+
+  .close {
+    position: absolute;
+    right: 0;
     top: 0;
-    left: 0;
-    height: 67%;
   }
 }
 
diff --git a/app/client/web/src/conversation/audioFile/AudioFile.tsx b/app/client/web/src/conversation/audioFile/AudioFile.tsx
index 1a440091..bfc26625 100644
--- a/app/client/web/src/conversation/audioFile/AudioFile.tsx
+++ b/app/client/web/src/conversation/audioFile/AudioFile.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import { Image, Textarea } from '@mantine/core'
+import { ActionIcon, Image, Textarea } from '@mantine/core'
 import { useAudioFile } from './useAudioFile.hook';
 import classes from './AudioFile.module.css'
 import audio from '../../images/audio.png'
+import { IconX } from '@tabler/icons-react'
 
-export function AudioFile({ source, updateLabel, disabled }: {source: File, updateLabel: (label: string)=>void, disabled: boolean}) {
+export function AudioFile({ source, updateLabel, disabled, remove }: {source: File, updateLabel: (label: string)=>void, disabled: boolean, remove: ()=>void}) {
   const { state, actions } = useAudioFile(source);
 
   const setLabel = (label: string) => {
@@ -16,6 +17,9 @@ export function AudioFile({ source, updateLabel, disabled }: {source: File, upda
     <div className={classes.asset}>
       <Image radius="sm" className={classes.thumb} src={audio} />
       <Textarea className={classes.label} size="xs" value={state.label} onChange={(event) => setLabel(event.currentTarget.value)} disabled={disabled} />
+      <ActionIcon className={classes.close} variant="subtle" disabled={disabled} onClick={remove}>
+        <IconX />
+      </ActionIcon>
     </div>
   );
 }
diff --git a/app/client/web/src/conversation/binaryFile/BinaryFile.module.css b/app/client/web/src/conversation/binaryFile/BinaryFile.module.css
index f7e121ab..80ff52bc 100644
--- a/app/client/web/src/conversation/binaryFile/BinaryFile.module.css
+++ b/app/client/web/src/conversation/binaryFile/BinaryFile.module.css
@@ -26,5 +26,11 @@
     width: 100%;
     text-align: center;
   }
+
+  .close {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
 }
 
diff --git a/app/client/web/src/conversation/binaryFile/BinaryFile.tsx b/app/client/web/src/conversation/binaryFile/BinaryFile.tsx
index d05c189c..2dabf872 100644
--- a/app/client/web/src/conversation/binaryFile/BinaryFile.tsx
+++ b/app/client/web/src/conversation/binaryFile/BinaryFile.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import { Text, Image } from '@mantine/core'
+import { ActionIcon, Text, Image } from '@mantine/core'
 import { useBinaryFile } from './useBinaryFile.hook';
 import classes from './BinaryFile.module.css'
 import binary from '../../images/binary.png'
+import { IconX } from '@tabler/icons-react'
 
-export function BinaryFile({ source }: {source: File}) {
+export function BinaryFile({ source, disabled, remove }: {source: File, disabled: boolean, remove: ()=>void}) {
   const { state, actions } = useBinaryFile(source);
 
   return (
@@ -12,6 +13,9 @@ export function BinaryFile({ source }: {source: File}) {
       <Image radius="sm" className={classes.thumb} src={binary} />
       <Text className={classes.name}>{ state.name }</Text>
       <Text className={classes.extension}>{ state.extension }</Text>
+      <ActionIcon className={classes.close} variant="subtle" disabled={disabled} onClick={remove}>
+        <IconX />
+      </ActionIcon>
     </div>
   );
 }
diff --git a/app/client/web/src/conversation/imageFile/ImageFile.module.css b/app/client/web/src/conversation/imageFile/ImageFile.module.css
index 185ed2db..3165e370 100644
--- a/app/client/web/src/conversation/imageFile/ImageFile.module.css
+++ b/app/client/web/src/conversation/imageFile/ImageFile.module.css
@@ -1,9 +1,16 @@
 .asset {
+  position: relative;
   padding-top: 16px;
 
   .thumb {
     width: auto;
     height: 92px;
   }
+
+  .close {
+    position: absolute;
+    top: 16px;
+    right: 0;
+  }
 }
 
diff --git a/app/client/web/src/conversation/imageFile/ImageFile.tsx b/app/client/web/src/conversation/imageFile/ImageFile.tsx
index 7c9e64f4..0959e476 100644
--- a/app/client/web/src/conversation/imageFile/ImageFile.tsx
+++ b/app/client/web/src/conversation/imageFile/ImageFile.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import { Image } from '@mantine/core'
+import { ActionIcon, Image } from '@mantine/core'
 import { useImageFile } from './useImageFile.hook';
 import classes from './ImageFile.module.css'
+import { IconX } from '@tabler/icons-react'
 
-export function ImageFile({ source }: {source: File}) {
+export function ImageFile({ source, disabled, remove }: {source: File, disabled: boolean, remove: ()=>void}) {
   const { state, actions } = useImageFile(source);
 
   return (
@@ -11,6 +12,11 @@ export function ImageFile({ source }: {source: File}) {
       { state.thumbUrl && ( 
         <Image radius="sm" className={classes.thumb} src={state.thumbUrl} />
       )}
+      { state.thumbUrl && ( 
+        <ActionIcon className={classes.close} variant="subtle" disabled={disabled} onClick={remove}>
+          <IconX />
+        </ActionIcon>
+      )}
     </div>
   );
 }
diff --git a/app/client/web/src/conversation/useConversation.hook.ts b/app/client/web/src/conversation/useConversation.hook.ts
index 813aac01..d758edd2 100644
--- a/app/client/web/src/conversation/useConversation.hook.ts
+++ b/app/client/web/src/conversation/useConversation.hook.ts
@@ -207,6 +207,10 @@ export function useConversation() {
     setLabel: (index: number, label: string) => {
       updateAsset(index, { label });
     },
+    removeAsset: (index: number) => {
+      state.assets.splice(index, 1);
+      updateState({ assets: [ ...state.assets ] });
+    },
     more: async () => {
       const focus = app.state.focus;
       if (focus) {
diff --git a/app/client/web/src/conversation/videoFile/VideoFile.module.css b/app/client/web/src/conversation/videoFile/VideoFile.module.css
index 2696af2b..72353175 100644
--- a/app/client/web/src/conversation/videoFile/VideoFile.module.css
+++ b/app/client/web/src/conversation/videoFile/VideoFile.module.css
@@ -22,5 +22,11 @@
     width: auto;
     height: 64px;
   }
+
+  .close {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
 }
 
diff --git a/app/client/web/src/conversation/videoFile/VideoFile.tsx b/app/client/web/src/conversation/videoFile/VideoFile.tsx
index 63e9da8e..ab920a01 100644
--- a/app/client/web/src/conversation/videoFile/VideoFile.tsx
+++ b/app/client/web/src/conversation/videoFile/VideoFile.tsx
@@ -2,9 +2,9 @@ import React, { useRef, useState } from 'react';
 import { ActionIcon, Image } from '@mantine/core'
 import { useVideoFile } from './useVideoFile.hook';
 import classes from './VideoFile.module.css'
-import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'
+import { IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons-react'
 
-export function VideoFile({ source, thumbPosition, disabled }: {source: File, thumbPosition: (position: number)=>void, disabled: boolean}) {
+export function VideoFile({ source, thumbPosition, disabled, remove }: {source: File, thumbPosition: (position: number)=>void, disabled: boolean, remove: ()=>void}) {
   const { state, actions } = useVideoFile(source);
   const [loaded, setLoaded] = useState(false);
   const position = useRef(0);
@@ -49,6 +49,11 @@ export function VideoFile({ source, thumbPosition, disabled }: {source: File, th
           <IconChevronLeft />
         </ActionIcon>
       )}
+      { loaded && (
+        <ActionIcon className={classes.close} variant="subtle" disabled={disabled} onClick={remove}>
+          <IconX />
+        </ActionIcon>
+      )}
     </div>
   );
 }