From cea4e86c343cd7889798845252b47ffe32f27441 Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Sun, 25 May 2025 01:39:24 +0200
Subject: [PATCH] add image support

---
 package-lock.json                             |   1 +
 package.json                                  |   1 +
 src/lib/components/ChatInput.svelte           |  65 ++++++++-
 src/lib/components/ChatMessage.svelte         |  16 ++-
 src/lib/components/ChatMessageThread.svelte   |   2 +-
 src/lib/components/Image.svelte               |  38 +++++
 src/lib/components/ReplyMessage.svelte        |   2 +-
 src/lib/components/TimelineView.svelte        |  24 +++-
 .../rich-text-editor/RichTextEditor.svelte    | 135 ++++++++----------
 src/lib/schema.ts                             |   6 +-
 .../channel/[channelId]/+page.svelte          |  27 +++-
 .../thread/[threadId]/+page.svelte            |  19 ++-
 12 files changed, 234 insertions(+), 102 deletions(-)
 create mode 100644 src/lib/components/Image.svelte

diff --git a/package-lock.json b/package-lock.json
index 933dea1..6200766 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
 				"@tiptap/extension-underline": "^2.12.0",
 				"@tiptap/starter-kit": "^2.12.0",
 				"@use-gesture/vanilla": "^10.3.1",
+				"bits-ui": "^1.7.0",
 				"jazz-browser-media-images": "^0.14.8",
 				"jazz-inspector-element": "^0.14.0",
 				"jazz-richtext-tiptap": "^0.1.15",
diff --git a/package.json b/package.json
index 51dabca..56d291f 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
 		"@tiptap/extension-underline": "^2.12.0",
 		"@tiptap/starter-kit": "^2.12.0",
 		"@use-gesture/vanilla": "^10.3.1",
+		"bits-ui": "^1.7.0",
 		"jazz-browser-media-images": "^0.14.8",
 		"jazz-inspector-element": "^0.14.0",
 		"jazz-richtext-tiptap": "^0.1.15",
diff --git a/src/lib/components/ChatInput.svelte b/src/lib/components/ChatInput.svelte
index 58326d9..537bfed 100644
--- a/src/lib/components/ChatInput.svelte
+++ b/src/lib/components/ChatInput.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
 	import { Button, Prose } from '@fuxui/base';
 	import { RichTextEditor } from './rich-text-editor';
-	import type { Loaded } from 'jazz-tools';
-	import { MyAppProfile, type Message, type MyAppAccount } from '$lib/schema';
+	import { type Loaded } from 'jazz-tools';
+	import { MyAppProfile, type Message, type MyAppAccount, type ImageList } from '$lib/schema';
 	import { CoState } from 'jazz-svelte';
 	import { useCurrentRoute } from '$lib/context';
+	import Image from './Image.svelte';
+	import { createImage } from 'jazz-browser-media-images';
+	import { publicGroup } from '$lib/utils';
 
 	const route = useCurrentRoute();
 
@@ -13,20 +16,36 @@
 		handleSubmit,
 		me,
 		clickJoinSpace,
-		replyTo = $bindable(null)
+		replyTo = $bindable(null),
+		images = $bindable([])
 	}: {
 		value: string;
 		handleSubmit: () => void;
 		me: Loaded<typeof MyAppAccount>;
 		clickJoinSpace: () => void;
 		replyTo: Loaded<typeof Message> | null;
+		images: Loaded<typeof ImageList>;
 	} = $props();
 
 	let profile = $derived(new CoState(MyAppProfile, replyTo?._edits.content?.by?.profile?.id));
+
+	let processingImage = $state(false);
+
+	async function processImageFile(file: File) {
+		if (!images) return;
+		processingImage = true;
+		const image = await createImage(file, {
+			owner: publicGroup(),
+			maxSize: 1024
+		});
+
+		images.push(image);
+		processingImage = false;
+	}
 </script>
 
 <div
