Use turbo

Author: GromNaN

composer.json

@@ -28,7 +28,7 @@
         "twig/extra-bundle": "^2.12|^3.0",
         "twig/intl-extra": "^3.5",
         "twig/markdown-extra": "^3.5",
-        "twig/twig": "^2.12|^3.0",
+        "twig/twig": "^2.12|^3.0"
     },
     "require-dev": {
         "symfony/debug-bundle": "6.2.*",

composer.lock

@@ -50,7 +50,7 @@ public function submitAction(Request $request): Response
         $form->handleRequest($request);
 
         if (!$form->isSubmitted() || !$form->isValid()) {
-            return new Response('Invalid form', Response::HTTP_BAD_REQUEST);
+            return new Response('Invalid form', Response::HTTP_UNPROCESSABLE_ENTITY);
         }
 
         /** @var MessageInput $messageInput */

src/Controller/ChatController.php

@@ -56,7 +56,7 @@
         </div>
 
         <div class="send-box">
-            <form action="{{ path('submit') }}" method="post">
+            <form action="{{ path('submit') }}" method="post" data-turbo-frame="chatbox" data-turbo-action="replace">
                 {{ form_widget(this.form.message) }}
                 {{ form_widget(this.form.id) }}
                 {# @todo would be nice to be able to add an icon. See https://stackoverflow.com/a/31275381/450789 #}

templates/components/chatbox.html.twig

@@ -2,7 +2,7 @@
     <div class="chat-header">
         <div class="msg-search">
             <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search" aria-label="search" data-model="query">
-            <a class="add" href="{{ path('index') }}"><img class="img-fluid" src="https://mehedihtml.com/chatbox/assets/img/add.svg" alt="add"></a>
+            <a class="add" href="{{ path('index') }}" data-turbo-action="replace" data-turbo-frame="chatbox"><img class="img-fluid" src="https://mehedihtml.com/chatbox/assets/img/add.svg" alt="add"></a>
         </div>
     </div>
 
@@ -13,7 +13,7 @@
                 <div class="tab-pane fade show active" id="Open" role="tabpanel" aria-labelledby="Open-tab">
                     <div class="chat-list">
                         {% for conversation in this.conversations %}
-                            <a href="{{ path('conversation', { id: conversation.id }) }}" class="d-flex align-items-center" data-loading="addClass(opacity-50)">
+                            <a href="{{ path('conversation', { id: conversation.id }) }}" class="d-flex align-items-center" data-loading="addClass(opacity-50)" data-turbo-action="replace" data-turbo-frame="chatbox">
                                 <div class="flex-shrink-0">
                                     <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg" width="45" height="45" alt="user img">
                                     <!--<span class="active"></span>-->

templates/components/chats_list.html.twig

@@ -17,11 +17,13 @@
                         <!-- chatlist -->
 
                         <!-- chatbox -->
-                        <div class="chatbox">
-                            <div class="modal-dialog-scrollable">
-                                {{ component('chatbox', { class: 'modal-content', id }) }}
+                            <div class="chatbox">
+                                <div class="modal-dialog-scrollable">
+                                    <turbo-frame id="chatbox">
+                                        {{ component('chatbox', { class: 'modal-content', id }) }}
+                                    </turbo-frame>
+                                </div>
                             </div>
-                        </div>
                     </div>
                     <!-- chatbox -->