Initial project

resources/views/livewire/chat/chat-page.blade.php

@@ -0,0 +1,51 @@
+<section class="mx-auto flex h-[calc(100vh-5.5rem)] min-h-[620px] w-full max-w-[1600px] overflow-hidden rounded-lg border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-950">
+    <aside
+        @class([
+            'h-full w-full shrink-0 border-zinc-200 bg-zinc-50/80 dark:border-zinc-800 dark:bg-zinc-900/70 md:flex md:w-[22rem] lg:w-96',
+            'hidden border-e' => $selectedConversationId,
+            'flex md:border-e' => ! $selectedConversationId,
+        ])
+    >
+        <livewire:chat.conversation-list
+            :selected-conversation-id="$selectedConversationId"
+            :key="'conversation-list-'.$selectedConversationId"
+        />
+    </aside>
+
+    <main
+        @class([
+            'min-w-0 flex-1 bg-white dark:bg-zinc-950 md:flex',
+            'flex' => $selectedConversationId,
+            'hidden' => ! $selectedConversationId,
+        ])
+    >
+        @if ($selectedConversationId)
+            <livewire:chat.conversation-view
+                :conversation-id="$selectedConversationId"
+                :key="'conversation-view-'.$selectedConversationId"
+            />
+        @else
+            <div class="hidden h-full flex-1 items-center justify-center p-8 md:flex">
+                <div class="max-w-md text-center">
+                    <div class="mx-auto mb-6 flex size-16 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-500 shadow-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400">
+                        <flux:icon.chat-bubble-left-right class="size-8" />
+                    </div>
+
+                    <flux:heading size="xl">{{ __('Choose a conversation') }}</flux:heading>
+                    <flux:text class="mt-3 text-balance text-zinc-500 dark:text-zinc-400">
+                        {{ __('Your messages, teammates, and shared context will appear here.') }}
+                    </flux:text>
+                </div>
+            </div>
+        @endif
+    </main>
+
+    @if ($selectedConversationId && $detailsPanelOpen)
+        <aside class="hidden h-full w-[21rem] shrink-0 border-s border-zinc-200 bg-zinc-50/70 dark:border-zinc-800 dark:bg-zinc-900/60 2xl:flex">
+            <livewire:chat.conversation-details-panel
+                :conversation-id="$selectedConversationId"
+                :key="'conversation-details-'.$selectedConversationId"
+            />
+        </aside>
+    @endif
+</section>

resources/views/livewire/chat/conversation-details-panel.blade.php

