non working comments

Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php

@@ -80,7 +80,7 @@
                 @endif
             </section>
 
-            <form wire:submit="addComment" class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
+            <section class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900" dusk="ticket-comment-form">
                 <h2 class="mb-4 text-base font-semibold text-zinc-900 dark:text-white">Add reply</h2>
                 @if ($cannedResponses->isNotEmpty())
                     <div class="mb-4 grid gap-3 md:grid-cols-[1fr_auto]">
@@ -96,7 +96,20 @@
                     </div>
                 @endif
 
-                <x-helpdesk::html-editor dusk="ticket-comment-editor" wire:model="commentBody" label="Comment" rows="5" placeholder="Write a professional response..." />
+                <div class="space-y-2">
+                    <label for="ticket-comment-body" class="block text-sm font-medium text-zinc-700 dark:text-zinc-200">Comment</label>
+                    <textarea
+                        id="ticket-comment-body"
+                        dusk="ticket-comment-body"
+                        wire:model.live="commentBody"
+                        rows="5"
+                        placeholder="Write a professional response..."
+                        class="block w-full rounded-xl border border-zinc-300 bg-white p-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
+                    ></textarea>
+                    @error('commentBody')
+                        <div class="text-sm text-red-600">{{ $message }}</div>
+                    @enderror
+                </div>
 
                 @can('update', $ticket)
                     <div class="mt-4">
@@ -111,12 +124,20 @@
                 </div>
 
                 <div class="mt-5 flex justify-end">
-                    <flux:button dusk="post-comment" type="submit" variant="primary" icon="chat-bubble-left-right" class="!bg-emerald-600 !text-white hover:!bg-emerald-700 focus:!ring-emerald-400/60" wire:loading.attr="disabled">
+                    <button
-                        <span wire:loading.remove>Post reply</span>
+                        dusk="post-comment"
-                        <span wire:loading>Posting...</span>
+                        type="button"
-                    </flux:button>
+                        wire:click.prevent="addComment"
+                        wire:target="addComment"
+                        wire:loading.attr="disabled"
+                        class="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400/60 disabled:cursor-not-allowed disabled:opacity-70"
+                    >
+                        <i class="fa-solid fa-comments mr-2" aria-hidden="true"></i>
+                        <span wire:loading.remove wire:target="addComment">Post reply</span>
+                        <span wire:loading wire:target="addComment">Posting...</span>
+                    </button>
                 </div>
-            </form>
+            </section>
         </div>
 
         <aside class="space-y-6">

Modules/Helpdesk/Resources/views/partials/comment-thread.blade.php

@@ -43,14 +43,31 @@
             </div>
 
             @if (($reply_parent_id ?? null) === $comment->id)
-                <form wire:submit="addReply" class="mt-4 rounded-xl border border-blue-200 bg-blue-50 p-4 dark:border-blue-900 dark:bg-blue-950/40">
+                <div class="mt-4 rounded-xl border border-blue-200 bg-blue-50 p-4 dark:border-blue-900 dark:bg-blue-950/40">
-                    <x-helpdesk::html-editor wire:key="reply-editor-{{ $comment->id }}" wire:model="replyBody" label="Reply" rows="4" placeholder="Write a reply..." />
+                    <div class="space-y-2">
+                        <label for="ticket-reply-body-{{ $comment->id }}" class="block text-sm font-medium text-zinc-700 dark:text-zinc-200">Reply</label>
+                        <textarea
+                            id="ticket-reply-body-{{ $comment->id }}"
+                            dusk="ticket-reply-body"
+                            wire:key="reply-editor-{{ $comment->id }}"
+                            wire:model.live="replyBody"
+                            rows="4"
+                            placeholder="Write a reply..."
+                            class="block w-full rounded-xl border border-zinc-300 bg-white p-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
+                        ></textarea>
+                        @error('replyBody')
+                            <div class="text-sm text-red-600">{{ $message }}</div>
+                        @enderror
+                    </div>
 
                     <div class="mt-4 flex justify-end gap-2">
-                        <flux:button type="button" wire:click="cancelReply" variant="ghost" class="!bg-slate-600 !text-white hover:!bg-slate-700 focus:!ring-slate-400/60">Cancel</flux:button>
+                        <button type="button" wire:click.prevent="cancelReply" class="inline-flex items-center justify-center rounded-xl bg-slate-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400/60">Cancel</button>
-                        <flux:button type="submit" variant="primary" class="!bg-emerald-600 !text-white hover:!bg-emerald-700 focus:!ring-emerald-400/60">Post reply</flux:button>
+                        <button type="button" wire:click.prevent="addReply" wire:target="addReply" wire:loading.attr="disabled" class="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400/60 disabled:cursor-not-allowed disabled:opacity-70">
+                            <span wire:loading.remove wire:target="addReply">Post reply</span>
+                            <span wire:loading wire:target="addReply">Posting...</span>
+                        </button>
                     </div>
-                </form>
+                </div>
             @endif
 
             @if ($commentReplies->isNotEmpty())

Modules/Helpdesk/Tests/Browser/HelpdeskTicketBrowserTest.php

@@ -60,11 +60,9 @@ final class HelpdeskTicketBrowserTest extends DuskTestCase
             $browser->loginAs($user)
                 ->visitRoute('helpdesk.tickets.show', $ticket)
                 ->waitFor('@helpdesk-ticket-show')
-                ->assertSee('Browser response ticket');
+                ->assertSee('Browser response ticket')
-
+                ->type('@ticket-comment-body', 'First browser response')
-            $this->setHelpdeskEditor($browser, 'ticket-comment-editor', '<p>First browser response</p>');
+                ->press('@post-comment')
-
-            $browser->press('@post-comment')
                 ->waitForText('First browser response', 10)
                 ->assertSee('First browser response');
         });
@@ -73,7 +71,7 @@ final class HelpdeskTicketBrowserTest extends DuskTestCase
             'ticket_id' => $ticket->id,
             'parent_id' => null,
             'user_id' => $user->id,
-            'body' => '<p>First browser response</p>',
+            'body' => 'First browser response',
             'is_internal' => false,
         ]);
     }
@@ -114,7 +112,20 @@ editor.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
 editor.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true, composed: true }));
 editor.dispatchEvent(new Event('blur', { bubbles: true, composed: true }));
 
+const model = root.getAttribute('wire:model')
+    || root.getAttribute('wire:model.live')
+    || root.getAttribute('wire:model.defer')
+    || root.getAttribute('data-wire-model');
 
+const componentRoot = root.closest('[wire\\\\:id]');
+
+if (model && componentRoot && window.Livewire) {
+    const component = window.Livewire.find(componentRoot.getAttribute('wire:id'));
+
+    if (component) {
+        component.set(model, html);
+    }
+}
 JS);
     }