update chat message form

src/app/channel/components/item.tsx

@@ -1,7 +1,5 @@
 import { useChannelProfile } from "@app/channel/hooks/useChannelProfile";
-
 import { usePageContext } from "@utils/hooks/usePageContext";
-
 import { twMerge } from "tailwind-merge";
 
 export function ChannelsListItem({ data }: { data: any }) {

src/app/channel/components/messages/item.tsx

@@ -3,8 +3,8 @@ import { MessageMuteButton } from "@app/channel/components/messages/muteButton";
 import { MessageReplyButton } from "@app/channel/components/messages/replyButton";
 import { ChannelMessageUser } from "@app/channel/components/messages/user";
 import { MentionNote } from "@app/note/components/mentions/note";
-import ImagePreview from "@app/note/components/preview/image";
-import VideoPreview from "@app/note/components/preview/video";
+import { ImagePreview } from "@app/note/components/preview/image";
+import { VideoPreview } from "@app/note/components/preview/video";
 import { noteParser } from "@utils/parser";
 import { useMemo, useState } from "react";
 

src/app/channel/layout.tsx

@@ -1,4 +1,3 @@
-import { AppHeader } from "@shared/appHeader";
 import { MultiAccounts } from "@shared/multiAccounts";
 import { Navigation } from "@shared/navigation";
 

src/app/chat/components/messages/form.tsx

@@ -1,3 +1,5 @@
+import { EnterIcon } from "@shared/icons";
+import { MediaUploader } from "@shared/mediaUploader";
 import { RelayContext } from "@shared/relayProvider";
 import { useChatMessages } from "@stores/chats";
 import { WRITEONLY_RELAYS } from "@stores/constants";
@@ -60,7 +62,7 @@ export function ChatMessageForm({
 	};
 
 	return (
-		<div className="relative h-11 w-full overflow-hidden">
+		<div className="relative h-11 w-full">
 			<input
 				value={value}
 				onChange={(e) => setValue(e.target.value)}
@@ -70,12 +72,14 @@ export function ChatMessageForm({
 				className="relative h-11 w-full resize-none rounded-md px-5 !outline-none bg-zinc-800 placeholder:text-zinc-500"
 			/>
 			<div className="absolute right-2 top-0 h-11">
-				<div className="h-full flex items-center justify-end">
+				<div className="h-full flex gap-3 items-center justify-end text-zinc-500">
+					<MediaUploader setState={setValue} />
 					<button
 						type="button"
 						onClick={submit}
-						className="inline-flex items-center gap-1 text-zinc-500 leading-none"
+						className="inline-flex items-center gap-1 text-sm leading-none"
 					>
+						<EnterIcon width={14} height={14} className="" />
 						Send
 					</button>
 				</div>

src/app/chat/components/messages/item.tsx

@@ -1,8 +1,8 @@
 import { ChatMessageUser } from "@app/chat/components/messages/user";
 import { useDecryptMessage } from "@app/chat/hooks/useDecryptMessage";
 import { MentionNote } from "@app/note/components/mentions/note";
-import ImagePreview from "@app/note/components/preview/image";
-import VideoPreview from "@app/note/components/preview/video";
+import { ImagePreview } from "@app/note/components/preview/image";
+import { VideoPreview } from "@app/note/components/preview/video";
 import { noteParser } from "@utils/parser";
 import { memo } from "react";
 

src/app/chat/components/messages/user.tsx

@@ -35,7 +35,7 @@ export function ChatMessageUser({
 					</div>
 					<div className="flex w-full flex-1 items-start justify-between">
 						<div className="flex items-baseline gap-2 text-base">
-							<span className="font-semibold leading-none text-zinc-200 group-hover:underline">
+							<span className="font-semibold leading-none text-zinc-200">
 								{user?.nip05 || user?.name || shortenKey(pubkey)}
 							</span>
 							<span className="leading-none text-zinc-500">·</span>

src/app/chat/pages/index.page.tsx

@@ -18,11 +18,11 @@ export function Page() {
 	const searchParams: any = pageContext.urlParsed.search;
 	const pubkey = searchParams.pubkey;
 
-	const [fetchMessages, addMessage, clear] = useChatMessages((state: any) => [
+	const [fetchMessages, clear] = useChatMessages((state: any) => [
 		state.fetch,
-		state.add,
 		state.clear,
 	]);
+	const addMessage = useChatMessages((state: any) => state.add);
 
 	useSWRSubscription(account ? ["chat", pubkey] : null, ([, key]) => {
 		const unsubscribe = pool.subscribe(

src/shared/icons/enter.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from "react";
+
+export function EnterIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
+	return (
+		<svg
+			width={24}
+			height={24}
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<path
+				d="M3.75 4.75V15H20.25M20.25 15L16.25 11M20.25 15L16.25 19"
+				stroke="currentColor"
+				strokeWidth={1.5}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+}

src/shared/icons/index.tsx

@@ -9,12 +9,14 @@ export * from "./chevronRight";
 export * from "./compose";
 export * from "./copy";
 export * from "./edit";
+export * from "./enter";
 export * from "./eyeOff";
 export * from "./eyeOn";
 export * from "./heartbeat";
 export * from "./hide";
 export * from "./like";
 export * from "./lume";
+export * from "./media";
 export * from "./mute";
 export * from "./myspace";
 export * from "./navArrowDown";

src/shared/icons/media.tsx

@@ -0,0 +1,27 @@
+import { SVGProps } from "react";
+
+export function MediaIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
+	return (
+		<svg
+			width={24}
+			height={24}
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<path
+				d="M6.25 7.5C6.94036 7.5 7.5 6.94036 7.5 6.25C7.5 5.55964 6.94036 5 6.25 5C5.55964 5 5 5.55964 5 6.25C5 6.94036 5.55964 7.5 6.25 7.5Z"
+				fill="currentColor"
+			/>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M2.75 2C2.33579 2 2 2.33579 2 2.75V15.25C2 15.6642 2.33579 16 2.75 16H8V21.25C8 21.6642 8.33579 22 8.75 22H21.25C21.6642 22 22 21.6642 22 21.25V8.75C22 8.33579 21.6642 8 21.25 8H16V2.75C16 2.33579 15.6642 2 15.25 2H2.75ZM14.5 8V3.5H3.5V10.764L5.58203 9.37596C5.83396 9.20801 6.16216 9.20801 6.41408 9.37596L8 10.4332V8.75C8 8.33579 8.33579 8 8.75 8H14.5ZM8 12.236L5.99806 10.9014L3.5 12.5668V14.5H8V12.236ZM13 17.5585V12.4415C13 12.2472 13.212 12.1272 13.3786 12.2272L17.6427 14.7856C17.8045 14.8827 17.8045 15.1173 17.6427 15.2144L13.3786 17.7728C13.212 17.8728 13 17.7528 13 17.5585Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+}

src/shared/mediaUploader.tsx

@@ -0,0 +1,97 @@
+import { MediaIcon } from "@shared/icons";
+import { Tooltip } from "@shared/tooltip";
+import { open } from "@tauri-apps/api/dialog";
+import { Body, fetch } from "@tauri-apps/api/http";
+import { createBlobFromFile } from "@utils/createBlobFromFile";
+import { useState } from "react";
+
+export function MediaUploader({ setState }: { setState: any }) {
+	const [loading, setLoading] = useState(false);
+
+	const openFileDialog = async () => {
+		const selected: any = await open({
+			multiple: false,
+			filters: [
+				{
+					name: "Image & Video",
+					extensions: ["png", "jpeg", "jpg", "gif", "mp4", "mov"],
+				},
+			],
+		});
+		if (Array.isArray(selected)) {
+			// user selected multiple files
+		} else if (selected === null) {
+			// user cancelled the selection
+		} else {
+			// start loading
+			setLoading(true);
+
+			const filename = selected.split("/").pop();
+			const file = await createBlobFromFile(selected);
+			const buf = await file.arrayBuffer();
+
+			const res: { data: { file: { id: string } } } = await fetch(
+				"https://void.cat/upload?cli=false",
+				{
+					method: "POST",
+					timeout: 5,
+					headers: {
+						accept: "*/*",
+						"Content-Type": "application/octet-stream",
+						"V-Filename": filename,
+						"V-Description": "Upload from https://lume.nu",
+						"V-Strip-Metadata": "true",
+					},
+					body: Body.bytes(buf),
+				},
+			);
+
+			const image = `https://void.cat/d/${res.data.file.id}.webp`;
+
+			// update state
+			setState((prev: string) => `${prev}\n${image}`);
+			// stop loading
+			setLoading(false);
+		}
+	};
+
+	return (
+		<Tooltip message="Upload media">
+			<button
+				type="button"
+				onClick={() => openFileDialog()}
+				className="group inline-flex h-6 w-6 items-center justify-center rounded bg-zinc-700 hover:bg-zinc-600"
+			>
+				{loading ? (
+					<svg
+						className="h-4 w-4 animate-spin text-black dark:text-white"
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<title id="loading">Loading</title>
+						<circle
+							className="opacity-25"
+							cx="12"
+							cy="12"
+							r="10"
+							stroke="currentColor"
+							strokeWidth="4"
+						/>
+						<path
+							className="opacity-75"
+							fill="currentColor"
+							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+						/>
+					</svg>
+				) : (
+					<MediaIcon
+						width={14}
+						height={14}
+						className="text-zinc-400 group-hover:text-zinc-200"
+					/>
+				)}
+			</button>
+		</Tooltip>
+	);
+}

src/shared/tooltip.tsx

@@ -42,7 +42,7 @@ export function Tooltip({
 			{isOpen && (
 				<div
 					ref={refs.setFloating}
-					className="w-max select-none rounded-md bg-zinc-800 px-4 py-2 text-base font-medium leading-none text-white"
+					className="w-max select-none rounded-md bg-zinc-800 border border-zinc-700 px-4 py-2 text-sm font-medium leading-none text-zinc-100"
 					style={{
 						position: strategy,
 						top: y ?? 0,

vite.config.ts

@@ -1,30 +1,30 @@
-import react from '@vitejs/plugin-react-swc';
-import { defineConfig } from 'vite';
-import ssr from 'vite-plugin-ssr/plugin';
-import topLevelAwait from 'vite-plugin-top-level-await';
-import viteTsconfigPaths from 'vite-tsconfig-paths';
+import react from "@vitejs/plugin-react-swc";
+import { defineConfig } from "vite";
+import ssr from "vite-plugin-ssr/plugin";
+import topLevelAwait from "vite-plugin-top-level-await";
+import viteTsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  clearScreen: false,
-  server: {
-    strictPort: true,
-  },
-  envPrefix: ['VITE_', 'TAURI_'],
-  build: {
-    // Tauri uses Chromium on Windows and WebKit on macOS and Linux
-    target: process.env.TAURI_PLATFORM == 'windows' ? 'chrome105' : 'safari13',
-    // don't minify for debug builds
-    minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
-    // produce sourcemaps for debug builds
-    sourcemap: !!process.env.TAURI_DEBUG,
-  },
-  plugins: [
-    react(),
-    ssr({ prerender: true }),
-    viteTsconfigPaths(),
-    topLevelAwait({
-      promiseExportName: '__tla',
-      promiseImportName: (i) => `__tla_${i}`,
-    }),
-  ],
+	clearScreen: false,
+	server: {
+		strictPort: true,
+	},
+	envPrefix: ["VITE_", "TAURI_"],
+	build: {
+		// Tauri uses Chromium on Windows and WebKit on macOS and Linux
+		target: process.env.TAURI_PLATFORM === "windows" ? "chrome105" : "safari13",
+		// don't minify for debug builds
+		minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
+		// produce sourcemaps for debug builds
+		sourcemap: !!process.env.TAURI_DEBUG,
+	},
+	plugins: [
+		react(),
+		ssr({ prerender: true }),
+		viteTsconfigPaths(),
+		topLevelAwait({
+			promiseExportName: "__tla",
+			promiseImportName: (i) => `__tla_${i}`,
+		}),
+	],
 });