diff --git a/app/(app)/chats/[id]/page.tsx b/app/(app)/chats/[id]/page.tsx index a6856221..9ba2d268 100644 --- a/app/(app)/chats/[id]/page.tsx +++ b/app/(app)/chats/[id]/page.tsx @@ -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. diff --git a/components/chat/chat-composer.tsx b/components/chat/chat-composer.tsx index fa13ba39..4312816c 100644 --- a/components/chat/chat-composer.tsx +++ b/components/chat/chat-composer.tsx @@ -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([]); const ref = useRef(null); const fileRef = useRef(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({ > +