Implemented the Live chat improvements.

resources/js/pages/channels/show.tsx

@@ -1,15 +1,17 @@
 import { Head, Link, router, useForm, usePage } from '@inertiajs/react';
 import {
+    Crown,
     Heart,
     LogIn,
     MessageSquare,
     Radio,
     Send,
+    SmilePlus,
     Users,
     Video,
 } from 'lucide-react';
 import type { FormEvent } from 'react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
     Avatar as ChatAvatar,
     AvatarFallback,
@@ -45,6 +47,25 @@ type Props = {
     isFollowing: boolean;
 };
 
+const chatEmojis = [
+    '😀',
+    '😂',
+    '😍',
+    '😎',
+    '🔥',
+    '👏',
+    '🙌',
+    '❤️',
+    '💯',
+    '🎉',
+    '👍',
+    '👀',
+    '🤯',
+    '😭',
+    '🙏',
+    '✨',
+];
+
 export default function ChannelShow({
     channel,
     currentBroadcast,
@@ -155,6 +176,9 @@ export default function ChannelShow({
                                         <ChatPanel
                                             channel={channel}
                                             authUser={Boolean(auth.user)}
+                                            currentUserId={
+                                                auth.user?.id ?? null
+                                            }
                                             messages={chatMessages}
                                             form={chatForm}
                                             onSubmit={submitChat}
@@ -221,6 +245,7 @@ export default function ChannelShow({
                     <ChatPanel
                         channel={channel}
                         authUser={Boolean(auth.user)}
+                        currentUserId={auth.user?.id ?? null}
                         messages={chatMessages}
                         form={chatForm}
                         onSubmit={submitChat}
@@ -272,6 +297,7 @@ function OfflinePlayer({ channel }: { channel: ChannelDetail }) {
 function ChatPanel({
     channel,
     authUser,
+    currentUserId,
     messages,
     form,
     onSubmit,
@@ -279,12 +305,50 @@ function ChatPanel({
 }: {
     channel: ChannelDetail;
     authUser: boolean;
+    currentUserId: number | null;
     messages: ChatMessage[];
     form: ReturnType<typeof useForm<{ body: string }>>;
     onSubmit: (event: FormEvent) => void;
     compact?: boolean;
 }) {
     const getInitials = useInitials();
+    const inputRef = useRef<HTMLInputElement>(null);
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+    const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
+    const messageLength = form.data.body.length;
+    const canSend =
+        channel.is_live && form.data.body.trim().length > 0 && !form.processing;
+
+    useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ block: 'end' });
+    }, [messages.length]);
+
+    function submitChatForm(event: FormEvent) {
+        setEmojiPickerOpen(false);
+        onSubmit(event);
+    }
+
+    function insertEmoji(emoji: string) {
+        const input = inputRef.current;
+        const cursorStart = input?.selectionStart ?? form.data.body.length;
+        const cursorEnd = input?.selectionEnd ?? form.data.body.length;
+        const nextBody = (
+            form.data.body.slice(0, cursorStart) +
+            emoji +
+            form.data.body.slice(cursorEnd)
+        ).slice(0, 500);
+        const nextCursor = Math.min(
+            cursorStart + emoji.length,
+            nextBody.length,
+        );
+
+        form.setData('body', nextBody);
+
+        window.requestAnimationFrame(() => {
+            inputRef.current?.focus();
+            inputRef.current?.setSelectionRange(nextCursor, nextCursor);
+        });
+    }
 
     return (
         <div className="flex min-h-0 w-full flex-col">
@@ -296,66 +360,198 @@ function ChatPanel({
             >
                 <div className="flex items-center gap-2">
                     <MessageSquare className="size-5 text-primary" />
-                    <h2 className="font-semibold">Live chat</h2>
+                    <div>
+                        <h2 className="font-semibold">Live chat</h2>
+                        <p className="text-xs text-muted-foreground">
+                            {formatMessageCount(messages.length)}
+                        </p>
+                    </div>
                 </div>
                 <LiveState channel={channel} compact />
             </div>
-            <div className="min-h-0 flex-1 space-y-3 overflow-y-auto p-4">
+            <div className="min-h-0 flex-1 overflow-y-auto p-4">
-                {messages.map((message) => (
+                <div className="grid gap-3">
-                    <div
+                    {messages.map((message) => {
-                        key={message.id}
+                        const isOwnMessage = currentUserId === message.user.id;
-                        className="flex min-w-0 gap-2 text-sm"
+                        const isChannelOwner =
-                    >
+                            channel.owner.id === message.user.id;
-                        <ChatAvatar className="mt-0.5 size-7 rounded-md">
+
-                            <AvatarImage
+                        return (
-                                src={message.user.avatar_url ?? undefined}
+                            <div
-                                alt={message.user.name}
+                                key={message.id}
-                                className="object-cover"
+                                className={cn(
-                            />
+                                    'flex min-w-0 gap-2 rounded-md border border-transparent p-2 text-sm',
-                            <AvatarFallback className="rounded-md bg-secondary text-[11px] font-semibold text-secondary-foreground">
+                                    isOwnMessage &&
-                                {getInitials(message.user.name)}
+                                        !isChannelOwner &&
-                            </AvatarFallback>
+                                        'bg-primary/5',
-                        </ChatAvatar>
+                                    isChannelOwner &&
-                        <div className="min-w-0 flex-1">
+                                        'border-primary/30 bg-primary/10',
-                            <div className="truncate font-medium">
+                                )}
-                                {message.user.name}
+                            >
-                            </div>
+                                <ChatAvatar
-                            <div className="break-words text-muted-foreground">
+                                    className={cn(
-                                {message.body}
+                                        'mt-0.5 size-8 rounded-md',
+                                        isChannelOwner &&
+                                            'ring-2 ring-primary/40',
+                                    )}
+                                >
+                                    <AvatarImage
+                                        src={
+                                            message.user.avatar_url ?? undefined
+                                        }
+                                        alt={message.user.name}
+                                        className="object-cover"
+                                    />
+                                    <AvatarFallback className="rounded-md bg-secondary text-[11px] font-semibold text-secondary-foreground">
+                                        {getInitials(message.user.name)}
+                                    </AvatarFallback>
+                                </ChatAvatar>
+                                <div className="min-w-0 flex-1">
+                                    <div className="flex min-w-0 items-baseline gap-2">
+                                        <span
+                                            className={cn(
+                                                'truncate font-medium',
+                                                isChannelOwner &&
+                                                    'text-primary',
+                                            )}
+                                        >
+                                            {isOwnMessage
+                                                ? 'You'
+                                                : message.user.name}
+                                        </span>
+                                        {isChannelOwner && (
+                                            <span className="inline-flex shrink-0 items-center gap-1 rounded-sm bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground">
+                                                <Crown className="size-3" />
+                                                Owner
+                                            </span>
+                                        )}
+                                        {message.created_at && (
+                                            <time
+                                                dateTime={message.created_at}
+                                                title={formatChatDateTime(
+                                                    message.created_at,
+                                                )}
+                                                className={cn(
+                                                    'ml-auto shrink-0 text-[11px] text-muted-foreground',
+                                                    isChannelOwner &&
+                                                        'text-primary/80',
+                                                )}
+                                            >
+                                                {formatChatTime(
+                                                    message.created_at,
+                                                )}
+                                            </time>
+                                        )}
+                                    </div>
+                                    <div
+                                        className={cn(
+                                            'leading-5 break-words whitespace-pre-wrap',
+                                            isChannelOwner
+                                                ? 'text-foreground'
+                                                : 'text-muted-foreground',
+                                        )}
+                                    >
+                                        {message.body}
+                                    </div>
+                                </div>
                             </div>
+                        );
+                    })}
+                    {messages.length === 0 && (
+                        <div className="grid justify-items-center gap-2 rounded-md border border-dashed p-5 text-center text-sm text-muted-foreground">
+                            <MessageSquare className="size-5 text-primary" />
+                            <span>
+                                {channel.is_live
+                                    ? 'No messages yet.'
+                                    : 'Chat appears when the channel is live.'}
+                            </span>
                         </div>
-                    </div>
+                    )}
-                ))}
+                    <div ref={messagesEndRef} />
-                {messages.length === 0 && (
+                </div>
-                    <div className="rounded-md border border-dashed p-4 text-sm text-muted-foreground">
-                        {channel.is_live
-                            ? 'No messages yet.'
-                            : 'Chat appears when the channel is live.'}
-                    </div>
-                )}
             </div>
             <div className="shrink-0 border-t p-4">
                 {authUser ? (
-                    <form onSubmit={onSubmit} className="flex gap-2">
+                    <form onSubmit={submitChatForm} className="grid gap-2">
-                        <Input
+                        <div className="flex gap-2">
-                            value={form.data.body}
+                            <Input
-                            onChange={(event) =>
+                                ref={inputRef}
-                                form.setData('body', event.target.value)
+                                value={form.data.body}
-                            }
+                                onChange={(event) =>
-                            placeholder={
+                                    form.setData('body', event.target.value)
-                                channel.is_live
+                                }
-                                    ? 'Send a message'
+                                placeholder={
-                                    : 'Channel is offline'
+                                    channel.is_live
-                            }
+                                        ? 'Send a message'
-                            disabled={!channel.is_live}
+                                        : 'Channel is offline'
-                        />
+                                }
-                        <Button
+                                disabled={!channel.is_live || form.processing}
-                            type="submit"
+                                maxLength={500}
-                            size="icon"
+                            />
-                            disabled={!channel.is_live || form.processing}
+                            <div className="relative">
-                        >
+                                <Button
-                            <Send className="size-4" />
+                                    type="button"
-                        </Button>
+                                    variant="outline"
+                                    size="icon"
+                                    disabled={
+                                        !channel.is_live || form.processing
+                                    }
+                                    aria-label="Open emoji picker"
+                                    aria-expanded={emojiPickerOpen}
+                                    onClick={() =>
+                                        setEmojiPickerOpen((open) => !open)
+                                    }
+                                >
+                                    <SmilePlus className="size-4" />
+                                </Button>
+                                {emojiPickerOpen && channel.is_live && (
+                                    <div className="absolute right-0 bottom-full z-10 mb-2 grid w-52 grid-cols-4 gap-1 rounded-md border bg-popover p-2 text-popover-foreground shadow-md">
+                                        {chatEmojis.map((emoji) => (
+                                            <button
+                                                key={emoji}
+                                                type="button"
+                                                aria-label={`Insert ${emoji}`}
+                                                className="flex size-10 items-center justify-center rounded-md text-lg hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+                                                onClick={() =>
+                                                    insertEmoji(emoji)
+                                                }
+                                            >
+                                                {emoji}
+                                            </button>
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+                            <Button
+                                type="submit"
+                                size="icon"
+                                disabled={!canSend}
+                                aria-label="Send message"
+                            >
+                                <Send className="size-4" />
+                            </Button>
+                        </div>
+                        <div className="flex items-center justify-between gap-2 text-xs text-muted-foreground">
+                            <span
+                                className={cn(
+                                    'min-h-4',
+                                    form.errors.body && 'text-destructive',
+                                )}
+                            >
+                                {form.errors.body ??
+                                    (!channel.is_live
+                                        ? 'Channel is offline'
+                                        : '')}
+                            </span>
+                            <span
+                                className={cn(
+                                    'shrink-0 tabular-nums',
+                                    messageLength > 450 && 'text-primary',
+                                )}
+                            >
+                                {messageLength}/500
+                            </span>
+                        </div>
                     </form>
                 ) : (
                     <Button asChild variant="outline" className="w-full">
@@ -367,6 +563,21 @@ function ChatPanel({
     );
 }
 
+function formatMessageCount(count: number): string {
+    return count === 1 ? '1 message' : `${count} messages`;
+}
+
+function formatChatTime(value: string): string {
+    return new Date(value).toLocaleTimeString([], {
+        hour: 'numeric',
+        minute: '2-digit',
+    });
+}
+
+function formatChatDateTime(value: string): string {
+    return new Date(value).toLocaleString();
+}
+
 function VodCard({ vod }: { vod: VodSummary }) {
     return (
         <div className="overflow-hidden rounded-md border bg-card">