krispire/spsays-training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: chat stickers

Browse Source
This commit is contained in:
gosangam
2026-08-30 02:19:31 +05:30
parent 8c7afe596d
commit 2597c6f2ec
9 changed files with 332 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(app)/chats/[id]/page.tsx
+8 -1
View File
@@ -168,6 +168,7 @@ export default function ChatThreadPage() {
replyToId?: string,
previewUrl?: string,
attachments?: UploadedAttachment[],
stickerKey?: string,
) => {
const clientMsgId = crypto.randomUUID();
const optimistic: ChatMessage = {
@@ -188,7 +189,13 @@ export default function ChatThreadPage() {
setMessages((prev) => [...prev, optimistic]);
chat
.send(id, body, { clientMsgId, replyToId, previewUrl, attachments })
.send(id, body, {
clientMsgId,
replyToId,
previewUrl,
attachments,
stickerKey,
})
.then((saved) => {
setMessages((prev) => {
// Drop the placeholder and any realtime echo of the same message.
components/chat/chat-composer.tsx
+24 -1
View File
@@ -13,12 +13,13 @@
*/
import { useCallback, useEffect, useRef, useState } from "react";
import { Paperclip, SendHorizonal, X } from "lucide-react";
import { Paperclip, Smile, SendHorizonal, X } from "lucide-react";
import { LinkPreviewCard } from "@/components/chat/link-preview-card";
import {
ComposerAttachments,
type StagedAttachment,
} from "@/components/chat/composer-attachments";
import { StickerPicker } from "@/components/chat/sticker-picker";
import { compressImage } from "@/lib/compress-image";
import { cn } from "@/lib/utils";
import {
@@ -53,6 +54,8 @@ export function ChatComposer({
replyToId?: string,
previewUrl?: string,
attachments?: UploadedAttachment[],
/** Reward artwork sent on its own. */
stickerKey?: string,
) => void;
disabled?: boolean;
placeholder?: string;
@@ -67,6 +70,7 @@ export function ChatComposer({
const [staged, setStaged] = useState<StagedAttachment[]>([]);
const ref = useRef<HTMLTextAreaElement>(null);
const fileRef = useRef<HTMLInputElement>(null);
const [pickingSticker, setPickingSticker] = useState(false);
const lookupSeq = useRef(0);
// Grow with the content, up to a cap.
@@ -253,6 +257,15 @@ export function ChatComposer({
>
<Paperclip className="size-4" />
</button>
<button
type="button"
onClick={() => setPickingSticker(true)}
disabled={disabled}
aria-label="Send a sticker"
className="inline-flex size-9 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:text-foreground disabled:opacity-40"
>
<Smile className="size-4" />
</button>
<textarea
ref={ref}
@@ -303,6 +316,16 @@ export function ChatComposer({
<SendHorizonal className="size-4" />
</button>
</div>
{pickingSticker && (
<StickerPicker
// Sent on its own, with no text: a sticker IS the message.
onPick={(sticker) =>
onSend("", undefined, undefined, undefined, sticker.key)
}
onClose={() => setPickingSticker(false)}
/>
)}
</div>
);
}
components/chat/message-group.tsx
+35 -5
View File
@@ -14,8 +14,15 @@ import { MessageAttachments } from "@/components/chat/message-attachments";
import { MessageTicks } from "@/components/chat/message-ticks";
import { tickState } from "@/lib/chat-format";
import { HEART_EMOJI } from "@/components/chat/reaction-row";
import { StickerGrid } from "@/components/chat/sticker-grid";
import { cn } from "@/lib/utils";
import type { ChatMessage, ChatPeer, Receipts, ReplyPreview } from "@/lib/chat";
import type {
Attachment,
ChatMessage,
ChatPeer,
Receipts,
ReplyPreview,
} from "@/lib/chat";
/** Time only — the day is already established by the date separator above. */
function clockTime(iso: string): string {
@@ -33,6 +40,20 @@ function sharesAnEntity(m: ChatMessage): boolean {
return (m.attachments ?? []).some((a) => a.kind === "entity");
}
/** Stickers on a message, if any. */
function stickersOn(m: ChatMessage): Attachment[] {
return (m.attachments ?? []).filter((a) => a.kind === "sticker");
}
/**
* True when a message is nothing but stickers. Those render bare — artwork
* inside a coloured bubble reads as a pasted image rather than a sticker.
*/
function isStickerOnly(m: ChatMessage): boolean {
const atts = m.attachments ?? [];
return !m.body && atts.length > 0 && atts.every((a) => a.kind === "sticker");
}
/** Distinct emoji shown before the rest collapse into "+N". */
const MAX_TRAIL_EMOJI = 4;
@@ -208,7 +229,7 @@ export function MessageGroup({
// own border, rounding and background, so the bubble drops
// its chrome rather than drawing a second frame around it.
// Any caption gets the padding back on its own line below.
sharesAnEntity(m)
sharesAnEntity(m) || isStickerOnly(m)
? "overflow-hidden bg-transparent"
: cn(
"px-3 py-2",
@@ -227,8 +248,17 @@ export function MessageGroup({
{/* A shared post leads and its caption follows, the way
the post itself reads. Everything else keeps text
first, with attachments beneath it. */}
{sharesAnEntity(m) && (
<MessageAttachments attachments={m.attachments} />
{isStickerOnly(m) ? (
<StickerGrid
conversationId={m.conversation_id}
messageId={m.id}
stickers={stickersOn(m)}
mine={mine}
/>
) : (
sharesAnEntity(m) && (
<MessageAttachments attachments={m.attachments} />
)
)}
{m.body && (
<span
@@ -244,7 +274,7 @@ export function MessageGroup({
<MessageText body={m.body} entities={m.entities} />
</span>
)}
{!sharesAnEntity(m) && (
{!sharesAnEntity(m) && !isStickerOnly(m) && (
<MessageAttachments attachments={m.attachments} />
)}
{/* An optimistic bubble for a captionless attachment has
components/chat/sticker-grid.tsx
+79
View File
@@ -0,0 +1,79 @@
"use client";
/**
* Stickers on a message: a 2-column grid, rendered without a chat bubble.
*
* Unlike the media grid, this never collapses into "+N more" — every sticker
* sent is drawn. They are small and deliberately playful, and hiding some
* behind a counter would make a wall of them read as an attachment list
* rather than what it is.
*
* Long-pressing or right-clicking one offers to keep it, which is the only
* way a sticker spreads beyond the person who earned it.
*/
import { useState } from "react";
import Image from "next/image";
import { toast } from "sonner";
import { chat, type Attachment } from "@/lib/chat";
export function StickerGrid({
conversationId,
messageId,
stickers,
/** Own stickers are already in your collection — no point offering to save. */
mine,
}: {
conversationId: string;
messageId: string;
stickers: Attachment[];
mine: boolean;
}) {
const [saving, setSaving] = useState<string | null>(null);
if (stickers.length === 0) return null;
const save = async (a: Attachment) => {
const key = a.entity_id;
if (!key || mine || saving) return;
setSaving(key);
try {
await chat.saveSticker(conversationId, messageId, key);
toast.success(`Saved ${a.title ?? "sticker"} to your collection`);
} catch {
toast.error("Could not save that sticker");
} finally {
setSaving(null);
}
};
return (
<div className="grid w-fit grid-cols-2 gap-1">
{stickers.map((a) => (
<button
key={a.id}
type="button"
disabled={mine}
onContextMenu={(e) => {
if (mine) return;
e.preventDefault();
void save(a);
}}
title={mine ? (a.title ?? "") : `${a.title ?? "Sticker"} — hold to save`}
aria-label={a.title ?? "Sticker"}
className="relative size-20 disabled:cursor-default sm:size-24"
>
{a.image_url && (
<Image
src={a.image_url}
alt={a.title ?? ""}
fill
sizes="96px"
className="object-contain"
/>
)}
</button>
))}
</div>
);
}
components/chat/sticker-picker.tsx
+83
View File
@@ -0,0 +1,83 @@
"use client";
/**
* The sticker drawer, opened from the composer.
*
* The collection is whatever the server says it is — rewards earned through
* sādhana plus stickers saved from a chat — so a sticker you were sent
* appears here the moment you keep it, with no client-side bookkeeping.
*
* Empty is a real state worth explaining: stickers are earned, so someone
* with none needs to know how to get one rather than seeing a blank sheet.
*/
import { useEffect, useState } from "react";
import Image from "next/image";
import { ResponsiveDialog } from "@/components/chat/responsive-dialog";
import { chat, type Sticker } from "@/lib/chat";
export function StickerPicker({
onPick,
onClose,
}: {
onPick: (sticker: Sticker) => void;
onClose: () => void;
}) {
const [stickers, setStickers] = useState<Sticker[] | null>(null);
useEffect(() => {
let cancelled = false;
chat
.stickers()
.then((s) => {
if (!cancelled) setStickers(s);
})
.catch(() => {
if (!cancelled) setStickers([]);
});
return () => {
cancelled = true;
};
}, []);
return (
<ResponsiveDialog
title="Stickers"
description="Earned through sādhana, or saved from a chat."
onClose={onClose}
>
{stickers === null ? (
<p className="p-4 text-sm text-muted-foreground">Loading…</p>
) : stickers.length === 0 ? (
<p className="p-4 text-sm text-muted-foreground">
No stickers yet. Keep your sādhana streak — a sacred reward arrives
every 7 days — or save one someone sends you.
</p>
) : (
<div className="grid grid-cols-4 gap-2 p-4 sm:grid-cols-5">
{stickers.map((s) => (
<button
key={s.key}
type="button"
onClick={() => {
onPick(s);
onClose();
}}
title={s.name}
aria-label={s.name}
className="relative aspect-square rounded-lg p-1 transition-colors hover:bg-muted"
>
<Image
src={s.image_url}
alt=""
fill
sizes="80px"
className="object-contain p-1"
/>
</button>
))}
</div>
)}
</ResponsiveDialog>
);
}
components/sadhna/reward-celebration.tsx
+3 -1
View File
@@ -64,7 +64,9 @@ export function RewardCelebration({
You&apos;ve earned a reward!
</h2>
<p className="mt-1 text-sm text-muted-foreground">
For {grant.milestone} days of unbroken sādhana 🙏
{grant.milestone !== null
? `For ${grant.milestone} days of unbroken sādhana 🙏`
: "A gift for you 🙏"}
</p>
<div className="relative mx-auto my-6 flex size-48 items-center justify-center">
components/sadhna/rewards-gallery.tsx
+63 -8
View File
@@ -15,9 +15,11 @@
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import Image from "next/image";
import { Gift } from "lucide-react";
import type { SadhnaRewardGrant } from "@/lib/sadhna";
import { Gift, Sparkles } from "lucide-react";
import { sadhna, type SadhnaRewardGrant } from "@/lib/sadhna";
import { useMounted } from "@/lib/use-mounted";
import { RewardCelebration } from "@/components/sadhna/reward-celebration";
import { cn } from "@/lib/utils";
export function RewardsGallery({
collected,
@@ -27,6 +29,11 @@ export function RewardsGallery({
nextRewardDate: string | null;
}) {
const [detail, setDetail] = useState<SadhnaRewardGrant | null>(null);
// The gift currently being opened — shown enlarged, over confetti.
const [unwrapping, setUnwrapping] = useState<SadhnaRewardGrant | null>(null);
// Gifts opened in this session. Held locally so the tile clears the moment
// the celebration is dismissed, rather than waiting for a page refresh.
const [justOpened, setJustOpened] = useState<Set<string>>(new Set());
// De-dupe by reward (collected is newest-first, so the first wins).
const seen = new Set<string>();
@@ -38,6 +45,19 @@ export function RewardsGallery({
}
}
// A gift stays wrapped until opened. Everything else — every streak
// reward — is simply collected.
const isWrapped = (g: SadhnaRewardGrant) =>
g.source === "gift" && !g.opened && !justOpened.has(g.reward.key);
const openGift = (g: SadhnaRewardGrant) => {
setUnwrapping(null);
setJustOpened((prev) => new Set(prev).add(g.reward.key));
// The tile has already cleared; a failed write only means it arrives
// wrapped again next load, which is better than blocking the celebration.
void sadhna.openGift(g.reward.key).catch(() => {});
};
return (
<section className="rounded-2xl border border-border bg-card p-4 sm:p-5">
<div className="mb-3 flex items-center gap-2">
@@ -61,20 +81,42 @@ export function RewardsGallery({
<button
key={g.reward.key}
type="button"
onClick={() => setDetail(g)}
className="group flex flex-col items-center gap-1.5 rounded-xl border border-border bg-background p-2 text-center transition-colors hover:border-primary/40 hover:bg-muted/40"
onClick={() =>
isWrapped(g) ? setUnwrapping(g) : setDetail(g)
}
aria-label={
isWrapped(g)
? "A gift is waiting — tap to open"
: g.reward.name
}
className={cn(
"group flex flex-col items-center gap-1.5 rounded-xl border bg-background p-2 text-center transition-colors",
isWrapped(g)
? "border-primary/40 hover:border-primary"
: "border-border hover:border-primary/40 hover:bg-muted/40",
)}
>
<div className="relative aspect-square w-full">
<Image
src={g.reward.image_url}
alt={g.reward.name}
alt={isWrapped(g) ? "" : g.reward.name}
fill
sizes="(max-width: 640px) 30vw, 120px"
className="object-contain p-1"
className={cn(
"object-contain p-1 transition-all",
// Blurred, not hidden: the shape hints at what's coming
// without giving it away.
isWrapped(g) && "scale-95 blur-md",
)}
/>
{isWrapped(g) && (
<span className="absolute inset-0 flex items-center justify-center">
<Sparkles className="size-6 text-primary drop-shadow" />
</span>
)}
</div>
<span className="line-clamp-2 text-[13px] font-medium leading-tight text-foreground">
{shortName(g.reward.name)}
{isWrapped(g) ? "A gift for you" : shortName(g.reward.name)}
</span>
</button>
))}
@@ -93,6 +135,15 @@ export function RewardsGallery({
{detail ? (
<RewardDetail grant={detail} onClose={() => setDetail(null)} />
) : null}
{/* Reuses the streak celebration wholesale — a gift should feel like
any other sacred reward arriving, not like a second mechanism. */}
{unwrapping ? (
<RewardCelebration
grant={unwrapping}
onClose={() => openGift(unwrapping)}
/>
) : null}
</section>
);
}
@@ -145,7 +196,11 @@ function RewardDetail({
</p>
) : null}
<p className="mt-4 text-xs text-muted-foreground">
Earned on day {grant.milestone} of your streak
{/* A gift has no milestone — saying "day null of your streak"
would be worse than saying nothing about where it came from. */}
{grant.milestone !== null
? `Earned on day ${grant.milestone} of your streak`
: "An occasional gift"}
</p>
<button
type="button"
lib/chat.ts
+26 -1
View File
@@ -171,7 +171,8 @@ export type AttachmentKind =
| "file"
| "link"
| "entity"
| "quote";
| "quote"
| "sticker";
/** One emoji on a message, grouped across everyone who chose it. */
export type Reaction = {
@@ -181,6 +182,15 @@ export type Reaction = {
mine: boolean;
};
/** A piece of reward artwork the caller may send. */
export type Sticker = {
key: string;
name: string;
image_url: string;
/** Came from a chat rather than from sādhana. */
saved: boolean;
};
/** One person's reaction, for the "who reacted" list. */
export type ReactionDetail = {
user: ChatPeer;
@@ -303,6 +313,8 @@ export const chat = {
quote?: QuotePayload;
/** Share a post as a card. Only the reference — the BFF resolves it. */
entity?: { type: "post"; id: string };
/** Send reward artwork. Ownership is checked server-side. */
stickerKey?: string;
},
) =>
call<ChatMessage>(`/chat/conversations/${conversationId}/messages`, {
@@ -316,6 +328,7 @@ export const chat = {
attachments: opts?.attachments ?? [],
quote: opts?.quote ?? null,
entity: opts?.entity ?? null,
sticker_key: opts?.stickerKey ?? null,
}),
}),
@@ -441,6 +454,18 @@ export const chat = {
method: "POST",
}),
/** Everything the caller can send: earned through sādhana, or saved from
* a chat. */
stickers: () => call<Sticker[]>("/chat/stickers"),
/** Keep a sticker someone sent. Keyed to the message it arrived on, which
* is what proves it was actually sent to you. */
saveSticker: (conversationId: string, messageId: string, key: string) =>
call<void>(
`/chat/conversations/${conversationId}/messages/${messageId}/sticker`,
{ method: "POST", body: JSON.stringify({ key }) },
),
/** Who reacted, and with what. Only fetched when the list is opened —
* the thread renders from the grouped counts on each message. */
reactionDetails: (conversationId: string, messageId: string) =>
lib/sadhna.ts
+11 -1
View File
@@ -111,9 +111,13 @@ export type SadhnaReward = {
/** A reward earned at a streak milestone (a multiple of 7 days). */
export type SadhnaRewardGrant = {
milestone: number;
/** The streak day this was earned on. Null for an occasional gift. */
milestone: number | null;
granted_at: string;
reward: SadhnaReward;
source: "streak" | "gift";
/** False while a gift is still wrapped — the gallery blurs those. */
opened: boolean;
};
// ─── API ───────────────────────────────────────────────────────────────
@@ -140,6 +144,12 @@ export const sadhna = {
rewards: () =>
call<{ collected: SadhnaRewardGrant[]; total: number }>("/sadhna/rewards"),
/** Open one gift, after its celebration is dismissed. Idempotent. */
openGift: (rewardKey: string) =>
call<void>(`/sadhna/rewards/gifts/${encodeURIComponent(rewardKey)}/open`, {
method: "POST",
}),
/** Acknowledge pending celebrations after showing the confetti. */
ackRewards: () => call<void>("/sadhna/rewards/ack", { method: "POST" }),