-	class="dark:bg-base-900 border-base-200 dark:border-base-800 fixed right-2 bottom-0 left-2 rounded-t-2xl border-x border-t bg-white px-1 shadow-lg lg:left-76"
+	class="dark:bg-base-900 border-base-200 dark:border-base-800 fixed right-2 bottom-0 left-2 z-20 rounded-t-2xl border-x border-t bg-white px-1 shadow-lg lg:left-76"
 >
 	{#if me?.root?.joinedSpaces?.some((space) => space?.id === route.spaceId)}
 		{#if replyTo}
@@ -69,11 +88,47 @@
 				</Button>
 			</div>
 		{/if}
-		<Prose class="px-4" size="md">
+
+		{#if images && images.length > 0}
+			<div class="flex gap-2 px-2 pt-2 [&_img]:size-24 [&_img]:rounded-2xl">
+				{#each images as image}
+					<div class="relative">
+						<Image {image} class="size-24 rounded-2xl object-cover" />
+						<Button
+							size="iconSm"
+							variant="ghost"
+							class="absolute top-0 right-0"
+							onclick={() => {
+								images = images.filter((i) => i?.id !== image?.id);
+							}}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								class="size-4"
+							>
+								<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+							</svg>
+						</Button>
+					</div>
+				{/each}
+			</div>
+		{/if}
+		{#if processingImage}
+			<div class="text-xs text-base-600 dark:text-base-400 px-2 pt-2">
+				Processing image...
+			</div>
+		{/if}
+
+		<Prose class="px-2" size="md">
 			<RichTextEditor
 				bind:htmlContent={value}
 				onEnter={handleSubmit}
 				class="max-h-[30dvh] overflow-y-auto"
+				{processImageFile}
 			/>
 		</Prose>
 	{:else}
diff --git a/src/lib/components/ChatMessage.svelte b/src/lib/components/ChatMessage.svelte
index 63baf57..42d15c7 100644
--- a/src/lib/components/ChatMessage.svelte
+++ b/src/lib/components/ChatMessage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Loaded } from 'jazz-tools';
+	import { ImageDefinition, type Loaded } from 'jazz-tools';
 	import { Message, MyAppAccount, MyAppProfile, Reaction, Space } from '$lib/schema';
 	import { Avatar, cn, Prose } from '@fuxui/base';
 	import { CoState } from 'jazz-svelte';
@@ -11,6 +11,7 @@
 	import ChatMessageThread from './ChatMessageThread.svelte';
 	import { useCurrentRoute } from '$lib/context';
 	import { view } from '../../routes/[spaceId]/view.svelte';
+	import Image from './Image.svelte';
 
 	let {
 		message,
@@ -125,7 +126,7 @@
 
 <div
 	class={cn(
-		'flex w-full max-w-full flex-col gap-2 py-1 select-text relative',
+		'relative flex w-full max-w-full flex-col gap-2 py-1 select-text',
 		!isSameUser && showDivider
 			? 'border-base-200/70 dark:border-base-900/50 border-t pt-2 pb-2'
 			: '-my-1.5'
@@ -136,7 +137,9 @@
 	{/if}
 
 	{#if view.highlightedMessage === message.id}
-		<div class="absolute top-1 -left-1 -right-1 bottom-2 bg-accent-500/10 dark:bg-accent-500/5 rounded-2xl"></div>
+		<div
+			class="bg-accent-500/10 dark:bg-accent-500/5 absolute top-1 -right-1 bottom-2 -left-1 rounded-2xl"
+		></div>
 	{/if}
 
 	<div
@@ -188,6 +191,13 @@
 		{/if}
 	</div>
 
+	{#if message.images && message.images.length > 0}
+		<div class="flex flex-wrap gap-2 ml-12 mb-4">
+			{#each message.images as image}
+				<Image {image} class="max-w-36 max-h-36 rounded-2xl border border-base-200/70 dark:border-base-900/50 object-contain" />
+			{/each}
+		</div>
+	{/if}
 	{#if showThread && message.thread}
 		<ChatMessageThread
 			threadId={message.thread}
diff --git a/src/lib/components/ChatMessageThread.svelte b/src/lib/components/ChatMessageThread.svelte
index 2d584d7..3d0e11b 100644
--- a/src/lib/components/ChatMessageThread.svelte
+++ b/src/lib/components/ChatMessageThread.svelte
@@ -59,7 +59,7 @@
 			<span class="absolute inset-0"></span>
 			{thread.current?.name}</a
 		>
-		({thread.current?.timeline?.filter((m) => !m?.softDeleted).length} messages)
+		<!-- ({thread.current?.timeline?.filter((m) => !m?.softDeleted).length} messages) -->
 
 		{#if lastMessage}
 			<span class="text-base-600 dark:text-base-400 text-xs">
diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
new file mode 100644
index 0000000..981a0bb
--- /dev/null
+++ b/src/lib/components/Image.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { ImageDefinition, type Loaded } from 'jazz-tools';
+	import { type Image } from '$lib/schema';
+	import { onMount } from 'svelte';
+
+	let {
+		image,
+		class: className,
+		...rest
+	}: { image?: Loaded<typeof Image>; class?: string } = $props();
+
+	onMount(() => {});
+
+	let loaded = $state(false);
+
+	$effect(() => {
+		if (loaded) return;
+		if (!image) return;
+		if (!imageRef) return;
+
+		loaded = true;
+		const highestRes = ImageDefinition.highestResAvailable(image);
+
+		if (!highestRes) return;
+		
+		const blob = highestRes.stream.toBlob();
+
+		if (!blob) return;
+
+		const url = URL.createObjectURL(blob);
+		imageRef.src = url;
+		imageRef.onload = () => URL.revokeObjectURL(url);
+	});
+
+	let imageRef = $state<HTMLImageElement | null>(null);
+</script>
+
+<img class={className} bind:this={imageRef} {...rest} />
diff --git a/src/lib/components/ReplyMessage.svelte b/src/lib/components/ReplyMessage.svelte
index 885ec49..d488b8c 100644
--- a/src/lib/components/ReplyMessage.svelte
+++ b/src/lib/components/ReplyMessage.svelte
@@ -22,7 +22,7 @@
 {#if message.current}
 	<div
 		class={cn(
-			'group bg-base-200/50 pointer-events-none dark:bg-base-900/40 border-base-300/50 dark:border-base-800/30 text-base-700 dark:text-base-300',
+			'group isolate bg-base-200/50 pointer-events-none dark:bg-base-900/40 border-base-300/50 dark:border-base-800/30 text-base-700 dark:text-base-300',
 			'relative inline-flex w-full max-w-full min-w-0 items-center justify-start gap-3 overflow-x-hidden rounded-2xl border px-3 py-0.5 text-xs'
 		)}
 	>
diff --git a/src/lib/components/TimelineView.svelte b/src/lib/components/TimelineView.svelte
index 4c0a710..c8c13cb 100644
--- a/src/lib/components/TimelineView.svelte
+++ b/src/lib/components/TimelineView.svelte
@@ -6,6 +6,7 @@
 	import { page } from '$app/state';
 	import { setContext } from 'svelte';
 	import { view } from '../../routes/[spaceId]/view.svelte';
+	import { ScrollArea } from '@fuxui/base';
 
 	let viewport: HTMLDivElement = $state(null!);
 	let virtualizer: Virtualizer<string> | undefined = $state();
@@ -54,12 +55,21 @@
 	});
 </script>
 
-<div
-	class="absolute inset-0 left-0 h-screen overflow-y-scroll px-4 py-24 lg:left-80"
-	bind:this={viewport}
+<ScrollArea
+	class="absolute inset-0 left-0 h-[100dhv] overflow-y-scroll px-4 lg:left-80"
+	bind:ref={viewport}
 >
+	<div class="h-24 w-full"></div>
+
 	{#if timeline && timeline.filter((m) => !m.softDeleted).length > 0}
-		<Virtualizer bind:this={virtualizer} data={timeline} getKey={(k, _) => k} overscan={10}>
+		<Virtualizer
+			bind:this={virtualizer}
+			data={timeline}
+			getKey={(k, _) => k}
+			overscan={10}
+			scrollRef={viewport}
+			startMargin={96}
+		>
 			{#snippet children(message: Loaded<typeof Message>, index: number)}
 				{@const previousMessage = index > 0 ? timeline[index - 1] : undefined}
 				{#if message && !message.softDeleted}
@@ -75,9 +85,13 @@
 				{/if}
 			{/snippet}
 		</Virtualizer>
+
+		<div class="h-32 w-full"></div>
+	{:else if timeline === undefined}
+		<div class="text-base-600 dark:text-base-400 h-30 text-sm">Loading chat...</div>
 	{:else}
 		<div class="text-base-600 dark:text-base-400 h-30 text-sm">
 			No messages yet. Be the first to send a message!
 		</div>
 	{/if}
-</div>
+</ScrollArea>
diff --git a/src/lib/components/rich-text-editor/RichTextEditor.svelte b/src/lib/components/rich-text-editor/RichTextEditor.svelte
index c97b406..c5a88bc 100644
--- a/src/lib/components/rich-text-editor/RichTextEditor.svelte
+++ b/src/lib/components/rich-text-editor/RichTextEditor.svelte
@@ -7,9 +7,14 @@
 	import Underline from '@tiptap/extension-underline';
 	import Typography from '@tiptap/extension-typography';
 	import { RichTextLink } from './RichTextLink';
-	import { cn } from '@fuxui/base';
+	import { Button, cn } from '@fuxui/base';
 	import { ImageUploadNode } from './image-upload/ImageUploadNode';
 	import { initKeyboardShortcutHandler } from './onEnter';
+	import { ImageList } from '$lib/schema';
+	import type { Loaded } from 'jazz-tools';
+	import { createImage } from 'jazz-browser-media-images';
+	import { publicGroup } from '$lib/utils';
+	import { Portal } from 'bits-ui';
 
 	let {
 		content = $bindable({}),
@@ -19,7 +24,8 @@
 		class: className,
 		onupdate,
 		htmlContent = $bindable(''),
-		onEnter,
+		processImageFile,
+		onEnter
 	}: {
 		content?: Content;
 		placeholder?: string;
@@ -30,6 +36,7 @@
 		ontransaction?: () => void;
 		htmlContent?: string;
 		onEnter: () => void;
+		processImageFile: (file: File) => void;
 	} = $props();
 
 	let hasFocus = true;
@@ -57,12 +64,6 @@
 					return '';
 				}
 			}),
-			// Image.configure({
-			// 	HTMLAttributes: {
-			// 		class: 'max-w-full object-contain relative rounded-2xl'
-			// 	},
-			// 	allowBase64: true
-			// }),
 			Underline.configure({}),
 			RichTextLink.configure({
 				openOnClick: false,
@@ -70,19 +71,7 @@
 				defaultProtocol: 'https'
 			}),
 			Typography.configure(),
-			// ImageUploadNode.configure({
-			// 	upload: async (file, onProgress, abortSignal) => {
-			// 		console.log('uploading image', file);
-			// 		// wait 2 seconds
-			// 		for(let i = 0; i < 10; i++) {
-			// 			await new Promise((resolve) => setTimeout(resolve, 200));
-			// 			onProgress?.({ progress: i / 10 });
-			// 		}
-
-			// 		return 'https://picsum.photos/200/300';
-			// 	}
-			// }),
-			initKeyboardShortcutHandler({ onEnter: onEnter }),
+			initKeyboardShortcutHandler({ onEnter: onEnter })
 		];
 
 		editor = new Editor({
@@ -106,51 +95,10 @@
 			},
 			content: ``
 		});
-
 	});
 
-	// Flag to track whether a file is being dragged over the drop area
 	let isDragOver = $state(false);
 
-	// Store local image files for later upload
-	let localImages: Map<string, File> = $state(new Map());
-
-	// Track which image URLs in the editor are local previews
-	let localImageUrls: Set<string> = $state(new Set());
-
-	// Process image file to create a local preview
-	async function processImageFile(file: File) {
-		if (!editor) {
-			console.warn('Tiptap editor not initialized');
-			return;
-		}
-
-		try {
-			const localUrl = URL.createObjectURL(file);
-
-			localImages.set(localUrl, file);
-			localImageUrls.add(localUrl);
-
-			//editor.commands.setImageUploadNode();
-			editor.chain().focus().setImageUploadNode(
-				{
-					preview: localUrl
-				}
-			).run();
-
-			// wait 2 seconds
-			// await new Promise((resolve) => setTimeout(resolve, 500));
-
-			// content = editor.getJSON();
-
-			// console.log('replacing image url in content');
-			// replaceImageUrlInContent(content, localUrl, 'https://picsum.photos/200/300');
-			// editor.commands.setContent(content);
-		} catch (error) {
-			console.error('Error creating image preview:', error);
-		}
-	}
-
 	const handlePaste = (event: ClipboardEvent) => {
 		const items = event.clipboardData?.items;
 		if (!items) return;
@@ -169,11 +117,13 @@
 		event.preventDefault();
 		event.stopPropagation();
 		isDragOver = true;
+		console.log('drag over');
 	}
 	function handleDragLeave(event: DragEvent) {
 		event.preventDefault();
 		event.stopPropagation();
 		isDragOver = false;
+		console.log('drag leave');
 	}
 	function handleDrop(event: DragEvent) {
 		event.preventDefault();
@@ -184,27 +134,60 @@
 		if (file?.type.startsWith('image/')) {
 			processImageFile(file);
 		}
+		console.log('drop');
 	}
 
 	onDestroy(() => {
-		for (const localUrl of localImageUrls) {
-			URL.revokeObjectURL(localUrl);
-		}
-
 		editor?.destroy();
 	});
 </script>
 
-<div
-	bind:this={ref}
-	class={cn('relative flex-1', className)}
-	role="region"
-></div>
-
-<!-- onpaste={handlePaste}
-ondragover={handleDragOver}
-ondragleave={handleDragLeave}
-ondrop={handleDrop} -->
+<svelte:window ondragover={handleDragOver} ondragleave={handleDragLeave} ondrop={handleDrop} />
+
+{#if isDragOver}
+	<Portal>
+		<div
+			class="bg-base-300/50 dark:bg-base-800/50 backdrop-blur-md text-base-900 dark:text-base-100 pointer-events-none absolute inset-0 flex items-center justify-center rounded-2xl z-[1000]"
+		>
+			Drop image to add it to your message
+		</div>
+	</Portal>
+{/if}
+
+<div class={cn('relative flex items-center', className)}>
+	<Button
+		size="icon"
+		variant="ghost"
+		class="mr-2"
+		onclick={() => {
+			// file upload
+			const input = document.createElement('input');
+			input.type = 'file';
+			input.accept = 'image/*';
+			input.onchange = (event) => {
+				const file = (event.target as HTMLInputElement).files?.[0];
+				if (!file) return;
+				processImageFile(file);
+				input.remove();
+			};
+			input.click();
+		}}
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			class="size-6"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+		</svg>
+	</Button>
+	<div bind:this={ref} onpaste={handlePaste}></div>
+</div>
+
+<!--  -->
 
 <style>
 	:global(.tiptap) {
diff --git a/src/lib/schema.ts b/src/lib/schema.ts
index 51e19d8..e652cd6 100644
--- a/src/lib/schema.ts
+++ b/src/lib/schema.ts
@@ -5,9 +5,13 @@ export const Reaction = co.map({
 	emoji: z.string()
 });
 
+export const ImageList = co.list(co.image());
+
+export const Image = co.image();
+
 export const Message = co.map({
 	content: co.richText(),
-	images: co.list(co.image()),
+	images: ImageList,
 
 	createdAt: z.date(),
 	updatedAt: z.date(),
diff --git a/src/routes/[spaceId]/channel/[channelId]/+page.svelte b/src/routes/[spaceId]/channel/[channelId]/+page.svelte
index 73648b9..69d69b6 100644
--- a/src/routes/[spaceId]/channel/[channelId]/+page.svelte
+++ b/src/routes/[spaceId]/channel/[channelId]/+page.svelte
@@ -45,7 +45,9 @@
 	const me = new AccountCoState(MyAppAccount, {
 		resolve: {
 			profile: true,
-			root: true
+			root: {
+				joinedSpaces: true
+			}
 		}
 	});
 
@@ -106,13 +108,17 @@
 			owner: publicGroup()
 		});
 
+		console.log('submit');
+
+		console.log('postImages', postImages, postImages.length);
+
 		// add message to channel
 		const message = Message.create(
 			{
 				content: newContent,
 				createdAt: new Date(),
 				updatedAt: new Date(),
-				images: co.list(co.image()).create([], {
+				images: co.list(co.image()).create([...postImages], {
 					owner: publicGroup()
 				}),
 				reactions: co.list(Reaction).create([], {
@@ -126,6 +132,8 @@
 			}
 		);
 
+		postImages = [];
+
 		replyTo = null;
 
 		channel.current?.mainThread?.timeline?.push(message);
@@ -150,7 +158,7 @@
 		joinSpace(toJoinSpace);
 		me?.current?.root?.joinedSpaces?.unshift(toJoinSpace);
 
-		console.log('joined space', toJoinSpace);
+		console.log('joined space', toJoinSpace, me?.current?.root?.joinedSpaces);
 	}
 
 	let input = $state('');
@@ -165,6 +173,8 @@
 	let threadMessage = $state<Loaded<typeof Message> | null>(null);
 	let threadName = $state('');
 
+	let postImages = $state([]);
+
 	function createThread() {
 		if (!threadMessage) {
 			console.error('threadMessage is null');
@@ -194,7 +204,7 @@
 {#if view.active === 'channel'}
 	<TimelineView
 		timeline={channel.current?.mainThread?.timeline}
-		setReplyTo={setReplyTo}
+		{setReplyTo}
 		me={me?.current}
 		createThread={(message) => {
 			threadMessage = message;
@@ -202,7 +212,14 @@
 		}}
 	/>
 
-	<ChatInput bind:replyTo me={me?.current} {handleSubmit} {clickJoinSpace} bind:value={input} />
+	<ChatInput
+		bind:replyTo
+		me={me?.current}
+		{handleSubmit}
+		{clickJoinSpace}
+		bind:value={input}
+		bind:images={postImages}
+	/>
 {:else}
 	<div class="flex w-full flex-col gap-2">
 		{#each channel.current?.subThreads ?? [] as thread}
diff --git a/src/routes/[spaceId]/channel/[channelId]/thread/[threadId]/+page.svelte b/src/routes/[spaceId]/channel/[channelId]/thread/[threadId]/+page.svelte
index bc0cce9..398f1b0 100644
--- a/src/routes/[spaceId]/channel/[channelId]/thread/[threadId]/+page.svelte
+++ b/src/routes/[spaceId]/channel/[channelId]/thread/[threadId]/+page.svelte
@@ -11,7 +11,6 @@
 
 	const route = useCurrentRoute();
 
-	
 	let space = $derived(
 		new CoState(Space, route.spaceId, {
 			resolve: {
@@ -30,7 +29,6 @@
 		}
 	});
 
-	
 	let thread = $derived(
 		new CoState(Thread, route.threadId, {
 			resolve: {
@@ -91,7 +89,7 @@
 				content: newContent,
 				createdAt: new Date(),
 				updatedAt: new Date(),
-				images: co.list(co.image()).create([], {
+				images: co.list(co.image()).create([...postImages], {
 					owner: publicGroup()
 				}),
 				reactions: co.list(Reaction).create([], {
@@ -105,6 +103,8 @@
 			}
 		);
 
+		postImages = [];
+
 		replyTo = null;
 
 		thread.current?.timeline?.push(message);
@@ -138,15 +138,24 @@
 	function setReplyTo(message: Loaded<typeof Message>) {
 		replyTo = message;
 	}
+
+	let postImages = $state([]);
 </script>
 
 <TimelineView
 	timeline={thread.current?.timeline}
-	setReplyTo={setReplyTo}
+	{setReplyTo}
 	me={me?.current}
 	createThread={() => {}}
 	allowThreadCreation={false}
 	showThread={false}
 />
 
-<ChatInput bind:replyTo me={me?.current} {handleSubmit} {clickJoinSpace} bind:value={input} />
+<ChatInput
+	bind:replyTo
+	me={me?.current}
+	{handleSubmit}
+	{clickJoinSpace}
+	bind:value={input}
+	bind:images={postImages}
+/>
-- 
2.51.2