@@ -0,0 +1,102 @@
+<aside class="flex h-full w-full flex-col overflow-y-auto">
+    <div class="border-b border-zinc-200 p-5 dark:border-zinc-800">
+        <div class="flex items-start justify-between gap-3">
+            <div>
+                <flux:heading>{{ __('Details') }}</flux:heading>
+                <flux:text class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
+                    {{ $this->conversation->isGroup() ? __('Group conversation') : __('Direct conversation') }}
+                </flux:text>
+            </div>
+
+            <flux:badge color="zinc" size="sm">
+                {{ trans_choice(':count message|:count messages', $this->conversation->messages_count, ['count' => $this->conversation->messages_count]) }}
+            </flux:badge>
+        </div>
+
+        <div class="mt-6 flex flex-col items-center text-center">
+            <div class="flex size-20 items-center justify-center rounded-lg bg-gradient-to-br from-sky-500 to-emerald-500 text-xl font-semibold text-white shadow-sm">
+                {{ $this->initials() }}
+            </div>
+
+            <flux:heading size="lg" class="mt-4 max-w-full truncate">{{ $this->title() }}</flux:heading>
+
+            @if ($this->conversation->description)
+                <flux:text class="mt-2 text-balance text-sm text-zinc-500 dark:text-zinc-400">
+                    {{ $this->conversation->description }}
+                </flux:text>
+            @endif
+        </div>
+    </div>
+
+    <div class="space-y-6 p-5">
+        <section>
+            <flux:heading size="sm">{{ __('Quick actions') }}</flux:heading>
+
+            <div class="mt-3 grid grid-cols-3 gap-2">
+                <flux:tooltip :content="__('Mute')" position="top">
+                    <flux:button type="button" variant="filled" icon="bell-slash" aria-label="{{ __('Mute') }}" />
+                </flux:tooltip>
+
+                <flux:tooltip :content="__('Pin')" position="top">
+                    <flux:button type="button" variant="filled" icon="bookmark" aria-label="{{ __('Pin') }}" />
+                </flux:tooltip>
+
+                <flux:tooltip :content="__('Files')" position="top">
+                    <flux:button type="button" variant="filled" icon="folder" aria-label="{{ __('Files') }}" />
+                </flux:tooltip>
+            </div>
+        </section>
+
+        <flux:separator />
+
+        <section>
+            <div class="flex items-center justify-between gap-3">
+                <flux:heading size="sm">{{ __('Participants') }}</flux:heading>
+                <flux:badge size="sm" color="zinc">{{ $this->conversation->participants->count() }}</flux:badge>
+            </div>
+
+            <div class="mt-3 space-y-3">
+                @foreach ($this->conversation->participants as $participant)
+                    <div wire:key="details-participant-{{ $participant->id }}" class="flex items-center gap-3">
+                        <flux:avatar
+                            circle
+                            :name="$participant->user->name"
+                            :initials="$participant->user->initials()"
+                        />
+
+                        <div class="min-w-0 flex-1">
+                            <div class="truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                                {{ $participant->user->name }}
+                            </div>
+                            <div class="truncate text-xs text-zinc-500 dark:text-zinc-400">
+                                {{ $participant->user->email }}
+                            </div>
+                        </div>
+
+                        @if ($participant->role === \App\Models\ConversationParticipant::RoleAdmin)
+                            <flux:badge size="sm" color="amber">{{ __('Admin') }}</flux:badge>
+                        @endif
+                    </div>
+                @endforeach
+            </div>
+        </section>
+
+        <flux:separator />
+
+        <section class="space-y-3">
+            <flux:heading size="sm">{{ __('Conversation health') }}</flux:heading>
+
+            <div class="grid grid-cols-2 gap-3 text-sm">
+                <div class="rounded-lg border border-zinc-200 bg-white p-3 dark:border-zinc-800 dark:bg-zinc-950">
+                    <div class="text-xs text-zinc-500 dark:text-zinc-400">{{ __('Members') }}</div>
+                    <div class="mt-1 font-semibold text-zinc-900 dark:text-zinc-100">{{ $this->conversation->participants->count() }}</div>
+                </div>
+
+                <div class="rounded-lg border border-zinc-200 bg-white p-3 dark:border-zinc-800 dark:bg-zinc-950">
+                    <div class="text-xs text-zinc-500 dark:text-zinc-400">{{ __('Messages') }}</div>
+                    <div class="mt-1 font-semibold text-zinc-900 dark:text-zinc-100">{{ $this->conversation->messages_count }}</div>
+                </div>
+            </div>
+        </section>
+    </div>
+</aside>

resources/views/livewire/chat/conversation-header.blade.php

@@ -0,0 +1,55 @@
+<header class="sticky top-0 z-10 flex h-[4.5rem] shrink-0 items-center justify-between gap-3 border-b border-zinc-200 bg-white/85 px-3 backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/85 sm:px-5">
+    <div class="flex min-w-0 items-center gap-3">
+        <flux:button
+            type="button"
+            variant="ghost"
+            icon="chevron-left"
+            class="md:hidden"
+            wire:click="closeConversation"
+            aria-label="{{ __('Back to conversations') }}"
+        />
+
+        @if ($this->conversation->isGroup())
+            <div class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-sky-500 to-emerald-500 text-sm font-semibold text-white">
+                {{ $this->initials() }}
+            </div>
+        @elseif ($this->isOnline())
+            <flux:avatar
+                circle
+                badge
+                badge:color="green"
+                :name="$this->title()"
+                :initials="$this->initials()"
+            />
+        @else
+            <flux:avatar
+                circle
+                :name="$this->title()"
+                :initials="$this->initials()"
+            />
+        @endif
+
+        <div class="min-w-0">
+            <div class="flex min-w-0 items-center gap-2">
+                <flux:heading class="truncate">{{ $this->title() }}</flux:heading>
+                @if ($this->conversation->isGroup())
+                    <flux:badge size="sm" color="sky">{{ __('Group') }}</flux:badge>
+                @endif
+            </div>
+
+            <flux:text class="truncate text-sm text-zinc-500 dark:text-zinc-400">
+                {{ $this->subtitle() }}
+            </flux:text>
+        </div>
+    </div>
+
+    <div class="flex items-center gap-1">
+        <flux:tooltip :content="__('Search messages')" position="bottom">
+            <flux:button type="button" variant="ghost" icon="magnifying-glass" aria-label="{{ __('Search messages') }}" />
+        </flux:tooltip>
+
+        <flux:tooltip :content="__('Conversation details')" position="bottom">
+            <flux:button type="button" variant="ghost" icon="information-circle" wire:click="toggleDetails" aria-label="{{ __('Conversation details') }}" />
+        </flux:tooltip>
+    </div>
+</header>

