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(