More refactoring of Playground code

- Extracted User and Bot Messages

stubs/default/resources/views/Components/sidekick-bot-message.blade.php

@@ -0,0 +1,17 @@
+<div class="flex items-start justify-end">
+    <div class="bg-blue-800 text-white p-4 rounded-lg w-3/4">
+        <p class="font-bold flex items-center gap-x-1 pb-2">
+            <svg class="h-5 w-5 text-white"  width="24" height="24" viewBox="0 0 24 24"
+                 stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <path d="M4 8v-2a2 2 0 0 1 2 -2h2" />
+                <path d="M4 16v2a2 2 0 0 0 2 2h2" />
+                <path d="M16 4h2a2 2 0 0 1 2 2v2" />
+                <path d="M16 20h2a2 2 0 0 0 2 -2v-2" />
+                <line x1="9" y1="10" x2="9.01" y2="10" />
+                <line x1="15" y1="10" x2="15.01" y2="10" />
+                <path d="M9.5 15a3.5 3.5 0 0 0 5 0" />
+            </svg> Assistant</p>
+        <p id="response-{{ $r }}">{{ $slot }}</p>
+    </div>
+</div>

stubs/default/resources/views/Components/sidekick-user-message.blade.php

@@ -0,0 +1,10 @@
+<div class="flex items-start">
+    <div class="bg-gray-200 p-4 rounded-lg w-3/4">
+        <p class="font-bold flex items-center gap-x-1 pb-2 text-black">
+            <svg class="h-5 w-5 text-black"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                      stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+            </svg> User</p>
+        <p class="text-gray-800">{{ $slot }}</p>
+    </div>
+</div>

stubs/default/resources/views/Pages/chatroom.blade.php

@@ -24,21 +24,13 @@
             @if(isset($messages))
                 @foreach($messages as $message)
                     @if(strtolower($message['role']) === 'user')
-                        <div class="flex items-start">
-                            <div class="bg-gray-200 p-4 rounded-lg w-3/4">
-                                <p class="font-bold flex items-center gap-x-1 pb-2 text-black">
-                                    @include('Components.user') User</p>
-                                <p class="text-gray-800">{!! $message['content'] !!}</p>
-                            </div>
-                        </div>
+                        <x-sidekick-user-message>
+                            {!! $message['content'] !!}
+                        </x-sidekick-user-message>
                     @else
-                        <div class="flex items-start justify-end">
-                            <div class="bg-blue-800 text-white p-4 rounded-lg w-3/4">
-                                <p class="font-bold flex items-center gap-x-1 pb-2">
-                                    @include('Components.bot') Assistant</p>
-                                <p>{!! nl2br($message['content']) !!}</p>
-                            </div>
-                        </div>
+                        <x-sidekick-bot-message r="{{ $message->id }}">
+                            {!! nl2br($message['content']) !!}
+                        </x-sidekick-bot-message>
                     @endif
                 @endforeach
             @endif
@@ -85,13 +77,9 @@
                 let isStreamed = stream.checked;
 
                 responseContainer.innerHTML += `
-                    <div class="flex items-start">
-                        <div class="bg-gray-200 p-4 rounded-lg w-3/4">
-                            <p class="font-bold flex items-center gap-x-1 pb-2 text-black">
-                                    @include('Components.user') User</p>
-                            <p class="text-gray-800">${message}</p>
-                        </div>
-                    </div>
+                    <x-sidekick-user-message>
+                        ${message}
+                    </x-sidekick-user-message>
                 `;
 
                 responseContainer.innerHTML += `
@@ -120,13 +108,7 @@
 
                     // Create response container
                     responseContainer.innerHTML += `
-                    <div class="flex items-start justify-end">
-                        <div class="bg-blue-800 text-white p-4 rounded-lg w-3/4">
-                            <p class="font-bold flex items-center gap-x-1 pb-2">
-                                @include('Components.bot') Assistant</p>
-                            <p id="response-${r}"></p>
-                        </div>
-                    </div>
+                        <x-sidekick-bot-message r="${r}" />
                     `;
 
                     // Make fetch request to server
@@ -173,6 +155,8 @@
                 }
 
                 function handleCallback() {
+                    let r = (Math.random() + 1).toString(36).substring(7);
+
                     fetch('/sidekick/playground/chat/update', {
                         method: 'POST',
                         headers: {
@@ -190,13 +174,9 @@ function handleCallback() {
                         loader.remove();
 
                         responseContainer.innerHTML += `
-                        <div class="flex items-start justify-end">
-                            <div class="bg-blue-800 text-white p-4 rounded-lg w-3/4">
-                                <p class="font-bold flex items-center gap-x-1 pb-2">
-                                        @include('Components.bot') Assistant</p>
-                                <p>${response}</p>
-                            </div>
-                        </div>
+                        <x-sidekick-bot-message r="${r}">
+                            ${response}
+                        </x-sidekick-bot-message>
                         `;
 
                         container.scrollTop = container.scrollHeight;