resources/views/livewire/chat/conversation-list.blade.php

@@ -0,0 +1,141 @@
+<div class="flex h-full w-full flex-col">
+    <div class="shrink-0 border-b border-zinc-200 bg-white/70 p-4 backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/40">
+        <div class="mb-4 flex items-center justify-between gap-3">
+            <div>
+                <flux:heading size="lg">{{ __('Inbox') }}</flux:heading>
+                <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">
+                    {{ trans_choice(':count conversation|:count conversations', $this->conversations->count(), ['count' => $this->conversations->count()]) }}
+                </flux:text>
+            </div>
+
+            <flux:badge color="emerald" size="sm">{{ __('Live') }}</flux:badge>
+        </div>
+
+        <flux:input
+            wire:model.live.debounce.300ms="search"
+            icon="magnifying-glass"
+            :placeholder="__('Search conversations')"
+            aria-label="{{ __('Search conversations') }}"
+        />
+    </div>
+
+    <div class="relative min-h-0 flex-1 overflow-y-auto p-2" role="list" aria-label="{{ __('Conversations') }}">
+        <div wire:loading.delay wire:target="search" class="space-y-2 p-2">
+            @for ($index = 0; $index < 6; $index++)
+                <div class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-3 dark:border-zinc-800 dark:bg-zinc-900">
+                    <flux:skeleton class="size-11 rounded-full" />
+                    <div class="min-w-0 flex-1 space-y-2">
+                        <flux:skeleton class="h-4 w-2/3" />
+                        <flux:skeleton class="h-3 w-full" />
+                    </div>
+                </div>
+            @endfor
+        </div>
+
+        <div wire:loading.remove wire:target="search" class="space-y-1">
+            @forelse ($this->conversations as $conversation)
+                @php
+                    $selected = $selectedConversationId === $conversation->id;
+                    $unreadCount = (int) ($conversation->unread_messages_count ?? 0);
+                @endphp
+
+                <button
+                    type="button"
+                    wire:key="conversation-{{ $conversation->id }}"
+                    wire:click="selectConversation({{ $conversation->id }})"
+                    aria-pressed="{{ $selected ? 'true' : 'false' }}"
+                    @class([
+                        'group grid w-full grid-cols-[auto_1fr_auto] items-center gap-3 rounded-lg border p-3 text-left transition duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-950',
+                        'border-zinc-900 bg-zinc-900 text-white shadow-sm dark:border-white dark:bg-white dark:text-zinc-950' => $selected,
+                        'border-transparent hover:border-zinc-200 hover:bg-white hover:shadow-sm dark:hover:border-zinc-800 dark:hover:bg-zinc-900' => ! $selected,
+                    ])
+                >
+                    <div class="relative">
+                        @if ($conversation->isGroup())
+                            <div @class([
+                                'flex size-11 items-center justify-center rounded-lg text-sm font-semibold',
+                                'bg-white/15 text-white dark:bg-zinc-950/10 dark:text-zinc-950' => $selected,
+                                'bg-gradient-to-br from-sky-500 to-emerald-500 text-white' => ! $selected,
+                            ])>
+                                {{ $this->initialsFor($conversation) }}
+                            </div>
+                        @elseif ($this->isOnline($conversation))
+                            <flux:avatar
+                                circle
+                                badge
+                                badge:color="green"
+                                :name="$this->titleFor($conversation)"
+                                :initials="$this->initialsFor($conversation)"
+                            />
+                        @else
+                            <flux:avatar
+                                circle
+                                :name="$this->titleFor($conversation)"
+                                :initials="$this->initialsFor($conversation)"
+                            />
+                        @endif
+                    </div>
+
+                    <div class="min-w-0">
+                        <div class="flex min-w-0 items-center gap-2">
+                            <span class="truncate text-sm font-semibold">{{ $this->titleFor($conversation) }}</span>
+                            @if ($conversation->isGroup())
+                                <span @class([
+                                    'rounded-full px-1.5 py-0.5 text-[10px] font-medium uppercase',
+                                    'bg-white/15 text-white/80 dark:bg-zinc-950/10 dark:text-zinc-700' => $selected,
+                                    'bg-sky-50 text-sky-700 dark:bg-sky-400/10 dark:text-sky-300' => ! $selected,
+                                ])>{{ __('Group') }}</span>
+                            @endif
+                        </div>
+
+                        <p @class([
+                            'mt-1 truncate text-sm',
+                            'text-white/75 dark:text-zinc-700' => $selected,
+                            'text-zinc-500 dark:text-zinc-400' => ! $selected,
+                        ])>
+                            {{ $this->previewFor($conversation) }}
+                        </p>
+
+                        <p @class([
+                            'mt-1 text-xs',
+                            'text-white/60 dark:text-zinc-600' => $selected,
+                            'text-zinc-400 dark:text-zinc-500' => ! $selected,
+                        ])>
+                            {{ $this->participantSummaryFor($conversation) }}
+                        </p>
+                    </div>
+
+                    <div class="flex h-full flex-col items-end justify-between gap-2">
+                        <span @class([
+                            'text-xs',
+                            'text-white/60 dark:text-zinc-600' => $selected,
+                            'text-zinc-400 dark:text-zinc-500' => ! $selected,
+                        ])>
+                            {{ $this->timeFor($conversation->latestMessage?->created_at) }}
+                        </span>
+
+                        @if ($unreadCount > 0)
+                            <span class="flex min-w-5 items-center justify-center rounded-full bg-emerald-500 px-1.5 text-xs font-semibold text-white">
+                                {{ $unreadCount > 9 ? '9+' : $unreadCount }}
+                            </span>
+                        @else
+                            <span class="size-2 rounded-full bg-transparent transition group-hover:bg-zinc-300 dark:group-hover:bg-zinc-700"></span>
+                        @endif
+                    </div>
+                </button>
+            @empty
+                <div class="flex h-full min-h-72 items-center justify-center p-8 text-center">
+                    <div>
+                        <div class="mx-auto mb-4 flex size-12 items-center justify-center rounded-lg border border-dashed border-zinc-300 text-zinc-400 dark:border-zinc-700">
+                            <flux:icon.magnifying-glass class="size-6" />
+                        </div>
+                        <flux:heading size="sm">{{ __('No conversations found') }}</flux:heading>
+                        <flux:text class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">
+                            {{ __('Try a different name, email, or group title.') }}
+                        </flux:text>
+                    </div>
+                </div>
+            @endforelse
+        </div>
+    </div>
+</div>

