benya/Messenger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): add built-in sticker and GIF picker
All checks were successful
CI / test (push) Successful in 21s
Details

Browse Source
This commit is contained in:
Alex
2026-03-08 13:32:26 +03:00
parent c214cc8fd8
commit 10b11b065f
2 changed files with 127 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
web/src/components/MessageComposer.tsx
View File

@@ -7,6 +7,28 @@ import { getAppPreferences } from "../utils/preferences";
type RecordingState = "idle" | "recording" | "locked";
const STICKER_PRESETS: Array<{ name: string; url: string }> = [
{ name: "Thumbs Up", url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/1f44d.png" },
{ name: "Party", url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/1f389.png" },
{ name: "Fire", url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/1f525.png" },
{ name: "Heart", url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/2764.png" },
{ name: "Cool", url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/1f60e.png" },
{ name: "Rocket", url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/1f680.png" },
{ name: "Clap", url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/1f44f.png" },
{ name: "Star", url: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/72x72/2b50.png" },
];
const GIF_PRESETS: Array<{ name: string; url: string }> = [
{ name: "Cat Typing", url: "https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" },
{ name: "Thumbs Up", url: "https://media.giphy.com/media/111ebonMs90YLu/giphy.gif" },
{ name: "Excited", url: "https://media.giphy.com/media/5VKbvrjxpVJCM/giphy.gif" },
{ name: "Dance", url: "https://media.giphy.com/media/l0MYt5jPR6QX5pnqM/giphy.gif" },
{ name: "Nice", url: "https://media.giphy.com/media/3o7abKhOpu0NwenH3O/giphy.gif" },
{ name: "Wow", url: "https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif" },
{ name: "Thanks", url: "https://media.giphy.com/media/26ufdipQqU2lhNA4g/giphy.gif" },
{ name: "Success", url: "https://media.giphy.com/media/4T7e4DmcrP9du/giphy.gif" },
];
export function MessageComposer() {
const activeChatId = useChatStore((s) => s.activeChatId);
const chats = useChatStore((s) => s.chats);
@@ -48,6 +70,9 @@ export function MessageComposer() {
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
const [showAttachMenu, setShowAttachMenu] = useState(false);
const [showFormatMenu, setShowFormatMenu] = useState(false);
const [showStickerMenu, setShowStickerMenu] = useState(false);
const [showGifMenu, setShowGifMenu] = useState(false);
const [gifQuery, setGifQuery] = useState("");
const [captionDraft, setCaptionDraft] = useState("");
const mediaInputRef = useRef<HTMLInputElement | null>(null);
const fileInputRef = useRef<HTMLInputElement | null>(null);
@@ -214,6 +239,26 @@ export function MessageComposer() {
}
}
async function sendPresetMedia(url: string) {
if (!activeChatId || !me || !canSendInActiveChat) {
return;
}
const clientMessageId = makeClientMessageId();
const replyToMessageId = activeChatId ? (replyToByChat[activeChatId]?.id ?? undefined) : undefined;
addOptimisticMessage({ chatId: activeChatId, senderId: me.id, type: "image", text: url, clientMessageId });
try {
const message = await sendMessageWithClientId(activeChatId, url, "image", clientMessageId, replyToMessageId);
confirmMessageByClientId(activeChatId, clientMessageId, message);
setReplyToMessage(activeChatId, null);
setShowStickerMenu(false);
setShowGifMenu(false);
setGifQuery("");
} catch {
removeOptimisticMessage(activeChatId, clientMessageId);
setUploadError("Failed to send media");
}
}
function onComposerKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
if (event.key !== "Enter") {
return;
@@ -746,6 +791,60 @@ export function MessageComposer() {
</div>
) : null}
{showStickerMenu ? (
<div className="mb-2 rounded-xl border border-slate-700/80 bg-slate-900/95 p-2">
<div className="mb-2 flex items-center justify-between">
<p className="text-xs font-semibold text-slate-200">Stickers</p>
<button className="rounded bg-slate-700 px-2 py-1 text-[11px]" onClick={() => setShowStickerMenu(false)} type="button">
Close
</button>
</div>
<div className="grid grid-cols-4 gap-2 md:grid-cols-8">
{STICKER_PRESETS.map((sticker) => (
<button
className="rounded-lg bg-slate-800/80 p-2 hover:bg-slate-700"
key={sticker.url}
onClick={() => void sendPresetMedia(sticker.url)}
title={sticker.name}
type="button"
>
<img alt={sticker.name} className="mx-auto h-9 w-9 object-contain" draggable={false} src={sticker.url} />
</button>
))}
</div>
</div>
) : null}
{showGifMenu ? (
<div className="mb-2 rounded-xl border border-slate-700/80 bg-slate-900/95 p-2">
<div className="mb-2 flex items-center justify-between gap-2">
<p className="text-xs font-semibold text-slate-200">GIF</p>
<input
className="w-full max-w-xs rounded border border-slate-700/80 bg-slate-800/80 px-2 py-1 text-xs outline-none placeholder:text-slate-400 focus:border-sky-500"
onChange={(event) => setGifQuery(event.target.value)}
placeholder="Search GIF"
value={gifQuery}
/>
<button className="rounded bg-slate-700 px-2 py-1 text-[11px]" onClick={() => setShowGifMenu(false)} type="button">
Close
</button>
</div>
<div className="grid grid-cols-2 gap-2 md:grid-cols-4">
{GIF_PRESETS.filter((item) => item.name.toLowerCase().includes(gifQuery.trim().toLowerCase())).map((gif) => (
<button
className="overflow-hidden rounded-lg bg-slate-800/80 hover:bg-slate-700"
key={gif.url}
onClick={() => void sendPresetMedia(gif.url)}
title={gif.name}
type="button"
>
<img alt={gif.name} className="h-20 w-full object-cover md:h-24" draggable={false} src={gif.url} />
</button>
))}
</div>
</div>
) : null}
{!canSendInActiveChat && activeChat?.type === "channel" ? (
<div className="mb-2 rounded-xl border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-200">
Read-only channel: only owners and admins can post.
@@ -811,6 +910,32 @@ export function MessageComposer() {
/>
</div>
<button
className="h-[42px] min-w-[42px] rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60"
disabled={!canSendInActiveChat}
onClick={() => {
setShowGifMenu(false);
setShowStickerMenu((v) => !v);
}}
type="button"
title="Stickers"
>
🙂
</button>
<button
className="h-[42px] min-w-[42px] rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60"
disabled={!canSendInActiveChat}
onClick={() => {
setShowStickerMenu(false);
setShowGifMenu((v) => !v);
}}
type="button"
title="GIF"
>
GIF
</button>
<button
className="h-[42px] min-w-[42px] rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700"
onClick={() => setShowFormatMenu((v) => !v)}