resources/views/livewire/chat/conversation-view.blade.php

@@ -0,0 +1,120 @@
+<div
+    class="flex h-full min-w-0 flex-1 flex-col"
+    x-data="{
+        scrollToBottom() {
+            this.$nextTick(() => {
+                this.$refs.messages.scrollTop = this.$refs.messages.scrollHeight
+            })
+        }
+    }"
+    x-init="scrollToBottom()"
+    x-on:message-created.window="if ($event.detail.conversationId === @js($conversationId)) scrollToBottom()"
+>
+    <livewire:chat.conversation-header
+        :conversation-id="$conversationId"
+        :key="'conversation-header-'.$conversationId"
+    />
+
+    <div x-ref="messages" class="min-h-0 flex-1 overflow-y-auto scroll-smooth bg-zinc-50/40 px-4 py-6 dark:bg-zinc-950 sm:px-6">
+        @if ($this->hasMoreMessages)
+            <div class="mb-6 flex justify-center">
+                <flux:button
+                    size="sm"
+                    variant="filled"
+                    icon="arrow-up"
+                    wire:click.preserve-scroll="loadEarlier"
+                    wire:loading.attr="disabled"
+                    wire:target="loadEarlier"
+                >
+                    {{ __('Load earlier') }}
+                </flux:button>
+            </div>
+        @endif
+
+        @if ($this->messages->isEmpty())
+            <div class="flex h-full min-h-96 items-center justify-center text-center">
+                <div class="max-w-sm">
+                    <div class="mx-auto mb-4 flex size-12 items-center justify-center rounded-lg border border-dashed border-zinc-300 text-zinc-400 dark:border-zinc-700">
+                        <flux:icon.chat-bubble-left-ellipsis class="size-6" />
+                    </div>
+                    <flux:heading size="sm">{{ __('No messages yet') }}</flux:heading>
+                    <flux:text class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">
+                        {{ __('Start the conversation with a short note.') }}
+                    </flux:text>
+                </div>
+            </div>
+        @else
+            <div class="space-y-6">
+                @php
+                    $lastDate = null;
+                @endphp
+
+                @foreach ($this->messages as $message)
+                    @php
+                        $messageDate = $message->created_at->toDateString();
+                        $isMine = $message->user_id === auth()->id();
+                        $senderName = $message->sender?->name ?? __('Deleted user');
+                    @endphp
+
+                    @if ($messageDate !== $lastDate)
+                        <div class="flex items-center gap-3" wire:key="date-{{ $messageDate }}">
+                            <div class="h-px flex-1 bg-zinc-200 dark:bg-zinc-800"></div>
+                            <span class="rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs font-medium text-zinc-500 shadow-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400">
+                                {{ $this->dateLabel($message->created_at) }}
+                            </span>
+                            <div class="h-px flex-1 bg-zinc-200 dark:bg-zinc-800"></div>
+                        </div>
+
+                        @php
+                            $lastDate = $messageDate;
+                        @endphp
+                    @endif
+
+                    <div wire:key="message-{{ $message->id }}" @class([
+                        'flex items-end gap-2',
+                        'justify-end' => $isMine,
+                        'justify-start' => ! $isMine,
+                    ])>
+                        @unless ($isMine)
+                            <div class="mb-6 flex size-8 shrink-0 items-center justify-center rounded-full bg-zinc-200 text-xs font-semibold text-zinc-700 dark:bg-zinc-800 dark:text-zinc-200">
+                                {{ $message->sender?->initials() ?? 'DU' }}
+                            </div>
+                        @endunless
+
+                        <div @class([
+                            'max-w-[min(82%,42rem)]',
+                            'items-end text-right' => $isMine,
+                            'items-start text-left' => ! $isMine,
+                        ])>
+                            @if (! $isMine && $this->conversation->isGroup())
+                                <div class="mb-1 px-1 text-xs font-medium text-zinc-500 dark:text-zinc-400">
+                                    {{ $senderName }}
+                                </div>
+                            @endif
+
+                            <div @class([
+                                'rounded-lg px-4 py-3 text-sm leading-6 shadow-sm',
+                                'bg-zinc-900 text-white dark:bg-white dark:text-zinc-950' => $isMine,
+                                'border border-zinc-200 bg-white text-zinc-800 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100' => ! $isMine,
+                            ])>
+                                <p class="whitespace-pre-wrap break-words">{{ $message->body }}</p>
+                            </div>
+
+                            <div @class([
+                                'mt-1 px-1 text-[11px] text-zinc-400 dark:text-zinc-500',
+                                'text-right' => $isMine,
+                            ])>
+                                {{ $message->created_at->format('H:i') }}
+                            </div>
+                        </div>
+                    </div>
+                @endforeach
+            </div>
+        @endif
+    </div>
+
+    <livewire:chat.message-composer
+        :conversation-id="$conversationId"
+        :key="'message-composer-'.$conversationId"
+    />
+</div>

resources/views/livewire/chat/message-composer.blade.php

@@ -0,0 +1,35 @@
+<form wire:submit="sendMessage" class="shrink-0 border-t border-zinc-200 bg-white/90 p-3 backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/90 sm:p-4">
+    <div class="flex items-end gap-2 rounded-lg border border-zinc-200 bg-white p-2 shadow-sm transition focus-within:border-zinc-300 focus-within:ring-2 focus-within:ring-accent focus-within:ring-offset-2 focus-within:ring-offset-white dark:border-zinc-800 dark:bg-zinc-900 dark:focus-within:border-zinc-700 dark:focus-within:ring-offset-zinc-950">
+        <flux:tooltip :content="__('Attach file')" position="top">
+            <flux:button type="button" variant="ghost" icon="paper-clip" aria-label="{{ __('Attach file') }}" />
+        </flux:tooltip>
+
+        <flux:textarea
+            wire:model.live.debounce.150ms="body"
+            rows="1"
+            :placeholder="__('Write a message...')"
+            aria-label="{{ __('Message') }}"
+            class="max-h-36 min-h-11 flex-1 resize-none border-0! bg-transparent! shadow-none! ring-0!"
+            x-on:keydown.enter.exact.prevent="$wire.sendMessage()"
+            x-on:keydown.shift.enter.stop
+        />
+
+        <flux:tooltip :content="__('Emoji')" position="top">
+            <flux:button type="button" variant="ghost" icon="face-smile" aria-label="{{ __('Emoji') }}" />
+        </flux:tooltip>
+
+        <flux:button
+            type="submit"
+            variant="primary"
+            icon="paper-airplane"
+            :disabled="blank(trim($body))"
+            wire:loading.attr="disabled"
+            wire:target="sendMessage"
+            aria-label="{{ __('Send message') }}"
+        />
+    </div>
+
+    @error('body')
+        <flux:text class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</flux:text>
+    @enderror
+</form>